@dxos/plugin-mermaid 0.8.4-main.c4373fc → 0.8.4-main.d9fc60f731

package/package.json

@@ -1,57 +1,80 @@
 {
   "name": "@dxos/plugin-mermaid",
-  "version": "0.8.4-main.c4373fc",
+  "version": "0.8.4-main.d9fc60f731",
   "description": "Mermaid markdown plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
-  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "sideEffects": true,
   "type": "module",
+  "imports": {
+    "#meta": {
+      "source": "./src/meta.ts",
+      "types": "./dist/types/src/meta.d.ts",
+      "default": "./dist/lib/neutral/meta.mjs"
+    },
+    "#plugin": {
+      "source": "./src/MermaidPlugin.tsx",
+      "types": "./dist/types/src/MermaidPlugin.d.ts",
+      "default": "./dist/lib/neutral/MermaidPlugin.mjs"
+    }
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
-      "browser": "./dist/lib/browser/index.mjs"
+      "default": "./dist/lib/neutral/index.mjs"
+    },
+    "./assets/PLUGIN.mdl": "./PLUGIN.mdl",
+    "./plugin": {
+      "source": "./src/plugin.ts",
+      "types": "./dist/types/src/plugin.d.ts",
+      "default": "./dist/lib/neutral/plugin.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
-    "src"
+    "src",
+    "PLUGIN.mdl"
   ],
   "dependencies": {
-    "@codemirror/language": "^6.11.3",
-    "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.38.4",
-    "@preact-signals/safe-react": "^0.9.0",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.43.0",
     "mermaid": "^10.9.4",
-    "@dxos/app-framework": "0.8.4-main.c4373fc",
-    "@dxos/plugin-space": "0.8.4-main.c4373fc",
-    "@dxos/plugin-markdown": "0.8.4-main.c4373fc",
-    "@dxos/react-ui-editor": "0.8.4-main.c4373fc"
+    "@dxos/app-framework": "0.8.4-main.d9fc60f731",
+    "@dxos/operation": "0.8.4-main.d9fc60f731",
+    "@dxos/plugin-markdown": "0.8.4-main.d9fc60f731",
+    "@dxos/app-toolkit": "0.8.4-main.d9fc60f731",
+    "@dxos/ui-editor": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-editor": "0.8.4-main.d9fc60f731",
+    "@dxos/util": "0.8.4-main.d9fc60f731",
+    "@dxos/keys": "0.8.4-main.d9fc60f731"
   },
   "devDependencies": {
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.1",
-    "effect": "3.18.3",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
-    "vite": "7.1.9",
-    "@dxos/echo": "0.8.4-main.c4373fc",
-    "@dxos/react-ui": "0.8.4-main.c4373fc",
-    "@dxos/react-ui-theme": "0.8.4-main.c4373fc",
-    "@dxos/storybook-utils": "0.8.4-main.c4373fc"
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "effect": "3.21.2",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "^8.0.14",
+    "@dxos/echo": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui": "0.8.4-main.d9fc60f731",
+    "@dxos/storybook-utils": "0.8.4-main.d9fc60f731",
+    "@dxos/ui-theme": "0.8.4-main.d9fc60f731"
   },
   "peerDependencies": {
-    "effect": "^3.13.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.c4373fc",
-    "@dxos/react-ui-theme": "0.8.4-main.c4373fc"
+    "effect": "3.21.2",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.d9fc60f731",
+    "@dxos/ui-theme": "0.8.4-main.d9fc60f731"
   },
   "publishConfig": {
     "access": "public"

package/src/MermaidPlugin.test.ts

@@ -0,0 +1,30 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { ProcessManagerPlugin } from '@dxos/app-framework';
+import { createTestApp } from '@dxos/app-framework/testing';
+import { MarkdownEvents } from '@dxos/plugin-markdown';
+
+import { MermaidPlugin } from '#plugin';
+
+import { meta } from './meta';
+
+const moduleId = (name: string) => `${meta.id}.module.${name}`;
+
+describe('MermaidPlugin', () => {
+  test('modules activate on the expected events', async ({ expect }) => {
+    // Use createTestApp directly — only ProcessManagerPlugin and ProcessManagerPlugin are needed.
+    // MermaidPlugin has no surface module so SetupReactSurface firing harmlessly is fine.
+    await using harness = await createTestApp({
+      plugins: [ProcessManagerPlugin(), MermaidPlugin()],
+    });
+
+    // The markdown module activates on MarkdownEvents.SetupExtensions,
+    // which is fired by MarkdownPlugin before its ReactSurface activates.
+    await harness.fire(MarkdownEvents.SetupExtensions);
+    expect(harness.manager.getActive()).toContain(moduleId('markdown'));
+  });
+});

package/src/MermaidPlugin.tsx

@@ -2,16 +2,28 @@
 // Copyright 2023 DXOS.org
 //
 
-import { contributes, defineModule, definePlugin } from '@dxos/app-framework';
+import * as Effect from 'effect/Effect';
+
+import { Capability, Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
 import { MarkdownCapabilities, MarkdownEvents } from '@dxos/plugin-markdown';
 
+import { meta } from '#meta';
+
+// eslint-disable-next-line import/no-relative-packages
+import pluginSpec from '../PLUGIN.mdl?raw';
 import { mermaid } from './extensions';
-import { meta } from './meta';
 
-export const MermaidPlugin = definePlugin(meta, () => [
-  defineModule({
-    id: `${meta.id}/module/markdown`,
+export const MermaidPlugin = Plugin.define(meta).pipe(
+  Plugin.addModule({
+    id: 'markdown',
     activatesOn: MarkdownEvents.SetupExtensions,
-    activate: () => contributes(MarkdownCapabilities.Extensions, [mermaid]),
+    activate: () => Effect.succeed(Capability.contributes(MarkdownCapabilities.Extensions, [mermaid])),
   }),
-]);
+  AppPlugin.addPluginAssetModule({
+    asset: { pluginId: meta.id, path: 'PLUGIN.mdl', content: pluginSpec, mimeType: 'application/x-mdl' },
+  }),
+  Plugin.make,
+);
+
+export default MermaidPlugin;

package/src/extensions/mermaid-extension.ts

@@ -112,18 +112,18 @@ export const mermaid = (_options: MermaidOptions = {}): Extension => {
         maring: '4px 0',
         padding: '16px',
         justifyContent: 'center',
-        backgroundColor: 'var(--dx-groupSurface)',
+        backgroundColor: 'var(--color-group-surface)',
         borderRadius: '8px',
       },
       '& .cm-mermaid-label': {
         position: 'absolute',
         right: '16px',
         fontFamily: 'unset',
-        color: 'var(--dx-subdued)',
+        color: 'var(--color-subdued)',
       },
       '& .cm-mermaid-error': {
         display: 'inline-block',
-        color: 'var(--dx-errorText)',
+        color: 'var(--color-error)',
       },
       '& .cm-mermaid-hidden': {
         display: 'none !important',
@@ -145,11 +145,15 @@ class MermaidWidget extends WidgetType {
     super();
   }
 
-  override eq(other: this): boolean {
+  override eq(other: this) {
     return this._source === other._source;
   }
 
-  override toDOM(view: EditorView): HTMLDivElement {
+  override ignoreEvent(ev: Event) {
+    return !/^mouse/.test(ev.type);
+  }
+
+  override toDOM(view: EditorView) {
     const div = document.createElement('div');
     div.className = 'cm-mermaid';
 
@@ -208,8 +212,4 @@ class MermaidWidget extends WidgetType {
       this._svg = undefined;
     }
   }
-
-  override ignoreEvent(e: Event): boolean {
-    return !/^mouse/.test(e.type);
-  }
 }

package/src/extensions/mermaid.stories.tsx

@@ -6,24 +6,24 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { useThemeContext } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
+import { useTextEditor } from '@dxos/react-ui-editor';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import {
   createBasicExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
-  useTextEditor,
-} from '@dxos/react-ui-editor';
+} from '@dxos/ui-editor';
 
 import { mermaid } from './mermaid-extension';
 
 const str = (...lines: string[]) => lines.join('\n');
 
-type StoryProps = {
+type DefaultStoryProps = {
   text?: string;
 };
 
-const DefaultStory = ({ text }: StoryProps) => {
+const DefaultStory = ({ text }: DefaultStoryProps) => {
   const { themeMode } = useThemeContext();
   const { parentRef, focusAttributes } = useTextEditor(
     () => ({
@@ -43,12 +43,9 @@ const DefaultStory = ({ text }: StoryProps) => {
 };
 
 const meta = {
-  title: 'plugins/plugin-mermaid/extensions',
+  title: 'plugins/plugin-mermaid/extensions/mermaid',
   render: DefaultStory,
-  decorators: [withTheme],
-  parameters: {
-    layout: 'column',
-  },
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/index.ts

@@ -2,5 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './MermaidPlugin';
 export * from './meta';

package/src/meta.ts

@@ -2,12 +2,34 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type PluginMeta } from '@dxos/app-framework';
+import { Plugin } from '@dxos/app-framework';
+import { DXN } from '@dxos/keys';
+import { trim } from '@dxos/util';
 
-export const meta: PluginMeta = {
-  id: 'dxos.org/plugin/mermaid',
+export const meta = Plugin.makeMeta({
+  key: DXN.make('org.dxos.plugin.mermaid'),
   name: 'Mermaid',
-  description: 'Tool that renders text definitions to create diagrams.',
+  author: 'DXOS',
+  description: trim`
+    Generate diagrams from simple text-based definitions using Mermaid syntax.
+    Create flowcharts, sequence diagrams, class diagrams, state diagrams, entity-relationship
+    diagrams, Gantt charts, pie charts, Git graphs, mindmaps, and timelines — all from
+    plain-text source embedded directly in your documents.
+
+    The plugin integrates with the markdown editor as a CodeMirror extension.
+    Any fenced code block tagged with the \`mermaid\` language identifier is automatically
+    detected and replaced with a live SVG preview rendered by the Mermaid JS library.
+    The raw source is revealed for editing whenever the cursor moves inside the block,
+    then the rendered diagram is restored when the cursor moves away, providing a seamless
+    live-preview experience without leaving the editor.
+
+    Diagram rendering adapts to the editor's current color scheme: dark-mode documents
+    use Mermaid's dark theme while light-mode documents use the neutral theme.
+    Parse and render errors are shown inline in place of the diagram so that
+    invalid syntax is immediately visible without disrupting the rest of the document.
+  `,
   icon: 'ph--anchor-simple--regular',
+  iconHue: 'cyan',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-mermaid',
-};
+  spec: 'PLUGIN.mdl',
+});

package/src/plugin.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+
+import { meta } from './meta';
+
+export const MermaidPlugin = Plugin.lazy(meta, () => import('#plugin'));

package/src/vite-env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+//
+// Copyright 2026 DXOS.org
+//
+
+declare module '*.mdl?raw' {
+  const content: string;
+  export default content;
+}

package/dist/lib/browser/index.mjs

@@ -1,195 +0,0 @@
-// src/MermaidPlugin.tsx
-import { contributes, defineModule, definePlugin } from "@dxos/app-framework";
-import { MarkdownCapabilities, MarkdownEvents } from "@dxos/plugin-markdown";
-
-// src/extensions/mermaid-extension.ts
-import { syntaxTree } from "@codemirror/language";
-import { Decoration, EditorView, ViewPlugin, WidgetType } from "@codemirror/view";
-import _mermaid from "mermaid";
-function _define_property(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-var mermaid = (_options = {}) => {
-  return [
-    ViewPlugin.fromClass(class {
-      update(update) {
-        if (update.docChanged || update.viewportChanged || update.selectionSet || update.focusChanged) {
-          this.decorations = this.buildDecorations(update.view);
-        }
-      }
-      buildDecorations(view) {
-        const decorations = [];
-        syntaxTree(view.state).iterate({
-          enter: (node) => {
-            if (node.name === "FencedCode") {
-              const cursor = view.state.selection.main.head;
-              const showWidget = view.state.readOnly || cursor < node.from - 1 || cursor > node.to + 1;
-              if (showWidget) {
-                const info = node.node.getChild("CodeInfo");
-                if (info) {
-                  const type = view.state.sliceDoc(info.from, info.to);
-                  const text = node.node.getChild("CodeText");
-                  if (type === "mermaid" && text) {
-                    const content = view.state.sliceDoc(text.from, text.to).trim();
-                    const label = content.split(" ")[0];
-                    const widget = new MermaidWidget(`mermaid-${node.from}`, content, label);
-                    const endLine = view.state.doc.lineAt(node.to);
-                    const nextLinePos = endLine.to + 1;
-                    if (nextLinePos <= view.state.doc.length) {
-                      decorations.push({
-                        from: nextLinePos,
-                        to: nextLinePos,
-                        decoration: Decoration.widget({
-                          widget
-                        })
-                      });
-                    } else {
-                      decorations.push({
-                        from: endLine.to,
-                        to: endLine.to,
-                        decoration: Decoration.widget({
-                          widget,
-                          side: 1
-                        })
-                      });
-                    }
-                    const startLine = view.state.doc.lineAt(node.from);
-                    for (let lineNum = startLine.number; lineNum <= endLine.number; lineNum++) {
-                      const line = view.state.doc.line(lineNum);
-                      decorations.push({
-                        from: line.from,
-                        to: line.from,
-                        decoration: Decoration.line({
-                          class: "cm-mermaid-hidden"
-                        })
-                      });
-                    }
-                  }
-                }
-              }
-            }
-          }
-        });
-        return Decoration.set(decorations.sort((a, b) => a.from - b.from || a.to - b.to).map((d) => d.decoration.range(d.from, d.to)));
-      }
-      constructor(view) {
-        _define_property(this, "decorations", void 0);
-        this.decorations = this.buildDecorations(view);
-      }
-    }, {
-      decorations: (v) => v.decorations
-    }),
-    EditorView.theme({
-      "& .cm-mermaid": {
-        position: "relative",
-        display: "inline-flex",
-        width: "100%",
-        maring: "4px 0",
-        padding: "16px",
-        justifyContent: "center",
-        backgroundColor: "var(--dx-groupSurface)",
-        borderRadius: "8px"
-      },
-      "& .cm-mermaid-label": {
-        position: "absolute",
-        right: "16px",
-        fontFamily: "unset",
-        color: "var(--dx-subdued)"
-      },
-      "& .cm-mermaid-error": {
-        display: "inline-block",
-        color: "var(--dx-errorText)"
-      },
-      "& .cm-mermaid-hidden": {
-        display: "none !important"
-      }
-    })
-  ];
-};
-var MermaidWidget = class extends WidgetType {
-  eq(other) {
-    return this._source === other._source;
-  }
-  toDOM(view) {
-    const div = document.createElement("div");
-    div.className = "cm-mermaid";
-    setTimeout(async () => {
-      _mermaid.initialize({
-        darkMode: view.state.facet(EditorView.darkTheme),
-        theme: "neutral"
-      });
-      const svg = await this.render(div);
-      if (this._error) {
-        div.className = "cm-mermaid-error";
-        div.innerText = this._error;
-      } else {
-        div.className = "cm-mermaid";
-        div.innerHTML = svg;
-        if (this._label) {
-          const label = document.createElement("span");
-          label.innerText = this._label;
-          label.className = "cm-mermaid-label";
-          div.appendChild(label);
-          view.requestMeasure();
-        }
-      }
-    });
-    return div;
-  }
-  async render(_container) {
-    try {
-      const valid = await _mermaid.parse(this._source);
-      if (valid) {
-        const result = await _mermaid.render(this._id, this._source);
-        this._error = void 0;
-        this._svg = result.svg;
-        return result.svg;
-      }
-    } catch (err) {
-      this._error = String(err);
-      this._svg = void 0;
-    }
-  }
-  ignoreEvent(e) {
-    return !/^mouse/.test(e.type);
-  }
-  // TODO(burdon): Mermaid API requires unique id.
-  constructor(_id, _source, _label) {
-    super(), _define_property(this, "_id", void 0), _define_property(this, "_source", void 0), _define_property(this, "_label", void 0), _define_property(this, "_svg", void 0), _define_property(this, "_error", void 0), this._id = _id, this._source = _source, this._label = _label;
-  }
-};
-
-// src/meta.ts
-var meta = {
-  id: "dxos.org/plugin/mermaid",
-  name: "Mermaid",
-  description: "Tool that renders text definitions to create diagrams.",
-  icon: "ph--anchor-simple--regular",
-  source: "https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-mermaid"
-};
-
-// src/MermaidPlugin.tsx
-var MermaidPlugin = definePlugin(meta, () => [
-  defineModule({
-    id: `${meta.id}/module/markdown`,
-    activatesOn: MarkdownEvents.SetupExtensions,
-    activate: () => contributes(MarkdownCapabilities.Extensions, [
-      mermaid
-    ])
-  })
-]);
-export {
-  MermaidPlugin,
-  meta
-};
-//# sourceMappingURL=index.mjs.map

package/dist/lib/browser/index.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/MermaidPlugin.tsx", "../../../src/extensions/mermaid-extension.ts", "../../../src/meta.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { contributes, defineModule, definePlugin } from '@dxos/app-framework';\nimport { MarkdownCapabilities, MarkdownEvents } from '@dxos/plugin-markdown';\n\nimport { mermaid } from './extensions';\nimport { meta } from './meta';\n\nexport const MermaidPlugin = definePlugin(meta, () => [\n  defineModule({\n    id: `${meta.id}/module/markdown`,\n    activatesOn: MarkdownEvents.SetupExtensions,\n    activate: () => contributes(MarkdownCapabilities.Extensions, [mermaid]),\n  }),\n]);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { syntaxTree } from '@codemirror/language';\nimport { type Extension } from '@codemirror/state';\nimport { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';\nimport _mermaid from 'mermaid';\n\nexport type MermaidOptions = {};\n\n/**\n * Extension to create mermaid diagrams.\n */\nexport const mermaid = (_options: MermaidOptions = {}): Extension => {\n  return [\n    ViewPlugin.fromClass(\n      class {\n        decorations: DecorationSet;\n\n        constructor(view: EditorView) {\n          this.decorations = this.buildDecorations(view);\n        }\n\n        update(update: ViewUpdate) {\n          // Always rebuild decorations when selection changes to handle arrow key navigation.\n          if (update.docChanged || update.viewportChanged || update.selectionSet || update.focusChanged) {\n            this.decorations = this.buildDecorations(update.view);\n          }\n        }\n\n        buildDecorations(view: EditorView): DecorationSet {\n          const decorations: Array<{ from: number; to: number; decoration: Decoration }> = [];\n\n          syntaxTree(view.state).iterate({\n            enter: (node) => {\n              if (node.name === 'FencedCode') {\n                const cursor = view.state.selection.main.head;\n                // Show widget when cursor is outside the code block.\n                // Add a buffer of 1 position before and after to handle edge cases.\n                const showWidget = view.state.readOnly || cursor < node.from - 1 || cursor > node.to + 1;\n                if (showWidget) {\n                  const info = node.node.getChild('CodeInfo');\n                  if (info) {\n                    const type = view.state.sliceDoc(info.from, info.to);\n                    const text = node.node.getChild('CodeText');\n                    if (type === 'mermaid' && text) {\n                      const content = view.state.sliceDoc(text.from, text.to).trim();\n                      const label = content.split(' ')[0];\n\n                      // Create widget.\n                      const widget = new MermaidWidget(`mermaid-${node.from}`, content, label);\n\n                      // Find the line after the code block to place the widget.\n                      const endLine = view.state.doc.lineAt(node.to);\n                      const nextLinePos = endLine.to + 1;\n\n                      // Add widget after the code block.\n                      if (nextLinePos <= view.state.doc.length) {\n                        decorations.push({\n                          from: nextLinePos,\n                          to: nextLinePos,\n                          decoration: Decoration.widget({\n                            widget,\n                          }),\n                        });\n                      } else {\n                        // Check if at the end of the document.\n                        decorations.push({\n                          from: endLine.to,\n                          to: endLine.to,\n                          decoration: Decoration.widget({\n                            widget,\n                            side: 1,\n                          }),\n                        });\n                      }\n\n                      // Hide each line of the code block.\n                      const startLine = view.state.doc.lineAt(node.from);\n                      for (let lineNum = startLine.number; lineNum <= endLine.number; lineNum++) {\n                        const line = view.state.doc.line(lineNum);\n                        decorations.push({\n                          from: line.from,\n                          to: line.from,\n                          decoration: Decoration.line({\n                            class: 'cm-mermaid-hidden',\n                          }),\n                        });\n                      }\n                    }\n                  }\n                }\n              }\n            },\n          });\n\n          return Decoration.set(\n            decorations.sort((a, b) => a.from - b.from || a.to - b.to).map((d) => d.decoration.range(d.from, d.to)),\n          );\n        }\n      },\n      {\n        decorations: (v) => v.decorations,\n      },\n    ),\n    EditorView.theme({\n      '& .cm-mermaid': {\n        position: 'relative',\n        display: 'inline-flex',\n        width: '100%',\n        maring: '4px 0',\n        padding: '16px',\n        justifyContent: 'center',\n        backgroundColor: 'var(--dx-groupSurface)',\n        borderRadius: '8px',\n      },\n      '& .cm-mermaid-label': {\n        position: 'absolute',\n        right: '16px',\n        fontFamily: 'unset',\n        color: 'var(--dx-subdued)',\n      },\n      '& .cm-mermaid-error': {\n        display: 'inline-block',\n        color: 'var(--dx-errorText)',\n      },\n      '& .cm-mermaid-hidden': {\n        display: 'none !important',\n      },\n    }),\n  ];\n};\n\nclass MermaidWidget extends WidgetType {\n  _svg: string | undefined;\n  _error: string | undefined;\n\n  // TODO(burdon): Mermaid API requires unique id.\n  constructor(\n    private readonly _id: string,\n    private readonly _source: string,\n    private readonly _label?: string,\n  ) {\n    super();\n  }\n\n  override eq(other: this): boolean {\n    return this._source === other._source;\n  }\n\n  override toDOM(view: EditorView): HTMLDivElement {\n    const div = document.createElement('div');\n    div.className = 'cm-mermaid';\n\n    setTimeout(async () => {\n      // https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts\n      _mermaid.initialize({\n        darkMode: view.state.facet(EditorView.darkTheme),\n        theme: 'neutral',\n        // TODO(burdon): Styles.\n        // NOTE: Must specify 'base' in order to override.\n        // theme: 'base',\n        // themeVariables: {\n        //   primaryColor: getToken('extend.colors.red.100'),\n        //   primaryBorderColor: getToken('extend.colors.neutral.200'),\n        // },\n        // https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagrams/flowchart/styles.ts\n        // https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagrams/sequence/styles.js\n        // https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagrams/state/styles.js\n        // themeCSS: '.node rect { fill: red; }',\n      });\n\n      // TODO(burdon): Cache?\n      const svg = await this.render(div);\n      if (this._error) {\n        div.className = 'cm-mermaid-error';\n        div.innerText = this._error;\n      } else {\n        div.className = 'cm-mermaid';\n        div.innerHTML = svg!;\n\n        if (this._label) {\n          const label = document.createElement('span');\n          label.innerText = this._label;\n          label.className = 'cm-mermaid-label';\n          div.appendChild(label);\n          view.requestMeasure();\n        }\n      }\n    });\n\n    return div;\n  }\n\n  async render(_container: Element): Promise<string | undefined> {\n    try {\n      // https://github.com/mermaid-js/mermaid\n      const valid = await _mermaid.parse(this._source);\n      if (valid) {\n        const result = await _mermaid.render(this._id, this._source);\n        this._error = undefined;\n        this._svg = result.svg;\n        return result.svg;\n      }\n    } catch (err: any) {\n      this._error = String(err);\n      this._svg = undefined;\n    }\n  }\n\n  override ignoreEvent(e: Event): boolean {\n    return !/^mouse/.test(e.type);\n  }\n}\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const meta: PluginMeta = {\n  id: 'dxos.org/plugin/mermaid',\n  name: 'Mermaid',\n  description: 'Tool that renders text definitions to create diagrams.',\n  icon: 'ph--anchor-simple--regular',\n  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-mermaid',\n};\n"],
-  "mappings": "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",
-  "names": ["contributes", "defineModule", "definePlugin", "MarkdownCapabilities", "MarkdownEvents", "syntaxTree", "Decoration", "EditorView", "ViewPlugin", "WidgetType", "_mermaid", "mermaid", "_options", "ViewPlugin", "fromClass", "update", "docChanged", "viewportChanged", "selectionSet", "focusChanged", "decorations", "buildDecorations", "view", "syntaxTree", "state", "iterate", "enter", "node", "name", "cursor", "selection", "main", "head", "showWidget", "readOnly", "from", "to", "info", "getChild", "type", "sliceDoc", "text", "content", "trim", "label", "split", "widget", "MermaidWidget", "endLine", "doc", "lineAt", "nextLinePos", "length", "push", "decoration", "Decoration", "side", "startLine", "lineNum", "number", "line", "class", "set", "sort", "a", "b", "map", "d", "range", "v", "EditorView", "theme", "position", "display", "width", "maring", "padding", "justifyContent", "backgroundColor", "borderRadius", "right", "fontFamily", "color", "WidgetType", "eq", "other", "_source", "toDOM", "div", "document", "createElement", "className", "setTimeout", "_mermaid", "initialize", "darkMode", "facet", "darkTheme", "svg", "render", "_error", "innerText", "innerHTML", "_label", "appendChild", "requestMeasure", "_container", "valid", "parse", "result", "_id", "undefined", "_svg", "err", "String", "ignoreEvent", "e", "test", "meta", "id", "name", "description", "icon", "source", "MermaidPlugin", "definePlugin", "meta", "defineModule", "id", "activatesOn", "MarkdownEvents", "SetupExtensions", "activate", "contributes", "MarkdownCapabilities", "Extensions", "mermaid"]
-}

package/dist/lib/browser/meta.json

@@ -1 +0,0 @@
-{"inputs":{"src/extensions/mermaid-extension.ts":{"bytes":25706,"imports":[{"path":"@codemirror/language","kind":"import-statement","external":true},{"path":"@codemirror/view","kind":"import-statement","external":true},{"path":"mermaid","kind":"import-statement","external":true}],"format":"esm"},"src/extensions/index.ts":{"bytes":494,"imports":[{"path":"src/extensions/mermaid-extension.ts","kind":"import-statement","original":"./mermaid-extension"}],"format":"esm"},"src/meta.ts":{"bytes":1298,"imports":[],"format":"esm"},"src/MermaidPlugin.tsx":{"bytes":2282,"imports":[{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/plugin-markdown","kind":"import-statement","external":true},{"path":"src/extensions/index.ts","kind":"import-statement","original":"./extensions"},{"path":"src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"},"src/index.ts":{"bytes":551,"imports":[{"path":"src/MermaidPlugin.tsx","kind":"import-statement","original":"./MermaidPlugin"},{"path":"src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":14097},"dist/lib/browser/index.mjs":{"imports":[{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/plugin-markdown","kind":"import-statement","external":true},{"path":"@codemirror/language","kind":"import-statement","external":true},{"path":"@codemirror/view","kind":"import-statement","external":true},{"path":"mermaid","kind":"import-statement","external":true}],"exports":["MermaidPlugin","meta"],"entryPoint":"src/index.ts","inputs":{"src/MermaidPlugin.tsx":{"bytesInOutput":405},"src/extensions/mermaid-extension.ts":{"bytesInOutput":5709},"src/extensions/index.ts":{"bytesInOutput":0},"src/meta.ts":{"bytesInOutput":262},"src/index.ts":{"bytesInOutput":0}},"bytes":6554}}}