Feature #30459

Switch edit/preview tabs with keyboard shortcuts

Added by Mizuki ISHIKAWA about 2 years ago. Updated 2 months ago.

Status:ClosedStart date:
Priority:NormalDue date:
Assignee:Go MAEDA% Done:

0%

Category:UI
Target version:4.2.0
Resolution:Fixed

Description

In Redmine 3.4 and earlier, you could update the preview with keybord shortcuts.
RedmineKeyboardNavigation:
Key Description
r Updates the preview in editor mode

I want to switch Edit/Preview tabs with keybord shortcuts.
Github:

github_shortcut.gif (296 KB) Mizuki ISHIKAWA, 2019-01-18 02:59

switch_edit_preview_tabs_using_keyboard_shortcuts.patch Magnifier (957 Bytes) Marius BALTEANU, 2020-12-27 23:04

switch_edit_preview_tabs_using_keyboard_shortcuts-v2.patch Magnifier (975 Bytes) Mizuki ISHIKAWA, 2020-12-28 03:56

0001-Add-keyboard-shortcut-to-toggle-between-Edit-Preview.patch Magnifier (3.06 KB) Marius BALTEANU, 2021-01-02 22:26

0002-Adding-system-tests.patch Magnifier (3.58 KB) Marius BALTEANU, 2021-01-06 22:04

Related issues

Related to Redmine - Feature #27758: Adds preview option to the wiki toolbar Closed
Related to Redmine - Patch #34444: Remove unused key :preview from Redmine::AccessKeys::ACCE... Closed
Blocks Redmine - Feature #34549: Add keyboard shortcuts for wiki toolbar buttons Closed

Associated revisions

Revision 20706
Added by Go MAEDA 3 months ago

