Skip to content

refactor(code-editor): update to Codemirror 6 #421

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

e111077
Copy link
Contributor

@e111077 e111077 commented Mar 18, 2025

Upgrade to codemirror 6

per-file summary

src/playground-code-editor.ts Major rewrite to adapt to CodeMirror 6:
  • Replaced CodeMirror 5 imports and types with CodeMirror 6 equivalents (EditorState, EditorView, Extension, Compartment, etc.).
  • Removed the old playgroundStyles import and added the new styles import from playground-styles.ts.
  • Applied the .tok-* classes with syntaxHighlighting(classHighlighter, {fallback: true})
  • Changed internal state management from CM5's Editor instance to CM6's EditorView and EditorState.
  • Updated property getters (cursorPosition, cursorIndex, tokenUnderCursor) to use the CM6 API.
  • Rewrote the update method to use CM6 Compartments and StateEffects for dynamic configuration changes for the following features:
    • line numbers
    • wrapping
    • language
    • read-only
    • completions
  • Replaced the CM5 view creation logic with CM6 EditorView instantiation and state creation (_createEditorState).
  • Implemented language switching using _getLanguageExtension and the _languageCompartment.
  • Autocomplete
    • Rewrote completion logic using CM6's autocompletion extension
    • Removed CM5 hint-related code.
    • Adapted _showDiagnostics to use CM6 Decorations and StateField.
  • Reimplemented hide/fold pragma logic
    • using CM6 Decorations, WidgetType, and Annotations.
  • Removed CM5-specific methods and event listeners (e.g., _onRenderLine).
  • Added createRenderRoot to handle shadow root adoption for the EditorView
    • This was done to shore up some issues with the shadow root not being available in certain instances at connectedCallback()
playground-styles.css

Deleted this file entirely. Instead manually wrote the .css.ts file's style overrides.

src/playground-styles.ts
  • Defines the editor's base styles and syntax highlighting theme.
  • Styles are adapted from the old playground-styles.css but use CodeMirror 6 class names
  • unlike before, it's not the styles + overrides, but rather JUST the overrides + css custom props
package.json
  • Removed CodeMirror 5 related packages (@types/codemirror, codemirror-grammar-mode, google_modes).
  • Added numerous CodeMirror 6 packages (@codemirror/*, @lezer/*).
  • Updated the main codemirror dependency to ^6.0.1.
  • Added codemirror-5 as a git dependency, for theme generation compatibility.
  • Updated versions and integrity hash
  • Removed build scripts related to CM5 (build:styles-module, build:codemirror).
  • Updated wireit configurations to remove dependencies on the deleted build scripts.
rollup.config.codemirror.js Deleted this file. It was responsible for bundling CodeMirror 5 and its addons.
rollup.config.styles.js

Deleted this file. It was used to process playground-styles.css into a TypeScript module.

scripts/theme-generator.js

Updated the script to read theme files from the codemirror-5/theme directory instead of codemirror/theme, reflecting the aliased package name for the old version.

src/_codemirror

Deleted this directory. This was the entry point for the custom CodeMirror 5 ESM-ified bundle.

src/cm-lang-lit.ts
  • Defines custom CodeMirror 6 language support for Lit templates
    • html, css, svg, mathml within JavaScript and TypeScript
  • exports language definitions:
    • litLanguage
    • litJsxLanguage
    • A main lit() language support function.
src/configurator/highlight-tokens.ts
  • Updated the cmClass property for each token definition to match the new token class names generated by CodeMirror 6's classHighlighter
    • e.g., cm-keyword changed to tok-keyword
  • Added a new synBool token.
src/configurator/playground-theme-detector.ts
  • Removed logic specific to CodeMirror 5's rendering (viewportMargin).
  • Added a mapping (tokenToCssProperty) to translate CM6 token names back to the existing CSS custom property names for compatibility.
  • Updated the logic for extracting token classes to handle both cm- and tok- prefixes.
  • Adjusted the text processing logic to better match how CM6 structures its highlighted output (e.g., handling #id in CSS).
src/internal/codemirror.ts

Deleted this file. It previously exported the CodeMirror 5 global object.

@e111077 e111077 force-pushed the codemirror-6 branch 3 times, most recently from 20e7f09 to b19a47f Compare April 3, 2025 06:39
@e111077 e111077 marked this pull request as ready for review April 3, 2025 06:43
@e111077 e111077 requested a review from justinfagnani April 3, 2025 06:43
@e111077
Copy link
Contributor Author

e111077 commented Apr 10, 2025

heya @justinfagnani @aomarks, I've added a summary to my description in the order of what files I think are important in this PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants