@dxos/plugin-mermaid 0.6.12-main.ed7cda7 → 0.6.12-staging.0b4bb48
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/browser/{chunk-ICHMODEB.mjs → chunk-VVYUYNRT.mjs} +5 -2
- package/dist/lib/browser/chunk-VVYUYNRT.mjs.map +7 -0
- package/dist/lib/browser/index.mjs +8 -8
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/meta.mjs +1 -1
- package/dist/types/src/extensions/mermaid.stories.d.ts +6 -16
- package/dist/types/src/extensions/mermaid.stories.d.ts.map +1 -1
- package/dist/types/src/meta.d.ts +4 -1
- package/dist/types/src/meta.d.ts.map +1 -1
- package/package.json +14 -14
- package/src/extensions/mermaid.stories.tsx +68 -56
- package/src/extensions/mermaid.ts +10 -8
- package/src/meta.tsx +5 -1
- package/dist/lib/browser/chunk-ICHMODEB.mjs.map +0 -7
|
@@ -1,15 +1,18 @@
|
|
|
1
1
|
// packages/plugins/plugin-mermaid/src/meta.tsx
|
|
2
|
+
import { AnchorSimple } from "@phosphor-icons/react";
|
|
3
|
+
import React from "react";
|
|
2
4
|
import { pluginMeta } from "@dxos/app-framework";
|
|
3
5
|
var MERMAID_PLUGIN = "dxos.org/plugin/mermaid";
|
|
4
6
|
var meta_default = pluginMeta({
|
|
5
7
|
id: MERMAID_PLUGIN,
|
|
6
8
|
name: "Mermaid",
|
|
7
9
|
description: "Tool that renders text definitions to create diagrams.",
|
|
8
|
-
|
|
10
|
+
iconComponent: (props) => /* @__PURE__ */ React.createElement(AnchorSimple, props),
|
|
11
|
+
iconSymbol: "ph--anchor-simple--regular"
|
|
9
12
|
});
|
|
10
13
|
|
|
11
14
|
export {
|
|
12
15
|
MERMAID_PLUGIN,
|
|
13
16
|
meta_default
|
|
14
17
|
};
|
|
15
|
-
//# sourceMappingURL=chunk-
|
|
18
|
+
//# sourceMappingURL=chunk-VVYUYNRT.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/meta.tsx"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { AnchorSimple, type IconProps } from '@phosphor-icons/react';\nimport React from 'react';\n\nimport { pluginMeta } from '@dxos/app-framework';\n\nexport const MERMAID_PLUGIN = 'dxos.org/plugin/mermaid';\n\nexport default pluginMeta({\n id: MERMAID_PLUGIN,\n name: 'Mermaid',\n description: 'Tool that renders text definitions to create diagrams.',\n iconComponent: (props: IconProps) => <AnchorSimple {...props} />,\n iconSymbol: 'ph--anchor-simple--regular',\n});\n"],
|
|
5
|
+
"mappings": ";AAIA,SAASA,oBAAoC;AAC7C,OAAOC,WAAW;AAElB,SAASC,kBAAkB;AAEpB,IAAMC,iBAAiB;AAE9B,IAAA,eAAeC,WAAW;EACxBC,IAAIF;EACJG,MAAM;EACNC,aAAa;EACbC,eAAe,CAACC,UAAqB,sBAAA,cAACC,cAAiBD,KAAAA;EACvDE,YAAY;AACd,CAAA;",
|
|
6
|
+
"names": ["AnchorSimple", "React", "pluginMeta", "MERMAID_PLUGIN", "pluginMeta", "id", "name", "description", "iconComponent", "props", "AnchorSimple", "iconSymbol"]
|
|
7
|
+
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
meta_default
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-VVYUYNRT.mjs";
|
|
4
4
|
|
|
5
5
|
// packages/plugins/plugin-mermaid/src/extensions/mermaid.ts
|
|
6
6
|
import { syntaxTree } from "@codemirror/language";
|
|
@@ -52,23 +52,23 @@ var MermaidWidget = class extends WidgetType {
|
|
|
52
52
|
return this._source === other._source;
|
|
53
53
|
}
|
|
54
54
|
toDOM(view) {
|
|
55
|
-
const
|
|
55
|
+
const wrapper = document.createElement("div");
|
|
56
56
|
setTimeout(async () => {
|
|
57
57
|
_mermaid.initialize({
|
|
58
58
|
darkMode: view.state.facet(EditorView.darkTheme),
|
|
59
59
|
theme: "neutral"
|
|
60
60
|
});
|
|
61
|
-
const svg = await this.render(
|
|
61
|
+
const svg = await this.render(wrapper);
|
|
62
62
|
if (this._error) {
|
|
63
|
-
|
|
64
|
-
|
|
63
|
+
wrapper.className = "cm-mermaid-error";
|
|
64
|
+
wrapper.innerText = this._error;
|
|
65
65
|
} else {
|
|
66
|
-
|
|
67
|
-
|
|
66
|
+
wrapper.className = "cm-mermaid";
|
|
67
|
+
wrapper.innerHTML = svg;
|
|
68
68
|
view.requestMeasure();
|
|
69
69
|
}
|
|
70
70
|
});
|
|
71
|
-
return
|
|
71
|
+
return wrapper;
|
|
72
72
|
}
|
|
73
73
|
async render(container) {
|
|
74
74
|
try {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/extensions/mermaid.ts", "../../../src/MermaidPlugin.tsx", "../../../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { syntaxTree } from '@codemirror/language';\nimport {\n type EditorState,\n type Extension,\n type RangeSet,\n
|
|
5
|
-
"mappings": ";;;;;AAIA,SAASA,kBAAkB;AAC3B,
|
|
6
|
-
"names": ["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", "constructor", "_id", "_source", "eq", "other", "toDOM", "view", "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { syntaxTree } from '@codemirror/language';\nimport {\n type EditorState,\n type Extension,\n type RangeSet,\n type Transaction,\n RangeSetBuilder,\n StateField,\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<any>>({\n create: (state) => update(state, options),\n update: (_: RangeSet<any>, 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();\n\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) {\n return this._source === other._source;\n }\n\n override toDOM(view: EditorView) {\n const wrapper = document.createElement('div');\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(wrapper);\n if (this._error) {\n wrapper.className = 'cm-mermaid-error';\n wrapper.innerText = this._error;\n } else {\n wrapper.className = 'cm-mermaid';\n wrapper.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 wrapper;\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) {\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-error)',\n },\n});\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginDefinition } from '@dxos/app-framework';\nimport { type MarkdownExtensionProvides } from '@dxos/plugin-markdown';\n\nimport { mermaid } from './extensions';\nimport meta from './meta';\n\nexport const MermaidPlugin = (): PluginDefinition<MarkdownExtensionProvides> => {\n return {\n meta,\n provides: {\n markdown: {\n extensions: () => [mermaid()],\n },\n },\n };\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { MermaidPlugin } from './MermaidPlugin';\n\nexport default MermaidPlugin;\n\nexport * from './MermaidPlugin';\n"],
|
|
5
|
+
"mappings": ";;;;;AAIA,SAASA,kBAAkB;AAC3B,SAKEC,iBACAC,kBACK;AACP,SAASC,YAAYC,YAAYC,kBAAkB;AACnD,OAAOC,cAAc;AAId,IAAMC,UAAU,CAACC,UAA0B,CAAC,MAAC;AAClD,SAAO;IACLC,WAAWC,OAAsB;MAC/BC,QAAQ,CAACC,UAAUC,OAAOD,OAAOJ,OAAAA;MACjCK,QAAQ,CAACC,GAAkBC,OAAoBF,OAAOE,GAAGH,OAAOJ,OAAAA;MAChEQ,SAAS,CAACC,UAAUC,WAAWC,YAAYC,KAAKH,KAAAA;IAClD,CAAA;IACAI;;AAEJ;AAEA,IAAMR,SAAS,CAACD,OAAoBJ,YAAAA;AAClC,QAAMc,UAAU,IAAIC,gBAAAA;AAEpBC,aAAWZ,KAAAA,EAAOa,QAAQ;IACxBC,OAAO,CAACC,SAAAA;AACN,UAAIA,KAAKC,SAAS,cAAc;AAC9B,cAAMC,SAASjB,MAAMkB,UAAUC,KAAKC;AACpC,YAAIpB,MAAMqB,YAAYJ,SAASF,KAAKP,QAAQS,SAASF,KAAKO,IAAI;AAC5D,gBAAMC,OAAOR,KAAKA,KAAKS,SAAS,UAAA;AAChC,cAAID,MAAM;AACR,kBAAME,OAAOzB,MAAM0B,SAASH,KAAKf,MAAMe,KAAKD,EAAE;AAC9C,kBAAMK,OAAOZ,KAAKA,KAAKS,SAAS,UAAA;AAChC,gBAAIC,SAAS,aAAaE,MAAM;AAC9B,oBAAMC,UAAU5B,MAAM0B,SAASC,KAAKnB,MAAMmB,KAAKL,EAAE;AAGjDZ,sBAAQmB,IACNd,KAAKP,MACLO,KAAKO,IACLQ,WAAWC,QAAQ;gBACjBC,QAAQ,IAAIC,cAAc,WAAWlB,KAAKP,IAAI,IAAIoB,OAAAA;cACpD,CAAA,CAAA;YAEJ;UACF;QACF;MACF;IACF;EACF,CAAA;AAEA,SAAOlB,QAAQwB,OAAM;AACvB;AAEA,IAAMD,gBAAN,cAA4BE,WAAAA;;EAK1BC,YACmBC,KACAC,SACjB;AACA,UAAK;SAHYD,MAAAA;SACAC,UAAAA;EAGnB;EAESC,GAAGC,OAAa;AACvB,WAAO,KAAKF,YAAYE,MAAMF;EAChC;EAESG,MAAMC,MAAkB;AAC/B,UAAMC,UAAUC,SAASC,cAAc,KAAA;AAEvCC,eAAW,YAAA;AAETC,eAASC,WAAW;QAClBC,UAAUP,KAAK1C,MAAMkD,MAAM5C,WAAW6C,SAAS;QAC/CC,OAAO;MAYT,CAAA;AAGA,YAAMC,MAAM,MAAM,KAAKC,OAAOX,OAAAA;AAC9B,UAAI,KAAKY,QAAQ;AACfZ,gBAAQa,YAAY;AACpBb,gBAAQc,YAAY,KAAKF;MAC3B,OAAO;AACLZ,gBAAQa,YAAY;AACpBb,gBAAQe,YAAYL;AAMpBX,aAAKiB,eAAc;MACrB;IACF,CAAA;AAEA,WAAOhB;EACT;EAEA,MAAMW,OAAOM,WAAiD;AAC5D,QAAI;AAEF,YAAMC,QAAQ,MAAMd,SAASe,MAAM,KAAKxB,OAAO;AAC/C,UAAIuB,OAAO;AACT,cAAME,SAAS,MAAMhB,SAASO,OAAO,KAAKjB,KAAK,KAAKC,OAAO;AAC3D,aAAKiB,SAASS;AACd,aAAKC,OAAOF,OAAOV;AACnB,eAAOU,OAAOV;MAChB;IACF,SAASa,KAAU;AACjB,WAAKX,SAASY,OAAOD,GAAAA;AACrB,WAAKD,OAAOD;IACd;EACF;EAESI,YAAYC,GAAU;AAC7B,WAAO,CAAC,SAASC,KAAKD,EAAE5C,IAAI;EAC9B;AACF;AAEA,IAAMhB,SAASH,WAAW8C,MAAM;EAC9B,iBAAiB;IACfmB,UAAU;IACVC,SAAS;IACTC,OAAO;IACPC,gBAAgB;EAClB;;;;;;EAMA,uBAAuB;IACrBF,SAAS;IACTG,OAAO;EACT;AACF,CAAA;;;AClJO,IAAMC,gBAAgB,MAAA;AAC3B,SAAO;IACLC;IACAC,UAAU;MACRC,UAAU;QACRC,YAAY,MAAM;UAACC,QAAAA;;MACrB;IACF;EACF;AACF;;;ACbA,IAAA,cAAeC;",
|
|
6
|
+
"names": ["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", "constructor", "_id", "_source", "eq", "other", "toDOM", "view", "wrapper", "document", "createElement", "setTimeout", "_mermaid", "initialize", "darkMode", "facet", "darkTheme", "theme", "svg", "render", "_error", "className", "innerText", "innerHTML", "requestMeasure", "container", "valid", "parse", "result", "undefined", "_svg", "err", "String", "ignoreEvent", "e", "test", "position", "display", "width", "justifyContent", "color", "MermaidPlugin", "meta", "provides", "markdown", "extensions", "mermaid", "MermaidPlugin"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/plugins/plugin-mermaid/src/extensions/mermaid.ts":{"bytes":
|
|
1
|
+
{"inputs":{"packages/plugins/plugin-mermaid/src/extensions/mermaid.ts":{"bytes":15420,"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"},"packages/plugins/plugin-mermaid/src/extensions/index.ts":{"bytes":513,"imports":[{"path":"packages/plugins/plugin-mermaid/src/extensions/mermaid.ts","kind":"import-statement","original":"./mermaid"}],"format":"esm"},"packages/plugins/plugin-mermaid/src/meta.tsx":{"bytes":1988,"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true}],"format":"esm"},"packages/plugins/plugin-mermaid/src/MermaidPlugin.tsx":{"bytes":1621,"imports":[{"path":"packages/plugins/plugin-mermaid/src/extensions/index.ts","kind":"import-statement","original":"./extensions"},{"path":"packages/plugins/plugin-mermaid/src/meta.tsx","kind":"import-statement","original":"./meta"}],"format":"esm"},"packages/plugins/plugin-mermaid/src/index.ts":{"bytes":795,"imports":[{"path":"packages/plugins/plugin-mermaid/src/MermaidPlugin.tsx","kind":"import-statement","original":"./MermaidPlugin"},{"path":"packages/plugins/plugin-mermaid/src/MermaidPlugin.tsx","kind":"import-statement","original":"./MermaidPlugin"}],"format":"esm"}},"outputs":{"packages/plugins/plugin-mermaid/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":8813},"packages/plugins/plugin-mermaid/dist/lib/browser/index.mjs":{"imports":[{"path":"packages/plugins/plugin-mermaid/dist/lib/browser/chunk-VVYUYNRT.mjs","kind":"import-statement"},{"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":["MermaidPlugin","default"],"entryPoint":"packages/plugins/plugin-mermaid/src/index.ts","inputs":{"packages/plugins/plugin-mermaid/src/extensions/mermaid.ts":{"bytesInOutput":2902},"packages/plugins/plugin-mermaid/src/extensions/index.ts":{"bytesInOutput":0},"packages/plugins/plugin-mermaid/src/MermaidPlugin.tsx":{"bytesInOutput":177},"packages/plugins/plugin-mermaid/src/index.ts":{"bytesInOutput":33}},"bytes":3425},"packages/plugins/plugin-mermaid/dist/lib/browser/meta.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":93},"packages/plugins/plugin-mermaid/dist/lib/browser/meta.mjs":{"imports":[{"path":"packages/plugins/plugin-mermaid/dist/lib/browser/chunk-VVYUYNRT.mjs","kind":"import-statement"}],"exports":["MERMAID_PLUGIN","default"],"entryPoint":"packages/plugins/plugin-mermaid/src/meta.tsx","inputs":{},"bytes":163},"packages/plugins/plugin-mermaid/dist/lib/browser/chunk-VVYUYNRT.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":990},"packages/plugins/plugin-mermaid/dist/lib/browser/chunk-VVYUYNRT.mjs":{"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true}],"exports":["MERMAID_PLUGIN","meta_default"],"inputs":{"packages/plugins/plugin-mermaid/src/meta.tsx":{"bytesInOutput":458}},"bytes":596}}}
|
|
@@ -1,22 +1,12 @@
|
|
|
1
1
|
import '@dxos-theme';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
type
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
declare const
|
|
7
|
-
|
|
8
|
-
decorators: import("@storybook/react/*").Decorator[];
|
|
9
|
-
render: ({ text }: StoryProps) => React.JSX.Element;
|
|
10
|
-
};
|
|
11
|
-
export default _default;
|
|
12
|
-
export declare const Default: {
|
|
13
|
-
args: {
|
|
14
|
-
text: string;
|
|
15
|
-
};
|
|
3
|
+
import { type Meta } from '@dxos/storybook-utils';
|
|
4
|
+
declare const meta: Meta;
|
|
5
|
+
export default meta;
|
|
6
|
+
export declare const Mermaid: {
|
|
7
|
+
render: () => React.JSX.Element;
|
|
16
8
|
};
|
|
17
9
|
export declare const Error: {
|
|
18
|
-
|
|
19
|
-
text: string;
|
|
20
|
-
};
|
|
10
|
+
render: () => React.JSX.Element;
|
|
21
11
|
};
|
|
22
12
|
//# sourceMappingURL=mermaid.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mermaid.stories.d.ts","sourceRoot":"","sources":["../../../../src/extensions/mermaid.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"mermaid.stories.d.ts","sourceRoot":"","sources":["../../../../src/extensions/mermaid.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AACrB,OAAO,KAAkB,MAAM,OAAO,CAAC;AAWvC,OAAO,EAAE,KAAK,IAAI,EAAa,MAAM,uBAAuB,CAAC;AAqC7D,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO;;CAuBnB,CAAC;AAEF,eAAO,MAAM,KAAK;;CAkBjB,CAAC"}
|
package/dist/types/src/meta.d.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { type IconProps } from '@phosphor-icons/react';
|
|
2
|
+
import React from 'react';
|
|
1
3
|
export declare const MERMAID_PLUGIN = "dxos.org/plugin/mermaid";
|
|
2
4
|
declare const _default: {
|
|
3
5
|
id: string;
|
|
@@ -6,7 +8,8 @@ declare const _default: {
|
|
|
6
8
|
description?: string;
|
|
7
9
|
homePage?: string;
|
|
8
10
|
tags?: string[];
|
|
9
|
-
|
|
11
|
+
iconComponent?: React.FC<IconProps>;
|
|
12
|
+
iconSymbol?: string;
|
|
10
13
|
};
|
|
11
14
|
export default _default;
|
|
12
15
|
//# sourceMappingURL=meta.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/meta.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/meta.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAgB,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,cAAc,4BAA4B,CAAC;;;;;;;;;;;AAExD,wBAMG"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/plugin-mermaid",
|
|
3
|
-
"version": "0.6.12-
|
|
3
|
+
"version": "0.6.12-staging.0b4bb48",
|
|
4
4
|
"description": "Mermaid markdown plugin",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -33,10 +33,10 @@
|
|
|
33
33
|
"@codemirror/state": "^6.4.1",
|
|
34
34
|
"@codemirror/view": "^6.29.1",
|
|
35
35
|
"mermaid": "^10.6.1",
|
|
36
|
-
"@dxos/app-framework": "0.6.12-
|
|
37
|
-
"@dxos/plugin-
|
|
38
|
-
"@dxos/plugin-
|
|
39
|
-
"@dxos/react-ui-editor": "0.6.12-
|
|
36
|
+
"@dxos/app-framework": "0.6.12-staging.0b4bb48",
|
|
37
|
+
"@dxos/plugin-markdown": "0.6.12-staging.0b4bb48",
|
|
38
|
+
"@dxos/plugin-space": "0.6.12-staging.0b4bb48",
|
|
39
|
+
"@dxos/react-ui-editor": "0.6.12-staging.0b4bb48"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@phosphor-icons/react": "^2.1.5",
|
|
@@ -45,18 +45,18 @@
|
|
|
45
45
|
"@types/react-dom": "~18.2.0",
|
|
46
46
|
"react": "~18.2.0",
|
|
47
47
|
"react-dom": "~18.2.0",
|
|
48
|
-
"vite": "5.4
|
|
49
|
-
"@dxos/
|
|
50
|
-
"@dxos/
|
|
51
|
-
"@dxos/react-ui-theme": "0.6.12-
|
|
52
|
-
"@dxos/storybook-utils": "0.6.12-
|
|
48
|
+
"vite": "^5.3.4",
|
|
49
|
+
"@dxos/react-ui": "0.6.12-staging.0b4bb48",
|
|
50
|
+
"@dxos/echo-schema": "0.6.12-staging.0b4bb48",
|
|
51
|
+
"@dxos/react-ui-theme": "0.6.12-staging.0b4bb48",
|
|
52
|
+
"@dxos/storybook-utils": "0.6.12-staging.0b4bb48"
|
|
53
53
|
},
|
|
54
54
|
"peerDependencies": {
|
|
55
55
|
"@phosphor-icons/react": "^2.1.5",
|
|
56
|
-
"react": "
|
|
57
|
-
"react-dom": "
|
|
58
|
-
"@dxos/react-ui": "0.6.12-
|
|
59
|
-
"@dxos/react-ui-theme": "0.6.12-
|
|
56
|
+
"react": "^18.0.0",
|
|
57
|
+
"react-dom": "^18.0.0",
|
|
58
|
+
"@dxos/react-ui": "0.6.12-staging.0b4bb48",
|
|
59
|
+
"@dxos/react-ui-theme": "0.6.12-staging.0b4bb48"
|
|
60
60
|
},
|
|
61
61
|
"publishConfig": {
|
|
62
62
|
"access": "public"
|
|
@@ -3,8 +3,7 @@
|
|
|
3
3
|
//
|
|
4
4
|
|
|
5
5
|
import '@dxos-theme';
|
|
6
|
-
|
|
7
|
-
import React from 'react';
|
|
6
|
+
import React, { useMemo } from 'react';
|
|
8
7
|
|
|
9
8
|
import { useThemeContext } from '@dxos/react-ui';
|
|
10
9
|
import {
|
|
@@ -14,7 +13,8 @@ import {
|
|
|
14
13
|
decorateMarkdown,
|
|
15
14
|
useTextEditor,
|
|
16
15
|
} from '@dxos/react-ui-editor';
|
|
17
|
-
import {
|
|
16
|
+
import { fixedInsetFlexLayout, groupSurface, mx } from '@dxos/react-ui-theme';
|
|
17
|
+
import { type Meta, withTheme } from '@dxos/storybook-utils';
|
|
18
18
|
|
|
19
19
|
import { mermaid } from './mermaid';
|
|
20
20
|
|
|
@@ -26,67 +26,79 @@ type StoryProps = {
|
|
|
26
26
|
|
|
27
27
|
const Story = ({ text }: StoryProps) => {
|
|
28
28
|
const { themeMode } = useThemeContext();
|
|
29
|
-
const
|
|
30
|
-
() =>
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
],
|
|
40
|
-
}),
|
|
41
|
-
[themeMode],
|
|
29
|
+
const extensions = useMemo(
|
|
30
|
+
() => [
|
|
31
|
+
createBasicExtensions(),
|
|
32
|
+
createMarkdownExtensions({ themeMode }),
|
|
33
|
+
createThemeExtensions({ themeMode, syntaxHighlighting: true }),
|
|
34
|
+
// TODO(burdon): Bug if mermaid extension is provided after decorateMarkdown.
|
|
35
|
+
mermaid(),
|
|
36
|
+
decorateMarkdown(),
|
|
37
|
+
],
|
|
38
|
+
[],
|
|
42
39
|
);
|
|
43
40
|
|
|
44
|
-
|
|
41
|
+
const { parentRef, focusAttributes } = useTextEditor(() => ({ initialValue: text, extensions }), [extensions]);
|
|
42
|
+
|
|
43
|
+
return (
|
|
44
|
+
<div className={mx(fixedInsetFlexLayout, groupSurface)}>
|
|
45
|
+
<div className='flex justify-center overflow-y-scroll'>
|
|
46
|
+
<div className='flex flex-col w-[800px] py-16'>
|
|
47
|
+
<div role='none' ref={parentRef} {...focusAttributes} />
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
);
|
|
45
52
|
};
|
|
46
53
|
|
|
47
|
-
|
|
54
|
+
const meta: Meta = {
|
|
48
55
|
title: 'plugin-mermaid/extensions',
|
|
49
|
-
decorators: [withTheme
|
|
50
|
-
render: Story,
|
|
56
|
+
decorators: [withTheme],
|
|
51
57
|
};
|
|
52
58
|
|
|
53
|
-
export
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
59
|
+
export default meta;
|
|
60
|
+
|
|
61
|
+
export const Mermaid = {
|
|
62
|
+
render: () => (
|
|
63
|
+
<Story
|
|
64
|
+
text={str(
|
|
65
|
+
'# Mermaid',
|
|
66
|
+
'',
|
|
67
|
+
'This is a mermaid diagram:',
|
|
68
|
+
'',
|
|
69
|
+
'```mermaid',
|
|
70
|
+
'graph LR;',
|
|
71
|
+
'A-->B;',
|
|
72
|
+
'B-->C;',
|
|
73
|
+
'B-->D;',
|
|
74
|
+
'B-->E;',
|
|
75
|
+
'D-->E;',
|
|
76
|
+
'C-->D;',
|
|
77
|
+
'```',
|
|
78
|
+
'',
|
|
79
|
+
'Inside a markdown document.',
|
|
80
|
+
'',
|
|
81
|
+
)}
|
|
82
|
+
/>
|
|
83
|
+
),
|
|
74
84
|
};
|
|
75
85
|
|
|
76
86
|
export const Error = {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
87
|
+
render: () => (
|
|
88
|
+
<Story
|
|
89
|
+
text={str(
|
|
90
|
+
'# Mermaid',
|
|
91
|
+
'',
|
|
92
|
+
'This is a broken mermaid diagram:',
|
|
93
|
+
'',
|
|
94
|
+
'```mermaid',
|
|
95
|
+
'graph TD;',
|
|
96
|
+
'A- ->B;',
|
|
97
|
+
'```',
|
|
98
|
+
'',
|
|
99
|
+
'',
|
|
100
|
+
'',
|
|
101
|
+
)}
|
|
102
|
+
/>
|
|
103
|
+
),
|
|
92
104
|
};
|
|
@@ -7,9 +7,9 @@ import {
|
|
|
7
7
|
type EditorState,
|
|
8
8
|
type Extension,
|
|
9
9
|
type RangeSet,
|
|
10
|
+
type Transaction,
|
|
10
11
|
RangeSetBuilder,
|
|
11
12
|
StateField,
|
|
12
|
-
type Transaction,
|
|
13
13
|
} from '@codemirror/state';
|
|
14
14
|
import { Decoration, EditorView, WidgetType } from '@codemirror/view';
|
|
15
15
|
import _mermaid from 'mermaid';
|
|
@@ -29,6 +29,7 @@ export const mermaid = (options: MermaidOptions = {}): Extension => {
|
|
|
29
29
|
|
|
30
30
|
const update = (state: EditorState, options: MermaidOptions) => {
|
|
31
31
|
const builder = new RangeSetBuilder();
|
|
32
|
+
|
|
32
33
|
syntaxTree(state).iterate({
|
|
33
34
|
enter: (node) => {
|
|
34
35
|
if (node.name === 'FencedCode') {
|
|
@@ -76,7 +77,8 @@ class MermaidWidget extends WidgetType {
|
|
|
76
77
|
}
|
|
77
78
|
|
|
78
79
|
override toDOM(view: EditorView) {
|
|
79
|
-
const
|
|
80
|
+
const wrapper = document.createElement('div');
|
|
81
|
+
|
|
80
82
|
setTimeout(async () => {
|
|
81
83
|
// https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/config.type.ts
|
|
82
84
|
_mermaid.initialize({
|
|
@@ -96,13 +98,13 @@ class MermaidWidget extends WidgetType {
|
|
|
96
98
|
});
|
|
97
99
|
|
|
98
100
|
// TODO(burdon): Cache?
|
|
99
|
-
const svg = await this.render(
|
|
101
|
+
const svg = await this.render(wrapper);
|
|
100
102
|
if (this._error) {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
+
wrapper.className = 'cm-mermaid-error';
|
|
104
|
+
wrapper.innerText = this._error;
|
|
103
105
|
} else {
|
|
104
|
-
|
|
105
|
-
|
|
106
|
+
wrapper.className = 'cm-mermaid';
|
|
107
|
+
wrapper.innerHTML = svg!;
|
|
106
108
|
|
|
107
109
|
// const label = document.createElement('span');
|
|
108
110
|
// label.innerText = 'Mermaid';
|
|
@@ -112,7 +114,7 @@ class MermaidWidget extends WidgetType {
|
|
|
112
114
|
}
|
|
113
115
|
});
|
|
114
116
|
|
|
115
|
-
return
|
|
117
|
+
return wrapper;
|
|
116
118
|
}
|
|
117
119
|
|
|
118
120
|
async render(container: Element): Promise<string | undefined> {
|
package/src/meta.tsx
CHANGED
|
@@ -2,6 +2,9 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
+
import { AnchorSimple, type IconProps } from '@phosphor-icons/react';
|
|
6
|
+
import React from 'react';
|
|
7
|
+
|
|
5
8
|
import { pluginMeta } from '@dxos/app-framework';
|
|
6
9
|
|
|
7
10
|
export const MERMAID_PLUGIN = 'dxos.org/plugin/mermaid';
|
|
@@ -10,5 +13,6 @@ export default pluginMeta({
|
|
|
10
13
|
id: MERMAID_PLUGIN,
|
|
11
14
|
name: 'Mermaid',
|
|
12
15
|
description: 'Tool that renders text definitions to create diagrams.',
|
|
13
|
-
|
|
16
|
+
iconComponent: (props: IconProps) => <AnchorSimple {...props} />,
|
|
17
|
+
iconSymbol: 'ph--anchor-simple--regular',
|
|
14
18
|
});
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/meta.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { pluginMeta } from '@dxos/app-framework';\n\nexport const MERMAID_PLUGIN = 'dxos.org/plugin/mermaid';\n\nexport default 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});\n"],
|
|
5
|
-
"mappings": ";AAIA,SAASA,kBAAkB;AAEpB,IAAMC,iBAAiB;AAE9B,IAAA,eAAeC,WAAW;EACxBC,IAAIF;EACJG,MAAM;EACNC,aAAa;EACbC,MAAM;AACR,CAAA;",
|
|
6
|
-
"names": ["pluginMeta", "MERMAID_PLUGIN", "pluginMeta", "id", "name", "description", "icon"]
|
|
7
|
-
}
|