feat: replace the CodeMirror 5 code editor with CodeMirror 6

[lightbulbman]

Replaces the CodeMirror 5 code editor, loaded from WordPress through wp_enqueue_code_editor(), with CodeMirror 6 bundled with the plugin. Targeted for release 4.1.0 or 4.2.0; the changelog entries are under 4.1.0 (UPCOMING).

Changes

Editor

• The snippet editor, the settings page preview and the snippets list preview use CodeMirror 6. The existing editor settings keep their names and behaviour, and the code_snippets_codemirror_atts filter is still applied.
• PHP, CSS, JavaScript and HTML language support. PHP snippets are parsed from the first character without an opening tag; content snippets are parsed as HTML templates with PHP, CSS and JavaScript nested.
• The user profile's Syntax Highlighting option still falls back to a plain textarea.
• The editor no longer loads WordPress's CodeMirror, CSSLint, JSHint or HTMLHint. The snippets list loads the editor when a preview is first opened.

Themes

• The 65 bundled themes are converted from the CodeMirror 5 theme stylesheets at build time by a PostCSS plugin (config/webpack/postcss-codemirror-theme.ts). Theme names are unchanged, so saved settings carry over.
• The settings page loads one combined theme stylesheet instead of one per theme.

Linting

• PHP is linted with the existing php-parser linter. CSS and JavaScript report syntax errors from the parser.

Autocompletion

• PHP: keywords, variables, functions and classes declared in the snippet, templates for common WordPress code, and an index of WordPress and PHP functions with their parameters, a summary and a documentation link.
• The function index is generated by scripts/generate-function-index.php (npm run generate:function-index) and loaded on first use.
• CSS, HTML and JavaScript use their language packages' completions; JavaScript also completes browser globals.

Settings and keymaps

• New Indentation Guides (on by default) and Highlight Trailing Spaces (off by default) settings.
• Emacs keymap via @replit/codemirror-emacs; Vim via @replit/codemirror-vim, loaded only when selected. The Sublime Text keymap provides the most-used Sublime Text shortcuts.

Extensibility

• A code_snippets.editor.extensions JavaScript filter (@wordpress/hooks) for adding CodeMirror extensions, for code built with the plugin.

Dependencies

• Adds the CodeMirror 6 packages, @wordpress/hooks, and the Replit Emacs, Vim and indentation markers packages. Removes the unused @codemirror/fold 0.19 package and @types/codemirror. codemirror@5 moves to devDependencies, used only as the source of the theme stylesheets.

Developer-facing changes

• Plugin screens no longer create wp.codeEditor instances or .CodeMirror elements.
• code_snippets_codemirror_atts only applies the editor settings' own options; WordPress code editor options such as mode, gutters and extraKeys are ignored.
• Custom themes added through that filter keep their token colours, but rules for the editor background, gutters, cursor, selection and active line need CodeMirror 6 class names (.cm-editor, .cm-gutters, .cm-activeLine, and so on).
• enqueue_code_editor() no longer takes a snippet type; enqueue_code_preview_editor() takes the handle of the script that shows previews.

Verification

• PHPUnit: 340 tests pass (25 skipped, unchanged), including new tests/unit/Utils/Editor_Test.php and updated Manage_Menu_Assets_Test.
• Playwright:
  • New tests/e2e/code-editor.spec.ts covers loading, keyboard save, bracket closing and indentation, token highlighting, linting, settings, keymaps, the settings preview, autocompletion in each language, templates, indentation guides, trailing spaces, fold markers and preview wrapping.
  • Existing editor specs were updated to CodeMirror 6.
  • The full suite passed apart from six preview-modal focus assertions, which were fixed in 1f36c6ec.
  • The editor, preview and label specs pass on the final commit in both the database and file-based projects.
• ESLint, Stylelint and PHPCS pass. tsc --noEmit reports one existing error in InsightsChartViewToggle.tsx, which is unchanged by this branch.
• Production build: editor.js is about 262 KB gzipped. WordPress's CodeMirror bundle and linters were about 355 KB. The function index is a separate 88 KB chunk and the Vim keymap a separate 38 KB chunk.

🤖 Generated with Claude Code

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}