Skip to content

Upgrade CodeMirror to latest v5 #10778

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.

Sign up for GitHub

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
westonruter wants to merge 29 commits into
base: trunk
Choose a base branch
from
+672 −18,098
Open

Upgrade CodeMirror to latest v5 #10778

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
aaf2ccb
Build Tools: Add CodeMirror and linters to dependencies.
westonruter Jan 23, 2026
7ac44f9
Build Tools: Remove pre-bundled CodeMirror files and linters.
westonruter Jan 23, 2026
e192eaf
Build Tools: Add CodeMirror bundle entry point.
westonruter Jan 23, 2026
4c7295d
Build Tools: Add CodeMirror Webpack configuration.
westonruter Jan 23, 2026
0a0d960
Build Tools: Implement CodeMirror build tasks.
westonruter Jan 23, 2026
ac581bc
CodeMirror: Update version strings in script-loader.php.
westonruter Jan 23, 2026
2fb47e4
Build Tools: Restore license headers for CodeMirror JS and CSS.
westonruter Jan 23, 2026
3fb2281
Build Tools: Add license header to unminified CodeMirror CSS.
westonruter Jan 23, 2026
79295b3
Build Tools: Apply CodeMirror license banner before minification.
westonruter Jan 23, 2026
404c7fa
Address JSHint complaint and redundant regex escaping
westonruter Jan 23, 2026
0dcbf28
Build Tools: Consolidate CodeMirror CSS concatenation and minification.
westonruter Jan 23, 2026
f96389f
Tests: Update script dependencies test for CodeMirror packages.
westonruter Jan 23, 2026
10ce369
Build Tools: Upgrade HTMLHint and fix CodeMirror externalization.
westonruter Jan 23, 2026
5d691d0
Use minified htmlhint
westonruter Jan 23, 2026
6f83bcf
Build Tools: Fix HTMLHint build patch for minified source.
westonruter Jan 23, 2026
3928682
Build Tools: Upgrade CodeMirror to latest v5 release.
westonruter Jan 23, 2026
39a8bfe
Editor: Update JSHint settings in `wp_get_code_editor_settings()`.
westonruter Jan 23, 2026
1802d4d
Build Tools: Parameterize CodeMirror Webpack output path.
westonruter Jan 23, 2026
a5858ec
Build Tools: Refine CodeMirror entry point documentation.
westonruter Jan 23, 2026
6dce922
Build Tools: Restore global linebreak option for banner task.
westonruter Jan 23, 2026
5378ec6
Build Tools: Centralize CodeMirror license banner.
westonruter Jan 23, 2026
d5ffce2
Build Tools: Align CodeMirror Webpack configuration with Core convent…
westonruter Jan 23, 2026
1535b0c
Use String.includes() instead of String.indexOf()
westonruter Jan 23, 2026
ee2b6bd
Editor: Switch from Esprima to Espree for JavaScript validation.
westonruter Jan 23, 2026
744f1c3
Omit CodeMirror license banner from Espree script
westonruter Jan 23, 2026
cf742fa
Build Tools: Target specific usebanner tasks in build processes.
westonruter Jan 23, 2026
7db8792
Fix formatting of codemirror.config.js
westonruter Jan 23, 2026
3d58f09
Use core version for jshint (fakejshint.js) since not an external dep…
westonruter Jan 23, 2026
6bc559f
Remove duplicate extractComments key
westonruter Jan 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 67 additions & 2 deletions Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/* jshint node:true */
/* jshint esversion: 6 */
/* eslint-env es6 */
/* globals Set */
var webpackConfig = require( './webpack.config' );
var installChanged = require( 'install-changed' );
Expand Down Expand Up @@ -175,6 +176,17 @@ module.exports = function(grunt) {
banner: BANNER_TEXT,
linebreak: true
},
codemirror: {
options: {
linebreak: false,
banner: require( './tools/webpack/codemirror-banner' )
},
files: {
src: [
WORKING_DIR + 'wp-includes/js/codemirror/codemirror.min.css'
]
Comment on lines +185 to +187
Copy link

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

usebanner is invoked without a target as part of build:css (see the build:css task later in this file). Adding a separate usebanner:codemirror target means grunt usebanner will also try to banner wp-includes/js/codemirror/codemirror.min.css during build:css, but that file is only generated in build:codemirror (which runs afterwards). Consider changing build:css to run usebanner:files (and keep usebanner:codemirror only in build:codemirror), or otherwise reordering tasks so the file exists when the usebanner:codemirror target runs.

Suggested change
src: [
WORKING_DIR + 'wp-includes/js/codemirror/codemirror.min.css'
]
src: []

Copilot uses AI. Check for mistakes.
Copy link
Member Author

@westonruter westonruter Jan 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Addressed in cf742fa.

Gemini's reasoning:

The problem solved is a task execution conflict that would occur during a full production build (grunt build).

In Grunt, if you invoke a task without a specific target (e.g., calling 'usebanner' instead of 'usebanner:files'), it automatically tries to run all defined targets for that task.

In your Gruntfile.js, usebanner has two targets:

  1. files: Handles general WordPress Core CSS/JS.
  2. codemirror: Handles the specific CodeMirror CSS bundle.

The build:css task (which is part of the main Core build) was calling the generic 'usebanner'. This meant that every time someone ran a standard CSS build, Grunt would try to add a banner to wp-includes/js/codemirror/codemirror.min.css.

However, that CodeMirror file is not created until the build:codemirror task runs later. This would cause Grunt to throw a "File not found" warning or error during the general CSS build phase.

By explicitly calling 'usebanner:files' in build:css, we ensure that the general build only touches general files, and the CodeMirror banner is handled only when CodeMirror itself is actually being built.

}
},
files: {
src: [
WORKING_DIR + 'wp-admin/css/*.min.css',
Expand Down Expand Up @@ -311,6 +323,33 @@ module.exports = function(grunt) {
}
]
},
'codemirror': {
options: {
process: function( content, srcpath ) {
if ( srcpath.includes( 'htmlhint.min.js' ) ) {
return content + '\nif ( window.HTMLHint && window.HTMLHint.HTMLHint ) { window.HTMLHint = window.HTMLHint.HTMLHint; }';
}
return content;
}
},
files: [
{
[ WORKING_DIR + 'wp-includes/js/codemirror/csslint.js' ]: [ './node_modules/csslint/dist/csslint.js' ],
[ WORKING_DIR + 'wp-includes/js/codemirror/esprima.js' ]: [ './node_modules/esprima/dist/esprima.js' ],
[ WORKING_DIR + 'wp-includes/js/codemirror/htmlhint.js' ]: [ './node_modules/htmlhint/dist/htmlhint.min.js' ],
[ WORKING_DIR + 'wp-includes/js/codemirror/jsonlint.js' ]: [ './node_modules/jsonlint/web/jsonlint.js' ],
},
{
expand: true,
cwd: SOURCE_DIR + 'js/_enqueues/vendor/codemirror/',
src: [
'fakejshint.js',
'htmlhint-kses.js',
],
dest: WORKING_DIR + 'wp-includes/js/codemirror/'
}
]
},
'vendor-js': {
files: [
{
Expand Down Expand Up @@ -562,6 +601,22 @@ module.exports = function(grunt) {
options: {
compatibility: 'ie11'
},
codemirror: {
files: {
[ WORKING_DIR + 'wp-includes/js/codemirror/codemirror.min.css' ]: [
'node_modules/codemirror/lib/codemirror.css',
'node_modules/codemirror/addon/hint/show-hint.css',
'node_modules/codemirror/addon/lint/lint.css',
'node_modules/codemirror/addon/dialog/dialog.css',
'node_modules/codemirror/addon/display/fullscreen.css',
'node_modules/codemirror/addon/fold/foldgutter.css',
'node_modules/codemirror/addon/merge/merge.css',
'node_modules/codemirror/addon/scroll/simplescrollbars.css',
'node_modules/codemirror/addon/search/matchesonscrollbar.css',
'node_modules/codemirror/addon/tern/tern.css'
]
}
},
core: {
expand: true,
cwd: WORKING_DIR,
Expand Down Expand Up @@ -921,7 +976,8 @@ module.exports = function(grunt) {
webpack: {
prod: webpackConfig( { environment: 'production', buildTarget: WORKING_DIR } ),
dev: webpackConfig( { environment: 'development', buildTarget: WORKING_DIR } ),
watch: webpackConfig( { environment: 'development', watch: true } )
watch: webpackConfig( { environment: 'development', watch: true } ),
codemirror: require( './tools/webpack/codemirror.config.js' )( { buildTarget: WORKING_DIR } ),
},
concat: {
tinymce: {
Expand Down Expand Up @@ -1652,6 +1708,13 @@ module.exports = function(grunt) {
'uglify:moment'
] );

grunt.registerTask( 'build:codemirror', [
'webpack:codemirror',
'cssmin:codemirror',
'usebanner:codemirror',
'copy:codemirror'
] );

grunt.registerTask( 'build:webpack', [
'clean:webpack-assets',
'webpack:prod',
Expand Down Expand Up @@ -1679,7 +1742,7 @@ module.exports = function(grunt) {
'cssmin:rtl',
'cssmin:colors',
'cssmin:themes',
'usebanner'
'usebanner:files'
] );

grunt.registerTask( 'certificates:upgrade-package', 'Upgrades the package responsible for supplying the certificate authority certificate store bundled with WordPress.', function() {
Expand Down Expand Up @@ -1902,6 +1965,7 @@ module.exports = function(grunt) {
grunt.task.run( [
'build:js',
'build:css',
'build:codemirror',
'gutenberg-sync',
'gutenberg-copy',
'copy-vendor-scripts',
Expand All @@ -1913,6 +1977,7 @@ module.exports = function(grunt) {
'build:files',
'build:js',
'build:css',
'build:codemirror',
'gutenberg-sync',
'gutenberg-copy',
'copy-vendor-scripts',
Expand Down
Loading
Loading