Svelte: Can't get useNodeViewContext('contentRef') to work with the diagram plugin

[dev-guy]

@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--&gt;B;
    A--&gt;C;
    B--&gt;D;
    C--&gt;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.

[dev-guy]

Indeed. The following logs the Mermaid code.

  let nodeStore = useNodeViewContext('node')
  console.log($nodeStore.attrs.value)