keyboard shortcuts QuickSave module for quickly saving the page with an extra button or keyboard shortcuts cmd+s/ctrl+s

[Chris-PW]

Following the advice of some PW-forum members @gebeer @dotnetic @bernhard @sebibu, I would like to share my first Processwire module with all members.
 

QuickSave: My first attempt at developing a PW module to quickly save a page.

What can the module QuickSave do:    
Quickly save a page edit in the admin and return to the last activity. Adds an extra save button AND shortcuts CMD+s and CTRL+s. QuickSave includes an additional plugin for TinyMCE. The plugin for TinyMCE must be assigned and activated specifically for these textarea fields. (Keyboard input shortcut does not yet work in an iFrame - RTE/iFrame, CKE, etc.)

 

Installation:
To install the module, it simply needs to be copied into the Processwire module directory and then activated in the Processwire admin.
Optional:
Anyone who uses TinyMCE can activate the keyboard input shortcuts via the configuration as a plugin for TinyMCE. Afterwards it has to be activated for the field (e.g. body).
This is the path for the configuration in TinyMCE:
/site/modules/QuickSave/tinymce/quicksavetinymce.js

 

I have been using the module only as a save button version for some time in a long Processwire page with a strong content and a four-fold nested repeater matrix and it works. The keyboard shortcuts were added because of a request. I was only able to test these on the Mac and hope they also work with Windows browsers. Due to another request, the short notification after saving was added.

I hope you like the module and that it helps the moderators to keep a better eye on the areas they are currently working on. Especially with long pages and, for example, a table with many rows, it is very helpful for me not to lose the row when saving. (see the video)
Note: The module does not intervene in the Processwire saving process, only the original saving button function is triggered. Please note that the keyborad shortcodes do not work in iframes or CKEditor.

UPDATE: 

New version 0.1.7 added on April 13, 2024.
A new combined version without jQuery has been created. Thanks to @dotnetic and all others ?. It is now more optimized and further optimizations are planned.

Module 0.1.7 Download:

QuickSave.zip

 

Feedback on whether the keyboard shortcuts ctrl+s work under MS Windows would be great... ?

Thanks and Greetings
Chris

[netcarver]

@Chris-PW Welcome to the plugin-author's club :)

Would you be able to create a github account and create a repository for this? It's the next step to getting this published in the PW modules DB.

[dotnetic]

Works fine on Windows in Chromium-based browsers and Firefox. I didn't even have to use the plugin for TinyMCE, it just works out of the box.

[Chris-PW]

1 hour ago, netcarver said:

@Chris-PW Welcome to the plugin-author's club ?

Would you be able to create a github account and create a repository for this? It's the next step to getting this published in the PW modules DB.

I haven't bothered with Github yet other than downloading a zip there. But as soon as I find time for it, I will gladly publish the module there.

[Chris-PW]

15 minutes ago, dotnetic said:

Works fine on Windows in Chromium-based browsers and Firefox. I didn't even have to use the plugin for TinyMCE, it just works out of the box.

Thank you for the feedback and the test in the browser under Windows. ?  In my Mac environment (Sonoma with Safari, Firefox, Chrome) I need the extra plugin for TinyMCE and the keyboard shortcut cmd+s combination.

[dotnetic]

Ok the script is not programmed very effecient, because it saves the scroll position on every scroll event. This will slow down the browser. You only need to store the scroll position when the save button is clicked.

I try to improve it

[dotnetic]

Please find attached an improved version in vanilla javascript which is much smaller 2.4 kb instead of 6.75 kb and more efficient without using a scroll listener. Tested in Firefox and chromium based browsers on windows. Please report if it does not work somewhere else.

I didn't change the TinyMCE plugin, so I don't now if it still works.

QuickSave.zip

[gebeer]

Great module.

This really improves UX a lot, especially on larger page edit screens.

I can confirm that Ctrl+s is working on Linux Firefox & Chromium (with improved JS version from @dotnetic).

[Chris-PW]

20 hours ago, dotnetic said:

Please find attached an improved version in vanilla javascript which is much smaller 2.4 kb instead of 6.75 kb and more efficient without using a scroll listener. Tested in Firefox and chromium based browsers on windows. Please report if it does not work somewhere else.

I didn't change the TinyMCE plugin, so I don't now if it still works.

QuickSave.zip 2.6 kB · 4 downloads

Great and thank you, we had similar thoughts about the need for jQuery and further optimization. I just installed the JS version and have already adapted the TinyMCE plugin. For me, your version doesn't work optimally with the keyboard shortcut and text fields (see video). I have to press the combination twice and it looks like it then jumps to the button at the bottom of the page.

I hope to find some time soon to take a closer look at it and try to combine my unpublished pure JS version with yours.

 

 

 

[Chris-PW]

11 hours ago, gebeer said:

Great module.

This really improves UX a lot, especially on larger page edit screens.

I can confirm that Ctrl+s is working on Linux Firefox & Chromium (with improved JS version from @dotnetic).

Great, thanks for the feedback that it also works under Linux. Can you also save directly from an active TinyMCE-RTE field using a keyboard shortcut under Linux without the optional TinyMCE plugin? It doesn't work for me on the Mac without the optional TinyMCE plugin.

