Closed dev-guy closed 1 year ago
@prosemirror-adapter/svelte 0.2.5 svelte 3.58.0 Milkdown 7.2
I created a Milkdown editor with the diagram plugin. The editor content defaults to a string starting with ```mermaid
This works fine. Milkdown displays the Mermaid diagram text (Mermaid code).
<div data-type="diagram" data-id="gfceeaae" data-value=" graph TD; A-->B; A-->C; B-->D; C-->D;" contenteditable="false"> graph TD; A-->B; A-->C; B-->D; C-->D;</div>
I want to implement something similar to the way the Milkdown playground behaves (edit diagram / display diagram as svg), but using Svelte. I added a nodeview plugin:
use( [diagram, $view(diagramSchema.node, () => nodeViewFactory({ component: MyComponent, }))]);
MyComponent.svelte looks like:
<script> const contentRef = useNodeViewContext('contentRef'); </script> <div class='text-red-500' use:contentRef/>
The produced HTML looks like the following. The Mermaid diagram code does not appear. I have tried:
1) contentAs: 'div' 2) as: 'div' 3) as: 'div', contentAs: 'div'
<div class="milkdown"> <div contenteditable="true" translate="no" class="ProseMirror editor" role="textbox"> <div data-node-view-root="true"> <div class="text-red-500"> <div data-node-view-content="true" style="white-space: inherit;"> <br class="ProseMirror-trailingBreak"></div></div></div></div></div>
contentRef is a Svelte action that acts on the div that I provided.
(t4) => { t4 && t4 instanceof HTMLElement && this.contentDOM && t4.firstChild !== this.contentDOM && t4.appendChild(this.contentDOM); }
this.contentDOM appears to be:
<div data-node-view-content="true" style="white-space: inherit;"> <br class="ProseMirror-trailingBreak"></div>
Apparently I need to call useNodeViewContext('node') instead and interact with the prose mirror node.
Indeed. The following logs the Mermaid code.
let nodeStore = useNodeViewContext('node') console.log($nodeStore.attrs.value)
@prosemirror-adapter/svelte 0.2.5 svelte 3.58.0 Milkdown 7.2
I created a Milkdown editor with the diagram plugin. The editor content defaults to a string starting with ```mermaid
This works fine. Milkdown displays the Mermaid diagram text (Mermaid code).
I want to implement something similar to the way the Milkdown playground behaves (edit diagram / display diagram as svg), but using Svelte. I added a nodeview plugin:
MyComponent.svelte looks like:
The produced HTML looks like the following. The Mermaid diagram code does not appear. I have tried:
1) contentAs: 'div' 2) as: 'div' 3) as: 'div', contentAs: 'div'
contentRef is a Svelte action that acts on the div that I provided.
this.contentDOM appears to be:
Apparently I need to call useNodeViewContext('node') instead and interact with the prose mirror node.