Mixed json/liquid parser

v6
1

Hey,

I have a usecase where I’d like the user to be able to edit a JSON object where all strings can be Liquid templates, i.e. something like:

{
  "foo": "this is liquid {{ variable }}",
  "xyz": {
    "abc": "so is {{ this }}"
  }
}

So basically, I’d like to use @codemirror/lang-json for the editor but somehow choose the string values to be @codemirror/lang-liquid.

I can somewhat achieve this with the following code:

  const baseJsonLanguage = new LanguageSupport(
    jsonLanguage
  );

  const liquidJsonLanguage = liquid({
    base: baseJsonLanguage,
  });

However, this breaks quotation auto-closing and I’m a bit worried about what other things it might be breaking. Is there a cleaner way to achieve a seamless Liquid integration with json?

2

You can do something like this using mixed parsing, to make apply the Liquid parser only to the content of JSON strings. It’s slightly odd in that it’ll parse them as strings twice (because if you don’t set a base language on the Liquid parser when you make it responsible for the string content, it’ll not style that content at all), but that shouldn’t be a big issue.

1 Like
3

This seems to work well, thanks a lot!

4

Would it still be possible to add liquid-context specific autocompletion by adding it onto the liquidString somehow?