@dxos/plugin-mermaid 0.8.4-main.fd6878d → 0.9.0

package/dist/lib/browser/index.mjs

@@ -1,136 +0,0 @@
-// src/MermaidPlugin.tsx
-import { contributes, defineModule, definePlugin } from "@dxos/app-framework";
-import { MarkdownCapabilities, MarkdownEvents } from "@dxos/plugin-markdown";
-
-// src/extensions/mermaid.ts
-import { syntaxTree } from "@codemirror/language";
-import { RangeSetBuilder, StateField } from "@codemirror/state";
-import { Decoration, EditorView, WidgetType } from "@codemirror/view";
-import _mermaid from "mermaid";
-var mermaid = (options = {}) => {
-  return [
-    StateField.define({
-      create: (state) => update(state, options),
-      update: (_, tr) => update(tr.state, options),
-      provide: (field) => EditorView.decorations.from(field)
-    }),
-    styles
-  ];
-};
-var update = (state, options) => {
-  const builder = new RangeSetBuilder();
-  syntaxTree(state).iterate({
-    enter: (node) => {
-      if (node.name === "FencedCode") {
-        const cursor = state.selection.main.head;
-        if (state.readOnly || cursor < node.from || cursor > node.to) {
-          const info = node.node.getChild("CodeInfo");
-          if (info) {
-            const type = state.sliceDoc(info.from, info.to);
-            const text = node.node.getChild("CodeText");
-            if (type === "mermaid" && text) {
-              const content = state.sliceDoc(text.from, text.to);
-              builder.add(node.from, node.to, Decoration.replace({
-                widget: new MermaidWidget(`mermaid-${node.from}`, content)
-              }));
-            }
-          }
-        }
-      }
-    }
-  });
-  return builder.finish();
-};
-var MermaidWidget = class extends WidgetType {
-  _id;
-  _source;
-  _svg;
-  _error;
-  // TODO(burdon): Mermaid API requires unique id.
-  constructor(_id, _source) {
-    super(), this._id = _id, this._source = _source;
-  }
-  eq(other) {
-    return this._source === other._source;
-  }
-  toDOM(view) {
-    const div = document.createElement("div");
-    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;
-        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);
-  }
-};
-var styles = EditorView.theme({
-  "& .cm-mermaid": {
-    position: "relative",
-    display: "inline-flex",
-    width: "100%",
-    justifyContent: "center"
-  },
-  // '& .cm-mermaid-label': {
-  //   position: 'absolute',
-  //   right: 0,
-  //   textSize: 10,
-  // },
-  "& .cm-mermaid-error": {
-    display: "inline-block",
-    color: "var(--dx-errorText)"
-  }
-});
-
-// src/meta.ts
-var MERMAID_PLUGIN = "dxos.org/plugin/mermaid";
-var meta = {
-  id: MERMAID_PLUGIN,
-  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 {
-  MERMAID_PLUGIN,
-  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.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 = () =>\n  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 {\n  type EditorState,\n  type Extension,\n  type RangeSet,\n  RangeSetBuilder,\n  StateField,\n  type Transaction,\n} from '@codemirror/state';\nimport { Decoration, EditorView, WidgetType } from '@codemirror/view';\nimport _mermaid from 'mermaid';\n\nexport type MermaidOptions = {};\n\nexport const mermaid = (options: MermaidOptions = {}): Extension => {\n  return [\n    StateField.define<RangeSet<Decoration>>({\n      create: (state) => update(state, options),\n      update: (_: RangeSet<Decoration>, tr: Transaction) => update(tr.state, options),\n      provide: (field) => EditorView.decorations.from(field),\n    }),\n    styles,\n  ];\n};\n\nconst update = (state: EditorState, options: MermaidOptions) => {\n  const builder = new RangeSetBuilder<Decoration>();\n  syntaxTree(state).iterate({\n    enter: (node) => {\n      if (node.name === 'FencedCode') {\n        const cursor = state.selection.main.head;\n        if (state.readOnly || cursor < node.from || cursor > node.to) {\n          const info = node.node.getChild('CodeInfo');\n          if (info) {\n            const type = state.sliceDoc(info.from, info.to);\n            const text = node.node.getChild('CodeText');\n            if (type === 'mermaid' && text) {\n              const content = state.sliceDoc(text.from, text.to);\n              // TODO(burdon): Error if extension defined AFTER decorateMarkdown.\n              //  Decorations that replace line breaks may not be specified via plugins\n              builder.add(\n                node.from,\n                node.to,\n                Decoration.replace({\n                  widget: new MermaidWidget(`mermaid-${node.from}`, content),\n                }),\n              );\n            }\n          }\n        }\n      }\n    },\n  });\n\n  return builder.finish();\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  ) {\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    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        // const label = document.createElement('span');\n        // label.innerText = 'Mermaid';\n        // label.className = 'cm-mermaid-label';\n        // wrapper.appendChild(label);\n        view.requestMeasure();\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\nconst styles = EditorView.theme({\n  '& .cm-mermaid': {\n    position: 'relative',\n    display: 'inline-flex',\n    width: '100%',\n    justifyContent: 'center',\n  },\n  // '& .cm-mermaid-label': {\n  //   position: 'absolute',\n  //   right: 0,\n  //   textSize: 10,\n  // },\n  '& .cm-mermaid-error': {\n    display: 'inline-block',\n    color: 'var(--dx-errorText)',\n  },\n});\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const MERMAID_PLUGIN = 'dxos.org/plugin/mermaid';\n\nexport const meta: PluginMeta = {\n  id: MERMAID_PLUGIN,\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", "RangeSetBuilder", "StateField", "Decoration", "EditorView", "WidgetType", "_mermaid", "mermaid", "options", "StateField", "define", "create", "state", "update", "_", "tr", "provide", "field", "EditorView", "decorations", "from", "styles", "builder", "RangeSetBuilder", "syntaxTree", "iterate", "enter", "node", "name", "cursor", "selection", "main", "head", "readOnly", "to", "info", "getChild", "type", "sliceDoc", "text", "content", "add", "Decoration", "replace", "widget", "MermaidWidget", "finish", "WidgetType", "_svg", "_error", "_id", "_source", "eq", "other", "toDOM", "view", "div", "document", "createElement", "setTimeout", "_mermaid", "initialize", "darkMode", "facet", "darkTheme", "theme", "svg", "render", "className", "innerText", "innerHTML", "requestMeasure", "container", "valid", "parse", "result", "undefined", "err", "String", "ignoreEvent", "e", "test", "position", "display", "width", "justifyContent", "color", "MERMAID_PLUGIN", "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.ts":{"bytes":15195,"imports":[{"path":"@codemirror/language","kind":"import-statement","external":true},{"path":"@codemirror/state","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":468,"imports":[{"path":"src/extensions/mermaid.ts","kind":"import-statement","original":"./mermaid"}],"format":"esm"},"src/meta.ts":{"bytes":1476,"imports":[],"format":"esm"},"src/MermaidPlugin.tsx":{"bytes":2302,"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":9664},"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/state","kind":"import-statement","external":true},{"path":"@codemirror/view","kind":"import-statement","external":true},{"path":"mermaid","kind":"import-statement","external":true}],"exports":["MERMAID_PLUGIN","MermaidPlugin","meta"],"entryPoint":"src/index.ts","inputs":{"src/MermaidPlugin.tsx":{"bytesInOutput":405},"src/extensions/mermaid.ts":{"bytesInOutput":2906},"src/extensions/index.ts":{"bytesInOutput":0},"src/meta.ts":{"bytesInOutput":299},"src/index.ts":{"bytesInOutput":0}},"bytes":3796}}}

package/dist/types/src/extensions/mermaid.d.ts

@@ -1,4 +0,0 @@
-import { type Extension } from '@codemirror/state';
-export type MermaidOptions = {};
-export declare const mermaid: (options?: MermaidOptions) => Extension;
-//# sourceMappingURL=mermaid.d.ts.map

package/dist/types/src/extensions/mermaid.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"mermaid.d.ts","sourceRoot":"","sources":["../../../../src/extensions/mermaid.ts"],"names":[],"mappings":"AAKA,OAAO,EAEL,KAAK,SAAS,EAKf,MAAM,mBAAmB,CAAC;AAI3B,MAAM,MAAM,cAAc,GAAG,EAAE,CAAC;AAEhC,eAAO,MAAM,OAAO,GAAI,UAAS,cAAmB,KAAG,SAStD,CAAC"}

package/src/extensions/mermaid.ts

@@ -1,155 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { syntaxTree } from '@codemirror/language';
-import {
-  type EditorState,
-  type Extension,
-  type RangeSet,
-  RangeSetBuilder,
-  StateField,
-  type Transaction,
-} from '@codemirror/state';
-import { Decoration, EditorView, WidgetType } from '@codemirror/view';
-import _mermaid from 'mermaid';
-
-export type MermaidOptions = {};
-
-export const mermaid = (options: MermaidOptions = {}): Extension => {
-  return [
-    StateField.define<RangeSet<Decoration>>({
-      create: (state) => update(state, options),
-      update: (_: RangeSet<Decoration>, tr: Transaction) => update(tr.state, options),
-      provide: (field) => EditorView.decorations.from(field),
-    }),
-    styles,
-  ];
-};
-
-const update = (state: EditorState, options: MermaidOptions) => {
-  const builder = new RangeSetBuilder<Decoration>();
-  syntaxTree(state).iterate({
-    enter: (node) => {
-      if (node.name === 'FencedCode') {
-        const cursor = state.selection.main.head;
-        if (state.readOnly || cursor < node.from || cursor > node.to) {
-          const info = node.node.getChild('CodeInfo');
-          if (info) {
-            const type = state.sliceDoc(info.from, info.to);
-            const text = node.node.getChild('CodeText');
-            if (type === 'mermaid' && text) {
-              const content = state.sliceDoc(text.from, text.to);
-              // TODO(burdon): Error if extension defined AFTER decorateMarkdown.
-              //  Decorations that replace line breaks may not be specified via plugins
-              builder.add(
-                node.from,
-                node.to,
-                Decoration.replace({
-                  widget: new MermaidWidget(`mermaid-${node.from}`, content),
-                }),
-              );
-            }
-          }
-        }
-      }
-    },
-  });
-
-  return builder.finish();
-};
-
-class MermaidWidget extends WidgetType {
-  _svg: string | undefined;
-  _error: string | undefined;
-
-  // TODO(burdon): Mermaid API requires unique id.
-  constructor(
-    private readonly _id: string,
-    private readonly _source: string,
-  ) {
-    super();
-  }
-
-  override eq(other: this): boolean {
-    return this._source === other._source;
-  }
-
-  override toDOM(view: EditorView): HTMLDivElement {
-    const div = document.createElement('div');
-    setTimeout(async () => {
-      // https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts
-      _mermaid.initialize({
-        darkMode: view.state.facet(EditorView.darkTheme),
-        theme: 'neutral',
-        // TODO(burdon): Styles.
-        // NOTE: Must specify 'base' in order to override.
-        // theme: 'base',
-        // themeVariables: {
-        //   primaryColor: getToken('extend.colors.red.100'),
-        //   primaryBorderColor: getToken('extend.colors.neutral.200'),
-        // },
-        // https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagrams/flowchart/styles.ts
-        // https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagrams/sequence/styles.js
-        // https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagrams/state/styles.js
-        // themeCSS: '.node rect { fill: red; }',
-      });
-
-      // TODO(burdon): Cache?
-      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!;
-
-        // const label = document.createElement('span');
-        // label.innerText = 'Mermaid';
-        // label.className = 'cm-mermaid-label';
-        // wrapper.appendChild(label);
-        view.requestMeasure();
-      }
-    });
-
-    return div;
-  }
-
-  async render(container: Element): Promise<string | undefined> {
-    try {
-      // https://github.com/mermaid-js/mermaid
-      const valid = await _mermaid.parse(this._source);
-      if (valid) {
-        const result = await _mermaid.render(this._id, this._source);
-        this._error = undefined;
-        this._svg = result.svg;
-        return result.svg;
-      }
-    } catch (err: any) {
-      this._error = String(err);
-      this._svg = undefined;
-    }
-  }
-
-  override ignoreEvent(e: Event): boolean {
-    return !/^mouse/.test(e.type);
-  }
-}
-
-const styles = EditorView.theme({
-  '& .cm-mermaid': {
-    position: 'relative',
-    display: 'inline-flex',
-    width: '100%',
-    justifyContent: 'center',
-  },
-  // '& .cm-mermaid-label': {
-  //   position: 'absolute',
-  //   right: 0,
-  //   textSize: 10,
-  // },
-  '& .cm-mermaid-error': {
-    display: 'inline-block',
-    color: 'var(--dx-errorText)',
-  },
-});