@dxos/plugin-mermaid 0.8.4-main.1068cf700f → 0.8.4-main.1c7ec43d41
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/MermaidPlugin-VEW3LRVO.mjs +179 -0
- package/dist/lib/browser/MermaidPlugin-VEW3LRVO.mjs.map +7 -0
- package/dist/lib/browser/index.mjs +5 -172
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/MermaidPlugin.d.ts +1 -0
- package/dist/types/src/MermaidPlugin.d.ts.map +1 -1
- package/dist/types/src/MermaidPlugin.test.d.ts +2 -0
- package/dist/types/src/MermaidPlugin.test.d.ts.map +1 -0
- package/dist/types/src/extensions/mermaid-extension.d.ts.map +1 -1
- package/dist/types/src/extensions/mermaid.stories.d.ts +2 -2
- package/dist/types/src/extensions/mermaid.stories.d.ts.map +1 -1
- package/dist/types/src/index.d.ts +2 -1
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +22 -21
- package/src/MermaidPlugin.test.ts +30 -0
- package/src/MermaidPlugin.tsx +5 -2
- package/src/extensions/mermaid-extension.ts +3 -3
- package/src/extensions/mermaid.stories.tsx +5 -5
- package/src/index.ts +6 -1
- package/src/meta.ts +1 -1
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
// src/MermaidPlugin.tsx
|
|
2
|
+
import * as Effect from "effect/Effect";
|
|
3
|
+
import { Capability, Plugin } from "@dxos/app-framework";
|
|
4
|
+
import { MarkdownCapabilities, MarkdownEvents } from "@dxos/plugin-markdown/types";
|
|
5
|
+
import { meta } from "#meta";
|
|
6
|
+
|
|
7
|
+
// src/extensions/mermaid-extension.ts
|
|
8
|
+
import { syntaxTree } from "@codemirror/language";
|
|
9
|
+
import { Decoration, EditorView, ViewPlugin, WidgetType } from "@codemirror/view";
|
|
10
|
+
import _mermaid from "mermaid";
|
|
11
|
+
var mermaid = (_options = {}) => {
|
|
12
|
+
return [
|
|
13
|
+
ViewPlugin.fromClass(class {
|
|
14
|
+
decorations;
|
|
15
|
+
constructor(view) {
|
|
16
|
+
this.decorations = this.buildDecorations(view);
|
|
17
|
+
}
|
|
18
|
+
update(update) {
|
|
19
|
+
if (update.docChanged || update.viewportChanged || update.selectionSet || update.focusChanged) {
|
|
20
|
+
this.decorations = this.buildDecorations(update.view);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
buildDecorations(view) {
|
|
24
|
+
const decorations = [];
|
|
25
|
+
syntaxTree(view.state).iterate({
|
|
26
|
+
enter: (node) => {
|
|
27
|
+
if (node.name === "FencedCode") {
|
|
28
|
+
const cursor = view.state.selection.main.head;
|
|
29
|
+
const showWidget = view.state.readOnly || cursor < node.from - 1 || cursor > node.to + 1;
|
|
30
|
+
if (showWidget) {
|
|
31
|
+
const info = node.node.getChild("CodeInfo");
|
|
32
|
+
if (info) {
|
|
33
|
+
const type = view.state.sliceDoc(info.from, info.to);
|
|
34
|
+
const text = node.node.getChild("CodeText");
|
|
35
|
+
if (type === "mermaid" && text) {
|
|
36
|
+
const content = view.state.sliceDoc(text.from, text.to).trim();
|
|
37
|
+
const label = content.split(" ")[0];
|
|
38
|
+
const widget = new MermaidWidget(`mermaid-${node.from}`, content, label);
|
|
39
|
+
const endLine = view.state.doc.lineAt(node.to);
|
|
40
|
+
const nextLinePos = endLine.to + 1;
|
|
41
|
+
if (nextLinePos <= view.state.doc.length) {
|
|
42
|
+
decorations.push({
|
|
43
|
+
from: nextLinePos,
|
|
44
|
+
to: nextLinePos,
|
|
45
|
+
decoration: Decoration.widget({
|
|
46
|
+
widget
|
|
47
|
+
})
|
|
48
|
+
});
|
|
49
|
+
} else {
|
|
50
|
+
decorations.push({
|
|
51
|
+
from: endLine.to,
|
|
52
|
+
to: endLine.to,
|
|
53
|
+
decoration: Decoration.widget({
|
|
54
|
+
widget,
|
|
55
|
+
side: 1
|
|
56
|
+
})
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
const startLine = view.state.doc.lineAt(node.from);
|
|
60
|
+
for (let lineNum = startLine.number; lineNum <= endLine.number; lineNum++) {
|
|
61
|
+
const line = view.state.doc.line(lineNum);
|
|
62
|
+
decorations.push({
|
|
63
|
+
from: line.from,
|
|
64
|
+
to: line.from,
|
|
65
|
+
decoration: Decoration.line({
|
|
66
|
+
class: "cm-mermaid-hidden"
|
|
67
|
+
})
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
return Decoration.set(decorations.sort((a, b) => a.from - b.from || a.to - b.to).map((d) => d.decoration.range(d.from, d.to)));
|
|
77
|
+
}
|
|
78
|
+
}, {
|
|
79
|
+
decorations: (v) => v.decorations
|
|
80
|
+
}),
|
|
81
|
+
EditorView.theme({
|
|
82
|
+
"& .cm-mermaid": {
|
|
83
|
+
position: "relative",
|
|
84
|
+
display: "inline-flex",
|
|
85
|
+
width: "100%",
|
|
86
|
+
maring: "4px 0",
|
|
87
|
+
padding: "16px",
|
|
88
|
+
justifyContent: "center",
|
|
89
|
+
backgroundColor: "var(--color-group-surface)",
|
|
90
|
+
borderRadius: "8px"
|
|
91
|
+
},
|
|
92
|
+
"& .cm-mermaid-label": {
|
|
93
|
+
position: "absolute",
|
|
94
|
+
right: "16px",
|
|
95
|
+
fontFamily: "unset",
|
|
96
|
+
color: "var(--color-subdued)"
|
|
97
|
+
},
|
|
98
|
+
"& .cm-mermaid-error": {
|
|
99
|
+
display: "inline-block",
|
|
100
|
+
color: "var(--color-error)"
|
|
101
|
+
},
|
|
102
|
+
"& .cm-mermaid-hidden": {
|
|
103
|
+
display: "none !important"
|
|
104
|
+
}
|
|
105
|
+
})
|
|
106
|
+
];
|
|
107
|
+
};
|
|
108
|
+
var MermaidWidget = class extends WidgetType {
|
|
109
|
+
_id;
|
|
110
|
+
_source;
|
|
111
|
+
_label;
|
|
112
|
+
_svg;
|
|
113
|
+
_error;
|
|
114
|
+
// TODO(burdon): Mermaid API requires unique id.
|
|
115
|
+
constructor(_id, _source, _label) {
|
|
116
|
+
super(), this._id = _id, this._source = _source, this._label = _label;
|
|
117
|
+
}
|
|
118
|
+
eq(other) {
|
|
119
|
+
return this._source === other._source;
|
|
120
|
+
}
|
|
121
|
+
ignoreEvent(ev) {
|
|
122
|
+
return !/^mouse/.test(ev.type);
|
|
123
|
+
}
|
|
124
|
+
toDOM(view) {
|
|
125
|
+
const div = document.createElement("div");
|
|
126
|
+
div.className = "cm-mermaid";
|
|
127
|
+
setTimeout(async () => {
|
|
128
|
+
_mermaid.initialize({
|
|
129
|
+
darkMode: view.state.facet(EditorView.darkTheme),
|
|
130
|
+
theme: "neutral"
|
|
131
|
+
});
|
|
132
|
+
const svg = await this.render(div);
|
|
133
|
+
if (this._error) {
|
|
134
|
+
div.className = "cm-mermaid-error";
|
|
135
|
+
div.innerText = this._error;
|
|
136
|
+
} else {
|
|
137
|
+
div.className = "cm-mermaid";
|
|
138
|
+
div.innerHTML = svg;
|
|
139
|
+
if (this._label) {
|
|
140
|
+
const label = document.createElement("span");
|
|
141
|
+
label.innerText = this._label;
|
|
142
|
+
label.className = "cm-mermaid-label";
|
|
143
|
+
div.appendChild(label);
|
|
144
|
+
view.requestMeasure();
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
});
|
|
148
|
+
return div;
|
|
149
|
+
}
|
|
150
|
+
async render(_container) {
|
|
151
|
+
try {
|
|
152
|
+
const valid = await _mermaid.parse(this._source);
|
|
153
|
+
if (valid) {
|
|
154
|
+
const result = await _mermaid.render(this._id, this._source);
|
|
155
|
+
this._error = void 0;
|
|
156
|
+
this._svg = result.svg;
|
|
157
|
+
return result.svg;
|
|
158
|
+
}
|
|
159
|
+
} catch (err) {
|
|
160
|
+
this._error = String(err);
|
|
161
|
+
this._svg = void 0;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
};
|
|
165
|
+
|
|
166
|
+
// src/MermaidPlugin.tsx
|
|
167
|
+
var MermaidPlugin = Plugin.define(meta).pipe(Plugin.addModule({
|
|
168
|
+
id: "markdown",
|
|
169
|
+
activatesOn: MarkdownEvents.SetupExtensions,
|
|
170
|
+
activate: () => Effect.succeed(Capability.contributes(MarkdownCapabilities.Extensions, [
|
|
171
|
+
mermaid
|
|
172
|
+
]))
|
|
173
|
+
}), Plugin.make);
|
|
174
|
+
var MermaidPlugin_default = MermaidPlugin;
|
|
175
|
+
export {
|
|
176
|
+
MermaidPlugin,
|
|
177
|
+
MermaidPlugin_default as default
|
|
178
|
+
};
|
|
179
|
+
//# sourceMappingURL=MermaidPlugin-VEW3LRVO.mjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/MermaidPlugin.tsx", "../../../src/extensions/mermaid-extension.ts"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport * as Effect from 'effect/Effect';\n\nimport { Capability, Plugin } from '@dxos/app-framework';\nimport { MarkdownCapabilities, MarkdownEvents } from '@dxos/plugin-markdown/types';\n\nimport { meta } from '#meta';\n\nimport { mermaid } from './extensions';\n\nexport const MermaidPlugin = Plugin.define(meta).pipe(\n Plugin.addModule({\n id: 'markdown',\n activatesOn: MarkdownEvents.SetupExtensions,\n activate: () => Effect.succeed(Capability.contributes(MarkdownCapabilities.Extensions, [mermaid])),\n }),\n Plugin.make,\n);\n\nexport default MermaidPlugin;\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { syntaxTree } from '@codemirror/language';\nimport { type Extension } from '@codemirror/state';\nimport { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate, WidgetType } from '@codemirror/view';\nimport _mermaid from 'mermaid';\n\nexport type MermaidOptions = {};\n\n/**\n * Extension to create mermaid diagrams.\n */\nexport const mermaid = (_options: MermaidOptions = {}): Extension => {\n return [\n ViewPlugin.fromClass(\n class {\n decorations: DecorationSet;\n\n constructor(view: EditorView) {\n this.decorations = this.buildDecorations(view);\n }\n\n update(update: ViewUpdate) {\n // Always rebuild decorations when selection changes to handle arrow key navigation.\n if (update.docChanged || update.viewportChanged || update.selectionSet || update.focusChanged) {\n this.decorations = this.buildDecorations(update.view);\n }\n }\n\n buildDecorations(view: EditorView): DecorationSet {\n const decorations: Array<{ from: number; to: number; decoration: Decoration }> = [];\n\n syntaxTree(view.state).iterate({\n enter: (node) => {\n if (node.name === 'FencedCode') {\n const cursor = view.state.selection.main.head;\n // Show widget when cursor is outside the code block.\n // Add a buffer of 1 position before and after to handle edge cases.\n const showWidget = view.state.readOnly || cursor < node.from - 1 || cursor > node.to + 1;\n if (showWidget) {\n const info = node.node.getChild('CodeInfo');\n if (info) {\n const type = view.state.sliceDoc(info.from, info.to);\n const text = node.node.getChild('CodeText');\n if (type === 'mermaid' && text) {\n const content = view.state.sliceDoc(text.from, text.to).trim();\n const label = content.split(' ')[0];\n\n // Create widget.\n const widget = new MermaidWidget(`mermaid-${node.from}`, content, label);\n\n // Find the line after the code block to place the widget.\n const endLine = view.state.doc.lineAt(node.to);\n const nextLinePos = endLine.to + 1;\n\n // Add widget after the code block.\n if (nextLinePos <= view.state.doc.length) {\n decorations.push({\n from: nextLinePos,\n to: nextLinePos,\n decoration: Decoration.widget({\n widget,\n }),\n });\n } else {\n // Check if at the end of the document.\n decorations.push({\n from: endLine.to,\n to: endLine.to,\n decoration: Decoration.widget({\n widget,\n side: 1,\n }),\n });\n }\n\n // Hide each line of the code block.\n const startLine = view.state.doc.lineAt(node.from);\n for (let lineNum = startLine.number; lineNum <= endLine.number; lineNum++) {\n const line = view.state.doc.line(lineNum);\n decorations.push({\n from: line.from,\n to: line.from,\n decoration: Decoration.line({\n class: 'cm-mermaid-hidden',\n }),\n });\n }\n }\n }\n }\n }\n },\n });\n\n return Decoration.set(\n decorations.sort((a, b) => a.from - b.from || a.to - b.to).map((d) => d.decoration.range(d.from, d.to)),\n );\n }\n },\n {\n decorations: (v) => v.decorations,\n },\n ),\n EditorView.theme({\n '& .cm-mermaid': {\n position: 'relative',\n display: 'inline-flex',\n width: '100%',\n maring: '4px 0',\n padding: '16px',\n justifyContent: 'center',\n backgroundColor: 'var(--color-group-surface)',\n borderRadius: '8px',\n },\n '& .cm-mermaid-label': {\n position: 'absolute',\n right: '16px',\n fontFamily: 'unset',\n color: 'var(--color-subdued)',\n },\n '& .cm-mermaid-error': {\n display: 'inline-block',\n color: 'var(--color-error)',\n },\n '& .cm-mermaid-hidden': {\n display: 'none !important',\n },\n }),\n ];\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 private readonly _label?: string,\n ) {\n super();\n }\n\n override eq(other: this) {\n return this._source === other._source;\n }\n\n override ignoreEvent(ev: Event) {\n return !/^mouse/.test(ev.type);\n }\n\n override toDOM(view: EditorView) {\n const div = document.createElement('div');\n div.className = 'cm-mermaid';\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(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 if (this._label) {\n const label = document.createElement('span');\n label.innerText = this._label;\n label.className = 'cm-mermaid-label';\n div.appendChild(label);\n view.requestMeasure();\n }\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Effect", "Capability", "Plugin", "MarkdownCapabilities", "MarkdownEvents", "meta", "syntaxTree", "Decoration", "EditorView", "ViewPlugin", "WidgetType", "_mermaid", "mermaid", "_options", "fromClass", "decorations", "view", "buildDecorations", "update", "docChanged", "viewportChanged", "selectionSet", "focusChanged", "state", "iterate", "enter", "node", "name", "cursor", "selection", "main", "head", "showWidget", "readOnly", "from", "to", "info", "getChild", "type", "sliceDoc", "text", "content", "trim", "label", "split", "widget", "MermaidWidget", "endLine", "doc", "lineAt", "nextLinePos", "length", "push", "decoration", "side", "startLine", "lineNum", "number", "line", "class", "set", "sort", "a", "b", "map", "d", "range", "v", "theme", "position", "display", "width", "maring", "padding", "justifyContent", "backgroundColor", "borderRadius", "right", "fontFamily", "color", "_svg", "_error", "_id", "_source", "_label", "eq", "other", "ignoreEvent", "ev", "test", "toDOM", "div", "document", "createElement", "className", "setTimeout", "initialize", "darkMode", "facet", "darkTheme", "svg", "render", "innerText", "innerHTML", "appendChild", "requestMeasure", "_container", "valid", "parse", "result", "undefined", "err", "String", "MermaidPlugin", "Plugin", "define", "meta", "pipe", "addModule", "id", "activatesOn", "MarkdownEvents", "SetupExtensions", "activate", "succeed", "Capability", "contributes", "MarkdownCapabilities", "Extensions", "mermaid", "make"]
|
|
7
|
+
}
|
|
@@ -1,171 +1,10 @@
|
|
|
1
|
-
// src/
|
|
2
|
-
import
|
|
3
|
-
import { Capability, Plugin } from "@dxos/app-framework";
|
|
4
|
-
import { MarkdownCapabilities, MarkdownEvents } from "@dxos/plugin-markdown";
|
|
5
|
-
|
|
6
|
-
// src/extensions/mermaid-extension.ts
|
|
7
|
-
import { syntaxTree } from "@codemirror/language";
|
|
8
|
-
import { Decoration, EditorView, ViewPlugin, WidgetType } from "@codemirror/view";
|
|
9
|
-
import _mermaid from "mermaid";
|
|
10
|
-
var mermaid = (_options = {}) => {
|
|
11
|
-
return [
|
|
12
|
-
ViewPlugin.fromClass(class {
|
|
13
|
-
decorations;
|
|
14
|
-
constructor(view) {
|
|
15
|
-
this.decorations = this.buildDecorations(view);
|
|
16
|
-
}
|
|
17
|
-
update(update) {
|
|
18
|
-
if (update.docChanged || update.viewportChanged || update.selectionSet || update.focusChanged) {
|
|
19
|
-
this.decorations = this.buildDecorations(update.view);
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
buildDecorations(view) {
|
|
23
|
-
const decorations = [];
|
|
24
|
-
syntaxTree(view.state).iterate({
|
|
25
|
-
enter: (node) => {
|
|
26
|
-
if (node.name === "FencedCode") {
|
|
27
|
-
const cursor = view.state.selection.main.head;
|
|
28
|
-
const showWidget = view.state.readOnly || cursor < node.from - 1 || cursor > node.to + 1;
|
|
29
|
-
if (showWidget) {
|
|
30
|
-
const info = node.node.getChild("CodeInfo");
|
|
31
|
-
if (info) {
|
|
32
|
-
const type = view.state.sliceDoc(info.from, info.to);
|
|
33
|
-
const text = node.node.getChild("CodeText");
|
|
34
|
-
if (type === "mermaid" && text) {
|
|
35
|
-
const content = view.state.sliceDoc(text.from, text.to).trim();
|
|
36
|
-
const label = content.split(" ")[0];
|
|
37
|
-
const widget = new MermaidWidget(`mermaid-${node.from}`, content, label);
|
|
38
|
-
const endLine = view.state.doc.lineAt(node.to);
|
|
39
|
-
const nextLinePos = endLine.to + 1;
|
|
40
|
-
if (nextLinePos <= view.state.doc.length) {
|
|
41
|
-
decorations.push({
|
|
42
|
-
from: nextLinePos,
|
|
43
|
-
to: nextLinePos,
|
|
44
|
-
decoration: Decoration.widget({
|
|
45
|
-
widget
|
|
46
|
-
})
|
|
47
|
-
});
|
|
48
|
-
} else {
|
|
49
|
-
decorations.push({
|
|
50
|
-
from: endLine.to,
|
|
51
|
-
to: endLine.to,
|
|
52
|
-
decoration: Decoration.widget({
|
|
53
|
-
widget,
|
|
54
|
-
side: 1
|
|
55
|
-
})
|
|
56
|
-
});
|
|
57
|
-
}
|
|
58
|
-
const startLine = view.state.doc.lineAt(node.from);
|
|
59
|
-
for (let lineNum = startLine.number; lineNum <= endLine.number; lineNum++) {
|
|
60
|
-
const line = view.state.doc.line(lineNum);
|
|
61
|
-
decorations.push({
|
|
62
|
-
from: line.from,
|
|
63
|
-
to: line.from,
|
|
64
|
-
decoration: Decoration.line({
|
|
65
|
-
class: "cm-mermaid-hidden"
|
|
66
|
-
})
|
|
67
|
-
});
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
});
|
|
75
|
-
return Decoration.set(decorations.sort((a, b) => a.from - b.from || a.to - b.to).map((d) => d.decoration.range(d.from, d.to)));
|
|
76
|
-
}
|
|
77
|
-
}, {
|
|
78
|
-
decorations: (v) => v.decorations
|
|
79
|
-
}),
|
|
80
|
-
EditorView.theme({
|
|
81
|
-
"& .cm-mermaid": {
|
|
82
|
-
position: "relative",
|
|
83
|
-
display: "inline-flex",
|
|
84
|
-
width: "100%",
|
|
85
|
-
maring: "4px 0",
|
|
86
|
-
padding: "16px",
|
|
87
|
-
justifyContent: "center",
|
|
88
|
-
backgroundColor: "var(--dx-groupSurface)",
|
|
89
|
-
borderRadius: "8px"
|
|
90
|
-
},
|
|
91
|
-
"& .cm-mermaid-label": {
|
|
92
|
-
position: "absolute",
|
|
93
|
-
right: "16px",
|
|
94
|
-
fontFamily: "unset",
|
|
95
|
-
color: "var(--dx-subdued)"
|
|
96
|
-
},
|
|
97
|
-
"& .cm-mermaid-error": {
|
|
98
|
-
display: "inline-block",
|
|
99
|
-
color: "var(--dx-errorText)"
|
|
100
|
-
},
|
|
101
|
-
"& .cm-mermaid-hidden": {
|
|
102
|
-
display: "none !important"
|
|
103
|
-
}
|
|
104
|
-
})
|
|
105
|
-
];
|
|
106
|
-
};
|
|
107
|
-
var MermaidWidget = class extends WidgetType {
|
|
108
|
-
_id;
|
|
109
|
-
_source;
|
|
110
|
-
_label;
|
|
111
|
-
_svg;
|
|
112
|
-
_error;
|
|
113
|
-
// TODO(burdon): Mermaid API requires unique id.
|
|
114
|
-
constructor(_id, _source, _label) {
|
|
115
|
-
super(), this._id = _id, this._source = _source, this._label = _label;
|
|
116
|
-
}
|
|
117
|
-
eq(other) {
|
|
118
|
-
return this._source === other._source;
|
|
119
|
-
}
|
|
120
|
-
ignoreEvent(ev) {
|
|
121
|
-
return !/^mouse/.test(ev.type);
|
|
122
|
-
}
|
|
123
|
-
toDOM(view) {
|
|
124
|
-
const div = document.createElement("div");
|
|
125
|
-
div.className = "cm-mermaid";
|
|
126
|
-
setTimeout(async () => {
|
|
127
|
-
_mermaid.initialize({
|
|
128
|
-
darkMode: view.state.facet(EditorView.darkTheme),
|
|
129
|
-
theme: "neutral"
|
|
130
|
-
});
|
|
131
|
-
const svg = await this.render(div);
|
|
132
|
-
if (this._error) {
|
|
133
|
-
div.className = "cm-mermaid-error";
|
|
134
|
-
div.innerText = this._error;
|
|
135
|
-
} else {
|
|
136
|
-
div.className = "cm-mermaid";
|
|
137
|
-
div.innerHTML = svg;
|
|
138
|
-
if (this._label) {
|
|
139
|
-
const label = document.createElement("span");
|
|
140
|
-
label.innerText = this._label;
|
|
141
|
-
label.className = "cm-mermaid-label";
|
|
142
|
-
div.appendChild(label);
|
|
143
|
-
view.requestMeasure();
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
});
|
|
147
|
-
return div;
|
|
148
|
-
}
|
|
149
|
-
async render(_container) {
|
|
150
|
-
try {
|
|
151
|
-
const valid = await _mermaid.parse(this._source);
|
|
152
|
-
if (valid) {
|
|
153
|
-
const result = await _mermaid.render(this._id, this._source);
|
|
154
|
-
this._error = void 0;
|
|
155
|
-
this._svg = result.svg;
|
|
156
|
-
return result.svg;
|
|
157
|
-
}
|
|
158
|
-
} catch (err) {
|
|
159
|
-
this._error = String(err);
|
|
160
|
-
this._svg = void 0;
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
};
|
|
1
|
+
// src/index.ts
|
|
2
|
+
import { Plugin } from "@dxos/app-framework";
|
|
164
3
|
|
|
165
4
|
// src/meta.ts
|
|
166
5
|
import { trim } from "@dxos/util";
|
|
167
6
|
var meta = {
|
|
168
|
-
id: "dxos.
|
|
7
|
+
id: "org.dxos.plugin.mermaid",
|
|
169
8
|
name: "Mermaid",
|
|
170
9
|
description: trim`
|
|
171
10
|
Generate diagrams from simple text-based definitions using Mermaid syntax.
|
|
@@ -175,14 +14,8 @@ var meta = {
|
|
|
175
14
|
source: "https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-mermaid"
|
|
176
15
|
};
|
|
177
16
|
|
|
178
|
-
// src/
|
|
179
|
-
var MermaidPlugin = Plugin.
|
|
180
|
-
id: "markdown",
|
|
181
|
-
activatesOn: MarkdownEvents.SetupExtensions,
|
|
182
|
-
activate: () => Effect.succeed(Capability.contributes(MarkdownCapabilities.Extensions, [
|
|
183
|
-
mermaid
|
|
184
|
-
]))
|
|
185
|
-
}), Plugin.make);
|
|
17
|
+
// src/index.ts
|
|
18
|
+
var MermaidPlugin = Plugin.lazy(meta, () => import("./MermaidPlugin-VEW3LRVO.mjs"));
|
|
186
19
|
export {
|
|
187
20
|
MermaidPlugin,
|
|
188
21
|
meta
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport
|
|
5
|
-
"mappings": ";AAIA,
|
|
6
|
-
"names": ["
|
|
3
|
+
"sources": ["../../../src/index.ts", "../../../src/meta.ts"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Plugin } from '@dxos/app-framework';\n\nimport { meta } from './meta';\n\nexport const MermaidPlugin = Plugin.lazy(meta, () => import('./MermaidPlugin'));\n\nexport * from './meta';\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Plugin } from '@dxos/app-framework';\nimport { trim } from '@dxos/util';\n\nexport const meta: Plugin.Meta = {\n id: 'org.dxos.plugin.mermaid',\n name: 'Mermaid',\n description: trim`\n Generate diagrams from simple text-based definitions using Mermaid syntax.\n Create flowcharts, sequence diagrams, and other visualizations that stay in sync with your documentation.\n `,\n icon: 'ph--anchor-simple--regular',\n source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-mermaid',\n};\n"],
|
|
5
|
+
"mappings": ";AAIA,SAASA,cAAc;;;ACCvB,SAASC,YAAY;AAEd,IAAMC,OAAoB;EAC/BC,IAAI;EACJC,MAAM;EACNC,aAAaJ;;;;EAIbK,MAAM;EACNC,QAAQ;AACV;;;ADRO,IAAMC,gBAAgBC,OAAOC,KAAKC,MAAM,MAAM,OAAO,8BAAA,CAAA;",
|
|
6
|
+
"names": ["Plugin", "trim", "meta", "id", "name", "description", "icon", "source", "MermaidPlugin", "Plugin", "lazy", "meta"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/extensions/mermaid-extension.ts":{"bytes":
|
|
1
|
+
{"inputs":{"src/meta.ts":{"bytes":1706,"imports":[{"path":"@dxos/util","kind":"import-statement","external":true}],"format":"esm"},"src/extensions/mermaid-extension.ts":{"bytes":25026,"imports":[{"path":"@codemirror/language","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":401,"imports":[{"path":"src/extensions/mermaid-extension.ts","kind":"import-statement","original":"./mermaid-extension"}],"format":"esm"},"src/MermaidPlugin.tsx":{"bytes":2466,"imports":[{"path":"effect/Effect","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/plugin-markdown/types","kind":"import-statement","external":true},{"path":"#meta","kind":"import-statement","external":true},{"path":"src/extensions/index.ts","kind":"import-statement","original":"./extensions"}],"format":"esm"},"src/index.ts":{"bytes":964,"imports":[{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"src/meta.ts","kind":"import-statement","original":"./meta"},{"path":"src/meta.ts","kind":"import-statement","original":"./meta"},{"path":"src/MermaidPlugin.tsx","kind":"dynamic-import","original":"./MermaidPlugin"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":1232},"dist/lib/browser/index.mjs":{"imports":[{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"dist/lib/browser/MermaidPlugin-VEW3LRVO.mjs","kind":"dynamic-import"}],"exports":["MermaidPlugin","meta"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":131},"src/meta.ts":{"bytesInOutput":439}},"bytes":690},"dist/lib/browser/MermaidPlugin-VEW3LRVO.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":13487},"dist/lib/browser/MermaidPlugin-VEW3LRVO.mjs":{"imports":[{"path":"effect/Effect","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/plugin-markdown/types","kind":"import-statement","external":true},{"path":"#meta","kind":"import-statement","external":true},{"path":"@codemirror/language","kind":"import-statement","external":true},{"path":"@codemirror/view","kind":"import-statement","external":true},{"path":"mermaid","kind":"import-statement","external":true}],"exports":["MermaidPlugin","default"],"entryPoint":"src/MermaidPlugin.tsx","inputs":{"src/MermaidPlugin.tsx":{"bytesInOutput":512},"src/extensions/mermaid-extension.ts":{"bytesInOutput":5273},"src/extensions/index.ts":{"bytesInOutput":0}},"bytes":5992}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MermaidPlugin.d.ts","sourceRoot":"","sources":["../../../src/MermaidPlugin.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAc,MAAM,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"MermaidPlugin.d.ts","sourceRoot":"","sources":["../../../src/MermaidPlugin.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAc,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAOzD,eAAO,MAAM,aAAa,4BAOzB,CAAC;eAEa,aAAa"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MermaidPlugin.test.d.ts","sourceRoot":"","sources":["../../../src/MermaidPlugin.test.ts"],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mermaid-extension.d.ts","sourceRoot":"","sources":["../../../../src/extensions/mermaid-extension.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAInD,MAAM,MAAM,cAAc,GAAG,EAAE,CAAC;AAEhC;;GAEG;AACH,eAAO,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"mermaid-extension.d.ts","sourceRoot":"","sources":["../../../../src/extensions/mermaid-extension.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAInD,MAAM,MAAM,cAAc,GAAG,EAAE,CAAC;AAEhC;;GAEG;AACH,eAAO,MAAM,OAAO,cAAc,cAAc,KAAQ,SAsHvD,CAAC"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { type StoryObj } from '@storybook/react-vite';
|
|
2
2
|
import React from 'react';
|
|
3
|
-
type
|
|
3
|
+
type DefaultStoryProps = {
|
|
4
4
|
text?: string;
|
|
5
5
|
};
|
|
6
6
|
declare const meta: {
|
|
7
7
|
title: string;
|
|
8
|
-
render: ({ text }:
|
|
8
|
+
render: ({ text }: DefaultStoryProps) => React.JSX.Element;
|
|
9
9
|
decorators: import("@storybook/react").Decorator[];
|
|
10
10
|
};
|
|
11
11
|
export default meta;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mermaid.stories.d.ts","sourceRoot":"","sources":["../../../../src/extensions/mermaid.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,KAAK,
|
|
1
|
+
{"version":3,"file":"mermaid.stories.d.ts","sourceRoot":"","sources":["../../../../src/extensions/mermaid.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,KAAK,iBAAiB,GAAG;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAqBF,QAAA,MAAM,IAAI;;uBAnBsB,iBAAiB;;CAuBZ,CAAC;eAEvB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAqBrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAgBnB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAI7C,eAAO,MAAM,aAAa,4BAAqD,CAAC;AAEhF,cAAc,QAAQ,CAAC"}
|