⚛️ Render HTML directly

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jupyterlab-myst",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Use MyST in JupyterLab",
   "keywords": [
     "jupyter",
@@ -59,6 +59,7 @@
   },
   "dependencies": {
     "@jupyterlab/application": "^4.0.0",
+    "@jupyterlab/apputils": "^4.0.0",
     "@jupyterlab/codeeditor": "^4.0.0",
     "@jupyterlab/markdownviewer": "^4.0.0",
     "@jupyterlab/notebook": "^4.0.0",
@@ -68,15 +69,17 @@
     "@myst-theme/frontmatter": "^0.5.6",
     "@myst-theme/providers": "^0.5.6",
     "katex": "^0.15.2",
+    "myst-common": "^1.1.5",
     "myst-ext-card": "^1.0.0",
     "myst-ext-exercise": "^1.0.0",
     "myst-ext-grid": "^1.0.0",
     "myst-ext-proof": "^1.0.0",
     "myst-ext-tabs": "^1.0.0",
-    "myst-frontmatter": "^1.0.1",
-    "myst-parser": "^1.0.2",
+    "myst-frontmatter": "^1.1.5",
+    "myst-parser": "^1.0.7",
+    "myst-to-html": "^1.0.7",
     "myst-to-react": "^0.5.6",
-    "myst-transforms": "^1.0.2"
+    "myst-transforms": "^1.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",

src/MySTMarkdownCell.tsx

@@ -41,7 +41,8 @@ export class MySTMarkdownCell
       rendermime: this._notebookRendermime,
       linkHandler: this._notebookRendermime.linkHandler ?? undefined,
       resolver: this._attachmentsResolver,
-      trusted: this.model.trusted
+      trusted: this.model.trusted,
+      sanitizer: this._notebookRendermime.sanitizer ?? undefined
     });
     this._mystWidget.taskItemChanged.connect((caller, change) =>
       this.setTaskItem(caller, change)

src/SanitizerProvider.tsx

@@ -0,0 +1,27 @@
+import React, { createContext, useContext } from 'react';
+import { ISanitizer } from '@jupyterlab/apputils';
+
+type SanitizerState = {
+  sanitizer?: ISanitizer;
+};
+
+const SanitizerContext = createContext<SanitizerState | undefined>(undefined);
+
+// Create a provider for components to consume and subscribe to changes
+export function SanitizerProvider({
+  sanitizer,
+  children
+}: {
+  sanitizer?: ISanitizer;
+  children: React.ReactNode;
+}): JSX.Element {
+  return (
+    <SanitizerContext.Provider value={{ sanitizer }}>
+      {children}
+    </SanitizerContext.Provider>
+  );
+}
+
+export function useSanitizer(): SanitizerState {
+  return useContext(SanitizerContext) ?? {};
+}

src/mime.tsx

@@ -18,7 +18,8 @@ export class RenderedMySTMarkdown
     super({
       model: undefined,
       resolver: options.resolver ?? undefined,
-      linkHandler: options.linkHandler ?? undefined
+      linkHandler: options.linkHandler ?? undefined,
+      sanitizer: options.sanitizer ?? undefined
     });
     this.resolver = options.resolver ?? undefined;
     this.node.dataset['mimeType'] = MIME_TYPE;

src/myst.ts

@@ -9,10 +9,10 @@ import {
   getFrontmatter,
   GithubTransformer,
   glossaryPlugin,
-  htmlPlugin,
   keysPlugin,
   linksPlugin,
   mathPlugin,
+  reconstructHtmlTransform,
   ReferenceState,
   resolveReferencesPlugin,
   RRIDTransformer,
@@ -65,15 +65,6 @@ export function markdownParse(text: string): Root {
   // This is consistent with the current Jupyter markdown renderer
   unified()
     .use(basicTransformationsPlugin)
-    .use(htmlPlugin, {
-      htmlHandlers: {
-        comment(h: any, node: any) {
-          const result = h(node, 'comment');
-          (result as any).value = node.value;
-          return result;
-        }
-      }
-    })
     .runSync(mdast as any);
   return mdast as Root;
 }
@@ -127,6 +118,9 @@ export async function processArticleMDAST(
   await internalLinksTransform(mdast, { resolver });
   await imageUrlSourceTransform(mdast, { resolver });
 
+  // Fix inline html
+  reconstructHtmlTransform(mdast);
+
   return {
     references,
     frontmatter,
@@ -192,6 +186,9 @@ export async function processNotebookMDAST(
 
   await internalLinksTransform(mdast, { resolver });
 
+  // Fix inline html
+  reconstructHtmlTransform(mdast);
+
   if (file.messages.length > 0) {
     // TODO: better error messages in the future
     console.error(file.messages.map(m => m.message).join('\n'));

src/renderers.tsx

@@ -4,12 +4,25 @@ import { MermaidNodeRenderer } from '@myst-theme/diagrams';
 import { NodeRenderer } from '@myst-theme/providers';
 import { InlineRenderer } from './inlineExpression';
 import { listItem } from './taskItem';
+import { useSanitizer } from './SanitizerProvider';
 
 export const renderers: Record<string, NodeRenderer> = {
   ...DEFAULT_RENDERERS,
   mermaid: MermaidNodeRenderer,
   inlineExpression: ({ node }) => {
     return <InlineRenderer value={node.value} />;
   },
-  listItem
+  listItem,
+  html: ({ node }, children) => {
+    const { sanitizer } = useSanitizer();
+    if (sanitizer !== undefined) {
+      return (
+        <span
+          dangerouslySetInnerHTML={{ __html: sanitizer.sanitize(node.value) }}
+        ></span>
+      );
+    } else {
+      return <pre> {`${node.value}`} </pre>;
+    }
+  }
 };

src/widget.tsx

@@ -1,7 +1,7 @@
 import { IRenderMime } from '@jupyterlab/rendermime-interfaces';
 import { ISignal, Signal } from '@lumino/signaling';
 import { FrontmatterBlock } from '@myst-theme/frontmatter';
-import { VDomModel, VDomRenderer } from '@jupyterlab/apputils';
+import { ISanitizer, VDomModel, VDomRenderer } from '@jupyterlab/apputils';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { References } from 'myst-common';
 import { PageFrontmatter } from 'myst-frontmatter';
@@ -22,6 +22,7 @@ import {
 import { renderers } from './renderers';
 import { IUserExpressionMetadata } from './metadata';
 import { linkFactory } from './links';
+import { SanitizerProvider } from './SanitizerProvider';
 
 /**
  * The MIME type for Markdown.
@@ -97,6 +98,7 @@ export interface IMySTOptions {
   linkHandler?: IRenderMime.ILinkHandler;
   rendermime?: IRenderMimeRegistry;
   trusted?: boolean;
+  sanitizer?: ISanitizer;
 }
 
 /**
@@ -109,13 +111,15 @@ export class MySTWidget extends VDomRenderer<IMySTModel> {
    * @param options - The options for initializing the widget.
    */
   constructor(options: IMySTOptions) {
-    const { model, resolver, linkHandler, rendermime, trusted } = options;
+    const { model, resolver, linkHandler, rendermime, trusted, sanitizer } =
+      options;
     super(model);
 
     this._resolver = resolver;
     this._linkHandler = linkHandler;
     this._rendermime = rendermime;
     this._trusted = trusted;
+    this._sanitizer = sanitizer;
     this.addClass('myst');
 
     this._taskItemController = change => this._taskItemChanged.emit(change);
@@ -124,6 +128,7 @@ export class MySTWidget extends VDomRenderer<IMySTModel> {
   private _trusted?: boolean = false;
   private readonly _resolver?: IRenderMime.IResolver;
   private readonly _linkHandler?: IRenderMime.ILinkHandler;
+  private readonly _sanitizer?: IRenderMime.ISanitizer;
   private readonly _rendermime?: IRenderMimeRegistry;
   private readonly _taskItemChanged = new Signal<this, ITaskItemChange>(this);
   private readonly _taskItemController: ITaskItemController;
@@ -159,21 +164,25 @@ export class MySTWidget extends VDomRenderer<IMySTModel> {
           Link={linkFactory(this._resolver, this._linkHandler)}
           renderers={renderers}
         >
-          <UserExpressionsProvider
-            expressions={expressions}
-            rendermime={this._rendermime}
-            trusted={this._trusted}
-          >
-            <TabStateProvider>
-              <ReferencesProvider
-                references={references}
-                frontmatter={frontmatter}
-              >
-                {frontmatter && <FrontmatterBlock frontmatter={frontmatter} />}
-                <MyST ast={mdast}></MyST>
-              </ReferencesProvider>
-            </TabStateProvider>
-          </UserExpressionsProvider>
+          <SanitizerProvider sanitizer={this._sanitizer}>
+            <UserExpressionsProvider
+              expressions={expressions}
+              rendermime={this._rendermime}
+              trusted={this._trusted}
+            >
+              <TabStateProvider>
+                <ReferencesProvider
+                  references={references}
+                  frontmatter={frontmatter}
+                >
+                  {frontmatter && (
+                    <FrontmatterBlock frontmatter={frontmatter} />
+                  )}
+                  <MyST ast={mdast}></MyST>
+                </ReferencesProvider>
+              </TabStateProvider>
+            </UserExpressionsProvider>
+          </SanitizerProvider>
         </ThemeProvider>
       </TaskItemControllerProvider>
     );

style/jupyterlab-typography.css

@@ -44,6 +44,10 @@
     margin-bottom: 0.5em;
   }
 
+  .myst hr {
+    border-top-width: 2px;
+  }
+
   .article {
     /* This is a required class currently in the hover-card */
     @apply myst;