fix styles and scrolling + pin some dependencies

package.json

@@ -58,6 +58,7 @@
     "dependencies": {
         "@jupyterlab/application": "^3.1.0",
         "@jupyterlab/codeeditor": "^3.5.1",
+        "@jupyterlab/markdownviewer": "3.5.1",
         "@jupyterlab/notebook": "^3.5.1",
         "@jupyterlab/rendermime": "^3.5.1",
         "@jupyterlab/translation": "^3.5.1",
@@ -82,7 +83,8 @@
         "@myst-theme/styles": "^0.1.32",
         "@tailwindcss/typography": "^0.5.8",
         "@types/jest": "^26.0.0",
-        "@types/react-dom": "^18.0.10",
+        "@types/react": "^17.0.1",
+        "@types/react-dom": "^17.0.1",
         "@typescript-eslint/eslint-plugin": "^4.8.1",
         "@typescript-eslint/parser": "^4.8.1",
         "eslint": "^7.14.0",
@@ -101,6 +103,18 @@
         "ts-jest": "^26.0.0",
         "typescript": "~4.1.3"
     },
+    "resolutions": {
+        "@jupyterlab/application": "3.5.1",
+        "@jupyterlab/apputils": "3.5.1",
+        "@jupyterlab/builder": "3.5.1",
+        "@jupyterlab/codeeditor": "3.5.1",
+        "@jupyterlab/coreutils": "5.5.1",
+        "@jupyterlab/docregistry": "3.5.1",
+        "@jupyterlab/notebook": "3.5.1",
+        "@jupyterlab/rendermime": "3.5.1",
+        "@jupyterlab/testutils": "3.5.1",
+        "@jupyterlab/translation": "3.5.1"
+    },
     "sideEffects": [
         "style/*.css",
         "style/index.js"

src/MySTMarkdownCell.tsx

@@ -14,7 +14,7 @@ import {
 } from '@myst-theme/providers';
 import { render } from 'react-dom';
 import { useParse } from 'myst-to-react';
-import { parseContent } from './myst';
+import { renderNotebook } from './myst';
 import { IMySTMarkdownCell } from './types';
 import { linkFactory } from './links';
 import { selectAll } from 'unist-util-select';
@@ -54,7 +54,7 @@ export class MySTMarkdownCell
     this._doneRendering = new PromiseDelegate<void>();
     const notebook = this.parent as StaticNotebook;
     this.myst.pre = undefined;
-    const parseComplete = parseContent(notebook);
+    const parseComplete = renderNotebook(notebook);
     const widget = new Widget({ node: this.myst.node });
     widget.addClass('myst');
     widget.addClass('jp-MarkdownOutput');
@@ -97,7 +97,10 @@ export class MySTMarkdownCell
     render(
       <ThemeProvider
         theme={Theme.light}
-        Link={linkFactory(notebook)}
+        Link={linkFactory(
+          notebook.rendermime.resolver,
+          notebook.rendermime.linkHandler
+        )}
         renderers={renderers}
       >
         <JupyterCellProvider cell={this}>

src/icon.ts

@@ -0,0 +1,8 @@
+import { LabIcon } from '@jupyterlab/ui-components';
+
+import mystIconSvg from '../style/mystlogo.svg';
+
+export const mystIcon = new LabIcon({
+  name: 'jupyterlab-myst:mystIcon',
+  svgstr: mystIconSvg
+});

src/images.ts

@@ -1,11 +1,11 @@
-import type { Root } from 'myst-spec';
-import type { MarkdownCell } from '@jupyterlab/cells';
-import { AttachmentsResolver } from '@jupyterlab/attachments';
-import type { Image } from 'myst-spec';
+import type { Image, Root } from 'myst-spec';
 import { selectAll } from 'unist-util-select';
-import { StaticNotebook } from '@jupyterlab/notebook';
+import { IRenderMime } from '@jupyterlab/rendermime';
+import { MarkdownCell } from '@jupyterlab/cells';
+import { AttachmentsResolver } from '@jupyterlab/attachments';
 
 type Options = {
+  resolver: IRenderMime.IResolver | null;
   cell: MarkdownCell;
 };
 
@@ -17,9 +17,8 @@ export async function imageUrlSourceTransform(
   await Promise.all(
     images.map(async image => {
       if (!image || !image.url) return;
-      const parent = (opts.cell.parent as StaticNotebook).rendermime?.resolver;
       const resolver = new AttachmentsResolver({
-        parent: parent ?? undefined,
+        parent: opts.resolver ?? undefined,
         model: opts.cell.model.attachments
       });
       const path = await resolver.resolveUrl(image.url);

src/index.ts

@@ -2,6 +2,7 @@ import {
   JupyterFrontEnd,
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
+import { IMarkdownViewerTracker } from '@jupyterlab/markdownviewer';
 
 import { IEditorServices } from '@jupyterlab/codeeditor';
 
@@ -20,15 +21,9 @@ import { ISessionContextDialogs } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 
 import { ITranslator } from '@jupyterlab/translation';
-import { LabIcon } from '@jupyterlab/ui-components';
-
-import mystIconSvg from '../style/mystlogo.svg';
 import { notebookExecuted } from './actions';
-
-const mystIcon = new LabIcon({
-  name: 'myst-notebook-extension:mystIcon',
-  svgstr: mystIconSvg
-});
+import { mystIcon } from './icon';
+import { mystMarkdownRendererFactory } from './mime';
 
 /**
  * The notebook content factory provider.
@@ -124,7 +119,7 @@ const legacyPlugin: JupyterFrontEndPlugin<void> = {
 /**
  * The notebook cell executor.
  */
-const executor: JupyterFrontEndPlugin<void> = {
+const executorPlugin: JupyterFrontEndPlugin<void> = {
   id: 'jupyterlab-myst:executor',
   requires: [INotebookTracker],
   autoStart: true,
@@ -142,4 +137,20 @@ const executor: JupyterFrontEndPlugin<void> = {
   }
 };
 
-export default [plugin, legacyPlugin, executor];
+const mimeRendererPlugin: JupyterFrontEndPlugin<void> = {
+  id: 'jupyterlab-myst:mimeRenderer',
+  requires: [IRenderMimeRegistry],
+  autoStart: true,
+  optional: [IMarkdownViewerTracker],
+  activate: (
+    app: JupyterFrontEnd,
+    registry: IRenderMimeRegistry,
+    tracker?: IMarkdownViewerTracker
+  ) => {
+    console.log('Using jupyterlab-myst:mimeRenderer');
+    // Add the MyST markdown renderer factory.
+    registry.addFactory(mystMarkdownRendererFactory);
+  }
+};
+
+export default [plugin, legacyPlugin, executorPlugin, mimeRendererPlugin];

src/inlineExpression.tsx

@@ -21,7 +21,7 @@ export interface IRenderedExpressionOptions {
 export class RenderedExpressionError extends Widget {
   constructor() {
     super();
-    this.addClass('myst-RenderedExpressionError');
+    this.addClass('jp-RenderedExpressionError');
   }
 }
 
@@ -39,7 +39,7 @@ export class RenderedExpression extends Widget {
     this.rendermime = options.rendermime;
     this.safe = options.safe;
 
-    this.addClass('myst-RenderedExpression');
+    this.addClass('jp-RenderedExpression');
 
     // We can only hold one renderer at a time
     const layout = (this.layout = new SingletonLayout());

src/links.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import type { Plugin } from 'unified';
 import type { Root, Link } from 'myst-spec';
 import { selectAll } from 'unist-util-select';
-import type { StaticNotebook } from '@jupyterlab/notebook';
 import { URLExt } from '@jupyterlab/coreutils';
 import type { LinkProps } from '@myst-theme/providers';
 import { IRenderMime } from '@jupyterlab/rendermime';
@@ -63,17 +62,16 @@ function handleAnchor(
 }
 
 export const linkFactory =
-  (notebook: StaticNotebook) =>
+  (
+    resolver: IRenderMime.IResolver | null,
+    linkHandler: IRenderMime.ILinkHandler | null
+  ) =>
   (props: LinkProps): JSX.Element => {
     const ref = React.useRef<HTMLAnchorElement>(null);
     const { to: url } = props;
     React.useEffect(() => {
-      if (!ref || !ref.current || !notebook.rendermime.resolver) return;
-      handleAnchor(
-        ref.current,
-        notebook.rendermime.resolver,
-        notebook.rendermime.linkHandler
-      );
+      if (!ref || !ref.current || !resolver) return;
+      handleAnchor(ref.current, resolver, linkHandler);
     }, [ref, url]);
     return (
       <a href={url} ref={ref} className={props.className}>
@@ -83,7 +81,7 @@ export const linkFactory =
   };
 
 type Options = {
-  notebook: StaticNotebook;
+  resolver: IRenderMime.IResolver | null;
 };
 
 /**
@@ -96,7 +94,7 @@ export async function internalLinksTransform(
   const links = selectAll('link,linkBlock', tree) as Link[];
   links.forEach(async link => {
     if (!link || !link.url) return;
-    const resolver = opts.notebook.rendermime.resolver;
+    const resolver = opts.resolver;
     const isLocal = resolver?.isLocal
       ? resolver.isLocal(link.url)
       : URLExt.isLocal(link.url);