Feature: Keyboard shortcuts on press of ? key

[thomsebastin]

Keyboard Shortcuts Help Modal

Overview

Adds a keyboard shortcuts help modal that opens when users press ? anywhere in the app

Changes

Reverted: Previous tooltip-based approach

• Removed shortcuts plugin from ProseMirror
• Reverted tooltip changes in menu.js and linkItem.js

Design Decisions

• Not a ProseMirror plugin - avoids editor performance overhead
• System-wide - works in browse, edit, sheet, and media views
• Content-driven - shortcuts defined in JSON, not hardcoded
• Gated by modal - shortcuts only shown when explicitly requested via ?

How It Works

1. User presses ? (when not typing in an input/editor)
2. Modal dynamically imports and displays shortcuts by category
3. Modal closes on ?, ESC, or close button
4. Platform-aware: shows ⌘ on Mac, Ctrl on Windows/Linux

Testing

• Modal opens with ? key in browse view
• Modal opens with ? key in edit view (when editor not focused)
• ? types normally when focused in editor/inputs
• Works with inputs inside shadow DOM components
• Modal closes correctly (ESC, ?, buttons)

---

Related Issue

#677

Motivation and Context

This change makes hidden keyboard shortcuts discoverable and learnable.

How Has This Been Tested?

https://keyboard-shortcut--da-live--thomsebastin.aem.page/edit#/aem-sandbox/block-collection/shortcuts

Screenshots (if appropriate):

shortcuts.mov

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/edit
🖥️	/edit

[auniverseaway]

I would opt for a less heavy handed approach to this. The current implementation would bring down performance of the editor for what is effectively a nice-to-have for people who go looking for this feature.

1. It does not need to be a ProseMirror Plugin.
2. This should be system wide and cover all views.
3. This should be gated by the question mark (help) modal.
4. This should be defined by content, not code.

[thomsebastin]

I would opt for a less heavy handed approach to this. The current implementation would bring down performance of the editor for what is effectively a nice-to-have for people who go looking for this feature.

1. It does not need to be a ProseMirror Plugin.
2. This should be system wide and cover all views.
3. This should be gated by the question mark (help) modal.
4. This should be defined by content, not code.

Thank you for the valuable feedback. I’ve made some updates and I’m not sure if I’ve covered all the points but please let me know if anything needs changing or improving.

[auniverseaway]

When I said "This should be gated by the question mark (help) modal." I guess I should have clarified...

1. In the top right hand corner of DA there is a question mark button it opens a modal.
2. When a user presses it today, they get legal information.
3. The idea was to always expose some basic help information in this modal.
4. Long term, there should be lightweight tabs: help, legal.
5. At the very least, I would add a link to this modal to trigger a full blown keyboard shortcut modal given the current view... browse, edit, sheet, media.
6. User clicks the link in the question mark modal, it closes and opens the new modal. You could even replace the contents and expand the modal if you wanted... assuming there's good UX to go "back" to the main modal content.
7. We should also replace this custom modal implementation with our newer and more standardized modals (da-dialog or nx-dialog)
8. The stuff is scripts is now unneccessary and you don't need to know a keyboard shortcut to discover others. :-)

Regarding the JSON / Web Component

1. We should not need a web component to render a nice ux for showing keyboard shortcuts. However...
2. I'm of two minds putting the keyboard shortcuts in code... I like that a dev can simply add during PR, but I also dislike the idea of putting something like content in code.
3. I think leave this approach for now. It's probably the lesser of evils and requires less manual work.

You may have some hoops you need to jump through to access the content of the help modal. If you do, Slack one of us on da-dev and we can help. Thanks again for working on this.