Updating @codemirror/view breaks colorscheme and extensions

1

When updating @codemirror/view from 6.24.1 to any later version my extensions seem to not work.

Editor code:

import { useEffect, useRef } from "react";

import { closeBrackets } from "@codemirror/autocomplete";
import { history } from "@codemirror/commands";
import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
import { bracketMatching, indentOnInput } from "@codemirror/language";
import { languages } from "@codemirror/language-data";
import { EditorState } from "@codemirror/state";
import {
  crosshairCursor,
  drawSelection,
  dropCursor,
  highlightSpecialChars,
  rectangularSelection,
  // scrollPastEnd,
} from "@codemirror/view";

import { vim } from "@replit/codemirror-vim";
import useThemeChange from "~/hooks/useThemeChange";
import { useGlobalState } from "~/store";
import { EditorView } from "codemirror";

import { darkTheme, lightTheme } from "./editor-themes";
import TagInput from "./TagInput";

export const Editor = () => {
  const editor = useRef<HTMLDivElement>(null);

  const { setActiveNote, activeNote } = useGlobalState();

  const theme = useThemeChange();
  useEffect(() => {
    const startState = EditorState.create({
      doc: activeNote?.content,
      extensions: [
        theme === "dark" ? darkTheme : lightTheme,
        vim(),
        highlightSpecialChars(),
        history(),
        drawSelection(),
        dropCursor(),
        indentOnInput(),
        bracketMatching(),
        closeBrackets(),
        rectangularSelection(),
        crosshairCursor(),
        EditorView.lineWrapping,
        EditorView.updateListener.of((update) => {
          if (update.focusChanged) {
          }
          if (update.docChanged) {
            if (activeNote) {
              activeNote.content = update.state.doc.toString();
              setActiveNote(activeNote);
            }
          }
        }),
        // basicSetup,
        markdown({
          base: markdownLanguage,
          codeLanguages: languages,
        }),
      ],
    });

    const view = new EditorView({
      state: startState,
      parent: editor.current!,
    });

    return () => {
      view.destroy();
    };
  }, [theme, activeNote, setActiveNote]);

  return (
    <>
      {activeNote && (
        <div className="flex h-full flex-col">
          <div
            className="editor-container h-full w-full overflow-y-auto"
            ref={editor}
          />
          <div className="flex items-center">
            <TagInput />
          </div>
        </div>
      )}
    </>
  );
};

export default Editor;

Here are my codemirror related package versions

    "codemirror": "^6.0.1",
    "@codemirror/commands": "^6.5.0",
    "@codemirror/lang-markdown": "^6.2.5",
    "@codemirror/language-data": "^6.5.1",
    "@codemirror/state": "^6.4.1",
    "@codemirror/view": "^6.24.1",
    "@replit/codemirror-vim": "^6.2.1",
2

If you’re using yarn or an old version of npm, those mess up the dependency tree when you upgrade, and you’ll have to clear your package lock and reinstall your dependencies.

3

gotcha, I’m using bun so I’m not sure, I’ll try to see what happens when I switch to a recent version of npm