Changeset 61588

Timestamp:

02/04/2026 07:02:45 AM (12 hours 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 )