Inline image markdown as a block node in Prosemirror

1

I’m parsing markdown string that has image syntax like this

import { schema } from "prosemirror-schema-basic";
import { MarkdownParser } from "prosemirror-markdown";
import MarkdownIt from "markdown-it";

const markdownParser = new MarkdownParser(
  schema,
  MarkdownIt(),
  {
    paragraph: { block: "paragraph" },
    image: {
      node: "image",
      getAttrs: (tok) => ({
        src: tok.attrGet("src"),
      }),
    },
  }
);

EditorState.create({ doc: markdownParser.parse(`![alt](link)`) })

It works if the image’s spec is such that inline: true, group: "inline". But the image would be wrapped in a paragraph and user can continue type as the image is inline.

But I want my image to be a standalone node like a code block.

The DOMParser works for <img /> tag with image spec as inline: false, group: "block". This produces the image node I wanted. But when I switch to parsing Markdown string, I don’t see the image anymore…

Here is the demo: CodeSandbox

2

Images are inline elements in Markdown. Changing that will probably require you to modify the Markdown parser as well.

1 Like