ProseMirror Markdown with Liquid tags

Hey all,

I’m building a an app with a WYSIWYG editor based on prosemirror-markdown and that’s working great so far.

Now, I want to allow users to use Liquid templating expressions as part of their documents. Liquid tags are defined inline, similar to PHP or ERB tags, like so:
{{ some_expression }}

My only issue is that due to the way Prosemirror is serializing documents, the example above ends up transformed to {{ some\_expression }} (i.e. with an escape character added to _).

Is there a simple way of telling Prosemirror to not escape anything between {{ and }}?

I thought I might be able to create a custom mark or node for Liquid expressions - but I haven’t seen any examples of marks based solely on inline text rather than custom tags. I’d be very grateful if you have any pointers for me :slight_smile:

The recommended way to do this would be to write a markdown-it plugin that parses this, define a node type for it, and customize your MarkdownParser to use the markdown-it tokens to create such a node, and MarkdownSerializer to emit the proper textual syntax for the node.

Thanks for your response @marijn!

I think this approach would work when parsing a Markdown document that contains the Liquid tags, but not when I have a Prosemirror document with Liquid tags just written inline. Or am I missing something?

To give a concrete example, this is what’s happening right now:

Prosemirror view

Some formatted text and some {{ liquid_template }}

Resulting Markdown

Some **formatted text** and some {{ liquid\_template }}

And this is what I would like to get instead:

Desired outcome

Some **formatted text** and some {{ liquid_template }}

Indeed, if you don’t distinguish the tags in your document structure, there’s no support for applying different escaping rules for them.

So there’s no way to modify how text gets escaped?

No, not really.

1 Like