I already mentioned a complete implementation better without jQuery at our meeting yesterday. Now, without knowing it, @dotnetic converted it to “Vanilla JS” almost at the same time. I think pure JS is great. (Whether the file size is really that relevant, if so, I can integrate a completely minimized file into the final module version.) The pure JS version doesn't work optimally for me yet - see post above.
I had already started replacing jQuery with JS in an unpublished version. I also had a change for the scroll position, because from what I read, you should tell the newer browsers that you want to determine the position yourself, etc. I will compare and combine and then put a new version in the first post above . I would like to avoid that we end up with a jumble of versions of module downloads. I hope I'll find the time to do it soon, but at the moment both versions seem to be working quite well.

Short feedback from you too, about the direct shortcut saving from the activated text in a TinyMCE or CKE field under Linux would be great. Really interesting that operating systems and browsers handle this differently. (If it really only doesn't work on Mac, I would also like to adapt the module description in the new version).

Greetings to everyone and have a nice weekend.

[Chris-PW]

3 hours ago, Chris-PW said:

Great and thank you, we had similar thoughts about the need for jQuery and further optimization. I just installed the JS version and have already adapted the TinyMCE plugin. For me, your version doesn't work optimally with the keyboard shortcut and text fields (see video). I have to press the combination twice and it looks like it then jumps to the button at the bottom of the page.

I hope to find some time soon to take a closer look at it and try to combine my unpublished pure JS version with yours.

 

It now also works on Mac with Firefox. Some other changes are also included.

The new optimized and vanilla-js QuickSave version 0.1.7 is available as a new download in the first post.

[Ivan Gretsky]

@Chris-PW, the module looks pretty cool. But using it without github and modules repository is kind of hard and limits the possible audience for it. And it is harder to contribute.

Could you please reconsider @netcarver's advice?

[gebeer]

On 4/13/2024 at 7:29 PM, Chris-PW said:

Great, thanks for the feedback that it also works under Linux. Can you also save directly from an active TinyMCE-RTE field using a keyboard shortcut under Linux without the optional TinyMCE plugin? It doesn't work for me on the Mac without the optional TinyMCE plugin.

Same behaviour for me on Linux Firefox/Chromium. Need to activate the TinyMCE plugin. Used latest version 0.1.7. of your module

[nurkka]

@Chris-PW Many thanks for contributing this module. That was really a much needed missing feature.

I am using the module with Chrome (Iron) under Windows 11, where in TinyMCE fields, pressing CTRL-S saved the page twice. It seems, that Chrome/Windows reacts also to "meta-s". I then went to quicksavetinymce.js and commented out the block for "ctrl+s". Now, pressing CTRL-S within a TinyMCE field saves the page only once.

Thanks again for this great module!

P.S.: This also works with Firefox/Windows

[Chris-PW]

On 4/14/2024 at 12:28 PM, Ivan Gretsky said:

@Chris-PW, the module looks pretty cool. But using it without github and modules repository is kind of hard and limits the possible audience for it. And it is harder to contribute.

Could you please reconsider @netcarver's advice?

Yes, of course I like to do it, as described in the post above. But first I have to register on Github and see how things work there. Then I also have to read here for Processwire how to get into the module directory. As soon as I find time for it, I'll definitely do it.

[Chris-PW]

4 hours ago, nurkka said:

@Chris-PW Many thanks for contributing this module. That was really a much needed missing feature.

I am using the module with Chrome (Iron) under Windows 11, where in TinyMCE fields, pressing CTRL-S saved the page twice. It seems, that Chrome/Windows reacts also to "meta-s". I then went to quicksavetinymce.js and commented out the block for "ctrl+s". Now, pressing CTRL-S within a TinyMCE field saves the page only once.

Thanks again for this great module!

P.S.: This also works with Firefox/Windows

 

Thank you for your feedback and that you like my module.
It seems that the meta+s shortcuts are also triggered in Windows or only from Windows 11. Unfortunately I have no way to test the module on Windows.

It would be great if you could remove ctrl+s in quicksavetinymce.js and just put meta+s.
It's best to clear the cache.

I would be very interested to know whether only Meta+s are actually sufficient for Windows in TinyMCE.
Thank you in advance for your feedback

FYI
meta+S is only integrated so that it can be saved even when Caps Lock is active. You could actually leave that in.

[nurkka]

On 4/20/2024 at 5:57 PM, Chris-PW said:

[...]
I would be very interested to know whether only Meta+s are actually sufficient for Windows in TinyMCE.
[...]

Hi @Chris-PW

I removed the javascript block for meta-shift-s and ctrl-s. After that, pressing ctrl-s in TinyMCE worked perfectly.
Tested in Chrome/Windows11 and Firefox/Windows11, and via BrowserStack, also in Safari 17.3/MacOS Sonoma.

Additionally, I removed the timeout in UIkit.notification(...) in QuickSave.js, because my pages have so many fields and languages that saving the page takes several seconds. And because the page is reloaded anyway, in my case it was better to simply leave the notification until the page reloads.

[dotnetic]

Hey @Chris-PW I added some optimizations to the scripts. First, now on install the QuicksaveTinyMCE plugin is automatically added to the list of plugins for TinyMCE and removed on uninstalling the module. You still have to add it to the indiviual fields, where you want to use it, maybe this could be done automatically in the future.

Second I hope that I fixed the meta key issue and double save issue when using the TinyMCE plugin.

I could not test it on a Mac, as browserstack has some hickups, so I appreciate everybodys feedback if it works.

QuickSave.zip

[dotnetic]

Added support for PageFrontEdit for the TinyMCE plugin. Now you can save your TinyMCE fields on the frontend via CMD-S (or CTRL-S). Works great in conjunction with RockFrontend and RockPageBuilder.

QuickSave.zip