@flexiui/svelte-rich-text 0.0.14 → 0.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/RichText.svelte +868 -186
- package/dist/styles.css +15 -3
- package/dist/utils.d.ts +1 -0
- package/dist/utils.js +22 -5
- package/package.json +5 -2
package/dist/RichText.svelte
CHANGED
|
@@ -1,24 +1,25 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
|
|
2
|
+
import {
|
|
3
|
+
Mathematics,
|
|
4
|
+
migrateMathStrings,
|
|
5
|
+
} from "@tiptap/extension-mathematics";
|
|
6
|
+
import { HEADINGS, rgbToHex } from "./utils";
|
|
3
7
|
import "./styles.css";
|
|
8
|
+
// import 'katex/dist/katex.min.css'
|
|
4
9
|
|
|
5
10
|
import { onMount, onDestroy } from "svelte";
|
|
6
|
-
import type { Readable } from
|
|
11
|
+
import type { Readable } from "svelte/store";
|
|
7
12
|
|
|
8
|
-
import {
|
|
9
|
-
createEditor,
|
|
10
|
-
Editor,
|
|
11
|
-
EditorContent,
|
|
12
|
-
} from "svelte-tiptap";
|
|
13
|
+
import { createEditor, Editor, EditorContent } from "svelte-tiptap";
|
|
13
14
|
|
|
14
15
|
import StarterKit from "@tiptap/starter-kit";
|
|
15
16
|
import Highlight from "@tiptap/extension-highlight";
|
|
16
|
-
import TextAlign from
|
|
17
|
+
import TextAlign from "@tiptap/extension-text-align";
|
|
17
18
|
import Underline from "@tiptap/extension-underline";
|
|
18
19
|
import Link from "@tiptap/extension-link";
|
|
19
20
|
import { ListKit } from "@tiptap/extension-list";
|
|
20
21
|
import { TextStyleKit } from "@tiptap/extension-text-style";
|
|
21
|
-
import { EnhancedLink } from
|
|
22
|
+
import { EnhancedLink } from "./extensions/EnhancedLink";
|
|
22
23
|
import { computePosition, offset, autoUpdate } from "@floating-ui/dom";
|
|
23
24
|
|
|
24
25
|
declare interface Props {
|
|
@@ -40,11 +41,11 @@
|
|
|
40
41
|
onContentError?: (params: any) => void;
|
|
41
42
|
onSelectionUpdate?: (params: any) => void;
|
|
42
43
|
onPaste?: (params: any) => void;
|
|
43
|
-
}
|
|
44
|
+
};
|
|
44
45
|
}
|
|
45
46
|
|
|
46
47
|
let {
|
|
47
|
-
id =
|
|
48
|
+
id = "fl-rich-text-editor",
|
|
48
49
|
className,
|
|
49
50
|
editable,
|
|
50
51
|
content,
|
|
@@ -62,9 +63,11 @@
|
|
|
62
63
|
onContentError: () => {},
|
|
63
64
|
onSelectionUpdate: () => {},
|
|
64
65
|
onPaste: () => {},
|
|
65
|
-
}
|
|
66
|
+
},
|
|
66
67
|
}: Props = $props();
|
|
67
68
|
|
|
69
|
+
let editor = $state() as Readable<Editor>;
|
|
70
|
+
|
|
68
71
|
const extensions = [
|
|
69
72
|
// Color.configure({ types: [TextStyle.name, ListItem.name] }),
|
|
70
73
|
Highlight.configure({ multicolor: true }),
|
|
@@ -89,12 +92,48 @@
|
|
|
89
92
|
}),
|
|
90
93
|
ListKit,
|
|
91
94
|
TextAlign.configure({
|
|
92
|
-
types: [
|
|
95
|
+
types: [
|
|
96
|
+
"heading",
|
|
97
|
+
"paragraph",
|
|
98
|
+
"bulletList",
|
|
99
|
+
"taskList",
|
|
100
|
+
"listItem",
|
|
101
|
+
"blockquote",
|
|
102
|
+
],
|
|
103
|
+
}),
|
|
104
|
+
Mathematics.configure({
|
|
105
|
+
inlineOptions: {
|
|
106
|
+
onClick: (node, pos) => {
|
|
107
|
+
// you can do anything on click, e.g. open a dialog to edit the math node
|
|
108
|
+
// or just a prompt to edit the LaTeX code for a quick prototype
|
|
109
|
+
const katex = prompt(
|
|
110
|
+
"Update math LaTeX expression:",
|
|
111
|
+
node.attrs.latex
|
|
112
|
+
);
|
|
113
|
+
if (katex) {
|
|
114
|
+
$editor
|
|
115
|
+
.chain()
|
|
116
|
+
.setNodeSelection(pos)
|
|
117
|
+
.updateInlineMath({ latex: katex })
|
|
118
|
+
.focus()
|
|
119
|
+
.run();
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
},
|
|
123
|
+
blockOptions: {
|
|
124
|
+
// optional options for the block math node
|
|
125
|
+
},
|
|
126
|
+
katexOptions: {
|
|
127
|
+
displayMode: false,
|
|
128
|
+
throwOnError: false,
|
|
129
|
+
macros: {
|
|
130
|
+
"\\RR": "\\mathbb{R}",
|
|
131
|
+
"\\ZZ": "\\mathbb{Z}",
|
|
132
|
+
},
|
|
133
|
+
},
|
|
93
134
|
}),
|
|
94
135
|
...customExtensions,
|
|
95
|
-
]
|
|
96
|
-
|
|
97
|
-
let editor = $state() as Readable<Editor>;
|
|
136
|
+
];
|
|
98
137
|
|
|
99
138
|
let tooltipVisible = $state(false);
|
|
100
139
|
let tooltipX = $state(0);
|
|
@@ -104,14 +143,33 @@
|
|
|
104
143
|
let currentTriggerEl: HTMLElement | null = null;
|
|
105
144
|
let activeDropdownType = $state(null);
|
|
106
145
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
146
|
+
const TEXT_COLOR_PALETTE = [
|
|
147
|
+
"rgb(94, 23, 235)",
|
|
148
|
+
"rgb(183, 147, 255)",
|
|
149
|
+
"rgb(255, 147, 223)",
|
|
150
|
+
// "rgb(251, 109, 250)",
|
|
151
|
+
"rgb(255, 78, 198)",
|
|
152
|
+
"rgb(147, 255, 207)",
|
|
153
|
+
"rgb(147, 215, 255)",
|
|
154
|
+
"rgb(255, 147, 147)",
|
|
155
|
+
"rgb(255, 102, 142)",
|
|
156
|
+
"rgb(0, 0, 0)",
|
|
157
|
+
"rgb(255, 255, 255)",
|
|
158
|
+
];
|
|
159
|
+
|
|
160
|
+
const HIGHLIGHT_COLOR_PALETTE = [
|
|
161
|
+
"rgb(94, 23, 235)",
|
|
162
|
+
"rgb(183, 147, 255)",
|
|
163
|
+
"rgb(255, 147, 223)",
|
|
164
|
+
// "rgb(251, 109, 250)",
|
|
165
|
+
"rgb(255, 78, 198)",
|
|
166
|
+
"rgb(147, 255, 207)",
|
|
167
|
+
"rgb(147, 215, 255)",
|
|
168
|
+
"rgb(255, 147, 147)",
|
|
169
|
+
"rgb(255, 102, 142)",
|
|
170
|
+
];
|
|
171
|
+
|
|
172
|
+
let recentCustomColors = $state([]) as string[];
|
|
115
173
|
|
|
116
174
|
function toogleDropdown(el: HTMLElement, type: string = null) {
|
|
117
175
|
if (!el) return;
|
|
@@ -144,10 +202,7 @@
|
|
|
144
202
|
const target = e.target as Node;
|
|
145
203
|
|
|
146
204
|
// Excepciones: tooltip, trigger actual, y el drag-area contenedor
|
|
147
|
-
if (
|
|
148
|
-
tooltip.contains(target) ||
|
|
149
|
-
currentTriggerEl?.contains(target)
|
|
150
|
-
) {
|
|
205
|
+
if (tooltip.contains(target) || currentTriggerEl?.contains(target)) {
|
|
151
206
|
return; // no cerrar
|
|
152
207
|
}
|
|
153
208
|
|
|
@@ -157,9 +212,7 @@
|
|
|
157
212
|
function updatePosition(el: HTMLElement) {
|
|
158
213
|
computePosition(el, tooltip, {
|
|
159
214
|
placement: "bottom",
|
|
160
|
-
middleware: [
|
|
161
|
-
offset(4),
|
|
162
|
-
],
|
|
215
|
+
middleware: [offset(4)],
|
|
163
216
|
}).then(({ x, y }) => {
|
|
164
217
|
tooltipX = x;
|
|
165
218
|
tooltipY = y;
|
|
@@ -181,10 +234,15 @@
|
|
|
181
234
|
|
|
182
235
|
onCreate: ({ editor }) => {
|
|
183
236
|
editorEvents.onCreate({ editor });
|
|
237
|
+
migrateMathStrings(editor);
|
|
184
238
|
},
|
|
185
239
|
|
|
186
240
|
onUpdate: ({ editor }) => {
|
|
187
|
-
editorEvents.onUpdate({
|
|
241
|
+
editorEvents.onUpdate({
|
|
242
|
+
editor,
|
|
243
|
+
html: editor.getHTML(),
|
|
244
|
+
json: editor.getJSON(),
|
|
245
|
+
});
|
|
188
246
|
},
|
|
189
247
|
|
|
190
248
|
onPaste: (event, slice) => {
|
|
@@ -207,7 +265,15 @@
|
|
|
207
265
|
editorEvents.onDrop({ editor, event, slice, moved });
|
|
208
266
|
},
|
|
209
267
|
onDelete({ type, deletedRange, newRange, partial, from, to }) {
|
|
210
|
-
editorEvents.onDelete({
|
|
268
|
+
editorEvents.onDelete({
|
|
269
|
+
editor,
|
|
270
|
+
type,
|
|
271
|
+
deletedRange,
|
|
272
|
+
newRange,
|
|
273
|
+
partial,
|
|
274
|
+
from,
|
|
275
|
+
to,
|
|
276
|
+
});
|
|
211
277
|
},
|
|
212
278
|
onContentError({ editor, error, disableCollaboration }) {
|
|
213
279
|
editorEvents.onContentError({ editor, error, disableCollaboration });
|
|
@@ -261,6 +327,28 @@
|
|
|
261
327
|
$editor.chain().focus().specialBox().run();
|
|
262
328
|
}
|
|
263
329
|
}
|
|
330
|
+
|
|
331
|
+
function addInlineMath() {
|
|
332
|
+
const hasSelection = !$editor.state.selection.empty;
|
|
333
|
+
|
|
334
|
+
if (hasSelection) {
|
|
335
|
+
const latex = prompt("Enter inline math LaTeX expression:", "");
|
|
336
|
+
if (latex) {
|
|
337
|
+
return $editor
|
|
338
|
+
.chain()
|
|
339
|
+
.deleteSelection()
|
|
340
|
+
.insertInlineMath({ latex })
|
|
341
|
+
.focus()
|
|
342
|
+
.run();
|
|
343
|
+
}
|
|
344
|
+
return;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
const latex = prompt("Enter inline math LaTeX expression:", "");
|
|
348
|
+
if (latex) {
|
|
349
|
+
return $editor.chain().insertInlineMath({ latex }).focus().run();
|
|
350
|
+
}
|
|
351
|
+
}
|
|
264
352
|
</script>
|
|
265
353
|
|
|
266
354
|
<div class="fl-rich-text {className}" class:editable>
|
|
@@ -311,76 +399,235 @@
|
|
|
311
399
|
</button>
|
|
312
400
|
</div>
|
|
313
401
|
|
|
314
|
-
<div class="fl-rich-text-toolbar-group">
|
|
402
|
+
<div class="fl-rich-text-toolbar-group">
|
|
315
403
|
<button
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
{#if $editor.isActive("heading", { level: Number(heading.level) })}
|
|
325
|
-
{@html heading.icon}
|
|
326
|
-
{/if}
|
|
327
|
-
{/each}
|
|
328
|
-
|
|
329
|
-
{#if !$editor.isActive("heading")}
|
|
330
|
-
<svg width="24" height="24" class="tiptap-button-icon" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M6 3C6.55228 3 7 3.44772 7 4V11H17V4C17 3.44772 17.4477 3 18 3C18.5523 3 19 3.44772 19 4V20C19 20.5523 18.5523 21 18 21C17.4477 21 17 20.5523 17 20V13H7V20C7 20.5523 6.55228 21 6 21C5.44772 21 5 20.5523 5 20V4C5 3.44772 5.44772 3 6 3Z" fill="currentColor"></path></svg>
|
|
404
|
+
type="button"
|
|
405
|
+
onclick={(e) => toogleDropdown(e.currentTarget, "headings-dropdown")}
|
|
406
|
+
class:is-active={$editor.isActive("heading")}
|
|
407
|
+
aria-label="Heading"
|
|
408
|
+
>
|
|
409
|
+
{#each HEADINGS as heading}
|
|
410
|
+
{#if $editor.isActive("heading", { level: Number(heading.level) })}
|
|
411
|
+
{@html heading.icon}
|
|
331
412
|
{/if}
|
|
413
|
+
{/each}
|
|
332
414
|
|
|
415
|
+
{#if !$editor.isActive("heading")}
|
|
333
416
|
<svg
|
|
334
|
-
|
|
335
|
-
|
|
417
|
+
width="24"
|
|
418
|
+
height="24"
|
|
419
|
+
class="tiptap-button-icon"
|
|
420
|
+
viewBox="0 0 24 24"
|
|
421
|
+
fill="currentColor"
|
|
336
422
|
xmlns="http://www.w3.org/2000/svg"
|
|
337
|
-
fill="none"
|
|
338
|
-
viewBox="0 0 10 6"
|
|
339
423
|
><path
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
stroke-linejoin="round"
|
|
343
|
-
stroke-width="2"
|
|
344
|
-
d="m1 1 4 4 4-4"
|
|
424
|
+
d="M6 3C6.55228 3 7 3.44772 7 4V11H17V4C17 3.44772 17.4477 3 18 3C18.5523 3 19 3.44772 19 4V20C19 20.5523 18.5523 21 18 21C17.4477 21 17 20.5523 17 20V13H7V20C7 20.5523 6.55228 21 6 21C5.44772 21 5 20.5523 5 20V4C5 3.44772 5.44772 3 6 3Z"
|
|
425
|
+
fill="currentColor"
|
|
345
426
|
></path></svg
|
|
346
427
|
>
|
|
428
|
+
{/if}
|
|
429
|
+
|
|
430
|
+
<svg
|
|
431
|
+
class="toogle-dropdown-button-icon"
|
|
432
|
+
aria-hidden="true"
|
|
433
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
434
|
+
fill="none"
|
|
435
|
+
viewBox="0 0 10 6"
|
|
436
|
+
><path
|
|
437
|
+
stroke="currentColor"
|
|
438
|
+
stroke-linecap="round"
|
|
439
|
+
stroke-linejoin="round"
|
|
440
|
+
stroke-width="2"
|
|
441
|
+
d="m1 1 4 4 4-4"
|
|
442
|
+
></path></svg
|
|
443
|
+
>
|
|
347
444
|
</button>
|
|
348
445
|
</div>
|
|
349
446
|
|
|
350
447
|
<div role="group" class="fl-rich-text-toolbar-group">
|
|
351
|
-
<button
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
448
|
+
<button
|
|
449
|
+
aria-label="List"
|
|
450
|
+
type="button"
|
|
451
|
+
onclick={(e) => toogleDropdown(e.currentTarget, "list-dropdown")}
|
|
452
|
+
class:is-active={$editor.isActive("bulletList") ||
|
|
453
|
+
$editor.isActive("orderedList") ||
|
|
454
|
+
$editor.isActive("taskList")}
|
|
455
|
+
>
|
|
456
|
+
{#if $editor.isActive("bulletList")}
|
|
457
|
+
<svg
|
|
458
|
+
width="24"
|
|
459
|
+
height="24"
|
|
460
|
+
class="tiptap-button-icon"
|
|
461
|
+
viewBox="0 0 24 24"
|
|
462
|
+
fill="currentColor"
|
|
463
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
464
|
+
><path
|
|
465
|
+
fill-rule="evenodd"
|
|
466
|
+
clip-rule="evenodd"
|
|
467
|
+
d="M7 6C7 5.44772 7.44772 5 8 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H8C7.44772 7 7 6.55228 7 6Z"
|
|
468
|
+
fill="currentColor"
|
|
469
|
+
></path><path
|
|
470
|
+
fill-rule="evenodd"
|
|
471
|
+
clip-rule="evenodd"
|
|
472
|
+
d="M7 12C7 11.4477 7.44772 11 8 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H8C7.44772 13 7 12.5523 7 12Z"
|
|
473
|
+
fill="currentColor"
|
|
474
|
+
></path><path
|
|
475
|
+
fill-rule="evenodd"
|
|
476
|
+
clip-rule="evenodd"
|
|
477
|
+
d="M7 18C7 17.4477 7.44772 17 8 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H8C7.44772 19 7 18.5523 7 18Z"
|
|
478
|
+
fill="currentColor"
|
|
479
|
+
></path><path
|
|
480
|
+
fill-rule="evenodd"
|
|
481
|
+
clip-rule="evenodd"
|
|
482
|
+
d="M2 6C2 5.44772 2.44772 5 3 5H3.01C3.56228 5 4.01 5.44772 4.01 6C4.01 6.55228 3.56228 7 3.01 7H3C2.44772 7 2 6.55228 2 6Z"
|
|
483
|
+
fill="currentColor"
|
|
484
|
+
></path><path
|
|
485
|
+
fill-rule="evenodd"
|
|
486
|
+
clip-rule="evenodd"
|
|
487
|
+
d="M2 12C2 11.4477 2.44772 11 3 11H3.01C3.56228 11 4.01 11.4477 4.01 12C4.01 12.5523 3.56228 13 3.01 13H3C2.44772 13 2 12.5523 2 12Z"
|
|
488
|
+
fill="currentColor"
|
|
489
|
+
></path><path
|
|
490
|
+
fill-rule="evenodd"
|
|
491
|
+
clip-rule="evenodd"
|
|
492
|
+
d="M2 18C2 17.4477 2.44772 17 3 17H3.01C3.56228 17 4.01 17.4477 4.01 18C4.01 18.5523 3.56228 19 3.01 19H3C2.44772 19 2 18.5523 2 18Z"
|
|
493
|
+
fill="currentColor"
|
|
494
|
+
></path></svg
|
|
495
|
+
>
|
|
496
|
+
{:else if $editor.isActive("orderedList")}
|
|
367
497
|
<svg
|
|
368
|
-
|
|
369
|
-
|
|
498
|
+
width="24"
|
|
499
|
+
height="24"
|
|
500
|
+
class="tiptap-button-icon"
|
|
501
|
+
viewBox="0 0 24 24"
|
|
502
|
+
fill="currentColor"
|
|
503
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
504
|
+
><path
|
|
505
|
+
fill-rule="evenodd"
|
|
506
|
+
clip-rule="evenodd"
|
|
507
|
+
d="M9 6C9 5.44772 9.44772 5 10 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H10C9.44772 7 9 6.55228 9 6Z"
|
|
508
|
+
fill="currentColor"
|
|
509
|
+
></path><path
|
|
510
|
+
fill-rule="evenodd"
|
|
511
|
+
clip-rule="evenodd"
|
|
512
|
+
d="M9 12C9 11.4477 9.44772 11 10 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H10C9.44772 13 9 12.5523 9 12Z"
|
|
513
|
+
fill="currentColor"
|
|
514
|
+
></path><path
|
|
515
|
+
fill-rule="evenodd"
|
|
516
|
+
clip-rule="evenodd"
|
|
517
|
+
d="M9 18C9 17.4477 9.44772 17 10 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H10C9.44772 19 9 18.5523 9 18Z"
|
|
518
|
+
fill="currentColor"
|
|
519
|
+
></path><path
|
|
520
|
+
fill-rule="evenodd"
|
|
521
|
+
clip-rule="evenodd"
|
|
522
|
+
d="M3 6C3 5.44772 3.44772 5 4 5H5C5.55228 5 6 5.44772 6 6V10C6 10.5523 5.55228 11 5 11C4.44772 11 4 10.5523 4 10V7C3.44772 7 3 6.55228 3 6Z"
|
|
523
|
+
fill="currentColor"
|
|
524
|
+
></path><path
|
|
525
|
+
fill-rule="evenodd"
|
|
526
|
+
clip-rule="evenodd"
|
|
527
|
+
d="M3 10C3 9.44772 3.44772 9 4 9H6C6.55228 9 7 9.44772 7 10C7 10.5523 6.55228 11 6 11H4C3.44772 11 3 10.5523 3 10Z"
|
|
528
|
+
fill="currentColor"
|
|
529
|
+
></path><path
|
|
530
|
+
fill-rule="evenodd"
|
|
531
|
+
clip-rule="evenodd"
|
|
532
|
+
d="M5.82219 13.0431C6.54543 13.4047 6.99997 14.1319 6.99997 15C6.99997 15.5763 6.71806 16.0426 6.48747 16.35C6.31395 16.5814 6.1052 16.8044 5.91309 17H5.99997C6.55226 17 6.99997 17.4477 6.99997 18C6.99997 18.5523 6.55226 19 5.99997 19H3.99997C3.44769 19 2.99997 18.5523 2.99997 18C2.99997 17.4237 3.28189 16.9575 3.51247 16.65C3.74323 16.3424 4.03626 16.0494 4.26965 15.8161C4.27745 15.8083 4.2852 15.8006 4.29287 15.7929C4.55594 15.5298 4.75095 15.3321 4.88748 15.15C4.96287 15.0495 4.99021 14.9922 4.99911 14.9714C4.99535 14.9112 4.9803 14.882 4.9739 14.8715C4.96613 14.8588 4.95382 14.845 4.92776 14.8319C4.87723 14.8067 4.71156 14.7623 4.44719 14.8944C3.95321 15.1414 3.35254 14.9412 3.10555 14.4472C2.85856 13.9533 3.05878 13.3526 3.55276 13.1056C4.28839 12.7378 5.12272 12.6934 5.82219 13.0431Z"
|
|
533
|
+
fill="currentColor"
|
|
534
|
+
></path></svg
|
|
535
|
+
>
|
|
536
|
+
{:else if $editor.isActive("taskList")}
|
|
537
|
+
<svg
|
|
538
|
+
width="24"
|
|
539
|
+
height="24"
|
|
540
|
+
class="tiptap-button-icon"
|
|
541
|
+
viewBox="0 0 24 24"
|
|
542
|
+
fill="currentColor"
|
|
370
543
|
xmlns="http://www.w3.org/2000/svg"
|
|
371
|
-
fill="none"
|
|
372
|
-
viewBox="0 0 10 6"
|
|
373
544
|
><path
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
545
|
+
fill-rule="evenodd"
|
|
546
|
+
clip-rule="evenodd"
|
|
547
|
+
d="M2 6C2 4.89543 2.89543 4 4 4H8C9.10457 4 10 4.89543 10 6V10C10 11.1046 9.10457 12 8 12H4C2.89543 12 2 11.1046 2 10V6ZM8 6H4V10H8V6Z"
|
|
548
|
+
fill="currentColor"
|
|
549
|
+
></path><path
|
|
550
|
+
fill-rule="evenodd"
|
|
551
|
+
clip-rule="evenodd"
|
|
552
|
+
d="M9.70711 14.2929C10.0976 14.6834 10.0976 15.3166 9.70711 15.7071L5.70711 19.7071C5.31658 20.0976 4.68342 20.0976 4.29289 19.7071L2.29289 17.7071C1.90237 17.3166 1.90237 16.6834 2.29289 16.2929C2.68342 15.9024 3.31658 15.9024 3.70711 16.2929L5 17.5858L8.29289 14.2929C8.68342 13.9024 9.31658 13.9024 9.70711 14.2929Z"
|
|
553
|
+
fill="currentColor"
|
|
554
|
+
></path><path
|
|
555
|
+
fill-rule="evenodd"
|
|
556
|
+
clip-rule="evenodd"
|
|
557
|
+
d="M12 6C12 5.44772 12.4477 5 13 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H13C12.4477 7 12 6.55228 12 6Z"
|
|
558
|
+
fill="currentColor"
|
|
559
|
+
></path><path
|
|
560
|
+
fill-rule="evenodd"
|
|
561
|
+
clip-rule="evenodd"
|
|
562
|
+
d="M12 12C12 11.4477 12.4477 11 13 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H13C12.4477 13 12 12.5523 12 12Z"
|
|
563
|
+
fill="currentColor"
|
|
564
|
+
></path><path
|
|
565
|
+
fill-rule="evenodd"
|
|
566
|
+
clip-rule="evenodd"
|
|
567
|
+
d="M12 18C12 17.4477 12.4477 17 13 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H13C12.4477 19 12 18.5523 12 18Z"
|
|
568
|
+
fill="currentColor"
|
|
379
569
|
></path></svg
|
|
380
570
|
>
|
|
571
|
+
{:else}
|
|
572
|
+
<svg
|
|
573
|
+
width="24"
|
|
574
|
+
height="24"
|
|
575
|
+
class="tiptap-button-icon"
|
|
576
|
+
viewBox="0 0 24 24"
|
|
577
|
+
fill="currentColor"
|
|
578
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
579
|
+
><path
|
|
580
|
+
fill-rule="evenodd"
|
|
581
|
+
clip-rule="evenodd"
|
|
582
|
+
d="M7 6C7 5.44772 7.44772 5 8 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H8C7.44772 7 7 6.55228 7 6Z"
|
|
583
|
+
fill="currentColor"
|
|
584
|
+
></path><path
|
|
585
|
+
fill-rule="evenodd"
|
|
586
|
+
clip-rule="evenodd"
|
|
587
|
+
d="M7 12C7 11.4477 7.44772 11 8 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H8C7.44772 13 7 12.5523 7 12Z"
|
|
588
|
+
fill="currentColor"
|
|
589
|
+
></path><path
|
|
590
|
+
fill-rule="evenodd"
|
|
591
|
+
clip-rule="evenodd"
|
|
592
|
+
d="M7 18C7 17.4477 7.44772 17 8 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H8C7.44772 19 7 18.5523 7 18Z"
|
|
593
|
+
fill="currentColor"
|
|
594
|
+
></path><path
|
|
595
|
+
fill-rule="evenodd"
|
|
596
|
+
clip-rule="evenodd"
|
|
597
|
+
d="M2 6C2 5.44772 2.44772 5 3 5H3.01C3.56228 5 4.01 5.44772 4.01 6C4.01 6.55228 3.56228 7 3.01 7H3C2.44772 7 2 6.55228 2 6Z"
|
|
598
|
+
fill="currentColor"
|
|
599
|
+
></path><path
|
|
600
|
+
fill-rule="evenodd"
|
|
601
|
+
clip-rule="evenodd"
|
|
602
|
+
d="M2 12C2 11.4477 2.44772 11 3 11H3.01C3.56228 11 4.01 11.4477 4.01 12C4.01 12.5523 3.56228 13 3.01 13H3C2.44772 13 2 12.5523 2 12Z"
|
|
603
|
+
fill="currentColor"
|
|
604
|
+
></path><path
|
|
605
|
+
fill-rule="evenodd"
|
|
606
|
+
clip-rule="evenodd"
|
|
607
|
+
d="M2 18C2 17.4477 2.44772 17 3 17H3.01C3.56228 17 4.01 17.4477 4.01 18C4.01 18.5523 3.56228 19 3.01 19H3C2.44772 19 2 18.5523 2 18Z"
|
|
608
|
+
fill="currentColor"
|
|
609
|
+
></path></svg
|
|
610
|
+
>
|
|
611
|
+
{/if}
|
|
612
|
+
|
|
613
|
+
<svg
|
|
614
|
+
class="toogle-dropdown-button-icon"
|
|
615
|
+
aria-hidden="true"
|
|
616
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
617
|
+
fill="none"
|
|
618
|
+
viewBox="0 0 10 6"
|
|
619
|
+
><path
|
|
620
|
+
stroke="currentColor"
|
|
621
|
+
stroke-linecap="round"
|
|
622
|
+
stroke-linejoin="round"
|
|
623
|
+
stroke-width="2"
|
|
624
|
+
d="m1 1 4 4 4-4"
|
|
625
|
+
></path></svg
|
|
626
|
+
>
|
|
381
627
|
</button>
|
|
382
628
|
|
|
383
|
-
<button
|
|
629
|
+
<button
|
|
630
|
+
aria-label="Code block"
|
|
384
631
|
type="button"
|
|
385
632
|
onclick={() => $editor.chain().focus().toggleCodeBlock().run()}
|
|
386
633
|
class={$editor.isActive("codeBlock") ? "is-active" : ""}
|
|
@@ -411,7 +658,8 @@
|
|
|
411
658
|
>
|
|
412
659
|
</button>
|
|
413
660
|
|
|
414
|
-
<button
|
|
661
|
+
<button
|
|
662
|
+
aria-label="Blockquote"
|
|
415
663
|
type="button"
|
|
416
664
|
onclick={() => $editor.chain().focus().toggleBlockquote().run()}
|
|
417
665
|
class={$editor.isActive("blockquote") ? "is-active" : ""}
|
|
@@ -630,24 +878,63 @@
|
|
|
630
878
|
</button>
|
|
631
879
|
|
|
632
880
|
<button
|
|
881
|
+
aria-label="Toggle text color dropdown"
|
|
633
882
|
type="button"
|
|
634
|
-
onclick={() =>
|
|
635
|
-
class={$editor.isActive("textStyle", { color: "#958DF1" })
|
|
636
|
-
? "is-active"
|
|
637
|
-
: ""}
|
|
883
|
+
onclick={(e) => toogleDropdown(e.currentTarget, "text-color-dropdown")}
|
|
638
884
|
>
|
|
639
885
|
<span
|
|
640
|
-
|
|
886
|
+
class="fl-button-color-text-popover"
|
|
887
|
+
style="background: {$editor?.getAttributes('textStyle')?.color ||
|
|
888
|
+
'currentColor'}"
|
|
641
889
|
></span>
|
|
642
|
-
|
|
890
|
+
|
|
891
|
+
<svg
|
|
892
|
+
class="toogle-dropdown-button-icon"
|
|
893
|
+
aria-hidden="true"
|
|
894
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
895
|
+
fill="none"
|
|
896
|
+
viewBox="0 0 10 6"
|
|
897
|
+
><path
|
|
898
|
+
stroke="currentColor"
|
|
899
|
+
stroke-linecap="round"
|
|
900
|
+
stroke-linejoin="round"
|
|
901
|
+
stroke-width="2"
|
|
902
|
+
d="m1 1 4 4 4-4"
|
|
903
|
+
></path></svg
|
|
904
|
+
>
|
|
905
|
+
</button>
|
|
906
|
+
</div>
|
|
907
|
+
|
|
908
|
+
<div role="group" class="fl-rich-text-toolbar-group">
|
|
909
|
+
<button
|
|
910
|
+
type="button"
|
|
911
|
+
onclick={addInlineMath}
|
|
912
|
+
class={$editor.isActive("bold") ? "is-active" : ""}
|
|
913
|
+
aria-label="Bold"
|
|
914
|
+
>
|
|
915
|
+
<svg
|
|
916
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
917
|
+
width="16"
|
|
918
|
+
height="16"
|
|
919
|
+
viewBox="0 0 24 24"
|
|
920
|
+
fill="none"
|
|
921
|
+
stroke="currentColor"
|
|
922
|
+
stroke-width="2"
|
|
923
|
+
stroke-linecap="round"
|
|
924
|
+
stroke-linejoin="round"
|
|
925
|
+
class="icon icon-tabler icons-tabler-outline icon-tabler-math"
|
|
926
|
+
><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
|
|
927
|
+
d="M19 5h-7l-4 14l-3 -6h-2"
|
|
928
|
+
/><path d="M14 13l6 6" /><path d="M14 19l6 -6" /></svg
|
|
929
|
+
>
|
|
643
930
|
</button>
|
|
644
931
|
</div>
|
|
645
932
|
|
|
646
933
|
<div role="group" class="fl-rich-text-toolbar-group">
|
|
647
934
|
<button
|
|
648
935
|
type="button"
|
|
649
|
-
onclick={() => $editor.chain().focus().toggleTextAlign(
|
|
650
|
-
class:is-active={$editor.isActive({ textAlign:
|
|
936
|
+
onclick={() => $editor.chain().focus().toggleTextAlign("left").run()}
|
|
937
|
+
class:is-active={$editor.isActive({ textAlign: "left" })}
|
|
651
938
|
aria-label="Align left"
|
|
652
939
|
>
|
|
653
940
|
<svg
|
|
@@ -667,8 +954,9 @@
|
|
|
667
954
|
|
|
668
955
|
<button
|
|
669
956
|
type="button"
|
|
670
|
-
onclick={() =>
|
|
671
|
-
|
|
957
|
+
onclick={() =>
|
|
958
|
+
$editor.chain().focus().toggleTextAlign("center").run()}
|
|
959
|
+
class:is-active={$editor.isActive({ textAlign: "center" })}
|
|
672
960
|
aria-label="Align center"
|
|
673
961
|
>
|
|
674
962
|
<svg
|
|
@@ -688,8 +976,8 @@
|
|
|
688
976
|
|
|
689
977
|
<button
|
|
690
978
|
type="button"
|
|
691
|
-
onclick={() => $editor.chain().focus().toggleTextAlign(
|
|
692
|
-
class:is-active={$editor.isActive({ textAlign:
|
|
979
|
+
onclick={() => $editor.chain().focus().toggleTextAlign("right").run()}
|
|
980
|
+
class:is-active={$editor.isActive({ textAlign: "right" })}
|
|
693
981
|
aria-label="Align right"
|
|
694
982
|
>
|
|
695
983
|
<svg
|
|
@@ -708,10 +996,27 @@
|
|
|
708
996
|
</button>
|
|
709
997
|
|
|
710
998
|
<button
|
|
999
|
+
aria-label="Clear formatting"
|
|
711
1000
|
type="button"
|
|
712
1001
|
onclick={() => $editor.chain().focus().unsetAllMarks().run()}
|
|
713
1002
|
>
|
|
714
|
-
|
|
1003
|
+
<svg
|
|
1004
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1005
|
+
width="16"
|
|
1006
|
+
height="16"
|
|
1007
|
+
viewBox="0 0 24 24"
|
|
1008
|
+
fill="none"
|
|
1009
|
+
stroke="currentColor"
|
|
1010
|
+
stroke-width="2"
|
|
1011
|
+
stroke-linecap="round"
|
|
1012
|
+
stroke-linejoin="round"
|
|
1013
|
+
class="icon icon-tabler icons-tabler-outline icon-tabler-clear-formatting"
|
|
1014
|
+
><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
|
|
1015
|
+
d="M17 15l4 4m0 -4l-4 4"
|
|
1016
|
+
/><path d="M7 6v-1h11v1" /><path d="M7 19l4 0" /><path
|
|
1017
|
+
d="M13 5l-4 14"
|
|
1018
|
+
/></svg
|
|
1019
|
+
>
|
|
715
1020
|
</button>
|
|
716
1021
|
|
|
717
1022
|
<button
|
|
@@ -727,105 +1032,397 @@
|
|
|
727
1032
|
<EditorContent editor={$editor} class="fl-rich-text-content" />
|
|
728
1033
|
</div>
|
|
729
1034
|
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
{
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
1035
|
+
<div
|
|
1036
|
+
class="fl-toolbar-dropdown-panel"
|
|
1037
|
+
bind:this={tooltip}
|
|
1038
|
+
style="display: {tooltipVisible
|
|
1039
|
+
? 'flex'
|
|
1040
|
+
: 'none'}; left: {tooltipX}px; top: {tooltipY}px;"
|
|
1041
|
+
>
|
|
1042
|
+
{#if activeDropdownType === "headings-dropdown"}
|
|
1043
|
+
<div role="group" class="fl-rich-text-toolbar-group">
|
|
1044
|
+
<button
|
|
1045
|
+
type="button"
|
|
1046
|
+
onclick={() =>
|
|
1047
|
+
$editor.chain().focus().toggleHeading({ level: 1 }).run()}
|
|
1048
|
+
class={$editor.isActive("heading", { level: 1 }) ? "is-active" : ""}
|
|
1049
|
+
aria-label="H1"
|
|
1050
|
+
>
|
|
1051
|
+
<svg
|
|
1052
|
+
width="24"
|
|
1053
|
+
height="24"
|
|
1054
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1055
|
+
viewBox="0 0 24 24"
|
|
1056
|
+
fill="currentColor"
|
|
1057
|
+
><path
|
|
1058
|
+
d="M13 20H11V13H4V20H2V4H4V11H11V4H13V20ZM21.0005 8V20H19.0005L19 10.204L17 10.74V8.67L19.5005 8H21.0005Z"
|
|
1059
|
+
></path></svg
|
|
744
1060
|
>
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
1061
|
+
</button>
|
|
1062
|
+
|
|
1063
|
+
<button
|
|
1064
|
+
type="button"
|
|
1065
|
+
onclick={() =>
|
|
1066
|
+
$editor.chain().focus().toggleHeading({ level: 2 }).run()}
|
|
1067
|
+
class={$editor.isActive("heading", { level: 2 }) ? "is-active" : ""}
|
|
1068
|
+
aria-label="H2"
|
|
1069
|
+
>
|
|
1070
|
+
<svg
|
|
1071
|
+
width="16"
|
|
1072
|
+
height="16"
|
|
1073
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1074
|
+
viewBox="0 0 24 24"
|
|
1075
|
+
fill="currentColor"
|
|
1076
|
+
><path
|
|
1077
|
+
d="M4 4V11H11V4H13V20H11V13H4V20H2V4H4ZM18.5 8C20.5711 8 22.25 9.67893 22.25 11.75C22.25 12.6074 21.9623 13.3976 21.4781 14.0292L21.3302 14.2102L18.0343 18H22V20H15L14.9993 18.444L19.8207 12.8981C20.0881 12.5908 20.25 12.1893 20.25 11.75C20.25 10.7835 19.4665 10 18.5 10C17.5818 10 16.8288 10.7071 16.7558 11.6065L16.75 11.75H14.75C14.75 9.67893 16.4289 8 18.5 8Z"
|
|
1078
|
+
></path></svg
|
|
754
1079
|
>
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
1080
|
+
</button>
|
|
1081
|
+
|
|
1082
|
+
<button
|
|
1083
|
+
type="button"
|
|
1084
|
+
onclick={() =>
|
|
1085
|
+
$editor.chain().focus().toggleHeading({ level: 3 }).run()}
|
|
1086
|
+
class={$editor.isActive("heading", { level: 3 }) ? "is-active" : ""}
|
|
1087
|
+
aria-label="H3"
|
|
1088
|
+
>
|
|
1089
|
+
<svg
|
|
1090
|
+
width="16"
|
|
1091
|
+
height="16"
|
|
1092
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1093
|
+
viewBox="0 0 24 24"
|
|
1094
|
+
fill="currentColor"
|
|
1095
|
+
><path
|
|
1096
|
+
d="M22 8L21.9984 10L19.4934 12.883C21.0823 13.3184 22.25 14.7728 22.25 16.5C22.25 18.5711 20.5711 20.25 18.5 20.25C16.674 20.25 15.1528 18.9449 14.8184 17.2166L16.7821 16.8352C16.9384 17.6413 17.6481 18.25 18.5 18.25C19.4665 18.25 20.25 17.4665 20.25 16.5C20.25 15.5335 19.4665 14.75 18.5 14.75C18.214 14.75 17.944 14.8186 17.7056 14.9403L16.3992 13.3932L19.3484 10H15V8H22ZM4 4V11H11V4H13V20H11V13H4V20H2V4H4Z"
|
|
1097
|
+
></path></svg
|
|
764
1098
|
>
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
1099
|
+
</button>
|
|
1100
|
+
|
|
1101
|
+
<button
|
|
1102
|
+
type="button"
|
|
1103
|
+
onclick={() =>
|
|
1104
|
+
$editor.chain().focus().toggleHeading({ level: 4 }).run()}
|
|
1105
|
+
class={$editor.isActive("heading", { level: 4 }) ? "is-active" : ""}
|
|
1106
|
+
aria-label="H4"
|
|
1107
|
+
>
|
|
1108
|
+
<svg
|
|
1109
|
+
width="16"
|
|
1110
|
+
height="16"
|
|
1111
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1112
|
+
viewBox="0 0 24 24"
|
|
1113
|
+
fill="currentColor"
|
|
1114
|
+
><path
|
|
1115
|
+
d="M13 20H11V13H4V20H2V4H4V11H11V4H13V20ZM22 8V16H23.5V18H22V20H20V18H14.5V16.66L19.5 8H22ZM20 11.133L17.19 16H20V11.133Z"
|
|
1116
|
+
></path></svg
|
|
774
1117
|
>
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
1118
|
+
</button>
|
|
1119
|
+
|
|
1120
|
+
<button
|
|
1121
|
+
type="button"
|
|
1122
|
+
onclick={() =>
|
|
1123
|
+
$editor.chain().focus().toggleHeading({ level: 5 }).run()}
|
|
1124
|
+
class={$editor.isActive("heading", { level: 5 }) ? "is-active" : ""}
|
|
1125
|
+
aria-label="H5"
|
|
1126
|
+
>
|
|
1127
|
+
<svg
|
|
1128
|
+
width="16"
|
|
1129
|
+
height="16"
|
|
1130
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1131
|
+
viewBox="0 0 24 24"
|
|
1132
|
+
fill="currentColor"
|
|
1133
|
+
><path
|
|
1134
|
+
d="M22 8V10H17.6769L17.2126 12.6358C17.5435 12.5472 17.8912 12.5 18.25 12.5C20.4591 12.5 22.25 14.2909 22.25 16.5C22.25 18.7091 20.4591 20.5 18.25 20.5C16.4233 20.5 14.8827 19.2756 14.4039 17.6027L16.3271 17.0519C16.5667 17.8881 17.3369 18.5 18.25 18.5C19.3546 18.5 20.25 17.6046 20.25 16.5C20.25 15.3954 19.3546 14.5 18.25 14.5C17.6194 14.5 17.057 14.7918 16.6904 15.2478L14.8803 14.3439L16 8H22ZM4 4V11H11V4H13V20H11V13H4V20H2V4H4Z"
|
|
1135
|
+
></path></svg
|
|
784
1136
|
>
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
1137
|
+
</button>
|
|
1138
|
+
|
|
1139
|
+
<button
|
|
1140
|
+
type="button"
|
|
1141
|
+
onclick={() =>
|
|
1142
|
+
$editor.chain().focus().toggleHeading({ level: 6 }).run()}
|
|
1143
|
+
class={$editor.isActive("heading", { level: 6 }) ? "is-active" : ""}
|
|
1144
|
+
aria-label="H6"
|
|
1145
|
+
>
|
|
1146
|
+
<svg
|
|
1147
|
+
width="16"
|
|
1148
|
+
height="16"
|
|
1149
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1150
|
+
viewBox="0 0 24 24"
|
|
1151
|
+
fill="currentColor"
|
|
1152
|
+
><path
|
|
1153
|
+
d="M21.097 8L18.499 12.5C20.7091 12.5 22.5 14.2909 22.5 16.5C22.5 18.7091 20.7091 20.5 18.5 20.5C16.2909 20.5 14.5 18.7091 14.5 16.5C14.5 15.7636 14.699 15.0737 15.0461 14.4811L18.788 8H21.097ZM4 4V11H11V4H13V20H11V13H4V20H2V4H4ZM18.5 14.5C17.3954 14.5 16.5 15.3954 16.5 16.5C16.5 17.6046 17.3954 18.5 18.5 18.5C19.6046 18.5 20.5 17.6046 20.5 16.5C20.5 15.3954 19.6046 14.5 18.5 14.5Z"
|
|
1154
|
+
></path></svg
|
|
794
1155
|
>
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
1156
|
+
</button>
|
|
1157
|
+
</div>
|
|
1158
|
+
{:else if activeDropdownType === "list-dropdown"}
|
|
1159
|
+
<div role="group" class="fl-rich-text-toolbar-group">
|
|
1160
|
+
<button
|
|
1161
|
+
aria-label="Bullet list"
|
|
1162
|
+
type="button"
|
|
1163
|
+
onclick={() => $editor.chain().focus().toggleBulletList().run()}
|
|
1164
|
+
class={$editor.isActive("bulletList") ? "is-active" : ""}
|
|
1165
|
+
>
|
|
1166
|
+
<svg
|
|
1167
|
+
width="24"
|
|
1168
|
+
height="24"
|
|
1169
|
+
class="tiptap-button-icon"
|
|
1170
|
+
viewBox="0 0 24 24"
|
|
1171
|
+
fill="currentColor"
|
|
1172
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1173
|
+
><path
|
|
1174
|
+
fill-rule="evenodd"
|
|
1175
|
+
clip-rule="evenodd"
|
|
1176
|
+
d="M7 6C7 5.44772 7.44772 5 8 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H8C7.44772 7 7 6.55228 7 6Z"
|
|
1177
|
+
fill="currentColor"
|
|
1178
|
+
></path><path
|
|
1179
|
+
fill-rule="evenodd"
|
|
1180
|
+
clip-rule="evenodd"
|
|
1181
|
+
d="M7 12C7 11.4477 7.44772 11 8 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H8C7.44772 13 7 12.5523 7 12Z"
|
|
1182
|
+
fill="currentColor"
|
|
1183
|
+
></path><path
|
|
1184
|
+
fill-rule="evenodd"
|
|
1185
|
+
clip-rule="evenodd"
|
|
1186
|
+
d="M7 18C7 17.4477 7.44772 17 8 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H8C7.44772 19 7 18.5523 7 18Z"
|
|
1187
|
+
fill="currentColor"
|
|
1188
|
+
></path><path
|
|
1189
|
+
fill-rule="evenodd"
|
|
1190
|
+
clip-rule="evenodd"
|
|
1191
|
+
d="M2 6C2 5.44772 2.44772 5 3 5H3.01C3.56228 5 4.01 5.44772 4.01 6C4.01 6.55228 3.56228 7 3.01 7H3C2.44772 7 2 6.55228 2 6Z"
|
|
1192
|
+
fill="currentColor"
|
|
1193
|
+
></path><path
|
|
1194
|
+
fill-rule="evenodd"
|
|
1195
|
+
clip-rule="evenodd"
|
|
1196
|
+
d="M2 12C2 11.4477 2.44772 11 3 11H3.01C3.56228 11 4.01 11.4477 4.01 12C4.01 12.5523 3.56228 13 3.01 13H3C2.44772 13 2 12.5523 2 12Z"
|
|
1197
|
+
fill="currentColor"
|
|
1198
|
+
></path><path
|
|
1199
|
+
fill-rule="evenodd"
|
|
1200
|
+
clip-rule="evenodd"
|
|
1201
|
+
d="M2 18C2 17.4477 2.44772 17 3 17H3.01C3.56228 17 4.01 17.4477 4.01 18C4.01 18.5523 3.56228 19 3.01 19H3C2.44772 19 2 18.5523 2 18Z"
|
|
1202
|
+
fill="currentColor"
|
|
1203
|
+
></path></svg
|
|
1204
|
+
>
|
|
1205
|
+
</button>
|
|
1206
|
+
|
|
1207
|
+
<button
|
|
1208
|
+
aria-label="Ordered list"
|
|
1209
|
+
type="button"
|
|
1210
|
+
onclick={() => $editor.chain().focus().toggleOrderedList().run()}
|
|
1211
|
+
class={$editor.isActive("orderedList") ? "is-active" : ""}
|
|
1212
|
+
>
|
|
1213
|
+
<svg
|
|
1214
|
+
width="24"
|
|
1215
|
+
height="24"
|
|
1216
|
+
class="tiptap-button-icon"
|
|
1217
|
+
viewBox="0 0 24 24"
|
|
1218
|
+
fill="currentColor"
|
|
1219
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1220
|
+
><path
|
|
1221
|
+
fill-rule="evenodd"
|
|
1222
|
+
clip-rule="evenodd"
|
|
1223
|
+
d="M9 6C9 5.44772 9.44772 5 10 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H10C9.44772 7 9 6.55228 9 6Z"
|
|
1224
|
+
fill="currentColor"
|
|
1225
|
+
></path><path
|
|
1226
|
+
fill-rule="evenodd"
|
|
1227
|
+
clip-rule="evenodd"
|
|
1228
|
+
d="M9 12C9 11.4477 9.44772 11 10 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H10C9.44772 13 9 12.5523 9 12Z"
|
|
1229
|
+
fill="currentColor"
|
|
1230
|
+
></path><path
|
|
1231
|
+
fill-rule="evenodd"
|
|
1232
|
+
clip-rule="evenodd"
|
|
1233
|
+
d="M9 18C9 17.4477 9.44772 17 10 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H10C9.44772 19 9 18.5523 9 18Z"
|
|
1234
|
+
fill="currentColor"
|
|
1235
|
+
></path><path
|
|
1236
|
+
fill-rule="evenodd"
|
|
1237
|
+
clip-rule="evenodd"
|
|
1238
|
+
d="M3 6C3 5.44772 3.44772 5 4 5H5C5.55228 5 6 5.44772 6 6V10C6 10.5523 5.55228 11 5 11C4.44772 11 4 10.5523 4 10V7C3.44772 7 3 6.55228 3 6Z"
|
|
1239
|
+
fill="currentColor"
|
|
1240
|
+
></path><path
|
|
1241
|
+
fill-rule="evenodd"
|
|
1242
|
+
clip-rule="evenodd"
|
|
1243
|
+
d="M3 10C3 9.44772 3.44772 9 4 9H6C6.55228 9 7 9.44772 7 10C7 10.5523 6.55228 11 6 11H4C3.44772 11 3 10.5523 3 10Z"
|
|
1244
|
+
fill="currentColor"
|
|
1245
|
+
></path><path
|
|
1246
|
+
fill-rule="evenodd"
|
|
1247
|
+
clip-rule="evenodd"
|
|
1248
|
+
d="M5.82219 13.0431C6.54543 13.4047 6.99997 14.1319 6.99997 15C6.99997 15.5763 6.71806 16.0426 6.48747 16.35C6.31395 16.5814 6.1052 16.8044 5.91309 17H5.99997C6.55226 17 6.99997 17.4477 6.99997 18C6.99997 18.5523 6.55226 19 5.99997 19H3.99997C3.44769 19 2.99997 18.5523 2.99997 18C2.99997 17.4237 3.28189 16.9575 3.51247 16.65C3.74323 16.3424 4.03626 16.0494 4.26965 15.8161C4.27745 15.8083 4.2852 15.8006 4.29287 15.7929C4.55594 15.5298 4.75095 15.3321 4.88748 15.15C4.96287 15.0495 4.99021 14.9922 4.99911 14.9714C4.99535 14.9112 4.9803 14.882 4.9739 14.8715C4.96613 14.8588 4.95382 14.845 4.92776 14.8319C4.87723 14.8067 4.71156 14.7623 4.44719 14.8944C3.95321 15.1414 3.35254 14.9412 3.10555 14.4472C2.85856 13.9533 3.05878 13.3526 3.55276 13.1056C4.28839 12.7378 5.12272 12.6934 5.82219 13.0431Z"
|
|
1249
|
+
fill="currentColor"
|
|
1250
|
+
></path></svg
|
|
1251
|
+
>
|
|
1252
|
+
</button>
|
|
1253
|
+
|
|
1254
|
+
<button
|
|
1255
|
+
aria-label="Task list"
|
|
1256
|
+
type="button"
|
|
1257
|
+
onclick={() => $editor.chain().focus().toggleTaskList().run()}
|
|
1258
|
+
class={$editor.isActive("taskList") ? "is-active" : ""}
|
|
1259
|
+
>
|
|
1260
|
+
<svg
|
|
1261
|
+
width="24"
|
|
1262
|
+
height="24"
|
|
1263
|
+
class="tiptap-button-icon"
|
|
1264
|
+
viewBox="0 0 24 24"
|
|
1265
|
+
fill="currentColor"
|
|
1266
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1267
|
+
><path
|
|
1268
|
+
fill-rule="evenodd"
|
|
1269
|
+
clip-rule="evenodd"
|
|
1270
|
+
d="M2 6C2 4.89543 2.89543 4 4 4H8C9.10457 4 10 4.89543 10 6V10C10 11.1046 9.10457 12 8 12H4C2.89543 12 2 11.1046 2 10V6ZM8 6H4V10H8V6Z"
|
|
1271
|
+
fill="currentColor"
|
|
1272
|
+
></path><path
|
|
1273
|
+
fill-rule="evenodd"
|
|
1274
|
+
clip-rule="evenodd"
|
|
1275
|
+
d="M9.70711 14.2929C10.0976 14.6834 10.0976 15.3166 9.70711 15.7071L5.70711 19.7071C5.31658 20.0976 4.68342 20.0976 4.29289 19.7071L2.29289 17.7071C1.90237 17.3166 1.90237 16.6834 2.29289 16.2929C2.68342 15.9024 3.31658 15.9024 3.70711 16.2929L5 17.5858L8.29289 14.2929C8.68342 13.9024 9.31658 13.9024 9.70711 14.2929Z"
|
|
1276
|
+
fill="currentColor"
|
|
1277
|
+
></path><path
|
|
1278
|
+
fill-rule="evenodd"
|
|
1279
|
+
clip-rule="evenodd"
|
|
1280
|
+
d="M12 6C12 5.44772 12.4477 5 13 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H13C12.4477 7 12 6.55228 12 6Z"
|
|
1281
|
+
fill="currentColor"
|
|
1282
|
+
></path><path
|
|
1283
|
+
fill-rule="evenodd"
|
|
1284
|
+
clip-rule="evenodd"
|
|
1285
|
+
d="M12 12C12 11.4477 12.4477 11 13 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H13C12.4477 13 12 12.5523 12 12Z"
|
|
1286
|
+
fill="currentColor"
|
|
1287
|
+
></path><path
|
|
1288
|
+
fill-rule="evenodd"
|
|
1289
|
+
clip-rule="evenodd"
|
|
1290
|
+
d="M12 18C12 17.4477 12.4477 17 13 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H13C12.4477 19 12 18.5523 12 18Z"
|
|
1291
|
+
fill="currentColor"
|
|
1292
|
+
></path></svg
|
|
1293
|
+
>
|
|
1294
|
+
</button>
|
|
1295
|
+
</div>
|
|
1296
|
+
{:else if activeDropdownType === "text-color-dropdown"}
|
|
1297
|
+
<div class="fl-editor-color-palette">
|
|
1298
|
+
<button
|
|
1299
|
+
class="fl-color-swatch fl-color-picker-btn"
|
|
1300
|
+
aria-label="Text color picker"
|
|
1301
|
+
type="button"
|
|
1302
|
+
>
|
|
1303
|
+
<input
|
|
1304
|
+
type="color"
|
|
1305
|
+
onblur={(event: any) => {
|
|
1306
|
+
const inclued = recentCustomColors.includes(event?.target?.value);
|
|
1307
|
+
if (!inclued) {
|
|
1308
|
+
recentCustomColors = [...recentCustomColors, event?.target?.value];
|
|
1309
|
+
}
|
|
1310
|
+
$editor.chain().focus().setColor(event?.target?.value).run();
|
|
1311
|
+
hideDropdown();
|
|
1312
|
+
}}
|
|
1313
|
+
onchange={(event: any) => {
|
|
1314
|
+
const inclued = recentCustomColors.includes(event?.target?.value);
|
|
1315
|
+
if (!inclued) {
|
|
1316
|
+
recentCustomColors = [...recentCustomColors, event?.target?.value];
|
|
1317
|
+
}
|
|
1318
|
+
$editor.chain().focus().setColor(event?.target?.value).run();
|
|
1319
|
+
hideDropdown();
|
|
1320
|
+
}}
|
|
1321
|
+
value={rgbToHex($editor?.getAttributes("textStyle")?.color)}
|
|
1322
|
+
data-testid="setColor"
|
|
1323
|
+
id="colorPicker"
|
|
1324
|
+
/>
|
|
1325
|
+
</button>
|
|
1326
|
+
|
|
1327
|
+
{#each TEXT_COLOR_PALETTE as color}
|
|
1328
|
+
<button
|
|
1329
|
+
class="fl-color-swatch"
|
|
1330
|
+
class:active={$editor?.isActive("textStyle", {
|
|
1331
|
+
color: color,
|
|
1332
|
+
})}
|
|
1333
|
+
onclick={() => {
|
|
1334
|
+
$editor?.chain().focus().setColor(color).run();
|
|
1335
|
+
hideDropdown();
|
|
1336
|
+
}}
|
|
1337
|
+
style="background-color: {color};"
|
|
1338
|
+
aria-label={color}
|
|
806
1339
|
>
|
|
807
|
-
<svg width="24" height="24" class="tiptap-button-icon" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 6C7 5.44772 7.44772 5 8 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H8C7.44772 7 7 6.55228 7 6Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M7 12C7 11.4477 7.44772 11 8 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H8C7.44772 13 7 12.5523 7 12Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M7 18C7 17.4477 7.44772 17 8 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H8C7.44772 19 7 18.5523 7 18Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M2 6C2 5.44772 2.44772 5 3 5H3.01C3.56228 5 4.01 5.44772 4.01 6C4.01 6.55228 3.56228 7 3.01 7H3C2.44772 7 2 6.55228 2 6Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 11.4477 2.44772 11 3 11H3.01C3.56228 11 4.01 11.4477 4.01 12C4.01 12.5523 3.56228 13 3.01 13H3C2.44772 13 2 12.5523 2 12Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M2 18C2 17.4477 2.44772 17 3 17H3.01C3.56228 17 4.01 17.4477 4.01 18C4.01 18.5523 3.56228 19 3.01 19H3C2.44772 19 2 18.5523 2 18Z" fill="currentColor"></path></svg>
|
|
808
1340
|
</button>
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
1341
|
+
{/each}
|
|
1342
|
+
|
|
1343
|
+
<button
|
|
1344
|
+
class="fl-color-swatch unset-color"
|
|
1345
|
+
onclick={() => {
|
|
1346
|
+
$editor?.chain().focus().unsetColor().run();
|
|
1347
|
+
hideDropdown();
|
|
1348
|
+
}}
|
|
1349
|
+
style="background-color: #ffffff;"
|
|
1350
|
+
aria-label="Unset color"
|
|
1351
|
+
>
|
|
1352
|
+
</button>
|
|
1353
|
+
|
|
1354
|
+
{#if recentCustomColors.length > 0}
|
|
1355
|
+
{#each recentCustomColors as color}
|
|
1356
|
+
<button
|
|
1357
|
+
class="fl-color-swatch"
|
|
1358
|
+
class:active={$editor?.isActive("textStyle", {
|
|
1359
|
+
color: color,
|
|
1360
|
+
})}
|
|
1361
|
+
onclick={() => {
|
|
1362
|
+
$editor?.chain().focus().setColor(color).run();
|
|
1363
|
+
hideDropdown();
|
|
1364
|
+
}}
|
|
1365
|
+
style="background-color: {color};"
|
|
1366
|
+
aria-label={color}
|
|
1367
|
+
>
|
|
1368
|
+
</button>
|
|
1369
|
+
{/each}
|
|
1370
|
+
{:else}
|
|
1371
|
+
<button
|
|
1372
|
+
class="fl-color-swatch"
|
|
1373
|
+
style="outline: 1px dashed #ffffff66;background: transparent;"
|
|
1374
|
+
onclick={() => alert("Not implemented yet")}
|
|
1375
|
+
aria-label="Add new color"
|
|
814
1376
|
>
|
|
815
|
-
<svg
|
|
1377
|
+
<svg
|
|
1378
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1379
|
+
fill="none"
|
|
1380
|
+
viewBox="0 0 24 24"
|
|
1381
|
+
stroke-width="1.5"
|
|
1382
|
+
stroke="currentColor"
|
|
1383
|
+
class="size-6"
|
|
1384
|
+
style="
|
|
1385
|
+
width: 11px;
|
|
1386
|
+
height: 11px;
|
|
1387
|
+
"
|
|
1388
|
+
>
|
|
1389
|
+
<path
|
|
1390
|
+
stroke-linecap="round"
|
|
1391
|
+
stroke-linejoin="round"
|
|
1392
|
+
d="M12 4.5v15m7.5-7.5h-15"
|
|
1393
|
+
></path>
|
|
1394
|
+
</svg>
|
|
816
1395
|
</button>
|
|
817
1396
|
|
|
818
|
-
<button
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
1397
|
+
<button
|
|
1398
|
+
class="fl-color-swatch"
|
|
1399
|
+
style="outline: 1px dashed #ffffff66;background: transparent;"
|
|
1400
|
+
onclick={() => alert("Not implemented yet")}
|
|
1401
|
+
aria-label="Add new color"
|
|
822
1402
|
>
|
|
823
|
-
<svg
|
|
1403
|
+
<svg
|
|
1404
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1405
|
+
fill="none"
|
|
1406
|
+
viewBox="0 0 24 24"
|
|
1407
|
+
stroke-width="1.5"
|
|
1408
|
+
stroke="currentColor"
|
|
1409
|
+
class="size-6"
|
|
1410
|
+
style="
|
|
1411
|
+
width: 11px;
|
|
1412
|
+
height: 11px;
|
|
1413
|
+
"
|
|
1414
|
+
>
|
|
1415
|
+
<path
|
|
1416
|
+
stroke-linecap="round"
|
|
1417
|
+
stroke-linejoin="round"
|
|
1418
|
+
d="M12 4.5v15m7.5-7.5h-15"
|
|
1419
|
+
></path>
|
|
1420
|
+
</svg>
|
|
824
1421
|
</button>
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
1422
|
+
{/if}
|
|
1423
|
+
</div>
|
|
1424
|
+
{/if}
|
|
1425
|
+
</div>
|
|
829
1426
|
|
|
830
1427
|
<style>
|
|
831
1428
|
.flex-auto {
|
|
@@ -902,7 +1499,7 @@
|
|
|
902
1499
|
.special-box-icon {
|
|
903
1500
|
width: 16px;
|
|
904
1501
|
height: 16px;
|
|
905
|
-
display: flex
|
|
1502
|
+
display: flex;
|
|
906
1503
|
align-items: center;
|
|
907
1504
|
justify-content: center;
|
|
908
1505
|
font-weight: 500;
|
|
@@ -913,4 +1510,89 @@
|
|
|
913
1510
|
outline: 1px dashed #818181;
|
|
914
1511
|
scale: 1.1;
|
|
915
1512
|
}
|
|
916
|
-
|
|
1513
|
+
|
|
1514
|
+
.fl-button-color-text-popover {
|
|
1515
|
+
color: inherit;
|
|
1516
|
+
width: 16px;
|
|
1517
|
+
height: 16px;
|
|
1518
|
+
border-radius: 100%;
|
|
1519
|
+
border: 1px solid #d7d7d78a;
|
|
1520
|
+
box-sizing: border-box;
|
|
1521
|
+
display: flex;
|
|
1522
|
+
align-items: center;
|
|
1523
|
+
justify-content: center;
|
|
1524
|
+
}
|
|
1525
|
+
|
|
1526
|
+
.fl-editor-color-palette {
|
|
1527
|
+
width: 100%;
|
|
1528
|
+
display: grid;
|
|
1529
|
+
grid-template-columns: repeat(7, 1fr);
|
|
1530
|
+
gap: 6px;
|
|
1531
|
+
align-items: center;
|
|
1532
|
+
|
|
1533
|
+
.fl-color-swatch {
|
|
1534
|
+
display: flex;
|
|
1535
|
+
min-width: 17px;
|
|
1536
|
+
border-radius: 100%;
|
|
1537
|
+
align-items: center;
|
|
1538
|
+
justify-content: center;
|
|
1539
|
+
outline: 1px solid #83828238;
|
|
1540
|
+
position: relative;
|
|
1541
|
+
aspect-ratio: 1;
|
|
1542
|
+
border: none;
|
|
1543
|
+
padding: 0;
|
|
1544
|
+
cursor: pointer;
|
|
1545
|
+
|
|
1546
|
+
&.active {
|
|
1547
|
+
box-shadow: 0 0 0 2px #ffffff30;
|
|
1548
|
+
}
|
|
1549
|
+
|
|
1550
|
+
&.unset-color::after {
|
|
1551
|
+
content: "";
|
|
1552
|
+
width: 2px;
|
|
1553
|
+
height: 100%;
|
|
1554
|
+
background: red;
|
|
1555
|
+
position: absolute;
|
|
1556
|
+
transform: rotate(30deg) scaleY(1.2);
|
|
1557
|
+
}
|
|
1558
|
+
}
|
|
1559
|
+
|
|
1560
|
+
input[type="color"] {
|
|
1561
|
+
display: inline-flex;
|
|
1562
|
+
vertical-align: bottom;
|
|
1563
|
+
border: none;
|
|
1564
|
+
border-radius: var(--radius);
|
|
1565
|
+
padding: 0;
|
|
1566
|
+
min-width: 17px;
|
|
1567
|
+
max-height: 17px;
|
|
1568
|
+
aspect-ratio: 1;
|
|
1569
|
+
background: transparent;
|
|
1570
|
+
width: auto;
|
|
1571
|
+
border-radius: 100%;
|
|
1572
|
+
|
|
1573
|
+
&::-webkit-color-swatch-wrapper {
|
|
1574
|
+
padding: 0;
|
|
1575
|
+
}
|
|
1576
|
+
|
|
1577
|
+
&::-webkit-color-swatch {
|
|
1578
|
+
border: 0;
|
|
1579
|
+
border-radius: var(--radius);
|
|
1580
|
+
}
|
|
1581
|
+
|
|
1582
|
+
&::-moz-color-swatch {
|
|
1583
|
+
border: 0;
|
|
1584
|
+
border-radius: var(--radius);
|
|
1585
|
+
}
|
|
1586
|
+
}
|
|
1587
|
+
|
|
1588
|
+
.fl-color-picker-btn {
|
|
1589
|
+
cursor: pointer;
|
|
1590
|
+
position: relative;
|
|
1591
|
+
background: conic-gradient(in hsl longer hue, red 0 100%);
|
|
1592
|
+
|
|
1593
|
+
& input {
|
|
1594
|
+
opacity: 0;
|
|
1595
|
+
}
|
|
1596
|
+
}
|
|
1597
|
+
}
|
|
1598
|
+
</style>
|