leaflet.pub
a tool for shared writing and social publishing
Fix block command bar ESC key handling (#232)
* fix: BlockCommandBar ESC key handling
* Align clearCommandSearchText more with repo code style
authored by
Mark Tomlinson
and committed by
GitHub
9a3d8d68
9fb4d20c
+22
-4
+22
-4
components/Blocks/BlockCommandBar.tsx
+22
-4
components/Blocks/BlockCommandBar.tsx
···
6
import { NestedCardThemeProvider } from "components/ThemeManager/ThemeProvider";
7
import { UndoManager } from "src/undoManager";
8
import { useLeafletPublicationData } from "components/PageSWRDataProvider";
9
10
type Props = {
11
parent: string;
···
31
let { rep, undoManager } = useReplicache();
32
let entity_set = useEntitySetContext();
33
let { data: pub } = useLeafletPublicationData();
34
35
let commandResults = blockCommands.filter((command) => {
36
const matchesSearch = command.name
···
98
undoManager.endGroup();
99
return;
100
}
101
-
102
-
// radix menu component handles esc
103
-
if (e.key === "Escape") return;
104
};
105
window.addEventListener("keydown", listener);
106
···
108
}, [highlighted, setHighlighted, commandResults, rep, entity_set.set, props]);
109
110
return (
111
-
<Popover.Root open>
112
<Popover.Trigger className="absolute left-0"></Popover.Trigger>
113
<Popover.Portal>
114
<Popover.Content
···
6
import { NestedCardThemeProvider } from "components/ThemeManager/ThemeProvider";
7
import { UndoManager } from "src/undoManager";
8
import { useLeafletPublicationData } from "components/PageSWRDataProvider";
9
+
import { setEditorState, useEditorStates } from "src/state/useEditorState";
10
11
type Props = {
12
parent: string;
···
32
let { rep, undoManager } = useReplicache();
33
let entity_set = useEntitySetContext();
34
let { data: pub } = useLeafletPublicationData();
35
+
36
+
// This clears '/' AND anything typed after it
37
+
const clearCommandSearchText = () => {
38
+
if (!props.entityID) return;
39
+
const entityID = props.entityID;
40
+
41
+
const existingState = useEditorStates.getState().editorStates[entityID];
42
+
if (!existingState) return;
43
+
44
+
const tr = existingState.editor.tr;
45
+
tr.deleteRange(1, tr.doc.content.size - 1);
46
+
setEditorState(entityID, { editor: existingState.editor.apply(tr) });
47
+
};
48
49
let commandResults = blockCommands.filter((command) => {
50
const matchesSearch = command.name
···
112
undoManager.endGroup();
113
return;
114
}
115
};
116
window.addEventListener("keydown", listener);
117
···
119
}, [highlighted, setHighlighted, commandResults, rep, entity_set.set, props]);
120
121
return (
122
+
<Popover.Root
123
+
open
124
+
onOpenChange={(open) => {
125
+
if (!open) {
126
+
clearCommandSearchText();
127
+
}
128
+
}}
129
+
>
130
<Popover.Trigger className="absolute left-0"></Popover.Trigger>
131
<Popover.Portal>
132
<Popover.Content