@dxos/plugin-mermaid 0.7.5-labs.8a82073 → 0.7.5-labs.a8b535d
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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// packages/plugins/plugin-mermaid/src/MermaidPlugin.tsx
|
|
2
|
-
import { contributes, defineModule, definePlugin
|
|
3
|
-
import { MarkdownCapabilities } from "@dxos/plugin-markdown";
|
|
2
|
+
import { contributes, defineModule, definePlugin } from "@dxos/app-framework";
|
|
3
|
+
import { MarkdownCapabilities, MarkdownEvents } from "@dxos/plugin-markdown";
|
|
4
4
|
|
|
5
5
|
// packages/plugins/plugin-mermaid/src/extensions/mermaid.ts
|
|
6
6
|
import { syntaxTree } from "@codemirror/language";
|
|
@@ -120,7 +120,7 @@ var meta = {
|
|
|
120
120
|
var MermaidPlugin = () => definePlugin(meta, [
|
|
121
121
|
defineModule({
|
|
122
122
|
id: `${meta.id}/module/markdown`,
|
|
123
|
-
activatesOn:
|
|
123
|
+
activatesOn: MarkdownEvents.SetupExtensions,
|
|
124
124
|
activate: () => contributes(MarkdownCapabilities.Extensions, [
|
|
125
125
|
mermaid
|
|
126
126
|
])
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/MermaidPlugin.tsx", "../../../src/extensions/mermaid.ts", "../../../src/meta.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { contributes, defineModule, definePlugin
|
|
5
|
-
"mappings": ";AAIA,SAASA,aAAaC,cAAcC,
|
|
6
|
-
"names": ["contributes", "defineModule", "definePlugin", "
|
|
4
|
+
"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) {\n return this._source === other._source;\n }\n\n override toDOM(view: EditorView) {\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) {\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 PluginMeta } from '@dxos/app-framework';\n\nexport const MERMAID_PLUGIN = 'dxos.org/plugin/mermaid';\n\nexport const meta = {\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} satisfies PluginMeta;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"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", "constructor", "_id", "_source", "eq", "other", "toDOM", "view", "div", "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", "MERMAID_PLUGIN", "meta", "id", "name", "description", "icon", "source", "MermaidPlugin", "definePlugin", "meta", "defineModule", "id", "activatesOn", "MarkdownEvents", "SetupExtensions", "activate", "contributes", "MarkdownCapabilities", "Extensions", "mermaid"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/plugins/plugin-mermaid/src/extensions/mermaid.ts":{"bytes":15376,"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.ts":{"bytes":1541,"imports":[],"format":"esm"},"packages/plugins/plugin-mermaid/src/MermaidPlugin.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/plugins/plugin-mermaid/src/extensions/mermaid.ts":{"bytes":15376,"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.ts":{"bytes":1541,"imports":[],"format":"esm"},"packages/plugins/plugin-mermaid/src/MermaidPlugin.tsx":{"bytes":2371,"imports":[{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/plugin-markdown","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-mermaid/src/extensions/index.ts","kind":"import-statement","original":"./extensions"},{"path":"packages/plugins/plugin-mermaid/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"},"packages/plugins/plugin-mermaid/src/index.ts":{"bytes":596,"imports":[{"path":"packages/plugins/plugin-mermaid/src/MermaidPlugin.tsx","kind":"import-statement","original":"./MermaidPlugin"},{"path":"packages/plugins/plugin-mermaid/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"}},"outputs":{"packages/plugins/plugin-mermaid/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":9618},"packages/plugins/plugin-mermaid/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":"packages/plugins/plugin-mermaid/src/index.ts","inputs":{"packages/plugins/plugin-mermaid/src/MermaidPlugin.tsx":{"bytesInOutput":405},"packages/plugins/plugin-mermaid/src/extensions/mermaid.ts":{"bytesInOutput":2874},"packages/plugins/plugin-mermaid/src/extensions/index.ts":{"bytesInOutput":0},"packages/plugins/plugin-mermaid/src/meta.ts":{"bytesInOutput":299},"packages/plugins/plugin-mermaid/src/index.ts":{"bytesInOutput":0}},"bytes":3892}}}
|
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/plugin-mermaid",
|
|
3
|
-
"version": "0.7.5-labs.
|
|
3
|
+
"version": "0.7.5-labs.a8b535d",
|
|
4
4
|
"description": "Mermaid markdown plugin",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"author": "DXOS.org",
|
|
9
9
|
"sideEffects": true,
|
|
10
|
+
"type": "module",
|
|
10
11
|
"exports": {
|
|
11
12
|
".": {
|
|
12
13
|
"types": "./dist/types/src/index.d.ts",
|
|
@@ -26,10 +27,10 @@
|
|
|
26
27
|
"@codemirror/state": "^6.4.1",
|
|
27
28
|
"@codemirror/view": "^6.34.1",
|
|
28
29
|
"mermaid": "^10.6.1",
|
|
29
|
-
"@dxos/app-framework": "0.7.5-labs.
|
|
30
|
-
"@dxos/plugin-markdown": "0.7.5-labs.
|
|
31
|
-
"@dxos/plugin-space": "0.7.5-labs.
|
|
32
|
-
"@dxos/react-ui-editor": "0.7.5-labs.
|
|
30
|
+
"@dxos/app-framework": "0.7.5-labs.a8b535d",
|
|
31
|
+
"@dxos/plugin-markdown": "0.7.5-labs.a8b535d",
|
|
32
|
+
"@dxos/plugin-space": "0.7.5-labs.a8b535d",
|
|
33
|
+
"@dxos/react-ui-editor": "0.7.5-labs.a8b535d"
|
|
33
34
|
},
|
|
34
35
|
"devDependencies": {
|
|
35
36
|
"@phosphor-icons/react": "^2.1.5",
|
|
@@ -39,17 +40,17 @@
|
|
|
39
40
|
"react": "~18.2.0",
|
|
40
41
|
"react-dom": "~18.2.0",
|
|
41
42
|
"vite": "5.4.7",
|
|
42
|
-
"@dxos/react-ui": "0.7.5-labs.
|
|
43
|
-
"@dxos/react-ui-theme": "0.7.5-labs.
|
|
44
|
-
"@dxos/echo-schema": "0.7.5-labs.
|
|
45
|
-
"@dxos/storybook-utils": "0.7.5-labs.
|
|
43
|
+
"@dxos/react-ui": "0.7.5-labs.a8b535d",
|
|
44
|
+
"@dxos/react-ui-theme": "0.7.5-labs.a8b535d",
|
|
45
|
+
"@dxos/echo-schema": "0.7.5-labs.a8b535d",
|
|
46
|
+
"@dxos/storybook-utils": "0.7.5-labs.a8b535d"
|
|
46
47
|
},
|
|
47
48
|
"peerDependencies": {
|
|
48
49
|
"@phosphor-icons/react": "^2.1.5",
|
|
49
50
|
"react": "~18.2.0",
|
|
50
51
|
"react-dom": "~18.2.0",
|
|
51
|
-
"@dxos/react-ui": "0.7.5-labs.
|
|
52
|
-
"@dxos/react-ui-theme": "0.7.5-labs.
|
|
52
|
+
"@dxos/react-ui": "0.7.5-labs.a8b535d",
|
|
53
|
+
"@dxos/react-ui-theme": "0.7.5-labs.a8b535d"
|
|
53
54
|
},
|
|
54
55
|
"publishConfig": {
|
|
55
56
|
"access": "public"
|
package/src/MermaidPlugin.tsx
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
// Copyright 2023 DXOS.org
|
|
3
3
|
//
|
|
4
4
|
|
|
5
|
-
import { contributes, defineModule, definePlugin
|
|
6
|
-
import { MarkdownCapabilities } from '@dxos/plugin-markdown';
|
|
5
|
+
import { contributes, defineModule, definePlugin } from '@dxos/app-framework';
|
|
6
|
+
import { MarkdownCapabilities, MarkdownEvents } from '@dxos/plugin-markdown';
|
|
7
7
|
|
|
8
8
|
import { mermaid } from './extensions';
|
|
9
9
|
import { meta } from './meta';
|
|
@@ -12,7 +12,7 @@ export const MermaidPlugin = () =>
|
|
|
12
12
|
definePlugin(meta, [
|
|
13
13
|
defineModule({
|
|
14
14
|
id: `${meta.id}/module/markdown`,
|
|
15
|
-
activatesOn:
|
|
15
|
+
activatesOn: MarkdownEvents.SetupExtensions,
|
|
16
16
|
activate: () => contributes(MarkdownCapabilities.Extensions, [mermaid]),
|
|
17
17
|
}),
|
|
18
18
|
]);
|