@dxos/plugin-mermaid 0.8.4-main.67995b8 → 0.8.4-main.dedc0f3

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.
@@ -2,55 +2,127 @@
2
2
  import { contributes, defineModule, definePlugin } from "@dxos/app-framework";
3
3
  import { MarkdownCapabilities, MarkdownEvents } from "@dxos/plugin-markdown";
4
4
 
5
- // src/extensions/mermaid.ts
5
+ // src/extensions/mermaid-extension.ts
6
6
  import { syntaxTree } from "@codemirror/language";
7
- import { RangeSetBuilder, StateField } from "@codemirror/state";
8
- import { Decoration, EditorView, WidgetType } from "@codemirror/view";
7
+ import { Decoration, EditorView, ViewPlugin, WidgetType } from "@codemirror/view";
9
8
  import _mermaid from "mermaid";
10
- var mermaid = (options = {}) => {
9
+ function _define_property(obj, key, value) {
10
+ if (key in obj) {
11
+ Object.defineProperty(obj, key, {
12
+ value,
13
+ enumerable: true,
14
+ configurable: true,
15
+ writable: true
16
+ });
17
+ } else {
18
+ obj[key] = value;
19
+ }
20
+ return obj;
21
+ }
22
+ var mermaid = (_options = {}) => {
11
23
  return [
12
- StateField.define({
13
- create: (state) => update(state, options),
14
- update: (_, tr) => update(tr.state, options),
15
- provide: (field) => EditorView.decorations.from(field)
16
- }),
17
- styles
18
- ];
19
- };
20
- var update = (state, options) => {
21
- const builder = new RangeSetBuilder();
22
- syntaxTree(state).iterate({
23
- enter: (node) => {
24
- if (node.name === "FencedCode") {
25
- const cursor = state.selection.main.head;
26
- if (state.readOnly || cursor < node.from || cursor > node.to) {
27
- const info = node.node.getChild("CodeInfo");
28
- if (info) {
29
- const type = state.sliceDoc(info.from, info.to);
30
- const text = node.node.getChild("CodeText");
31
- if (type === "mermaid" && text) {
32
- const content = state.sliceDoc(text.from, text.to);
33
- builder.add(node.from, node.to, Decoration.replace({
34
- widget: new MermaidWidget(`mermaid-${node.from}`, content)
35
- }));
24
+ ViewPlugin.fromClass(class {
25
+ update(update) {
26
+ if (update.docChanged || update.viewportChanged || update.selectionSet || update.focusChanged) {
27
+ this.decorations = this.buildDecorations(update.view);
28
+ }
29
+ }
30
+ buildDecorations(view) {
31
+ const decorations = [];
32
+ syntaxTree(view.state).iterate({
33
+ enter: (node) => {
34
+ if (node.name === "FencedCode") {
35
+ const cursor = view.state.selection.main.head;
36
+ const showWidget = view.state.readOnly || cursor < node.from - 1 || cursor > node.to + 1;
37
+ if (showWidget) {
38
+ const info = node.node.getChild("CodeInfo");
39
+ if (info) {
40
+ const type = view.state.sliceDoc(info.from, info.to);
41
+ const text = node.node.getChild("CodeText");
42
+ if (type === "mermaid" && text) {
43
+ const content = view.state.sliceDoc(text.from, text.to).trim();
44
+ const label = content.split(" ")[0];
45
+ const widget = new MermaidWidget(`mermaid-${node.from}`, content, label);
46
+ const endLine = view.state.doc.lineAt(node.to);
47
+ const nextLinePos = endLine.to + 1;
48
+ if (nextLinePos <= view.state.doc.length) {
49
+ decorations.push({
50
+ from: nextLinePos,
51
+ to: nextLinePos,
52
+ decoration: Decoration.widget({
53
+ widget
54
+ })
55
+ });
56
+ } else {
57
+ decorations.push({
58
+ from: endLine.to,
59
+ to: endLine.to,
60
+ decoration: Decoration.widget({
61
+ widget,
62
+ side: 1
63
+ })
64
+ });
65
+ }
66
+ const startLine = view.state.doc.lineAt(node.from);
67
+ for (let lineNum = startLine.number; lineNum <= endLine.number; lineNum++) {
68
+ const line = view.state.doc.line(lineNum);
69
+ decorations.push({
70
+ from: line.from,
71
+ to: line.from,
72
+ decoration: Decoration.line({
73
+ class: "cm-mermaid-hidden"
74
+ })
75
+ });
76
+ }
77
+ }
78
+ }
79
+ }
36
80
  }
37
81
  }
38
- }
82
+ });
83
+ return Decoration.set(decorations.sort((a, b) => a.from - b.from || a.to - b.to).map((d) => d.decoration.range(d.from, d.to)));
39
84
  }
40
- }
41
- });
42
- return builder.finish();
85
+ constructor(view) {
86
+ _define_property(this, "decorations", void 0);
87
+ this.decorations = this.buildDecorations(view);
88
+ }
89
+ }, {
90
+ decorations: (v) => v.decorations
91
+ }),
92
+ EditorView.theme({
93
+ "& .cm-mermaid": {
94
+ position: "relative",
95
+ display: "inline-flex",
96
+ width: "100%",
97
+ maring: "4px 0",
98
+ padding: "16px",
99
+ justifyContent: "center",
100
+ backgroundColor: "var(--dx-groupSurface)",
101
+ borderRadius: "8px"
102
+ },
103
+ "& .cm-mermaid-label": {
104
+ position: "absolute",
105
+ right: "16px",
106
+ fontFamily: "unset",
107
+ color: "var(--dx-subdued)"
108
+ },
109
+ "& .cm-mermaid-error": {
110
+ display: "inline-block",
111
+ color: "var(--dx-errorText)"
112
+ },
113
+ "& .cm-mermaid-hidden": {
114
+ display: "none !important"
115
+ }
116
+ })
117
+ ];
43
118
  };
44
119
  var MermaidWidget = class extends WidgetType {
45
- // TODO(burdon): Mermaid API requires unique id.
46
- constructor(_id, _source) {
47
- super(), this._id = _id, this._source = _source;
48
- }
49
120
  eq(other) {
50
121
  return this._source === other._source;
51
122
  }
52
123
  toDOM(view) {
53
124
  const div = document.createElement("div");
125
+ div.className = "cm-mermaid";
54
126
  setTimeout(async () => {
55
127
  _mermaid.initialize({
56
128
  darkMode: view.state.facet(EditorView.darkTheme),
@@ -63,12 +135,18 @@ var MermaidWidget = class extends WidgetType {
63
135
  } else {
64
136
  div.className = "cm-mermaid";
65
137
  div.innerHTML = svg;
66
- view.requestMeasure();
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
+ }
67
145
  }
68
146
  });
69
147
  return div;
70
148
  }
71
- async render(container) {
149
+ async render(_container) {
72
150
  try {
73
151
  const valid = await _mermaid.parse(this._source);
74
152
  if (valid) {
@@ -85,24 +163,11 @@ var MermaidWidget = class extends WidgetType {
85
163
  ignoreEvent(e) {
86
164
  return !/^mouse/.test(e.type);
87
165
  }
88
- };
89
- var styles = EditorView.theme({
90
- "& .cm-mermaid": {
91
- position: "relative",
92
- display: "inline-flex",
93
- width: "100%",
94
- justifyContent: "center"
95
- },
96
- // '& .cm-mermaid-label': {
97
- // position: 'absolute',
98
- // right: 0,
99
- // textSize: 10,
100
- // },
101
- "& .cm-mermaid-error": {
102
- display: "inline-block",
103
- color: "var(--dx-errorText)"
166
+ // TODO(burdon): Mermaid API requires unique id.
167
+ constructor(_id, _source, _label) {
168
+ super(), _define_property(this, "_id", void 0), _define_property(this, "_source", void 0), _define_property(this, "_label", void 0), _define_property(this, "_svg", void 0), _define_property(this, "_error", void 0), this._id = _id, this._source = _source, this._label = _label;
104
169
  }
105
- });
170
+ };
106
171
 
107
172
  // src/meta.ts
108
173
  var MERMAID_PLUGIN = "dxos.org/plugin/mermaid";
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 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 } 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"],
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", "_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"]
3
+ "sources": ["../../../src/MermaidPlugin.tsx", "../../../src/extensions/mermaid-extension.ts", "../../../src/meta.ts"],
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 { 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(--dx-groupSurface)',\n borderRadius: '8px',\n },\n '& .cm-mermaid-label': {\n position: 'absolute',\n right: '16px',\n fontFamily: 'unset',\n color: 'var(--dx-subdued)',\n },\n '& .cm-mermaid-error': {\n display: 'inline-block',\n color: 'var(--dx-errorText)',\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): boolean {\n return this._source === other._source;\n }\n\n override toDOM(view: EditorView): HTMLDivElement {\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 override ignoreEvent(e: Event): boolean {\n return !/^mouse/.test(e.type);\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"],
5
+ "mappings": "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",
6
+ "names": ["contributes", "defineModule", "definePlugin", "MarkdownCapabilities", "MarkdownEvents", "syntaxTree", "Decoration", "EditorView", "ViewPlugin", "WidgetType", "_mermaid", "mermaid", "_options", "ViewPlugin", "fromClass", "update", "docChanged", "viewportChanged", "selectionSet", "focusChanged", "decorations", "buildDecorations", "view", "syntaxTree", "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", "Decoration", "side", "startLine", "lineNum", "number", "line", "class", "set", "sort", "a", "b", "map", "d", "range", "v", "EditorView", "theme", "position", "display", "width", "maring", "padding", "justifyContent", "backgroundColor", "borderRadius", "right", "fontFamily", "color", "WidgetType", "eq", "other", "_source", "toDOM", "div", "document", "createElement", "className", "setTimeout", "_mermaid", "initialize", "darkMode", "facet", "darkTheme", "svg", "render", "_error", "innerText", "innerHTML", "_label", "appendChild", "requestMeasure", "_container", "valid", "parse", "result", "_id", "undefined", "_svg", "err", "String", "ignoreEvent", "e", "test", "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":{"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":9645},"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":2870},"src/extensions/index.ts":{"bytesInOutput":0},"src/meta.ts":{"bytesInOutput":299},"src/index.ts":{"bytesInOutput":0}},"bytes":3760}}}
1
+ {"inputs":{"src/extensions/mermaid-extension.ts":{"bytes":25706,"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":494,"imports":[{"path":"src/extensions/mermaid-extension.ts","kind":"import-statement","original":"./mermaid-extension"}],"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":14200},"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/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-extension.ts":{"bytesInOutput":5709},"src/extensions/index.ts":{"bytesInOutput":0},"src/meta.ts":{"bytesInOutput":299},"src/index.ts":{"bytesInOutput":0}},"bytes":6609}}}
@@ -1,2 +1,2 @@
1
- export * from './mermaid';
1
+ export * from './mermaid-extension';
2
2
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/extensions/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/extensions/index.ts"],"names":[],"mappings":"AAIA,cAAc,qBAAqB,CAAC"}
@@ -0,0 +1,7 @@
1
+ import { type Extension } from '@codemirror/state';
2
+ export type MermaidOptions = {};
3
+ /**
4
+ * Extension to create mermaid diagrams.
5
+ */
6
+ export declare const mermaid: (_options?: MermaidOptions) => Extension;
7
+ //# sourceMappingURL=mermaid-extension.d.ts.map
@@ -0,0 +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,GAAI,WAAU,cAAmB,KAAG,SAsHvD,CAAC"}
@@ -1,15 +1,16 @@
1
1
  import '@dxos-theme';
2
- import { type Meta } from '@storybook/react-vite';
3
- export declare const Default: {
4
- args: {
5
- text: string;
6
- };
2
+ import { type StoryObj } from '@storybook/react-vite';
3
+ import React from 'react';
4
+ type StoryProps = {
5
+ text?: string;
7
6
  };
8
- export declare const Error: {
9
- args: {
10
- text: string;
11
- };
7
+ declare const meta: {
8
+ title: string;
9
+ render: ({ text }: StoryProps) => React.JSX.Element;
10
+ decorators: import("@storybook/react").Decorator[];
12
11
  };
13
- declare const meta: Meta;
14
12
  export default meta;
13
+ type Story = StoryObj<typeof meta>;
14
+ export declare const Default: Story;
15
+ export declare const Error: Story;
15
16
  //# 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;AAErB,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAyClD,eAAO,MAAM,OAAO;;;;CAqBnB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;CAgBjB,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAIX,CAAC;AAEF,eAAe,IAAI,CAAC"}
1
+ {"version":3,"file":"mermaid.stories.d.ts","sourceRoot":"","sources":["../../../../src/extensions/mermaid.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,KAAK,UAAU,GAAG;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAqBF,QAAA,MAAM,IAAI;;uBAnBsB,UAAU;;CA6BL,CAAC;AAEtC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAqBrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAgBnB,CAAC"}