Using codemirror/lang-liquid with lang-markdown instead of lang-html

v6
1

I’m building a markdown editor that allows for liquid templating, and I was overjoyed to see that codemirror/lang-liquid already exists:

Having said that, after reading the docs I can’t make sense of how best to unite both Liquid and Markdown.

It seems that I should be able to pass the output of markdown() to the liquid() function like so:

import { EditorView } from '@codemirror/view'
import { EditorState } from '@codemirror/state'
import { markdown, markdownLanguage } from '@codemirror/lang-markdown'
import { liquid } from '@codemirror/lang-liquid'

// Editor state config doesn't fully match what I'm doing, but for
// simplicity this is more or less the idea
const view = new EditorView({
  parent: document.querySelector("#editorRoot"),
  state: EditorState.create({
    extensions: [
      liquid({ base: markdown({ base: markdownLanguage }) }),
    ],
  })
})

But when I do that it throws an error that indicates base must be the result of html() from lang-html.

Is there any straightforward way to accomplish what I’m trying to accomplish?

2

It looks like that constraint was a leftover from the lang-vue code, which I used as a base when implementing this, but it wasn’t actually needed for this mode. Version 6.0.1 removes it.

1 Like
3

@marijn Absolutely incredible. As soon as I updated my editor worked flawlessly. Thanks for the quick patch!

4

I am trying to use this on my project. But show me an error that is
chunk-CDNOX654.js?v=b4b29545:1471 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘deserialize’)
at setProp (chunk-CDNOX654.js?v=b4b29545:1471:42)
at new _LRParser (chunk-CDNOX654.js?v=b4b29545:1485:15)
at _LRParser.deserialize (chunk-CDNOX654.js?v=b4b29545:1748:12)
at chunk-HVTTSDAU.js?v=b4b29545:2240:23

my code snippet is

import { javascript } from "@codemirror/lang-javascript";
import { lintGutter } from "@codemirror/lint";
import ReactCodeMirror, { ViewUpdate } from "@uiw/react-codemirror";
import { basicSetup } from "codemirror";
// import Linter from "eslint4b-prebuilt";
import { liquid } from "@codemirror/lang-liquid";

type CodeEditorProps = {
  value?: string;
  custom_class?: string;
  height?: string;
  onChange?(value: string, viewUpdate: ViewUpdate): void;
};
const CodeEditor = ({ value, custom_class, height, onChange }: CodeEditorProps) => {
  // console.log(liquid);
  return (
    <ReactCodeMirror
      value={value}
      height={height || "200px"}
      className={custom_class || ""}
      extensions={[
        // linter(esLint(new Linter())),
        lintGutter(),
        basicSetup,
        javascript({ typescript: true }),
        liquid()
      ]}
      onChange={onChange}
    />
    // <div ref={editorRef}></div>
  );
};
export default CodeEditor;
5

You may somehow have ended up with an outdated @lezer/common package.

Also, loading both javascript() and liquid() will not work—the first main language you load will be used, the rest ignored.

6

yarn add codemirror @codemirror/lang-sql @codemirror/lang-go
yarn add v1.22.19
[1/4] :mag: Resolving packages…
⠁ (node:16413) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead.
(Use node --trace-deprecation ... to show where the warning was created)
[2/4] :truck: Fetching packages…
[3/4] :link: Linking dependencies…
warning “codemirror > @codemirror/autocomplete@6.11.1” has unmet peer dependency “@lezer/common@^1.0.0”.
[4/4] :hammer: Building fresh packages…
success Saved 3 new dependencies.
info Direct dependencies
├─ @codemirror/lang-go@6.0.0
├─ @codemirror/lang-sql@6.6.3
├─ codemirror@6.0.1
info All dependencies
├─ @codemirror/lang-go@6.0.0
├─ @codemirror/lang-sql@6.6.3
├─ codemirror@6.0.1

Just used this code make error happends:

import { sql } from '@codemirror/lang-sql'

const extensions = [sql()]

show me an error that is:

TypeError: Cannot read properties of undefined (reading ‘deserialize’)
at setProp (@codemirror_lang-sql.js?t=1713835994627&v=fbeaa6f0:1448:42)
at new _LRParser (@codemirror_lang-sql.js?t=1713835994627&v=fbeaa6f0:1462:15)
at _LRParser.deserialize (@codemirror_lang-sql.js?t=1713835994627&v=fbeaa6f0:1725:12)
at @codemirror_lang-sql.js?t=1713835994627&v=fbeaa6f0:2058:25

7

Your @lezer/common got incorrectly held back, somehow. You’ll probably want to clear your package lock and reinstall dependencies.