@flexiui/svelte-rich-text 0.0.54 → 0.0.56
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 +1551 -1536
- package/dist/styles.css +9 -3
- package/package.json +1 -1
package/dist/RichText.svelte
CHANGED
|
@@ -1,69 +1,69 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import {
|
|
3
|
-
Mathematics,
|
|
4
|
-
migrateMathStrings,
|
|
5
|
-
} from "@tiptap/extension-mathematics";
|
|
6
|
-
|
|
7
|
-
import { HEADINGS, rgbToHex } from "./utils";
|
|
8
|
-
import "./styles.css";
|
|
9
|
-
import "katex/dist/katex.min.css";
|
|
10
|
-
|
|
11
|
-
import { onMount, onDestroy } from "svelte";
|
|
12
|
-
import type { Readable } from "svelte/store";
|
|
13
|
-
|
|
14
|
-
import {
|
|
15
|
-
createEditor,
|
|
16
|
-
Editor,
|
|
17
|
-
EditorContent,
|
|
18
|
-
BubbleMenu,
|
|
19
|
-
} from "svelte-tiptap";
|
|
20
|
-
|
|
21
|
-
import { computePosition, offset, autoUpdate } from "@floating-ui/dom";
|
|
22
|
-
import { getRichTextExtensions } from "./getExtensions";
|
|
23
|
-
import { CellSelection } from "prosemirror-tables";
|
|
24
|
-
|
|
25
|
-
export interface Props {
|
|
26
|
-
id?: string;
|
|
27
|
-
className?: string;
|
|
28
|
-
editable?: boolean;
|
|
29
|
-
content?: string | {type: string, content: any[]} | null;
|
|
30
|
-
customExtensions?: any[];
|
|
31
|
-
editorEvents?: {
|
|
32
|
-
onTransaction?: (params: any) => void;
|
|
33
|
-
onBeforeCreate?: (params: any) => void;
|
|
34
|
-
onCreate?: (params: any) => void;
|
|
35
|
-
onUpdate: (params: any) => void;
|
|
36
|
-
onFocus?: (params: any) => void;
|
|
37
|
-
onBlur?: (params: any) => void;
|
|
38
|
-
onDestroy?: (params: any) => void;
|
|
39
|
-
onDrop?: (params: any) => void;
|
|
40
|
-
onDelete?: (params: any) => void;
|
|
41
|
-
onContentError?: (params: any) => void;
|
|
42
|
-
onSelectionUpdate?: (params: any) => void;
|
|
43
|
-
onPaste?: (params: any) => void;
|
|
44
|
-
};
|
|
45
|
-
config?: {
|
|
46
|
-
editorAccentColor?: string;
|
|
47
|
-
editorBgColor?: string;
|
|
48
|
-
editorRadius?: string;
|
|
49
|
-
toolbarStickyPosition?: number;
|
|
50
|
-
toolbarZIndex?: number;
|
|
51
|
-
toolbarBgColor?: string;
|
|
52
|
-
toolbarTextColor?: string;
|
|
53
|
-
toolbarPadding?: string;
|
|
54
|
-
toolbarGap?: string;
|
|
55
|
-
docMaxWidth?: string;
|
|
56
|
-
docPadding?: string;
|
|
57
|
-
docBg?: string;
|
|
58
|
-
docMarginInline?: string;
|
|
59
|
-
docMarginBlock?: string;
|
|
60
|
-
docRadius?: string;
|
|
61
|
-
docTextColor?: string;
|
|
62
|
-
buttonStyle?: "accent-soft" | "accent-solid";
|
|
63
|
-
};
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
export type RichTextProps = Props;
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import {
|
|
3
|
+
Mathematics,
|
|
4
|
+
migrateMathStrings,
|
|
5
|
+
} from "@tiptap/extension-mathematics";
|
|
6
|
+
|
|
7
|
+
import { HEADINGS, rgbToHex } from "./utils";
|
|
8
|
+
import "./styles.css";
|
|
9
|
+
import "katex/dist/katex.min.css";
|
|
10
|
+
|
|
11
|
+
import { onMount, onDestroy } from "svelte";
|
|
12
|
+
import type { Readable } from "svelte/store";
|
|
13
|
+
|
|
14
|
+
import {
|
|
15
|
+
createEditor,
|
|
16
|
+
Editor,
|
|
17
|
+
EditorContent,
|
|
18
|
+
BubbleMenu,
|
|
19
|
+
} from "svelte-tiptap";
|
|
20
|
+
|
|
21
|
+
import { computePosition, offset, autoUpdate } from "@floating-ui/dom";
|
|
22
|
+
import { getRichTextExtensions } from "./getExtensions";
|
|
23
|
+
import { CellSelection } from "prosemirror-tables";
|
|
24
|
+
|
|
25
|
+
export interface Props {
|
|
26
|
+
id?: string;
|
|
27
|
+
className?: string;
|
|
28
|
+
editable?: boolean;
|
|
29
|
+
content?: string | {type: string, content: any[]} | null;
|
|
30
|
+
customExtensions?: any[];
|
|
31
|
+
editorEvents?: {
|
|
32
|
+
onTransaction?: (params: any) => void;
|
|
33
|
+
onBeforeCreate?: (params: any) => void;
|
|
34
|
+
onCreate?: (params: any) => void;
|
|
35
|
+
onUpdate: (params: any) => void;
|
|
36
|
+
onFocus?: (params: any) => void;
|
|
37
|
+
onBlur?: (params: any) => void;
|
|
38
|
+
onDestroy?: (params: any) => void;
|
|
39
|
+
onDrop?: (params: any) => void;
|
|
40
|
+
onDelete?: (params: any) => void;
|
|
41
|
+
onContentError?: (params: any) => void;
|
|
42
|
+
onSelectionUpdate?: (params: any) => void;
|
|
43
|
+
onPaste?: (params: any) => void;
|
|
44
|
+
};
|
|
45
|
+
config?: {
|
|
46
|
+
editorAccentColor?: string;
|
|
47
|
+
editorBgColor?: string;
|
|
48
|
+
editorRadius?: string;
|
|
49
|
+
toolbarStickyPosition?: number;
|
|
50
|
+
toolbarZIndex?: number;
|
|
51
|
+
toolbarBgColor?: string;
|
|
52
|
+
toolbarTextColor?: string;
|
|
53
|
+
toolbarPadding?: string;
|
|
54
|
+
toolbarGap?: string;
|
|
55
|
+
docMaxWidth?: string;
|
|
56
|
+
docPadding?: string;
|
|
57
|
+
docBg?: string;
|
|
58
|
+
docMarginInline?: string;
|
|
59
|
+
docMarginBlock?: string;
|
|
60
|
+
docRadius?: string;
|
|
61
|
+
docTextColor?: string;
|
|
62
|
+
buttonStyle?: "accent-soft" | "accent-solid";
|
|
63
|
+
};
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
export type RichTextProps = Props;
|
|
67
67
|
|
|
68
68
|
let {
|
|
69
69
|
id = "fl-rich-text-editor",
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
toolbarZIndex: 10,
|
|
100
100
|
toolbarPadding: "8px",
|
|
101
101
|
toolbarGap: "5px",
|
|
102
|
-
docMaxWidth: "
|
|
102
|
+
docMaxWidth: "1032px",
|
|
103
103
|
docPadding: "2rem",
|
|
104
104
|
docBg: "transparent",
|
|
105
105
|
docMarginInline: "auto",
|
|
@@ -163,9 +163,11 @@
|
|
|
163
163
|
let tooltip: HTMLDivElement = null as HTMLDivElement;
|
|
164
164
|
let cleanup: () => void;
|
|
165
165
|
let currentTriggerEl: HTMLElement | null = null;
|
|
166
|
+
|
|
166
167
|
let textColorDropdownTriggerEl: HTMLElement | null = $state(
|
|
167
168
|
null
|
|
168
169
|
) as HTMLElement;
|
|
170
|
+
|
|
169
171
|
let activeDropdownType = $state(null);
|
|
170
172
|
let enterPressed = $state(false);
|
|
171
173
|
let fontSize = $state(16) as number;
|
|
@@ -573,76 +575,15 @@
|
|
|
573
575
|
>
|
|
574
576
|
{#if editor}
|
|
575
577
|
<header class="fl-rich-text-toolbar">
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
>
|
|
585
|
-
<svg
|
|
586
|
-
width="24"
|
|
587
|
-
height="24"
|
|
588
|
-
class="tiptap-button-icon"
|
|
589
|
-
viewBox="0 0 24 24"
|
|
590
|
-
fill="currentColor"
|
|
591
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
592
|
-
><path
|
|
593
|
-
fill-rule="evenodd"
|
|
594
|
-
clip-rule="evenodd"
|
|
595
|
-
d="M9.70711 3.70711C10.0976 3.31658 10.0976 2.68342 9.70711 2.29289C9.31658 1.90237 8.68342 1.90237 8.29289 2.29289L3.29289 7.29289C2.90237 7.68342 2.90237 8.31658 3.29289 8.70711L8.29289 13.7071C8.68342 14.0976 9.31658 14.0976 9.70711 13.7071C10.0976 13.3166 10.0976 12.6834 9.70711 12.2929L6.41421 9H14.5C15.0909 9 15.6761 9.1164 16.2221 9.34254C16.768 9.56869 17.2641 9.90016 17.682 10.318C18.0998 10.7359 18.4313 11.232 18.6575 11.7779C18.8836 12.3239 19 12.9091 19 13.5C19 14.0909 18.8836 14.6761 18.6575 15.2221C18.4313 15.768 18.0998 16.2641 17.682 16.682C17.2641 17.0998 16.768 17.4313 16.2221 17.6575C15.6761 17.8836 15.0909 18 14.5 18H11C10.4477 18 10 18.4477 10 19C10 19.5523 10.4477 20 11 20H14.5C15.3536 20 16.1988 19.8319 16.9874 19.5052C17.7761 19.1786 18.4926 18.6998 19.0962 18.0962C19.6998 17.4926 20.1786 16.7761 20.5052 15.9874C20.8319 15.1988 21 14.3536 21 13.5C21 12.6464 20.8319 11.8012 20.5052 11.0126C20.1786 10.2239 19.6998 9.50739 19.0962 8.90381C18.4926 8.30022 17.7761 7.82144 16.9874 7.49478C16.1988 7.16813 15.3536 7 14.5 7H6.41421L9.70711 3.70711Z"
|
|
596
|
-
fill="currentColor"
|
|
597
|
-
></path></svg
|
|
598
|
-
>
|
|
599
|
-
</button>
|
|
600
|
-
|
|
601
|
-
<button
|
|
602
|
-
type="button"
|
|
603
|
-
onclick={() => $editor.chain().focus().redo().run()}
|
|
604
|
-
disabled={!$editor.can().chain().focus().redo().run()}
|
|
605
|
-
aria-label="Redo"
|
|
606
|
-
>
|
|
607
|
-
<svg
|
|
608
|
-
width="24"
|
|
609
|
-
height="24"
|
|
610
|
-
class="tiptap-button-icon"
|
|
611
|
-
viewBox="0 0 24 24"
|
|
612
|
-
fill="currentColor"
|
|
613
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
614
|
-
><path
|
|
615
|
-
fill-rule="evenodd"
|
|
616
|
-
clip-rule="evenodd"
|
|
617
|
-
d="M15.7071 2.29289C15.3166 1.90237 14.6834 1.90237 14.2929 2.29289C13.9024 2.68342 13.9024 3.31658 14.2929 3.70711L17.5858 7H9.5C7.77609 7 6.12279 7.68482 4.90381 8.90381C3.68482 10.1228 3 11.7761 3 13.5C3 14.3536 3.16813 15.1988 3.49478 15.9874C3.82144 16.7761 4.30023 17.4926 4.90381 18.0962C6.12279 19.3152 7.77609 20 9.5 20H13C13.5523 20 14 19.5523 14 19C14 18.4477 13.5523 18 13 18H9.5C8.30653 18 7.16193 17.5259 6.31802 16.682C5.90016 16.2641 5.56869 15.768 5.34254 15.2221C5.1164 14.6761 5 14.0909 5 13.5C5 12.3065 5.47411 11.1619 6.31802 10.318C7.16193 9.47411 8.30653 9 9.5 9H17.5858L14.2929 12.2929C13.9024 12.6834 13.9024 13.3166 14.2929 13.7071C14.6834 14.0976 15.3166 14.0976 15.7071 13.7071L20.7071 8.70711C21.0976 8.31658 21.0976 7.68342 20.7071 7.29289L15.7071 2.29289Z"
|
|
618
|
-
fill="currentColor"
|
|
619
|
-
></path></svg
|
|
578
|
+
<div class="fl-rich-text-toolbar-container container">
|
|
579
|
+
<!-- Undo/Redo -->
|
|
580
|
+
<div role="group" class="fl-rich-text-toolbar-group">
|
|
581
|
+
<button
|
|
582
|
+
type="button"
|
|
583
|
+
onclick={() => $editor.chain().focus().undo().run()}
|
|
584
|
+
disabled={!$editor.can().chain().focus().undo().run()}
|
|
585
|
+
aria-label="Undo"
|
|
620
586
|
>
|
|
621
|
-
</button>
|
|
622
|
-
</div>
|
|
623
|
-
|
|
624
|
-
<!-- Heading & list dropdowns -->
|
|
625
|
-
<div class="fl-rich-text-toolbar-group">
|
|
626
|
-
<!-- Heading -->
|
|
627
|
-
<button
|
|
628
|
-
type="button"
|
|
629
|
-
onclick={(e) => toogleDropdown(e.currentTarget, "headings-dropdown")}
|
|
630
|
-
class:is-active={$editor.isActive("heading") ||
|
|
631
|
-
$editor.isActive("h1")}
|
|
632
|
-
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
633
|
-
aria-label="Heading"
|
|
634
|
-
>
|
|
635
|
-
{#if $editor.isActive("heading")}
|
|
636
|
-
{#each HEADINGS as heading}
|
|
637
|
-
{#if $editor.isActive( "heading", { level: Number(heading.level) } )}
|
|
638
|
-
{@html heading.icon}
|
|
639
|
-
{/if}
|
|
640
|
-
{/each}
|
|
641
|
-
{:else if $editor.isActive("h1")}
|
|
642
|
-
{@html HEADINGS[0].icon}
|
|
643
|
-
{/if}
|
|
644
|
-
|
|
645
|
-
{#if !$editor.isActive("heading") && !$editor.isActive("h1")}
|
|
646
587
|
<svg
|
|
647
588
|
width="24"
|
|
648
589
|
height="24"
|
|
@@ -651,45 +592,20 @@
|
|
|
651
592
|
fill="currentColor"
|
|
652
593
|
xmlns="http://www.w3.org/2000/svg"
|
|
653
594
|
><path
|
|
654
|
-
|
|
595
|
+
fill-rule="evenodd"
|
|
596
|
+
clip-rule="evenodd"
|
|
597
|
+
d="M9.70711 3.70711C10.0976 3.31658 10.0976 2.68342 9.70711 2.29289C9.31658 1.90237 8.68342 1.90237 8.29289 2.29289L3.29289 7.29289C2.90237 7.68342 2.90237 8.31658 3.29289 8.70711L8.29289 13.7071C8.68342 14.0976 9.31658 14.0976 9.70711 13.7071C10.0976 13.3166 10.0976 12.6834 9.70711 12.2929L6.41421 9H14.5C15.0909 9 15.6761 9.1164 16.2221 9.34254C16.768 9.56869 17.2641 9.90016 17.682 10.318C18.0998 10.7359 18.4313 11.232 18.6575 11.7779C18.8836 12.3239 19 12.9091 19 13.5C19 14.0909 18.8836 14.6761 18.6575 15.2221C18.4313 15.768 18.0998 16.2641 17.682 16.682C17.2641 17.0998 16.768 17.4313 16.2221 17.6575C15.6761 17.8836 15.0909 18 14.5 18H11C10.4477 18 10 18.4477 10 19C10 19.5523 10.4477 20 11 20H14.5C15.3536 20 16.1988 19.8319 16.9874 19.5052C17.7761 19.1786 18.4926 18.6998 19.0962 18.0962C19.6998 17.4926 20.1786 16.7761 20.5052 15.9874C20.8319 15.1988 21 14.3536 21 13.5C21 12.6464 20.8319 11.8012 20.5052 11.0126C20.1786 10.2239 19.6998 9.50739 19.0962 8.90381C18.4926 8.30022 17.7761 7.82144 16.9874 7.49478C16.1988 7.16813 15.3536 7 14.5 7H6.41421L9.70711 3.70711Z"
|
|
655
598
|
fill="currentColor"
|
|
656
599
|
></path></svg
|
|
657
600
|
>
|
|
658
|
-
|
|
601
|
+
</button>
|
|
659
602
|
|
|
660
|
-
<
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
viewBox="0 0 20 12"
|
|
603
|
+
<button
|
|
604
|
+
type="button"
|
|
605
|
+
onclick={() => $editor.chain().focus().redo().run()}
|
|
606
|
+
disabled={!$editor.can().chain().focus().redo().run()}
|
|
607
|
+
aria-label="Redo"
|
|
666
608
|
>
|
|
667
|
-
<defs>
|
|
668
|
-
<symbol id="dropdown-arrow" viewBox="0 0 10 6" fill="none">
|
|
669
|
-
<path
|
|
670
|
-
stroke="currentColor"
|
|
671
|
-
stroke-linecap="round"
|
|
672
|
-
stroke-linejoin="round"
|
|
673
|
-
stroke-width="2"
|
|
674
|
-
d="m1 1 4 4 4-4"
|
|
675
|
-
></path>
|
|
676
|
-
</symbol>
|
|
677
|
-
</defs>
|
|
678
|
-
<use href="#dropdown-arrow"></use>
|
|
679
|
-
</svg>
|
|
680
|
-
</button>
|
|
681
|
-
|
|
682
|
-
<!-- List -->
|
|
683
|
-
<button
|
|
684
|
-
aria-label="List"
|
|
685
|
-
type="button"
|
|
686
|
-
onclick={(e) => toogleDropdown(e.currentTarget, "list-dropdown")}
|
|
687
|
-
class:is-active={$editor.isActive("bulletList") ||
|
|
688
|
-
$editor.isActive("orderedList") ||
|
|
689
|
-
$editor.isActive("taskList")}
|
|
690
|
-
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
691
|
-
>
|
|
692
|
-
{#if $editor.isActive("bulletList")}
|
|
693
609
|
<svg
|
|
694
610
|
width="24"
|
|
695
611
|
height="24"
|
|
@@ -700,36 +616,260 @@
|
|
|
700
616
|
><path
|
|
701
617
|
fill-rule="evenodd"
|
|
702
618
|
clip-rule="evenodd"
|
|
703
|
-
d="
|
|
619
|
+
d="M15.7071 2.29289C15.3166 1.90237 14.6834 1.90237 14.2929 2.29289C13.9024 2.68342 13.9024 3.31658 14.2929 3.70711L17.5858 7H9.5C7.77609 7 6.12279 7.68482 4.90381 8.90381C3.68482 10.1228 3 11.7761 3 13.5C3 14.3536 3.16813 15.1988 3.49478 15.9874C3.82144 16.7761 4.30023 17.4926 4.90381 18.0962C6.12279 19.3152 7.77609 20 9.5 20H13C13.5523 20 14 19.5523 14 19C14 18.4477 13.5523 18 13 18H9.5C8.30653 18 7.16193 17.5259 6.31802 16.682C5.90016 16.2641 5.56869 15.768 5.34254 15.2221C5.1164 14.6761 5 14.0909 5 13.5C5 12.3065 5.47411 11.1619 6.31802 10.318C7.16193 9.47411 8.30653 9 9.5 9H17.5858L14.2929 12.2929C13.9024 12.6834 13.9024 13.3166 14.2929 13.7071C14.6834 14.0976 15.3166 14.0976 15.7071 13.7071L20.7071 8.70711C21.0976 8.31658 21.0976 7.68342 20.7071 7.29289L15.7071 2.29289Z"
|
|
704
620
|
fill="currentColor"
|
|
705
|
-
></path
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
621
|
+
></path></svg
|
|
622
|
+
>
|
|
623
|
+
</button>
|
|
624
|
+
</div>
|
|
625
|
+
|
|
626
|
+
<!-- Heading & list dropdowns -->
|
|
627
|
+
<div class="fl-rich-text-toolbar-group">
|
|
628
|
+
<!-- Heading -->
|
|
629
|
+
<button
|
|
630
|
+
type="button"
|
|
631
|
+
onclick={(e) => toogleDropdown(e.currentTarget, "headings-dropdown")}
|
|
632
|
+
class:is-active={$editor.isActive("heading") ||
|
|
633
|
+
$editor.isActive("h1")}
|
|
634
|
+
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
635
|
+
aria-label="Heading"
|
|
636
|
+
>
|
|
637
|
+
{#if $editor.isActive("heading")}
|
|
638
|
+
{#each HEADINGS as heading}
|
|
639
|
+
{#if $editor.isActive( "heading", { level: Number(heading.level) } )}
|
|
640
|
+
{@html heading.icon}
|
|
641
|
+
{/if}
|
|
642
|
+
{/each}
|
|
643
|
+
{:else if $editor.isActive("h1")}
|
|
644
|
+
{@html HEADINGS[0].icon}
|
|
645
|
+
{/if}
|
|
646
|
+
|
|
647
|
+
{#if !$editor.isActive("heading") && !$editor.isActive("h1")}
|
|
648
|
+
<svg
|
|
649
|
+
width="24"
|
|
650
|
+
height="24"
|
|
651
|
+
class="tiptap-button-icon"
|
|
652
|
+
viewBox="0 0 24 24"
|
|
709
653
|
fill="currentColor"
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
654
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
655
|
+
><path
|
|
656
|
+
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"
|
|
657
|
+
fill="currentColor"
|
|
658
|
+
></path></svg
|
|
659
|
+
>
|
|
660
|
+
{/if}
|
|
661
|
+
|
|
662
|
+
<svg
|
|
663
|
+
class="toogle-dropdown-button-icon"
|
|
664
|
+
aria-hidden="true"
|
|
665
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
666
|
+
fill="none"
|
|
667
|
+
viewBox="0 0 20 12"
|
|
668
|
+
>
|
|
669
|
+
<defs>
|
|
670
|
+
<symbol id="dropdown-arrow" viewBox="0 0 10 6" fill="none">
|
|
671
|
+
<path
|
|
672
|
+
stroke="currentColor"
|
|
673
|
+
stroke-linecap="round"
|
|
674
|
+
stroke-linejoin="round"
|
|
675
|
+
stroke-width="2"
|
|
676
|
+
d="m1 1 4 4 4-4"
|
|
677
|
+
></path>
|
|
678
|
+
</symbol>
|
|
679
|
+
</defs>
|
|
680
|
+
<use href="#dropdown-arrow"></use>
|
|
681
|
+
</svg>
|
|
682
|
+
</button>
|
|
683
|
+
|
|
684
|
+
<!-- List -->
|
|
685
|
+
<button
|
|
686
|
+
aria-label="List"
|
|
687
|
+
type="button"
|
|
688
|
+
onclick={(e) => toogleDropdown(e.currentTarget, "list-dropdown")}
|
|
689
|
+
class:is-active={$editor.isActive("bulletList") ||
|
|
690
|
+
$editor.isActive("orderedList") ||
|
|
691
|
+
$editor.isActive("taskList")}
|
|
692
|
+
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
693
|
+
>
|
|
694
|
+
{#if $editor.isActive("bulletList")}
|
|
695
|
+
<svg
|
|
696
|
+
width="24"
|
|
697
|
+
height="24"
|
|
698
|
+
class="tiptap-button-icon"
|
|
699
|
+
viewBox="0 0 24 24"
|
|
714
700
|
fill="currentColor"
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
701
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
702
|
+
><path
|
|
703
|
+
fill-rule="evenodd"
|
|
704
|
+
clip-rule="evenodd"
|
|
705
|
+
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"
|
|
706
|
+
fill="currentColor"
|
|
707
|
+
></path><path
|
|
708
|
+
fill-rule="evenodd"
|
|
709
|
+
clip-rule="evenodd"
|
|
710
|
+
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"
|
|
711
|
+
fill="currentColor"
|
|
712
|
+
></path><path
|
|
713
|
+
fill-rule="evenodd"
|
|
714
|
+
clip-rule="evenodd"
|
|
715
|
+
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"
|
|
716
|
+
fill="currentColor"
|
|
717
|
+
></path><path
|
|
718
|
+
fill-rule="evenodd"
|
|
719
|
+
clip-rule="evenodd"
|
|
720
|
+
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"
|
|
721
|
+
fill="currentColor"
|
|
722
|
+
></path><path
|
|
723
|
+
fill-rule="evenodd"
|
|
724
|
+
clip-rule="evenodd"
|
|
725
|
+
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"
|
|
726
|
+
fill="currentColor"
|
|
727
|
+
></path><path
|
|
728
|
+
fill-rule="evenodd"
|
|
729
|
+
clip-rule="evenodd"
|
|
730
|
+
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"
|
|
731
|
+
fill="currentColor"
|
|
732
|
+
></path></svg
|
|
733
|
+
>
|
|
734
|
+
{:else if $editor.isActive("orderedList")}
|
|
735
|
+
<svg
|
|
736
|
+
width="24"
|
|
737
|
+
height="24"
|
|
738
|
+
class="tiptap-button-icon"
|
|
739
|
+
viewBox="0 0 24 24"
|
|
719
740
|
fill="currentColor"
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
741
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
742
|
+
><path
|
|
743
|
+
fill-rule="evenodd"
|
|
744
|
+
clip-rule="evenodd"
|
|
745
|
+
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"
|
|
746
|
+
fill="currentColor"
|
|
747
|
+
></path><path
|
|
748
|
+
fill-rule="evenodd"
|
|
749
|
+
clip-rule="evenodd"
|
|
750
|
+
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"
|
|
751
|
+
fill="currentColor"
|
|
752
|
+
></path><path
|
|
753
|
+
fill-rule="evenodd"
|
|
754
|
+
clip-rule="evenodd"
|
|
755
|
+
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"
|
|
756
|
+
fill="currentColor"
|
|
757
|
+
></path><path
|
|
758
|
+
fill-rule="evenodd"
|
|
759
|
+
clip-rule="evenodd"
|
|
760
|
+
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"
|
|
761
|
+
fill="currentColor"
|
|
762
|
+
></path><path
|
|
763
|
+
fill-rule="evenodd"
|
|
764
|
+
clip-rule="evenodd"
|
|
765
|
+
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"
|
|
766
|
+
fill="currentColor"
|
|
767
|
+
></path><path
|
|
768
|
+
fill-rule="evenodd"
|
|
769
|
+
clip-rule="evenodd"
|
|
770
|
+
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"
|
|
771
|
+
fill="currentColor"
|
|
772
|
+
></path></svg
|
|
773
|
+
>
|
|
774
|
+
{:else if $editor.isActive("taskList")}
|
|
775
|
+
<svg
|
|
776
|
+
width="24"
|
|
777
|
+
height="24"
|
|
778
|
+
class="tiptap-button-icon"
|
|
779
|
+
viewBox="0 0 24 24"
|
|
724
780
|
fill="currentColor"
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
781
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
782
|
+
><path
|
|
783
|
+
fill-rule="evenodd"
|
|
784
|
+
clip-rule="evenodd"
|
|
785
|
+
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"
|
|
786
|
+
fill="currentColor"
|
|
787
|
+
></path><path
|
|
788
|
+
fill-rule="evenodd"
|
|
789
|
+
clip-rule="evenodd"
|
|
790
|
+
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"
|
|
791
|
+
fill="currentColor"
|
|
792
|
+
></path><path
|
|
793
|
+
fill-rule="evenodd"
|
|
794
|
+
clip-rule="evenodd"
|
|
795
|
+
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"
|
|
796
|
+
fill="currentColor"
|
|
797
|
+
></path><path
|
|
798
|
+
fill-rule="evenodd"
|
|
799
|
+
clip-rule="evenodd"
|
|
800
|
+
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"
|
|
801
|
+
fill="currentColor"
|
|
802
|
+
></path><path
|
|
803
|
+
fill-rule="evenodd"
|
|
804
|
+
clip-rule="evenodd"
|
|
805
|
+
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"
|
|
806
|
+
fill="currentColor"
|
|
807
|
+
></path></svg
|
|
808
|
+
>
|
|
809
|
+
{:else}
|
|
810
|
+
<svg
|
|
811
|
+
width="24"
|
|
812
|
+
height="24"
|
|
813
|
+
class="tiptap-button-icon"
|
|
814
|
+
viewBox="0 0 24 24"
|
|
729
815
|
fill="currentColor"
|
|
730
|
-
|
|
816
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
817
|
+
><path
|
|
818
|
+
fill-rule="evenodd"
|
|
819
|
+
clip-rule="evenodd"
|
|
820
|
+
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"
|
|
821
|
+
fill="currentColor"
|
|
822
|
+
></path><path
|
|
823
|
+
fill-rule="evenodd"
|
|
824
|
+
clip-rule="evenodd"
|
|
825
|
+
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"
|
|
826
|
+
fill="currentColor"
|
|
827
|
+
></path><path
|
|
828
|
+
fill-rule="evenodd"
|
|
829
|
+
clip-rule="evenodd"
|
|
830
|
+
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"
|
|
831
|
+
fill="currentColor"
|
|
832
|
+
></path><path
|
|
833
|
+
fill-rule="evenodd"
|
|
834
|
+
clip-rule="evenodd"
|
|
835
|
+
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"
|
|
836
|
+
fill="currentColor"
|
|
837
|
+
></path><path
|
|
838
|
+
fill-rule="evenodd"
|
|
839
|
+
clip-rule="evenodd"
|
|
840
|
+
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"
|
|
841
|
+
fill="currentColor"
|
|
842
|
+
></path><path
|
|
843
|
+
fill-rule="evenodd"
|
|
844
|
+
clip-rule="evenodd"
|
|
845
|
+
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"
|
|
846
|
+
fill="currentColor"
|
|
847
|
+
></path></svg
|
|
848
|
+
>
|
|
849
|
+
{/if}
|
|
850
|
+
|
|
851
|
+
<svg
|
|
852
|
+
class="toogle-dropdown-button-icon"
|
|
853
|
+
aria-hidden="true"
|
|
854
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
855
|
+
fill="none"
|
|
856
|
+
viewBox="0 0 10 6"
|
|
731
857
|
>
|
|
732
|
-
|
|
858
|
+
<use href="#dropdown-arrow"></use>
|
|
859
|
+
</svg>
|
|
860
|
+
</button>
|
|
861
|
+
</div>
|
|
862
|
+
|
|
863
|
+
<!-- Code block & blockquote -->
|
|
864
|
+
<div role="group" class="fl-rich-text-toolbar-group">
|
|
865
|
+
<!-- Code block -->
|
|
866
|
+
<button
|
|
867
|
+
aria-label="Code block"
|
|
868
|
+
type="button"
|
|
869
|
+
onclick={() => $editor.chain().focus().toggleCodeBlock().run()}
|
|
870
|
+
class={$editor.isActive("codeBlock") ? "is-active" : ""}
|
|
871
|
+
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
872
|
+
>
|
|
733
873
|
<svg
|
|
734
874
|
width="24"
|
|
735
875
|
height="24"
|
|
@@ -740,36 +880,168 @@
|
|
|
740
880
|
><path
|
|
741
881
|
fill-rule="evenodd"
|
|
742
882
|
clip-rule="evenodd"
|
|
743
|
-
d="
|
|
883
|
+
d="M6.70711 2.29289C7.09763 2.68342 7.09763 3.31658 6.70711 3.70711L4.41421 6L6.70711 8.29289C7.09763 8.68342 7.09763 9.31658 6.70711 9.70711C6.31658 10.0976 5.68342 10.0976 5.29289 9.70711L2.29289 6.70711C1.90237 6.31658 1.90237 5.68342 2.29289 5.29289L5.29289 2.29289C5.68342 1.90237 6.31658 1.90237 6.70711 2.29289Z"
|
|
744
884
|
fill="currentColor"
|
|
745
885
|
></path><path
|
|
746
886
|
fill-rule="evenodd"
|
|
747
887
|
clip-rule="evenodd"
|
|
748
|
-
d="
|
|
888
|
+
d="M10.2929 2.29289C10.6834 1.90237 11.3166 1.90237 11.7071 2.29289L14.7071 5.29289C15.0976 5.68342 15.0976 6.31658 14.7071 6.70711L11.7071 9.70711C11.3166 10.0976 10.6834 10.0976 10.2929 9.70711C9.90237 9.31658 9.90237 8.68342 10.2929 8.29289L12.5858 6L10.2929 3.70711C9.90237 3.31658 9.90237 2.68342 10.2929 2.29289Z"
|
|
749
889
|
fill="currentColor"
|
|
750
890
|
></path><path
|
|
751
891
|
fill-rule="evenodd"
|
|
752
892
|
clip-rule="evenodd"
|
|
753
|
-
d="
|
|
893
|
+
d="M17 4C17 3.44772 17.4477 3 18 3H19C20.6569 3 22 4.34315 22 6V18C22 19.6569 20.6569 21 19 21H5C3.34315 21 2 19.6569 2 18V12C2 11.4477 2.44772 11 3 11C3.55228 11 4 11.4477 4 12V18C4 18.5523 4.44772 19 5 19H19C19.5523 19 20 18.5523 20 18V6C20 5.44772 19.5523 5 19 5H18C17.4477 5 17 4.55228 17 4Z"
|
|
754
894
|
fill="currentColor"
|
|
755
|
-
></path
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
895
|
+
></path></svg
|
|
896
|
+
>
|
|
897
|
+
</button>
|
|
898
|
+
|
|
899
|
+
<!-- Blockquote -->
|
|
900
|
+
<button
|
|
901
|
+
aria-label="Blockquote"
|
|
902
|
+
type="button"
|
|
903
|
+
onclick={() => $editor.chain().focus().toggleBlockquote().run()}
|
|
904
|
+
class={$editor.isActive("blockquote") ? "is-active" : ""}
|
|
905
|
+
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
906
|
+
>
|
|
907
|
+
<svg
|
|
908
|
+
width="15"
|
|
909
|
+
height="15"
|
|
910
|
+
viewBox="0 0 15 15"
|
|
911
|
+
fill="none"
|
|
912
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
913
|
+
><path
|
|
914
|
+
d="M9.42503 3.44136C10.0561 3.23654 10.7837 3.2402 11.3792 3.54623C12.7532 4.25224 13.3477 6.07191 12.7946 8C12.5465 8.8649 12.1102 9.70472 11.1861 10.5524C10.262 11.4 8.98034 11.9 8.38571 11.9C8.17269 11.9 8 11.7321 8 11.525C8 11.3179 8.17644 11.15 8.38571 11.15C9.06497 11.15 9.67189 10.7804 10.3906 10.236C10.9406 9.8193 11.3701 9.28633 11.608 8.82191C12.0628 7.93367 12.0782 6.68174 11.3433 6.34901C10.9904 6.73455 10.5295 6.95946 9.97725 6.95946C8.7773 6.95946 8.0701 5.99412 8.10051 5.12009C8.12957 4.28474 8.66032 3.68954 9.42503 3.44136ZM3.42503 3.44136C4.05614 3.23654 4.78366 3.2402 5.37923 3.54623C6.7532 4.25224 7.34766 6.07191 6.79462 8C6.54654 8.8649 6.11019 9.70472 5.1861 10.5524C4.26201 11.4 2.98034 11.9 2.38571 11.9C2.17269 11.9 2 11.7321 2 11.525C2 11.3179 2.17644 11.15 2.38571 11.15C3.06497 11.15 3.67189 10.7804 4.39058 10.236C4.94065 9.8193 5.37014 9.28633 5.60797 8.82191C6.06282 7.93367 6.07821 6.68174 5.3433 6.34901C4.99037 6.73455 4.52948 6.95946 3.97725 6.95946C2.7773 6.95946 2.0701 5.99412 2.10051 5.12009C2.12957 4.28474 2.66032 3.68954 3.42503 3.44136Z"
|
|
759
915
|
fill="currentColor"
|
|
760
|
-
></path><path
|
|
761
916
|
fill-rule="evenodd"
|
|
762
917
|
clip-rule="evenodd"
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
918
|
+
></path></svg
|
|
919
|
+
>
|
|
920
|
+
</button>
|
|
921
|
+
</div>
|
|
922
|
+
|
|
923
|
+
<!-- Font size editor -->
|
|
924
|
+
<div role="group" class="fl-rich-text-toolbar-group">
|
|
925
|
+
<div class="fl-font-size-editor">
|
|
926
|
+
<button
|
|
927
|
+
type="button"
|
|
928
|
+
aria-label="Decrease font size"
|
|
929
|
+
onclick={decrementFontSize}
|
|
930
|
+
class="fl-font-size-editor-button"
|
|
931
|
+
>
|
|
932
|
+
<svg
|
|
933
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
934
|
+
width="24"
|
|
935
|
+
height="24"
|
|
936
|
+
viewBox="0 0 24 24"
|
|
937
|
+
fill="none"
|
|
938
|
+
stroke="currentColor"
|
|
939
|
+
stroke-width="2"
|
|
940
|
+
stroke-linecap="round"
|
|
941
|
+
stroke-linejoin="round"
|
|
942
|
+
class="icon icon-tabler icons-tabler-outline icon-tabler-minus"
|
|
943
|
+
><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
|
|
944
|
+
d="M5 12l14 0"
|
|
945
|
+
/></svg
|
|
946
|
+
>
|
|
947
|
+
</button>
|
|
948
|
+
<input type="text" bind:value={fontSize} />
|
|
949
|
+
<button
|
|
950
|
+
type="button"
|
|
951
|
+
aria-label="Increase font size"
|
|
952
|
+
onclick={incrementFontSize}
|
|
953
|
+
class="fl-font-size-editor-button"
|
|
954
|
+
>
|
|
955
|
+
<svg
|
|
956
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
957
|
+
width="24"
|
|
958
|
+
height="24"
|
|
959
|
+
viewBox="0 0 24 24"
|
|
960
|
+
fill="none"
|
|
961
|
+
stroke="currentColor"
|
|
962
|
+
stroke-width="2"
|
|
963
|
+
stroke-linecap="round"
|
|
964
|
+
stroke-linejoin="round"
|
|
965
|
+
class="icon icon-tabler icons-tabler-outline icon-tabler-plus"
|
|
966
|
+
><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
|
|
967
|
+
d="M12 5l0 14"
|
|
968
|
+
/><path d="M5 12l14 0" /></svg
|
|
969
|
+
>
|
|
970
|
+
</button>
|
|
971
|
+
</div>
|
|
972
|
+
</div>
|
|
973
|
+
|
|
974
|
+
<!-- Line height -->
|
|
975
|
+
<div role="group" class="fl-rich-text-toolbar-group">
|
|
976
|
+
<button
|
|
977
|
+
class="fl-font-size-button"
|
|
978
|
+
aria-label="Line height"
|
|
979
|
+
type="button"
|
|
980
|
+
onclick={(e) =>
|
|
981
|
+
toogleDropdown(e.currentTarget, "line-height-dropdown")}
|
|
982
|
+
>
|
|
983
|
+
<svg
|
|
984
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
985
|
+
width="16"
|
|
986
|
+
height="16"
|
|
987
|
+
viewBox="0 0 24 24"
|
|
988
|
+
fill="none"
|
|
989
|
+
stroke="currentColor"
|
|
990
|
+
stroke-width="2"
|
|
991
|
+
stroke-linecap="round"
|
|
992
|
+
stroke-linejoin="round"
|
|
993
|
+
class="icon icon-tabler icons-tabler-outline icon-tabler-line-height"
|
|
994
|
+
><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
|
|
995
|
+
d="M3 8l3 -3l3 3"
|
|
996
|
+
/><path d="M3 16l3 3l3 -3" /><path d="M6 5l0 14" /><path
|
|
997
|
+
d="M13 6l7 0"
|
|
998
|
+
/><path d="M13 12l7 0" /><path d="M13 18l7 0" /></svg
|
|
999
|
+
>
|
|
1000
|
+
|
|
1001
|
+
<svg
|
|
1002
|
+
class="toogle-dropdown-button-icon"
|
|
1003
|
+
aria-hidden="true"
|
|
1004
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1005
|
+
fill="none"
|
|
1006
|
+
viewBox="0 0 10 6"
|
|
1007
|
+
>
|
|
1008
|
+
<use href="#dropdown-arrow"></use>
|
|
1009
|
+
</svg>
|
|
1010
|
+
</button>
|
|
1011
|
+
</div>
|
|
1012
|
+
|
|
1013
|
+
<!-- Bold, Italic, Underline, Strike, Code, Link -->
|
|
1014
|
+
<!-- <div role="group" class="fl-rich-text-toolbar-group">
|
|
1015
|
+
<button
|
|
1016
|
+
type="button"
|
|
1017
|
+
onclick={() => $editor.chain().focus().toggleBold().run()}
|
|
1018
|
+
disabled={!$editor.can().chain().focus().toggleBold().run()}
|
|
1019
|
+
class={$editor.isActive("bold") ? "is-active" : ""}
|
|
1020
|
+
aria-label="Bold"
|
|
1021
|
+
>
|
|
1022
|
+
<svg
|
|
1023
|
+
width="24"
|
|
1024
|
+
height="24"
|
|
1025
|
+
class="fl-button-icon"
|
|
1026
|
+
viewBox="0 0 24 24"
|
|
1027
|
+
fill="currentColor"
|
|
1028
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1029
|
+
><path
|
|
766
1030
|
fill-rule="evenodd"
|
|
767
1031
|
clip-rule="evenodd"
|
|
768
|
-
d="
|
|
1032
|
+
d="M6 2.5C5.17157 2.5 4.5 3.17157 4.5 4V20C4.5 20.8284 5.17157 21.5 6 21.5H15C16.4587 21.5 17.8576 20.9205 18.8891 19.8891C19.9205 18.8576 20.5 17.4587 20.5 16C20.5 14.5413 19.9205 13.1424 18.8891 12.1109C18.6781 11.9 18.4518 11.7079 18.2128 11.5359C19.041 10.5492 19.5 9.29829 19.5 8C19.5 6.54131 18.9205 5.14236 17.8891 4.11091C16.8576 3.07946 15.4587 2.5 14 2.5H6ZM14 10.5C14.663 10.5 15.2989 10.2366 15.7678 9.76777C16.2366 9.29893 16.5 8.66304 16.5 8C16.5 7.33696 16.2366 6.70107 15.7678 6.23223C15.2989 5.76339 14.663 5.5 14 5.5H7.5V10.5H14ZM7.5 18.5V13.5H15C15.663 13.5 16.2989 13.7634 16.7678 14.2322C17.2366 14.7011 17.5 15.337 17.5 16C17.5 16.663 17.2366 17.2989 16.7678 17.7678C16.2989 18.2366 15.663 18.5 15 18.5H7.5Z"
|
|
769
1033
|
fill="currentColor"
|
|
770
1034
|
></path></svg
|
|
771
1035
|
>
|
|
772
|
-
|
|
1036
|
+
</button>
|
|
1037
|
+
|
|
1038
|
+
<button
|
|
1039
|
+
type="button"
|
|
1040
|
+
onclick={() => $editor.chain().focus().toggleItalic().run()}
|
|
1041
|
+
disabled={!$editor.can().chain().focus().toggleItalic().run()}
|
|
1042
|
+
class={$editor.isActive("italic") ? "is-active" : ""}
|
|
1043
|
+
aria-label="Italic"
|
|
1044
|
+
>
|
|
773
1045
|
<svg
|
|
774
1046
|
width="24"
|
|
775
1047
|
height="24"
|
|
@@ -778,33 +1050,66 @@
|
|
|
778
1050
|
fill="currentColor"
|
|
779
1051
|
xmlns="http://www.w3.org/2000/svg"
|
|
780
1052
|
><path
|
|
781
|
-
|
|
782
|
-
clip-rule="evenodd"
|
|
783
|
-
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"
|
|
784
|
-
fill="currentColor"
|
|
785
|
-
></path><path
|
|
786
|
-
fill-rule="evenodd"
|
|
787
|
-
clip-rule="evenodd"
|
|
788
|
-
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"
|
|
1053
|
+
d="M15.0222 3H19C19.5523 3 20 3.44772 20 4C20 4.55228 19.5523 5 19 5H15.693L10.443 19H14C14.5523 19 15 19.4477 15 20C15 20.5523 14.5523 21 14 21H9.02418C9.00802 21.0004 8.99181 21.0004 8.97557 21H5C4.44772 21 4 20.5523 4 20C4 19.4477 4.44772 19 5 19H8.30704L13.557 5H10C9.44772 5 9 4.55228 9 4C9 3.44772 9.44772 3 10 3H14.9782C14.9928 2.99968 15.0075 2.99967 15.0222 3Z"
|
|
789
1054
|
fill="currentColor"
|
|
790
|
-
></path
|
|
1055
|
+
></path></svg
|
|
1056
|
+
>
|
|
1057
|
+
</button>
|
|
1058
|
+
|
|
1059
|
+
<button
|
|
1060
|
+
type="button"
|
|
1061
|
+
onclick={() => $editor.chain().focus().toggleUnderline().run()}
|
|
1062
|
+
disabled={!$editor.can().chain().focus().toggleUnderline().run()}
|
|
1063
|
+
class={$editor.isActive("underline") ? "is-active" : ""}
|
|
1064
|
+
aria-label="Underline"
|
|
1065
|
+
>
|
|
1066
|
+
<svg
|
|
1067
|
+
width="24"
|
|
1068
|
+
height="24"
|
|
1069
|
+
class="tiptap-button-icon"
|
|
1070
|
+
viewBox="0 0 24 24"
|
|
1071
|
+
fill="currentColor"
|
|
1072
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1073
|
+
><path
|
|
791
1074
|
fill-rule="evenodd"
|
|
792
1075
|
clip-rule="evenodd"
|
|
793
|
-
d="
|
|
1076
|
+
d="M7 4C7 3.44772 6.55228 3 6 3C5.44772 3 5 3.44772 5 4V10C5 11.8565 5.7375 13.637 7.05025 14.9497C8.36301 16.2625 10.1435 17 12 17C13.8565 17 15.637 16.2625 16.9497 14.9497C18.2625 13.637 19 11.8565 19 10V4C19 3.44772 18.5523 3 18 3C17.4477 3 17 3.44772 17 4V10C17 11.3261 16.4732 12.5979 15.5355 13.5355C14.5979 14.4732 13.3261 15 12 15C10.6739 15 9.40215 14.4732 8.46447 13.5355C7.52678 12.5979 7 11.3261 7 10V4ZM4 19C3.44772 19 3 19.4477 3 20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20C21 19.4477 20.5523 19 20 19H4Z"
|
|
794
1077
|
fill="currentColor"
|
|
795
|
-
></path
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
1078
|
+
></path></svg
|
|
1079
|
+
>
|
|
1080
|
+
</button>
|
|
1081
|
+
|
|
1082
|
+
<button
|
|
1083
|
+
type="button"
|
|
1084
|
+
onclick={() => $editor.chain().focus().toggleStrike().run()}
|
|
1085
|
+
disabled={!$editor.can().chain().focus().toggleStrike().run()}
|
|
1086
|
+
class={$editor.isActive("strike") ? "is-active" : ""}
|
|
1087
|
+
aria-label="Strike"
|
|
1088
|
+
>
|
|
1089
|
+
<svg
|
|
1090
|
+
width="24"
|
|
1091
|
+
height="24"
|
|
1092
|
+
class="tiptap-button-icon"
|
|
1093
|
+
viewBox="0 0 24 24"
|
|
1094
|
+
fill="currentColor"
|
|
1095
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1096
|
+
><path
|
|
1097
|
+
d="M9.00039 3H16.0001C16.5524 3 17.0001 3.44772 17.0001 4C17.0001 4.55229 16.5524 5 16.0001 5H9.00011C8.68006 4.99983 8.36412 5.07648 8.07983 5.22349C7.79555 5.37051 7.55069 5.5836 7.36585 5.84487C7.181 6.10614 7.06155 6.40796 7.01754 6.72497C6.97352 7.04198 7.00623 7.36492 7.11292 7.66667C7.29701 8.18737 7.02414 8.75872 6.50344 8.94281C5.98274 9.1269 5.4114 8.85403 5.2273 8.33333C5.01393 7.72984 4.94851 7.08396 5.03654 6.44994C5.12456 5.81592 5.36346 5.21229 5.73316 4.68974C6.10285 4.1672 6.59256 3.74101 7.16113 3.44698C7.72955 3.15303 8.36047 2.99975 9.00039 3Z"
|
|
799
1098
|
fill="currentColor"
|
|
800
1099
|
></path><path
|
|
801
|
-
|
|
802
|
-
clip-rule="evenodd"
|
|
803
|
-
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"
|
|
1100
|
+
d="M18 13H20C20.5523 13 21 12.5523 21 12C21 11.4477 20.5523 11 20 11H4C3.44772 11 3 11.4477 3 12C3 12.5523 3.44772 13 4 13H14C14.7956 13 15.5587 13.3161 16.1213 13.8787C16.6839 14.4413 17 15.2044 17 16C17 16.7956 16.6839 17.5587 16.1213 18.1213C15.5587 18.6839 14.7956 19 14 19H6C5.44772 19 5 19.4477 5 20C5 20.5523 5.44772 21 6 21H14C15.3261 21 16.5979 20.4732 17.5355 19.5355C18.4732 18.5979 19 17.3261 19 16C19 14.9119 18.6453 13.8604 18 13Z"
|
|
804
1101
|
fill="currentColor"
|
|
805
1102
|
></path></svg
|
|
806
1103
|
>
|
|
807
|
-
|
|
1104
|
+
</button>
|
|
1105
|
+
|
|
1106
|
+
<button
|
|
1107
|
+
type="button"
|
|
1108
|
+
onclick={() => $editor.chain().focus().toggleCode().run()}
|
|
1109
|
+
disabled={!$editor.can().chain().focus().toggleCode().run()}
|
|
1110
|
+
class={$editor.isActive("code") ? "is-active" : ""}
|
|
1111
|
+
aria-label="Code"
|
|
1112
|
+
>
|
|
808
1113
|
<svg
|
|
809
1114
|
width="24"
|
|
810
1115
|
height="24"
|
|
@@ -813,142 +1118,269 @@
|
|
|
813
1118
|
fill="currentColor"
|
|
814
1119
|
xmlns="http://www.w3.org/2000/svg"
|
|
815
1120
|
><path
|
|
816
|
-
|
|
817
|
-
clip-rule="evenodd"
|
|
818
|
-
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"
|
|
1121
|
+
d="M15.4545 4.2983C15.6192 3.77115 15.3254 3.21028 14.7983 3.04554C14.2712 2.88081 13.7103 3.1746 13.5455 3.70175L8.54554 19.7017C8.38081 20.2289 8.6746 20.7898 9.20175 20.9545C9.72889 21.1192 10.2898 20.8254 10.4545 20.2983L15.4545 4.2983Z"
|
|
819
1122
|
fill="currentColor"
|
|
820
1123
|
></path><path
|
|
821
|
-
|
|
822
|
-
clip-rule="evenodd"
|
|
823
|
-
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"
|
|
824
|
-
fill="currentColor"
|
|
825
|
-
></path><path
|
|
826
|
-
fill-rule="evenodd"
|
|
827
|
-
clip-rule="evenodd"
|
|
828
|
-
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"
|
|
1124
|
+
d="M6.70711 7.29289C7.09763 7.68342 7.09763 8.31658 6.70711 8.70711L3.41421 12L6.70711 15.2929C7.09763 15.6834 7.09763 16.3166 6.70711 16.7071C6.31658 17.0976 5.68342 17.0976 5.29289 16.7071L1.29289 12.7071C0.902369 12.3166 0.902369 11.6834 1.29289 11.2929L5.29289 7.29289C5.68342 6.90237 6.31658 6.90237 6.70711 7.29289Z"
|
|
829
1125
|
fill="currentColor"
|
|
830
1126
|
></path><path
|
|
831
|
-
|
|
832
|
-
clip-rule="evenodd"
|
|
833
|
-
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"
|
|
1127
|
+
d="M17.2929 7.29289C17.6834 6.90237 18.3166 6.90237 18.7071 7.29289L22.7071 11.2929C23.0976 11.6834 23.0976 12.3166 22.7071 12.7071L18.7071 16.7071C18.3166 17.0976 17.6834 17.0976 17.2929 16.7071C16.9024 16.3166 16.9024 15.6834 17.2929 15.2929L20.5858 12L17.2929 8.70711C16.9024 8.31658 16.9024 7.68342 17.2929 7.29289Z"
|
|
834
1128
|
fill="currentColor"
|
|
835
|
-
></path
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
1129
|
+
></path></svg
|
|
1130
|
+
>
|
|
1131
|
+
</button>
|
|
1132
|
+
|
|
1133
|
+
<button
|
|
1134
|
+
type="button"
|
|
1135
|
+
onclick={() => setLink()}
|
|
1136
|
+
class="fl-bubble-menu-mark-button"
|
|
1137
|
+
class:is-active={$editor.isActive("link")}
|
|
1138
|
+
aria-label="Link"
|
|
1139
|
+
>
|
|
1140
|
+
<svg
|
|
1141
|
+
width="16"
|
|
1142
|
+
height="16"
|
|
1143
|
+
class="tiptap-button-icon"
|
|
1144
|
+
viewBox="0 0 24 24"
|
|
1145
|
+
fill="currentColor"
|
|
1146
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1147
|
+
><path
|
|
1148
|
+
d="M16.9958 1.06669C15.4226 1.05302 13.907 1.65779 12.7753 2.75074L12.765 2.76086L11.045 4.47086C10.6534 4.86024 10.6515 5.49341 11.0409 5.88507C11.4303 6.27673 12.0634 6.27858 12.4551 5.88919L14.1697 4.18456C14.9236 3.45893 15.9319 3.05752 16.9784 3.06662C18.0272 3.07573 19.0304 3.49641 19.772 4.23804C20.5137 4.97967 20.9344 5.98292 20.9435 7.03171C20.9526 8.07776 20.5515 9.08563 19.8265 9.83941L16.833 12.8329C16.4274 13.2386 15.9393 13.5524 15.4019 13.7529C14.8645 13.9533 14.2903 14.0359 13.7181 13.9949C13.146 13.9539 12.5894 13.7904 12.0861 13.5154C11.5827 13.2404 11.1444 12.8604 10.8008 12.401C10.47 11.9588 9.84333 11.8685 9.40108 12.1993C8.95883 12.5301 8.86849 13.1568 9.1993 13.599C9.71464 14.288 10.3721 14.858 11.1272 15.2705C11.8822 15.683 12.7171 15.9283 13.5753 15.9898C14.4334 16.0513 15.2948 15.9274 16.1009 15.6267C16.907 15.326 17.639 14.8555 18.2473 14.247L21.2472 11.2471L21.2593 11.2347C22.3523 10.1031 22.9571 8.58751 22.9434 7.01433C22.9297 5.44115 22.2987 3.93628 21.1863 2.82383C20.0738 1.71138 18.5689 1.08036 16.9958 1.06669Z"
|
|
839
1149
|
fill="currentColor"
|
|
840
1150
|
></path><path
|
|
841
|
-
|
|
842
|
-
clip-rule="evenodd"
|
|
843
|
-
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"
|
|
1151
|
+
d="M10.4247 8.0102C9.56657 7.94874 8.70522 8.07256 7.89911 8.37326C7.09305 8.67395 6.36096 9.14458 5.75272 9.753L2.75285 12.7529L2.74067 12.7653C1.64772 13.8969 1.04295 15.4125 1.05662 16.9857C1.07029 18.5589 1.70131 20.0637 2.81376 21.1762C3.9262 22.2886 5.43108 22.9196 7.00426 22.9333C8.57744 22.947 10.0931 22.3422 11.2247 21.2493L11.2371 21.2371L12.9471 19.5271C13.3376 19.1366 13.3376 18.5034 12.9471 18.1129C12.5565 17.7223 11.9234 17.7223 11.5328 18.1129L9.82932 19.8164C9.07555 20.5414 8.06768 20.9425 7.02164 20.9334C5.97285 20.9243 4.9696 20.5036 4.22797 19.762C3.48634 19.0203 3.06566 18.0171 3.05655 16.9683C3.04746 15.9222 3.44851 14.9144 4.17355 14.1606L7.16719 11.167C7.5727 10.7613 8.06071 10.4476 8.59811 10.2471C9.13552 10.0467 9.70976 9.96412 10.2819 10.0051C10.854 10.0461 11.4106 10.2096 11.9139 10.4846C12.4173 10.7596 12.8556 11.1397 13.1992 11.599C13.53 12.0412 14.1567 12.1316 14.5989 11.8007C15.0412 11.4699 15.1315 10.8433 14.8007 10.401C14.2854 9.71205 13.6279 9.14198 12.8729 8.72948C12.1178 8.31697 11.2829 8.07166 10.4247 8.0102Z"
|
|
844
1152
|
fill="currentColor"
|
|
845
1153
|
></path></svg
|
|
846
1154
|
>
|
|
847
|
-
|
|
1155
|
+
</button>
|
|
1156
|
+
</div> -->
|
|
848
1157
|
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
1158
|
+
<!-- Special box, horizontal rule, Hard break -->
|
|
1159
|
+
<div role="group" class="fl-rich-text-toolbar-group">
|
|
1160
|
+
<!-- Special box -->
|
|
1161
|
+
<button
|
|
1162
|
+
class="fl-bubble-menu-mark-button"
|
|
1163
|
+
class:is-active={$editor?.isActive("specialBox")}
|
|
1164
|
+
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
1165
|
+
onclick={toggleSpecialBox}
|
|
1166
|
+
type="button"
|
|
1167
|
+
aria-label="Special Box"
|
|
855
1168
|
>
|
|
856
|
-
<
|
|
857
|
-
</
|
|
858
|
-
</button>
|
|
859
|
-
</div>
|
|
1169
|
+
<span class="special-box-icon">A</span>
|
|
1170
|
+
</button>
|
|
860
1171
|
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
type="button"
|
|
867
|
-
onclick={() => $editor.chain().focus().toggleCodeBlock().run()}
|
|
868
|
-
class={$editor.isActive("codeBlock") ? "is-active" : ""}
|
|
869
|
-
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
870
|
-
>
|
|
871
|
-
<svg
|
|
872
|
-
width="24"
|
|
873
|
-
height="24"
|
|
874
|
-
class="tiptap-button-icon"
|
|
875
|
-
viewBox="0 0 24 24"
|
|
876
|
-
fill="currentColor"
|
|
877
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
878
|
-
><path
|
|
879
|
-
fill-rule="evenodd"
|
|
880
|
-
clip-rule="evenodd"
|
|
881
|
-
d="M6.70711 2.29289C7.09763 2.68342 7.09763 3.31658 6.70711 3.70711L4.41421 6L6.70711 8.29289C7.09763 8.68342 7.09763 9.31658 6.70711 9.70711C6.31658 10.0976 5.68342 10.0976 5.29289 9.70711L2.29289 6.70711C1.90237 6.31658 1.90237 5.68342 2.29289 5.29289L5.29289 2.29289C5.68342 1.90237 6.31658 1.90237 6.70711 2.29289Z"
|
|
882
|
-
fill="currentColor"
|
|
883
|
-
></path><path
|
|
884
|
-
fill-rule="evenodd"
|
|
885
|
-
clip-rule="evenodd"
|
|
886
|
-
d="M10.2929 2.29289C10.6834 1.90237 11.3166 1.90237 11.7071 2.29289L14.7071 5.29289C15.0976 5.68342 15.0976 6.31658 14.7071 6.70711L11.7071 9.70711C11.3166 10.0976 10.6834 10.0976 10.2929 9.70711C9.90237 9.31658 9.90237 8.68342 10.2929 8.29289L12.5858 6L10.2929 3.70711C9.90237 3.31658 9.90237 2.68342 10.2929 2.29289Z"
|
|
887
|
-
fill="currentColor"
|
|
888
|
-
></path><path
|
|
889
|
-
fill-rule="evenodd"
|
|
890
|
-
clip-rule="evenodd"
|
|
891
|
-
d="M17 4C17 3.44772 17.4477 3 18 3H19C20.6569 3 22 4.34315 22 6V18C22 19.6569 20.6569 21 19 21H5C3.34315 21 2 19.6569 2 18V12C2 11.4477 2.44772 11 3 11C3.55228 11 4 11.4477 4 12V18C4 18.5523 4.44772 19 5 19H19C19.5523 19 20 18.5523 20 18V6C20 5.44772 19.5523 5 19 5H18C17.4477 5 17 4.55228 17 4Z"
|
|
892
|
-
fill="currentColor"
|
|
893
|
-
></path></svg
|
|
1172
|
+
<!-- Horizontal rule -->
|
|
1173
|
+
<button
|
|
1174
|
+
type="button"
|
|
1175
|
+
onclick={() => $editor.chain().focus().setHorizontalRule().run()}
|
|
1176
|
+
aria-label="Horizontal rule"
|
|
894
1177
|
>
|
|
895
|
-
|
|
1178
|
+
<svg
|
|
1179
|
+
width="15"
|
|
1180
|
+
height="15"
|
|
1181
|
+
viewBox="0 0 15 15"
|
|
1182
|
+
fill="none"
|
|
1183
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1184
|
+
><path
|
|
1185
|
+
d="M2 7.5C2 7.22386 2.22386 7 2.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H2.5C2.22386 8 2 7.77614 2 7.5Z"
|
|
1186
|
+
fill="currentColor"
|
|
1187
|
+
fill-rule="evenodd"
|
|
1188
|
+
clip-rule="evenodd"
|
|
1189
|
+
></path></svg
|
|
1190
|
+
>
|
|
1191
|
+
</button>
|
|
896
1192
|
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
class={$editor.isActive("blockquote") ? "is-active" : ""}
|
|
903
|
-
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
904
|
-
>
|
|
905
|
-
<svg
|
|
906
|
-
width="15"
|
|
907
|
-
height="15"
|
|
908
|
-
viewBox="0 0 15 15"
|
|
909
|
-
fill="none"
|
|
910
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
911
|
-
><path
|
|
912
|
-
d="M9.42503 3.44136C10.0561 3.23654 10.7837 3.2402 11.3792 3.54623C12.7532 4.25224 13.3477 6.07191 12.7946 8C12.5465 8.8649 12.1102 9.70472 11.1861 10.5524C10.262 11.4 8.98034 11.9 8.38571 11.9C8.17269 11.9 8 11.7321 8 11.525C8 11.3179 8.17644 11.15 8.38571 11.15C9.06497 11.15 9.67189 10.7804 10.3906 10.236C10.9406 9.8193 11.3701 9.28633 11.608 8.82191C12.0628 7.93367 12.0782 6.68174 11.3433 6.34901C10.9904 6.73455 10.5295 6.95946 9.97725 6.95946C8.7773 6.95946 8.0701 5.99412 8.10051 5.12009C8.12957 4.28474 8.66032 3.68954 9.42503 3.44136ZM3.42503 3.44136C4.05614 3.23654 4.78366 3.2402 5.37923 3.54623C6.7532 4.25224 7.34766 6.07191 6.79462 8C6.54654 8.8649 6.11019 9.70472 5.1861 10.5524C4.26201 11.4 2.98034 11.9 2.38571 11.9C2.17269 11.9 2 11.7321 2 11.525C2 11.3179 2.17644 11.15 2.38571 11.15C3.06497 11.15 3.67189 10.7804 4.39058 10.236C4.94065 9.8193 5.37014 9.28633 5.60797 8.82191C6.06282 7.93367 6.07821 6.68174 5.3433 6.34901C4.99037 6.73455 4.52948 6.95946 3.97725 6.95946C2.7773 6.95946 2.0701 5.99412 2.10051 5.12009C2.12957 4.28474 2.66032 3.68954 3.42503 3.44136Z"
|
|
913
|
-
fill="currentColor"
|
|
914
|
-
fill-rule="evenodd"
|
|
915
|
-
clip-rule="evenodd"
|
|
916
|
-
></path></svg
|
|
1193
|
+
<!-- Hard break -->
|
|
1194
|
+
<button
|
|
1195
|
+
type="button"
|
|
1196
|
+
onclick={() => $editor.chain().focus().setHardBreak().run()}
|
|
1197
|
+
aria-label="Hard break"
|
|
917
1198
|
>
|
|
918
|
-
|
|
919
|
-
|
|
1199
|
+
<svg
|
|
1200
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1201
|
+
width="24"
|
|
1202
|
+
height="24"
|
|
1203
|
+
viewBox="0 0 24 24"
|
|
1204
|
+
fill="none"
|
|
1205
|
+
stroke="currentColor"
|
|
1206
|
+
stroke-width="2"
|
|
1207
|
+
stroke-linecap="round"
|
|
1208
|
+
stroke-linejoin="round"
|
|
1209
|
+
class="icon icon-tabler icons-tabler-outline icon-tabler-corner-down-left"
|
|
1210
|
+
><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
|
|
1211
|
+
d="M18 6v6a3 3 0 0 1 -3 3h-10l4 -4m0 8l-4 -4"
|
|
1212
|
+
></path></svg
|
|
1213
|
+
>
|
|
1214
|
+
</button>
|
|
1215
|
+
</div>
|
|
920
1216
|
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
<div class="fl-font-size-editor">
|
|
1217
|
+
<!-- Text color & highlight -->
|
|
1218
|
+
<!-- <div role="group" class="fl-rich-text-toolbar-group">
|
|
924
1219
|
<button
|
|
1220
|
+
aria-label="Toggle text color dropdown"
|
|
925
1221
|
type="button"
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
class="fl-font-size-editor-button"
|
|
1222
|
+
onclick={(e) =>
|
|
1223
|
+
toogleDropdown(e.currentTarget, "text-color-dropdown")}
|
|
929
1224
|
>
|
|
1225
|
+
<span
|
|
1226
|
+
class="fl-button-color-text-popover"
|
|
1227
|
+
style="background: {$editor?.getAttributes('textStyle')?.color ||
|
|
1228
|
+
'currentColor'}"
|
|
1229
|
+
></span>
|
|
1230
|
+
|
|
930
1231
|
<svg
|
|
1232
|
+
class="toogle-dropdown-button-icon"
|
|
1233
|
+
aria-hidden="true"
|
|
931
1234
|
xmlns="http://www.w3.org/2000/svg"
|
|
1235
|
+
fill="none"
|
|
1236
|
+
viewBox="0 0 20 12"
|
|
1237
|
+
>
|
|
1238
|
+
<use href="#dropdown-arrow"></use>
|
|
1239
|
+
</svg>
|
|
1240
|
+
</button>
|
|
1241
|
+
|
|
1242
|
+
<button
|
|
1243
|
+
class="fl-bubble-menu-mark-button"
|
|
1244
|
+
type="button"
|
|
1245
|
+
aria-label="Highlight"
|
|
1246
|
+
onclick={(e) => toogleDropdown(e.currentTarget, "highlight")}
|
|
1247
|
+
>
|
|
1248
|
+
<svg
|
|
932
1249
|
width="24"
|
|
933
1250
|
height="24"
|
|
1251
|
+
class="tiptap-button-icon"
|
|
1252
|
+
viewBox="0 0 24 24"
|
|
1253
|
+
fill="currentColor"
|
|
1254
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1255
|
+
><path
|
|
1256
|
+
fill-rule="evenodd"
|
|
1257
|
+
clip-rule="evenodd"
|
|
1258
|
+
d="M14.7072 4.70711C15.0977 4.31658 15.0977 3.68342 14.7072 3.29289C14.3167 2.90237 13.6835 2.90237 13.293 3.29289L8.69294 7.89286L8.68594 7.9C8.13626 8.46079 7.82837 9.21474 7.82837 10C7.82837 10.2306 7.85491 10.4584 7.90631 10.6795L2.29289 16.2929C2.10536 16.4804 2 16.7348 2 17V20C2 20.5523 2.44772 21 3 21H12C12.2652 21 12.5196 20.8946 12.7071 20.7071L15.3205 18.0937C15.5416 18.1452 15.7695 18.1717 16.0001 18.1717C16.7853 18.1717 17.5393 17.8639 18.1001 17.3142L22.7072 12.7071C23.0977 12.3166 23.0977 11.6834 22.7072 11.2929C22.3167 10.9024 21.6835 10.9024 21.293 11.2929L16.6971 15.8887C16.5105 16.0702 16.2605 16.1717 16.0001 16.1717C15.7397 16.1717 15.4897 16.0702 15.303 15.8887L10.1113 10.697C9.92992 10.5104 9.82837 10.2604 9.82837 10C9.82837 9.73963 9.92992 9.48958 10.1113 9.30297L14.7072 4.70711ZM13.5858 17L9.00004 12.4142L4 17.4142V19H11.5858L13.5858 17Z"
|
|
1259
|
+
fill="currentColor"
|
|
1260
|
+
></path>
|
|
1261
|
+
</svg>
|
|
1262
|
+
<svg
|
|
1263
|
+
class="toogle-dropdown-button-icon"
|
|
1264
|
+
aria-hidden="true"
|
|
1265
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1266
|
+
fill="none"
|
|
1267
|
+
viewBox="0 0 10 6"
|
|
1268
|
+
>
|
|
1269
|
+
<path
|
|
1270
|
+
stroke="currentColor"
|
|
1271
|
+
stroke-linecap="round"
|
|
1272
|
+
stroke-linejoin="round"
|
|
1273
|
+
stroke-width="2"
|
|
1274
|
+
d="m1 1 4 4 4-4"
|
|
1275
|
+
></path>
|
|
1276
|
+
</svg>
|
|
1277
|
+
</button>
|
|
1278
|
+
</div> -->
|
|
1279
|
+
|
|
1280
|
+
<!-- Inline math -->
|
|
1281
|
+
<div role="group" class="fl-rich-text-toolbar-group">
|
|
1282
|
+
<button
|
|
1283
|
+
type="button"
|
|
1284
|
+
onclick={addInlineMath}
|
|
1285
|
+
aria-label="Add inline LaTeX math"
|
|
1286
|
+
>
|
|
1287
|
+
<svg
|
|
1288
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1289
|
+
width="16"
|
|
1290
|
+
height="16"
|
|
934
1291
|
viewBox="0 0 24 24"
|
|
935
1292
|
fill="none"
|
|
936
1293
|
stroke="currentColor"
|
|
937
1294
|
stroke-width="2"
|
|
938
1295
|
stroke-linecap="round"
|
|
939
1296
|
stroke-linejoin="round"
|
|
940
|
-
class="icon icon-tabler icons-tabler-outline icon-tabler-
|
|
1297
|
+
class="icon icon-tabler icons-tabler-outline icon-tabler-math"
|
|
1298
|
+
><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
|
|
1299
|
+
d="M19 5h-7l-4 14l-3 -6h-2"
|
|
1300
|
+
/><path d="M14 13l6 6" /><path d="M14 19l6 -6" /></svg
|
|
1301
|
+
>
|
|
1302
|
+
</button>
|
|
1303
|
+
</div>
|
|
1304
|
+
|
|
1305
|
+
<!-- Audio & image -->
|
|
1306
|
+
<div role="group" class="fl-rich-text-toolbar-group">
|
|
1307
|
+
<!-- Image -->
|
|
1308
|
+
<button
|
|
1309
|
+
type="button"
|
|
1310
|
+
onclick={addImage}
|
|
1311
|
+
aria-label="Image"
|
|
1312
|
+
class:is-active={$editor.isActive("image")}
|
|
1313
|
+
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
1314
|
+
>
|
|
1315
|
+
<svg
|
|
1316
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1317
|
+
width="24"
|
|
1318
|
+
height="24"
|
|
1319
|
+
viewBox="0 0 24 24"
|
|
1320
|
+
fill="currentColor"
|
|
1321
|
+
class="icon icon-tabler icons-tabler-filled icon-tabler-photo"
|
|
1322
|
+
><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
|
|
1323
|
+
d="M8.813 11.612c.457 -.38 .918 -.38 1.386 .011l.108 .098l4.986 4.986l.094 .083a1 1 0 0 0 1.403 -1.403l-.083 -.094l-1.292 -1.293l.292 -.293l.106 -.095c.457 -.38 .918 -.38 1.386 .011l.108 .098l4.674 4.675a4 4 0 0 1 -3.775 3.599l-.206 .005h-12a4 4 0 0 1 -3.98 -3.603l6.687 -6.69l.106 -.095zm9.187 -9.612a4 4 0 0 1 3.995 3.8l.005 .2v9.585l-3.293 -3.292l-.15 -.137c-1.256 -1.095 -2.85 -1.097 -4.096 -.017l-.154 .14l-.307 .306l-2.293 -2.292l-.15 -.137c-1.256 -1.095 -2.85 -1.097 -4.096 -.017l-.154 .14l-5.307 5.306v-9.585a4 4 0 0 1 3.8 -3.995l.2 -.005h12zm-2.99 5l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007z"
|
|
1324
|
+
/></svg
|
|
1325
|
+
>
|
|
1326
|
+
</button>
|
|
1327
|
+
<!-- Audio -->
|
|
1328
|
+
<button
|
|
1329
|
+
type="button"
|
|
1330
|
+
onclick={addAudio}
|
|
1331
|
+
aria-label="Audio"
|
|
1332
|
+
class:is-active={$editor.isActive("audio")}
|
|
1333
|
+
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
1334
|
+
>
|
|
1335
|
+
<svg
|
|
1336
|
+
style="transform: scale(1.1);"
|
|
1337
|
+
fill="currentColor"
|
|
1338
|
+
width="24px"
|
|
1339
|
+
viewBox="0 -960 960 960"
|
|
1340
|
+
height="24px"
|
|
1341
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1342
|
+
><path
|
|
1343
|
+
d="M400-120q-66 0-113-47t-47-113q0-66 47-113t113-47q23 0 42.5 5.5T480-418v-422h240v160H560v400q0 66-47 113t-113 47Z"
|
|
1344
|
+
></path></svg
|
|
1345
|
+
>
|
|
1346
|
+
</button>
|
|
1347
|
+
</div>
|
|
1348
|
+
|
|
1349
|
+
<!-- Media Grid & Table -->
|
|
1350
|
+
<div role="group" class="fl-rich-text-toolbar-group">
|
|
1351
|
+
<!-- Grid -->
|
|
1352
|
+
<button
|
|
1353
|
+
type="button"
|
|
1354
|
+
onclick={addMediaGrid}
|
|
1355
|
+
aria-label="Media grid"
|
|
1356
|
+
class:is-active={$editor.isActive("MediaGridComponent")}
|
|
1357
|
+
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
1358
|
+
>
|
|
1359
|
+
<svg
|
|
1360
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1361
|
+
width="24"
|
|
1362
|
+
height="24"
|
|
1363
|
+
viewBox="0 0 24 24"
|
|
1364
|
+
fill="currentColor"
|
|
1365
|
+
class="icon icon-tabler icons-tabler-filled icon-tabler-layout-grid"
|
|
941
1366
|
><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
|
|
942
|
-
d="
|
|
1367
|
+
d="M9 3a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2z"
|
|
1368
|
+
/><path
|
|
1369
|
+
d="M19 3a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2z"
|
|
1370
|
+
/><path
|
|
1371
|
+
d="M9 13a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2z"
|
|
1372
|
+
/><path
|
|
1373
|
+
d="M19 13a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2z"
|
|
943
1374
|
/></svg
|
|
944
1375
|
>
|
|
945
1376
|
</button>
|
|
946
|
-
|
|
1377
|
+
<!-- Table -->
|
|
947
1378
|
<button
|
|
948
1379
|
type="button"
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
class=
|
|
1380
|
+
onclick={addTable}
|
|
1381
|
+
aria-label="Table"
|
|
1382
|
+
class:is-active={$editor.isActive("table")}
|
|
1383
|
+
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
952
1384
|
>
|
|
953
1385
|
<svg
|
|
954
1386
|
xmlns="http://www.w3.org/2000/svg"
|
|
@@ -960,548 +1392,119 @@
|
|
|
960
1392
|
stroke-width="2"
|
|
961
1393
|
stroke-linecap="round"
|
|
962
1394
|
stroke-linejoin="round"
|
|
963
|
-
class="icon icon-tabler icons-tabler-outline icon-tabler-
|
|
1395
|
+
class="icon icon-tabler icons-tabler-outline icon-tabler-table"
|
|
964
1396
|
><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
|
|
965
|
-
d="
|
|
966
|
-
/><path d="
|
|
1397
|
+
d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14"
|
|
1398
|
+
/><path d="M3 10h18" /><path d="M10 3v18" /></svg
|
|
967
1399
|
>
|
|
968
1400
|
</button>
|
|
969
1401
|
</div>
|
|
970
|
-
</div>
|
|
971
1402
|
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
<svg
|
|
982
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
983
|
-
width="16"
|
|
984
|
-
height="16"
|
|
985
|
-
viewBox="0 0 24 24"
|
|
986
|
-
fill="none"
|
|
987
|
-
stroke="currentColor"
|
|
988
|
-
stroke-width="2"
|
|
989
|
-
stroke-linecap="round"
|
|
990
|
-
stroke-linejoin="round"
|
|
991
|
-
class="icon icon-tabler icons-tabler-outline icon-tabler-line-height"
|
|
992
|
-
><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
|
|
993
|
-
d="M3 8l3 -3l3 3"
|
|
994
|
-
/><path d="M3 16l3 3l3 -3" /><path d="M6 5l0 14" /><path
|
|
995
|
-
d="M13 6l7 0"
|
|
996
|
-
/><path d="M13 12l7 0" /><path d="M13 18l7 0" /></svg
|
|
1403
|
+
<!-- Text align, clear formatting, clear nodes -->
|
|
1404
|
+
<div role="group" class="fl-rich-text-toolbar-group">
|
|
1405
|
+
<!-- Text align left -->
|
|
1406
|
+
<button
|
|
1407
|
+
type="button"
|
|
1408
|
+
onclick={() => $editor.chain().focus().toggleTextAlign("left").run()}
|
|
1409
|
+
class:is-active={$editor.isActive({ textAlign: "left" })}
|
|
1410
|
+
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
1411
|
+
aria-label="Align left"
|
|
997
1412
|
>
|
|
1413
|
+
<svg
|
|
1414
|
+
width="15"
|
|
1415
|
+
height="15"
|
|
1416
|
+
viewBox="0 0 15 15"
|
|
1417
|
+
fill="none"
|
|
1418
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1419
|
+
><path
|
|
1420
|
+
d="M2 4.5C2 4.22386 2.22386 4 2.5 4H12.5C12.7761 4 13 4.22386 13 4.5C13 4.77614 12.7761 5 12.5 5H2.5C2.22386 5 2 4.77614 2 4.5ZM2 7.5C2 7.22386 2.22386 7 2.5 7H7.5C7.77614 7 8 7.22386 8 7.5C8 7.77614 7.77614 8 7.5 8H2.5C2.22386 8 2 7.77614 2 7.5ZM2 10.5C2 10.2239 2.22386 10 2.5 10H10.5C10.7761 10 11 10.2239 11 10.5C11 10.7761 10.7761 11 10.5 11H2.5C2.22386 11 2 10.7761 2 10.5Z"
|
|
1421
|
+
fill="currentColor"
|
|
1422
|
+
fill-rule="evenodd"
|
|
1423
|
+
clip-rule="evenodd"
|
|
1424
|
+
></path></svg
|
|
1425
|
+
>
|
|
1426
|
+
</button>
|
|
998
1427
|
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1428
|
+
<!-- Text align center -->
|
|
1429
|
+
<button
|
|
1430
|
+
type="button"
|
|
1431
|
+
onclick={() =>
|
|
1432
|
+
$editor.chain().focus().toggleTextAlign("center").run()}
|
|
1433
|
+
class:is-active={$editor.isActive({ textAlign: "center" })}
|
|
1434
|
+
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
1435
|
+
aria-label="Align center"
|
|
1005
1436
|
>
|
|
1006
|
-
<
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1437
|
+
<svg
|
|
1438
|
+
width="15"
|
|
1439
|
+
height="15"
|
|
1440
|
+
viewBox="0 0 15 15"
|
|
1441
|
+
fill="none"
|
|
1442
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1443
|
+
><path
|
|
1444
|
+
d="M2 4.5C2 4.22386 2.22386 4 2.5 4H12.5C12.7761 4 13 4.22386 13 4.5C13 4.77614 12.7761 5 12.5 5H2.5C2.22386 5 2 4.77614 2 4.5ZM4 7.5C4 7.22386 4.22386 7 4.5 7H10.5C10.7761 7 11 7.22386 11 7.5C11 7.77614 10.7761 8 10.5 8H4.5C4.22386 8 4 7.77614 4 7.5ZM3 10.5C3 10.2239 3.22386 10 3.5 10H11.5C11.7761 10 12 10.2239 12 10.5C12 10.7761 11.7761 11 11.5 11H3.5C3.22386 11 3 10.7761 3 10.5Z"
|
|
1445
|
+
fill="currentColor"
|
|
1446
|
+
fill-rule="evenodd"
|
|
1447
|
+
clip-rule="evenodd"
|
|
1448
|
+
></path></svg
|
|
1449
|
+
>
|
|
1450
|
+
</button>
|
|
1010
1451
|
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
aria-label="Bold"
|
|
1019
|
-
>
|
|
1020
|
-
<svg
|
|
1021
|
-
width="24"
|
|
1022
|
-
height="24"
|
|
1023
|
-
class="fl-button-icon"
|
|
1024
|
-
viewBox="0 0 24 24"
|
|
1025
|
-
fill="currentColor"
|
|
1026
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1027
|
-
><path
|
|
1028
|
-
fill-rule="evenodd"
|
|
1029
|
-
clip-rule="evenodd"
|
|
1030
|
-
d="M6 2.5C5.17157 2.5 4.5 3.17157 4.5 4V20C4.5 20.8284 5.17157 21.5 6 21.5H15C16.4587 21.5 17.8576 20.9205 18.8891 19.8891C19.9205 18.8576 20.5 17.4587 20.5 16C20.5 14.5413 19.9205 13.1424 18.8891 12.1109C18.6781 11.9 18.4518 11.7079 18.2128 11.5359C19.041 10.5492 19.5 9.29829 19.5 8C19.5 6.54131 18.9205 5.14236 17.8891 4.11091C16.8576 3.07946 15.4587 2.5 14 2.5H6ZM14 10.5C14.663 10.5 15.2989 10.2366 15.7678 9.76777C16.2366 9.29893 16.5 8.66304 16.5 8C16.5 7.33696 16.2366 6.70107 15.7678 6.23223C15.2989 5.76339 14.663 5.5 14 5.5H7.5V10.5H14ZM7.5 18.5V13.5H15C15.663 13.5 16.2989 13.7634 16.7678 14.2322C17.2366 14.7011 17.5 15.337 17.5 16C17.5 16.663 17.2366 17.2989 16.7678 17.7678C16.2989 18.2366 15.663 18.5 15 18.5H7.5Z"
|
|
1031
|
-
fill="currentColor"
|
|
1032
|
-
></path></svg
|
|
1452
|
+
<!-- Text align right -->
|
|
1453
|
+
<button
|
|
1454
|
+
type="button"
|
|
1455
|
+
onclick={() => $editor.chain().focus().toggleTextAlign("right").run()}
|
|
1456
|
+
class:is-active={$editor.isActive({ textAlign: "right" })}
|
|
1457
|
+
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
1458
|
+
aria-label="Align right"
|
|
1033
1459
|
>
|
|
1034
|
-
|
|
1460
|
+
<svg
|
|
1461
|
+
width="15"
|
|
1462
|
+
height="15"
|
|
1463
|
+
viewBox="0 0 15 15"
|
|
1464
|
+
fill="none"
|
|
1465
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1466
|
+
><path
|
|
1467
|
+
d="M2 4.5C2 4.22386 2.22386 4 2.5 4H12.5C12.7761 4 13 4.22386 13 4.5C13 4.77614 12.7761 5 12.5 5H2.5C2.22386 5 2 4.77614 2 4.5ZM7 7.5C7 7.22386 7.22386 7 7.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H7.5C7.22386 8 7 7.77614 7 7.5ZM4 10.5C4 10.2239 4.22386 10 4.5 10H12.5C12.7761 10 13 10.2239 13 10.5C13 10.7761 12.7761 11 12.5 11H4.5C4.22386 11 4 10.7761 4 10.5Z"
|
|
1468
|
+
fill="currentColor"
|
|
1469
|
+
fill-rule="evenodd"
|
|
1470
|
+
clip-rule="evenodd"
|
|
1471
|
+
></path></svg
|
|
1472
|
+
>
|
|
1473
|
+
</button>
|
|
1035
1474
|
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
aria-label="Italic"
|
|
1042
|
-
>
|
|
1043
|
-
<svg
|
|
1044
|
-
width="24"
|
|
1045
|
-
height="24"
|
|
1046
|
-
class="tiptap-button-icon"
|
|
1047
|
-
viewBox="0 0 24 24"
|
|
1048
|
-
fill="currentColor"
|
|
1049
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1050
|
-
><path
|
|
1051
|
-
d="M15.0222 3H19C19.5523 3 20 3.44772 20 4C20 4.55228 19.5523 5 19 5H15.693L10.443 19H14C14.5523 19 15 19.4477 15 20C15 20.5523 14.5523 21 14 21H9.02418C9.00802 21.0004 8.99181 21.0004 8.97557 21H5C4.44772 21 4 20.5523 4 20C4 19.4477 4.44772 19 5 19H8.30704L13.557 5H10C9.44772 5 9 4.55228 9 4C9 3.44772 9.44772 3 10 3H14.9782C14.9928 2.99968 15.0075 2.99967 15.0222 3Z"
|
|
1052
|
-
fill="currentColor"
|
|
1053
|
-
></path></svg
|
|
1054
|
-
>
|
|
1055
|
-
</button>
|
|
1056
|
-
|
|
1057
|
-
<button
|
|
1058
|
-
type="button"
|
|
1059
|
-
onclick={() => $editor.chain().focus().toggleUnderline().run()}
|
|
1060
|
-
disabled={!$editor.can().chain().focus().toggleUnderline().run()}
|
|
1061
|
-
class={$editor.isActive("underline") ? "is-active" : ""}
|
|
1062
|
-
aria-label="Underline"
|
|
1063
|
-
>
|
|
1064
|
-
<svg
|
|
1065
|
-
width="24"
|
|
1066
|
-
height="24"
|
|
1067
|
-
class="tiptap-button-icon"
|
|
1068
|
-
viewBox="0 0 24 24"
|
|
1069
|
-
fill="currentColor"
|
|
1070
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1071
|
-
><path
|
|
1072
|
-
fill-rule="evenodd"
|
|
1073
|
-
clip-rule="evenodd"
|
|
1074
|
-
d="M7 4C7 3.44772 6.55228 3 6 3C5.44772 3 5 3.44772 5 4V10C5 11.8565 5.7375 13.637 7.05025 14.9497C8.36301 16.2625 10.1435 17 12 17C13.8565 17 15.637 16.2625 16.9497 14.9497C18.2625 13.637 19 11.8565 19 10V4C19 3.44772 18.5523 3 18 3C17.4477 3 17 3.44772 17 4V10C17 11.3261 16.4732 12.5979 15.5355 13.5355C14.5979 14.4732 13.3261 15 12 15C10.6739 15 9.40215 14.4732 8.46447 13.5355C7.52678 12.5979 7 11.3261 7 10V4ZM4 19C3.44772 19 3 19.4477 3 20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20C21 19.4477 20.5523 19 20 19H4Z"
|
|
1075
|
-
fill="currentColor"
|
|
1076
|
-
></path></svg
|
|
1077
|
-
>
|
|
1078
|
-
</button>
|
|
1079
|
-
|
|
1080
|
-
<button
|
|
1081
|
-
type="button"
|
|
1082
|
-
onclick={() => $editor.chain().focus().toggleStrike().run()}
|
|
1083
|
-
disabled={!$editor.can().chain().focus().toggleStrike().run()}
|
|
1084
|
-
class={$editor.isActive("strike") ? "is-active" : ""}
|
|
1085
|
-
aria-label="Strike"
|
|
1086
|
-
>
|
|
1087
|
-
<svg
|
|
1088
|
-
width="24"
|
|
1089
|
-
height="24"
|
|
1090
|
-
class="tiptap-button-icon"
|
|
1091
|
-
viewBox="0 0 24 24"
|
|
1092
|
-
fill="currentColor"
|
|
1093
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1094
|
-
><path
|
|
1095
|
-
d="M9.00039 3H16.0001C16.5524 3 17.0001 3.44772 17.0001 4C17.0001 4.55229 16.5524 5 16.0001 5H9.00011C8.68006 4.99983 8.36412 5.07648 8.07983 5.22349C7.79555 5.37051 7.55069 5.5836 7.36585 5.84487C7.181 6.10614 7.06155 6.40796 7.01754 6.72497C6.97352 7.04198 7.00623 7.36492 7.11292 7.66667C7.29701 8.18737 7.02414 8.75872 6.50344 8.94281C5.98274 9.1269 5.4114 8.85403 5.2273 8.33333C5.01393 7.72984 4.94851 7.08396 5.03654 6.44994C5.12456 5.81592 5.36346 5.21229 5.73316 4.68974C6.10285 4.1672 6.59256 3.74101 7.16113 3.44698C7.72955 3.15303 8.36047 2.99975 9.00039 3Z"
|
|
1096
|
-
fill="currentColor"
|
|
1097
|
-
></path><path
|
|
1098
|
-
d="M18 13H20C20.5523 13 21 12.5523 21 12C21 11.4477 20.5523 11 20 11H4C3.44772 11 3 11.4477 3 12C3 12.5523 3.44772 13 4 13H14C14.7956 13 15.5587 13.3161 16.1213 13.8787C16.6839 14.4413 17 15.2044 17 16C17 16.7956 16.6839 17.5587 16.1213 18.1213C15.5587 18.6839 14.7956 19 14 19H6C5.44772 19 5 19.4477 5 20C5 20.5523 5.44772 21 6 21H14C15.3261 21 16.5979 20.4732 17.5355 19.5355C18.4732 18.5979 19 17.3261 19 16C19 14.9119 18.6453 13.8604 18 13Z"
|
|
1099
|
-
fill="currentColor"
|
|
1100
|
-
></path></svg
|
|
1101
|
-
>
|
|
1102
|
-
</button>
|
|
1103
|
-
|
|
1104
|
-
<button
|
|
1105
|
-
type="button"
|
|
1106
|
-
onclick={() => $editor.chain().focus().toggleCode().run()}
|
|
1107
|
-
disabled={!$editor.can().chain().focus().toggleCode().run()}
|
|
1108
|
-
class={$editor.isActive("code") ? "is-active" : ""}
|
|
1109
|
-
aria-label="Code"
|
|
1110
|
-
>
|
|
1111
|
-
<svg
|
|
1112
|
-
width="24"
|
|
1113
|
-
height="24"
|
|
1114
|
-
class="tiptap-button-icon"
|
|
1115
|
-
viewBox="0 0 24 24"
|
|
1116
|
-
fill="currentColor"
|
|
1117
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1118
|
-
><path
|
|
1119
|
-
d="M15.4545 4.2983C15.6192 3.77115 15.3254 3.21028 14.7983 3.04554C14.2712 2.88081 13.7103 3.1746 13.5455 3.70175L8.54554 19.7017C8.38081 20.2289 8.6746 20.7898 9.20175 20.9545C9.72889 21.1192 10.2898 20.8254 10.4545 20.2983L15.4545 4.2983Z"
|
|
1120
|
-
fill="currentColor"
|
|
1121
|
-
></path><path
|
|
1122
|
-
d="M6.70711 7.29289C7.09763 7.68342 7.09763 8.31658 6.70711 8.70711L3.41421 12L6.70711 15.2929C7.09763 15.6834 7.09763 16.3166 6.70711 16.7071C6.31658 17.0976 5.68342 17.0976 5.29289 16.7071L1.29289 12.7071C0.902369 12.3166 0.902369 11.6834 1.29289 11.2929L5.29289 7.29289C5.68342 6.90237 6.31658 6.90237 6.70711 7.29289Z"
|
|
1123
|
-
fill="currentColor"
|
|
1124
|
-
></path><path
|
|
1125
|
-
d="M17.2929 7.29289C17.6834 6.90237 18.3166 6.90237 18.7071 7.29289L22.7071 11.2929C23.0976 11.6834 23.0976 12.3166 22.7071 12.7071L18.7071 16.7071C18.3166 17.0976 17.6834 17.0976 17.2929 16.7071C16.9024 16.3166 16.9024 15.6834 17.2929 15.2929L20.5858 12L17.2929 8.70711C16.9024 8.31658 16.9024 7.68342 17.2929 7.29289Z"
|
|
1126
|
-
fill="currentColor"
|
|
1127
|
-
></path></svg
|
|
1128
|
-
>
|
|
1129
|
-
</button>
|
|
1130
|
-
|
|
1131
|
-
<button
|
|
1132
|
-
type="button"
|
|
1133
|
-
onclick={() => setLink()}
|
|
1134
|
-
class="fl-bubble-menu-mark-button"
|
|
1135
|
-
class:is-active={$editor.isActive("link")}
|
|
1136
|
-
aria-label="Link"
|
|
1137
|
-
>
|
|
1138
|
-
<svg
|
|
1139
|
-
width="16"
|
|
1140
|
-
height="16"
|
|
1141
|
-
class="tiptap-button-icon"
|
|
1142
|
-
viewBox="0 0 24 24"
|
|
1143
|
-
fill="currentColor"
|
|
1144
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1145
|
-
><path
|
|
1146
|
-
d="M16.9958 1.06669C15.4226 1.05302 13.907 1.65779 12.7753 2.75074L12.765 2.76086L11.045 4.47086C10.6534 4.86024 10.6515 5.49341 11.0409 5.88507C11.4303 6.27673 12.0634 6.27858 12.4551 5.88919L14.1697 4.18456C14.9236 3.45893 15.9319 3.05752 16.9784 3.06662C18.0272 3.07573 19.0304 3.49641 19.772 4.23804C20.5137 4.97967 20.9344 5.98292 20.9435 7.03171C20.9526 8.07776 20.5515 9.08563 19.8265 9.83941L16.833 12.8329C16.4274 13.2386 15.9393 13.5524 15.4019 13.7529C14.8645 13.9533 14.2903 14.0359 13.7181 13.9949C13.146 13.9539 12.5894 13.7904 12.0861 13.5154C11.5827 13.2404 11.1444 12.8604 10.8008 12.401C10.47 11.9588 9.84333 11.8685 9.40108 12.1993C8.95883 12.5301 8.86849 13.1568 9.1993 13.599C9.71464 14.288 10.3721 14.858 11.1272 15.2705C11.8822 15.683 12.7171 15.9283 13.5753 15.9898C14.4334 16.0513 15.2948 15.9274 16.1009 15.6267C16.907 15.326 17.639 14.8555 18.2473 14.247L21.2472 11.2471L21.2593 11.2347C22.3523 10.1031 22.9571 8.58751 22.9434 7.01433C22.9297 5.44115 22.2987 3.93628 21.1863 2.82383C20.0738 1.71138 18.5689 1.08036 16.9958 1.06669Z"
|
|
1147
|
-
fill="currentColor"
|
|
1148
|
-
></path><path
|
|
1149
|
-
d="M10.4247 8.0102C9.56657 7.94874 8.70522 8.07256 7.89911 8.37326C7.09305 8.67395 6.36096 9.14458 5.75272 9.753L2.75285 12.7529L2.74067 12.7653C1.64772 13.8969 1.04295 15.4125 1.05662 16.9857C1.07029 18.5589 1.70131 20.0637 2.81376 21.1762C3.9262 22.2886 5.43108 22.9196 7.00426 22.9333C8.57744 22.947 10.0931 22.3422 11.2247 21.2493L11.2371 21.2371L12.9471 19.5271C13.3376 19.1366 13.3376 18.5034 12.9471 18.1129C12.5565 17.7223 11.9234 17.7223 11.5328 18.1129L9.82932 19.8164C9.07555 20.5414 8.06768 20.9425 7.02164 20.9334C5.97285 20.9243 4.9696 20.5036 4.22797 19.762C3.48634 19.0203 3.06566 18.0171 3.05655 16.9683C3.04746 15.9222 3.44851 14.9144 4.17355 14.1606L7.16719 11.167C7.5727 10.7613 8.06071 10.4476 8.59811 10.2471C9.13552 10.0467 9.70976 9.96412 10.2819 10.0051C10.854 10.0461 11.4106 10.2096 11.9139 10.4846C12.4173 10.7596 12.8556 11.1397 13.1992 11.599C13.53 12.0412 14.1567 12.1316 14.5989 11.8007C15.0412 11.4699 15.1315 10.8433 14.8007 10.401C14.2854 9.71205 13.6279 9.14198 12.8729 8.72948C12.1178 8.31697 11.2829 8.07166 10.4247 8.0102Z"
|
|
1150
|
-
fill="currentColor"
|
|
1151
|
-
></path></svg
|
|
1152
|
-
>
|
|
1153
|
-
</button>
|
|
1154
|
-
</div> -->
|
|
1155
|
-
|
|
1156
|
-
<!-- Special box, horizontal rule, Hard break -->
|
|
1157
|
-
<div role="group" class="fl-rich-text-toolbar-group">
|
|
1158
|
-
<!-- Special box -->
|
|
1159
|
-
<button
|
|
1160
|
-
class="fl-bubble-menu-mark-button"
|
|
1161
|
-
class:is-active={$editor?.isActive("specialBox")}
|
|
1162
|
-
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
1163
|
-
onclick={toggleSpecialBox}
|
|
1164
|
-
type="button"
|
|
1165
|
-
aria-label="Special Box"
|
|
1166
|
-
>
|
|
1167
|
-
<span class="special-box-icon">A</span>
|
|
1168
|
-
</button>
|
|
1169
|
-
|
|
1170
|
-
<!-- Horizontal rule -->
|
|
1171
|
-
<button
|
|
1172
|
-
type="button"
|
|
1173
|
-
onclick={() => $editor.chain().focus().setHorizontalRule().run()}
|
|
1174
|
-
aria-label="Horizontal rule"
|
|
1175
|
-
>
|
|
1176
|
-
<svg
|
|
1177
|
-
width="15"
|
|
1178
|
-
height="15"
|
|
1179
|
-
viewBox="0 0 15 15"
|
|
1180
|
-
fill="none"
|
|
1181
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1182
|
-
><path
|
|
1183
|
-
d="M2 7.5C2 7.22386 2.22386 7 2.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H2.5C2.22386 8 2 7.77614 2 7.5Z"
|
|
1184
|
-
fill="currentColor"
|
|
1185
|
-
fill-rule="evenodd"
|
|
1186
|
-
clip-rule="evenodd"
|
|
1187
|
-
></path></svg
|
|
1188
|
-
>
|
|
1189
|
-
</button>
|
|
1190
|
-
|
|
1191
|
-
<!-- Hard break -->
|
|
1192
|
-
<button
|
|
1193
|
-
type="button"
|
|
1194
|
-
onclick={() => $editor.chain().focus().setHardBreak().run()}
|
|
1195
|
-
aria-label="Hard break"
|
|
1196
|
-
>
|
|
1197
|
-
<svg
|
|
1198
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1199
|
-
width="24"
|
|
1200
|
-
height="24"
|
|
1201
|
-
viewBox="0 0 24 24"
|
|
1202
|
-
fill="none"
|
|
1203
|
-
stroke="currentColor"
|
|
1204
|
-
stroke-width="2"
|
|
1205
|
-
stroke-linecap="round"
|
|
1206
|
-
stroke-linejoin="round"
|
|
1207
|
-
class="icon icon-tabler icons-tabler-outline icon-tabler-corner-down-left"
|
|
1208
|
-
><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
|
|
1209
|
-
d="M18 6v6a3 3 0 0 1 -3 3h-10l4 -4m0 8l-4 -4"
|
|
1210
|
-
></path></svg
|
|
1211
|
-
>
|
|
1212
|
-
</button>
|
|
1213
|
-
</div>
|
|
1214
|
-
|
|
1215
|
-
<!-- Text color & highlight -->
|
|
1216
|
-
<!-- <div role="group" class="fl-rich-text-toolbar-group">
|
|
1217
|
-
<button
|
|
1218
|
-
aria-label="Toggle text color dropdown"
|
|
1219
|
-
type="button"
|
|
1220
|
-
onclick={(e) =>
|
|
1221
|
-
toogleDropdown(e.currentTarget, "text-color-dropdown")}
|
|
1222
|
-
>
|
|
1223
|
-
<span
|
|
1224
|
-
class="fl-button-color-text-popover"
|
|
1225
|
-
style="background: {$editor?.getAttributes('textStyle')?.color ||
|
|
1226
|
-
'currentColor'}"
|
|
1227
|
-
></span>
|
|
1228
|
-
|
|
1229
|
-
<svg
|
|
1230
|
-
class="toogle-dropdown-button-icon"
|
|
1231
|
-
aria-hidden="true"
|
|
1232
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1233
|
-
fill="none"
|
|
1234
|
-
viewBox="0 0 20 12"
|
|
1235
|
-
>
|
|
1236
|
-
<use href="#dropdown-arrow"></use>
|
|
1237
|
-
</svg>
|
|
1238
|
-
</button>
|
|
1239
|
-
|
|
1240
|
-
<button
|
|
1241
|
-
class="fl-bubble-menu-mark-button"
|
|
1242
|
-
type="button"
|
|
1243
|
-
aria-label="Highlight"
|
|
1244
|
-
onclick={(e) => toogleDropdown(e.currentTarget, "highlight")}
|
|
1245
|
-
>
|
|
1246
|
-
<svg
|
|
1247
|
-
width="24"
|
|
1248
|
-
height="24"
|
|
1249
|
-
class="tiptap-button-icon"
|
|
1250
|
-
viewBox="0 0 24 24"
|
|
1251
|
-
fill="currentColor"
|
|
1252
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1253
|
-
><path
|
|
1254
|
-
fill-rule="evenodd"
|
|
1255
|
-
clip-rule="evenodd"
|
|
1256
|
-
d="M14.7072 4.70711C15.0977 4.31658 15.0977 3.68342 14.7072 3.29289C14.3167 2.90237 13.6835 2.90237 13.293 3.29289L8.69294 7.89286L8.68594 7.9C8.13626 8.46079 7.82837 9.21474 7.82837 10C7.82837 10.2306 7.85491 10.4584 7.90631 10.6795L2.29289 16.2929C2.10536 16.4804 2 16.7348 2 17V20C2 20.5523 2.44772 21 3 21H12C12.2652 21 12.5196 20.8946 12.7071 20.7071L15.3205 18.0937C15.5416 18.1452 15.7695 18.1717 16.0001 18.1717C16.7853 18.1717 17.5393 17.8639 18.1001 17.3142L22.7072 12.7071C23.0977 12.3166 23.0977 11.6834 22.7072 11.2929C22.3167 10.9024 21.6835 10.9024 21.293 11.2929L16.6971 15.8887C16.5105 16.0702 16.2605 16.1717 16.0001 16.1717C15.7397 16.1717 15.4897 16.0702 15.303 15.8887L10.1113 10.697C9.92992 10.5104 9.82837 10.2604 9.82837 10C9.82837 9.73963 9.92992 9.48958 10.1113 9.30297L14.7072 4.70711ZM13.5858 17L9.00004 12.4142L4 17.4142V19H11.5858L13.5858 17Z"
|
|
1257
|
-
fill="currentColor"
|
|
1258
|
-
></path>
|
|
1259
|
-
</svg>
|
|
1260
|
-
<svg
|
|
1261
|
-
class="toogle-dropdown-button-icon"
|
|
1262
|
-
aria-hidden="true"
|
|
1263
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1264
|
-
fill="none"
|
|
1265
|
-
viewBox="0 0 10 6"
|
|
1475
|
+
<!-- Clear formatting -->
|
|
1476
|
+
<button
|
|
1477
|
+
aria-label="Clear formatting"
|
|
1478
|
+
type="button"
|
|
1479
|
+
onclick={() => $editor.chain().focus().unsetAllMarks().run()}
|
|
1266
1480
|
>
|
|
1267
|
-
<
|
|
1481
|
+
<svg
|
|
1482
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1483
|
+
width="16"
|
|
1484
|
+
height="16"
|
|
1485
|
+
viewBox="0 0 24 24"
|
|
1486
|
+
fill="none"
|
|
1268
1487
|
stroke="currentColor"
|
|
1488
|
+
stroke-width="2"
|
|
1269
1489
|
stroke-linecap="round"
|
|
1270
1490
|
stroke-linejoin="round"
|
|
1271
|
-
|
|
1272
|
-
d="
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
<div role="group" class="fl-rich-text-toolbar-group">
|
|
1280
|
-
<button
|
|
1281
|
-
type="button"
|
|
1282
|
-
onclick={addInlineMath}
|
|
1283
|
-
aria-label="Add inline LaTeX math"
|
|
1284
|
-
>
|
|
1285
|
-
<svg
|
|
1286
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1287
|
-
width="16"
|
|
1288
|
-
height="16"
|
|
1289
|
-
viewBox="0 0 24 24"
|
|
1290
|
-
fill="none"
|
|
1291
|
-
stroke="currentColor"
|
|
1292
|
-
stroke-width="2"
|
|
1293
|
-
stroke-linecap="round"
|
|
1294
|
-
stroke-linejoin="round"
|
|
1295
|
-
class="icon icon-tabler icons-tabler-outline icon-tabler-math"
|
|
1296
|
-
><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
|
|
1297
|
-
d="M19 5h-7l-4 14l-3 -6h-2"
|
|
1298
|
-
/><path d="M14 13l6 6" /><path d="M14 19l6 -6" /></svg
|
|
1299
|
-
>
|
|
1300
|
-
</button>
|
|
1301
|
-
</div>
|
|
1302
|
-
|
|
1303
|
-
<!-- Audio & image -->
|
|
1304
|
-
<div role="group" class="fl-rich-text-toolbar-group">
|
|
1305
|
-
<!-- Image -->
|
|
1306
|
-
<button
|
|
1307
|
-
type="button"
|
|
1308
|
-
onclick={addImage}
|
|
1309
|
-
aria-label="Image"
|
|
1310
|
-
class:is-active={$editor.isActive("image")}
|
|
1311
|
-
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
1312
|
-
>
|
|
1313
|
-
<svg
|
|
1314
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1315
|
-
width="24"
|
|
1316
|
-
height="24"
|
|
1317
|
-
viewBox="0 0 24 24"
|
|
1318
|
-
fill="currentColor"
|
|
1319
|
-
class="icon icon-tabler icons-tabler-filled icon-tabler-photo"
|
|
1320
|
-
><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
|
|
1321
|
-
d="M8.813 11.612c.457 -.38 .918 -.38 1.386 .011l.108 .098l4.986 4.986l.094 .083a1 1 0 0 0 1.403 -1.403l-.083 -.094l-1.292 -1.293l.292 -.293l.106 -.095c.457 -.38 .918 -.38 1.386 .011l.108 .098l4.674 4.675a4 4 0 0 1 -3.775 3.599l-.206 .005h-12a4 4 0 0 1 -3.98 -3.603l6.687 -6.69l.106 -.095zm9.187 -9.612a4 4 0 0 1 3.995 3.8l.005 .2v9.585l-3.293 -3.292l-.15 -.137c-1.256 -1.095 -2.85 -1.097 -4.096 -.017l-.154 .14l-.307 .306l-2.293 -2.292l-.15 -.137c-1.256 -1.095 -2.85 -1.097 -4.096 -.017l-.154 .14l-5.307 5.306v-9.585a4 4 0 0 1 3.8 -3.995l.2 -.005h12zm-2.99 5l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007z"
|
|
1322
|
-
/></svg
|
|
1323
|
-
>
|
|
1324
|
-
</button>
|
|
1325
|
-
<!-- Audio -->
|
|
1326
|
-
<button
|
|
1327
|
-
type="button"
|
|
1328
|
-
onclick={addAudio}
|
|
1329
|
-
aria-label="Audio"
|
|
1330
|
-
class:is-active={$editor.isActive("audio")}
|
|
1331
|
-
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
1332
|
-
>
|
|
1333
|
-
<svg
|
|
1334
|
-
style="transform: scale(1.1);"
|
|
1335
|
-
fill="currentColor"
|
|
1336
|
-
width="24px"
|
|
1337
|
-
viewBox="0 -960 960 960"
|
|
1338
|
-
height="24px"
|
|
1339
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1340
|
-
><path
|
|
1341
|
-
d="M400-120q-66 0-113-47t-47-113q0-66 47-113t113-47q23 0 42.5 5.5T480-418v-422h240v160H560v400q0 66-47 113t-113 47Z"
|
|
1342
|
-
></path></svg
|
|
1343
|
-
>
|
|
1344
|
-
</button>
|
|
1345
|
-
</div>
|
|
1346
|
-
|
|
1347
|
-
<!-- Media Grid & Table -->
|
|
1348
|
-
<div role="group" class="fl-rich-text-toolbar-group">
|
|
1349
|
-
<!-- Grid -->
|
|
1350
|
-
<button
|
|
1351
|
-
type="button"
|
|
1352
|
-
onclick={addMediaGrid}
|
|
1353
|
-
aria-label="Media grid"
|
|
1354
|
-
class:is-active={$editor.isActive("MediaGridComponent")}
|
|
1355
|
-
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
1356
|
-
>
|
|
1357
|
-
<svg
|
|
1358
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1359
|
-
width="24"
|
|
1360
|
-
height="24"
|
|
1361
|
-
viewBox="0 0 24 24"
|
|
1362
|
-
fill="currentColor"
|
|
1363
|
-
class="icon icon-tabler icons-tabler-filled icon-tabler-layout-grid"
|
|
1364
|
-
><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
|
|
1365
|
-
d="M9 3a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2z"
|
|
1366
|
-
/><path
|
|
1367
|
-
d="M19 3a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2z"
|
|
1368
|
-
/><path
|
|
1369
|
-
d="M9 13a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2z"
|
|
1370
|
-
/><path
|
|
1371
|
-
d="M19 13a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2z"
|
|
1372
|
-
/></svg
|
|
1373
|
-
>
|
|
1374
|
-
</button>
|
|
1375
|
-
<!-- Table -->
|
|
1376
|
-
<button
|
|
1377
|
-
type="button"
|
|
1378
|
-
onclick={addTable}
|
|
1379
|
-
aria-label="Table"
|
|
1380
|
-
class:is-active={$editor.isActive("table")}
|
|
1381
|
-
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
1382
|
-
>
|
|
1383
|
-
<svg
|
|
1384
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1385
|
-
width="24"
|
|
1386
|
-
height="24"
|
|
1387
|
-
viewBox="0 0 24 24"
|
|
1388
|
-
fill="none"
|
|
1389
|
-
stroke="currentColor"
|
|
1390
|
-
stroke-width="2"
|
|
1391
|
-
stroke-linecap="round"
|
|
1392
|
-
stroke-linejoin="round"
|
|
1393
|
-
class="icon icon-tabler icons-tabler-outline icon-tabler-table"
|
|
1394
|
-
><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
|
|
1395
|
-
d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14"
|
|
1396
|
-
/><path d="M3 10h18" /><path d="M10 3v18" /></svg
|
|
1397
|
-
>
|
|
1398
|
-
</button>
|
|
1399
|
-
</div>
|
|
1400
|
-
|
|
1401
|
-
<!-- Text align, clear formatting, clear nodes -->
|
|
1402
|
-
<div role="group" class="fl-rich-text-toolbar-group">
|
|
1403
|
-
<!-- Text align left -->
|
|
1404
|
-
<button
|
|
1405
|
-
type="button"
|
|
1406
|
-
onclick={() => $editor.chain().focus().toggleTextAlign("left").run()}
|
|
1407
|
-
class:is-active={$editor.isActive({ textAlign: "left" })}
|
|
1408
|
-
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
1409
|
-
aria-label="Align left"
|
|
1410
|
-
>
|
|
1411
|
-
<svg
|
|
1412
|
-
width="15"
|
|
1413
|
-
height="15"
|
|
1414
|
-
viewBox="0 0 15 15"
|
|
1415
|
-
fill="none"
|
|
1416
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1417
|
-
><path
|
|
1418
|
-
d="M2 4.5C2 4.22386 2.22386 4 2.5 4H12.5C12.7761 4 13 4.22386 13 4.5C13 4.77614 12.7761 5 12.5 5H2.5C2.22386 5 2 4.77614 2 4.5ZM2 7.5C2 7.22386 2.22386 7 2.5 7H7.5C7.77614 7 8 7.22386 8 7.5C8 7.77614 7.77614 8 7.5 8H2.5C2.22386 8 2 7.77614 2 7.5ZM2 10.5C2 10.2239 2.22386 10 2.5 10H10.5C10.7761 10 11 10.2239 11 10.5C11 10.7761 10.7761 11 10.5 11H2.5C2.22386 11 2 10.7761 2 10.5Z"
|
|
1419
|
-
fill="currentColor"
|
|
1420
|
-
fill-rule="evenodd"
|
|
1421
|
-
clip-rule="evenodd"
|
|
1422
|
-
></path></svg
|
|
1423
|
-
>
|
|
1424
|
-
</button>
|
|
1425
|
-
|
|
1426
|
-
<!-- Text align center -->
|
|
1427
|
-
<button
|
|
1428
|
-
type="button"
|
|
1429
|
-
onclick={() =>
|
|
1430
|
-
$editor.chain().focus().toggleTextAlign("center").run()}
|
|
1431
|
-
class:is-active={$editor.isActive({ textAlign: "center" })}
|
|
1432
|
-
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
1433
|
-
aria-label="Align center"
|
|
1434
|
-
>
|
|
1435
|
-
<svg
|
|
1436
|
-
width="15"
|
|
1437
|
-
height="15"
|
|
1438
|
-
viewBox="0 0 15 15"
|
|
1439
|
-
fill="none"
|
|
1440
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1441
|
-
><path
|
|
1442
|
-
d="M2 4.5C2 4.22386 2.22386 4 2.5 4H12.5C12.7761 4 13 4.22386 13 4.5C13 4.77614 12.7761 5 12.5 5H2.5C2.22386 5 2 4.77614 2 4.5ZM4 7.5C4 7.22386 4.22386 7 4.5 7H10.5C10.7761 7 11 7.22386 11 7.5C11 7.77614 10.7761 8 10.5 8H4.5C4.22386 8 4 7.77614 4 7.5ZM3 10.5C3 10.2239 3.22386 10 3.5 10H11.5C11.7761 10 12 10.2239 12 10.5C12 10.7761 11.7761 11 11.5 11H3.5C3.22386 11 3 10.7761 3 10.5Z"
|
|
1443
|
-
fill="currentColor"
|
|
1444
|
-
fill-rule="evenodd"
|
|
1445
|
-
clip-rule="evenodd"
|
|
1446
|
-
></path></svg
|
|
1447
|
-
>
|
|
1448
|
-
</button>
|
|
1449
|
-
|
|
1450
|
-
<!-- Text align right -->
|
|
1451
|
-
<button
|
|
1452
|
-
type="button"
|
|
1453
|
-
onclick={() => $editor.chain().focus().toggleTextAlign("right").run()}
|
|
1454
|
-
class:is-active={$editor.isActive({ textAlign: "right" })}
|
|
1455
|
-
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
1456
|
-
aria-label="Align right"
|
|
1457
|
-
>
|
|
1458
|
-
<svg
|
|
1459
|
-
width="15"
|
|
1460
|
-
height="15"
|
|
1461
|
-
viewBox="0 0 15 15"
|
|
1462
|
-
fill="none"
|
|
1463
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1464
|
-
><path
|
|
1465
|
-
d="M2 4.5C2 4.22386 2.22386 4 2.5 4H12.5C12.7761 4 13 4.22386 13 4.5C13 4.77614 12.7761 5 12.5 5H2.5C2.22386 5 2 4.77614 2 4.5ZM7 7.5C7 7.22386 7.22386 7 7.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H7.5C7.22386 8 7 7.77614 7 7.5ZM4 10.5C4 10.2239 4.22386 10 4.5 10H12.5C12.7761 10 13 10.2239 13 10.5C13 10.7761 12.7761 11 12.5 11H4.5C4.22386 11 4 10.7761 4 10.5Z"
|
|
1466
|
-
fill="currentColor"
|
|
1467
|
-
fill-rule="evenodd"
|
|
1468
|
-
clip-rule="evenodd"
|
|
1469
|
-
></path></svg
|
|
1470
|
-
>
|
|
1471
|
-
</button>
|
|
1491
|
+
class="icon icon-tabler icons-tabler-outline icon-tabler-clear-formatting"
|
|
1492
|
+
><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
|
|
1493
|
+
d="M17 15l4 4m0 -4l-4 4"
|
|
1494
|
+
/><path d="M7 6v-1h11v1" /><path d="M7 19l4 0" /><path
|
|
1495
|
+
d="M13 5l-4 14"
|
|
1496
|
+
/></svg
|
|
1497
|
+
>
|
|
1498
|
+
</button>
|
|
1472
1499
|
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
onclick={() => $editor.chain().focus().unsetAllMarks().run()}
|
|
1478
|
-
>
|
|
1479
|
-
<svg
|
|
1480
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1481
|
-
width="16"
|
|
1482
|
-
height="16"
|
|
1483
|
-
viewBox="0 0 24 24"
|
|
1484
|
-
fill="none"
|
|
1485
|
-
stroke="currentColor"
|
|
1486
|
-
stroke-width="2"
|
|
1487
|
-
stroke-linecap="round"
|
|
1488
|
-
stroke-linejoin="round"
|
|
1489
|
-
class="icon icon-tabler icons-tabler-outline icon-tabler-clear-formatting"
|
|
1490
|
-
><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
|
|
1491
|
-
d="M17 15l4 4m0 -4l-4 4"
|
|
1492
|
-
/><path d="M7 6v-1h11v1" /><path d="M7 19l4 0" /><path
|
|
1493
|
-
d="M13 5l-4 14"
|
|
1494
|
-
/></svg
|
|
1500
|
+
<!-- Clear nodes -->
|
|
1501
|
+
<button
|
|
1502
|
+
type="button"
|
|
1503
|
+
onclick={() => $editor.chain().focus().clearNodes().run()}
|
|
1495
1504
|
>
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
<button
|
|
1500
|
-
type="button"
|
|
1501
|
-
onclick={() => $editor.chain().focus().clearNodes().run()}
|
|
1502
|
-
>
|
|
1503
|
-
Clear
|
|
1504
|
-
</button>
|
|
1505
|
+
Clear
|
|
1506
|
+
</button>
|
|
1507
|
+
</div>
|
|
1505
1508
|
</div>
|
|
1506
1509
|
</header>
|
|
1507
1510
|
{/if}
|
|
@@ -1972,653 +1975,627 @@
|
|
|
1972
1975
|
/>
|
|
1973
1976
|
</button>
|
|
1974
1977
|
|
|
1975
|
-
{#each HIGHLIGHT_COLOR_PALETTE as color}
|
|
1976
|
-
<button
|
|
1977
|
-
class="fl-color-swatch"
|
|
1978
|
-
class:active={$editor?.isActive("textStyle", {
|
|
1979
|
-
color: color,
|
|
1980
|
-
})}
|
|
1981
|
-
onclick={() => {
|
|
1982
|
-
$editor?.chain().focus().setHighlight({ color }).run();
|
|
1983
|
-
hideDropdown();
|
|
1984
|
-
}}
|
|
1985
|
-
style="background-color: {color};"
|
|
1986
|
-
aria-label={color}
|
|
1987
|
-
>
|
|
1988
|
-
</button>
|
|
1989
|
-
{/each}
|
|
1990
|
-
|
|
1991
|
-
<button
|
|
1992
|
-
class="fl-color-swatch unset-color"
|
|
1993
|
-
onclick={() => {
|
|
1994
|
-
$editor?.chain().focus().unsetColor().run();
|
|
1995
|
-
hideDropdown();
|
|
1996
|
-
}}
|
|
1997
|
-
style="background-color: #ffffff;"
|
|
1998
|
-
aria-label="Unset color"
|
|
1999
|
-
>
|
|
2000
|
-
</button>
|
|
2001
|
-
|
|
2002
|
-
{#if recentCustomColors.length > 0}
|
|
2003
|
-
{#each recentCustomColors as color}
|
|
2004
|
-
<button
|
|
2005
|
-
class="fl-color-swatch"
|
|
2006
|
-
class:active={$editor?.isActive("textStyle", {
|
|
2007
|
-
color: color,
|
|
2008
|
-
})}
|
|
2009
|
-
onclick={() => {
|
|
2010
|
-
$editor?.chain().focus().setHighlight({ color }).run();
|
|
2011
|
-
hideDropdown();
|
|
2012
|
-
}}
|
|
2013
|
-
style="background-color: {color};"
|
|
2014
|
-
aria-label={color}
|
|
2015
|
-
>
|
|
2016
|
-
</button>
|
|
2017
|
-
{/each}
|
|
2018
|
-
{:else}
|
|
2019
|
-
<button
|
|
2020
|
-
class="fl-color-swatch"
|
|
2021
|
-
style="outline: 1px dashed #ffffff66;background: transparent;"
|
|
2022
|
-
onclick={() => alert("Not implemented yet")}
|
|
2023
|
-
aria-label="Add new color"
|
|
2024
|
-
>
|
|
2025
|
-
<svg
|
|
2026
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
2027
|
-
fill="none"
|
|
2028
|
-
viewBox="0 0 24 24"
|
|
2029
|
-
stroke-width="1.5"
|
|
2030
|
-
stroke="currentColor"
|
|
2031
|
-
class="size-6"
|
|
2032
|
-
style="
|
|
2033
|
-
width: 11px;
|
|
2034
|
-
height: 11px;
|
|
2035
|
-
"
|
|
2036
|
-
>
|
|
2037
|
-
<path
|
|
2038
|
-
stroke-linecap="round"
|
|
2039
|
-
stroke-linejoin="round"
|
|
2040
|
-
d="M12 4.5v15m7.5-7.5h-15"
|
|
2041
|
-
></path>
|
|
2042
|
-
</svg>
|
|
2043
|
-
</button>
|
|
2044
|
-
|
|
2045
|
-
<button
|
|
2046
|
-
class="fl-color-swatch"
|
|
2047
|
-
style="outline: 1px dashed #ffffff66;background: transparent;"
|
|
2048
|
-
onclick={() => alert("Not implemented yet")}
|
|
2049
|
-
aria-label="Add new color"
|
|
2050
|
-
>
|
|
2051
|
-
<svg
|
|
2052
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
2053
|
-
fill="none"
|
|
2054
|
-
viewBox="0 0 24 24"
|
|
2055
|
-
stroke-width="1.5"
|
|
2056
|
-
stroke="currentColor"
|
|
2057
|
-
class="size-6"
|
|
2058
|
-
style="
|
|
2059
|
-
width: 11px;
|
|
2060
|
-
height: 11px;
|
|
2061
|
-
"
|
|
2062
|
-
>
|
|
2063
|
-
<path
|
|
2064
|
-
stroke-linecap="round"
|
|
2065
|
-
stroke-linejoin="round"
|
|
2066
|
-
d="M12 4.5v15m7.5-7.5h-15"
|
|
2067
|
-
></path>
|
|
2068
|
-
</svg>
|
|
2069
|
-
</button>
|
|
2070
|
-
{/if}
|
|
2071
|
-
</div>
|
|
2072
|
-
{:else if activeDropdownType === "line-height-dropdown"}
|
|
2073
|
-
<div class="fl-range-element">
|
|
2074
|
-
<span class="fl-range-element-value">
|
|
2075
|
-
{lineHeight.toFixed(2)}
|
|
2076
|
-
</span>
|
|
2077
|
-
<input
|
|
2078
|
-
oninput={handleRangeInput}
|
|
2079
|
-
type="range"
|
|
2080
|
-
min="0.5"
|
|
2081
|
-
max="4"
|
|
2082
|
-
step="0.05"
|
|
2083
|
-
bind:value={lineHeight}
|
|
2084
|
-
/>
|
|
2085
|
-
</div>
|
|
2086
|
-
{/if}
|
|
2087
|
-
</div>
|
|
2088
|
-
|
|
2089
|
-
{#if $editor}
|
|
2090
|
-
<!-- General Menu -->
|
|
2091
|
-
<BubbleMenu
|
|
2092
|
-
options={{ placement: "top", offset: bubbleOffset, flip: false }}
|
|
2093
|
-
editor={$editor}
|
|
2094
|
-
shouldShow={() => {
|
|
2095
|
-
const emptySelection = $editor.state.selection.empty;
|
|
2096
|
-
const isImage = $editor.isActive("image");
|
|
2097
|
-
const isCodeBlock = $editor.isActive("codeBlock");
|
|
2098
|
-
const isAudio = $editor.isActive("audio");
|
|
2099
|
-
const selection = $editor.state.selection;
|
|
2100
|
-
const isRow = $editor.storage.tableCell.customTableSelection === "row";
|
|
2101
|
-
const isColumn =
|
|
2102
|
-
$editor.storage.tableCell.customTableSelection === "column";
|
|
2103
|
-
|
|
2104
|
-
// ⛔️ Ocultar si hay flag de selección completa por fila/columna
|
|
2105
|
-
if (isRow || isColumn) {
|
|
2106
|
-
console.log(
|
|
2107
|
-
"Ocultar si hay flag de selección completa por fila/columna"
|
|
2108
|
-
);
|
|
2109
|
-
return false;
|
|
2110
|
-
}
|
|
2111
|
-
|
|
2112
|
-
// // ⛔️ Ocultar si es CellSelection completa (por seguridad)
|
|
2113
|
-
// if (selection instanceof CellSelection) {
|
|
2114
|
-
// return false;
|
|
2115
|
-
// }
|
|
2116
|
-
|
|
2117
|
-
if (emptySelection || isImage || isCodeBlock || isAudio) {
|
|
2118
|
-
return false;
|
|
2119
|
-
}
|
|
2120
|
-
return true;
|
|
2121
|
-
}}
|
|
2122
|
-
>
|
|
2123
|
-
<div data-test-id="bubble-menu" class="fl-bubble-menu flex">
|
|
2124
|
-
<div role="group" class="fl-rich-text-toolbar-group">
|
|
2125
|
-
<!-- Bold -->
|
|
2126
|
-
<button
|
|
2127
|
-
type="button"
|
|
2128
|
-
onclick={() => $editor.chain().focus().toggleBold().run()}
|
|
2129
|
-
disabled={!$editor.can().chain().focus().toggleBold().run()}
|
|
2130
|
-
class="fl-bubble-menu-mark-button"
|
|
2131
|
-
class:is-active={$editor.isActive("bold")}
|
|
2132
|
-
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
2133
|
-
aria-label="Bold"
|
|
2134
|
-
>
|
|
2135
|
-
<svg
|
|
2136
|
-
width="24"
|
|
2137
|
-
height="24"
|
|
2138
|
-
class="fl-button-icon"
|
|
2139
|
-
viewBox="0 0 24 24"
|
|
2140
|
-
fill="currentColor"
|
|
2141
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
2142
|
-
><path
|
|
2143
|
-
fill-rule="evenodd"
|
|
2144
|
-
clip-rule="evenodd"
|
|
2145
|
-
d="M6 2.5C5.17157 2.5 4.5 3.17157 4.5 4V20C4.5 20.8284 5.17157 21.5 6 21.5H15C16.4587 21.5 17.8576 20.9205 18.8891 19.8891C19.9205 18.8576 20.5 17.4587 20.5 16C20.5 14.5413 19.9205 13.1424 18.8891 12.1109C18.6781 11.9 18.4518 11.7079 18.2128 11.5359C19.041 10.5492 19.5 9.29829 19.5 8C19.5 6.54131 18.9205 5.14236 17.8891 4.11091C16.8576 3.07946 15.4587 2.5 14 2.5H6ZM14 10.5C14.663 10.5 15.2989 10.2366 15.7678 9.76777C16.2366 9.29893 16.5 8.66304 16.5 8C16.5 7.33696 16.2366 6.70107 15.7678 6.23223C15.2989 5.76339 14.663 5.5 14 5.5H7.5V10.5H14ZM7.5 18.5V13.5H15C15.663 13.5 16.2989 13.7634 16.7678 14.2322C17.2366 14.7011 17.5 15.337 17.5 16C17.5 16.663 17.2366 17.2989 16.7678 17.7678C16.2989 18.2366 15.663 18.5 15 18.5H7.5Z"
|
|
2146
|
-
fill="currentColor"
|
|
2147
|
-
></path></svg
|
|
2148
|
-
>
|
|
2149
|
-
</button>
|
|
2150
|
-
|
|
2151
|
-
<!-- Italic -->
|
|
2152
|
-
<button
|
|
2153
|
-
type="button"
|
|
2154
|
-
onclick={() => $editor.chain().focus().toggleItalic().run()}
|
|
2155
|
-
disabled={!$editor.can().chain().focus().toggleItalic().run()}
|
|
2156
|
-
class="fl-bubble-menu-mark-button"
|
|
2157
|
-
class:is-active={$editor.isActive("italic")}
|
|
2158
|
-
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
2159
|
-
aria-label="Italic"
|
|
2160
|
-
>
|
|
2161
|
-
<svg
|
|
2162
|
-
width="24"
|
|
2163
|
-
height="24"
|
|
2164
|
-
class="tiptap-button-icon"
|
|
2165
|
-
viewBox="0 0 24 24"
|
|
2166
|
-
fill="currentColor"
|
|
2167
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
2168
|
-
><path
|
|
2169
|
-
d="M15.0222 3H19C19.5523 3 20 3.44772 20 4C20 4.55228 19.5523 5 19 5H15.693L10.443 19H14C14.5523 19 15 19.4477 15 20C15 20.5523 14.5523 21 14 21H9.02418C9.00802 21.0004 8.99181 21.0004 8.97557 21H5C4.44772 21 4 20.5523 4 20C4 19.4477 4.44772 19 5 19H8.30704L13.557 5H10C9.44772 5 9 4.55228 9 4C9 3.44772 9.44772 3 10 3H14.9782C14.9928 2.99968 15.0075 2.99967 15.0222 3Z"
|
|
2170
|
-
fill="currentColor"
|
|
2171
|
-
></path></svg
|
|
2172
|
-
>
|
|
2173
|
-
</button>
|
|
2174
|
-
|
|
2175
|
-
<!-- Underline -->
|
|
2176
|
-
<button
|
|
2177
|
-
type="button"
|
|
2178
|
-
onclick={() => $editor.chain().focus().toggleUnderline().run()}
|
|
2179
|
-
disabled={!$editor.can().chain().focus().toggleStrike().run()}
|
|
2180
|
-
class="fl-bubble-menu-mark-button"
|
|
2181
|
-
class:is-active={$editor.isActive("underline")}
|
|
2182
|
-
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
2183
|
-
aria-label="Underline"
|
|
2184
|
-
>
|
|
2185
|
-
<svg
|
|
2186
|
-
width="24"
|
|
2187
|
-
height="24"
|
|
2188
|
-
class="tiptap-button-icon"
|
|
2189
|
-
viewBox="0 0 24 24"
|
|
2190
|
-
fill="currentColor"
|
|
2191
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
2192
|
-
><path
|
|
2193
|
-
fill-rule="evenodd"
|
|
2194
|
-
clip-rule="evenodd"
|
|
2195
|
-
d="M7 4C7 3.44772 6.55228 3 6 3C5.44772 3 5 3.44772 5 4V10C5 11.8565 5.7375 13.637 7.05025 14.9497C8.36301 16.2625 10.1435 17 12 17C13.8565 17 15.637 16.2625 16.9497 14.9497C18.2625 13.637 19 11.8565 19 10V4C19 3.44772 18.5523 3 18 3C17.4477 3 17 3.44772 17 4V10C17 11.3261 16.4732 12.5979 15.5355 13.5355C14.5979 14.4732 13.3261 15 12 15C10.6739 15 9.40215 14.4732 8.46447 13.5355C7.52678 12.5979 7 11.3261 7 10V4ZM4 19C3.44772 19 3 19.4477 3 20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20C21 19.4477 20.5523 19 20 19H4Z"
|
|
2196
|
-
fill="currentColor"
|
|
2197
|
-
></path></svg
|
|
2198
|
-
>
|
|
2199
|
-
</button>
|
|
2200
|
-
|
|
2201
|
-
<!-- Strike -->
|
|
2202
|
-
<button
|
|
2203
|
-
type="button"
|
|
2204
|
-
onclick={() => $editor.chain().focus().toggleStrike().run()}
|
|
2205
|
-
disabled={!$editor.can().chain().focus().toggleStrike().run()}
|
|
2206
|
-
class="fl-bubble-menu-mark-button"
|
|
2207
|
-
class:is-active={$editor.isActive("strike")}
|
|
2208
|
-
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
2209
|
-
aria-label="Strike"
|
|
2210
|
-
>
|
|
2211
|
-
<svg
|
|
2212
|
-
width="24"
|
|
2213
|
-
height="24"
|
|
2214
|
-
class="tiptap-button-icon"
|
|
2215
|
-
viewBox="0 0 24 24"
|
|
2216
|
-
fill="currentColor"
|
|
2217
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
2218
|
-
><path
|
|
2219
|
-
d="M9.00039 3H16.0001C16.5524 3 17.0001 3.44772 17.0001 4C17.0001 4.55229 16.5524 5 16.0001 5H9.00011C8.68006 4.99983 8.36412 5.07648 8.07983 5.22349C7.79555 5.37051 7.55069 5.5836 7.36585 5.84487C7.181 6.10614 7.06155 6.40796 7.01754 6.72497C6.97352 7.04198 7.00623 7.36492 7.11292 7.66667C7.29701 8.18737 7.02414 8.75872 6.50344 8.94281C5.98274 9.1269 5.4114 8.85403 5.2273 8.33333C5.01393 7.72984 4.94851 7.08396 5.03654 6.44994C5.12456 5.81592 5.36346 5.21229 5.73316 4.68974C6.10285 4.1672 6.59256 3.74101 7.16113 3.44698C7.72955 3.15303 8.36047 2.99975 9.00039 3Z"
|
|
2220
|
-
fill="currentColor"
|
|
2221
|
-
></path><path
|
|
2222
|
-
d="M18 13H20C20.5523 13 21 12.5523 21 12C21 11.4477 20.5523 11 20 11H4C3.44772 11 3 11.4477 3 12C3 12.5523 3.44772 13 4 13H14C14.7956 13 15.5587 13.3161 16.1213 13.8787C16.6839 14.4413 17 15.2044 17 16C17 16.7956 16.6839 17.5587 16.1213 18.1213C15.5587 18.6839 14.7956 19 14 19H6C5.44772 19 5 19.4477 5 20C5 20.5523 5.44772 21 6 21H14C15.3261 21 16.5979 20.4732 17.5355 19.5355C18.4732 18.5979 19 17.3261 19 16C19 14.9119 18.6453 13.8604 18 13Z"
|
|
2223
|
-
fill="currentColor"
|
|
2224
|
-
></path></svg
|
|
2225
|
-
>
|
|
2226
|
-
</button>
|
|
2227
|
-
|
|
2228
|
-
<!-- Code -->
|
|
2229
|
-
<button
|
|
2230
|
-
type="button"
|
|
2231
|
-
onclick={() => $editor.chain().focus().toggleCode().run()}
|
|
2232
|
-
disabled={!$editor.can().chain().focus().toggleCode().run()}
|
|
2233
|
-
class="fl-bubble-menu-mark-button"
|
|
2234
|
-
class:is-active={$editor.isActive("code")}
|
|
2235
|
-
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
2236
|
-
aria-label="Code"
|
|
2237
|
-
>
|
|
2238
|
-
<svg
|
|
2239
|
-
width="24"
|
|
2240
|
-
height="24"
|
|
2241
|
-
class="tiptap-button-icon"
|
|
2242
|
-
viewBox="0 0 24 24"
|
|
2243
|
-
fill="currentColor"
|
|
2244
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
2245
|
-
><path
|
|
2246
|
-
d="M15.4545 4.2983C15.6192 3.77115 15.3254 3.21028 14.7983 3.04554C14.2712 2.88081 13.7103 3.1746 13.5455 3.70175L8.54554 19.7017C8.38081 20.2289 8.6746 20.7898 9.20175 20.9545C9.72889 21.1192 10.2898 20.8254 10.4545 20.2983L15.4545 4.2983Z"
|
|
2247
|
-
fill="currentColor"
|
|
2248
|
-
></path><path
|
|
2249
|
-
d="M6.70711 7.29289C7.09763 7.68342 7.09763 8.31658 6.70711 8.70711L3.41421 12L6.70711 15.2929C7.09763 15.6834 7.09763 16.3166 6.70711 16.7071C6.31658 17.0976 5.68342 17.0976 5.29289 16.7071L1.29289 12.7071C0.902369 12.3166 0.902369 11.6834 1.29289 11.2929L5.29289 7.29289C5.68342 6.90237 6.31658 6.90237 6.70711 7.29289Z"
|
|
2250
|
-
fill="currentColor"
|
|
2251
|
-
></path><path
|
|
2252
|
-
d="M17.2929 7.29289C17.6834 6.90237 18.3166 6.90237 18.7071 7.29289L22.7071 11.2929C23.0976 11.6834 23.0976 12.3166 22.7071 12.7071L18.7071 16.7071C18.3166 17.0976 17.6834 17.0976 17.2929 16.7071C16.9024 16.3166 16.9024 15.6834 17.2929 15.2929L20.5858 12L17.2929 8.70711C16.9024 8.31658 16.9024 7.68342 17.2929 7.29289Z"
|
|
2253
|
-
fill="currentColor"
|
|
2254
|
-
></path></svg
|
|
2255
|
-
>
|
|
2256
|
-
</button>
|
|
2257
|
-
|
|
2258
|
-
<!-- Link -->
|
|
1978
|
+
{#each HIGHLIGHT_COLOR_PALETTE as color}
|
|
2259
1979
|
<button
|
|
2260
|
-
|
|
2261
|
-
|
|
2262
|
-
|
|
2263
|
-
|
|
2264
|
-
|
|
2265
|
-
|
|
1980
|
+
class="fl-color-swatch"
|
|
1981
|
+
class:active={$editor?.isActive("textStyle", {
|
|
1982
|
+
color: color,
|
|
1983
|
+
})}
|
|
1984
|
+
onclick={() => {
|
|
1985
|
+
$editor?.chain().focus().setHighlight({ color }).run();
|
|
1986
|
+
hideDropdown();
|
|
1987
|
+
}}
|
|
1988
|
+
style="background-color: {color};"
|
|
1989
|
+
aria-label={color}
|
|
2266
1990
|
>
|
|
2267
|
-
<svg
|
|
2268
|
-
width="24"
|
|
2269
|
-
height="24"
|
|
2270
|
-
class="tiptap-button-icon"
|
|
2271
|
-
viewBox="0 0 24 24"
|
|
2272
|
-
fill="currentColor"
|
|
2273
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
2274
|
-
><path
|
|
2275
|
-
d="M16.9958 1.06669C15.4226 1.05302 13.907 1.65779 12.7753 2.75074L12.765 2.76086L11.045 4.47086C10.6534 4.86024 10.6515 5.49341 11.0409 5.88507C11.4303 6.27673 12.0634 6.27858 12.4551 5.88919L14.1697 4.18456C14.9236 3.45893 15.9319 3.05752 16.9784 3.06662C18.0272 3.07573 19.0304 3.49641 19.772 4.23804C20.5137 4.97967 20.9344 5.98292 20.9435 7.03171C20.9526 8.07776 20.5515 9.08563 19.8265 9.83941L16.833 12.8329C16.4274 13.2386 15.9393 13.5524 15.4019 13.7529C14.8645 13.9533 14.2903 14.0359 13.7181 13.9949C13.146 13.9539 12.5894 13.7904 12.0861 13.5154C11.5827 13.2404 11.1444 12.8604 10.8008 12.401C10.47 11.9588 9.84333 11.8685 9.40108 12.1993C8.95883 12.5301 8.86849 13.1568 9.1993 13.599C9.71464 14.288 10.3721 14.858 11.1272 15.2705C11.8822 15.683 12.7171 15.9283 13.5753 15.9898C14.4334 16.0513 15.2948 15.9274 16.1009 15.6267C16.907 15.326 17.639 14.8555 18.2473 14.247L21.2472 11.2471L21.2593 11.2347C22.3523 10.1031 22.9571 8.58751 22.9434 7.01433C22.9297 5.44115 22.2987 3.93628 21.1863 2.82383C20.0738 1.71138 18.5689 1.08036 16.9958 1.06669Z"
|
|
2276
|
-
fill="currentColor"
|
|
2277
|
-
></path><path
|
|
2278
|
-
d="M10.4247 8.0102C9.56657 7.94874 8.70522 8.07256 7.89911 8.37326C7.09305 8.67395 6.36096 9.14458 5.75272 9.753L2.75285 12.7529L2.74067 12.7653C1.64772 13.8969 1.04295 15.4125 1.05662 16.9857C1.07029 18.5589 1.70131 20.0637 2.81376 21.1762C3.9262 22.2886 5.43108 22.9196 7.00426 22.9333C8.57744 22.947 10.0931 22.3422 11.2247 21.2493L11.2371 21.2371L12.9471 19.5271C13.3376 19.1366 13.3376 18.5034 12.9471 18.1129C12.5565 17.7223 11.9234 17.7223 11.5328 18.1129L9.82932 19.8164C9.07555 20.5414 8.06768 20.9425 7.02164 20.9334C5.97285 20.9243 4.9696 20.5036 4.22797 19.762C3.48634 19.0203 3.06566 18.0171 3.05655 16.9683C3.04746 15.9222 3.44851 14.9144 4.17355 14.1606L7.16719 11.167C7.5727 10.7613 8.06071 10.4476 8.59811 10.2471C9.13552 10.0467 9.70976 9.96412 10.2819 10.0051C10.854 10.0461 11.4106 10.2096 11.9139 10.4846C12.4173 10.7596 12.8556 11.1397 13.1992 11.599C13.53 12.0412 14.1567 12.1316 14.5989 11.8007C15.0412 11.4699 15.1315 10.8433 14.8007 10.401C14.2854 9.71205 13.6279 9.14198 12.8729 8.72948C12.1178 8.31697 11.2829 8.07166 10.4247 8.0102Z"
|
|
2279
|
-
fill="currentColor"
|
|
2280
|
-
></path></svg
|
|
2281
|
-
>
|
|
2282
1991
|
</button>
|
|
1992
|
+
{/each}
|
|
1993
|
+
|
|
1994
|
+
<button
|
|
1995
|
+
class="fl-color-swatch unset-color"
|
|
1996
|
+
onclick={() => {
|
|
1997
|
+
$editor?.chain().focus().unsetColor().run();
|
|
1998
|
+
hideDropdown();
|
|
1999
|
+
}}
|
|
2000
|
+
style="background-color: #ffffff;"
|
|
2001
|
+
aria-label="Unset color"
|
|
2002
|
+
>
|
|
2003
|
+
</button>
|
|
2283
2004
|
|
|
2284
|
-
|
|
2005
|
+
{#if recentCustomColors.length > 0}
|
|
2006
|
+
{#each recentCustomColors as color}
|
|
2007
|
+
<button
|
|
2008
|
+
class="fl-color-swatch"
|
|
2009
|
+
class:active={$editor?.isActive("textStyle", {
|
|
2010
|
+
color: color,
|
|
2011
|
+
})}
|
|
2012
|
+
onclick={() => {
|
|
2013
|
+
$editor?.chain().focus().setHighlight({ color }).run();
|
|
2014
|
+
hideDropdown();
|
|
2015
|
+
}}
|
|
2016
|
+
style="background-color: {color};"
|
|
2017
|
+
aria-label={color}
|
|
2018
|
+
>
|
|
2019
|
+
</button>
|
|
2020
|
+
{/each}
|
|
2021
|
+
{:else}
|
|
2285
2022
|
<button
|
|
2286
|
-
class="fl-
|
|
2287
|
-
|
|
2288
|
-
|
|
2289
|
-
|
|
2023
|
+
class="fl-color-swatch"
|
|
2024
|
+
style="outline: 1px dashed #ffffff66;background: transparent;"
|
|
2025
|
+
onclick={() => alert("Not implemented yet")}
|
|
2026
|
+
aria-label="Add new color"
|
|
2290
2027
|
>
|
|
2291
2028
|
<svg
|
|
2292
|
-
width="24"
|
|
2293
|
-
height="24"
|
|
2294
|
-
class="tiptap-button-icon"
|
|
2295
|
-
viewBox="0 0 24 24"
|
|
2296
|
-
fill="currentColor"
|
|
2297
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
2298
|
-
><path
|
|
2299
|
-
fill-rule="evenodd"
|
|
2300
|
-
clip-rule="evenodd"
|
|
2301
|
-
d="M14.7072 4.70711C15.0977 4.31658 15.0977 3.68342 14.7072 3.29289C14.3167 2.90237 13.6835 2.90237 13.293 3.29289L8.69294 7.89286L8.68594 7.9C8.13626 8.46079 7.82837 9.21474 7.82837 10C7.82837 10.2306 7.85491 10.4584 7.90631 10.6795L2.29289 16.2929C2.10536 16.4804 2 16.7348 2 17V20C2 20.5523 2.44772 21 3 21H12C12.2652 21 12.5196 20.8946 12.7071 20.7071L15.3205 18.0937C15.5416 18.1452 15.7695 18.1717 16.0001 18.1717C16.7853 18.1717 17.5393 17.8639 18.1001 17.3142L22.7072 12.7071C23.0977 12.3166 23.0977 11.6834 22.7072 11.2929C22.3167 10.9024 21.6835 10.9024 21.293 11.2929L16.6971 15.8887C16.5105 16.0702 16.2605 16.1717 16.0001 16.1717C15.7397 16.1717 15.4897 16.0702 15.303 15.8887L10.1113 10.697C9.92992 10.5104 9.82837 10.2604 9.82837 10C9.82837 9.73963 9.92992 9.48958 10.1113 9.30297L14.7072 4.70711ZM13.5858 17L9.00004 12.4142L4 17.4142V19H11.5858L13.5858 17Z"
|
|
2302
|
-
fill="currentColor"
|
|
2303
|
-
></path>
|
|
2304
|
-
</svg>
|
|
2305
|
-
<svg
|
|
2306
|
-
class="toogle-dropdown-button-icon"
|
|
2307
|
-
aria-hidden="true"
|
|
2308
2029
|
xmlns="http://www.w3.org/2000/svg"
|
|
2309
2030
|
fill="none"
|
|
2310
|
-
viewBox="0 0
|
|
2031
|
+
viewBox="0 0 24 24"
|
|
2032
|
+
stroke-width="1.5"
|
|
2033
|
+
stroke="currentColor"
|
|
2034
|
+
class="size-6"
|
|
2035
|
+
style="
|
|
2036
|
+
width: 11px;
|
|
2037
|
+
height: 11px;
|
|
2038
|
+
"
|
|
2311
2039
|
>
|
|
2312
2040
|
<path
|
|
2313
|
-
stroke="currentColor"
|
|
2314
2041
|
stroke-linecap="round"
|
|
2315
2042
|
stroke-linejoin="round"
|
|
2316
|
-
|
|
2317
|
-
d="m1 1 4 4 4-4"
|
|
2043
|
+
d="M12 4.5v15m7.5-7.5h-15"
|
|
2318
2044
|
></path>
|
|
2319
2045
|
</svg>
|
|
2320
2046
|
</button>
|
|
2321
2047
|
|
|
2322
|
-
<!-- Text color -->
|
|
2323
2048
|
<button
|
|
2324
|
-
|
|
2325
|
-
|
|
2326
|
-
|
|
2327
|
-
|
|
2328
|
-
toogleDropdown(textColorDropdownTriggerEl, "text-color-dropdown")}
|
|
2329
|
-
class="fl-bubble-menu-mark-button"
|
|
2049
|
+
class="fl-color-swatch"
|
|
2050
|
+
style="outline: 1px dashed #ffffff66;background: transparent;"
|
|
2051
|
+
onclick={() => alert("Not implemented yet")}
|
|
2052
|
+
aria-label="Add new color"
|
|
2330
2053
|
>
|
|
2331
|
-
<span
|
|
2332
|
-
class="fl-button-color-text-popover"
|
|
2333
|
-
style="background: {$editor?.getAttributes('textStyle')?.color ||
|
|
2334
|
-
'currentColor'}"
|
|
2335
|
-
></span>
|
|
2336
|
-
|
|
2337
2054
|
<svg
|
|
2338
|
-
class="toogle-dropdown-button-icon"
|
|
2339
|
-
aria-hidden="true"
|
|
2340
2055
|
xmlns="http://www.w3.org/2000/svg"
|
|
2341
2056
|
fill="none"
|
|
2342
|
-
viewBox="0 0
|
|
2057
|
+
viewBox="0 0 24 24"
|
|
2058
|
+
stroke-width="1.5"
|
|
2059
|
+
stroke="currentColor"
|
|
2060
|
+
class="size-6"
|
|
2061
|
+
style="
|
|
2062
|
+
width: 11px;
|
|
2063
|
+
height: 11px;
|
|
2064
|
+
"
|
|
2343
2065
|
>
|
|
2344
2066
|
<path
|
|
2345
|
-
stroke="currentColor"
|
|
2346
2067
|
stroke-linecap="round"
|
|
2347
2068
|
stroke-linejoin="round"
|
|
2348
|
-
|
|
2349
|
-
d="m1 1 4 4 4-4"
|
|
2069
|
+
d="M12 4.5v15m7.5-7.5h-15"
|
|
2350
2070
|
></path>
|
|
2351
2071
|
</svg>
|
|
2352
2072
|
</button>
|
|
2073
|
+
{/if}
|
|
2074
|
+
</div>
|
|
2075
|
+
{:else if activeDropdownType === "line-height-dropdown"}
|
|
2076
|
+
<div class="fl-range-element">
|
|
2077
|
+
<span class="fl-range-element-value">
|
|
2078
|
+
{lineHeight.toFixed(2)}
|
|
2079
|
+
</span>
|
|
2080
|
+
<input
|
|
2081
|
+
oninput={handleRangeInput}
|
|
2082
|
+
type="range"
|
|
2083
|
+
min="0.5"
|
|
2084
|
+
max="4"
|
|
2085
|
+
step="0.05"
|
|
2086
|
+
bind:value={lineHeight}
|
|
2087
|
+
/>
|
|
2088
|
+
</div>
|
|
2089
|
+
{/if}
|
|
2090
|
+
</div>
|
|
2091
|
+
|
|
2092
|
+
{#if editor}
|
|
2093
|
+
<!-- General Menu -->
|
|
2094
|
+
<div class="hidden">
|
|
2095
|
+
<BubbleMenu
|
|
2096
|
+
options={{ placement: "top", strategy: "fixed", offset: bubbleOffset, flip: false }}
|
|
2097
|
+
editor={$editor}
|
|
2098
|
+
shouldShow={() => {
|
|
2099
|
+
const emptySelection = $editor.state.selection.empty;
|
|
2100
|
+
const isImage = $editor.isActive("image");
|
|
2101
|
+
const isCodeBlock = $editor.isActive("codeBlock");
|
|
2102
|
+
const isAudio = $editor.isActive("audio");
|
|
2103
|
+
const selection = $editor.state.selection;
|
|
2104
|
+
const isRow = $editor.storage.tableCell.customTableSelection === "row";
|
|
2105
|
+
const isColumn =
|
|
2106
|
+
$editor.storage.tableCell.customTableSelection === "column";
|
|
2107
|
+
|
|
2108
|
+
// ⛔️ Ocultar si hay flag de selección completa por fila/columna
|
|
2109
|
+
if (isRow || isColumn) {
|
|
2110
|
+
console.log(
|
|
2111
|
+
"Ocultar si hay flag de selección completa por fila/columna"
|
|
2112
|
+
);
|
|
2113
|
+
return false;
|
|
2114
|
+
}
|
|
2115
|
+
|
|
2116
|
+
// // ⛔️ Ocultar si es CellSelection completa (por seguridad)
|
|
2117
|
+
// if (selection instanceof CellSelection) {
|
|
2118
|
+
// return false;
|
|
2119
|
+
// }
|
|
2120
|
+
|
|
2121
|
+
if (emptySelection || isImage || isCodeBlock || isAudio) {
|
|
2122
|
+
return false;
|
|
2123
|
+
}
|
|
2124
|
+
return true;
|
|
2125
|
+
}}
|
|
2126
|
+
appendTo={document.body}
|
|
2127
|
+
>
|
|
2128
|
+
<div data-test-id="bubble-menu" class="fl-bubble-menu flex">
|
|
2129
|
+
<div role="group" class="fl-rich-text-toolbar-group">
|
|
2130
|
+
<!-- Bold -->
|
|
2131
|
+
<button
|
|
2132
|
+
type="button"
|
|
2133
|
+
onclick={() => $editor.chain().focus().toggleBold().run()}
|
|
2134
|
+
disabled={!$editor.can().chain().focus().toggleBold().run()}
|
|
2135
|
+
class="fl-bubble-menu-mark-button"
|
|
2136
|
+
class:is-active={$editor.isActive("bold")}
|
|
2137
|
+
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
2138
|
+
aria-label="Bold"
|
|
2139
|
+
>
|
|
2140
|
+
<svg
|
|
2141
|
+
width="24"
|
|
2142
|
+
height="24"
|
|
2143
|
+
class="fl-button-icon"
|
|
2144
|
+
viewBox="0 0 24 24"
|
|
2145
|
+
fill="currentColor"
|
|
2146
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
2147
|
+
><path
|
|
2148
|
+
fill-rule="evenodd"
|
|
2149
|
+
clip-rule="evenodd"
|
|
2150
|
+
d="M6 2.5C5.17157 2.5 4.5 3.17157 4.5 4V20C4.5 20.8284 5.17157 21.5 6 21.5H15C16.4587 21.5 17.8576 20.9205 18.8891 19.8891C19.9205 18.8576 20.5 17.4587 20.5 16C20.5 14.5413 19.9205 13.1424 18.8891 12.1109C18.6781 11.9 18.4518 11.7079 18.2128 11.5359C19.041 10.5492 19.5 9.29829 19.5 8C19.5 6.54131 18.9205 5.14236 17.8891 4.11091C16.8576 3.07946 15.4587 2.5 14 2.5H6ZM14 10.5C14.663 10.5 15.2989 10.2366 15.7678 9.76777C16.2366 9.29893 16.5 8.66304 16.5 8C16.5 7.33696 16.2366 6.70107 15.7678 6.23223C15.2989 5.76339 14.663 5.5 14 5.5H7.5V10.5H14ZM7.5 18.5V13.5H15C15.663 13.5 16.2989 13.7634 16.7678 14.2322C17.2366 14.7011 17.5 15.337 17.5 16C17.5 16.663 17.2366 17.2989 16.7678 17.7678C16.2989 18.2366 15.663 18.5 15 18.5H7.5Z"
|
|
2151
|
+
fill="currentColor"
|
|
2152
|
+
></path></svg
|
|
2153
|
+
>
|
|
2154
|
+
</button>
|
|
2353
2155
|
|
|
2354
|
-
|
|
2156
|
+
<!-- Italic -->
|
|
2355
2157
|
<button
|
|
2158
|
+
type="button"
|
|
2159
|
+
onclick={() => $editor.chain().focus().toggleItalic().run()}
|
|
2160
|
+
disabled={!$editor.can().chain().focus().toggleItalic().run()}
|
|
2356
2161
|
class="fl-bubble-menu-mark-button"
|
|
2162
|
+
class:is-active={$editor.isActive("italic")}
|
|
2163
|
+
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
2164
|
+
aria-label="Italic"
|
|
2165
|
+
>
|
|
2166
|
+
<svg
|
|
2167
|
+
width="24"
|
|
2168
|
+
height="24"
|
|
2169
|
+
class="tiptap-button-icon"
|
|
2170
|
+
viewBox="0 0 24 24"
|
|
2171
|
+
fill="currentColor"
|
|
2172
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
2173
|
+
><path
|
|
2174
|
+
d="M15.0222 3H19C19.5523 3 20 3.44772 20 4C20 4.55228 19.5523 5 19 5H15.693L10.443 19H14C14.5523 19 15 19.4477 15 20C15 20.5523 14.5523 21 14 21H9.02418C9.00802 21.0004 8.99181 21.0004 8.97557 21H5C4.44772 21 4 20.5523 4 20C4 19.4477 4.44772 19 5 19H8.30704L13.557 5H10C9.44772 5 9 4.55228 9 4C9 3.44772 9.44772 3 10 3H14.9782C14.9928 2.99968 15.0075 2.99967 15.0222 3Z"
|
|
2175
|
+
fill="currentColor"
|
|
2176
|
+
></path></svg
|
|
2177
|
+
>
|
|
2178
|
+
</button>
|
|
2179
|
+
|
|
2180
|
+
<!-- Underline -->
|
|
2181
|
+
<button
|
|
2357
2182
|
type="button"
|
|
2358
|
-
onclick={() => $editor.chain().focus().
|
|
2359
|
-
|
|
2183
|
+
onclick={() => $editor.chain().focus().toggleUnderline().run()}
|
|
2184
|
+
disabled={!$editor.can().chain().focus().toggleStrike().run()}
|
|
2185
|
+
class="fl-bubble-menu-mark-button"
|
|
2186
|
+
class:is-active={$editor.isActive("underline")}
|
|
2187
|
+
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
2188
|
+
aria-label="Underline"
|
|
2360
2189
|
>
|
|
2361
2190
|
<svg
|
|
2191
|
+
width="24"
|
|
2192
|
+
height="24"
|
|
2193
|
+
class="tiptap-button-icon"
|
|
2194
|
+
viewBox="0 0 24 24"
|
|
2195
|
+
fill="currentColor"
|
|
2362
2196
|
xmlns="http://www.w3.org/2000/svg"
|
|
2197
|
+
><path
|
|
2198
|
+
fill-rule="evenodd"
|
|
2199
|
+
clip-rule="evenodd"
|
|
2200
|
+
d="M7 4C7 3.44772 6.55228 3 6 3C5.44772 3 5 3.44772 5 4V10C5 11.8565 5.7375 13.637 7.05025 14.9497C8.36301 16.2625 10.1435 17 12 17C13.8565 17 15.637 16.2625 16.9497 14.9497C18.2625 13.637 19 11.8565 19 10V4C19 3.44772 18.5523 3 18 3C17.4477 3 17 3.44772 17 4V10C17 11.3261 16.4732 12.5979 15.5355 13.5355C14.5979 14.4732 13.3261 15 12 15C10.6739 15 9.40215 14.4732 8.46447 13.5355C7.52678 12.5979 7 11.3261 7 10V4ZM4 19C3.44772 19 3 19.4477 3 20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20C21 19.4477 20.5523 19 20 19H4Z"
|
|
2201
|
+
fill="currentColor"
|
|
2202
|
+
></path></svg
|
|
2203
|
+
>
|
|
2204
|
+
</button>
|
|
2205
|
+
|
|
2206
|
+
<!-- Strike -->
|
|
2207
|
+
<button
|
|
2208
|
+
type="button"
|
|
2209
|
+
onclick={() => $editor.chain().focus().toggleStrike().run()}
|
|
2210
|
+
disabled={!$editor.can().chain().focus().toggleStrike().run()}
|
|
2211
|
+
class="fl-bubble-menu-mark-button"
|
|
2212
|
+
class:is-active={$editor.isActive("strike")}
|
|
2213
|
+
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
2214
|
+
aria-label="Strike"
|
|
2215
|
+
>
|
|
2216
|
+
<svg
|
|
2363
2217
|
width="24"
|
|
2364
2218
|
height="24"
|
|
2219
|
+
class="tiptap-button-icon"
|
|
2365
2220
|
viewBox="0 0 24 24"
|
|
2366
|
-
fill="
|
|
2367
|
-
|
|
2368
|
-
|
|
2369
|
-
|
|
2370
|
-
|
|
2371
|
-
|
|
2372
|
-
|
|
2373
|
-
|
|
2221
|
+
fill="currentColor"
|
|
2222
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
2223
|
+
><path
|
|
2224
|
+
d="M9.00039 3H16.0001C16.5524 3 17.0001 3.44772 17.0001 4C17.0001 4.55229 16.5524 5 16.0001 5H9.00011C8.68006 4.99983 8.36412 5.07648 8.07983 5.22349C7.79555 5.37051 7.55069 5.5836 7.36585 5.84487C7.181 6.10614 7.06155 6.40796 7.01754 6.72497C6.97352 7.04198 7.00623 7.36492 7.11292 7.66667C7.29701 8.18737 7.02414 8.75872 6.50344 8.94281C5.98274 9.1269 5.4114 8.85403 5.2273 8.33333C5.01393 7.72984 4.94851 7.08396 5.03654 6.44994C5.12456 5.81592 5.36346 5.21229 5.73316 4.68974C6.10285 4.1672 6.59256 3.74101 7.16113 3.44698C7.72955 3.15303 8.36047 2.99975 9.00039 3Z"
|
|
2225
|
+
fill="currentColor"
|
|
2226
|
+
></path><path
|
|
2227
|
+
d="M18 13H20C20.5523 13 21 12.5523 21 12C21 11.4477 20.5523 11 20 11H4C3.44772 11 3 11.4477 3 12C3 12.5523 3.44772 13 4 13H14C14.7956 13 15.5587 13.3161 16.1213 13.8787C16.6839 14.4413 17 15.2044 17 16C17 16.7956 16.6839 17.5587 16.1213 18.1213C15.5587 18.6839 14.7956 19 14 19H6C5.44772 19 5 19.4477 5 20C5 20.5523 5.44772 21 6 21H14C15.3261 21 16.5979 20.4732 17.5355 19.5355C18.4732 18.5979 19 17.3261 19 16C19 14.9119 18.6453 13.8604 18 13Z"
|
|
2228
|
+
fill="currentColor"
|
|
2374
2229
|
></path></svg
|
|
2375
2230
|
>
|
|
2376
2231
|
</button>
|
|
2377
|
-
{/if}
|
|
2378
2232
|
|
|
2379
|
-
|
|
2233
|
+
<!-- Code -->
|
|
2380
2234
|
<button
|
|
2235
|
+
type="button"
|
|
2236
|
+
onclick={() => $editor.chain().focus().toggleCode().run()}
|
|
2237
|
+
disabled={!$editor.can().chain().focus().toggleCode().run()}
|
|
2381
2238
|
class="fl-bubble-menu-mark-button"
|
|
2239
|
+
class:is-active={$editor.isActive("code")}
|
|
2240
|
+
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
2241
|
+
aria-label="Code"
|
|
2242
|
+
>
|
|
2243
|
+
<svg
|
|
2244
|
+
width="24"
|
|
2245
|
+
height="24"
|
|
2246
|
+
class="tiptap-button-icon"
|
|
2247
|
+
viewBox="0 0 24 24"
|
|
2248
|
+
fill="currentColor"
|
|
2249
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
2250
|
+
><path
|
|
2251
|
+
d="M15.4545 4.2983C15.6192 3.77115 15.3254 3.21028 14.7983 3.04554C14.2712 2.88081 13.7103 3.1746 13.5455 3.70175L8.54554 19.7017C8.38081 20.2289 8.6746 20.7898 9.20175 20.9545C9.72889 21.1192 10.2898 20.8254 10.4545 20.2983L15.4545 4.2983Z"
|
|
2252
|
+
fill="currentColor"
|
|
2253
|
+
></path><path
|
|
2254
|
+
d="M6.70711 7.29289C7.09763 7.68342 7.09763 8.31658 6.70711 8.70711L3.41421 12L6.70711 15.2929C7.09763 15.6834 7.09763 16.3166 6.70711 16.7071C6.31658 17.0976 5.68342 17.0976 5.29289 16.7071L1.29289 12.7071C0.902369 12.3166 0.902369 11.6834 1.29289 11.2929L5.29289 7.29289C5.68342 6.90237 6.31658 6.90237 6.70711 7.29289Z"
|
|
2255
|
+
fill="currentColor"
|
|
2256
|
+
></path><path
|
|
2257
|
+
d="M17.2929 7.29289C17.6834 6.90237 18.3166 6.90237 18.7071 7.29289L22.7071 11.2929C23.0976 11.6834 23.0976 12.3166 22.7071 12.7071L18.7071 16.7071C18.3166 17.0976 17.6834 17.0976 17.2929 16.7071C16.9024 16.3166 16.9024 15.6834 17.2929 15.2929L20.5858 12L17.2929 8.70711C16.9024 8.31658 16.9024 7.68342 17.2929 7.29289Z"
|
|
2258
|
+
fill="currentColor"
|
|
2259
|
+
></path></svg
|
|
2260
|
+
>
|
|
2261
|
+
</button>
|
|
2262
|
+
|
|
2263
|
+
<!-- Link -->
|
|
2264
|
+
<button
|
|
2382
2265
|
type="button"
|
|
2383
|
-
|
|
2384
|
-
|
|
2385
|
-
|
|
2266
|
+
onclick={() => setLink()}
|
|
2267
|
+
class="fl-bubble-menu-mark-button"
|
|
2268
|
+
class:is-active={$editor.isActive("link")}
|
|
2269
|
+
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
2270
|
+
aria-label="Link"
|
|
2386
2271
|
>
|
|
2387
2272
|
<svg
|
|
2273
|
+
width="24"
|
|
2274
|
+
height="24"
|
|
2275
|
+
class="tiptap-button-icon"
|
|
2276
|
+
viewBox="0 0 24 24"
|
|
2277
|
+
fill="currentColor"
|
|
2388
2278
|
xmlns="http://www.w3.org/2000/svg"
|
|
2279
|
+
><path
|
|
2280
|
+
d="M16.9958 1.06669C15.4226 1.05302 13.907 1.65779 12.7753 2.75074L12.765 2.76086L11.045 4.47086C10.6534 4.86024 10.6515 5.49341 11.0409 5.88507C11.4303 6.27673 12.0634 6.27858 12.4551 5.88919L14.1697 4.18456C14.9236 3.45893 15.9319 3.05752 16.9784 3.06662C18.0272 3.07573 19.0304 3.49641 19.772 4.23804C20.5137 4.97967 20.9344 5.98292 20.9435 7.03171C20.9526 8.07776 20.5515 9.08563 19.8265 9.83941L16.833 12.8329C16.4274 13.2386 15.9393 13.5524 15.4019 13.7529C14.8645 13.9533 14.2903 14.0359 13.7181 13.9949C13.146 13.9539 12.5894 13.7904 12.0861 13.5154C11.5827 13.2404 11.1444 12.8604 10.8008 12.401C10.47 11.9588 9.84333 11.8685 9.40108 12.1993C8.95883 12.5301 8.86849 13.1568 9.1993 13.599C9.71464 14.288 10.3721 14.858 11.1272 15.2705C11.8822 15.683 12.7171 15.9283 13.5753 15.9898C14.4334 16.0513 15.2948 15.9274 16.1009 15.6267C16.907 15.326 17.639 14.8555 18.2473 14.247L21.2472 11.2471L21.2593 11.2347C22.3523 10.1031 22.9571 8.58751 22.9434 7.01433C22.9297 5.44115 22.2987 3.93628 21.1863 2.82383C20.0738 1.71138 18.5689 1.08036 16.9958 1.06669Z"
|
|
2281
|
+
fill="currentColor"
|
|
2282
|
+
></path><path
|
|
2283
|
+
d="M10.4247 8.0102C9.56657 7.94874 8.70522 8.07256 7.89911 8.37326C7.09305 8.67395 6.36096 9.14458 5.75272 9.753L2.75285 12.7529L2.74067 12.7653C1.64772 13.8969 1.04295 15.4125 1.05662 16.9857C1.07029 18.5589 1.70131 20.0637 2.81376 21.1762C3.9262 22.2886 5.43108 22.9196 7.00426 22.9333C8.57744 22.947 10.0931 22.3422 11.2247 21.2493L11.2371 21.2371L12.9471 19.5271C13.3376 19.1366 13.3376 18.5034 12.9471 18.1129C12.5565 17.7223 11.9234 17.7223 11.5328 18.1129L9.82932 19.8164C9.07555 20.5414 8.06768 20.9425 7.02164 20.9334C5.97285 20.9243 4.9696 20.5036 4.22797 19.762C3.48634 19.0203 3.06566 18.0171 3.05655 16.9683C3.04746 15.9222 3.44851 14.9144 4.17355 14.1606L7.16719 11.167C7.5727 10.7613 8.06071 10.4476 8.59811 10.2471C9.13552 10.0467 9.70976 9.96412 10.2819 10.0051C10.854 10.0461 11.4106 10.2096 11.9139 10.4846C12.4173 10.7596 12.8556 11.1397 13.1992 11.599C13.53 12.0412 14.1567 12.1316 14.5989 11.8007C15.0412 11.4699 15.1315 10.8433 14.8007 10.401C14.2854 9.71205 13.6279 9.14198 12.8729 8.72948C12.1178 8.31697 11.2829 8.07166 10.4247 8.0102Z"
|
|
2284
|
+
fill="currentColor"
|
|
2285
|
+
></path></svg
|
|
2286
|
+
>
|
|
2287
|
+
</button>
|
|
2288
|
+
|
|
2289
|
+
<!-- Highlight -->
|
|
2290
|
+
<button
|
|
2291
|
+
class="fl-bubble-menu-mark-button"
|
|
2292
|
+
type="button"
|
|
2293
|
+
aria-label="Highlight"
|
|
2294
|
+
onclick={(e) => toogleDropdown(e.currentTarget, "highlight")}
|
|
2295
|
+
>
|
|
2296
|
+
<svg
|
|
2297
|
+
width="24"
|
|
2298
|
+
height="24"
|
|
2299
|
+
class="tiptap-button-icon"
|
|
2389
2300
|
viewBox="0 0 24 24"
|
|
2390
|
-
|
|
2391
|
-
|
|
2301
|
+
fill="currentColor"
|
|
2302
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
2303
|
+
><path
|
|
2304
|
+
fill-rule="evenodd"
|
|
2305
|
+
clip-rule="evenodd"
|
|
2306
|
+
d="M14.7072 4.70711C15.0977 4.31658 15.0977 3.68342 14.7072 3.29289C14.3167 2.90237 13.6835 2.90237 13.293 3.29289L8.69294 7.89286L8.68594 7.9C8.13626 8.46079 7.82837 9.21474 7.82837 10C7.82837 10.2306 7.85491 10.4584 7.90631 10.6795L2.29289 16.2929C2.10536 16.4804 2 16.7348 2 17V20C2 20.5523 2.44772 21 3 21H12C12.2652 21 12.5196 20.8946 12.7071 20.7071L15.3205 18.0937C15.5416 18.1452 15.7695 18.1717 16.0001 18.1717C16.7853 18.1717 17.5393 17.8639 18.1001 17.3142L22.7072 12.7071C23.0977 12.3166 23.0977 11.6834 22.7072 11.2929C22.3167 10.9024 21.6835 10.9024 21.293 11.2929L16.6971 15.8887C16.5105 16.0702 16.2605 16.1717 16.0001 16.1717C15.7397 16.1717 15.4897 16.0702 15.303 15.8887L10.1113 10.697C9.92992 10.5104 9.82837 10.2604 9.82837 10C9.82837 9.73963 9.92992 9.48958 10.1113 9.30297L14.7072 4.70711ZM13.5858 17L9.00004 12.4142L4 17.4142V19H11.5858L13.5858 17Z"
|
|
2307
|
+
fill="currentColor"
|
|
2308
|
+
></path>
|
|
2309
|
+
</svg>
|
|
2310
|
+
<svg
|
|
2311
|
+
class="toogle-dropdown-button-icon"
|
|
2312
|
+
aria-hidden="true"
|
|
2313
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
2392
2314
|
fill="none"
|
|
2393
|
-
|
|
2394
|
-
stroke-width="2"
|
|
2395
|
-
stroke-linecap="round"
|
|
2396
|
-
stroke-linejoin="round"
|
|
2397
|
-
style="opacity:1;"
|
|
2398
|
-
><path d="M12 21v-6m0-6V3M3 15h18M3 9h18"></path><rect
|
|
2399
|
-
width="18"
|
|
2400
|
-
height="18"
|
|
2401
|
-
x="3"
|
|
2402
|
-
y="3"
|
|
2403
|
-
rx="2"
|
|
2404
|
-
></rect></svg
|
|
2315
|
+
viewBox="0 0 10 6"
|
|
2405
2316
|
>
|
|
2317
|
+
<path
|
|
2318
|
+
stroke="currentColor"
|
|
2319
|
+
stroke-linecap="round"
|
|
2320
|
+
stroke-linejoin="round"
|
|
2321
|
+
stroke-width="2"
|
|
2322
|
+
d="m1 1 4 4 4-4"
|
|
2323
|
+
></path>
|
|
2324
|
+
</svg>
|
|
2406
2325
|
</button>
|
|
2407
2326
|
|
|
2327
|
+
<!-- Text color -->
|
|
2408
2328
|
<button
|
|
2409
|
-
|
|
2329
|
+
aria-label="Text color"
|
|
2410
2330
|
type="button"
|
|
2411
|
-
|
|
2412
|
-
|
|
2413
|
-
|
|
2331
|
+
bind:this={textColorDropdownTriggerEl}
|
|
2332
|
+
onclick={() =>
|
|
2333
|
+
toogleDropdown(textColorDropdownTriggerEl, "text-color-dropdown")}
|
|
2334
|
+
class="fl-bubble-menu-mark-button"
|
|
2414
2335
|
>
|
|
2336
|
+
<span
|
|
2337
|
+
class="fl-button-color-text-popover"
|
|
2338
|
+
style="background: {$editor?.getAttributes('textStyle')?.color ||
|
|
2339
|
+
'currentColor'}"
|
|
2340
|
+
></span>
|
|
2341
|
+
|
|
2415
2342
|
<svg
|
|
2343
|
+
class="toogle-dropdown-button-icon"
|
|
2344
|
+
aria-hidden="true"
|
|
2416
2345
|
xmlns="http://www.w3.org/2000/svg"
|
|
2417
|
-
viewBox="0 0 24 24"
|
|
2418
|
-
width="16"
|
|
2419
|
-
height="16"
|
|
2420
2346
|
fill="none"
|
|
2421
|
-
|
|
2422
|
-
stroke-width="2"
|
|
2423
|
-
stroke-linecap="round"
|
|
2424
|
-
stroke-linejoin="round"
|
|
2425
|
-
style="opacity:1;"
|
|
2426
|
-
><path d="M12 15V9m-9 6h18M3 9h18" /><rect
|
|
2427
|
-
width="18"
|
|
2428
|
-
height="18"
|
|
2429
|
-
x="3"
|
|
2430
|
-
y="3"
|
|
2431
|
-
rx="2"
|
|
2432
|
-
/></svg
|
|
2347
|
+
viewBox="0 0 10 6"
|
|
2433
2348
|
>
|
|
2434
|
-
|
|
2435
|
-
|
|
2436
|
-
|
|
2437
|
-
|
|
2438
|
-
|
|
2439
|
-
|
|
2440
|
-
|
|
2441
|
-
|
|
2442
|
-
style="display: {tooltipVisible
|
|
2443
|
-
? 'flex'
|
|
2444
|
-
: 'none'}; left: {tooltipX}px; top: {tooltipY}px;"
|
|
2445
|
-
>
|
|
2446
|
-
{#if activeDropdownType === "text-color"}
|
|
2447
|
-
<div class="fl-editor-color-palette">
|
|
2448
|
-
<button
|
|
2449
|
-
class="fl-color-swatch fl-color-picker-btn"
|
|
2450
|
-
aria-label="Text color picker"
|
|
2451
|
-
type="button"
|
|
2452
|
-
>
|
|
2453
|
-
<input
|
|
2454
|
-
type="color"
|
|
2455
|
-
onchange={(event: any) => {
|
|
2456
|
-
recentCustomColors = [
|
|
2457
|
-
...recentCustomColors,
|
|
2458
|
-
event?.target?.value,
|
|
2459
|
-
];
|
|
2460
|
-
$editor.chain().focus().setColor(event?.target?.value).run();
|
|
2461
|
-
hideDropdown();
|
|
2462
|
-
}}
|
|
2463
|
-
value={rgbToHex($editor?.getAttributes("textStyle")?.color)}
|
|
2464
|
-
data-testid="setColor"
|
|
2465
|
-
id="colorPicker"
|
|
2466
|
-
/>
|
|
2349
|
+
<path
|
|
2350
|
+
stroke="currentColor"
|
|
2351
|
+
stroke-linecap="round"
|
|
2352
|
+
stroke-linejoin="round"
|
|
2353
|
+
stroke-width="2"
|
|
2354
|
+
d="m1 1 4 4 4-4"
|
|
2355
|
+
></path>
|
|
2356
|
+
</svg>
|
|
2467
2357
|
</button>
|
|
2468
2358
|
|
|
2469
|
-
{#
|
|
2359
|
+
{#if !isCellSelection()}
|
|
2470
2360
|
<button
|
|
2471
|
-
class="fl-
|
|
2472
|
-
|
|
2473
|
-
|
|
2474
|
-
|
|
2475
|
-
onclick={() => {
|
|
2476
|
-
$editor?.chain().focus().setColor(color).run();
|
|
2477
|
-
hideDropdown();
|
|
2478
|
-
}}
|
|
2479
|
-
style="background-color: {color};"
|
|
2480
|
-
aria-label={color}
|
|
2361
|
+
class="fl-bubble-menu-mark-button"
|
|
2362
|
+
type="button"
|
|
2363
|
+
onclick={() => $editor.chain().focus().setHardBreak().run()}
|
|
2364
|
+
aria-label="Hard break"
|
|
2481
2365
|
>
|
|
2366
|
+
<svg
|
|
2367
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
2368
|
+
width="24"
|
|
2369
|
+
height="24"
|
|
2370
|
+
viewBox="0 0 24 24"
|
|
2371
|
+
fill="none"
|
|
2372
|
+
stroke="currentColor"
|
|
2373
|
+
stroke-width="2"
|
|
2374
|
+
stroke-linecap="round"
|
|
2375
|
+
stroke-linejoin="round"
|
|
2376
|
+
class="icon icon-tabler icons-tabler-outline icon-tabler-corner-down-left"
|
|
2377
|
+
><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
|
|
2378
|
+
d="M18 6v6a3 3 0 0 1 -3 3h-10l4 -4m0 8l-4 -4"
|
|
2379
|
+
></path></svg
|
|
2380
|
+
>
|
|
2482
2381
|
</button>
|
|
2483
|
-
{/
|
|
2484
|
-
|
|
2485
|
-
<button
|
|
2486
|
-
class="fl-color-swatch unset-color"
|
|
2487
|
-
onclick={() => {
|
|
2488
|
-
$editor?.chain().focus().unsetColor().run();
|
|
2489
|
-
hideDropdown();
|
|
2490
|
-
}}
|
|
2491
|
-
style="background-color: #ffffff;"
|
|
2492
|
-
aria-label="Unset color"
|
|
2493
|
-
>
|
|
2494
|
-
</button>
|
|
2382
|
+
{/if}
|
|
2495
2383
|
|
|
2496
|
-
{#if
|
|
2497
|
-
{#each recentCustomColors as color}
|
|
2498
|
-
<button
|
|
2499
|
-
class="fl-color-swatch"
|
|
2500
|
-
class:active={$editor?.isActive("textStyle", {
|
|
2501
|
-
color: color,
|
|
2502
|
-
})}
|
|
2503
|
-
onclick={() => {
|
|
2504
|
-
$editor?.chain().focus().setColor(color).run();
|
|
2505
|
-
hideDropdown();
|
|
2506
|
-
}}
|
|
2507
|
-
style="background-color: {color};"
|
|
2508
|
-
aria-label={color}
|
|
2509
|
-
>
|
|
2510
|
-
</button>
|
|
2511
|
-
{/each}
|
|
2512
|
-
{:else}
|
|
2384
|
+
{#if isCellSelection()}
|
|
2513
2385
|
<button
|
|
2514
|
-
class="fl-
|
|
2515
|
-
|
|
2516
|
-
|
|
2517
|
-
|
|
2386
|
+
class="fl-bubble-menu-mark-button"
|
|
2387
|
+
type="button"
|
|
2388
|
+
aria-label="Merge cells"
|
|
2389
|
+
title="Merge cells"
|
|
2390
|
+
onclick={() => $editor?.chain().focus().mergeCells().run()}
|
|
2518
2391
|
>
|
|
2519
2392
|
<svg
|
|
2520
2393
|
xmlns="http://www.w3.org/2000/svg"
|
|
2521
|
-
fill="none"
|
|
2522
2394
|
viewBox="0 0 24 24"
|
|
2523
|
-
|
|
2395
|
+
width="16"
|
|
2396
|
+
height="16"
|
|
2397
|
+
fill="none"
|
|
2524
2398
|
stroke="currentColor"
|
|
2525
|
-
|
|
2526
|
-
|
|
2527
|
-
|
|
2528
|
-
|
|
2529
|
-
|
|
2399
|
+
stroke-width="2"
|
|
2400
|
+
stroke-linecap="round"
|
|
2401
|
+
stroke-linejoin="round"
|
|
2402
|
+
style="opacity:1;"
|
|
2403
|
+
><path d="M12 21v-6m0-6V3M3 15h18M3 9h18"></path><rect
|
|
2404
|
+
width="18"
|
|
2405
|
+
height="18"
|
|
2406
|
+
x="3"
|
|
2407
|
+
y="3"
|
|
2408
|
+
rx="2"
|
|
2409
|
+
></rect></svg
|
|
2530
2410
|
>
|
|
2531
|
-
<path
|
|
2532
|
-
stroke-linecap="round"
|
|
2533
|
-
stroke-linejoin="round"
|
|
2534
|
-
d="M12 4.5v15m7.5-7.5h-15"
|
|
2535
|
-
></path>
|
|
2536
|
-
</svg>
|
|
2537
2411
|
</button>
|
|
2538
2412
|
|
|
2539
2413
|
<button
|
|
2540
|
-
class="fl-
|
|
2541
|
-
|
|
2542
|
-
|
|
2543
|
-
|
|
2414
|
+
class="fl-bubble-menu-mark-button"
|
|
2415
|
+
type="button"
|
|
2416
|
+
aria-label="Split cell"
|
|
2417
|
+
title="Split cell"
|
|
2418
|
+
onclick={() => $editor?.chain().focus().splitCell().run()}
|
|
2544
2419
|
>
|
|
2545
2420
|
<svg
|
|
2546
2421
|
xmlns="http://www.w3.org/2000/svg"
|
|
2547
|
-
fill="none"
|
|
2548
2422
|
viewBox="0 0 24 24"
|
|
2549
|
-
|
|
2423
|
+
width="16"
|
|
2424
|
+
height="16"
|
|
2425
|
+
fill="none"
|
|
2550
2426
|
stroke="currentColor"
|
|
2551
|
-
|
|
2552
|
-
|
|
2553
|
-
|
|
2554
|
-
|
|
2555
|
-
|
|
2427
|
+
stroke-width="2"
|
|
2428
|
+
stroke-linecap="round"
|
|
2429
|
+
stroke-linejoin="round"
|
|
2430
|
+
style="opacity:1;"
|
|
2431
|
+
><path d="M12 15V9m-9 6h18M3 9h18" /><rect
|
|
2432
|
+
width="18"
|
|
2433
|
+
height="18"
|
|
2434
|
+
x="3"
|
|
2435
|
+
y="3"
|
|
2436
|
+
rx="2"
|
|
2437
|
+
/></svg
|
|
2556
2438
|
>
|
|
2557
|
-
<path
|
|
2558
|
-
stroke-linecap="round"
|
|
2559
|
-
stroke-linejoin="round"
|
|
2560
|
-
d="M12 4.5v15m7.5-7.5h-15"
|
|
2561
|
-
></path>
|
|
2562
|
-
</svg>
|
|
2563
2439
|
</button>
|
|
2564
2440
|
{/if}
|
|
2565
2441
|
</div>
|
|
2566
|
-
|
|
2567
|
-
|
|
2568
|
-
|
|
2569
|
-
|
|
2570
|
-
|
|
2571
|
-
|
|
2572
|
-
|
|
2573
|
-
|
|
2574
|
-
|
|
2575
|
-
|
|
2576
|
-
|
|
2577
|
-
|
|
2578
|
-
|
|
2579
|
-
|
|
2580
|
-
|
|
2581
|
-
|
|
2582
|
-
|
|
2583
|
-
|
|
2584
|
-
|
|
2585
|
-
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
|
|
2442
|
+
</div>
|
|
2443
|
+
|
|
2444
|
+
<!-- <div
|
|
2445
|
+
class="fl-toolbar-dropdown-panel"
|
|
2446
|
+
bind:this={tooltip}
|
|
2447
|
+
style="display: {tooltipVisible
|
|
2448
|
+
? 'flex'
|
|
2449
|
+
: 'none'}; left: {tooltipX}px; top: {tooltipY}px;"
|
|
2450
|
+
>
|
|
2451
|
+
{#if activeDropdownType === "text-color"}
|
|
2452
|
+
<div class="fl-editor-color-palette">
|
|
2453
|
+
<button
|
|
2454
|
+
class="fl-color-swatch fl-color-picker-btn"
|
|
2455
|
+
aria-label="Text color picker"
|
|
2456
|
+
type="button"
|
|
2457
|
+
>
|
|
2458
|
+
<input
|
|
2459
|
+
type="color"
|
|
2460
|
+
onchange={(event: any) => {
|
|
2461
|
+
recentCustomColors = [
|
|
2462
|
+
...recentCustomColors,
|
|
2463
|
+
event?.target?.value,
|
|
2464
|
+
];
|
|
2465
|
+
$editor.chain().focus().setColor(event?.target?.value).run();
|
|
2466
|
+
hideDropdown();
|
|
2467
|
+
}}
|
|
2468
|
+
value={rgbToHex($editor?.getAttributes("textStyle")?.color)}
|
|
2469
|
+
data-testid="setColor"
|
|
2470
|
+
id="colorPicker"
|
|
2471
|
+
/>
|
|
2472
|
+
</button>
|
|
2473
|
+
|
|
2474
|
+
{#each TEXT_COLOR_PALETTE as color}
|
|
2475
|
+
<button
|
|
2476
|
+
class="fl-color-swatch"
|
|
2477
|
+
class:active={$editor?.isActive("textStyle", {
|
|
2478
|
+
color: color,
|
|
2479
|
+
})}
|
|
2480
|
+
onclick={() => {
|
|
2481
|
+
$editor?.chain().focus().setColor(color).run();
|
|
2482
|
+
hideDropdown();
|
|
2483
|
+
}}
|
|
2484
|
+
style="background-color: {color};"
|
|
2485
|
+
aria-label={color}
|
|
2486
|
+
>
|
|
2487
|
+
</button>
|
|
2488
|
+
{/each}
|
|
2592
2489
|
|
|
2593
|
-
{#each HIGHLIGHT_COLOR_PALETTE as color}
|
|
2594
2490
|
<button
|
|
2595
|
-
class="fl-color-swatch"
|
|
2596
|
-
class:active={$editor?.isActive("textStyle", {
|
|
2597
|
-
color: color,
|
|
2598
|
-
})}
|
|
2491
|
+
class="fl-color-swatch unset-color"
|
|
2599
2492
|
onclick={() => {
|
|
2600
|
-
$editor?.chain().focus().
|
|
2493
|
+
$editor?.chain().focus().unsetColor().run();
|
|
2601
2494
|
hideDropdown();
|
|
2602
2495
|
}}
|
|
2603
|
-
style="background-color:
|
|
2604
|
-
aria-label=
|
|
2496
|
+
style="background-color: #ffffff;"
|
|
2497
|
+
aria-label="Unset color"
|
|
2605
2498
|
>
|
|
2606
2499
|
</button>
|
|
2607
|
-
{/each}
|
|
2608
2500
|
|
|
2609
|
-
|
|
2610
|
-
|
|
2611
|
-
|
|
2612
|
-
|
|
2613
|
-
|
|
2614
|
-
|
|
2615
|
-
|
|
2616
|
-
|
|
2617
|
-
|
|
2618
|
-
|
|
2501
|
+
{#if recentCustomColors.length > 0}
|
|
2502
|
+
{#each recentCustomColors as color}
|
|
2503
|
+
<button
|
|
2504
|
+
class="fl-color-swatch"
|
|
2505
|
+
class:active={$editor?.isActive("textStyle", {
|
|
2506
|
+
color: color,
|
|
2507
|
+
})}
|
|
2508
|
+
onclick={() => {
|
|
2509
|
+
$editor?.chain().focus().setColor(color).run();
|
|
2510
|
+
hideDropdown();
|
|
2511
|
+
}}
|
|
2512
|
+
style="background-color: {color};"
|
|
2513
|
+
aria-label={color}
|
|
2514
|
+
>
|
|
2515
|
+
</button>
|
|
2516
|
+
{/each}
|
|
2517
|
+
{:else}
|
|
2518
|
+
<button
|
|
2519
|
+
class="fl-color-swatch"
|
|
2520
|
+
style="outline: 1px dashed #ffffff66;background: transparent;"
|
|
2521
|
+
onclick={() => alert("Not implemented yet")}
|
|
2522
|
+
aria-label="Add new color"
|
|
2523
|
+
>
|
|
2524
|
+
<svg
|
|
2525
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
2526
|
+
fill="none"
|
|
2527
|
+
viewBox="0 0 24 24"
|
|
2528
|
+
stroke-width="1.5"
|
|
2529
|
+
stroke="currentColor"
|
|
2530
|
+
class="size-6"
|
|
2531
|
+
style="
|
|
2532
|
+
width: 11px;
|
|
2533
|
+
height: 11px;
|
|
2534
|
+
"
|
|
2535
|
+
>
|
|
2536
|
+
<path
|
|
2537
|
+
stroke-linecap="round"
|
|
2538
|
+
stroke-linejoin="round"
|
|
2539
|
+
d="M12 4.5v15m7.5-7.5h-15"
|
|
2540
|
+
></path>
|
|
2541
|
+
</svg>
|
|
2542
|
+
</button>
|
|
2543
|
+
|
|
2544
|
+
<button
|
|
2545
|
+
class="fl-color-swatch"
|
|
2546
|
+
style="outline: 1px dashed #ffffff66;background: transparent;"
|
|
2547
|
+
onclick={() => alert("Not implemented yet")}
|
|
2548
|
+
aria-label="Add new color"
|
|
2549
|
+
>
|
|
2550
|
+
<svg
|
|
2551
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
2552
|
+
fill="none"
|
|
2553
|
+
viewBox="0 0 24 24"
|
|
2554
|
+
stroke-width="1.5"
|
|
2555
|
+
stroke="currentColor"
|
|
2556
|
+
class="size-6"
|
|
2557
|
+
style="
|
|
2558
|
+
width: 11px;
|
|
2559
|
+
height: 11px;
|
|
2560
|
+
"
|
|
2561
|
+
>
|
|
2562
|
+
<path
|
|
2563
|
+
stroke-linecap="round"
|
|
2564
|
+
stroke-linejoin="round"
|
|
2565
|
+
d="M12 4.5v15m7.5-7.5h-15"
|
|
2566
|
+
></path>
|
|
2567
|
+
</svg>
|
|
2568
|
+
</button>
|
|
2569
|
+
{/if}
|
|
2570
|
+
</div>
|
|
2571
|
+
{:else if activeDropdownType === "highlight"}
|
|
2572
|
+
<div class="fl-editor-color-palette">
|
|
2573
|
+
<button
|
|
2574
|
+
class="fl-color-swatch fl-color-picker-btn"
|
|
2575
|
+
aria-label="Highlight color picker"
|
|
2576
|
+
type="button"
|
|
2577
|
+
>
|
|
2578
|
+
<input
|
|
2579
|
+
type="color"
|
|
2580
|
+
onchange={(event: any) => {
|
|
2581
|
+
recentCustomColors = [
|
|
2582
|
+
...recentCustomColors,
|
|
2583
|
+
event?.target?.value,
|
|
2584
|
+
];
|
|
2585
|
+
$editor
|
|
2586
|
+
.chain()
|
|
2587
|
+
.focus()
|
|
2588
|
+
.setHighlight({ color: event?.target?.value })
|
|
2589
|
+
.run();
|
|
2590
|
+
hideDropdown();
|
|
2591
|
+
}}
|
|
2592
|
+
value={rgbToHex($editor?.getAttributes("textStyle")?.color)}
|
|
2593
|
+
data-testid="setHiglight"
|
|
2594
|
+
id="colorPicker"
|
|
2595
|
+
/>
|
|
2596
|
+
</button>
|
|
2619
2597
|
|
|
2620
|
-
|
|
2621
|
-
{#each recentCustomColors as color}
|
|
2598
|
+
{#each HIGHLIGHT_COLOR_PALETTE as color}
|
|
2622
2599
|
<button
|
|
2623
2600
|
class="fl-color-swatch"
|
|
2624
2601
|
class:active={$editor?.isActive("textStyle", {
|
|
@@ -2633,154 +2610,192 @@
|
|
|
2633
2610
|
>
|
|
2634
2611
|
</button>
|
|
2635
2612
|
{/each}
|
|
2636
|
-
|
|
2613
|
+
|
|
2637
2614
|
<button
|
|
2638
|
-
class="fl-color-swatch"
|
|
2639
|
-
|
|
2640
|
-
|
|
2641
|
-
|
|
2615
|
+
class="fl-color-swatch unset-color"
|
|
2616
|
+
onclick={() => {
|
|
2617
|
+
$editor?.chain().focus().unsetColor().run();
|
|
2618
|
+
hideDropdown();
|
|
2619
|
+
}}
|
|
2620
|
+
style="background-color: #ffffff;"
|
|
2621
|
+
aria-label="Unset color"
|
|
2642
2622
|
>
|
|
2643
|
-
<svg
|
|
2644
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
2645
|
-
fill="none"
|
|
2646
|
-
viewBox="0 0 24 24"
|
|
2647
|
-
stroke-width="1.5"
|
|
2648
|
-
stroke="currentColor"
|
|
2649
|
-
class="size-6"
|
|
2650
|
-
style="
|
|
2651
|
-
width: 11px;
|
|
2652
|
-
height: 11px;
|
|
2653
|
-
"
|
|
2654
|
-
>
|
|
2655
|
-
<path
|
|
2656
|
-
stroke-linecap="round"
|
|
2657
|
-
stroke-linejoin="round"
|
|
2658
|
-
d="M12 4.5v15m7.5-7.5h-15"
|
|
2659
|
-
></path>
|
|
2660
|
-
</svg>
|
|
2661
2623
|
</button>
|
|
2662
2624
|
|
|
2663
|
-
|
|
2664
|
-
|
|
2665
|
-
|
|
2666
|
-
|
|
2667
|
-
|
|
2668
|
-
|
|
2669
|
-
|
|
2670
|
-
|
|
2671
|
-
|
|
2672
|
-
|
|
2673
|
-
|
|
2674
|
-
|
|
2675
|
-
|
|
2676
|
-
|
|
2677
|
-
|
|
2678
|
-
|
|
2679
|
-
|
|
2625
|
+
{#if recentCustomColors.length > 0}
|
|
2626
|
+
{#each recentCustomColors as color}
|
|
2627
|
+
<button
|
|
2628
|
+
class="fl-color-swatch"
|
|
2629
|
+
class:active={$editor?.isActive("textStyle", {
|
|
2630
|
+
color: color,
|
|
2631
|
+
})}
|
|
2632
|
+
onclick={() => {
|
|
2633
|
+
$editor?.chain().focus().setHighlight({ color }).run();
|
|
2634
|
+
hideDropdown();
|
|
2635
|
+
}}
|
|
2636
|
+
style="background-color: {color};"
|
|
2637
|
+
aria-label={color}
|
|
2638
|
+
>
|
|
2639
|
+
</button>
|
|
2640
|
+
{/each}
|
|
2641
|
+
{:else}
|
|
2642
|
+
<button
|
|
2643
|
+
class="fl-color-swatch"
|
|
2644
|
+
style="outline: 1px dashed #ffffff66;background: transparent;"
|
|
2645
|
+
onclick={() => alert("Not implemented yet")}
|
|
2646
|
+
aria-label="Add new color"
|
|
2680
2647
|
>
|
|
2681
|
-
<
|
|
2682
|
-
|
|
2683
|
-
|
|
2684
|
-
|
|
2685
|
-
|
|
2686
|
-
|
|
2687
|
-
|
|
2688
|
-
|
|
2689
|
-
|
|
2690
|
-
|
|
2691
|
-
|
|
2692
|
-
|
|
2648
|
+
<svg
|
|
2649
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
2650
|
+
fill="none"
|
|
2651
|
+
viewBox="0 0 24 24"
|
|
2652
|
+
stroke-width="1.5"
|
|
2653
|
+
stroke="currentColor"
|
|
2654
|
+
class="size-6"
|
|
2655
|
+
style="
|
|
2656
|
+
width: 11px;
|
|
2657
|
+
height: 11px;
|
|
2658
|
+
"
|
|
2659
|
+
>
|
|
2660
|
+
<path
|
|
2661
|
+
stroke-linecap="round"
|
|
2662
|
+
stroke-linejoin="round"
|
|
2663
|
+
d="M12 4.5v15m7.5-7.5h-15"
|
|
2664
|
+
></path>
|
|
2665
|
+
</svg>
|
|
2666
|
+
</button>
|
|
2667
|
+
|
|
2668
|
+
<button
|
|
2669
|
+
class="fl-color-swatch"
|
|
2670
|
+
style="outline: 1px dashed #ffffff66;background: transparent;"
|
|
2671
|
+
onclick={() => alert("Not implemented yet")}
|
|
2672
|
+
aria-label="Add new color"
|
|
2673
|
+
>
|
|
2674
|
+
<svg
|
|
2675
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
2676
|
+
fill="none"
|
|
2677
|
+
viewBox="0 0 24 24"
|
|
2678
|
+
stroke-width="1.5"
|
|
2679
|
+
stroke="currentColor"
|
|
2680
|
+
class="size-6"
|
|
2681
|
+
style="
|
|
2682
|
+
width: 11px;
|
|
2683
|
+
height: 11px;
|
|
2684
|
+
"
|
|
2685
|
+
>
|
|
2686
|
+
<path
|
|
2687
|
+
stroke-linecap="round"
|
|
2688
|
+
stroke-linejoin="round"
|
|
2689
|
+
d="M12 4.5v15m7.5-7.5h-15"
|
|
2690
|
+
></path>
|
|
2691
|
+
</svg>
|
|
2692
|
+
</button>
|
|
2693
|
+
{/if}
|
|
2694
|
+
</div>
|
|
2695
|
+
{/if}
|
|
2696
|
+
</div> -->
|
|
2697
|
+
</BubbleMenu>
|
|
2698
|
+
</div>
|
|
2693
2699
|
|
|
2694
2700
|
<!-- Image Menu -->
|
|
2695
|
-
|
|
2696
|
-
|
|
2697
|
-
|
|
2698
|
-
|
|
2699
|
-
|
|
2700
|
-
|
|
2701
|
-
|
|
2702
|
-
|
|
2703
|
-
|
|
2704
|
-
|
|
2705
|
-
|
|
2706
|
-
<
|
|
2707
|
-
|
|
2708
|
-
|
|
2709
|
-
|
|
2710
|
-
|
|
2711
|
-
|
|
2712
|
-
|
|
2713
|
-
|
|
2714
|
-
|
|
2715
|
-
|
|
2716
|
-
|
|
2717
|
-
|
|
2718
|
-
e.
|
|
2701
|
+
<div class="hidden">
|
|
2702
|
+
<BubbleMenu
|
|
2703
|
+
editor={$editor}
|
|
2704
|
+
shouldShow={() => {
|
|
2705
|
+
const emptySelection = $editor.state.selection.empty;
|
|
2706
|
+
if (emptySelection) {
|
|
2707
|
+
return false;
|
|
2708
|
+
}
|
|
2709
|
+
return $editor.isActive("image");
|
|
2710
|
+
}}
|
|
2711
|
+
>
|
|
2712
|
+
<div data-test-id="bubble-menu" class="fl-bubble-menu flex">
|
|
2713
|
+
<input
|
|
2714
|
+
class="fl-editor-image-url-input"
|
|
2715
|
+
type="text"
|
|
2716
|
+
placeholder="Insert image url"
|
|
2717
|
+
bind:this={imageUrlInputEl}
|
|
2718
|
+
value={$editor.getAttributes("image").src}
|
|
2719
|
+
oninput={(e: any) => {
|
|
2720
|
+
// console.log(e.target.value);
|
|
2721
|
+
imageUrlInputValue = e.target.value;
|
|
2722
|
+
}}
|
|
2723
|
+
onkeydown={(e: any) => {
|
|
2724
|
+
if (e.key === "Enter") {
|
|
2725
|
+
e.preventDefault();
|
|
2726
|
+
$editor
|
|
2727
|
+
.chain()
|
|
2728
|
+
.focus()
|
|
2729
|
+
.setImage({ src: imageUrlInputEl?.value })
|
|
2730
|
+
.run();
|
|
2731
|
+
}
|
|
2732
|
+
}}
|
|
2733
|
+
/>
|
|
2734
|
+
<button
|
|
2735
|
+
type="button"
|
|
2736
|
+
aria-label="Insert image from url"
|
|
2737
|
+
disabled={!imageUrlInputValue ||
|
|
2738
|
+
imageUrlInputValue === $editor.getAttributes("image").src}
|
|
2739
|
+
class:is-active={imageUrlInputValue &&
|
|
2740
|
+
imageUrlInputValue !== $editor.getAttributes("image").src}
|
|
2741
|
+
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
2742
|
+
onclick={() => {
|
|
2719
2743
|
$editor
|
|
2720
2744
|
.chain()
|
|
2721
2745
|
.focus()
|
|
2722
2746
|
.setImage({ src: imageUrlInputEl?.value })
|
|
2723
2747
|
.run();
|
|
2724
|
-
}
|
|
2725
|
-
}}
|
|
2726
|
-
/>
|
|
2727
|
-
<button
|
|
2728
|
-
type="button"
|
|
2729
|
-
aria-label="Insert image from url"
|
|
2730
|
-
disabled={!imageUrlInputValue ||
|
|
2731
|
-
imageUrlInputValue === $editor.getAttributes("image").src}
|
|
2732
|
-
class:is-active={imageUrlInputValue &&
|
|
2733
|
-
imageUrlInputValue !== $editor.getAttributes("image").src}
|
|
2734
|
-
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
2735
|
-
onclick={() => {
|
|
2736
|
-
$editor
|
|
2737
|
-
.chain()
|
|
2738
|
-
.focus()
|
|
2739
|
-
.setImage({ src: imageUrlInputEl?.value })
|
|
2740
|
-
.run();
|
|
2741
|
-
}}
|
|
2742
|
-
>
|
|
2743
|
-
<svg
|
|
2744
|
-
width="16"
|
|
2745
|
-
height="16"
|
|
2746
|
-
class="tiptap-button-icon"
|
|
2747
|
-
viewBox="0 0 24 24"
|
|
2748
|
-
fill="currentColor"
|
|
2749
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
2750
|
-
><path
|
|
2751
|
-
fill-rule="evenodd"
|
|
2752
|
-
clip-rule="evenodd"
|
|
2753
|
-
d="M21 4C21 3.44772 20.5523 3 20 3C19.4477 3 19 3.44772 19 4V11C19 11.7956 18.6839 12.5587 18.1213 13.1213C17.5587 13.6839 16.7956 14 16 14H6.41421L9.70711 10.7071C10.0976 10.3166 10.0976 9.68342 9.70711 9.29289C9.31658 8.90237 8.68342 8.90237 8.29289 9.29289L3.29289 14.2929C2.90237 14.6834 2.90237 15.3166 3.29289 15.7071L8.29289 20.7071C8.68342 21.0976 9.31658 21.0976 9.70711 20.7071C10.0976 20.3166 10.0976 19.6834 9.70711 19.2929L6.41421 16H16C17.3261 16 18.5979 15.4732 19.5355 14.5355C20.4732 13.5979 21 12.3261 21 11V4Z"
|
|
2754
|
-
fill="currentColor"
|
|
2755
|
-
class="s-m1-89pp0R0Iu"
|
|
2756
|
-
></path></svg
|
|
2748
|
+
}}
|
|
2757
2749
|
>
|
|
2758
|
-
|
|
2759
|
-
|
|
2760
|
-
|
|
2761
|
-
|
|
2762
|
-
|
|
2763
|
-
class="fl-bubble-menu-mark-button"
|
|
2764
|
-
class:is-active={$editor.isActive("link")}
|
|
2765
|
-
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
2766
|
-
aria-label="Link"
|
|
2767
|
-
>
|
|
2768
|
-
<svg
|
|
2769
|
-
width="16"
|
|
2770
|
-
height="16"
|
|
2771
|
-
class="tiptap-button-icon"
|
|
2772
|
-
viewBox="0 0 24 24"
|
|
2773
|
-
fill="currentColor"
|
|
2774
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
2775
|
-
><path
|
|
2776
|
-
d="M16.9958 1.06669C15.4226 1.05302 13.907 1.65779 12.7753 2.75074L12.765 2.76086L11.045 4.47086C10.6534 4.86024 10.6515 5.49341 11.0409 5.88507C11.4303 6.27673 12.0634 6.27858 12.4551 5.88919L14.1697 4.18456C14.9236 3.45893 15.9319 3.05752 16.9784 3.06662C18.0272 3.07573 19.0304 3.49641 19.772 4.23804C20.5137 4.97967 20.9344 5.98292 20.9435 7.03171C20.9526 8.07776 20.5515 9.08563 19.8265 9.83941L16.833 12.8329C16.4274 13.2386 15.9393 13.5524 15.4019 13.7529C14.8645 13.9533 14.2903 14.0359 13.7181 13.9949C13.146 13.9539 12.5894 13.7904 12.0861 13.5154C11.5827 13.2404 11.1444 12.8604 10.8008 12.401C10.47 11.9588 9.84333 11.8685 9.40108 12.1993C8.95883 12.5301 8.86849 13.1568 9.1993 13.599C9.71464 14.288 10.3721 14.858 11.1272 15.2705C11.8822 15.683 12.7171 15.9283 13.5753 15.9898C14.4334 16.0513 15.2948 15.9274 16.1009 15.6267C16.907 15.326 17.639 14.8555 18.2473 14.247L21.2472 11.2471L21.2593 11.2347C22.3523 10.1031 22.9571 8.58751 22.9434 7.01433C22.9297 5.44115 22.2987 3.93628 21.1863 2.82383C20.0738 1.71138 18.5689 1.08036 16.9958 1.06669Z"
|
|
2777
|
-
fill="currentColor"
|
|
2778
|
-
></path><path
|
|
2779
|
-
d="M10.4247 8.0102C9.56657 7.94874 8.70522 8.07256 7.89911 8.37326C7.09305 8.67395 6.36096 9.14458 5.75272 9.753L2.75285 12.7529L2.74067 12.7653C1.64772 13.8969 1.04295 15.4125 1.05662 16.9857C1.07029 18.5589 1.70131 20.0637 2.81376 21.1762C3.9262 22.2886 5.43108 22.9196 7.00426 22.9333C8.57744 22.947 10.0931 22.3422 11.2247 21.2493L11.2371 21.2371L12.9471 19.5271C13.3376 19.1366 13.3376 18.5034 12.9471 18.1129C12.5565 17.7223 11.9234 17.7223 11.5328 18.1129L9.82932 19.8164C9.07555 20.5414 8.06768 20.9425 7.02164 20.9334C5.97285 20.9243 4.9696 20.5036 4.22797 19.762C3.48634 19.0203 3.06566 18.0171 3.05655 16.9683C3.04746 15.9222 3.44851 14.9144 4.17355 14.1606L7.16719 11.167C7.5727 10.7613 8.06071 10.4476 8.59811 10.2471C9.13552 10.0467 9.70976 9.96412 10.2819 10.0051C10.854 10.0461 11.4106 10.2096 11.9139 10.4846C12.4173 10.7596 12.8556 11.1397 13.1992 11.599C13.53 12.0412 14.1567 12.1316 14.5989 11.8007C15.0412 11.4699 15.1315 10.8433 14.8007 10.401C14.2854 9.71205 13.6279 9.14198 12.8729 8.72948C12.1178 8.31697 11.2829 8.07166 10.4247 8.0102Z"
|
|
2750
|
+
<svg
|
|
2751
|
+
width="16"
|
|
2752
|
+
height="16"
|
|
2753
|
+
class="tiptap-button-icon"
|
|
2754
|
+
viewBox="0 0 24 24"
|
|
2780
2755
|
fill="currentColor"
|
|
2781
|
-
|
|
2756
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
2757
|
+
><path
|
|
2758
|
+
fill-rule="evenodd"
|
|
2759
|
+
clip-rule="evenodd"
|
|
2760
|
+
d="M21 4C21 3.44772 20.5523 3 20 3C19.4477 3 19 3.44772 19 4V11C19 11.7956 18.6839 12.5587 18.1213 13.1213C17.5587 13.6839 16.7956 14 16 14H6.41421L9.70711 10.7071C10.0976 10.3166 10.0976 9.68342 9.70711 9.29289C9.31658 8.90237 8.68342 8.90237 8.29289 9.29289L3.29289 14.2929C2.90237 14.6834 2.90237 15.3166 3.29289 15.7071L8.29289 20.7071C8.68342 21.0976 9.31658 21.0976 9.70711 20.7071C10.0976 20.3166 10.0976 19.6834 9.70711 19.2929L6.41421 16H16C17.3261 16 18.5979 15.4732 19.5355 14.5355C20.4732 13.5979 21 12.3261 21 11V4Z"
|
|
2761
|
+
fill="currentColor"
|
|
2762
|
+
class="s-m1-89pp0R0Iu"
|
|
2763
|
+
></path></svg
|
|
2764
|
+
>
|
|
2765
|
+
</button>
|
|
2766
|
+
|
|
2767
|
+
<button
|
|
2768
|
+
type="button"
|
|
2769
|
+
onclick={() => setLink()}
|
|
2770
|
+
class="fl-bubble-menu-mark-button"
|
|
2771
|
+
class:is-active={$editor.isActive("link")}
|
|
2772
|
+
class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
|
|
2773
|
+
aria-label="Link"
|
|
2782
2774
|
>
|
|
2783
|
-
|
|
2784
|
-
|
|
2785
|
-
|
|
2775
|
+
<svg
|
|
2776
|
+
width="16"
|
|
2777
|
+
height="16"
|
|
2778
|
+
class="tiptap-button-icon"
|
|
2779
|
+
viewBox="0 0 24 24"
|
|
2780
|
+
fill="currentColor"
|
|
2781
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
2782
|
+
><path
|
|
2783
|
+
d="M16.9958 1.06669C15.4226 1.05302 13.907 1.65779 12.7753 2.75074L12.765 2.76086L11.045 4.47086C10.6534 4.86024 10.6515 5.49341 11.0409 5.88507C11.4303 6.27673 12.0634 6.27858 12.4551 5.88919L14.1697 4.18456C14.9236 3.45893 15.9319 3.05752 16.9784 3.06662C18.0272 3.07573 19.0304 3.49641 19.772 4.23804C20.5137 4.97967 20.9344 5.98292 20.9435 7.03171C20.9526 8.07776 20.5515 9.08563 19.8265 9.83941L16.833 12.8329C16.4274 13.2386 15.9393 13.5524 15.4019 13.7529C14.8645 13.9533 14.2903 14.0359 13.7181 13.9949C13.146 13.9539 12.5894 13.7904 12.0861 13.5154C11.5827 13.2404 11.1444 12.8604 10.8008 12.401C10.47 11.9588 9.84333 11.8685 9.40108 12.1993C8.95883 12.5301 8.86849 13.1568 9.1993 13.599C9.71464 14.288 10.3721 14.858 11.1272 15.2705C11.8822 15.683 12.7171 15.9283 13.5753 15.9898C14.4334 16.0513 15.2948 15.9274 16.1009 15.6267C16.907 15.326 17.639 14.8555 18.2473 14.247L21.2472 11.2471L21.2593 11.2347C22.3523 10.1031 22.9571 8.58751 22.9434 7.01433C22.9297 5.44115 22.2987 3.93628 21.1863 2.82383C20.0738 1.71138 18.5689 1.08036 16.9958 1.06669Z"
|
|
2784
|
+
fill="currentColor"
|
|
2785
|
+
></path><path
|
|
2786
|
+
d="M10.4247 8.0102C9.56657 7.94874 8.70522 8.07256 7.89911 8.37326C7.09305 8.67395 6.36096 9.14458 5.75272 9.753L2.75285 12.7529L2.74067 12.7653C1.64772 13.8969 1.04295 15.4125 1.05662 16.9857C1.07029 18.5589 1.70131 20.0637 2.81376 21.1762C3.9262 22.2886 5.43108 22.9196 7.00426 22.9333C8.57744 22.947 10.0931 22.3422 11.2247 21.2493L11.2371 21.2371L12.9471 19.5271C13.3376 19.1366 13.3376 18.5034 12.9471 18.1129C12.5565 17.7223 11.9234 17.7223 11.5328 18.1129L9.82932 19.8164C9.07555 20.5414 8.06768 20.9425 7.02164 20.9334C5.97285 20.9243 4.9696 20.5036 4.22797 19.762C3.48634 19.0203 3.06566 18.0171 3.05655 16.9683C3.04746 15.9222 3.44851 14.9144 4.17355 14.1606L7.16719 11.167C7.5727 10.7613 8.06071 10.4476 8.59811 10.2471C9.13552 10.0467 9.70976 9.96412 10.2819 10.0051C10.854 10.0461 11.4106 10.2096 11.9139 10.4846C12.4173 10.7596 12.8556 11.1397 13.1992 11.599C13.53 12.0412 14.1567 12.1316 14.5989 11.8007C15.0412 11.4699 15.1315 10.8433 14.8007 10.401C14.2854 9.71205 13.6279 9.14198 12.8729 8.72948C12.1178 8.31697 11.2829 8.07166 10.4247 8.0102Z"
|
|
2787
|
+
fill="currentColor"
|
|
2788
|
+
></path></svg
|
|
2789
|
+
>
|
|
2790
|
+
</button>
|
|
2791
|
+
</div>
|
|
2792
|
+
</BubbleMenu>
|
|
2793
|
+
</div>
|
|
2786
2794
|
{/if}
|
|
2795
|
+
|
|
2796
|
+
|
|
2797
|
+
<style>
|
|
2798
|
+
.hidden {
|
|
2799
|
+
display: none;
|
|
2800
|
+
}
|
|
2801
|
+
</style>
|