Project

General

Profile

Actions
Copy link

Feature #30459

closed

Switch edit/preview tabs with keyboard shortcuts

Added by Mizuki ISHIKAWA over 5 years ago. Updated over 2 years ago.

Status:
Closed
Priority:
Normal
Assignee:
Go MAEDA
Category:
UI
Target version:
4.2.0
Start date:
Due date:
% Done:

0%

Estimated time:
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:

Files

Download all files
github_shortcut.gif (296 KB) github_shortcut.gif Mizuki ISHIKAWA, 2019-01-18 02:59
switch_edit_preview_tabs_using_keyboard_shortcuts.patch (957 Bytes) switch_edit_preview_tabs_using_keyboard_shortcuts.patch Marius BĂLTEANU, 2020-12-27 23:04
switch_edit_preview_tabs_using_keyboard_shortcuts-v2.patch (975 Bytes) switch_edit_preview_tabs_using_keyboard_shortcuts-v2.patch Mizuki ISHIKAWA, 2020-12-28 03:56
0001-Add-keyboard-shortcut-to-toggle-between-Edit-Preview.patch (3.06 KB) 0001-Add-keyboard-shortcut-to-toggle-between-Edit-Preview.patch Marius BĂLTEANU, 2021-01-02 22:26
0002-Adding-system-tests.patch (3.58 KB) 0002-Adding-system-tests.patch Marius BĂLTEANU, 2021-01-06 22:04

Related issues

Related to Redmine - Feature #27758: Adds preview option to the wiki toolbarClosedJean-Philippe Lang

Actions
Related to Redmine - Patch #34444: Remove unused key :preview from Redmine::AccessKeys::ACCESSKEYSClosedGo MAEDA

Actions
Blocks Redmine - Feature #34549: Add keyboard shortcuts for wiki toolbar buttonsClosedGo MAEDA

Actions
Actions
Copy link
 #1

Updated by Bernhard Rohloff over 5 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.

Actions
Copy link
 #2

Updated by Marius BĂLTEANU over 5 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.

Actions
Copy link
 #3

Updated by Mizuki ISHIKAWA over 5 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.

Actions
Copy link
 #4

Updated by Marius BĂLTEANU over 5 years ago

  • Assignee set to Marius BĂLTEANU
Actions
Copy link
 #5

Updated by Marius BĂLTEANU about 5 years ago

  • Related to Feature #27758: Adds preview option to the wiki toolbar added
Actions
Copy link
 #6

Updated by Marius BĂLTEANU over 4 years ago

Which should be the keyboard shortcuts here?

Actions
Copy link
 #7

Updated by Robert Schneider over 3 years 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?

Actions
Copy link
 #8

Updated by Marius BĂLTEANU over 3 years ago

  • Tracker changed from Defect to Feature
Actions
Copy link
 #9

Updated by Go MAEDA over 3 years ago

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

Updated by Marius BĂLTEANU over 3 years 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.

Actions
Copy link
 #11

Updated by Marius BĂLTEANU over 3 years ago

  • Assignee set to Marius BĂLTEANU
Actions
Copy link
 #12

Updated by Mizuki ISHIKAWA over 3 years 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).

Actions
Copy link
 #13

Updated by Marius BĂLTEANU over 3 years ago

  • File 0001-Add-keyboard-shortcut-to-toggle-between-Edit-Preview.patch added
  • Assignee deleted (Marius BĂLTEANU)
  • 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.

Actions
Copy link
 #14

Updated by Marius BĂLTEANU over 3 years ago

  • File deleted (0001-Add-keyboard-shortcut-to-toggle-between-Edit-Preview.patch)
Actions
Copy link
 #15

Updated by Marius BĂLTEANU over 3 years ago

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

Just a small change to lowercase the key.

Actions
Copy link
 #16

Updated by Marius BĂLTEANU over 3 years ago

  • File deleted (0001-Add-keyboard-shortcut-to-toggle-between-Edit-Preview.patch)
Actions
Copy link
 #18

Updated by Mizuki ISHIKAWA over 3 years 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.

Actions
Copy link
 #19

Updated by Marius BĂLTEANU over 3 years ago

Adding system tests for this feature.

Actions
Copy link
 #20

Updated by Marius BĂLTEANU over 3 years ago

  • Blocks Feature #34549: Add keyboard shortcuts for wiki toolbar buttons added
Actions
Copy link
 #21

Updated by Go MAEDA over 3 years ago

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

Committed the patch. Thank you for your contribution.

Actions
Copy link
 #22

Updated by Go MAEDA about 3 years ago

  • Subject changed from Switch edit/preview tabs with keybord shortcuts to Switch edit/preview tabs with keyboard shortcuts
Actions
Copy link
 #23

Updated by Jonathan Cormier over 2 years ago

Tried this with Firefox 93.0 Linux, and ctrl-shift-p opens Firefox's private browsing. ctrl-shift-p does work fine in chrome.

Does anyone else have this issue?

Actions
Copy link
 #24

Updated by Marcin Szewczyk over 2 years ago

Jonathan Cormier wrote:

Tried this with Firefox 93.0 Linux, and ctrl-shift-p opens Firefox's private browsing. ctrl-shift-p does work fine in chrome.

Does anyone else have this issue?

Yes, I observe the issue as well (Firefox on Linux). Note however that you can also use Shift+Meta+P which with proper keyboard layout configuration can be the same as Shift+Win+P.

Actions
Copy link

Also available in: Atom PDF