Add keyboard shortcut to toggle between Edit/Preview tabs (#30459).

Patch by Marius BALTEANU.

Revision 20707
Added by Go MAEDA 3 months ago

Adding system tests for keyboard shortcuts (#30459).

Patch by Marius BALTEANU.

History

#1 Updated by Bernhard Rohloff about 2 years ago

I remember this topic was also discussed in the original feature. The problem was that there can be multiple editors on a single view and the implemented accesskeys are not able to determine which editor is in focus at the moment. We would need a proper hotkey system beforehand to make this happen.

#2 Updated by Marius BALTEANU about 2 years ago

Bernhard Rohloff wrote:

I remember this topic was also discussed in the original feature. The problem was that there can be multiple editors on a single view and the implemented accesskeys are not able to determine which editor is in focus at the moment. We would need a proper hotkey system beforehand to make this happen.

Yes, is on the to do list to implement something custom using JS.

Mizuki, do you have some working code? or you have in plan to work on this? just to know in order to not double work on this.

#3 Updated by Mizuki ISHIKAWA about 2 years ago

Bernhard Rohloff wrote:

I remember this topic was also discussed in the original feature.

I have not noticed it. Thank you for the information.
Discussion related to this topic: #27758#note-21

Marius BALTEANU wrote:

Mizuki, do you have some working code? or you have in plan to work on this? just to know in order to not double work on this.

I have no plans to work for the implementation of this feature.

#4 Updated by Marius BALTEANU about 2 years ago

  • Assignee set to Marius BALTEANU

#5 Updated by Marius BALTEANU about 2 years ago

  • Related to Feature #27758: Adds preview option to the wiki toolbar added

#6 Updated by Marius BALTEANU over 1 year ago

Which should be the keyboard shortcuts here?

#7 Updated by Robert Schneider 6 months ago

Oh yes! It would be really helpful if this is possible again with wiki pages.

The problem was that there can be multiple editors on a single view and the implemented accesskeys are not able to determine which editor is in focus at the moment.

I don't know anything about implementation, but I would be surprised if determining the right editor is that hard. Shouldn't it be document.activeElement?

#8 Updated by Marius BALTEANU 4 months ago

  • Tracker changed from Defect to Feature

#9 Updated by Go MAEDA 4 months ago

  • Related to Patch #34444: Remove unused key :preview from Redmine::AccessKeys::ACCESSKEYS added

#10 Updated by Marius BALTEANU 4 months ago

The attached patch adds ⌘/Ctrl + Shift + P keyboard shortcut to toggle between Edit/Preview tabs. This keyboard shortcut is used by both Github and Gitlab.

I don't think that it's worth it to keep also the old shortcut (r).

Any feedback is welcome.

#11 Updated by Marius BALTEANU 4 months ago

  • Assignee set to Marius BALTEANU

#12 Updated by Mizuki ISHIKAWA 4 months ago

Marius BALTEANU wrote:

The attached patch adds ⌘/Ctrl + Shift + P keyboard shortcut to toggle between Edit/Preview tabs. This keyboard shortcut is used by both Github and Gitlab.

I don't think that it's worth it to keep also the old shortcut (r).

Any feedback is welcome.

Thank you for sharing the patch!
I checked the operation of the patch you posted and noticed that there were cases where an exception occurred.

Reproduction procedure:
  • Open preview tab with mouse click
  • Try to switch from the Preview tab to the Edit tab with the shortcut key ⌘/Ctrl + Shift + P
  • " Uncaught TypeError: Cannot read property 'find' of undefined" is outputed in the developer tools console.

If lastJstPreviewed is undefined, I think you should use jst.

diff --git a/public/javascripts/jstoolbar/jstoolbar.js b/public/javascripts/jstoolbar/jstoolbar.js
index 64a7be754..7a3631a1a 100644
--- a/public/javascripts/jstoolbar/jstoolbar.js
+++ b/public/javascripts/jstoolbar/jstoolbar.js
@@ -519,8 +519,8 @@ $(document).keydown(function(e) {
       jst.find('.tab-preview').click();
       lastJstPreviewed = jst
     } else {
-      lastJstPreviewed.find('.tab-edit').click();
-      lastJstPreviewed.find('textarea').focus();
+      (lastJstPreviewed || jst).find('.tab-edit').click();
+      (lastJstPreviewed || jst).find('textarea').focus();
       lastJstPreviewed = null;
     }
   }

I agree with changing the shortcut keys(r to ⌘/Ctrl + Shift + P).

#13 Updated by Marius BALTEANU 3 months ago

  • File 0001-Add-keyboard-shortcut-to-toggle-between-Edit-Preview.patch added
  • Assignee deleted (Marius BALTEANU)
  • Target version set to 4.2.0

Thanks Mizuki for testing the patch and for reporting the issue found.

The patch was made only for testing purposes and to validate the new shortcut. Please find attached a new version of the patch which is ready from my point of view.

Keyboard shortcuts implemented:
  • Ctrl + Shift + P
  • Command + Shift + P
I've tested this on the following browsers and it works as expected:
  • Chrome (osx)
  • Safari (osx)
  • Firefox (osx)
  • Edge (windows)

Let's discuss this for 4.2.0.

#14 Updated by Marius BALTEANU 3 months ago

  • File deleted (0001-Add-keyboard-shortcut-to-toggle-between-Edit-Preview.patch)

#15 Updated by Marius BALTEANU 3 months ago

  • File 0001-Add-keyboard-shortcut-to-toggle-between-Edit-Preview.patch added

Just a small change to lowercase the key.

#16 Updated by Marius BALTEANU 3 months ago

  • File deleted (0001-Add-keyboard-shortcut-to-toggle-between-Edit-Preview.patch)

#18 Updated by Mizuki ISHIKAWA 3 months ago

I tried running a new patch. Looks good.

Tested environment:
  • Chrome Beta (MacOS Big Sur)
  • IE11 in Virtualbox Windows8

Structurally, I think it's good because it works only when there is a jstoolbar.

#19 Updated by Marius BALTEANU 3 months ago

Adding system tests for this feature.

#20 Updated by Marius BALTEANU 3 months ago

  • Blocks Feature #34549: Add keyboard shortcuts for wiki toolbar buttons added

#21 Updated by Go MAEDA 3 months ago

  • Status changed from New to Closed
  • Assignee set to Go MAEDA
  • Resolution set to Fixed

Committed the patch. Thank you for your contribution.

#22 Updated by Go MAEDA 2 months ago

  • Subject changed from Switch edit/preview tabs with keybord shortcuts to Switch edit/preview tabs with keyboard shortcuts

Also available in: Atom PDF