a tool for shared writing and social publishing
slight tweaks to the text toolbar, even more legible ordered list icon, closing submenus on select, save button on link input
+95
-35
+74
-34
app/test/TextToolbar.tsx
+74
-34
app/test/TextToolbar.tsx
···
21
21
BlockLinkSmall,
22
22
BlockCardSmall,
23
23
BlockSmall,
24
+
CheckTiny,
24
25
} from "components/Icons";
25
26
import { create } from "zustand";
26
27
import { combine } from "zustand/middleware";
···
52
53
set(() => ({ header: newHeader })),
53
54
setList: (newList: "ordered" | "unordered" | "none") =>
54
55
set(() => ({ list: newList })),
55
-
setLink: (newLink: string) => set(() => ({ link: newLink })),
56
+
setLink: (newLink: string | undefined) => set(() => ({ link: newLink })),
56
57
}),
57
58
),
58
59
);
···
148
149
</ToolbarButton>
149
150
</>
150
151
) : toolbarState === "link" ? (
151
-
<>
152
-
<ToolbarButton
153
-
active={state.link !== undefined && state.link !== ""}
154
-
onClick={() => setToolbarState("default")}
155
-
>
156
-
<LinkTextToolbarSmall />
157
-
</ToolbarButton>
158
-
<Separator />
159
-
<input
160
-
className="w-full grow bg-transparent border-none outline-none "
161
-
placeholder="www.leafl.et"
162
-
value={state.link}
163
-
onChange={(e) => state.setLink(e.target.value)}
164
-
/>
165
-
<button onClick={() => setToolbarState("default")}>
166
-
<CloseTiny />
167
-
</button>
168
-
</>
152
+
<LinkToolbar onClose={() => setToolbarState("default")} />
169
153
) : toolbarState === "header" ? (
170
154
<HeaderToolbar onClose={() => setToolbarState("default")} />
171
155
) : toolbarState === "list" ? (
···
177
161
);
178
162
};
179
163
164
+
const LinkToolbar = (props: { onClose: () => void }) => {
165
+
let state = useTextState();
166
+
let [linkValue, setLinkValue] = useState(state.link);
167
+
return (
168
+
<div className=" w-full flex items-center gap-[6px]">
169
+
<ToolbarButton
170
+
active={state.link !== undefined && state.link !== ""}
171
+
onClick={() => props.onClose}
172
+
>
173
+
<LinkTextToolbarSmall />
174
+
</ToolbarButton>
175
+
<Separator />
176
+
<input
177
+
className="w-full grow bg-transparent border-none outline-none "
178
+
placeholder="www.leafl.et"
179
+
value={linkValue}
180
+
onChange={(e) => setLinkValue(e.target.value)}
181
+
/>
182
+
<div className="flex items-center gap-3">
183
+
<button
184
+
className="hover:text-accent"
185
+
onClick={() => {
186
+
state.setLink(linkValue);
187
+
props.onClose();
188
+
}}
189
+
>
190
+
<CheckTiny />
191
+
</button>
192
+
<button className="hover:text-accent" onClick={() => props.onClose()}>
193
+
<CloseTiny />
194
+
</button>
195
+
</div>
196
+
</div>
197
+
);
198
+
};
199
+
180
200
const HeaderToolbar = (props: { onClose: () => void }) => {
181
201
let state = useTextState();
182
202
···
200
220
</ToolbarButton>
201
221
<Separator />
202
222
<ToolbarButton
203
-
onClick={() => state.setHeader("h1")}
223
+
onClick={() => {
224
+
state.setHeader("h1");
225
+
props.onClose();
226
+
}}
204
227
active={state.header === "h1"}
205
228
>
206
229
<Header1Small />
207
230
</ToolbarButton>
208
231
<ToolbarButton
209
-
onClick={() => state.setHeader("h2")}
232
+
onClick={() => {
233
+
state.setHeader("h2");
234
+
props.onClose();
235
+
}}
210
236
active={state.header === "h2"}
211
237
>
212
238
<Header2Small />
213
239
</ToolbarButton>
214
240
<ToolbarButton
215
-
onClick={() => state.setHeader("h3")}
241
+
onClick={() => {
242
+
state.setHeader("h3");
243
+
props.onClose();
244
+
}}
216
245
active={state.header === "h3"}
217
246
>
218
247
<Header3Small />
219
248
</ToolbarButton>
220
249
<ToolbarButton
221
-
onClick={() => state.setHeader("p")}
250
+
onClick={() => {
251
+
state.setHeader("p");
252
+
props.onClose();
253
+
}}
222
254
active={state.header === "p"}
223
255
className="px-[6px]"
224
256
>
225
257
Paragraph
226
258
</ToolbarButton>
227
259
</div>
228
-
<button onClick={() => props.onClose()}>
229
-
<CloseTiny />
230
-
</button>
260
+
<CloseToolbarButton onClose={props.onClose} />
231
261
</div>
232
262
);
233
263
};
···
250
280
</ToolbarButton>
251
281
<Separator />
252
282
<ToolbarButton
253
-
onClick={() => state.setList("unordered")}
283
+
onClick={() => {
284
+
state.setList("unordered");
285
+
props.onClose();
286
+
}}
254
287
active={state.list === "unordered"}
255
288
>
256
289
<ListUnorderedSmall />
257
290
</ToolbarButton>
258
291
<ToolbarButton
259
-
onClick={() => state.setList("ordered")}
292
+
onClick={() => {
293
+
state.setList("ordered");
294
+
props.onClose();
295
+
}}
260
296
active={state.list === "ordered"}
261
297
>
262
298
<ListOrderedSmall />
···
270
306
<ListIndentDecreaseSmall />
271
307
</ToolbarButton>
272
308
</div>
273
-
<button onClick={() => props.onClose()}>
274
-
<CloseTiny />
275
-
</button>
309
+
<CloseToolbarButton onClose={props.onClose} />
276
310
</div>
277
311
);
278
312
};
···
295
329
<BlockCardSmall />
296
330
</ToolbarButton>
297
331
</div>
298
-
<button onClick={() => props.onClose()}>
299
-
<CloseTiny />
300
-
</button>
332
+
<CloseToolbarButton onClose={props.onClose} />
301
333
</div>
302
334
);
303
335
};
···
325
357
const Separator = () => {
326
358
return <div className="h-6 border-r border-border" />;
327
359
};
360
+
361
+
const CloseToolbarButton = (props: { onClose: () => void }) => {
362
+
return (
363
+
<button className="hover:text-accent" onClick={() => props.onClose()}>
364
+
<CloseTiny />
365
+
</button>
366
+
);
367
+
};
+21
-1
components/Icons.tsx
+21
-1
components/Icons.tsx
···
174
174
};
175
175
176
176
// TINY ICONS 16x16
177
+
export const CheckTiny = (props: Props) => {
178
+
return (
179
+
<svg
180
+
width="16"
181
+
height="16"
182
+
viewBox="0 0 16 16"
183
+
fill="none"
184
+
xmlns="http://www.w3.org/2000/svg"
185
+
{...props}
186
+
>
187
+
<path
188
+
fillRule="evenodd"
189
+
clipRule="evenodd"
190
+
d="M14.7921 2.03304C15.3262 2.4705 15.4045 3.25808 14.967 3.79213L6.7757 13.7921C6.55723 14.0588 6.2383 14.2235 5.89434 14.2471C5.55039 14.2707 5.21195 14.1512 4.95907 13.9169L1.15037 10.3874C0.644007 9.91821 0.613911 9.12732 1.08315 8.62096C1.55239 8.11459 2.34327 8.0845 2.84964 8.55374L5.68371 11.18L13.033 2.20794C13.4705 1.67388 14.258 1.59558 14.7921 2.03304Z"
191
+
fill="currentColor"
192
+
/>
193
+
</svg>
194
+
);
195
+
};
177
196
178
197
export const CloseTiny = (props: Props) => {
179
198
return (
···
439
458
viewBox="0 0 24 24"
440
459
fill="none"
441
460
xmlns="http://www.w3.org/2000/svg"
461
+
{...props}
442
462
>
443
463
<path
444
464
fillRule="evenodd"
445
465
clipRule="evenodd"
446
-
d="M3.28318 7.72032V8.31824H5.81487V7.72032L5.17736 7.62699V4.07153L3.27734 4.36904V4.93488L3.82906 4.94363V7.62699L3.28318 7.72032ZM8.32275 5.19482C7.77047 5.19482 7.32275 5.64254 7.32275 6.19482C7.32275 6.74711 7.77047 7.19482 8.32275 7.19482H19.7002C20.2525 7.19482 20.7002 6.74711 20.7002 6.19482C20.7002 5.64254 20.2525 5.19482 19.7002 5.19482H8.32275ZM8.32275 10.9949C7.77047 10.9949 7.32275 11.4426 7.32275 11.9949C7.32275 12.5472 7.77047 12.9949 8.32275 12.9949H19.7002C20.2525 12.9949 20.7002 12.5472 20.7002 11.9949C20.7002 11.4426 20.2525 10.9949 19.7002 10.9949H8.32275ZM7.32275 17.7949C7.32275 17.2426 7.77047 16.7949 8.32275 16.7949H19.7002C20.2525 16.7949 20.7002 17.2426 20.7002 17.7949C20.7002 18.3472 20.2525 18.7949 19.7002 18.7949H8.32275C7.77047 18.7949 7.32275 18.3472 7.32275 17.7949ZM2.82851 14.1488V13.1859L3.86848 12.3148C4.19515 12.0441 4.43121 11.7095 4.50316 11.6025C4.5751 11.4956 4.65295 11.3542 4.67116 11.2613C4.69916 11.1183 4.66571 10.991 4.59182 10.8937C4.51793 10.7965 4.39963 10.7701 4.25186 10.7701C4.15315 10.7701 3.99293 10.8234 3.91515 10.9381C3.87158 11.0024 3.84048 11.0781 3.80035 11.2881L2.77309 11.2613L2.76726 11.2438C2.76142 10.9812 2.81781 10.744 2.93642 10.5321C3.05698 10.3201 3.23004 10.1519 3.4556 10.0275C3.68115 9.90304 3.94657 9.84082 4.25186 9.84082C4.55714 9.84082 4.81867 9.89429 5.03645 10.0012C5.25617 10.1062 5.42437 10.255 5.54104 10.4475C5.65965 10.6381 5.71895 10.8617 5.71895 11.1183C5.71895 11.2933 5.68881 11.4547 5.62854 11.6025C5.5702 11.7483 5.47298 11.9049 5.33687 12.0721C5.2027 12.2393 5.02284 12.4415 4.79728 12.6788L4.32057 13.1713L4.3264 13.1859H5.03645L5.04811 13.02H5.8152V14.1488H2.82851ZM3.49919 19.8366C3.73447 19.9319 3.99114 19.9796 4.2692 19.9796C4.57059 19.9796 4.83892 19.929 5.0742 19.8279C5.31143 19.7268 5.4981 19.5829 5.63421 19.3962C5.77032 19.2076 5.83838 18.984 5.83838 18.7254C5.83838 18.4901 5.7713 18.2879 5.63713 18.1187C5.5049 17.9495 5.32698 17.8232 5.10337 17.7395C5.32504 17.6326 5.49129 17.5043 5.60213 17.3545C5.71491 17.2029 5.7713 17.0211 5.7713 16.8091C5.7713 16.428 5.63227 16.1334 5.35421 15.9254C5.07809 15.7154 4.71253 15.6104 4.25753 15.6104C3.97558 15.6104 3.72377 15.6599 3.5021 15.7591C3.28044 15.8563 3.10738 15.9934 2.98293 16.1704C2.86043 16.3473 2.80307 16.5524 2.81085 16.7858L2.81668 16.8033H3.80836C3.80836 16.7216 3.8278 16.6506 3.86669 16.5904C3.92846 16.4477 4.04085 16.3777 4.19447 16.3777C4.34808 16.3777 4.44172 16.4433 4.52338 16.5347C4.607 16.6261 4.61855 16.7362 4.61855 16.8762C4.61855 16.9754 4.59814 17.0629 4.5573 17.1387C4.51647 17.2126 4.45619 17.2709 4.37647 17.3137C4.29869 17.3545 4.20244 17.375 4.08771 17.375H3.75294V18.1304H4.0638C4.26797 18.1304 4.38619 18.1819 4.49314 18.285C4.60008 18.3861 4.65355 18.5164 4.65355 18.6758C4.65355 18.8314 4.61855 18.9558 4.53047 19.0658C4.43325 19.163 4.31126 19.1964 4.18753 19.1964C4.0638 19.1964 3.9098 19.0658 3.87252 18.9558C3.86679 18.9389 3.8607 18.9222 3.85465 18.9057C3.83123 18.8416 3.80836 18.779 3.80836 18.7079H2.74668L2.74376 18.7254C2.73793 18.9957 2.80404 19.2241 2.9421 19.4108C3.08016 19.5975 3.26585 19.7394 3.49919 19.8366Z"
466
+
d="M2.61712 10.7835V9.86485L3.45578 9.72146V5.59887L2.60815 5.58543V4.7161L5.52724 4.25903V9.72146L6.50669 9.86485V10.7835H2.61712ZM7.27734 6.19995C7.27734 5.64767 7.72506 5.19995 8.27734 5.19995H19.6548C20.2071 5.19995 20.6548 5.64767 20.6548 6.19995C20.6548 6.75224 20.2071 7.19995 19.6548 7.19995H8.27734C7.72506 7.19995 7.27734 6.75224 7.27734 6.19995ZM7.27734 12C7.27734 11.4477 7.72506 11 8.27734 11H19.6548C20.2071 11 20.6548 11.4477 20.6548 12C20.6548 12.5523 20.2071 13 19.6548 13H8.27734C7.72506 13 7.27734 12.5523 7.27734 12ZM8.27734 16.8001C7.72506 16.8001 7.27734 17.2478 7.27734 17.8001C7.27734 18.3523 7.72506 18.8001 8.27734 18.8001H19.6548C20.2071 18.8001 20.6548 18.3523 20.6548 17.8001C20.6548 17.2478 20.2071 16.8001 19.6548 16.8001H8.27734ZM1.91871 18.2618V19.7411H6.50732V18.0069H5.3288L5.31088 18.2618H4.22L4.21104 18.2394L4.94343 17.4826C5.28997 17.1182 5.5663 16.8075 5.77243 16.5506C5.98155 16.2937 6.13091 16.0532 6.22054 15.8291C6.31314 15.6021 6.35945 15.3541 6.35945 15.0853C6.35945 14.6909 6.26833 14.3474 6.0861 14.0546C5.90686 13.7589 5.64845 13.5303 5.31088 13.369C4.97629 13.2047 4.57449 13.1226 4.10547 13.1226C3.63645 13.1226 3.22867 13.2182 2.88214 13.4093C2.5356 13.6005 2.26972 13.8589 2.08451 14.1846C1.90228 14.5102 1.81564 14.8747 1.8246 15.278L1.83357 15.3048L3.4118 15.3461C3.47346 15.0234 3.52123 14.9071 3.58817 14.8083C3.70767 14.6321 3.95383 14.5502 4.10547 14.5502C4.33251 14.5502 4.51426 14.5909 4.62778 14.7402C4.7413 14.8896 4.79268 15.0853 4.74967 15.3048C4.72169 15.4476 4.60209 15.6648 4.49156 15.8291C4.38102 15.9934 4.01836 16.5076 3.51648 16.9234L1.91871 18.2618Z"
447
467
fill="currentColor"
448
468
/>
449
469
</svg>