d126d04d17
* fix: Bind keyboard events to excalidraw container * fix cases around blurring * fix modal rendering so keyboard shortcuts work on modal as well * Revert "fix modal rendering so keyboard shortcuts work on modal as well" This reverts commit 2c8ec6be8eff7d308591467fe2c33cfbca16138f. * Attach keyboard event in react way so we need not handle portals separately (modals) * dnt propagate esc event when modal shown * focus the container when help dialog closed with shift+? * focus the help icon when help dialog on close triggered * move focusNearestTabbableParent to util * rename util to focusNearestParent and remove outline from excal and modal * Add prop bindKeyGlobally to decide if keyboard events should be binded to document and allow it in excal app, revert tests * fix * focus container after installing library, reset library and closing error dialog * fix tests and create util to focus container * Add excalidraw-container class to focus on the container * pass focus container to library to focus current instance of excal * update docs * remove util as it wont be used anywhere * fix propagation not being stopped for React keyboard handling * tweak reamde Co-authored-by: David Luzar <luzar.david@gmail.com> * tweak changelog * rename prop to handleKeyboardGlobally Co-authored-by: dwelle <luzar.david@gmail.com>
90 lines
2.3 KiB
TypeScript
90 lines
2.3 KiB
TypeScript
import React from "react";
|
|
import { menu, palette } from "../components/icons";
|
|
import { ToolButton } from "../components/ToolButton";
|
|
import { t } from "../i18n";
|
|
import { showSelectedShapeActions, getNonDeletedElements } from "../element";
|
|
import { register } from "./register";
|
|
import { allowFullScreen, exitFullScreen, isFullScreen } from "../utils";
|
|
import { CODES, KEYS } from "../keys";
|
|
import { HelpIcon } from "../components/HelpIcon";
|
|
|
|
export const actionToggleCanvasMenu = register({
|
|
name: "toggleCanvasMenu",
|
|
perform: (_, appState) => ({
|
|
appState: {
|
|
...appState,
|
|
openMenu: appState.openMenu === "canvas" ? null : "canvas",
|
|
},
|
|
commitToHistory: false,
|
|
}),
|
|
PanelComponent: ({ appState, updateData }) => (
|
|
<ToolButton
|
|
type="button"
|
|
icon={menu}
|
|
aria-label={t("buttons.menu")}
|
|
onClick={updateData}
|
|
selected={appState.openMenu === "canvas"}
|
|
/>
|
|
),
|
|
});
|
|
|
|
export const actionToggleEditMenu = register({
|
|
name: "toggleEditMenu",
|
|
perform: (_elements, appState) => ({
|
|
appState: {
|
|
...appState,
|
|
openMenu: appState.openMenu === "shape" ? null : "shape",
|
|
},
|
|
commitToHistory: false,
|
|
}),
|
|
PanelComponent: ({ elements, appState, updateData }) => (
|
|
<ToolButton
|
|
visible={showSelectedShapeActions(
|
|
appState,
|
|
getNonDeletedElements(elements),
|
|
)}
|
|
type="button"
|
|
icon={palette}
|
|
aria-label={t("buttons.edit")}
|
|
onClick={updateData}
|
|
selected={appState.openMenu === "shape"}
|
|
/>
|
|
),
|
|
});
|
|
|
|
export const actionFullScreen = register({
|
|
name: "toggleFullScreen",
|
|
perform: () => {
|
|
if (!isFullScreen()) {
|
|
allowFullScreen();
|
|
}
|
|
if (isFullScreen()) {
|
|
exitFullScreen();
|
|
}
|
|
return {
|
|
commitToHistory: false,
|
|
};
|
|
},
|
|
keyTest: (event) => event.code === CODES.F && !event[KEYS.CTRL_OR_CMD],
|
|
});
|
|
|
|
export const actionShortcuts = register({
|
|
name: "toggleShortcuts",
|
|
perform: (_elements, appState, _, { focusContainer }) => {
|
|
if (appState.showHelpDialog) {
|
|
focusContainer();
|
|
}
|
|
return {
|
|
appState: {
|
|
...appState,
|
|
showHelpDialog: !appState.showHelpDialog,
|
|
},
|
|
commitToHistory: false,
|
|
};
|
|
},
|
|
PanelComponent: ({ updateData }) => (
|
|
<HelpIcon title={t("helpDialog.title")} onClick={updateData} />
|
|
),
|
|
keyTest: (event) => event.key === KEYS.QUESTION_MARK,
|
|
});
|