Release 0.20.0

v6
1

I have just tagged a 0.20.0 release for all the @codemirror packages (and 0.16.0 for the @lezer packages). These introduce some package restructuring and a few minor breaking changes (listed below). I will tag 6.0 with this interface in a few weeks, if no significant issues are encountered.

To update your codebase, these are the things you’ll want to look at:

  • If you were still using Prec.fallback/Prec.override/Prec.extend, you must move to the new names.

  • The old height querying system on the view (blockAtHeight, visualLineAtHeight, viewportLines, visualLineAt) has been replaced with a simpler system where all y offsets are relative to the document top (see here).

  • The scroll control effects and method (scrollPosIntoView, scrollTo, and centerOn) are now replaced by the more general scrollIntoView effect.

  • Plugin fields no longer exist, and providing decorations from a view plugin now happens by providing a function to the EditorView.decorations facet. Same for atomic ranges and scroll margins — you must use a facet for them now.

  • The exports from the @codemirror/text and @codemirror/rangeset packages have been moved into @codemirror/state, and the old packages are no longer available.

  • The exports from the @codemirror/tooltip, gutter, panel, and rectangular-selection packages have been moved into @codemirror/view.

  • The exports from @codemirror/matchbrackets, @codemirror/stream-parser, and @codemirror/fold have been moved into @codemirror/language.

  • The exports from @codemirror/comment and @codemirror/history have been moved into @codemirror/commands. commentKeymap has been merged into defaultKeymap.

  • The @codemirror/closebrackets package has been merged into @codemirror/autocomplete.

  • The @codemirror/highlight package has been split between @codemirror/language (the editor-specific parts) and @lezer/highlight (a new package containing the generic syntax-highlighting functionality). Lezer parser packages are now expected to provide highlighting information.

  • HighlightStyles objects no longer directly act as editor extensions, but have to be wrapped with the syntaxHighlighting function first.

  • Language objects no longer export a topNode property, and if you want to use per-language highlighting you should pass the entire Language object to the scope option instead.

  • In completion results, the rather confusing span property has been renamed to validFor (and may be a function, not just a regexp).

  • If you’re using iterate on syntax trees, the signature of the enter/leave functions was simplified in a breaking way.

The less granular module structure should make setting up your editor a bit more straightforward, and the changes to the highlighting logic make it a lot easier to do syntax highlighting based on Lezer parsers without pulling in a bunch of irrelevant editor code.

7 Likes
2

This looks great!

We (at Overleaf) have been using classHighlightStyle (CodeMirror 6 Reference Manual) to bridge some of our color schemes, as a temporary measure. It looks like this function has been removed in this migration (at least, I can’t find it in the language or lezer/class repositories on github). Is this removal intentional? Or am I just looking in the wrong place?

3

It still exists in @lezer/highlight. But note that the prefix changed from cmt- to tok- (since it’s no longer part of CodeMirror, and the cm part no longer made much sense).

1 Like
4

Wait, did I read you right there? Are you saying that CodeMirror 6 might officially release in a few weeks?? That’s amazing!

5

Almost there in the move to 0.20. The last problem I have is with highlighting that seems ignored.

    import {defaultHighlightStyle, HighlightStyle} from "@codemirror/language";
    import {tags} from "@lezer/highlight";

    const myHighlightStyle = HighlightStyle.define([
        {tag: tags.keyword,          color: "#FC6"},
        {tag: tags.comment,          color: "#16A004", fontStyle: "italic"},
        {tag: tags.strong,           color: "#66D9EF", fontStyle: "bold"},
        ...
    ]);
    state: EditorState.create({
            extensions: [
                markdown(),
                syntaxHighlighting(myHighlightStyle),
                syntaxHighlighting(defaultHighlightStyle),
                ...
             ])

If I write in the editor **word** it is not rendered as per my style, and the following error appears (from @codemirror/view index.js line 1744) :

CodeMirror plugin crashed: TypeError: tags3 is not iterable
    at HighlightStyle.style (index.js:227:29)
    at highlightTags (index.js:244:33)
    at HighlightBuilder.highlightRange (index.js:294:30)
    at highlightTree (index.js:262:13)
    at TreeHighlighter.buildDeco (index.js:1582:13)
    at TreeHighlighter.update (index.js:1574:37)
    at PluginInstance.update (index.js:1830:32)
    at EditorView.updatePlugins (index.js:6151:29)
    at EditorView.update (index.js:6066:22)
    at EditorView._dispatch (index.js:5956:59)

Thanks for your patience!
mario

6

Did you upgrade @codemirror/lang-markdown to 0.20.0?

7

Yes. lang-markdown is 0.20.0
Same problem with yaml (using StreamLanguage and “@codemirror/legacy-modes” 0.20.0)

1 Like
8

Check npm ls --all, and if that doesn’t show the problem, please open a separate topic with more details.

9

Almost all of these changes affected my project, but I just ran through the upgrade process without any issues. Thanks so much for this migration guide!