Code Editor: Register ctrl + s event for plugin/theme editor

[jcnetsys]

Often when modifying code or writing a post using the wordpress editor I instinctively hit ctrl + s to save it. Up pops the save website dialog which I then have to close. In Gmail when I hit ctrl+ s it saves the email to drafts. I think a similar thing would be useful for wordpress.

[ocean90]

Ctrl+S has been introduced at some point

See #5598

[jcnetsys]

So it has - for new posts. Could this feature be implemented for the plugin/theme editor also.

[scribu]

Sounds like a no-brainer.

[andrewryno]

Would it also be worth it to expand this to register on all editors that have a "Save" button? For example, I was just thinking of widgets. I type a lot of HTML code in there and I automatically would try to save using the keyboard shortcut.

[evansolomon]

Allow CMD/CTRL + S to save a file in the theme or plugin editor

[evansolomon]

I changed the submit button ID because jQuery's submit() function does not work on forms where the button has the ID "submit". Alternatively we could leave the name and use click(), but this seemed like a cleaner option.

[chexee]

I like this and really can't think of a reason not to implement this. I actually hit CMD+S all the time on these editor pages when making quick fixes and get really annoyed when the Save As Web Page dialog comes up.

I tested Evan's patch. It works in FF, Chrome, and Safari on OS X, but not any browsers on Windows (the Save As dialog pops up).

Surprisingly it works within IE in IETester, so it must register the CTRL+S on some level.

[johnbillion]

For those interested, I've started work on a general keyboard shortcuts plugin for WordPress: ​https://github.com/johnbillion/wordpress-keyboard-shortcuts.

It implements CMD+S/CTRL+S for saving posts, terms and user profiles. The plan is to expand it to settings and the plugin/theme editors too, and anywhere else it's relevant.

[karmatosed]

This would be a great improvement and we discussed this in today's design triage session.

[westonruter]

I suggest registering the shortcut via the extraKeys config for CodeMirror.

An example of this is even in the release notes: ​https://codemirror.net/doc/upgrade_v2.2.html

  extraKeys: {
    "Ctrl-S": function(instance) { saveText(instance.getValue()); },
    "Ctrl-/": "undo"
  }

For our purposes, the function would need to:

1. Check to see if there are linter errors. If not, then abort.
2. Make sure the CodeMirror text has been written back into the textarea.
3. Submit the form.

The patch would be written for ​https://github.com/WordPress/wordpress-develop/blob/master/src/wp-admin/js/code-editor.js

[westonruter]

Bumping priority to high for visibility and alignment with 4.9 goals, and given proximity to beta 1 deadline.

[jbpaul17]

Punting this to Future Release per the 4.9 bug scrub earlier today.

[Junaidkbr]

Patch for codeMirror editor.

[Junaidkbr]

@westonruter Please review my patch and provide your feedback on it. I didn't know about this ticket but worked on the feature on my own. I was about to create a new ticket but found this one on my first search.

Anyway, my patch is not modifying code-editor.js because this file is also used in Custom CSS editor. In code-editor.js, we don't have a context of which editor is this, or at least I didn't find any.

There's another neat way to handle the document save with CodeMirror but I couldn't access the commands property anywhere. Ref: ​http://codemirror.net/doc/manual.html#commands

About the patch:
Calling component.submit directly from the shortcut event isn't possible because componenet.save needs a parameter which is the form submit event. Due to this limitation, the patch is initiating the form submit event by component.form.submit()

[pento]

Patch needs testing and review.

[desrosj]

17133.patch​ is a refresh against trunk (I did not test, though). This still needs testing and review. Beta 1 is in 2 days, so I am going to punt this to Future Release.

If someone wants to own this and shepherd it into 5.2, feel free to move it back.

[spiraltee]

I just tested this on WordPress 5.9 and it works for the plugins and themes editor but doesn't work for comments editor.

[tusharaddweb]

Test Scenario: Ctrl + S Functionality in WordPress 6.7 After Applying Patch

Test Environment:

• WordPress Version: 6.7
• Browsers Tested: Chrome, Firefox, Edge
• Filesystem Method: Default

Test Steps:

1. Navigate to Tools > Theme File Editor or Tools > Plugin File Editor.
2. Select a file, modify the content, and press Ctrl + S.
3. Confirm that the file is successfully saved without opening the browser’s "Save As" dialog.
4. Verify that a success message appears after saving.
5. Reload the page and confirm that the changes persist.

Expected Behavior:

• Ctrl + S should trigger the Update File function.
• The file should be saved successfully without opening the browser’s "Save As" dialog.
• A confirmation message should appear after saving.

Actual Behavior:

• After applying the patch, Ctrl + S successfully saves the file without triggering the browser’s "Save As" dialog.
• A success message appears upon saving.
• Changes persist after reloading the page.

[gauri87]

Tested on WordPress 6.9 with PHP 8.2.27.
The behavior works as expected when using the Gutenberg editor.
When using the Classic Editor, pressing Ctrl + S only saves the post as a draft and does not save/update the post or page.
This difference in behavior appears specific to the Classic Editor.

