[PR #3617] [MERGED] Upgrade to codemirror 6 #6234

New Issue

OVERLORD · 2026-02-05T10:27:26+03:00

OVERLORD commented

2026-02-05 10:27:26 +03:00

📋 Pull Request Information

Original PR: https://github.com/BookStackApp/BookStack/pull/3617
Author: @ssddanbrown
Created: 8/2/2022
Status: ✅ Merged
Merged: 4/18/2023
Merged by: @ssddanbrown

Base: development ← Head: codemirror6

📝 Commits (10+)

d4f2fcd Started codemirror update, In broken state
97146a6 Added handling of codemirror 6 code languages
4757ed9 Converted codemirror languges to new packages where available
9fd7a6a Added dark theme handling
9135a85 Merge branch 'codemirror6' into codemirror6_take2
f51036b Added newer languages where possible
c148e2f Added esbuild bundle inspection metafile
c81cb6f Merge branch 'development' into codemirror6
dce5123 Added own twig/smarty packages for cm6 lang support
572037e Got markdown editor barely functional

📊 Changes

30 files changed (+1759 additions, -2715 deletions)

View changed files

📝 .gitignore (+3 -1)
📝 dev/build/esbuild.js (+12 -9)
📝 package-lock.json (+676 -1597)
📝 package.json (+20 -5)
📝 readme.md (+0 -1)
➖ resources/js/code.mjs (+0 -346)
➕ resources/js/code/index.mjs (+207 -0)
➕ resources/js/code/languages.js (+116 -0)
➕ resources/js/code/legacy-modes.mjs (+27 -0)
➕ resources/js/code/setups.js (+54 -0)
➕ resources/js/code/simple-editor-interface.js (+46 -0)
➕ resources/js/code/themes.js (+91 -0)
➕ resources/js/code/views.js (+38 -0)
📝 resources/js/components/code-editor.js (+17 -15)
📝 resources/js/components/markdown-editor.js (+2 -9)
📝 resources/js/components/page-editor.js (+1 -1)
📝 resources/js/components/pointer.js (+11 -7)
📝 resources/js/markdown/actions.js (+263 -185)
📝 resources/js/markdown/codemirror.js (+48 -45)
📝 resources/js/markdown/editor.js (+1 -1)

...and 10 more files

📄 Description

PR to track upgrade from Codemirror 5 to 6. Quite a large change.

Closes #3518

References

Progress Report

Got a lot of fundamentals in place but concerned about the growth of complexity here.

Specifically:

~~The growth of bundle size, might need to do finer splitting.~~ Added extra split
~~The complex requirements of a theme~~. They're really designed to be bundled. Here's an example of an external theme. Don't think we can just define a string and import global JS like before. We could pass all required dependencies through a configure event but the theme implementation will probably be quite custom to BookStack. Or can we provide a simpler abstraction?
- Now added new API with methods to allow themeing. Is passed required tags. Is a custom API so external themes will need adapting.

Probable going to progress this slowly across a number of months, to understand codemirror rate of change and to gain some perspectives on best approach.

Todo

Add system to handle languages using old map keys.
Fix missing languages (commented out)
Use new lang packages where available
Handle language loading to prevent large bundle size.
- @codemirror/language-data shows an example for this.
Find solution for smarty/twig where possible.
- This example in the codemirror docs uses twig.
Test activation of each language available.
Fix usage in WYSIWYG editor.
Fix usage within WYSIWYG editor code popup window.
Understand themeing, and assess existing use/docs mention of window.codeTheme.
Markdown editor shortcuts.
Markdown editor events.
Add back support for the copy-icon popup buttony thingy.
Test support of PHP blocks without starting php tag and mixed content.
Add block tab indent/un-indent support for code editor.
Dark mode support
Align events to be cm6 instead of cm.
Remove extra border in md editor.
~~Only add copy button if in secure context~~ Added execCommand fallback instead.
Cross-browser testing
- Tested on FF/Chromium (Fedora 37), Safari/FF on MacOS

Docs/API Updates

The 'editor-markdown::setup' editor event no longer contains codeMirrorInstance in the event data. It instead has a cmEditorView property that contains the CodeMirror EditorView instance for the Markdown editor.
The 'editor-markdown-cm::pre-init' editor event has been renamed to editor-markdown-cm6::pre-init and no longer contains config in the event data. It instead has a editorViewConfig property that contains the CodeMirror EditorViewConfig data that's used to create the EditorView. Config object can be manipulated before use.
window.codeTheme is no longer used to set themes. Instead, there's a library-cm6::configure-theme event which emits event data in the following format:

{
    // Boolean to indicate if dark mode is active.
    darkModeActive: true,
    // Call this function with a builder callback to register a CodeMirror view theme.
    // If a value is returned it will be passed to CodeMirror View.theme as an Object<StyleSpec>.
    registerViewTheme: (builder) => {},
    // Call this function with a builder callback to register a CodeMirror highlighting style.
    // The builder callback is provided a references to Lezer.tags.
    // If a value is returned it will be passed to CodeMirror HighlightStyle.define as an Array<TagStyle>
    registerHighlightStyle: (builder) => {},
}

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/BookStackApp/BookStack/pull/3617 **Author:** [@ssddanbrown](https://github.com/ssddanbrown) **Created:** 8/2/2022 **Status:** ✅ Merged **Merged:** 4/18/2023 **Merged by:** [@ssddanbrown](https://github.com/ssddanbrown) **Base:** `development` ← **Head:** `codemirror6` --- ### 📝 Commits (10+) - [`d4f2fcd`](https://github.com/BookStackApp/BookStack/commit/d4f2fcdf7908ffa176350468a85e631f0497646c) Started codemirror update, In broken state - [`97146a6`](https://github.com/BookStackApp/BookStack/commit/97146a63590fa193a4958c09202b40340e840a1f) Added handling of codemirror 6 code languages - [`4757ed9`](https://github.com/BookStackApp/BookStack/commit/4757ed9453c0cfd8dd229e34ee3a64f74dfe0f3a) Converted codemirror languges to new packages where available - [`9fd7a6a`](https://github.com/BookStackApp/BookStack/commit/9fd7a6abedaf69efc449c7ea00724eb890fc71f7) Added dark theme handling - [`9135a85`](https://github.com/BookStackApp/BookStack/commit/9135a85de4eef32a91c7a3ee0aa405ed454e5a4c) Merge branch 'codemirror6' into codemirror6_take2 - [`f51036b`](https://github.com/BookStackApp/BookStack/commit/f51036b203936a3814286df37a03f6e200d9bb79) Added newer languages where possible - [`c148e2f`](https://github.com/BookStackApp/BookStack/commit/c148e2f3d96f3e62fef9ee63c0cd52943b3160ab) Added esbuild bundle inspection metafile - [`c81cb6f`](https://github.com/BookStackApp/BookStack/commit/c81cb6f2afd79c33104671ea31f4b0a0e9f85eba) Merge branch 'development' into codemirror6 - [`dce5123`](https://github.com/BookStackApp/BookStack/commit/dce51234527d1a0075f04d81b619e3d00e14ed3a) Added own twig/smarty packages for cm6 lang support - [`572037e`](https://github.com/BookStackApp/BookStack/commit/572037ef1fd1e778c33c609ef295c50de33a0652) Got markdown editor barely functional ### 📊 Changes **30 files changed** (+1759 additions, -2715 deletions) <details> <summary>View changed files</summary> 📝 `.gitignore` (+3 -1) 📝 `dev/build/esbuild.js` (+12 -9) 📝 `package-lock.json` (+676 -1597) 📝 `package.json` (+20 -5) 📝 `readme.md` (+0 -1) ➖ `resources/js/code.mjs` (+0 -346) ➕ `resources/js/code/index.mjs` (+207 -0) ➕ `resources/js/code/languages.js` (+116 -0) ➕ `resources/js/code/legacy-modes.mjs` (+27 -0) ➕ `resources/js/code/setups.js` (+54 -0) ➕ `resources/js/code/simple-editor-interface.js` (+46 -0) ➕ `resources/js/code/themes.js` (+91 -0) ➕ `resources/js/code/views.js` (+38 -0) 📝 `resources/js/components/code-editor.js` (+17 -15) 📝 `resources/js/components/markdown-editor.js` (+2 -9) 📝 `resources/js/components/page-editor.js` (+1 -1) 📝 `resources/js/components/pointer.js` (+11 -7) 📝 `resources/js/markdown/actions.js` (+263 -185) 📝 `resources/js/markdown/codemirror.js` (+48 -45) 📝 `resources/js/markdown/editor.js` (+1 -1) _...and 10 more files_ </details> ### 📄 Description PR to track upgrade from Codemirror 5 to 6. Quite a large change. Closes #3518 ### References - [Common cm6 default setups](https://github.com/codemirror/basic-setup/blob/main/src/codemirror.ts) - [Language (mode) management](https://codemirror.net/examples/language/) ### Progress Report Got a lot of fundamentals in place but concerned about the growth of complexity here. Specifically: - ~The growth of bundle size, might need to do finer splitting.~ **Added extra split** - ~The complex requirements of a theme~. They're really designed to be bundled. [Here's an example of an external theme](https://github.com/craftzdog/cm6-themes/blob/main/packages/solarized-dark/src/index.ts). Don't think we can just define a string and import global JS like before. We could pass all required dependencies through a configure event but the theme implementation will probably be quite custom to BookStack. Or can we provide a simpler abstraction? - **Now added new API with methods to allow themeing**. Is passed required `tags`. Is a custom API so external themes will need adapting. Probable going to progress this slowly across a number of months, to understand codemirror rate of change and to gain some perspectives on best approach. ### Todo - [x] Add system to handle languages using old map keys. - [x] Fix missing languages (commented out) - [x] Use new lang packages where available - [x] Handle language loading to prevent large bundle size. - [@codemirror/language-data](https://codemirror.net/docs/ref/#language-data) shows an example for this. - [x] Find solution for smarty/twig where possible. - [This example](https://codemirror.net/examples/mixed-language/) in the codemirror docs uses twig. - [x] Test activation of each language available. - [x] Fix usage in WYSIWYG editor. - [x] Fix usage within WYSIWYG editor code popup window. - [x] Understand themeing, and assess existing use/docs mention of `window.codeTheme`. - [x] Markdown editor shortcuts. - [x] Markdown editor events. - [x] Add back support for the copy-icon popup buttony thingy. - [x] Test support of PHP blocks without starting php tag and mixed content. - [x] Add block tab indent/un-indent support for code editor. - [x] Dark mode support - [x] Align events to be `cm6` instead of `cm`. - [x] Remove extra border in md editor. - [x] ~Only add copy button if [in secure context](https://developer.mozilla.org/en-US/docs/Web/API/isSecureContext#browser_compatibility)~ Added execCommand fallback instead. - [x] Cross-browser testing - Tested on FF/Chromium (Fedora 37), Safari/FF on MacOS ### Docs/API Updates - The 'editor-markdown::setup' editor event no longer contains `codeMirrorInstance` in the event data. It instead has a `cmEditorView` property that contains the [CodeMirror EditorView](https://codemirror.net/docs/ref/#view.EditorView) instance for the Markdown editor. - The 'editor-markdown-cm::pre-init' editor event has been renamed to `editor-markdown-cm6::pre-init` and no longer contains `config` in the event data. It instead has a `editorViewConfig` property that contains the [CodeMirror EditorViewConfig](https://codemirror.net/docs/ref/#view.EditorViewConfig) data that's used to create the EditorView. Config object can be manipulated before use. - `window.codeTheme` is no longer used to set themes. Instead, there's a `library-cm6::configure-theme` event which emits event data in the following format: ```js { // Boolean to indicate if dark mode is active. darkModeActive: true, // Call this function with a builder callback to register a CodeMirror view theme. // If a value is returned it will be passed to CodeMirror View.theme as an Object<StyleSpec>. registerViewTheme: (builder) => {}, // Call this function with a builder callback to register a CodeMirror highlighting style. // The builder callback is provided a references to Lezer.tags. // If a value is returned it will be passed to CodeMirror HighlightStyle.define as an Array<TagStyle> registerHighlightStyle: (builder) => {}, } ``` --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

OVERLORD added the pull-request label 2026-02-05 10:27:26 +03:00

OVERLORD closed this issue

2026-02-05 10:27:28 +03:00

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#6234