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

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@dxos/plugin-mermaid",
-  "version": "0.8.4-main.c4373fc",
+  "version": "0.8.4-main.c85a9c8dae",
   "description": "Mermaid markdown plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
   "sideEffects": true,
@@ -27,31 +31,33 @@
     "@codemirror/language": "^6.11.3",
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.38.4",
-    "@preact-signals/safe-react": "^0.9.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.c85a9c8dae",
+    "@dxos/operation": "0.8.4-main.c85a9c8dae",
+    "@dxos/plugin-markdown": "0.8.4-main.c85a9c8dae",
+    "@dxos/plugin-space": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui-editor": "0.8.4-main.c85a9c8dae",
+    "@dxos/util": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui-editor": "0.8.4-main.c85a9c8dae"
   },
   "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.19.16",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "^7.1.11",
+    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
+    "@dxos/echo": "0.8.4-main.c85a9c8dae",
+    "@dxos/storybook-utils": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
   },
   "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.19.16",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
   },
   "publishConfig": {
     "access": "public"

package/src/MermaidPlugin.tsx

@@ -2,16 +2,19 @@
 // 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 { 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`,
+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])),
   }),
-]);
+  Plugin.make,
+);

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,14 +6,14 @@ 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 { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { useTextEditor } from '@dxos/react-ui-editor';
 import {
   createBasicExtensions,
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
-  useTextEditor,
-} from '@dxos/react-ui-editor';
+} from '@dxos/ui-editor';
 
 import { mermaid } from './mermaid-extension';
 
@@ -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/meta.ts

@@ -2,12 +2,16 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type PluginMeta } from '@dxos/app-framework';
+import { type Plugin } from '@dxos/app-framework';
+import { trim } from '@dxos/util';
 
-export const meta: PluginMeta = {
+export const meta: Plugin.Meta = {
   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',
 };