refactor(code-editor): update to Codemirror 6 #421
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Upgrade to codemirror 6
per-file summary
Major rewrite to adapt to CodeMirror 6:src/playground-code-editor.ts
EditorState
,EditorView
,Extension
,Compartment
, etc.).playgroundStyles
import and added the newstyles
import fromplayground-styles.ts
..tok-*
classes withsyntaxHighlighting(classHighlighter, {fallback: true})
Editor
instance to CM6'sEditorView
andEditorState
.cursorPosition
,cursorIndex
,tokenUnderCursor
) to use the CM6 API.update
method to use CM6Compartment
s andStateEffect
s for dynamic configuration changes for the following features:EditorView
instantiation and state creation (_createEditorState
)._getLanguageExtension
and the_languageCompartment
.autocompletion
extension_showDiagnostics
to use CM6Decoration
s andStateField
.Decoration
s,WidgetType
, andAnnotation
s._onRenderLine
).createRenderRoot
to handle shadow root adoption for theEditorView
connectedCallback()
playground-styles.css
Deleted this file entirely. Instead manually wrote the
.css.ts
file's style overrides.src/playground-styles.ts
playground-styles.css
but use CodeMirror 6 class namespackage.json
@types/codemirror
,codemirror-grammar-mode
,google_modes
).@codemirror/*
,@lezer/*
).codemirror
dependency to^6.0.1
.codemirror-5
as a git dependency, for theme generation compatibility.build:styles-module
,build:codemirror
).wireit
configurations to remove dependencies on the deleted build scripts.
Deleted this file. It was responsible for bundling CodeMirror 5 and its addons.rollup.config.codemirror.js
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 ofcodemirror/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
html
,css
,svg
,mathml
within JavaScript and TypeScriptlitLanguage
litJsxLanguage
lit()
language support function.src/configurator/highlight-tokens.ts
cmClass
property for each token definition to match the new token class names generated by CodeMirror 6'sclassHighlighter
cm-keyword
changed totok-keyword
synBool
token.src/configurator/playground-theme-detector.ts
viewportMargin
).tokenToCssProperty
) to translate CM6 token names back to the existing CSS custom property names for compatibility.cm-
andtok-
prefixes.#id
in CSS).src/internal/codemirror.ts
Deleted this file. It previously exported the CodeMirror 5 global object.