@flexiui/svelte-rich-text 0.0.15 → 0.0.17
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 -181
- package/dist/RichText.svelte.d.ts +1 -0
- 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,9 +143,33 @@
|
|
|
104
143
|
let currentTriggerEl: HTMLElement | null = null;
|
|
105
144
|
let activeDropdownType = $state(null);
|
|
106
145
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
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[];
|
|
110
173
|
|
|
111
174
|
function toogleDropdown(el: HTMLElement, type: string = null) {
|
|
112
175
|
if (!el) return;
|
|
@@ -139,10 +202,7 @@
|
|
|
139
202
|
const target = e.target as Node;
|
|
140
203
|
|
|
141
204
|
// Excepciones: tooltip, trigger actual, y el drag-area contenedor
|
|
142
|
-
if (
|
|
143
|
-
tooltip.contains(target) ||
|
|
144
|
-
currentTriggerEl?.contains(target)
|
|
145
|
-
) {
|
|
205
|
+
if (tooltip.contains(target) || currentTriggerEl?.contains(target)) {
|
|
146
206
|
return; // no cerrar
|
|
147
207
|
}
|
|
148
208
|
|
|
@@ -152,9 +212,7 @@
|
|
|
152
212
|
function updatePosition(el: HTMLElement) {
|
|
153
213
|
computePosition(el, tooltip, {
|
|
154
214
|
placement: "bottom",
|
|
155
|
-
middleware: [
|
|
156
|
-
offset(4),
|
|
157
|
-
],
|
|
215
|
+
middleware: [offset(4)],
|
|
158
216
|
}).then(({ x, y }) => {
|
|
159
217
|
tooltipX = x;
|
|
160
218
|
tooltipY = y;
|
|
@@ -176,10 +234,15 @@
|
|
|
176
234
|
|
|
177
235
|
onCreate: ({ editor }) => {
|
|
178
236
|
editorEvents.onCreate({ editor });
|
|
237
|
+
migrateMathStrings(editor);
|
|
179
238
|
},
|
|
180
239
|
|
|
181
240
|
onUpdate: ({ editor }) => {
|
|
182
|
-
editorEvents.onUpdate({
|
|
241
|
+
editorEvents.onUpdate({
|
|
242
|
+
editor,
|
|
243
|
+
html: editor.getHTML(),
|
|
244
|
+
json: editor.getJSON(),
|
|
245
|
+
});
|
|
183
246
|
},
|
|
184
247
|
|
|
185
248
|
onPaste: (event, slice) => {
|
|
@@ -202,7 +265,15 @@
|
|
|
202
265
|
editorEvents.onDrop({ editor, event, slice, moved });
|
|
203
266
|
},
|
|
204
267
|
onDelete({ type, deletedRange, newRange, partial, from, to }) {
|
|
205
|
-
editorEvents.onDelete({
|
|
268
|
+
editorEvents.onDelete({
|
|
269
|
+
editor,
|
|
270
|
+
type,
|
|
271
|
+
deletedRange,
|
|
272
|
+
newRange,
|
|
273
|
+
partial,
|
|
274
|
+
from,
|
|
275
|
+
to,
|
|
276
|
+
});
|
|
206
277
|
},
|
|
207
278
|
onContentError({ editor, error, disableCollaboration }) {
|
|
208
279
|
editorEvents.onContentError({ editor, error, disableCollaboration });
|
|
@@ -256,6 +327,28 @@
|
|
|
256
327
|
$editor.chain().focus().specialBox().run();
|
|
257
328
|
}
|
|
258
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
|
+
}
|
|
259
352
|
</script>
|
|
260
353
|
|
|
261
354
|
<div class="fl-rich-text {className}" class:editable>
|
|
@@ -306,76 +399,235 @@
|
|
|
306
399
|
</button>
|
|
307
400
|
</div>
|
|
308
401
|
|
|
309
|
-
<div class="fl-rich-text-toolbar-group">
|
|
402
|
+
<div class="fl-rich-text-toolbar-group">
|
|
310
403
|
<button
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
{#if $editor.isActive("heading", { level: Number(heading.level) })}
|
|
320
|
-
{@html heading.icon}
|
|
321
|
-
{/if}
|
|
322
|
-
{/each}
|
|
323
|
-
|
|
324
|
-
{#if !$editor.isActive("heading")}
|
|
325
|
-
<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}
|
|
326
412
|
{/if}
|
|
413
|
+
{/each}
|
|
327
414
|
|
|
415
|
+
{#if !$editor.isActive("heading")}
|
|
328
416
|
<svg
|
|
329
|
-
|
|
330
|
-
|
|
417
|
+
width="24"
|
|
418
|
+
height="24"
|
|
419
|
+
class="tiptap-button-icon"
|
|
420
|
+
viewBox="0 0 24 24"
|
|
421
|
+
fill="currentColor"
|
|
331
422
|
xmlns="http://www.w3.org/2000/svg"
|
|
332
|
-
fill="none"
|
|
333
|
-
viewBox="0 0 10 6"
|
|
334
423
|
><path
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
stroke-linejoin="round"
|
|
338
|
-
stroke-width="2"
|
|
339
|
-
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"
|
|
340
426
|
></path></svg
|
|
341
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
|
+
>
|
|
342
444
|
</button>
|
|
343
445
|
</div>
|
|
344
446
|
|
|
345
447
|
<div role="group" class="fl-rich-text-toolbar-group">
|
|
346
|
-
<button
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
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")}
|
|
497
|
+
<svg
|
|
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"
|
|
543
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
544
|
+
><path
|
|
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"
|
|
569
|
+
></path></svg
|
|
570
|
+
>
|
|
571
|
+
{:else}
|
|
362
572
|
<svg
|
|
363
|
-
|
|
364
|
-
|
|
573
|
+
width="24"
|
|
574
|
+
height="24"
|
|
575
|
+
class="tiptap-button-icon"
|
|
576
|
+
viewBox="0 0 24 24"
|
|
577
|
+
fill="currentColor"
|
|
365
578
|
xmlns="http://www.w3.org/2000/svg"
|
|
366
|
-
fill="none"
|
|
367
|
-
viewBox="0 0 10 6"
|
|
368
579
|
><path
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
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"
|
|
374
609
|
></path></svg
|
|
375
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
|
+
>
|
|
376
627
|
</button>
|
|
377
628
|
|
|
378
|
-
<button
|
|
629
|
+
<button
|
|
630
|
+
aria-label="Code block"
|
|
379
631
|
type="button"
|
|
380
632
|
onclick={() => $editor.chain().focus().toggleCodeBlock().run()}
|
|
381
633
|
class={$editor.isActive("codeBlock") ? "is-active" : ""}
|
|
@@ -406,7 +658,8 @@
|
|
|
406
658
|
>
|
|
407
659
|
</button>
|
|
408
660
|
|
|
409
|
-
<button
|
|
661
|
+
<button
|
|
662
|
+
aria-label="Blockquote"
|
|
410
663
|
type="button"
|
|
411
664
|
onclick={() => $editor.chain().focus().toggleBlockquote().run()}
|
|
412
665
|
class={$editor.isActive("blockquote") ? "is-active" : ""}
|
|
@@ -625,24 +878,63 @@
|
|
|
625
878
|
</button>
|
|
626
879
|
|
|
627
880
|
<button
|
|
881
|
+
aria-label="Toggle text color dropdown"
|
|
628
882
|
type="button"
|
|
629
|
-
onclick={() =>
|
|
630
|
-
class={$editor.isActive("textStyle", { color: "#958DF1" })
|
|
631
|
-
? "is-active"
|
|
632
|
-
: ""}
|
|
883
|
+
onclick={(e) => toogleDropdown(e.currentTarget, "text-color-dropdown")}
|
|
633
884
|
>
|
|
634
885
|
<span
|
|
635
|
-
|
|
886
|
+
class="fl-button-color-text-popover"
|
|
887
|
+
style="background: {$editor?.getAttributes('textStyle')?.color ||
|
|
888
|
+
'currentColor'}"
|
|
636
889
|
></span>
|
|
637
|
-
|
|
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
|
+
>
|
|
638
930
|
</button>
|
|
639
931
|
</div>
|
|
640
932
|
|
|
641
933
|
<div role="group" class="fl-rich-text-toolbar-group">
|
|
642
934
|
<button
|
|
643
935
|
type="button"
|
|
644
|
-
onclick={() => $editor.chain().focus().toggleTextAlign(
|
|
645
|
-
class:is-active={$editor.isActive({ textAlign:
|
|
936
|
+
onclick={() => $editor.chain().focus().toggleTextAlign("left").run()}
|
|
937
|
+
class:is-active={$editor.isActive({ textAlign: "left" })}
|
|
646
938
|
aria-label="Align left"
|
|
647
939
|
>
|
|
648
940
|
<svg
|
|
@@ -662,8 +954,9 @@
|
|
|
662
954
|
|
|
663
955
|
<button
|
|
664
956
|
type="button"
|
|
665
|
-
onclick={() =>
|
|
666
|
-
|
|
957
|
+
onclick={() =>
|
|
958
|
+
$editor.chain().focus().toggleTextAlign("center").run()}
|
|
959
|
+
class:is-active={$editor.isActive({ textAlign: "center" })}
|
|
667
960
|
aria-label="Align center"
|
|
668
961
|
>
|
|
669
962
|
<svg
|
|
@@ -683,8 +976,8 @@
|
|
|
683
976
|
|
|
684
977
|
<button
|
|
685
978
|
type="button"
|
|
686
|
-
onclick={() => $editor.chain().focus().toggleTextAlign(
|
|
687
|
-
class:is-active={$editor.isActive({ textAlign:
|
|
979
|
+
onclick={() => $editor.chain().focus().toggleTextAlign("right").run()}
|
|
980
|
+
class:is-active={$editor.isActive({ textAlign: "right" })}
|
|
688
981
|
aria-label="Align right"
|
|
689
982
|
>
|
|
690
983
|
<svg
|
|
@@ -703,10 +996,27 @@
|
|
|
703
996
|
</button>
|
|
704
997
|
|
|
705
998
|
<button
|
|
999
|
+
aria-label="Clear formatting"
|
|
706
1000
|
type="button"
|
|
707
1001
|
onclick={() => $editor.chain().focus().unsetAllMarks().run()}
|
|
708
1002
|
>
|
|
709
|
-
|
|
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
|
+
>
|
|
710
1020
|
</button>
|
|
711
1021
|
|
|
712
1022
|
<button
|
|
@@ -722,105 +1032,397 @@
|
|
|
722
1032
|
<EditorContent editor={$editor} class="fl-rich-text-content" />
|
|
723
1033
|
</div>
|
|
724
1034
|
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
{
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
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
|
|
739
1060
|
>
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
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
|
|
749
1079
|
>
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
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
|
|
759
1098
|
>
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
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
|
|
769
1117
|
>
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
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
|
|
779
1136
|
>
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
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
|
|
789
1155
|
>
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
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}
|
|
801
1339
|
>
|
|
802
|
-
<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>
|
|
803
1340
|
</button>
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
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"
|
|
809
1376
|
>
|
|
810
|
-
<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>
|
|
811
1395
|
</button>
|
|
812
1396
|
|
|
813
|
-
<button
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
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"
|
|
817
1402
|
>
|
|
818
|
-
<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>
|
|
819
1421
|
</button>
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
1422
|
+
{/if}
|
|
1423
|
+
</div>
|
|
1424
|
+
{/if}
|
|
1425
|
+
</div>
|
|
824
1426
|
|
|
825
1427
|
<style>
|
|
826
1428
|
.flex-auto {
|
|
@@ -897,7 +1499,7 @@
|
|
|
897
1499
|
.special-box-icon {
|
|
898
1500
|
width: 16px;
|
|
899
1501
|
height: 16px;
|
|
900
|
-
display: flex
|
|
1502
|
+
display: flex;
|
|
901
1503
|
align-items: center;
|
|
902
1504
|
justify-content: center;
|
|
903
1505
|
font-weight: 500;
|
|
@@ -908,4 +1510,89 @@
|
|
|
908
1510
|
outline: 1px dashed #818181;
|
|
909
1511
|
scale: 1.1;
|
|
910
1512
|
}
|
|
911
|
-
|
|
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>
|