Convert markdown to schema with custom text styles

1

Hi,

I need to convert markdown to Prosemirror Schema format. However, I have custom text styles for each heading level/normal text that will come from a theme file. Specifically, a theme would look like:

theme1: {
title: {
    font: 'playfair_display',
    color: '#EFDDC1',
    size: '98px',
    bold: true,
  },
heading: {
    font: 'playfair_display',
    color: '#EFDDC1',
    size: '86px',
    bold: true,
  },
  subheading: {
    font: 'lora',
    color: '#EFDDC1',
    size: '47px',
    bold: true,
  },
normalText: {
    font: 'lora',
    color: '#FFFFFF',
    size: '18px',
    bold: false,
  },
...
{
smallText: ...

the markdown mapping looks like: “#” = title “##” = heading “###” = subheading everything else should have custom styles of normalText.

The goal is to get the JSONContent with all the text styles. I’ll then use this JSONContent as input to my Tiptap editor instance.

Note that the theme can be changed by the user on the fly as well.

I’m starting with the prosemirror-markdown package, however, i’m unsure what is the right way to apply styles from my custom theme to these elements.

Another question: If I need to create a custom mapping like ~<small-text>~ then do I need to create my own converter or can the prosemirror-markdown be extended?

Any guidance on this is appreciated.

Thanks

2

Yes, it should be possible to configure both the Markdown parser and the Markdown serializer to handle extensions like this. Though it may also be practical to just adjust your schema to keep the heading nodes from prosemirror-markdown, but with different DOM parsing/serializing logic to make them match your CSS class names. Adding custom markup requires writing (or finding) a markdown-it plugin for it, which may be a trickier.