feat: Upgrade CodeMirror to 6.x#464
Conversation
- Update about.md to reference CodeMirror 6 - Add @codemirror/lint to package.json dependencies - Add linkHref/linkText/linkTitle to getState() in state-detection.js - Export inlineAttachmentExtension() from inline-attachment.js
Apply depth-aware list coloring to full list item text in the CM6 markdown editor and wire the highlighter into editor initialization.
Rebuild the minified CM6 bundle so runtime assets include the nested list depth styling logic.
- Remove underlines from headers and links (defaultHighlightStyle fallback) - Fix link colors: blue text, yellow/orange URL - Add bold, italic, and processingInstruction highlight styles - Fix font by targeting .cm-scroller instead of .cm-editor - Switch all languages to legacy modes for CM5-consistent token mapping - Use LanguageDescription support: instead of load() for immediate parsing - Fix inline code grey color without leaking into fenced code blocks - Remove showPanel, display bottom panel as regular DOM element - Fix cursor position after Header/Quote/List toolbar buttons - Make active line background semi-transparent so selection is visible - Restore light theme gutter background (#f7f7f7) and line number color (#999)
CM6 base theme sets display: flex !important on .cm-editor, which prevents inline style.display = 'none' from hiding it. Hide the parent #editor_block div instead.
|
Hey @onovy, thanks for this PR! I'm looking forward to review and test it! Please have a look at #462 where @fidergo-stephane-gourichon mentioned an incoming PR for CodeMirror 6. |
- Remove all redundant CSS from codemirror-theme.css (all rules duplicated in cm6-src/theme.js EditorView.theme definitions) - Remove unused exports: getLanguage() and getActiveTheme() - Remove unused imports and void suppressors in editor-formatting, editor-links, and editor-lists - Remove debug console.log from editor-formatting.js - Deduplicate _getSelectedLines(): editor-tables.js now imports from editor-formatting.js instead of re-implementing it - Clean up codemirror-dialog.css: consolidate 3 conflicting .cm-panel blocks, remove problematic position/z-index/border rules
tags.processingInstruction in light theme had explicit color: black which overrode the inherited cm-list-1/2/3 color on ListMark nodes. Removing the explicit color lets markers inherit the list depth color correctly.
Use markdownLanguage as base for markdown() to enable GitHub Flavored Markdown extensions. Without this, [x] was parsed as a link instead of a TaskMarker, causing checklist items to appear in link color rather than the correct atom color.
Extend the code highlighter ViewPlugin to cover both InlineCode and FencedCode nodes entirely (marks + content), instead of only the CodeText inside InlineCode. This makes backtick inline code and triple-backtick code blocks both render in grey.
…xplicit processingInstruction color
I only targeted a recent CodeMirror 5 version (much simpler changes), not the 6, so no interference between the two. |
|
Thanks for this PR! I ran a first round of tests and things are looking good so far. If you're interested in trying this out, feel free to test on https://testing.otterwiki.com and report any issues you find. Will continue testing and report back. |
|
On mobile, selection is not highlighted and wrongly placed On previous versions : |
|
Hey @lucastucious, thanks for reporting this. This is not ust an issue on mobile devices, same for the desktop: 
Works fine in light mode: @onovy do you look into that or should I take over? |
The dark theme's selection selector had lower specificity (0,3,0) than CodeMirror 6's base theme (0,5,0), causing the base theme's nearly-invisible redimp#233 to override the intended #434c5e color. Use the same selector pattern as @codemirror/theme-one-dark.
|
fixed |
|
Looks good to me. Updated https://testing.otterwiki.com |
|
This is looking like a big improvement! Would it be possible to enable autocorrect/autocapitalize (at least on mobile)? In case it's helpful, here's an example of how to turn it on in CM6. |
5 participants
This is huge change and needs deep testing. Marking as draft for now, please report any issues. Thanks :)