Get unparsed text for node?

[rvIceBreaker]

I'd like to be able to change how a node is rendered when selected or edited; when moving your text cursor into or selecting the text of a node, I would like to render the raw markdown value instead of the HTML output, and re-render the parsed value when leaving the node.

• I can get the textContent, but that doesn't include the markdown syntax.
• I could try and re-construct the markdown syntax by inferring information from the node, but that seems overly complicated and potentially destructive to the document input.

I can't find any references on how to accomplish this in relation to Prosemirror or Milkdown, specifically the ability to access the raw unparsed value of a node.

Does anyone have any ideas?

[allan-maeots]

It is possible to get markdown of active node using serializer (and a temporary doc) but I'm not sure if Milkdown allows editing pure markdown (in the playground they use CodeMirror for that).

A sketchy example plugin for fetching markdown:

import { serializerCtx } from "@milkdown/core";
import { Plugin, PluginKey } from "@milkdown/prose/state";
import { $prose } from "@milkdown/utils";

const selectionMarkdownKey = new PluginKey("MyTestPlugin")

export const selection = $prose((ctx) => {
  return new Plugin({
    key: selectionMarkdownKey,
    state: {
      init() {
        return;
      },
      apply(tr, value, prevState, state) {
        const serializer = ctx.get(serializerCtx);
        const doc = state.schema.topNodeType.createAndFill(undefined, tr.selection.$from.node(tr.selection.$from.depth));
        if (doc) {
          const markdown = serializer(doc);
          console.log(markdown);
        }
      }
    }
  })
});

No idea how you would display that inline now tho in a way that it would remain editable and without breaking the rest of the editor (and plugins like collab). Maybe by using decorations (adding <pre> tags or creating a decoration.widget)? 🤷‍♂️