How to upgrade "@codemirror/" past 0.19?

v6
1

I have such dependencies in package.json:

  "dependencies": {
    "@codemirror/autocomplete": "^0.19.15",
    "@codemirror/commands": "^0.19.8",
    "@codemirror/highlight": "^0.19.8",
    "@codemirror/history": "0.19.1",
    "@codemirror/lang-markdown": "0.19.6",
    "@codemirror/language": "^0.19.7",
    "@codemirror/rangeset": "^0.19.9",
    "@codemirror/state": "^0.19.9",
    "@codemirror/view": "^0.19.48",
    "@lezer/markdown": "0.15.6"
  },

It works fine. I tried to update the code mirror to 0.20, following this guide: Release 0.20.0 and currently I have these:

  "dependencies": {
    "@codemirror/autocomplete": "^0.20.0",
    "@codemirror/commands": "^0.20.0",
    "@codemirror/language": "^0.20.0",
    "@codemirror/lang-markdown": "^0.20.0",
    "@codemirror/state": "^0.20.0",
    "@codemirror/view": "^0.20.0",
    "@lezer/highlight": "^0.16.0",
    "@lezer/markdown": "^0.16.0"
  },

I don’t know why, but not my markdown parser doesn’t work.

A use this as an markdown extension into the EditorState:

import {defineLanguageFacet, Language} from '@codemirror/language';
import {commonmarkLanguage, markdown} from '@codemirror/lang-markdown';
import {Strikethrough, Table} from '@lezer/markdown';
import {styleTags, Tag, tags} from '@lezer/highlight';

import {Keyboard} from '../decoration/keyboard.js';
import {UserMention} from '../decoration/mention.js';
import {Subpage} from "../decoration/subpage.js";

import {matchingBracketInput} from "./matchingBrackets.js";

export const subpageTag = Tag.define(tags.meta);
export const keyboardTag = Tag.define(tags.meta);
export const keyboardKeyTag = Tag.define(tags.meta);
export const userMentionTag = Tag.define(tags.meta);
export const horizontalRuleTag = Tag.define(tags.meta);

function language(parser) {
  const facet = defineLanguageFacet({block: {open: "<!--", close: "-->"}});
  const documentType = parser.nodeSet.types.find(type => type.name === "Document");
  return new Language(facet, parser, documentType);
}

const elements = [Table, UserMention, Keyboard, Subpage, Strikethrough];

const styles = {
  "TableHeader/...": tags.heading,
  'UserMention': userMentionTag,
  'Keyboard': keyboardTag,
  'KeyboardKey': keyboardKeyTag,
  'Subpage': subpageTag,
  "Strikethrough/...": tags.strikethrough,
  'HorizontalRule': horizontalRuleTag,
};

const flavouredParser = commonmarkLanguage.parser.configure([...elements, {props: [styleTags(styles)]}]);
const flavouredMarkdownLanguage = language(flavouredParser);

export default [
  markdown({
    base: flavouredMarkdownLanguage,
    codeLanguages: [],
    addKeymap: false
  }),
  matchingBracketInput
];

And I think parsing just doesn’t happen. When I iterate the node tree, i don’t get anything.

After loading, when I call

import {Language} from "@codemirror/language";
view.state.field(Language.state, false)

I get undefined.

Ideally I want to upgrade to newest possible code mirror.

2

Then why not use version 6.x of these packages (1.x for @lezer), instead of 0.20.0?

3

I installed these versions:

  "dependencies": {
    "@codemirror/autocomplete": "6.0.0",
    "@codemirror/commands": "6.0.0",
    "@codemirror/language": "6.0.0",
    "@codemirror/lang-markdown": "6.0.0",
    "@codemirror/state": "6.0.0",
    "@codemirror/view": "6.0.0",
    "@lezer/highlight": "1.0.0",
    "@lezer/markdown": "1.0.0"
  },

But when I did I got exception:

vue.runtime.esm.js:3060 Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.
    at inner (index.js:2036:23)
    at inner (index.js:2011:17)
    at inner (index.js:2037:13)
    at inner (index.js:2011:17)
    at inner (index.js:2037:13)
    at inner (index.js:2011:17)
    at inner (index.js:2011:17)
    at flatten (index.js:2040:5)
    at Configuration.resolve (index.js:1948:25)
    at EditorState.create (index.js:2773:43)
4

That usually goes away if you clear your package lock and reinstall dependencies. Npm is often dumb about upgrades, and unnecessarily duplicates packages.

2 Likes
5

Oh, also, put a ^ in front of those ranges so you get the actual current version of the packages (“^6.0.0”)!

3 Likes