@jupyterlab/markedparser-extension 4.0.4 → 4.1.0-alpha.1

package/lib/index.d.ts

@@ -5,13 +5,29 @@
 import { JupyterFrontEndPlugin } from '@jupyterlab/application';
 import { IEditorLanguageRegistry } from '@jupyterlab/codemirror';
 import { IMarkdownParser } from '@jupyterlab/rendermime';
+/**
+ * An interface for fenced code block renderers.
+ */
+export interface IFencedBlockRenderer {
+    languages: string[];
+    rank: number;
+    walk: (text: string) => Promise<void>;
+    render: (text: string) => string | null;
+}
+/**
+ * Options
+ */
+export interface IRenderOptions {
+    /** handlers for fenced code blocks */
+    blocks?: IFencedBlockRenderer[];
+}
 /**
  * Create a markdown parser
  *
  * @param languages Editor languages
  * @returns Markdown parser
  */
-export declare function createMarkdownParser(languages: IEditorLanguageRegistry): {
+export declare function createMarkdownParser(languages: IEditorLanguageRegistry, options?: IRenderOptions): {
     render: (content: string) => Promise<string>;
 };
 /**

package/lib/index.js

@@ -6,28 +6,24 @@
  * @packageDocumentation
  * @module markedparser-extension
  */
+import { PromiseDelegate } from '@lumino/coreutils';
+import { LruCache } from '@jupyterlab/coreutils';
 import { IEditorLanguageRegistry } from '@jupyterlab/codemirror';
 import { IMarkdownParser } from '@jupyterlab/rendermime';
-import { marked } from 'marked';
+import { IMermaidMarkdown } from '@jupyterlab/mermaid';
+// highlight cache key separator
+const FENCE = '```~~~';
 /**
  * Create a markdown parser
  *
  * @param languages Editor languages
  * @returns Markdown parser
  */
-export function createMarkdownParser(languages) {
-    Private.initializeMarked(languages);
+export function createMarkdownParser(languages, options) {
     return {
-        render: (content) => new Promise((resolve, reject) => {
-            marked(content, (err, content) => {
-                if (err) {
-                    reject(err);
-                }
-                else {
-                    resolve(content);
-                }
-            });
-        })
+        render: (content) => {
+            return Private.render(content, languages, options);
+        }
     };
 }
 /**
@@ -39,58 +35,161 @@ const plugin = {
     autoStart: true,
     provides: IMarkdownParser,
     requires: [IEditorLanguageRegistry],
-    activate: (app, languages) => {
-        return createMarkdownParser(languages);
+    optional: [IMermaidMarkdown],
+    activate: (app, languages, mermaidMarkdown) => {
+        return createMarkdownParser(languages, {
+            blocks: mermaidMarkdown ? [mermaidMarkdown] : []
+        });
     }
 };
 /**
  * Export the plugin as default.
  */
 export default plugin;
+/**
+ * A namespace for private marked functions
+ */
 var Private;
 (function (Private) {
-    let markedInitialized = false;
-    function initializeMarked(languages) {
-        if (markedInitialized) {
-            return;
+    let _initializing = null;
+    let _marked = null;
+    let _blocks = [];
+    let _languages = null;
+    let _markedOptions = {};
+    let _highlights = new LruCache();
+    async function render(content, languages, options) {
+        _languages = languages;
+        if (!_marked) {
+            _marked = await initializeMarked(options);
         }
-        else {
-            markedInitialized = true;
+        return _marked(content, _markedOptions);
+    }
+    Private.render = render;
+    /**
+     * Load marked lazily and exactly once.
+     */
+    async function initializeMarked(options) {
+        if (_marked) {
+            return _marked;
         }
-        marked.setOptions({
+        if (_initializing) {
+            return await _initializing.promise;
+        }
+        // order blocks by `rank`
+        _blocks = (options === null || options === void 0 ? void 0 : options.blocks) || [];
+        _blocks = _blocks.sort((a, b) => { var _a, _b; return ((_a = a.rank) !== null && _a !== void 0 ? _a : Infinity) - ((_b = b.rank) !== null && _b !== void 0 ? _b : Infinity); });
+        _initializing = new PromiseDelegate();
+        // load marked lazily, and exactly once
+        const [{ marked, Renderer }, plugins] = await Promise.all([
+            import('marked'),
+            loadMarkedPlugins()
+        ]);
+        // use load marked plugins
+        for (const plugin of plugins) {
+            marked.use(plugin);
+        }
+        // finish marked configuration
+        _markedOptions = {
+            // use the explicit async paradigm for `walkTokens`
+            async: true,
+            // enable all built-in GitHub-flavored Markdown opinions
             gfm: true,
+            // santizing is applied by the sanitizer
             sanitize: false,
-            // breaks: true; We can't use GFM breaks as it causes problems with tables
-            langPrefix: `language-`,
-            highlight: (code, lang, callback) => {
-                const cb = (err, code) => {
-                    if (callback) {
-                        callback(err, code);
+            // asynchronously prepare for any special tokens, like highlighting and mermaid
+            walkTokens,
+            // use custom renderer
+            renderer: makeRenderer(Renderer)
+        };
+        // complete initialization
+        _marked = marked;
+        _initializing.resolve(_marked);
+        return _marked;
+    }
+    Private.initializeMarked = initializeMarked;
+    /**
+     * Load and use marked plugins.
+     *
+     * As of writing, both of these features would work without plugins, but emit
+     * deprecation warnings.
+     */
+    async function loadMarkedPlugins() {
+        // use loaded marked plugins
+        return Promise.all([
+            (async () => (await import('marked-gfm-heading-id')).gfmHeadingId())(),
+            (async () => (await import('marked-mangle')).mangle())()
+        ]);
+    }
+    /**
+     * Build a custom marked renderer.
+     */
+    function makeRenderer(Renderer_) {
+        const renderer = new Renderer_();
+        const originalCode = renderer.code;
+        renderer.code = (code, language) => {
+            // handle block renderers
+            for (const block of _blocks) {
+                if (block.languages.includes(language)) {
+                    const rendered = block.render(code);
+                    if (rendered != null) {
+                        return rendered;
                     }
-                    return code;
-                };
-                if (!lang) {
-                    // no language, no highlight
-                    return cb(null, code);
-                }
-                const el = document.createElement('div');
-                try {
-                    languages
-                        .highlight(code, languages.findBest(lang), el)
-                        .then(() => {
-                        return cb(null, el.innerHTML);
-                    })
-                        .catch(reason => {
-                        return cb(reason, code);
-                    });
-                }
-                catch (err) {
-                    console.error(`Failed to highlight ${lang} code`, err);
-                    return cb(err, code);
                 }
             }
-        });
+            // handle known highlighting
+            const key = `${language}${FENCE}${code}${FENCE}`;
+            const highlight = _highlights.get(key);
+            if (highlight != null) {
+                return highlight;
+            }
+            // fall back to calling with the renderer as `this`
+            return originalCode.call(renderer, code, language);
+        };
+        return renderer;
+    }
+    /**
+     * Apply and cache syntax highlighting for code blocks.
+     */
+    async function highlight(token) {
+        const { lang, text } = token;
+        if (!lang || !_languages) {
+            // no language(s), no highlight
+            return;
+        }
+        const key = `${lang}${FENCE}${text}${FENCE}`;
+        if (_highlights.get(key)) {
+            // already cached, don't make another DOM element
+            return;
+        }
+        const el = document.createElement('div');
+        try {
+            await _languages.highlight(text, _languages.findBest(lang), el);
+            const html = `<pre><code class="language-${lang}">${el.innerHTML}</code></pre>`;
+            _highlights.set(key, html);
+        }
+        catch (err) {
+            console.error(`Failed to highlight ${lang} code`, err);
+        }
+        finally {
+            el.remove();
+        }
+    }
+    /**
+     * After parsing, lazily load and render or highlight code blocks
+     */
+    async function walkTokens(token) {
+        switch (token.type) {
+            case 'code':
+                if (token.lang) {
+                    for (const block of _blocks) {
+                        if (block.languages.includes(token.lang)) {
+                            await block.walk(token.text);
+                            return;
+                        }
+                    }
+                }
+                await highlight(token);
+        }
     }
-    Private.initializeMarked = initializeMarked;
 })(Private || (Private = {}));
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyterlab/markedparser-extension",
-  "version": "4.0.4",
+  "version": "4.1.0-alpha.1",
   "description": "JupyterLab - Markdown parser provider",
   "homepage": "https://github.com/jupyterlab/jupyterlab",
   "bugs": {
@@ -24,6 +24,7 @@
   },
   "files": [
     "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+    "style/base.css",
     "style/index.css",
     "style/index.js",
     "src/**/*.{ts,tsx}"
@@ -35,13 +36,19 @@
     "watch": "tsc -b --watch"
   },
   "dependencies": {
-    "@jupyterlab/application": "^4.0.4",
-    "@jupyterlab/codemirror": "^4.0.4",
-    "@jupyterlab/rendermime": "^4.0.4",
-    "marked": "^4.0.17"
+    "@jupyterlab/application": "^4.1.0-alpha.1",
+    "@jupyterlab/codemirror": "^4.1.0-alpha.1",
+    "@jupyterlab/coreutils": "^6.1.0-alpha.1",
+    "@jupyterlab/mermaid": "^4.1.0-alpha.1",
+    "@jupyterlab/rendermime": "^4.1.0-alpha.1",
+    "@lumino/coreutils": "^2.1.2",
+    "marked": "^7.0.2",
+    "marked-gfm-heading-id": "^3.0.6",
+    "marked-mangle": "^1.1.2"
   },
   "devDependencies": {
-    "@types/marked": "^4.0.3",
+    "@types/d3": "^7.4.0",
+    "@types/dompurify": "^2.4.0",
     "rimraf": "~3.0.0",
     "typedoc": "~0.24.7",
     "typescript": "~5.0.4"

package/src/index.ts

@@ -7,13 +7,41 @@
  * @module markedparser-extension
  */
 
+import { PromiseDelegate } from '@lumino/coreutils';
+
 import {
   JupyterFrontEnd,
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
+import { LruCache } from '@jupyterlab/coreutils';
 import { IEditorLanguageRegistry } from '@jupyterlab/codemirror';
 import { IMarkdownParser } from '@jupyterlab/rendermime';
-import { marked } from 'marked';
+import { IMermaidMarkdown } from '@jupyterlab/mermaid';
+
+import type { marked, Renderer } from 'marked';
+import type { MarkedExtension, MarkedOptions } from 'MarkedOptions';
+import type { Token, Tokens } from 'Tokens';
+
+// highlight cache key separator
+const FENCE = '```~~~';
+
+/**
+ * An interface for fenced code block renderers.
+ */
+export interface IFencedBlockRenderer {
+  languages: string[];
+  rank: number;
+  walk: (text: string) => Promise<void>;
+  render: (text: string) => string | null;
+}
+
+/**
+ * Options
+ */
+export interface IRenderOptions {
+  /** handlers for fenced code blocks */
+  blocks?: IFencedBlockRenderer[];
+}
 
 /**
  * Create a markdown parser
@@ -21,19 +49,14 @@ import { marked } from 'marked';
  * @param languages Editor languages
  * @returns Markdown parser
  */
-export function createMarkdownParser(languages: IEditorLanguageRegistry) {
-  Private.initializeMarked(languages);
+export function createMarkdownParser(
+  languages: IEditorLanguageRegistry,
+  options?: IRenderOptions
+) {
   return {
-    render: (content: string): Promise<string> =>
-      new Promise<string>((resolve, reject) => {
-        marked(content, (err: any, content: string) => {
-          if (err) {
-            reject(err);
-          } else {
-            resolve(content);
-          }
-        });
-      })
+    render: (content: string): Promise<string> => {
+      return Private.render(content, languages, options);
+    }
   };
 }
 
@@ -46,8 +69,15 @@ const plugin: JupyterFrontEndPlugin<IMarkdownParser> = {
   autoStart: true,
   provides: IMarkdownParser,
   requires: [IEditorLanguageRegistry],
-  activate: (app: JupyterFrontEnd, languages: IEditorLanguageRegistry) => {
-    return createMarkdownParser(languages);
+  optional: [IMermaidMarkdown],
+  activate: (
+    app: JupyterFrontEnd,
+    languages: IEditorLanguageRegistry,
+    mermaidMarkdown: IMermaidMarkdown | null
+  ) => {
+    return createMarkdownParser(languages, {
+      blocks: mermaidMarkdown ? [mermaidMarkdown] : []
+    });
   }
 };
 
@@ -56,46 +86,169 @@ const plugin: JupyterFrontEndPlugin<IMarkdownParser> = {
  */
 export default plugin;
 
+/**
+ * A namespace for private marked functions
+ */
 namespace Private {
-  let markedInitialized = false;
-  export function initializeMarked(languages: IEditorLanguageRegistry): void {
-    if (markedInitialized) {
-      return;
-    } else {
-      markedInitialized = true;
+  let _initializing: PromiseDelegate<typeof marked> | null = null;
+  let _marked: typeof marked | null = null;
+  let _blocks: IFencedBlockRenderer[] = [];
+  let _languages: IEditorLanguageRegistry | null = null;
+  let _markedOptions: MarkedOptions = {};
+  let _highlights = new LruCache<string, string>();
+
+  export async function render(
+    content: string,
+    languages: IEditorLanguageRegistry,
+    options?: IRenderOptions
+  ): Promise<string> {
+    _languages = languages;
+    if (!_marked) {
+      _marked = await initializeMarked(options);
+    }
+    return _marked(content, _markedOptions);
+  }
+
+  /**
+   * Load marked lazily and exactly once.
+   */
+  export async function initializeMarked(
+    options?: IRenderOptions
+  ): Promise<typeof marked> {
+    if (_marked) {
+      return _marked;
+    }
+
+    if (_initializing) {
+      return await _initializing.promise;
+    }
+
+    // order blocks by `rank`
+    _blocks = options?.blocks || [];
+    _blocks = _blocks.sort(
+      (a, b) => (a.rank ?? Infinity) - (b.rank ?? Infinity)
+    );
+
+    _initializing = new PromiseDelegate();
+
+    // load marked lazily, and exactly once
+    const [{ marked, Renderer }, plugins] = await Promise.all([
+      import('marked'),
+      loadMarkedPlugins()
+    ]);
+
+    // use load marked plugins
+    for (const plugin of plugins) {
+      marked.use(plugin);
     }
 
-    marked.setOptions({
+    // finish marked configuration
+    _markedOptions = {
+      // use the explicit async paradigm for `walkTokens`
+      async: true,
+      // enable all built-in GitHub-flavored Markdown opinions
       gfm: true,
+      // santizing is applied by the sanitizer
       sanitize: false,
-      // breaks: true; We can't use GFM breaks as it causes problems with tables
-      langPrefix: `language-`,
-      highlight: (code, lang, callback) => {
-        const cb = (err: Error | null, code: string) => {
-          if (callback) {
-            callback(err, code);
+      // asynchronously prepare for any special tokens, like highlighting and mermaid
+      walkTokens,
+      // use custom renderer
+      renderer: makeRenderer(Renderer)
+    };
+
+    // complete initialization
+    _marked = marked;
+    _initializing.resolve(_marked);
+    return _marked;
+  }
+
+  /**
+   * Load and use marked plugins.
+   *
+   * As of writing, both of these features would work without plugins, but emit
+   * deprecation warnings.
+   */
+  async function loadMarkedPlugins(): Promise<MarkedExtension[]> {
+    // use loaded marked plugins
+    return Promise.all([
+      (async () => (await import('marked-gfm-heading-id')).gfmHeadingId())(),
+      (async () => (await import('marked-mangle')).mangle())()
+    ]);
+  }
+
+  /**
+   * Build a custom marked renderer.
+   */
+  function makeRenderer(Renderer_: typeof Renderer): Renderer {
+    const renderer = new Renderer_();
+    const originalCode = renderer.code;
+
+    renderer.code = (code: string, language: string) => {
+      // handle block renderers
+      for (const block of _blocks) {
+        if (block.languages.includes(language)) {
+          const rendered = block.render(code);
+          if (rendered != null) {
+            return rendered;
           }
-          return code;
-        };
-        if (!lang) {
-          // no language, no highlight
-          return cb(null, code);
-        }
-        const el = document.createElement('div');
-        try {
-          languages
-            .highlight(code, languages.findBest(lang), el)
-            .then(() => {
-              return cb(null, el.innerHTML);
-            })
-            .catch(reason => {
-              return cb(reason, code);
-            });
-        } catch (err) {
-          console.error(`Failed to highlight ${lang} code`, err);
-          return cb(err, code);
         }
       }
-    });
+
+      // handle known highlighting
+      const key = `${language}${FENCE}${code}${FENCE}`;
+      const highlight = _highlights.get(key);
+      if (highlight != null) {
+        return highlight;
+      }
+
+      // fall back to calling with the renderer as `this`
+      return originalCode.call(renderer, code, language);
+    };
+
+    return renderer;
+  }
+
+  /**
+   * Apply and cache syntax highlighting for code blocks.
+   */
+  async function highlight(token: Tokens.Code): Promise<void> {
+    const { lang, text } = token;
+    if (!lang || !_languages) {
+      // no language(s), no highlight
+      return;
+    }
+    const key = `${lang}${FENCE}${text}${FENCE}`;
+    if (_highlights.get(key)) {
+      // already cached, don't make another DOM element
+      return;
+    }
+    const el = document.createElement('div');
+    try {
+      await _languages.highlight(text, _languages.findBest(lang), el);
+      const html = `<pre><code class="language-${lang}">${el.innerHTML}</code></pre>`;
+      _highlights.set(key, html);
+    } catch (err) {
+      console.error(`Failed to highlight ${lang} code`, err);
+    } finally {
+      el.remove();
+    }
+  }
+
+  /**
+   * After parsing, lazily load and render or highlight code blocks
+   */
+  async function walkTokens(token: Token): Promise<void> {
+    switch (token.type) {
+      case 'code':
+        if (token.lang) {
+          for (const block of _blocks) {
+            if (block.languages.includes(token.lang)) {
+              await block.walk(token.text);
+              return;
+            }
+          }
+        }
+        await highlight(token as Tokens.Code);
+    }
   }
 }

package/style/base.css

@@ -0,0 +1,4 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */

package/style/index.css

@@ -7,3 +7,5 @@
 @import url('~@jupyterlab/rendermime/style/index.css');
 @import url('~@jupyterlab/application/style/index.css');
 @import url('~@jupyterlab/codemirror/style/index.css');
+@import url('~@jupyterlab/mermaid/style/index.css');
+@import url('./base.css');

package/style/index.js

@@ -7,3 +7,6 @@
 import '@jupyterlab/rendermime/style/index.js';
 import '@jupyterlab/application/style/index.js';
 import '@jupyterlab/codemirror/style/index.js';
+import '@jupyterlab/mermaid/style/index.js';
+
+import './base.css';