Trac ticket: https://core.trac.wordpress.org/ticket/17133

_Review form Gemini:_

Here is the final review of the changes, incorporating the latest robustness and consistency improvements.

### Summary of Changes
The PR improves the WordPress Code Editor (used in Theme and Plugin editors) by making autocompletion significantly more robust and fixing issues with save shortcuts.

Key Technical Enhancements:

1. Autocomplete Reliability: Switched from keyup to inputRead for triggering hints. This ensures that autocompletion only fires when content actually changes due to typing or IME composition (+input and *compose origins), effectively ignoring modifier key releases like the S in Cmd+S.
2. Global Save Shortcut: Added a global keydown listener to the window in the Theme/Plugin editor. This ensures Ctrl+S and Cmd+S work even when the editor isn't focused (e.g., after dismissing a lint notice).
3. Forced Error Visibility: Exposed updateErrorNotice on the wp.codeEditor instance. The Theme/Plugin editor now calls this on submit to ensure lint errors are visible if a save is blocked, preventing "silent" save failures.
4. Modern Standards: Switched from deprecated jQuery .submit() shorthands to .trigger( 'submit' ).

---

### Detailed Review

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

• Robustness: The origin check '+input' !== change.origin && ! change.origin.startsWith( '*compose' ) is excellent. It targets the exact internal origins CodeMirror uses for typing, filtering out noise from paste, undo, redo, and drag.
• Logic: The check for 1 !== change.text.length || 1 !== change.text[0].length correctly limits autocompletion to single-character typing, which is the intended behavior for the integrated linters.
• Compatibility: Usage of startsWith is appropriate given the /* eslint-env es2020 */ header.
• Documentation: JSDoc correctly updated for configureLinting and CodeEditorInstance.

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

• Consistency: The use of component.form.trigger( 'submit' ) in both the global window listener and the CodeMirror extraKeys handler is a significant improvement for consistency and reliability. It ensures the form's submit event is handled uniformly regardless of how it was triggered.
• UX Fix: Forcing the error notice on submit resolves a common point of confusion where users couldn't see why their save was failing while focused in the editor.
• Coding Standards: The code adheres to WordPress standards regarding indentation, Yoda conditions, and proper event handling.

### Conclusion
The latest iteration addressed all previously identified nit-picks, including the "race condition" on shortcut release and the consistency of the submit trigger. The resulting code is clean, robust, and follows WordPress Core best practices.

Final Approval.

[westonruter]

Surprisingly (or not), the patch from 7 years ago applied cleanily! (Not surprising since the Code Editor basically hasn't been touched in that amount of time, but this is changing with 7.0!) I applied the patch to a new PR and iterated. It is now ready for testing and review: ​https://github.com/WordPress/wordpress-develop/pull/10851

As a significant change in addition the original patch, there is now a Ctrl/Cmd+S event listener for the overall page and not just for CodeMirror itself. This is critical for when a user has syntax highlighting turned off (in which there is no CodeMirror) as well as when the user is not focused in the editor.

Another key addition needed was how to deal with linting errors. With 17133.diff​, attempting to save with a shortcut would just silently do nothing. The linting error notice would not appear because the user would still be focused in the editor. So now the error notice is displayed when a save operation occurs.

I noticed that when using the keyboard shortcut to save a file, I would sometimes get an autocomplete hint showing up. This resulted in a change to that logic to instead use the inputRead event for CodeMirror instead of keyup.

[huzaifaalmesbah]

Patch Testing Report

Patch Tested: ​https://github.com/WordPress/wordpress-develop/pull/10851

Environment

• WordPress: 7.0-alpha-61215-src (trunk)
• PHP: 8.2.30
• Server: nginx/1.29.4
• Database: mysqli (Server: 9.5.0 / Client: mysqlnd 8.2.30)
• Browser: Chrome 144, Firefox (latest)
• OS: macOS
• Theme: Twenty Nineteen 3.2
• MU Plugins: None
• Plugins:
  • Classic Editor 1.6.7
  • Test Reports 1.2.1

Steps taken

1. Applied the PR patch.
2. Ran npm run build:dev to rebuild the JavaScript assets.
3. Opened Appearance → Theme File Editor.
4. Modified a theme file.
5. Pressed Cmd/Ctrl + S.
6. Verified the file saved without triggering the browser “Save Page” dialog.
7. Repeated the same test in Plugins → Plugin File Editor.
8. ✅ Patch is solving the problem.

Expected result

• Ctrl/Cmd + S should trigger file save.
• Browser “Save As” dialog should NOT appear.

Screenshots/Screencast with results

Before and after behavior videos:

Before patch (Ctrl/Cmd + S triggers browser “Save As”):
​https://imgur.com/a/d8zKnVa

After patch (Ctrl/Cmd + S triggers save without dialog):
​https://imgur.com/a/F7u0Mzc

I noticed some strange behavior where lint errors (at least for JavaScript) seem to accumulate. I believe this is also present on trunk, so this is just an observation.

​https://github.com/user-attachments/assets/90429339-2f6e-4408-b605-b4d7b93fabb7

[westonruter]

In 61588:

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.