Make WordPress Core

Opened 13 years ago

Last modified 4 months ago

#17133 new enhancement

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

Reported by: jcnetsys's profile jcnetsys Owned by:
Milestone: Future Release Priority: high
Severity: normal Version: 3.1
Component: Plugins Keywords: has-ux-feedback has-patch needs-testing
Focuses: javascript, administration Cc:

Description

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.

Attachments (3)

keystroke_save.patch (2.0 KB) - added by evansolomon 13 years ago.
Allow CMD/CTRL + S to save a file in the theme or plugin editor
17133.patch (736 bytes) - added by Junaidkbr 6 years ago.
Patch for codeMirror editor.
17133.diff (748 bytes) - added by desrosj 5 years ago.

Download all attachments as: .zip

Change History (34)

#1 @ocean90
13 years ago

  • Component changed from Autosave to Administration

Ctrl+S has been introduced at some point

See #5598

#2 @jcnetsys
13 years ago

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

#3 @ocean90
13 years ago

  • Keywords 2nd-opinion removed
  • Summary changed from Register ctrl + s event for editors to Register ctrl + s event for plugin/theme editor

#4 @scribu
13 years ago

  • Milestone changed from Awaiting Review to Future Release

Sounds like a no-brainer. +1

Last edited 13 years ago by scribu (previous) (diff)

#5 @andrewryno
13 years ago

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.

#6 @chacha102
13 years ago

  • Cc chacha102 added

@evansolomon
13 years ago

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

#7 @SergeyBiryukov
13 years ago

  • Keywords has-patch added; needs-patch removed

#8 @evansolomon
13 years ago

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.

Last edited 13 years ago by evansolomon (previous) (diff)

#9 @chexee
12 years ago

  • Keywords needs-refresh added

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.

#10 @johnbillion
10 years ago

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.

#11 @nacin
10 years ago

  • Component changed from Administration to Plugins
  • Focuses administration added

#12 @chriscct7
8 years ago

  • Severity changed from minor to normal

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


7 years ago

#14 @karmatosed
7 years ago

  • Keywords has-ux-feedback added; ux-feedback removed

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

#15 @melchoyce
7 years ago

  • Milestone changed from Future Release to 4.9

#16 @westonruter
7 years ago

  • Summary changed from Register ctrl + s event for plugin/theme editor to Code Editor: Register ctrl + s event for plugin/theme editor

#17 @westonruter
7 years ago

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

#18 @westonruter
6 years ago

  • Priority changed from normal to high

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

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


6 years ago

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


6 years ago

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


6 years ago

#22 @jbpaul17
6 years ago

  • Milestone changed from 4.9 to Future Release

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

@Junaidkbr
6 years ago

Patch for codeMirror editor.

#23 @Junaidkbr
6 years ago

  • Keywords needs-testing added; needs-refresh removed

#24 @Junaidkbr
6 years ago

@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()

Last edited 6 years ago by Junaidkbr (previous) (diff)

This ticket was mentioned in Slack in #core by junaidkbr. View the logs.


6 years ago

#26 @SergeyBiryukov
6 years ago

  • Milestone changed from Future Release to 5.0

#27 @johnbillion
5 years ago

  • Milestone changed from 5.0 to 5.1

#28 @pento
5 years ago

  • Milestone changed from 5.1 to 5.2

Patch needs testing and review.

@desrosj
5 years ago

#29 @desrosj
5 years ago

  • Focuses javascript added
  • Milestone changed from 5.2 to Future Release

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.

#31 @spiraltee
2 years ago

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

Last edited 2 years ago by spiraltee (previous) (diff)

This ticket was mentioned in Slack in #core by abhanonstopnews. View the logs.


4 months ago

Note: See TracTickets for help on using tickets.