a tool for shared writing and social publishing
textToolbar: made list buttons into toggles, removed onClose when options are selected (felt jumpy)
+8
-7
+8
-7
app/test/TextToolbar.tsx
+8
-7
app/test/TextToolbar.tsx
···
201
201
let state = useTextState();
202
202
203
203
return (
204
+
// This Toolbar should close once the user starts typing again
204
205
<div className="flex w-full justify-between items-center gap-4">
205
206
<div className="flex items-center gap-[6px]">
206
207
<ToolbarButton
···
222
223
<ToolbarButton
223
224
onClick={() => {
224
225
state.setHeader("h1");
225
-
props.onClose();
226
226
}}
227
227
active={state.header === "h1"}
228
228
>
···
231
231
<ToolbarButton
232
232
onClick={() => {
233
233
state.setHeader("h2");
234
-
props.onClose();
235
234
}}
236
235
active={state.header === "h2"}
237
236
>
···
240
239
<ToolbarButton
241
240
onClick={() => {
242
241
state.setHeader("h3");
243
-
props.onClose();
244
242
}}
245
243
active={state.header === "h3"}
246
244
>
···
265
263
const ListToolbar = (props: { onClose: () => void }) => {
266
264
let state = useTextState();
267
265
266
+
// This Toolbar should close once the user starts typing again
268
267
return (
269
268
<div className="flex w-full justify-between items-center gap-4">
270
269
<div className="flex items-center gap-[6px]">
···
281
280
<Separator />
282
281
<ToolbarButton
283
282
onClick={() => {
284
-
state.setList("unordered");
285
-
props.onClose();
283
+
state.list === "unordered"
284
+
? state.setList("none")
285
+
: state.setList("unordered");
286
286
}}
287
287
active={state.list === "unordered"}
288
288
>
···
290
290
</ToolbarButton>
291
291
<ToolbarButton
292
292
onClick={() => {
293
-
state.setList("ordered");
294
-
props.onClose();
293
+
state.list === "ordered"
294
+
? state.setList("none")
295
+
: state.setList("ordered");
295
296
}}
296
297
active={state.list === "ordered"}
297
298
>