FEATURE: Toolbar API supports custom action for keyboard shortcuts (#28883)

Previously shortcuts added to toolbar buttons will automatically use the same action assigned to the button when clicked. This PR adds an additional optional key that can be passed when creating a new toolbar button: shortcutAction which allows for passing a custom action for the keyboard shortcut. This way a button can have a specific action when a keyboard shortcut is pressed that's different from when the button is clicked.
This commit is contained in:
Keegan George 2024-09-12 11:12:01 -07:00 committed by GitHub
parent d0cd0fd841
commit 9dadf43e83
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 41 additions and 1 deletions

View File

@ -187,6 +187,7 @@ class Toolbar {
popupMenu: buttonAttrs.popupMenu || false,
preventFocus: buttonAttrs.preventFocus || false,
condition: buttonAttrs.condition || (() => true),
shortcutAction: buttonAttrs.shortcutAction, // (optional) custom shortcut action
};
if (buttonAttrs.sendAction) {
@ -319,7 +320,14 @@ export default class DEditor extends Component.extend(
Object.keys(shortcuts).forEach((sc) => {
const button = shortcuts[sc];
this._itsatrap.bind(sc, () => {
button.action(button);
const customAction = shortcuts[sc].shortcutAction;
if (customAction) {
const toolbarEvent = this.newToolbarEvent();
customAction(toolbarEvent);
} else {
button.action(button);
}
return false;
});
});

View File

@ -1461,6 +1461,38 @@ acceptance("composer buttons API", function (needs) {
);
});
test("buttons can support a shortcut that triggers a custom action", async function (assert) {
withPluginApi("1.37.1", (api) => {
api.onToolbarCreate((toolbar) => {
toolbar.addButton({
id: "smile",
group: "extras",
icon: "far-smile",
shortcut: "ALT+S",
shortcutAction: (toolbarEvent) => {
toolbarEvent.addText(":smile: from keyboard");
},
sendAction: (event) => {
event.addText(":smile: from click");
},
});
});
});
await visit("/t/internationalization-localization/280");
await click(".post-controls button.reply");
const editor = document.querySelector(".d-editor-input");
await triggerKeyEvent(
".d-editor-input",
"keydown",
"S",
Object.assign({ altKey: true }, metaModifier)
);
assert.dom(editor).hasValue(":smile: from keyboard");
});
test("buttons can be added conditionally", async function (assert) {
withPluginApi("0", (api) => {
api.addComposerToolbarPopupMenuOption({