smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-04-14 16:40:58 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix modal rendering so keyboard shortcuts work on modal as well

Browse source
This commit is contained in:
Aakansha Doshi 2021-04-10 20:48:42 +05:30
parent 959734a348
commit 2c8ec6be8e
3 changed files with 13 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/App.tsx
View file

@ -489,6 +489,7 @@ class App extends React.Component<AppProps, AppState> {
/>
<div className="excalidraw-textEditorContainer" />
<div className="excalidraw-contextMenuContainer" />
<div className="excalidraw-modal-container" />
{this.state.showStats && (
<Stats
appState={this.state}

6
src/components/Modal.scss
View file

@ -1,9 +1,13 @@
@import "../css/variables.module";
.excalidraw {
&.excalidraw-modal-container {
.excalidraw-modal-container {
&--visible {
position: absolute;
z-index: 10;
width: 100%;
height: 100%;
}
}
.Modal {

9
src/components/Modal.tsx
View file

@ -65,20 +65,21 @@ const useBodyRoot = () => {
.querySelector(".excalidraw")
?.classList.contains("theme--dark");
const div = document.createElement("div");
div.classList.add("excalidraw", "excalidraw-modal-container");
const container = document.querySelector(".excalidraw-modal-container")!;
container.classList.add("excalidraw-modal-container--visible");
div.classList.toggle("excalidraw--mobile", isMobileRef.current);
if (isDarkTheme) {
div.classList.add("theme--dark");
div.classList.add("theme--dark-background-none");
}
document.body.appendChild(div);
container.appendChild(div);
setDiv(div);
return () => {
document.body.removeChild(div);
container.classList.remove("excalidraw-modal-container--visible");
container!.removeChild(div);
};
}, []);