Upgrading 0.19.0 issues

craftzdog · August 12, 2021, 3:30am

I’m building a Markdown editor example using CodeMirror/next.
I just tried to upgrade CodeMirror to 0.19.0:

    "@codemirror/basic-setup": "^0.19.0",
    "@codemirror/commands": "^0.19.1",
    "@codemirror/gutter": "^0.19.0",
    "@codemirror/highlight": "^0.19.1",
    "@codemirror/history": "^0.19.0",
    "@codemirror/lang-javascript": "^0.19.1",
    "@codemirror/lang-markdown": "^0.19.1",
    "@codemirror/language": "^0.19.2",
    "@codemirror/language-data": "^0.19.0",
    "@codemirror/matchbrackets": "^0.19.1",
    "@codemirror/state": "^0.19.0",
    "@codemirror/theme-one-dark": "^0.19.0",
    "@codemirror/view": "^0.19.1",

and got two issues.
Here is the initialization code:

github.com

craftzdog/markdown-editor-example/blob/main/packages/renderer/src/use-codemirror.tsx#L58

    
      
          const useCodeMirror = <T extends Element>(
            props: Props
          ): [React.MutableRefObject<T | null>, EditorView?] => {
            const refContainer = useRef<T>(null)
            const [editorView, setEditorView] = useState<EditorView>()
            const { onChange } = props
          
          
  useEffect(() => {
              if (!refContainer.current) return
          
          
    const startState = EditorState.create({
                doc: props.initialDoc,
                extensions: [
                  keymap.of([...defaultKeymap, ...historyKeymap]),
                  lineNumbers(),
                  highlightActiveLineGutter(),
                  history(),
                  indentOnInput(),
                  bracketMatching(),
                  defaultHighlightStyle.fallback,
                  highlightActiveLine(),

Markdown codeblocks not working

When inputting a codeblock, it fails to highlight:

CodeMirror plugin crashed: TypeError: Cannot read property 'from' of undefined
    at HighlightBuilder.highlightRange (index.js:455)
    at HighlightBuilder.highlightRange (index.js:483)
    at highlightTreeRange (index.js:492)
    at TreeHighlighter.buildDeco (index.js:391)
    at TreeHighlighter.update (index.js:383)
    at PluginInstance.update (index.js:1626)
    at EditorView.updatePlugins (index.js:5542)
    at EditorView.update (index.js:5471)
    at EditorView._dispatch (index.js:5385)
    at EditorView.dispatch (index.js:5439)

Language.parseString is no longer available

I implemented a runmode function but it is broken now because parseString does not exist.
How can I upgrade my code?

github.com

craftzdog/markdown-editor-example/blob/main/packages/renderer/src/runmode.ts#L6

    
      
          import { highlightTree } from '@codemirror/highlight'
          import { languages } from '@codemirror/language-data'
          import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark'
          import type { Language, LanguageDescription } from '@codemirror/language'
          
          
function runmode(
            textContent: string,
            language: Language,
            callback: (
              text: string,
              style: string | null,
              from: number,
              to: number
            ) => void
          ): void {
            const tree = language.parseString(textContent)

Any help would be appreciated!

marijn · August 12, 2021, 6:18am

I couldn’t reproduce the exact error you describe for Markdown code blocks (your setup example is incomplete, so I couldn’t copy that). But I did run into another mixed-language bug, which should be fixed in @lezer/common 0.15.1. Maybe it was related.

Seems I forgot to add a release note about parseString being removed. You can now just do language.parser.parse(string) instead.

craftzdog · August 12, 2021, 7:18am

Thank you for the help!
language.parser.parse(string) worked

I made a PR to fix the error: fix(*): avoid error when overlay is empty by craftzdog · Pull Request #2 · codemirror/highlight · GitHub
I guess it is a race condition issue or something.