Changeset 61588

Timestamp:

02/04/2026 07:02:45 AM (6 months ago)

Author:

westonruter

Message:

Code Editor: Allow saving with Ctrl/Cmd+S in Theme/Plugin Editors.

• Keyboard shortcuts work when CodeMirror is not enabled (due to syntax highlighting not being enabled), and when the user is not focused inside the CodeMirror editor.
• The autocomplete trigger is switched from keyup to inputRead to improve reliability, support IME composition, and prevent conflicts with modifier keys (e.g., releasing Ctrl/Cmd before s after a save).
• A updateErrorNotice method is exposed on the code editor instance to ensure validation errors are displayed when a save via shortcut is attempted, preventing "silent" failures. Otherwise, the linting error notice is only shown when focus leaves the editor.
• The form submission is modernized by replacing the deprecated jQuery .submit() shorthand with .trigger( 'submit' ).

Developed in ​https://github.com/WordPress/wordpress-develop/pull/10851

Props westonruter, Junaidkbr, evansolomon, desrosj, mukesh27, jonsurrell, spiraltee, chexee, andrewryno, tusharaddweb, gauri87, huzaifaalmesbah, ocean90, karmatosed, johnbillion, scribu, jcnetsys.
Fixes #17133.

Location:

trunk/src/js/_enqueues/wp

Files:

• code-editor.js (modified) (9 diffs)
• theme-plugin-editor.js (modified) (4 diffs)

trunk/src/js/_enqueues/wp/code-editor.js

@@ -47 +47 @@
          * @param {Function}   settings.onUpdateErrorNotice - Callback to update error notice.
          *
-         * @return {void}
+         * @return {Function} Update error notice function.
          */
         function configureLinting( editor, settings ) { // eslint-disable-line complexity
@@ -83 +83 @@
 
                         /*
-                         * Note that rules must be sent in the "deprecated" lint.options property 
+                         * Note that rules must be sent in the "deprecated" lint.options property
                          * to prevent linter from complaining about unrecognized options.
                          * See <https://github.com/codemirror/CodeMirror/pull/4944>.
@@ -210 +210 @@
                         }
                 });
+
+                return updateErrorNotice;
         }
 
@@ -262 +264 @@
          * @property {object} settings - The code editor settings.
          * @property {CodeMirror} codemirror - The CodeMirror instance.
+         * @property {Function} updateErrorNotice - Force update the error notice.
          */
 
@@ -283 +286 @@
          */
         wp.codeEditor.initialize = function initialize( textarea, settings ) {
-                var $textarea, codemirror, instanceSettings, instance;
+                var $textarea, codemirror, instanceSettings, instance, updateErrorNotice;
                 if ( 'string' === typeof textarea ) {
                         $textarea = $( '#' + textarea );
@@ -295 +298 @@
                 codemirror = wp.CodeMirror.fromTextArea( $textarea[0], instanceSettings.codemirror );
 
-                configureLinting( codemirror, instanceSettings );
+                updateErrorNotice = configureLinting( codemirror, instanceSettings );
 
                 instance = {
                         settings: instanceSettings,
-                        codemirror: codemirror
+                        codemirror,
+                        updateErrorNotice,
                 };
 
                 if ( codemirror.showHint ) {
-                        codemirror.on( 'keyup', function( editor, event ) { // eslint-disable-line complexity
-                                var shouldAutocomplete, isAlphaKey = /^[a-zA-Z]$/.test( event.key ), lineBeforeCursor, innerMode, token;
+                        codemirror.on( 'inputRead', function( editor, change ) {
+                                var shouldAutocomplete, isAlphaKey, lineBeforeCursor, innerMode, token, char;
+
+                                // Only trigger autocompletion for typed input or IME composition.
+                                if ( '+input' !== change.origin && ! change.origin.startsWith( '*compose' ) ) {
+                                        return;
+                                }
+
+                                // Only trigger autocompletion for single-character inputs.
+                                // The text property is an array of strings, one for each line.
+                                // We check that there is only one line and that line has only one character.
+                                if ( 1 !== change.text.length || 1 !== change.text[0].length ) {
+                                        return;
+                                }
+
+                                char = change.text[0];
+                                isAlphaKey = /^[a-zA-Z]$/.test( char );
+
                                 if ( codemirror.state.completionActive && isAlphaKey ) {
                                         return;
@@ -319 +339 @@
                                 if ( 'html' === innerMode || 'xml' === innerMode ) {
                                         shouldAutocomplete = (
-                                                '<' === event.key ||
-                                                ( '/' === event.key && 'tag' === token.type ) ||
+                                                '<' === char ||
+                                                ( '/' === char && 'tag' === token.type ) ||
                                                 ( isAlphaKey && 'tag' === token.type ) ||
                                                 ( isAlphaKey && 'attribute' === token.type ) ||
-                                                ( '=' === event.key && (
+                                                ( '=' === char && (
                                                         token.state.htmlState?.tagName ||
                                                         token.state.curState?.htmlState?.tagName
@@ -331 +351 @@
                                         shouldAutocomplete =
                                                 isAlphaKey ||
-                                                ':' === event.key ||
-                                                ( ' ' === event.key && /:\s+$/.test( lineBeforeCursor ) );
+                                                ':' === char ||
+                                                ( ' ' === char && /:\s+$/.test( lineBeforeCursor ) );
                                 } else if ( 'javascript' === innerMode ) {
-                                        shouldAutocomplete = isAlphaKey || '.' === event.key;
+                                        shouldAutocomplete = isAlphaKey || '.' === char;
                                 } else if ( 'clike' === innerMode && 'php' === codemirror.options.mode ) {
                                         shouldAutocomplete = isAlphaKey && ( 'keyword' === token.type || 'variable' === token.type );
@@ -341 +361 @@
                                         codemirror.showHint( { completeSingle: false } );
                                 }
-                        });
+                        } );
                 }
 

trunk/src/js/_enqueues/wp/theme-plugin-editor.js

@@ -3 +3 @@
  */
 
-/* eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1] }] */
+/* eslint-env es2020 */
+
+/* eslint no-magic-numbers: ["error", { "ignore": [-1, 0, 1, 9, 1000] }] */
 
 if ( ! window.wp ) {
@@ -80 +82 @@
                         } else {
                                 component.docsLookUpButton.prop( 'disabled', false );
+                        }
+                } );
+
+                // Initiate saving the file when not focused in CodeMirror or when the user has syntax highlighting turned off.
+                $( window ).on( 'keydown', function( event ) {
+                        if (
+                                ( event.ctrlKey || event.metaKey ) &&
+                                ( 's' === event.key.toLowerCase() ) &&
+                                ( ! component.instance || ! component.instance.codemirror.hasFocus() )
+                        ) {
+                                event.preventDefault();
+                                component.form.trigger( 'submit' );
                         }
                 } );
@@ -192 +206 @@
                 }
 
+                if ( component.instance && component.instance.updateErrorNotice ) {
+                        component.instance.updateErrorNotice();
+                }
+
                 // Scroll to the line that has the error.
                 if ( component.lintErrors.length ) {
@@ -400 +418 @@
                 editor.codemirror.on( 'change', component.onChange );
 
+                function onSaveShortcut() {
+                        component.form.trigger( 'submit' );
+                }
+
+                editor.codemirror.setOption( 'extraKeys', {
+                        ...( editor.codemirror.getOption( 'extraKeys' ) || {} ),
+                        'Ctrl-S': onSaveShortcut,
+                        'Cmd-S': onSaveShortcut,
+                } );
+
                 // Improve the editor accessibility.
                 $( editor.codemirror.display.lineDiv )