a tool for shared writing and social publishing
removed a whole bunch of unused imports and fixed up some minor styling in text toolbar
+39
-70
+39
-70
components/Toolbar/index.tsx
+39
-70
components/Toolbar/index.tsx
···
1
1
"use client";
2
2
3
-
import React, { useCallback, useEffect, useState } from "react";
3
+
import React, { useEffect, useState } from "react";
4
4
import {
5
5
BoldSmall,
6
6
CloseTiny,
7
7
ItalicSmall,
8
-
UndoSmall,
9
8
ListUnorderedSmall,
10
-
ListOrderedSmall,
11
9
ListIndentDecreaseSmall,
12
10
ListIndentIncreaseSmall,
13
-
BlockImageSmall,
14
-
BlockLinkSmall,
15
-
BlockCardSmall,
16
-
BlockSmall,
17
11
StrikethroughSmall,
18
12
HighlightSmall,
19
-
CheckTiny,
20
13
PopoverArrow,
21
14
ArrowRightTiny,
22
15
} from "components/Icons";
23
-
import { create } from "zustand";
24
-
import { combine } from "zustand/middleware";
25
16
import { schema } from "components/Blocks/TextBlock/schema";
26
17
import { TextDecorationButton } from "./TextDecorationButton";
27
18
import {
···
38
29
import { useEditorStates } from "src/state/useEditorState";
39
30
import { useUIState } from "src/useUIState";
40
31
import { useEntity, useReplicache } from "src/replicache";
41
-
import { addImage } from "src/utils/addImage";
42
-
import { scanIndex } from "src/replicache/utils";
43
-
import { v7 } from "uuid";
44
-
import { useEntitySetContext } from "components/EntitySetProvider";
45
-
import { generateKeyBetween } from "fractional-indexing";
46
-
import { focusCard } from "components/Cards";
47
-
import { addLinkBlock } from "src/utils/addLinkBlock";
48
32
import * as Tooltip from "@radix-ui/react-tooltip";
49
33
import { Separator, ShortcutKey } from "components/Layout";
50
-
import { Input } from "components/Input";
51
34
import { metaKey } from "src/utils/metaKey";
52
35
import { isMac } from "@react-aria/utils";
53
36
import { addShortcut } from "src/shortcuts";
···
185
168
className="-ml-1"
186
169
>
187
170
<ArrowRightTiny />
188
-
{/* <div
189
-
className={`w-2 h-[22px] rounded-[2px] border border-border`}
190
-
style={{
191
-
backgroundColor:
192
-
lastUsedHighlight === "1"
193
-
? theme.colors["highlight-1"]
194
-
: lastUsedHighlight === "2"
195
-
? theme.colors["highlight-2"]
196
-
: theme.colors["highlight-3"],
197
-
}}
198
-
/> */}
199
171
</ToolbarButton>
200
172
</div>
173
+
<Separator classname="h-6" />
174
+
201
175
<ListToolbar />
202
176
203
177
<Separator classname="h-6" />
···
291
265
};
292
266
293
267
const ListToolbar = () => {
294
-
// This Toolbar should close once the user starts typing again
295
268
let focusedBlock = useUIState((s) => s.focusedBlock);
296
269
let isList = useEntity(focusedBlock?.entityID || null, "block/is-list");
297
270
let siblings = useBlocks(
···
307
280
<ToolbarButton
308
281
tooltipContent={
309
282
<div className="flex flex-col gap-1 justify-center">
310
-
<div className="text-center font-normal">Make List</div>
283
+
<div className="text-center">Make List</div>
311
284
<div className="flex gap-1">
312
285
{
313
286
<>
···
334
307
);
335
308
336
309
return (
337
-
<div className="flex w-full justify-between items-center gap-4">
338
-
<div className="flex items-center gap-[6px]">
339
-
<Separator classname="h-6" />
340
-
<ToolbarButton
341
-
tooltipContent={
342
-
<div className="flex flex-col gap-1 justify-center">
343
-
<div className="text-center">Indent Item</div>
344
-
<div className="flex gap-1 justify-center">
345
-
<ShortcutKey>Tab</ShortcutKey>
346
-
</div>
310
+
<div className="flex items-center gap-[6px]">
311
+
<ToolbarButton
312
+
tooltipContent={
313
+
<div className="flex flex-col gap-1 justify-center">
314
+
<div className="text-center">Indent Item</div>
315
+
<div className="flex gap-1 justify-center">
316
+
<ShortcutKey>Tab</ShortcutKey>
347
317
</div>
348
-
}
349
-
disabled={
350
-
!previousBlock?.listData ||
351
-
previousBlock.listData.depth !== block?.listData?.depth
352
-
}
353
-
onClick={() => {
354
-
if (!rep || !block || !previousBlock) return;
355
-
indent(block, previousBlock, rep);
356
-
}}
357
-
>
358
-
<ListIndentIncreaseSmall />
359
-
</ToolbarButton>
360
-
<ToolbarButton
361
-
tooltipContent={
362
-
<div className="flex flex-col gap-1 justify-center">
363
-
<div className="text-center">Outdent Item</div>
364
-
<div className="flex gap-1 justify-center">
365
-
<ShortcutKey>Shift</ShortcutKey> +{" "}
366
-
<ShortcutKey>Tab</ShortcutKey>
367
-
</div>
318
+
</div>
319
+
}
320
+
disabled={
321
+
!previousBlock?.listData ||
322
+
previousBlock.listData.depth !== block?.listData?.depth
323
+
}
324
+
onClick={() => {
325
+
if (!rep || !block || !previousBlock) return;
326
+
indent(block, previousBlock, rep);
327
+
}}
328
+
>
329
+
<ListIndentIncreaseSmall />
330
+
</ToolbarButton>
331
+
<ToolbarButton
332
+
tooltipContent={
333
+
<div className="flex flex-col gap-1 justify-center">
334
+
<div className="text-center">Outdent Item</div>
335
+
<div className="flex gap-1 justify-center">
336
+
<ShortcutKey>Shift</ShortcutKey> + <ShortcutKey>Tab</ShortcutKey>
368
337
</div>
369
-
}
370
-
onClick={() => {
371
-
if (!rep || !block) return;
372
-
outdent(block, previousBlock, rep);
373
-
}}
374
-
>
375
-
<ListIndentDecreaseSmall />
376
-
</ToolbarButton>
377
-
</div>
338
+
</div>
339
+
}
340
+
onClick={() => {
341
+
if (!rep || !block) return;
342
+
outdent(block, previousBlock, rep);
343
+
}}
344
+
>
345
+
<ListIndentDecreaseSmall />
346
+
</ToolbarButton>
378
347
</div>
379
348
);
380
349
};