@dxos/plugin-mermaid 0.8.4-main.e098934 → 0.8.4-main.e8ec1fe

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-mermaid",
-  "version": "0.8.4-main.e098934",
+  "version": "0.8.4-main.e8ec1fe",
   "description": "Mermaid markdown plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -26,32 +26,33 @@
   "dependencies": {
     "@codemirror/language": "^6.11.3",
     "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.38.2",
+    "@codemirror/view": "^6.38.4",
     "@preact-signals/safe-react": "^0.9.0",
-    "effect": "3.17.7",
-    "mermaid": "^10.6.1",
-    "@dxos/app-framework": "0.8.4-main.e098934",
-    "@dxos/plugin-markdown": "0.8.4-main.e098934",
-    "@dxos/plugin-space": "0.8.4-main.e098934",
-    "@dxos/react-ui-editor": "0.8.4-main.e098934"
+    "mermaid": "^10.9.4",
+    "@dxos/app-framework": "0.8.4-main.e8ec1fe",
+    "@dxos/plugin-markdown": "0.8.4-main.e8ec1fe",
+    "@dxos/plugin-space": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-editor": "0.8.4-main.e8ec1fe",
+    "@dxos/util": "0.8.4-main.e8ec1fe"
   },
   "devDependencies": {
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "7.1.1",
-    "@dxos/react-ui": "0.8.4-main.e098934",
-    "@dxos/echo-schema": "0.8.4-main.e098934",
-    "@dxos/react-ui-theme": "0.8.4-main.e098934",
-    "@dxos/storybook-utils": "0.8.4-main.e098934"
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
+    "effect": "3.18.3",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/echo": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui": "0.8.4-main.e8ec1fe",
+    "@dxos/storybook-utils": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-theme": "0.8.4-main.e8ec1fe"
   },
   "peerDependencies": {
     "effect": "^3.13.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.e098934",
-    "@dxos/react-ui-theme": "0.8.4-main.e098934"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.e8ec1fe",
+    "@dxos/react-ui-theme": "0.8.4-main.e8ec1fe"
   },
   "publishConfig": {
     "access": "public"

package/src/MermaidPlugin.tsx

@@ -8,11 +8,10 @@ import { MarkdownCapabilities, MarkdownEvents } from '@dxos/plugin-markdown';
 import { mermaid } from './extensions';
 import { meta } from './meta';
 
-export const MermaidPlugin = () =>
-  definePlugin(meta, [
-    defineModule({
-      id: `${meta.id}/module/markdown`,
-      activatesOn: MarkdownEvents.SetupExtensions,
-      activate: () => contributes(MarkdownCapabilities.Extensions, [mermaid]),
-    }),
-  ]);
+export const MermaidPlugin = definePlugin(meta, () => [
+  defineModule({
+    id: `${meta.id}/module/markdown`,
+    activatesOn: MarkdownEvents.SetupExtensions,
+    activate: () => contributes(MarkdownCapabilities.Extensions, [mermaid]),
+  }),
+]);

package/src/extensions/mermaid-extension.ts

@@ -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

@@ -2,12 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { useThemeContext } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import {
   createBasicExtensions,
   createMarkdownExtensions,
@@ -15,7 +14,6 @@ import {
   decorateMarkdown,
   useTextEditor,
 } from '@dxos/react-ui-editor';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { mermaid } from './mermaid-extension';
 
@@ -41,19 +39,13 @@ const DefaultStory = ({ text }: StoryProps) => {
     [themeMode],
   );
 
-  return <div className='w-[50rem]' ref={parentRef} {...focusAttributes} />;
+  return <div className='is-[50rem]' ref={parentRef} {...focusAttributes} />;
 };
 
 const meta = {
   title: 'plugins/plugin-mermaid/extensions',
   render: DefaultStory,
-  decorators: [
-    withTheme,
-    withLayout({
-      fullscreen: true,
-      classNames: 'justify-center',
-    }),
-  ],
+  decorators: [withTheme, withLayout({ container: 'column' })],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/meta.ts

@@ -3,13 +3,15 @@
 //
 
 import { type PluginMeta } from '@dxos/app-framework';
-
-export const MERMAID_PLUGIN = 'dxos.org/plugin/mermaid';
+import { trim } from '@dxos/util';
 
 export const meta: PluginMeta = {
-  id: MERMAID_PLUGIN,
+  id: 'dxos.org/plugin/mermaid',
   name: 'Mermaid',
-  description: 'Tool that renders text definitions to create diagrams.',
+  description: trim`
+    Generate diagrams from simple text-based definitions using Mermaid syntax.
+    Create flowcharts, sequence diagrams, and other visualizations that stay in sync with your documentation.
+  `,
   icon: 'ph--anchor-simple--regular',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-mermaid',
 };