Feat: use new separated diagram extensions

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agoose77/jupyterlab-markup",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "Additional markdown rendering support in JupyterLab.",
   "keywords": [
     "jupyter",
@@ -58,7 +58,8 @@
     "markdown-it": "^12.3.2",
     "markdown-it-anchor": "^6.0.0",
     "markdown-it-deflist": "^2.0.3",
-    "markdown-it-diagrams": "0.2.0-alpha.0",
+    "@agoose77/markdown-it-svgbob": "0.1.0a0",
+    "@agoose77/markdown-it-mermaid": "0.1.0a0",
     "markdown-it-footnote": "^3.0.2",
     "markdown-it-task-lists": "^2.1.1",
     "react": "^17.0.1"

src/builtins/index.ts

@@ -1,10 +1,11 @@
 import { anchor } from './anchor';
 import { deflist } from './deflist';
-import { diagrams } from './diagrams';
+import { svgbob } from './svgbob';
+import { mermaid } from './mermaid';
 import { footnote } from './footnote';
 import { taskLists } from './task-lists';
 
 /**
  * Builtin plugins provided by this labextension
  */
-export const BUILTINS = [anchor, deflist, diagrams, footnote, taskLists];
+export const BUILTINS = [anchor, deflist, footnote, mermaid, svgbob, taskLists];

src/builtins/mermaid.ts

@@ -0,0 +1,30 @@
+import { PACKAGE_NS, simpleMarkdownItPlugin } from '..';
+
+/**
+ * Provides text-based diagrams in code blocks
+ */
+export const mermaid = simpleMarkdownItPlugin(PACKAGE_NS, {
+  id: '@agoose77/markdown-it-mermaid',
+  title: 'Mermaid',
+  description: 'Create diagrams and visualizations using text and code.',
+  documentationUrls: {
+    Plugin: 'https://github.com/agoose77/markdown-it-mermaid',
+    MermaidJS: 'https://mermaid-js.github.io/mermaid'
+  },
+  examples: {
+    'Mermaid Flowchart': `
+  \`\`\`mermaid
+  graph TD;
+      A-->B;
+      A-->C;
+      B-->D;
+      C-->D;
+  \`\`\``
+  },
+  plugin: async () => {
+    const mermaidPlugin = await import(
+      /* webpackChunkName: "markdown-it-diagrams" */ '@agoose77/markdown-it-mermaid'
+    );
+    return [mermaidPlugin.default];
+  }
+});

src/builtins/svgbob.ts

@@ -0,0 +1,33 @@
+import { PACKAGE_NS, simpleMarkdownItPlugin } from '..';
+
+/**
+ * Provides ASCII diagrams in code blocks
+ */
+export const svgbob = simpleMarkdownItPlugin(PACKAGE_NS, {
+  id: '@agoose77/markdown-it-svgbob',
+  title: 'Svgbob',
+  description: 'ASCII diagrams rendered by Svgbob',
+  documentationUrls: {
+    Plugin: 'https://github.com/agoose77/markdown-it-svgbob',
+    svgbob: 'https://github.com/ivanceras/svgbob'
+  },
+  examples: {
+    svgbob: `
+  \`\`\`svgbob
+       .---.
+      /-o-/--
+   .-/ / /->
+  ( *  \\/
+   '-.  \\
+      \\ /
+       '
+  \`\`\`
+          `
+  },
+  plugin: async () => {
+    const factory = await import(
+      /* webpackChunkName: "markdown-it-diagrams" */ '@agoose77/markdown-it-svgbob'
+    );
+    return [await factory.default()];
+  }
+});