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. +1

[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

[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.