mirror of
https://github.com/discourse/discourse.git
synced 2025-02-25 18:55:32 -06:00
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:
parent
d0cd0fd841
commit
9dadf43e83
@ -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;
|
||||
});
|
||||
});
|
||||
|
@ -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({
|
||||
|
Loading…
Reference in New Issue
Block a user