a tool for shared writing and social publishing
Added Text Toolbar on mobile! - init the text toolbar - added many new icons - had to rename some icons - added styling for placeholders in input feilds
+683
-32
+5
app/globals.css
+5
app/globals.css
+4
-4
app/test/Blocks.tsx
+4
-4
app/test/Blocks.tsx
···
1
1
import { useState } from "react";
2
2
import {
3
-
CardSmall,
3
+
BlockCardSmall,
4
4
CloseConstrastSmall,
5
5
CloseTiny,
6
-
ImageSmall,
6
+
BlockImageSmall,
7
7
LinkSmall,
8
8
} from "../../components/Icons";
9
9
import { theme } from "../../tailwind.config";
···
42
42
>
43
43
<div className="flex gap-1 ">
44
44
<button className="opacity-30 hover:opacity-100 hover:text-accent">
45
-
<ImageSmall />
45
+
<BlockImageSmall />
46
46
</button>
47
47
48
48
<button className="opacity-30 hover:opacity-100 hover:text-accent">
49
-
<CardSmall />
49
+
<BlockCardSmall />
50
50
</button>
51
51
52
52
<button className="opacity-30 hover:opacity-100 hover:text-accent">
+328
app/test/TextToolbar.tsx
+328
app/test/TextToolbar.tsx
···
1
+
"use client";
2
+
3
+
import { useState } from "react";
4
+
import {
5
+
BoldSmall,
6
+
CloseTiny,
7
+
ItalicSmall,
8
+
RedoSmall,
9
+
UndoSmall,
10
+
UnderlineSmall,
11
+
LinkTextToolbarSmall,
12
+
ParagraphSmall,
13
+
ListUnorderedSmall,
14
+
Header1Small,
15
+
Header2Small,
16
+
Header3Small,
17
+
ListOrderedSmall,
18
+
ListIndentDecreaseSmall,
19
+
ListIndentIncreaseSmall,
20
+
BlockImageSmall,
21
+
BlockLinkSmall,
22
+
BlockCardSmall,
23
+
BlockSmall,
24
+
} from "components/Icons";
25
+
import { create } from "zustand";
26
+
import { combine } from "zustand/middleware";
27
+
28
+
type textState = {
29
+
bold: boolean;
30
+
italic: boolean;
31
+
underline: boolean;
32
+
header: "h1" | "h2" | "h3" | "p";
33
+
list: "ordered" | "unordered" | "none";
34
+
link: string | undefined;
35
+
};
36
+
37
+
let useTextState = create(
38
+
combine(
39
+
{
40
+
bold: false,
41
+
italic: false,
42
+
underline: false,
43
+
header: "p",
44
+
list: "none",
45
+
link: undefined as string | undefined,
46
+
},
47
+
(set) => ({
48
+
toggleBold: () => set((state) => ({ bold: !state.bold })),
49
+
toggleItalic: () => set((state) => ({ italic: !state.italic })),
50
+
toggleUnderline: () => set((state) => ({ underline: !state.underline })),
51
+
setHeader: (newHeader: "h1" | "h2" | "h3" | "p") =>
52
+
set(() => ({ header: newHeader })),
53
+
setList: (newList: "ordered" | "unordered" | "none") =>
54
+
set(() => ({ list: newList })),
55
+
setLink: (newLink: string) => set(() => ({ link: newLink })),
56
+
}),
57
+
),
58
+
);
59
+
60
+
export const TextToolbar = () => {
61
+
let [toolbarState, setToolbarState] = useState<
62
+
"default" | "link" | "header" | "list" | "block"
63
+
>("default");
64
+
65
+
let state = useTextState();
66
+
67
+
return (
68
+
<div className="-mt-6 z-10 bg-bg-card px-2 py-2 flex gap-[6px] items-center">
69
+
{toolbarState === "default" ? (
70
+
<>
71
+
{" "}
72
+
<ToolbarButton onClick={() => {}}>
73
+
<UndoSmall />
74
+
</ToolbarButton>
75
+
<ToolbarButton onClick={() => {}}>
76
+
<RedoSmall />
77
+
</ToolbarButton>
78
+
<Separator />
79
+
<ToolbarButton
80
+
active={state.bold}
81
+
onClick={() => {
82
+
state.toggleBold();
83
+
}}
84
+
>
85
+
<BoldSmall />
86
+
</ToolbarButton>
87
+
<ToolbarButton
88
+
active={state.italic}
89
+
onClick={() => {
90
+
state.toggleItalic();
91
+
}}
92
+
>
93
+
<ItalicSmall />
94
+
</ToolbarButton>
95
+
<ToolbarButton
96
+
active={state.underline}
97
+
onClick={() => {
98
+
state.toggleUnderline();
99
+
}}
100
+
>
101
+
<UnderlineSmall />
102
+
</ToolbarButton>
103
+
{/* possibly link is only available if text is actively selected */}
104
+
<ToolbarButton
105
+
active={state.link !== undefined && state.link !== ""}
106
+
onClick={() => {
107
+
setToolbarState("link");
108
+
}}
109
+
>
110
+
<LinkTextToolbarSmall />
111
+
</ToolbarButton>
112
+
<Separator />
113
+
<ToolbarButton
114
+
active
115
+
onClick={() => {
116
+
setToolbarState("header");
117
+
}}
118
+
>
119
+
{state.header === "h1" ? (
120
+
<Header1Small />
121
+
) : state.header === "h2" ? (
122
+
<Header2Small />
123
+
) : state.header === "h3" ? (
124
+
<Header3Small />
125
+
) : (
126
+
<ParagraphSmall />
127
+
)}
128
+
</ToolbarButton>
129
+
<Separator />
130
+
<ToolbarButton
131
+
active={state.list !== "none"}
132
+
onClick={() => {
133
+
setToolbarState("list");
134
+
}}
135
+
>
136
+
{state.list === "ordered" ? (
137
+
<ListOrderedSmall />
138
+
) : (
139
+
<ListUnorderedSmall />
140
+
)}
141
+
</ToolbarButton>
142
+
<Separator />
143
+
<ToolbarButton
144
+
onClick={() => {
145
+
setToolbarState("block");
146
+
}}
147
+
>
148
+
<BlockSmall />
149
+
</ToolbarButton>
150
+
</>
151
+
) : toolbarState === "link" ? (
152
+
<>
153
+
<ToolbarButton
154
+
active={state.link !== undefined && state.link !== ""}
155
+
onClick={() => setToolbarState("default")}
156
+
>
157
+
<LinkTextToolbarSmall />
158
+
</ToolbarButton>
159
+
<Separator />
160
+
<input
161
+
className="w-full grow"
162
+
placeholder="www.leafl.et"
163
+
value={state.link}
164
+
onChange={(e) => state.setLink(e.target.value)}
165
+
/>
166
+
<button onClick={() => setToolbarState("default")}>
167
+
<CloseTiny />
168
+
</button>
169
+
</>
170
+
) : toolbarState === "header" ? (
171
+
<HeaderToolbar onClose={() => setToolbarState("default")} />
172
+
) : toolbarState === "list" ? (
173
+
<ListToolbar onClose={() => setToolbarState("default")} />
174
+
) : toolbarState === "block" ? (
175
+
<BlockToolbar onClose={() => setToolbarState("default")} />
176
+
) : null}
177
+
</div>
178
+
);
179
+
};
180
+
181
+
const HeaderToolbar = (props: { onClose: () => void }) => {
182
+
let state = useTextState();
183
+
184
+
return (
185
+
<div className="flex w-full justify-between items-center">
186
+
<div className="flex items-center gap-[6px]">
187
+
<ToolbarButton
188
+
className="w-10 flex justify-center"
189
+
active
190
+
onClick={() => props.onClose()}
191
+
>
192
+
{state.header === "h1" ? (
193
+
<Header1Small />
194
+
) : state.header === "h2" ? (
195
+
<Header2Small />
196
+
) : state.header === "h3" ? (
197
+
<Header3Small />
198
+
) : (
199
+
<ParagraphSmall />
200
+
)}{" "}
201
+
</ToolbarButton>
202
+
<Separator />
203
+
<ToolbarButton
204
+
onClick={() => state.setHeader("h1")}
205
+
active={state.header === "h1"}
206
+
>
207
+
<Header1Small />
208
+
</ToolbarButton>
209
+
<ToolbarButton
210
+
onClick={() => state.setHeader("h2")}
211
+
active={state.header === "h2"}
212
+
>
213
+
<Header2Small />
214
+
</ToolbarButton>
215
+
<ToolbarButton
216
+
onClick={() => state.setHeader("h3")}
217
+
active={state.header === "h3"}
218
+
>
219
+
<Header3Small />
220
+
</ToolbarButton>
221
+
<ToolbarButton
222
+
onClick={() => state.setHeader("p")}
223
+
active={state.header === "p"}
224
+
className="px-[6px]"
225
+
>
226
+
Paragraph
227
+
</ToolbarButton>
228
+
</div>
229
+
<button onClick={() => props.onClose()}>
230
+
<CloseTiny />
231
+
</button>
232
+
</div>
233
+
);
234
+
};
235
+
236
+
const ListToolbar = (props: { onClose: () => void }) => {
237
+
let state = useTextState();
238
+
239
+
return (
240
+
<div className="flex w-full justify-between items-center">
241
+
<div className="flex items-center gap-[6px]">
242
+
<ToolbarButton
243
+
onClick={() => props.onClose()}
244
+
active={state.list !== "none"}
245
+
>
246
+
{state.list === "ordered" ? (
247
+
<ListOrderedSmall />
248
+
) : (
249
+
<ListUnorderedSmall />
250
+
)}
251
+
</ToolbarButton>
252
+
<Separator />
253
+
<ToolbarButton
254
+
onClick={() => state.setList("unordered")}
255
+
active={state.list === "unordered"}
256
+
>
257
+
<ListUnorderedSmall />
258
+
</ToolbarButton>
259
+
<ToolbarButton
260
+
onClick={() => state.setList("ordered")}
261
+
active={state.list === "ordered"}
262
+
>
263
+
<ListOrderedSmall />
264
+
</ToolbarButton>
265
+
266
+
{/* if there is no list and you click and indent button, then it should create a list */}
267
+
<ToolbarButton>
268
+
<ListIndentIncreaseSmall />
269
+
</ToolbarButton>
270
+
<ToolbarButton>
271
+
<ListIndentDecreaseSmall />
272
+
</ToolbarButton>
273
+
</div>
274
+
<button onClick={() => props.onClose()}>
275
+
<CloseTiny />
276
+
</button>
277
+
</div>
278
+
);
279
+
};
280
+
281
+
const BlockToolbar = (props: { onClose: () => void }) => {
282
+
return (
283
+
<div className="flex w-full justify-between items-center">
284
+
<div className="flex items-center gap-[6px]">
285
+
<ToolbarButton onClick={() => props.onClose()}>
286
+
<BlockSmall />
287
+
</ToolbarButton>
288
+
<Separator />
289
+
<ToolbarButton>
290
+
<BlockImageSmall />
291
+
</ToolbarButton>
292
+
<ToolbarButton>
293
+
<BlockLinkSmall />
294
+
</ToolbarButton>
295
+
<ToolbarButton>
296
+
<BlockCardSmall />
297
+
</ToolbarButton>
298
+
</div>
299
+
<button onClick={() => props.onClose()}>
300
+
<CloseTiny />
301
+
</button>
302
+
</div>
303
+
);
304
+
};
305
+
306
+
const ToolbarButton = (props: {
307
+
textState?: textState;
308
+
setTextState?: (textState: textState) => void;
309
+
className?: string;
310
+
onClick?: () => void;
311
+
children: React.ReactNode;
312
+
active?: boolean;
313
+
}) => {
314
+
return (
315
+
<button
316
+
className={`rounded-md shrink-0 p-0.5 active:bg-accent active:text-accentText ${props.className} ${props.active ? "bg-accent text-accentText" : ""}`}
317
+
onClick={() => {
318
+
props.onClick && props.onClick();
319
+
}}
320
+
>
321
+
{props.children}
322
+
</button>
323
+
);
324
+
};
325
+
326
+
const Separator = () => {
327
+
return <div className="h-6 border-r border-border" />;
328
+
};
+2
-2
app/test/ThemeSetter.tsx
+2
-2
app/test/ThemeSetter.tsx
···
24
24
useState,
25
25
} from "react";
26
26
import { imageArgs } from "./page";
27
-
import { CloseConstrastSmall, ImageSmall } from "components/Icons";
27
+
import { CloseConstrastSmall, BlockImageSmall } from "components/Icons";
28
28
29
29
function setCSSVariableToColor(name: string, value: Color) {
30
30
let colorStringLength = value.toString("rgb").length;
···
372
372
return !bgImageExists ? (
373
373
//replace this with a file picker button
374
374
<div className="flex gap-2 w-full text-border items-center">
375
-
<ImageSmall />
375
+
<BlockImageSmall />
376
376
<input
377
377
className="w-full text-primary bg-transparent border border-border rounded-md"
378
378
type="text"
+3
-6
app/test/page.tsx
+3
-6
app/test/page.tsx
···
4
4
import useMeasure from "react-use-measure";
5
5
import { PageHeader } from "./Header";
6
6
import { Card } from "./Card";
7
+
import { TextToolbar } from "./TextToolbar";
7
8
import useIsMobile from "src/hooks/isMobile";
8
9
9
10
export type imageArgs = {
···
21
22
repeat: true,
22
23
size: 500,
23
24
});
24
-
let [optionsOpen, setOptionsOpen] = useState(false);
25
25
26
26
let isMobile = useIsMobile();
27
-
let isKeyboardUp = false;
27
+
let isKeyboardUp = true;
28
28
29
29
return (
30
30
<div
···
92
92
/>
93
93
</div>
94
94
)}
95
-
96
-
{isMobile && isKeyboardUp && (
97
-
<div>bold italic underline, link, h1, h2, h3, list options</div>
98
-
)}
95
+
{isMobile && isKeyboardUp && <TextToolbar />}
99
96
</div>
100
97
);
101
98
}
+336
-15
components/Icons.tsx
+336
-15
components/Icons.tsx
···
7
7
<svg
8
8
width="32"
9
9
height="32"
10
-
viewBox="0 0 33 32"
10
+
viewBox="0 0 32 32"
11
11
fill="none"
12
12
xmlns="http://www.w3.org/2000/svg"
13
13
{...props}
···
22
22
);
23
23
};
24
24
25
-
export const CloseConstrastSmall = (props: {
26
-
fill: string;
27
-
outline: string;
28
-
}) => {
29
-
// this is a special close (x) icon that has high contrast for use on top of images and noisy backgrounds
25
+
// SMALL ICONS 24X24
26
+
27
+
export const BlockSmall = (props: Props) => {
30
28
return (
31
29
<svg
32
30
width="24"
···
34
32
viewBox="0 0 24 24"
35
33
fill="none"
36
34
xmlns="http://www.w3.org/2000/svg"
35
+
{...props}
37
36
>
38
37
<path
39
38
fillRule="evenodd"
40
39
clipRule="evenodd"
41
-
d="M19.5314 17.2686C20.1562 17.8935 20.1562 18.9065 19.5314 19.5314C18.9065 20.1562 17.8935 20.1562 17.2686 19.5314L12 14.2627L6.73137 19.5314C6.10653 20.1562 5.09347 20.1562 4.46863 19.5314C3.84379 18.9065 3.84379 17.8935 4.46863 17.2686L9.73726 12L4.46863 6.73137C3.84379 6.10653 3.84379 5.09347 4.46863 4.46863C5.09347 3.84379 6.10653 3.84379 6.73137 4.46863L12 9.73726L17.2686 4.46863C17.8935 3.84379 18.9065 3.84379 19.5314 4.46863C20.1562 5.09347 20.1562 6.10653 19.5314 6.73137L14.2627 12L19.5314 17.2686Z"
42
-
fill={props.fill}
40
+
d="M17.2329 1.58252C13.9553 1.58252 12.6494 2.97345 12.6494 4.16664V6.3075L9.18157 5.09245C8.89396 4.99167 8.57464 5.0478 8.33864 5.24061L3.66516 9.05873C3.46175 9.22492 3.34375 9.47368 3.34375 9.73635V16.1692C3.34375 16.5366 3.57323 16.8648 3.91826 16.991L7.56569 18.3247L6.5487 19.7423C6.26482 20.138 6.35632 20.6891 6.75283 20.9718L9.31293 22.7973C9.4766 22.914 9.68641 22.9448 9.87674 22.8802L19.4304 19.6363C20.0673 19.42 20.2359 18.5982 19.7357 18.1485L16.2963 15.0572C16.3304 14.9629 16.3485 14.8623 16.3485 14.7596V13.0722C16.6356 13.1023 16.9315 13.1179 17.2329 13.1179C18.4025 13.1179 19.4886 12.8823 20.3048 12.4863C21.0687 12.1157 21.8165 11.4845 21.8165 10.5982V4.16664C21.8165 2.97345 20.5105 1.58252 17.2329 1.58252ZM13.2375 4.36422C13.4328 4.16896 13.7494 4.16896 13.9446 4.36422C14.0137 4.43333 14.093 4.50817 14.1896 4.58578C14.4049 4.75872 14.4392 5.07344 14.2663 5.28872C14.0933 5.504 13.7786 5.53832 13.5633 5.36538C13.4295 5.25789 13.3226 5.15638 13.2375 5.07133C13.0422 4.87606 13.0422 4.55948 13.2375 4.36422ZM21.0566 4.36422C21.2519 4.55948 21.2519 4.87606 21.0566 5.07133L21.0401 5.08791C20.8234 5.30483 20.4882 5.64039 19.8936 5.91129C19.2898 6.18639 18.4526 6.38105 17.2333 6.38105C16.5197 6.38105 15.9243 6.31441 15.4247 6.20506C15.1549 6.14601 14.9841 5.87946 15.0432 5.60971C15.1022 5.33995 15.3688 5.16914 15.6385 5.22819C16.0588 5.32018 16.5817 5.38105 17.2333 5.38105C18.3472 5.38105 19.0357 5.20325 19.479 5.0013C19.9082 4.80573 20.1389 4.57491 20.3386 4.37513L20.3495 4.36422C20.5448 4.16896 20.8614 4.16896 21.0566 4.36422ZM14.0024 9.38129C14.1776 9.59475 14.1466 9.90981 13.9331 10.085L11.3496 12.2054V12.8902C11.3496 13.1663 11.1257 13.3902 10.8496 13.3902C10.5734 13.3902 10.3496 13.1663 10.3496 12.8902V12.3265L4.4929 10.3254C4.23158 10.2361 4.09213 9.9519 4.18141 9.69059C4.27069 9.42928 4.5549 9.28983 4.81621 9.37911L10.7477 11.4057L13.2987 9.31201C13.5121 9.13682 13.8272 9.16784 14.0024 9.38129ZM13.5425 15.7877C13.702 15.5622 14.014 15.5088 14.2394 15.6683C14.4649 15.8278 14.5183 16.1398 14.3588 16.3652L10.6453 21.6139C10.4858 21.8393 10.1737 21.8927 9.9483 21.7332C9.72288 21.5738 9.66943 21.2617 9.82892 21.0363L13.5425 15.7877ZM15.4809 8.20116C15.6621 8.40952 15.6401 8.72533 15.4318 8.90656L15.1762 9.1289C14.9678 9.31013 14.652 9.28814 14.4708 9.07978C14.2895 8.87143 14.3115 8.55561 14.5199 8.37438L14.7755 8.15205C14.9839 7.97082 15.2997 7.99281 15.4809 8.20116Z"
41
+
fill="currentColor"
43
42
/>
43
+
</svg>
44
+
);
45
+
};
46
+
47
+
export const BlockLinkSmall = (props: Props) => {
48
+
return (
49
+
<svg
50
+
width="24"
51
+
height="24"
52
+
viewBox="0 0 24 24"
53
+
fill="none"
54
+
xmlns="http://www.w3.org/2000/svg"
55
+
{...props}
56
+
>
44
57
<path
45
58
fillRule="evenodd"
46
59
clipRule="evenodd"
47
-
d="M17.2686 4.46863C17.8935 3.84379 18.9065 3.84379 19.5314 4.46863C20.1562 5.09347 20.1562 6.10653 19.5314 6.73137L14.2627 12L19.5314 17.2686C20.1562 17.8935 20.1562 18.9065 19.5314 19.5314C18.9065 20.1562 17.8935 20.1562 17.2686 19.5314L12 14.2627L6.73137 19.5314C6.10653 20.1562 5.09347 20.1562 4.46863 19.5314C3.84379 18.9065 3.84379 17.8935 4.46863 17.2686L9.73726 12L4.46863 6.73137C3.84379 6.10653 3.84379 5.09347 4.46863 4.46863C5.09347 3.84379 6.10653 3.84379 6.73137 4.46863L12 9.73726L17.2686 4.46863ZM12 7.61594L16.208 3.40797C17.4186 2.19734 19.3814 2.19734 20.592 3.40797C21.8027 4.61859 21.8027 6.58141 20.592 7.79203L16.3841 12L20.592 16.208C21.8027 17.4186 21.8027 19.3814 20.592 20.592C19.3814 21.8027 17.4186 21.8027 16.208 20.592L12 16.3841L7.79203 20.592C6.58141 21.8027 4.61859 21.8027 3.40797 20.592C2.19734 19.3814 2.19734 17.4186 3.40797 16.208L7.61594 12L3.40797 7.79203C2.19734 6.5814 2.19734 4.6186 3.40797 3.40797C4.61859 2.19734 6.58141 2.19734 7.79203 3.40797L12 7.61594Z"
48
-
fill={props.outline}
60
+
d="M15.4085 3.24771C16.8348 1.63765 19.2962 1.48867 20.9063 2.91496C22.5163 4.34126 22.6653 6.8027 21.239 8.41276L19.586 10.2788C18.9997 10.9406 18.2385 11.3556 17.4334 11.5157C17.451 11.4903 17.4693 11.4643 17.4884 11.4372C17.6268 11.2407 17.8039 10.9893 18.0195 10.5219C18.1665 10.2031 18.3335 9.6167 18.3711 9.20261L20.0242 7.33657C20.8561 6.39746 20.7692 4.96174 19.8301 4.12982C18.891 3.29789 17.4552 3.38479 16.6233 4.3239L14.9703 6.18994C14.3401 6.90134 14.2371 7.89773 14.6325 8.70073C14.6568 8.75005 14.6827 8.79987 14.7088 8.85011C14.9201 9.256 15.1459 9.69005 14.6398 10.1167C14.1769 10.5069 13.6797 10.2981 13.3085 9.66401C12.4804 8.24978 12.6097 6.40708 13.7554 5.11374L15.4085 3.24771ZM5.42863 8.02634C5.36392 7.61721 5.64313 7.23309 6.05226 7.16838L7.6698 6.91255C8.16603 6.83406 8.28186 6.5253 8.24269 6.18059C8.18957 5.71311 7.80175 5.62612 7.37605 5.69347L5.85698 5.93373C4.76597 6.10628 4.02142 7.13061 4.19398 8.22162L4.26315 8.65896C2.97833 9.25415 2.18882 10.6478 2.42099 12.1157L3.34362 17.9491C3.62403 19.722 5.28855 20.9319 7.06144 20.6515L19.1214 18.7441C20.5704 18.5149 21.6434 17.361 21.8339 15.9791L22.2443 15.9142C23.3353 15.7416 24.0798 14.7173 23.9073 13.6263L23.2848 9.69094C23.2158 9.2542 22.989 8.96931 22.5827 9.03181C22.1722 9.09497 21.9712 9.38671 22.049 9.8786L22.6726 13.8216C22.7373 14.2307 22.4581 14.6148 22.049 14.6795L7.60164 16.9646C7.19252 17.0293 6.8084 16.7501 6.74369 16.3409L5.42863 8.02634ZM20.2175 16.2348L7.79692 18.1992C6.70591 18.3718 5.68159 17.6272 5.50903 16.5362L4.51618 10.2587C4.05555 10.6401 3.80238 11.2479 3.90258 11.8814L4.8252 17.7148C4.97619 18.6694 5.87247 19.3209 6.82711 19.1699L18.8871 17.2625C19.4988 17.1657 19.9861 16.7629 20.2175 16.2348ZM15.0438 13.1276L16.6968 11.2616C17.8785 9.92768 17.9789 8.00936 17.063 6.57949C16.8089 6.18288 16.3689 5.8915 15.8437 6.27834C15.3087 6.67234 15.5667 7.24368 15.7961 7.6258C16.2029 8.30334 16.156 9.4245 15.4819 10.1854L13.8289 12.0514C12.997 12.9906 11.5613 13.0775 10.6221 12.2455C9.68303 11.4136 9.59614 9.97789 10.4281 9.03878L12.0811 7.17274C12.0877 7.12914 12.0933 7.08406 12.0992 7.03631C12.128 6.80481 12.1645 6.5106 12.3605 6.01732C12.6026 5.40783 12.8183 5.12846 12.9709 4.93074C12.9905 4.90536 13.009 4.88133 13.0265 4.85812C12.2186 5.01714 11.4544 5.43262 10.8663 6.09655L9.21321 7.96258C7.78692 9.57264 7.9359 12.0341 9.54596 13.4604C11.156 14.8867 13.6175 14.7377 15.0438 13.1276Z"
61
+
fill="currentColor"
49
62
/>
50
63
</svg>
51
64
);
52
65
};
53
-
export const LinkSmall = (props: Props) => {
66
+
67
+
export const BlockCardSmall = (props: Props) => {
54
68
return (
55
69
<svg
56
70
width="24"
···
63
77
<path
64
78
fillRule="evenodd"
65
79
clipRule="evenodd"
66
-
d="M10.9944 14.5065C10.29 14.9424 9.36549 14.7247 8.92956 14.0203C8.5353 13.3831 8.27082 12.6779 8.14527 11.9476C8.14428 11.9408 8.14316 11.934 8.14189 11.9272C8.14157 11.9255 8.14126 11.9238 8.14094 11.9221C8.10323 11.6968 8.07874 11.4692 8.06772 11.2405C8.01976 9.73471 8.70451 8.25655 9.60818 6.88898C9.61845 6.87344 9.62774 6.85754 9.63606 6.84134L11.5309 3.97381C13.2961 1.30247 16.8926 0.567878 19.5639 2.33306C22.2353 4.09824 22.9698 7.69475 21.2047 10.3661L18.6958 14.1628C17.971 15.2598 16.9362 16.0301 15.7857 16.4348C16.5521 15.028 17.0741 13.418 16.7583 11.7242C16.755 11.7065 16.7508 11.6892 16.7457 11.6723L18.7017 8.7122C19.5535 7.42318 19.199 5.68774 17.91 4.83598C16.621 3.98422 14.8856 4.33869 14.0338 5.6277L11.525 9.42446C10.9051 10.3625 10.9224 11.5395 11.4806 12.4416C11.9166 13.1461 11.6989 14.0705 10.9944 14.5065ZM15.8503 12.6271C15.808 11.637 15.513 10.6659 14.9871 9.81599C14.5511 9.11153 13.6267 8.89384 12.9222 9.32977C12.2178 9.76569 12.0001 10.6902 12.436 11.3946C12.9942 12.2967 13.0115 13.4738 12.3917 14.4118L9.88282 18.2085C9.03106 19.4975 7.29562 19.852 6.00661 19.0003C4.7176 18.1485 4.36313 16.4131 5.21489 15.124L7.17152 12.163C7.16642 12.1459 7.16217 12.1284 7.15884 12.1106C6.8431 10.4174 7.36463 8.80798 8.13058 7.40157C6.98019 7.80633 5.94554 8.57659 5.2208 9.67339L2.71196 13.4701C0.946784 16.1415 1.68137 19.738 4.35272 21.5032C7.02406 23.2684 10.6206 22.5338 12.3857 19.8624L14.2794 16.9966C14.2882 16.9793 14.298 16.9623 14.3089 16.9458C15.206 15.5882 15.8874 14.1216 15.8503 12.6271ZM19.9944 9.42905C19.8422 9.65944 19.9056 9.96962 20.1359 10.1219C20.3663 10.2741 20.6765 10.2107 20.8287 9.98035C21.8023 8.50704 21.8655 6.69661 21.1786 5.1692C20.9467 4.65351 20.6291 4.16898 20.2313 3.7388C20.0438 3.53605 19.7275 3.52366 19.5247 3.71114C19.322 3.89861 19.3096 4.21495 19.4971 4.4177C19.8208 4.76785 20.0787 5.16145 20.2666 5.57934C20.8244 6.81975 20.764 8.2644 19.9944 9.42905ZM18.6411 2.57707C18.3782 2.49262 18.0966 2.63729 18.0121 2.9002C17.9277 3.16311 18.0723 3.4447 18.3353 3.52916C18.3574 3.53628 18.3757 3.54295 18.4798 3.60382C18.7181 3.74329 19.0244 3.66314 19.1638 3.4248C19.3033 3.18646 19.2231 2.88019 18.9848 2.74073C18.8742 2.67602 18.7753 2.62019 18.6411 2.57707ZM4.02662 14.4183C4.17886 14.1879 4.1155 13.8777 3.88512 13.7255C3.65473 13.5732 3.34455 13.6366 3.19231 13.867C2.07685 15.5551 2.13477 17.6756 3.14551 19.3109C3.29069 19.5458 3.5988 19.6185 3.8337 19.4734C4.0686 19.3282 4.14133 19.0201 3.99615 18.7852C3.17649 17.459 3.14015 15.7598 4.02662 14.4183ZM5.03558 19.9447C4.81966 19.7726 4.50508 19.8081 4.33293 20.024C4.16078 20.2399 4.19627 20.5545 4.41219 20.7266C4.50617 20.8016 4.63468 20.8863 4.75688 20.9553C4.99737 21.091 5.30235 21.0061 5.43808 20.7656C5.5738 20.5251 5.48888 20.2202 5.2484 20.0844C5.16214 20.0358 5.07971 19.9799 5.03558 19.9447Z"
80
+
d="M19.3432 4.72556L4.8959 7.01059C4.48678 7.0753 4.20757 7.45942 4.27228 7.86855L5.58733 16.1831C5.65204 16.5923 6.03616 16.8715 6.44529 16.8068L20.8926 14.5217C21.3018 14.457 21.581 14.0729 21.5163 13.6638L20.2012 5.34919C20.1365 4.94006 19.7524 4.66086 19.3432 4.72556ZM4.70063 5.77594C3.60962 5.94849 2.86507 6.97282 3.03762 8.06382L3.10679 8.50114C1.82204 9.09635 1.03258 10.4899 1.26474 11.9578L2.18737 17.7912C2.46778 19.5641 4.1323 20.774 5.90519 20.4936L17.9651 18.5862C19.4142 18.357 20.4871 17.2032 20.6776 15.8213L21.0879 15.7564C22.1789 15.5838 22.9235 14.5595 22.7509 13.4685L21.4359 5.15392C21.2633 4.06291 20.239 3.31836 19.148 3.49091L4.70063 5.77594ZM2.74633 11.7235C2.64614 11.0901 2.89926 10.4823 3.35982 10.101L4.35268 16.3784C4.52524 17.4694 5.54955 18.214 6.64056 18.0414L19.0612 16.0769C18.8298 16.605 18.3426 17.0079 17.7308 17.1046L5.67086 19.012C4.71622 19.163 3.81994 18.5115 3.66895 17.5569L2.74633 11.7235ZM7.16645 8.26063C6.75739 8.32578 6.4786 8.71021 6.54375 9.11926C6.6089 9.52832 6.99333 9.80711 7.40238 9.74196L14.0599 8.6816C14.469 8.61645 14.7478 8.23202 14.6826 7.82297C14.6175 7.41391 14.2331 7.13512 13.824 7.20027L7.16645 8.26063ZM7.20493 11.6341C7.1615 11.3614 7.34736 11.1051 7.62006 11.0617L17.9357 9.41867C18.2084 9.37524 18.4647 9.5611 18.5082 9.8338C18.5516 10.1065 18.3657 10.3628 18.093 10.4062L7.77735 12.0492C7.50465 12.0927 7.24836 11.9068 7.20493 11.6341ZM7.97455 13.6159C7.70185 13.6593 7.51599 13.9156 7.55942 14.1883C7.60286 14.461 7.85914 14.6469 8.13184 14.6034L18.4475 12.9604C18.7202 12.917 18.9061 12.6607 18.8626 12.388C18.8192 12.1153 18.5629 11.9294 18.2902 11.9729L7.97455 13.6159Z"
67
81
fill="currentColor"
68
82
/>
69
83
</svg>
70
84
);
71
85
};
72
86
73
-
export const ImageSmall = (props: Props) => {
87
+
export const BlockImageSmall = (props: Props) => {
74
88
return (
75
89
<svg
76
90
width="24"
···
89
103
</svg>
90
104
);
91
105
};
92
-
export const CardSmall = (props: Props) => {
106
+
107
+
export const CloseConstrastSmall = (props: {
108
+
fill: string;
109
+
outline: string;
110
+
}) => {
111
+
// this is a special close (x) icon that has high contrast for use on top of images and noisy backgrounds
112
+
return (
113
+
<svg
114
+
width="24"
115
+
height="24"
116
+
viewBox="0 0 24 24"
117
+
fill="none"
118
+
xmlns="http://www.w3.org/2000/svg"
119
+
>
120
+
<path
121
+
fillRule="evenodd"
122
+
clipRule="evenodd"
123
+
d="M19.5314 17.2686C20.1562 17.8935 20.1562 18.9065 19.5314 19.5314C18.9065 20.1562 17.8935 20.1562 17.2686 19.5314L12 14.2627L6.73137 19.5314C6.10653 20.1562 5.09347 20.1562 4.46863 19.5314C3.84379 18.9065 3.84379 17.8935 4.46863 17.2686L9.73726 12L4.46863 6.73137C3.84379 6.10653 3.84379 5.09347 4.46863 4.46863C5.09347 3.84379 6.10653 3.84379 6.73137 4.46863L12 9.73726L17.2686 4.46863C17.8935 3.84379 18.9065 3.84379 19.5314 4.46863C20.1562 5.09347 20.1562 6.10653 19.5314 6.73137L14.2627 12L19.5314 17.2686Z"
124
+
fill={props.fill}
125
+
/>
126
+
<path
127
+
fillRule="evenodd"
128
+
clipRule="evenodd"
129
+
d="M17.2686 4.46863C17.8935 3.84379 18.9065 3.84379 19.5314 4.46863C20.1562 5.09347 20.1562 6.10653 19.5314 6.73137L14.2627 12L19.5314 17.2686C20.1562 17.8935 20.1562 18.9065 19.5314 19.5314C18.9065 20.1562 17.8935 20.1562 17.2686 19.5314L12 14.2627L6.73137 19.5314C6.10653 20.1562 5.09347 20.1562 4.46863 19.5314C3.84379 18.9065 3.84379 17.8935 4.46863 17.2686L9.73726 12L4.46863 6.73137C3.84379 6.10653 3.84379 5.09347 4.46863 4.46863C5.09347 3.84379 6.10653 3.84379 6.73137 4.46863L12 9.73726L17.2686 4.46863ZM12 7.61594L16.208 3.40797C17.4186 2.19734 19.3814 2.19734 20.592 3.40797C21.8027 4.61859 21.8027 6.58141 20.592 7.79203L16.3841 12L20.592 16.208C21.8027 17.4186 21.8027 19.3814 20.592 20.592C19.3814 21.8027 17.4186 21.8027 16.208 20.592L12 16.3841L7.79203 20.592C6.58141 21.8027 4.61859 21.8027 3.40797 20.592C2.19734 19.3814 2.19734 17.4186 3.40797 16.208L7.61594 12L3.40797 7.79203C2.19734 6.5814 2.19734 4.6186 3.40797 3.40797C4.61859 2.19734 6.58141 2.19734 7.79203 3.40797L12 7.61594Z"
130
+
fill={props.outline}
131
+
/>
132
+
</svg>
133
+
);
134
+
};
135
+
136
+
export const LinkSmall = (props: Props) => {
93
137
return (
94
138
<svg
95
139
width="24"
···
102
146
<path
103
147
fillRule="evenodd"
104
148
clipRule="evenodd"
105
-
d="M19.3432 4.72556L4.8959 7.01059C4.48678 7.0753 4.20757 7.45942 4.27228 7.86855L5.58733 16.1831C5.65204 16.5923 6.03616 16.8715 6.44529 16.8068L20.8926 14.5217C21.3018 14.457 21.581 14.0729 21.5163 13.6638L20.2012 5.34919C20.1365 4.94006 19.7524 4.66086 19.3432 4.72556ZM4.70063 5.77594C3.60962 5.94849 2.86507 6.97282 3.03762 8.06382L3.10679 8.50114C1.82204 9.09635 1.03258 10.4899 1.26474 11.9578L2.18737 17.7912C2.46778 19.5641 4.1323 20.774 5.90519 20.4936L17.9651 18.5862C19.4142 18.357 20.4871 17.2032 20.6776 15.8213L21.0879 15.7564C22.1789 15.5838 22.9235 14.5595 22.7509 13.4685L21.4359 5.15392C21.2633 4.06291 20.239 3.31836 19.148 3.49091L4.70063 5.77594ZM2.74633 11.7235C2.64614 11.0901 2.89926 10.4823 3.35982 10.101L4.35268 16.3784C4.52524 17.4694 5.54955 18.214 6.64056 18.0414L19.0612 16.0769C18.8298 16.605 18.3426 17.0079 17.7308 17.1046L5.67086 19.012C4.71622 19.163 3.81994 18.5115 3.66895 17.5569L2.74633 11.7235ZM7.16645 8.26063C6.75739 8.32578 6.4786 8.71021 6.54375 9.11926C6.6089 9.52832 6.99333 9.80711 7.40238 9.74196L14.0599 8.6816C14.469 8.61645 14.7478 8.23202 14.6826 7.82297C14.6175 7.41391 14.2331 7.13512 13.824 7.20027L7.16645 8.26063ZM7.20493 11.6341C7.1615 11.3614 7.34736 11.1051 7.62006 11.0617L17.9357 9.41867C18.2084 9.37524 18.4647 9.5611 18.5082 9.8338C18.5516 10.1065 18.3657 10.3628 18.093 10.4062L7.77735 12.0492C7.50465 12.0927 7.24836 11.9068 7.20493 11.6341ZM7.97455 13.6159C7.70185 13.6593 7.51599 13.9156 7.55942 14.1883C7.60286 14.461 7.85914 14.6469 8.13184 14.6034L18.4475 12.9604C18.7202 12.917 18.9061 12.6607 18.8626 12.388C18.8192 12.1153 18.5629 11.9294 18.2902 11.9729L7.97455 13.6159Z"
149
+
d="M11.1029 14.6945C10.4473 15.1079 9.58691 14.9014 9.1812 14.2335C8.81427 13.6294 8.56812 12.9607 8.45127 12.2682C8.45036 12.2618 8.44931 12.2553 8.44813 12.2489C8.44783 12.2473 8.44754 12.2457 8.44724 12.244C8.41215 12.0304 8.38935 11.8146 8.3791 11.5977C8.33447 10.1699 8.97175 8.76834 9.81277 7.47161C9.82233 7.45687 9.83098 7.44179 9.83872 7.42643L11.6022 4.70744C13.245 2.17447 16.5922 1.47793 19.0784 3.15167C21.5645 4.82542 22.2482 8.23563 20.6054 10.7686L18.2705 14.3687C17.5959 15.4088 16.6328 16.1392 15.562 16.523C16.2753 15.189 16.7612 13.6624 16.4672 12.0564C16.4642 12.0396 16.4603 12.0232 16.4556 12.0072L18.276 9.20038C19.0687 7.97813 18.7388 6.33259 17.5391 5.52495C16.3395 4.71731 14.7243 5.05341 13.9316 6.27566L11.5967 9.87575C11.0198 10.7652 11.0359 11.8812 11.5554 12.7366C11.9611 13.4046 11.7585 14.2812 11.1029 14.6945ZM15.6222 12.9125C15.5828 11.9737 15.3083 11.0529 14.8188 10.247C14.4131 9.57903 13.5527 9.37261 12.8971 9.78596C12.2415 10.1993 12.0389 11.0759 12.4446 11.7438C12.9641 12.5992 12.9802 13.7153 12.4033 14.6047L10.0684 18.2048C9.27566 19.4271 7.66052 19.7632 6.46086 18.9555C5.2612 18.1479 4.93131 16.5023 5.72402 15.2801L7.54502 12.4724C7.54028 12.4562 7.53632 12.4397 7.53322 12.4227C7.23936 10.8173 7.72475 9.29119 8.4376 7.95764C7.36696 8.34143 6.40403 9.0718 5.72952 10.1118L3.3946 13.7119C1.75178 16.2448 2.43545 19.6551 4.92162 21.3288C7.40778 23.0025 10.755 22.306 12.3978 19.773L14.1602 17.0556C14.1684 17.0392 14.1775 17.0232 14.1877 17.0075C15.0226 15.7202 15.6567 14.3295 15.6222 12.9125ZM19.4791 9.8801C19.3374 10.0986 19.3963 10.3927 19.6108 10.537C19.8252 10.6814 20.1139 10.6213 20.2555 10.4028C21.1616 9.00585 21.2204 7.2892 20.5812 5.84091C20.3653 5.35193 20.0697 4.8925 19.6995 4.4846C19.525 4.29235 19.2306 4.2806 19.0419 4.45837C18.8532 4.63613 18.8417 4.93609 19.0162 5.12833C19.3175 5.46034 19.5575 5.83356 19.7324 6.2298C20.2515 7.40596 20.1953 8.77578 19.4791 9.8801ZM18.2195 3.38305C17.9748 3.30297 17.7128 3.44014 17.6342 3.68944C17.5556 3.93873 17.6902 4.20574 17.9349 4.28582C17.9555 4.29257 17.9726 4.2989 18.0694 4.35661C18.2912 4.48885 18.5762 4.41285 18.706 4.18686C18.8358 3.96087 18.7612 3.67047 18.5394 3.53823C18.4365 3.47687 18.3445 3.42393 18.2195 3.38305ZM4.61813 14.6109C4.75981 14.3924 4.70085 14.0983 4.48643 13.954C4.27201 13.8096 3.98333 13.8697 3.84165 14.0881C2.80351 15.6888 2.85742 17.6994 3.79809 19.2501C3.93321 19.4728 4.21996 19.5418 4.43858 19.4041C4.65719 19.2665 4.72488 18.9743 4.58977 18.7516C3.82692 17.4941 3.79311 15.8829 4.61813 14.6109ZM5.55715 19.8511C5.3562 19.6878 5.06342 19.7215 4.9032 19.9262C4.74299 20.1309 4.77601 20.4292 4.97696 20.5925C5.06444 20.6635 5.18404 20.7439 5.29777 20.8093C5.52158 20.938 5.80542 20.8575 5.93174 20.6295C6.05806 20.4014 5.97903 20.1122 5.75521 19.9835C5.67493 19.9374 5.59821 19.8844 5.55715 19.8511Z"
106
150
fill="currentColor"
107
151
/>
108
152
</svg>
···
128
172
</svg>
129
173
);
130
174
};
175
+
176
+
// TINY ICONS 16x16
131
177
132
178
export const CloseTiny = (props: Props) => {
133
179
return (
···
168
214
</svg>
169
215
);
170
216
};
217
+
218
+
// Text Toolbar Icons h:24px, w: variable
219
+
220
+
export const UndoSmall = (props: Props) => {
221
+
return (
222
+
<svg
223
+
width="24"
224
+
height="24"
225
+
viewBox="0 0 24 24"
226
+
fill="none"
227
+
xmlns="http://www.w3.org/2000/svg"
228
+
{...props}
229
+
>
230
+
<path
231
+
fillRule="evenodd"
232
+
clipRule="evenodd"
233
+
d="M8.13949 5.17586C8.53001 4.78533 8.53001 4.15217 8.13949 3.76164C7.74897 3.37112 7.1158 3.37112 6.72528 3.76164L2.78076 7.70616L6.72528 11.6507C7.1158 12.0412 7.74897 12.0412 8.13949 11.6507C8.53001 11.2601 8.53001 10.627 8.13949 10.2365L6.60933 8.7063H14.1598C16.0894 8.7063 17.221 9.17118 17.8647 9.7593C18.4949 10.335 18.8046 11.1639 18.8046 12.2285C18.8046 13.2209 18.441 14.0478 17.707 14.6471C16.9511 15.2643 15.6989 15.7221 13.7911 15.7221H9.42379C8.87151 15.7221 8.42379 16.1698 8.42379 16.7221C8.42379 17.2743 8.87151 17.7221 9.42379 17.7221H13.7911C15.9944 17.7221 17.7489 17.1949 18.9719 16.1962C20.217 15.1796 20.8046 13.7597 20.8046 12.2285C20.8046 10.7694 20.3679 9.33716 19.2137 8.28273C18.0731 7.24068 16.3823 6.7063 14.1598 6.7063H6.60905L8.13949 5.17586Z"
234
+
fill="currentColor"
235
+
/>
236
+
</svg>
237
+
);
238
+
};
239
+
240
+
export const RedoSmall = (props: Props) => {
241
+
return (
242
+
<svg
243
+
width="24"
244
+
height="24"
245
+
viewBox="0 0 24 24"
246
+
fill="none"
247
+
xmlns="http://www.w3.org/2000/svg"
248
+
{...props}
249
+
>
250
+
<path
251
+
fillRule="evenodd"
252
+
clipRule="evenodd"
253
+
d="M15.8605 5.17586C15.47 4.78533 15.47 4.15217 15.8605 3.76164C16.251 3.37112 16.8842 3.37112 17.2747 3.76164L21.2192 7.70616L17.2747 11.6507C16.8842 12.0412 16.251 12.0412 15.8605 11.6507C15.47 11.2601 15.47 10.627 15.8605 10.2365L17.3907 8.7063H9.84018C7.9106 8.7063 6.77903 9.17118 6.13528 9.7593C5.50508 10.335 5.19542 11.1639 5.19542 12.2285C5.19542 13.2209 5.55903 14.0478 6.29299 14.6471C7.04893 15.2643 8.30115 15.7221 10.2089 15.7221H14.5762C15.1285 15.7221 15.5762 16.1698 15.5762 16.7221C15.5762 17.2743 15.1285 17.7221 14.5762 17.7221H10.2089C8.00564 17.7221 6.25111 17.1949 5.02806 16.1962C3.78304 15.1796 3.19542 13.7597 3.19542 12.2285C3.19542 10.7694 3.63213 9.33716 4.7863 8.28273C5.92692 7.24068 7.61773 6.7063 9.84018 6.7063H17.391L15.8605 5.17586Z"
254
+
fill="currentColor"
255
+
/>
256
+
</svg>
257
+
);
258
+
};
259
+
260
+
export const BoldSmall = (props: Props) => {
261
+
return (
262
+
<svg
263
+
width="24"
264
+
height="24"
265
+
viewBox="0 0 24 24"
266
+
fill="none"
267
+
xmlns="http://www.w3.org/2000/svg"
268
+
{...props}
269
+
>
270
+
<path
271
+
d="M6.57305 19.5446C6.46259 19.5446 6.37305 19.4551 6.37305 19.3446V4.65557C6.37305 4.54511 6.46259 4.45557 6.57305 4.45557H12.4087C13.4845 4.45557 14.3542 4.67212 15.0178 5.10523C15.6814 5.53136 16.1669 6.06925 16.4743 6.71892C16.7817 7.36859 16.9354 8.02524 16.9354 8.68888C16.9354 9.53415 16.7433 10.2362 16.3591 10.7951C16.209 11.0173 16.0364 11.2103 15.8411 11.374C15.7148 11.4798 15.7334 11.6973 15.8781 11.7759C16.3012 12.0058 16.6467 12.3145 16.9144 12.7021C17.3894 13.3798 17.627 14.1377 17.627 14.976C17.627 15.8771 17.4593 16.67 17.124 17.3546C16.7957 18.0392 16.2927 18.5771 15.6151 18.9683C14.9375 19.3525 14.0852 19.5446 13.0583 19.5446H6.57305ZM9.26511 16.6621C9.26511 16.7726 9.35465 16.8621 9.46511 16.8621H12.7649C13.1491 16.8621 13.4914 16.7818 13.7918 16.6211C14.0922 16.4534 14.3262 16.2229 14.4939 15.9295C14.6685 15.6291 14.7558 15.2764 14.7558 14.8712C14.7558 14.5149 14.6825 14.1971 14.5358 13.9176C14.3891 13.6382 14.1656 13.4182 13.8652 13.2575C13.5718 13.0898 13.205 13.006 12.7649 13.006H9.46511C9.35466 13.006 9.26511 13.0956 9.26511 13.206V16.6621ZM9.26511 10.1445C9.26511 10.2549 9.35465 10.3445 9.46511 10.3445H12.3667C12.6881 10.3445 12.9745 10.2886 13.226 10.1768C13.4775 10.0651 13.6766 9.89391 13.8233 9.66338C13.97 9.42587 14.0433 9.12199 14.0433 8.75175C14.0433 8.2907 13.9001 7.90299 13.6137 7.58864C13.3273 7.27428 12.9116 7.1171 12.3667 7.1171H9.46511C9.35465 7.1171 9.26511 7.20665 9.26511 7.3171V10.1445Z"
272
+
fill="currentColor"
273
+
/>
274
+
</svg>
275
+
);
276
+
};
277
+
278
+
export const ItalicSmall = (props: Props) => {
279
+
return (
280
+
<svg
281
+
width="24"
282
+
height="24"
283
+
viewBox="0 0 24 24"
284
+
fill="none"
285
+
xmlns="http://www.w3.org/2000/svg"
286
+
{...props}
287
+
>
288
+
<path
289
+
d="M16.5405 4.29297H8.94642C8.84899 4.29297 8.76575 4.36316 8.74929 4.45919L8.47218 6.07615C8.45124 6.19833 8.54535 6.30993 8.66931 6.30993H11.1682C11.2917 6.30993 11.3856 6.42064 11.3656 6.54243L9.55711 17.5225C9.5412 17.6191 9.45768 17.69 9.35977 17.69H6.73484C6.63743 17.69 6.55419 17.7602 6.53772 17.8562L6.26156 19.4656C6.24059 19.5877 6.3347 19.6994 6.45868 19.6994H14.0711C14.1686 19.6994 14.2519 19.6291 14.2682 19.5329L14.542 17.9236C14.5628 17.8014 14.4687 17.69 14.3449 17.69H11.8282C11.7047 17.69 11.6107 17.5792 11.6308 17.4574L13.445 6.47733C13.4609 6.38076 13.5444 6.30993 13.6423 6.30993H16.2664C16.364 6.30993 16.4473 6.23954 16.4636 6.14335L16.7377 4.52639C16.7584 4.40432 16.6643 4.29297 16.5405 4.29297Z"
290
+
fill="currentColor"
291
+
/>
292
+
</svg>
293
+
);
294
+
};
295
+
296
+
export const UnderlineSmall = (props: Props) => {
297
+
return (
298
+
<svg
299
+
width="24"
300
+
height="24"
301
+
viewBox="0 0 24 24"
302
+
fill="none"
303
+
xmlns="http://www.w3.org/2000/svg"
304
+
{...props}
305
+
>
306
+
<path
307
+
fillRule="evenodd"
308
+
clipRule="evenodd"
309
+
d="M17.363 4.61699C17.363 4.50654 17.2734 4.41699 17.163 4.41699H15.5193C15.4088 4.41699 15.3193 4.50653 15.3193 4.61699V12.2917C15.3193 12.9026 15.1852 13.4454 14.9171 13.9201C14.6534 14.3948 14.2711 14.7684 13.77 15.0408C13.2734 15.3089 12.6822 15.443 11.9966 15.443C11.3154 15.443 10.7264 15.3089 10.2298 15.0408C9.73316 14.7684 9.34859 14.3948 9.0761 13.9201C8.808 13.4454 8.67395 12.9026 8.67395 12.2917V4.61699C8.67395 4.50654 8.58441 4.41699 8.47395 4.41699H6.83684C6.72638 4.41699 6.63684 4.50654 6.63684 4.61699V12.4565C6.63684 13.4015 6.85879 14.2387 7.30269 14.9683C7.74659 15.6935 8.37069 16.2649 9.17499 16.6824C9.97928 17.0955 10.9198 17.3021 11.9966 17.3021C13.0778 17.3021 14.0205 17.0955 14.8248 16.6824C15.6291 16.2649 16.2532 15.6935 16.6971 14.9683C17.141 14.2387 17.363 13.4015 17.363 12.4565V4.61699ZM5.88525 19.8021C5.88525 19.9126 5.9748 20.0021 6.08525 20.0021H17.915C18.0254 20.0021 18.115 19.9126 18.115 19.8021V18.5296C18.115 18.4191 18.0254 18.3296 17.915 18.3296H6.08525C5.9748 18.3296 5.88525 18.4191 5.88525 18.5296V19.8021Z"
310
+
fill="currentColor"
311
+
/>
312
+
</svg>
313
+
);
314
+
};
315
+
316
+
export const LinkTextToolbarSmall = (props: Props) => {
317
+
return (
318
+
<svg
319
+
width="24"
320
+
height="24"
321
+
viewBox="0 0 24 24"
322
+
fill="none"
323
+
xmlns="http://www.w3.org/2000/svg"
324
+
{...props}
325
+
>
326
+
<path
327
+
fillRule="evenodd"
328
+
clipRule="evenodd"
329
+
d="M17.8125 3.92454C15.5169 2.52852 12.5243 3.25775 11.1283 5.55333L9.5103 8.21387C8.3889 10.0579 8.63885 12.3517 9.97045 13.9064C10.5675 14.6034 11.225 14.7498 11.7074 14.1675C12.2349 13.5307 11.8609 13.0473 11.5113 12.5952C11.468 12.5392 11.425 12.4838 11.3843 12.4285C10.7201 11.5292 10.6256 10.2815 11.2424 9.26723L12.8604 6.60669C13.6747 5.26772 15.4202 4.84237 16.7592 5.65665C18.0981 6.47092 18.5235 8.21646 17.7092 9.55543L16.0912 12.216C16.1369 12.7333 16.0617 13.4912 15.9517 13.9157C15.7904 14.538 15.6285 14.8863 15.502 15.1586C15.4845 15.1961 15.4678 15.2322 15.4517 15.2674C16.4058 14.8919 17.2495 14.2129 17.8233 13.2693L19.4413 10.6088C20.8373 8.3132 20.1081 5.32057 17.8125 3.92454ZM12.8718 17.7788L14.4898 15.1182C15.6464 13.2164 15.3442 10.836 13.9011 9.28159C13.5008 8.85043 12.8953 8.58987 12.3355 9.18193C11.7653 9.78495 12.2092 10.43 12.576 10.8488C13.2264 11.5914 13.4175 12.98 12.7577 14.0649L11.1397 16.7254C10.3255 18.0644 8.57993 18.4897 7.24096 17.6755C5.902 16.8612 5.47665 15.1156 6.29092 13.7767L7.9089 11.1161C7.90733 11.0611 7.90421 11.0044 7.90091 10.9444C7.88489 10.6535 7.86453 10.2837 7.99595 9.63388C8.15834 8.83095 8.36147 8.43969 8.50523 8.16278C8.52368 8.12724 8.54115 8.09358 8.55743 8.06118C7.59961 8.43591 6.75246 9.11618 6.17679 10.0628L4.55882 12.7233C3.16279 15.0189 3.89203 18.0115 6.18761 19.4076C8.48319 20.8036 11.4758 20.0744 12.8718 17.7788Z"
330
+
fill="currentColor"
331
+
/>
332
+
</svg>
333
+
);
334
+
};
335
+
336
+
export const Header1Small = (props: Props) => {
337
+
return (
338
+
<svg
339
+
width="32"
340
+
height="24"
341
+
viewBox="0 0 32 24"
342
+
fill="none"
343
+
xmlns="http://www.w3.org/2000/svg"
344
+
{...props}
345
+
>
346
+
<path
347
+
fillRule="evenodd"
348
+
clipRule="evenodd"
349
+
d="M20.4248 17.3449C20.3246 17.3572 20.2493 17.4423 20.2493 17.5434V19.0583C20.2493 19.1688 20.3388 19.2583 20.4493 19.2583H28.2973C28.4078 19.2583 28.4973 19.1688 28.4973 19.0583V17.5434C28.4973 17.4423 28.422 17.3572 28.3217 17.3449L26.1504 17.0778C26.0502 17.0654 25.9749 16.9803 25.9749 16.8792V4.92194C25.9749 4.79776 25.8629 4.70359 25.7405 4.72491L20.3949 5.6562C20.2992 5.67288 20.2292 5.75601 20.2292 5.85323V7.2876C20.2292 7.39775 20.3183 7.48717 20.4285 7.4876L22.5725 7.49604C22.6827 7.49648 22.7717 7.58589 22.7717 7.69604V16.8792C22.7717 16.9803 22.6964 17.0654 22.5961 17.0778L20.4248 17.3449ZM4.82378 4.71289C4.71332 4.71289 4.62378 4.80243 4.62378 4.91289V19.0583C4.62378 19.1688 4.71332 19.2583 4.82378 19.2583H7.69082C7.80128 19.2583 7.89082 19.1688 7.89082 19.0583V13.5208C7.89082 13.4104 7.98037 13.3208 8.09082 13.3208H13.7065C13.8169 13.3208 13.9065 13.4104 13.9065 13.5208V19.0583C13.9065 19.1688 13.996 19.2583 14.1065 19.2583H16.9735C17.084 19.2583 17.1735 19.1688 17.1735 19.0583V4.91289C17.1735 4.80243 17.084 4.71289 16.9735 4.71289H14.1065C13.996 4.71289 13.9065 4.80243 13.9065 4.91289V10.4433C13.9065 10.5537 13.8169 10.6433 13.7065 10.6433H8.09082C7.98037 10.6433 7.89082 10.5537 7.89082 10.4433V4.91289C7.89082 4.80243 7.80128 4.71289 7.69082 4.71289H4.82378Z"
350
+
fill="currentColor"
351
+
/>
352
+
</svg>
353
+
);
354
+
};
355
+
356
+
export const Header2Small = (props: Props) => {
357
+
return (
358
+
<svg
359
+
width="32"
360
+
height="24"
361
+
viewBox="0 0 32 24"
362
+
fill="none"
363
+
xmlns="http://www.w3.org/2000/svg"
364
+
{...props}
365
+
>
366
+
<path
367
+
fillRule="evenodd"
368
+
clipRule="evenodd"
369
+
d="M18.7023 17.4603C18.6687 17.4972 18.6501 17.5452 18.6501 17.5951V18.8315C18.6501 18.942 18.7397 19.0315 18.8501 19.0315H27.6383C27.7488 19.0315 27.8383 18.942 27.8383 18.8315V16.0037C27.8383 15.8933 27.7488 15.8037 27.6383 15.8037H26.1823C26.0793 15.8037 25.9931 15.8819 25.9832 15.9844L25.8754 17.0988C25.8654 17.2013 25.7793 17.2795 25.6763 17.2795H21.5426C21.5266 17.2795 21.5122 17.2698 21.5062 17.2549V17.2549C21.5006 17.2409 21.5036 17.2249 21.5138 17.2138L24.7248 13.7375C25.3215 13.0964 25.8166 12.5125 26.2102 11.9856C26.6101 11.4524 26.9084 10.9382 27.1052 10.4431C27.3083 9.948 27.4099 9.43701 27.4099 8.91016C27.4099 8.13574 27.2321 7.45337 26.8767 6.86304C26.5212 6.27271 26.0166 5.80933 25.3628 5.4729C24.7089 5.13647 23.9282 4.96826 23.0205 4.96826C22.0683 4.96826 21.2463 5.15869 20.5544 5.53955C19.8625 5.92041 19.3325 6.43774 18.9643 7.09155C18.604 7.74257 18.4326 8.47225 18.4499 9.2806C18.4501 9.28749 18.4513 9.29434 18.4534 9.30087V9.30087C18.4629 9.3291 18.4893 9.34814 18.519 9.34814H20.4687C20.5791 9.34814 20.6682 9.25844 20.6727 9.14808C20.7029 8.41863 20.9015 7.84421 21.2685 7.4248C21.6684 6.96777 22.2365 6.73926 22.9729 6.73926C23.6711 6.73926 24.2043 6.95508 24.5725 7.38672C24.947 7.81836 25.1342 8.34839 25.1342 8.97681C25.1342 9.31958 25.0739 9.65918 24.9533 9.99561C24.8391 10.3257 24.6391 10.697 24.3535 11.1096C24.0678 11.5159 23.6743 11.9983 23.1728 12.5569L18.7023 17.4603ZM5.05474 5.21338C4.94428 5.21338 4.85474 5.30292 4.85474 5.41338V18.8316C4.85474 18.942 4.94428 19.0316 5.05474 19.0316H6.73961C6.85007 19.0316 6.93961 18.942 6.93961 18.8316V13.2063C6.93961 13.0959 7.02915 13.0063 7.13961 13.0063H13.6285C13.7389 13.0063 13.8285 13.0959 13.8285 13.2063V18.8316C13.8285 18.942 13.918 19.0316 14.0285 19.0316H15.7201C15.8305 19.0316 15.9201 18.942 15.9201 18.8316V5.41338C15.9201 5.30292 15.8305 5.21338 15.7201 5.21338H14.0285C13.918 5.21338 13.8285 5.30292 13.8285 5.41338V11.0184C13.8285 11.1288 13.7389 11.2184 13.6285 11.2184H7.13961C7.02915 11.2184 6.93961 11.1288 6.93961 11.0184V5.41338C6.93961 5.30292 6.85007 5.21338 6.73961 5.21338H5.05474Z"
370
+
fill="currentColor"
371
+
/>
372
+
</svg>
373
+
);
374
+
};
375
+
376
+
export const Header3Small = (props: Props) => {
377
+
return (
378
+
<svg
379
+
width="32"
380
+
height="24"
381
+
viewBox="0 0 32 24"
382
+
fill="none"
383
+
xmlns="http://www.w3.org/2000/svg"
384
+
{...props}
385
+
>
386
+
<path
387
+
fillRule="evenodd"
388
+
clipRule="evenodd"
389
+
d="M19.5185 18.2898C20.1108 18.5796 20.8075 18.7245 21.6087 18.7245C22.4311 18.7245 23.1768 18.5732 23.8459 18.2707C24.5149 17.9638 25.0646 17.5377 25.495 16.9923C25.9297 16.4468 26.1981 15.8182 26.3004 15.1066C26.4283 14.2799 26.294 13.5704 25.8977 12.978C25.5115 12.3903 24.9205 12.0093 24.1247 11.8352C24.1038 11.8306 24.0888 11.8122 24.0888 11.7909V11.7909C24.0888 11.7709 24.102 11.7533 24.1211 11.7475C24.8271 11.5331 25.4214 11.1698 25.9041 10.6577C26.3984 10.1379 26.6967 9.5093 26.799 8.77208C26.8927 8.13714 26.8224 7.55546 26.5881 7.02706C26.3579 6.49865 25.9829 6.07464 25.4631 5.75504C24.9474 5.43544 24.3061 5.27563 23.5391 5.27563C22.8189 5.27563 22.1456 5.42265 21.5192 5.71669C20.8927 6.00646 20.3665 6.41129 19.9403 6.93117C19.5671 7.39115 19.3156 7.91283 19.1858 8.49623C19.159 8.61663 19.2533 8.72734 19.3767 8.72734H20.0434C20.1422 8.72734 20.2254 8.65495 20.2462 8.55835C20.3391 8.12647 20.529 7.74814 20.816 7.42336C21.1442 7.05262 21.5447 6.76711 22.0177 6.56683C22.4908 6.36228 22.9872 6.26001 23.5071 6.26001C24.044 6.26001 24.4915 6.36441 24.8494 6.57322C25.2074 6.77777 25.4631 7.06541 25.6165 7.43615C25.7699 7.80262 25.8104 8.22663 25.7379 8.70816C25.6655 9.23657 25.4694 9.6968 25.1498 10.0888C24.8302 10.4809 24.4275 10.7856 23.9417 11.0029C23.456 11.216 22.9254 11.3225 22.3501 11.3225H21.8463C21.7467 11.3225 21.6622 11.3959 21.6483 11.4946L21.5641 12.0917C21.5471 12.2121 21.6406 12.3197 21.7621 12.3197H22.2479C22.9467 12.3197 23.5305 12.4326 23.9993 12.6584C24.468 12.8843 24.8089 13.1996 25.022 13.6045C25.2351 14.005 25.3033 14.4695 25.2266 14.9979C25.1541 15.5349 24.9453 16.0079 24.6001 16.417C24.2592 16.8261 23.8288 17.1478 23.3089 17.3822C22.7933 17.6123 22.2308 17.7273 21.6214 17.7273C21.0504 17.7273 20.5561 17.6251 20.1385 17.4205C19.7251 17.216 19.414 16.9283 19.2052 16.5576C19.0324 16.2443 18.9508 15.8899 18.9606 15.4944C18.9635 15.3757 18.8717 15.2728 18.753 15.2728H18.0457C17.9449 15.2728 17.8592 15.3478 17.8513 15.4483C17.8037 16.0542 17.9141 16.5944 18.1825 17.069C18.4808 17.5888 18.9261 17.9958 19.5185 18.2898ZM6.51038 5.45459C6.41134 5.45459 6.32722 5.52708 6.31258 5.62504L4.41638 18.3159C4.39832 18.4368 4.49196 18.5455 4.61418 18.5455H5.31548C5.41456 18.5455 5.49871 18.473 5.5133 18.375L6.36379 12.6628C6.37838 12.5648 6.46253 12.4922 6.56161 12.4922H13.6934C13.8156 12.4922 13.9092 12.6008 13.8912 12.7217L13.0583 18.316C13.0403 18.4369 13.1339 18.5455 13.2561 18.5455H13.9512C14.0503 18.5455 14.1344 18.473 14.149 18.3751L16.0452 5.68414C16.0633 5.56326 15.9696 5.45459 15.8474 5.45459H15.1525C15.0534 5.45459 14.9693 5.5271 14.9547 5.62508L14.1043 11.3246C14.0896 11.4226 14.0055 11.4951 13.9064 11.4951H6.77465C6.65244 11.4951 6.5588 11.3864 6.57684 11.2656L7.40962 5.6841C7.42766 5.56323 7.33403 5.45459 7.21181 5.45459H6.51038Z"
390
+
fill="currentColor"
391
+
/>
392
+
</svg>
393
+
);
394
+
};
395
+
396
+
export const ParagraphSmall = (props: Props) => {
397
+
return (
398
+
<svg
399
+
width="24"
400
+
height="24"
401
+
viewBox="0 0 24 24"
402
+
fill="none"
403
+
xmlns="http://www.w3.org/2000/svg"
404
+
{...props}
405
+
>
406
+
<path
407
+
d="M7.56396 18.5455V5.45459H11.9873C13.0142 5.45459 13.8537 5.63996 14.5057 6.0107C15.162 6.37718 15.6478 6.87362 15.9631 7.50004C16.2785 8.12646 16.4361 9.06841 16.4361 9.83971C16.4361 10.611 16.2785 11.5754 15.9631 12.206C15.652 12.8367 15.1705 13.3396 14.5185 13.7146C13.8665 14.0853 13.0313 14.2707 12.0128 14.2707H9.14919V12.8644H11.9617C12.6648 12.8644 13.2294 12.743 13.6556 12.5001C14.0817 12.2572 14.3907 11.929 14.5824 11.5157C14.7785 11.0981 14.8765 10.3639 14.8765 9.83971C14.8765 9.31556 14.7785 8.60374 14.5824 8.19039C14.3907 7.77703 14.0796 7.45317 13.6492 7.21879C13.2188 6.98016 12.6478 6.86084 11.9361 6.86084H9.14919V18.5455H7.56396Z"
408
+
fill="currentColor"
409
+
/>
410
+
</svg>
411
+
);
412
+
};
413
+
414
+
export const ListUnorderedSmall = (props: Props) => {
415
+
return (
416
+
<svg
417
+
width="24"
418
+
height="24"
419
+
viewBox="0 0 24 24"
420
+
fill="none"
421
+
xmlns="http://www.w3.org/2000/svg"
422
+
{...props}
423
+
>
424
+
<path
425
+
fillRule="evenodd"
426
+
clipRule="evenodd"
427
+
d="M8.1687 5.19995C7.61642 5.19995 7.1687 5.64767 7.1687 6.19995C7.1687 6.75224 7.61642 7.19995 8.1687 7.19995H19.5461C20.0984 7.19995 20.5461 6.75224 20.5461 6.19995C20.5461 5.64767 20.0984 5.19995 19.5461 5.19995H8.1687ZM4.35361 7.10005C4.85067 7.10005 5.25361 6.69711 5.25361 6.20005C5.25361 5.70299 4.85067 5.30005 4.35361 5.30005C3.85656 5.30005 3.45361 5.70299 3.45361 6.20005C3.45361 6.69711 3.85656 7.10005 4.35361 7.10005ZM5.25361 12.0001C5.25361 12.4972 4.85067 12.9001 4.35361 12.9001C3.85656 12.9001 3.45361 12.4972 3.45361 12.0001C3.45361 11.503 3.85656 11.1001 4.35361 11.1001C4.85067 11.1001 5.25361 11.503 5.25361 12.0001ZM8.1687 11C7.61642 11 7.1687 11.4477 7.1687 12C7.1687 12.5523 7.61642 13 8.1687 13H19.5461C20.0984 13 20.5461 12.5523 20.5461 12C20.5461 11.4477 20.0984 11 19.5461 11H8.1687ZM5.25361 17.8001C5.25361 18.2972 4.85067 18.7001 4.35361 18.7001C3.85656 18.7001 3.45361 18.2972 3.45361 17.8001C3.45361 17.3031 3.85656 16.9001 4.35361 16.9001C4.85067 16.9001 5.25361 17.3031 5.25361 17.8001ZM8.1687 16.8C7.61642 16.8 7.1687 17.2478 7.1687 17.8C7.1687 18.3523 7.61642 18.8 8.1687 18.8H19.5461C20.0984 18.8 20.5461 18.3523 20.5461 17.8C20.5461 17.2478 20.0984 16.8 19.5461 16.8H8.1687Z"
428
+
fill="currentColor"
429
+
/>
430
+
</svg>
431
+
);
432
+
};
433
+
434
+
export const ListOrderedSmall = (props: Props) => {
435
+
return (
436
+
<svg
437
+
width="24"
438
+
height="24"
439
+
viewBox="0 0 24 24"
440
+
fill="none"
441
+
xmlns="http://www.w3.org/2000/svg"
442
+
{...props}
443
+
>
444
+
<path
445
+
fillRule="evenodd"
446
+
clipRule="evenodd"
447
+
d="M3.75171 7.47681V7.97729H5.87085V7.47681L5.33722 7.39868V4.42261L3.74683 4.67163V5.14526L4.20863 5.15259V7.39868L3.75171 7.47681ZM8.32275 5.19995C7.77047 5.19995 7.32275 5.64767 7.32275 6.19995C7.32275 6.75224 7.77047 7.19995 8.32275 7.19995H19.7002C20.2525 7.19995 20.7002 6.75224 20.7002 6.19995C20.7002 5.64767 20.2525 5.19995 19.7002 5.19995H8.32275ZM8.32275 11C7.77047 11 7.32275 11.4477 7.32275 12C7.32275 12.5523 7.77047 13 8.32275 13H19.7002C20.2525 13 20.7002 12.5523 20.7002 12C20.7002 11.4477 20.2525 11 19.7002 11H8.32275ZM7.32275 17.8C7.32275 17.2478 7.77047 16.8 8.32275 16.8H19.7002C20.2525 16.8 20.7002 17.2478 20.7002 17.8C20.7002 18.3523 20.2525 18.8 19.7002 18.8H8.32275C7.77047 18.8 7.32275 18.3523 7.32275 17.8ZM3.37095 13.803V12.997L4.24146 12.2678C4.51489 12.0413 4.71248 11.7611 4.77271 11.6716C4.83293 11.5821 4.89809 11.4638 4.91333 11.386C4.93677 11.2664 4.90877 11.1597 4.84692 11.0784C4.78507 10.997 4.68605 10.9749 4.56236 10.9749C4.47974 10.9749 4.34562 11.0194 4.28052 11.1155C4.24405 11.1693 4.21802 11.2327 4.18443 11.4084L3.32456 11.386L3.31968 11.3713C3.3148 11.1516 3.362 10.953 3.46128 10.7756C3.56219 10.5982 3.70705 10.4574 3.89585 10.3533C4.08465 10.2491 4.30682 10.197 4.56236 10.197C4.81789 10.197 5.0368 10.2418 5.21909 10.3313C5.40301 10.4192 5.5438 10.5437 5.64146 10.7048C5.74074 10.8643 5.79038 11.0515 5.79038 11.2664C5.79038 11.4128 5.76515 11.5479 5.7147 11.6716C5.66587 11.7937 5.58449 11.9247 5.47056 12.0647C5.35825 12.2047 5.2077 12.3739 5.0189 12.5725L4.61987 12.9848L4.62476 12.997H5.21909L5.22886 12.8582H5.87095V13.803H3.37095ZM3.93243 19.509C4.12937 19.5888 4.34421 19.6287 4.57696 19.6287C4.82924 19.6287 5.05385 19.5863 5.25079 19.5017C5.44935 19.4171 5.6056 19.2966 5.71954 19.1404C5.83347 18.9825 5.89043 18.7953 5.89043 18.5789C5.89043 18.3819 5.83428 18.2126 5.72198 18.071C5.6113 17.9294 5.46237 17.8236 5.2752 17.7537C5.46075 17.6641 5.59991 17.5567 5.69268 17.4314C5.78708 17.3044 5.83428 17.1523 5.83428 16.9749C5.83428 16.6558 5.71791 16.4093 5.48516 16.2351C5.25404 16.0593 4.94805 15.9714 4.56719 15.9714C4.33119 15.9714 4.12041 16.0129 3.93487 16.0959C3.74932 16.1773 3.60446 16.2921 3.5003 16.4402C3.39776 16.5883 3.34974 16.76 3.35625 16.9553L3.36114 16.97H4.19121C4.19121 16.9016 4.20749 16.8422 4.24004 16.7917C4.29175 16.6724 4.38582 16.6138 4.5144 16.6138C4.64298 16.6138 4.72136 16.6687 4.78972 16.7452C4.85971 16.8217 4.86938 16.9138 4.86938 17.031C4.86938 17.114 4.85229 17.1873 4.81812 17.2507C4.78394 17.3126 4.73348 17.3614 4.66675 17.3972C4.60164 17.4314 4.52108 17.4485 4.42505 17.4485H4.14483V18.0808H4.40503C4.57593 18.0808 4.67489 18.1239 4.7644 18.2102C4.85392 18.2948 4.89868 18.4039 4.89868 18.5374C4.89868 18.6676 4.86938 18.7717 4.79565 18.8638C4.71427 18.9451 4.61217 18.9731 4.5086 18.9731C4.40503 18.9731 4.27612 18.8638 4.24493 18.7717C4.24012 18.7576 4.23503 18.7436 4.22997 18.7298C4.21036 18.6761 4.19121 18.6237 4.19121 18.5642H3.30254L3.3001 18.5789C3.29522 18.8051 3.35056 18.9963 3.46612 19.1526C3.58168 19.3088 3.73711 19.4277 3.93243 19.509Z"
448
+
fill="currentColor"
449
+
/>
450
+
</svg>
451
+
);
452
+
};
453
+
export const ListIndentIncreaseSmall = (props: Props) => {
454
+
return (
455
+
<svg
456
+
width="24"
457
+
height="24"
458
+
viewBox="0 0 24 24"
459
+
fill="none"
460
+
xmlns="http://www.w3.org/2000/svg"
461
+
{...props}
462
+
>
463
+
<path
464
+
fillRule="evenodd"
465
+
clipRule="evenodd"
466
+
d="M8.2771 5.19995C7.72481 5.19995 7.2771 5.64767 7.2771 6.19995C7.2771 6.75224 7.72481 7.19995 8.2771 7.19995H19.6545C20.2068 7.19995 20.6545 6.75224 20.6545 6.19995C20.6545 5.64767 20.2068 5.19995 19.6545 5.19995H8.2771ZM4.46201 7.10005C4.95907 7.10005 5.36201 6.6971 5.36201 6.20005C5.36201 5.70299 4.95907 5.30005 4.46201 5.30005C3.96496 5.30005 3.56201 5.70299 3.56201 6.20005C3.56201 6.6971 3.96496 7.10005 4.46201 7.10005ZM11.1218 12.0001C11.1218 12.4972 10.7188 12.9001 10.2218 12.9001C9.72472 12.9001 9.32178 12.4972 9.32178 12.0001C9.32178 11.503 9.72472 11.1001 10.2218 11.1001C10.7188 11.1001 11.1218 11.503 11.1218 12.0001ZM14.0369 11C13.4846 11 13.0369 11.4477 13.0369 12C13.0369 12.5523 13.4846 13 14.0369 13H19.6545C20.2068 13 20.6545 12.5523 20.6545 12C20.6545 11.4477 20.2068 11 19.6545 11H14.0369ZM11.1218 17.8002C11.1218 18.2973 10.7188 18.7002 10.2218 18.7002C9.72472 18.7002 9.32178 18.2973 9.32178 17.8002C9.32178 17.3032 9.72472 16.9002 10.2218 16.9002C10.7188 16.9002 11.1218 17.3032 11.1218 17.8002ZM14.037 16.8C13.4847 16.8 13.037 17.2478 13.037 17.8C13.037 18.3523 13.4847 18.8 14.037 18.8L19.6547 18.8C20.207 18.8 20.6547 18.3523 20.6547 17.8C20.6547 17.2478 20.207 16.8 19.6547 16.8L14.037 16.8ZM5.00428 15.5359H2.23413C1.88895 15.5359 1.60913 15.2561 1.60913 14.9109C1.60913 14.5657 1.88895 14.2859 2.23413 14.2859H5.00453L4.00116 13.2825C3.70827 12.9896 3.70827 12.5148 4.00116 12.2219C4.29406 11.929 4.76893 11.929 5.06182 12.2219L7.75072 14.9108L5.06182 17.5997C4.76893 17.8926 4.29406 17.8926 4.00116 17.5997C3.70827 17.3068 3.70827 16.8319 4.00116 16.539L5.00428 15.5359Z"
467
+
fill="currentColor"
468
+
/>
469
+
</svg>
470
+
);
471
+
};
472
+
473
+
export const ListIndentDecreaseSmall = (props: Props) => {
474
+
return (
475
+
<svg
476
+
width="24"
477
+
height="24"
478
+
viewBox="0 0 24 24"
479
+
fill="none"
480
+
xmlns="http://www.w3.org/2000/svg"
481
+
{...props}
482
+
>
483
+
<path
484
+
fillRule="evenodd"
485
+
clipRule="evenodd"
486
+
d="M8.27716 5.19995C7.72488 5.19995 7.27716 5.64767 7.27716 6.19995C7.27716 6.75224 7.72488 7.19995 8.27716 7.19995H19.6546C20.2069 7.19995 20.6546 6.75224 20.6546 6.19995C20.6546 5.64767 20.2069 5.19995 19.6546 5.19995H8.27716ZM4.46208 7.10005C4.95913 7.10005 5.36208 6.69711 5.36208 6.20005C5.36208 5.70299 4.95913 5.30005 4.46208 5.30005C3.96502 5.30005 3.56208 5.70299 3.56208 6.20005C3.56208 6.69711 3.96502 7.10005 4.46208 7.10005ZM5.36208 12.0001C5.36208 12.4972 4.95913 12.9001 4.46208 12.9001C3.96502 12.9001 3.56208 12.4972 3.56208 12.0001C3.56208 11.503 3.96502 11.1001 4.46208 11.1001C4.95913 11.1001 5.36208 11.503 5.36208 12.0001ZM8.27716 11C7.72488 11 7.27716 11.4477 7.27716 12C7.27716 12.5523 7.72488 13 8.27716 13H20.106C20.6583 13 21.106 12.5523 21.106 12C21.106 11.4477 20.6583 11 20.106 11H8.27716ZM11.1218 17.8001C11.1218 18.2972 10.7189 18.7001 10.2218 18.7001C9.72479 18.7001 9.32184 18.2972 9.32184 17.8001C9.32184 17.3031 9.72479 16.9001 10.2218 16.9001C10.7189 16.9001 11.1218 17.3031 11.1218 17.8001ZM14.0372 16.8C13.4849 16.8 13.0372 17.2478 13.0372 17.8C13.0372 18.3523 13.4849 18.8 14.0372 18.8L19.6549 18.8C20.2071 18.8 20.6549 18.3523 20.6549 17.8C20.6549 17.2478 20.2071 16.8 19.6549 16.8L14.0372 16.8ZM4.48975 17.1753L5.4936 16.1721C5.78659 15.8793 5.78675 15.4044 5.49395 15.1114C5.20115 14.8185 4.72628 14.8183 4.43329 15.1111L1.74243 17.8002L4.43329 20.4892C4.72628 20.782 5.20115 20.7819 5.49395 20.4889C5.78675 20.1959 5.78659 19.721 5.4936 19.4282L4.48999 18.4253H6.96185C7.30703 18.4253 7.58685 18.1455 7.58685 17.8003C7.58685 17.4551 7.30703 17.1753 6.96185 17.1753H4.48975Z"
487
+
fill="currentColor"
488
+
/>
489
+
</svg>
490
+
);
491
+
};
+5
-5
components/TextBlock/index.tsx
+5
-5
components/TextBlock/index.tsx
···
25
25
import { TextBlockKeymap } from "./keymap";
26
26
import { multiBlockSchema, schema } from "./schema";
27
27
import { useUIState } from "src/useUIState";
28
-
import { CardSmall, ImageSmall } from "components/Icons";
29
28
import { DOMParser as ProsemirrorDOMParser } from "prosemirror-model";
29
+
import { BlockCardSmall, BlockImageSmall } from "components/Icons";
30
30
31
31
export let useEditorStates = create(() => ({
32
32
lastXPosition: 0,
···
248
248
<div className="absolute top-0 right-0 hidden group-hover/text:block group-focus-within/text:block">
249
249
<div className="flex gap-1">
250
250
<label className="hover:cursor-pointer ">
251
-
<div className="opacity-30 hover:opacity-100 hover:text-accent">
252
-
<ImageSmall />
253
-
</div>
251
+
<button className="opacity-30 hover:opacity-100 hover:text-accent">
252
+
<BlockImageSmall />
253
+
</button>
254
254
<div className="hidden">
255
255
<input
256
256
type="file"
···
306
306
}
307
307
}}
308
308
>
309
-
<CardSmall />
309
+
<BlockCardSmall />
310
310
</button>
311
311
</div>
312
312
</div>