@flexiui/svelte-rich-text 0.0.60 → 0.0.61
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/README.md +388 -185
- package/dist/RichText.svelte +382 -2070
- package/dist/RichText.svelte.d.ts +28 -0
- package/dist/Toolbar/RenderToolbarButton.svelte +147 -0
- package/dist/Toolbar/RenderToolbarButton.svelte.d.ts +14 -0
- package/dist/Toolbar/action-buttons/ClearFormatting.svelte +31 -0
- package/dist/Toolbar/action-buttons/ClearFormatting.svelte.d.ts +14 -0
- package/dist/Toolbar/action-buttons/ClearNodes.svelte +15 -0
- package/dist/Toolbar/action-buttons/ClearNodes.svelte.d.ts +14 -0
- package/dist/Toolbar/action-buttons/MergeCellsBtn.svelte +31 -0
- package/dist/Toolbar/action-buttons/MergeCellsBtn.svelte.d.ts +14 -0
- package/dist/Toolbar/action-buttons/Redo.svelte +26 -0
- package/dist/Toolbar/action-buttons/Redo.svelte.d.ts +14 -0
- package/dist/Toolbar/action-buttons/SplitCellBtn.svelte +31 -0
- package/dist/Toolbar/action-buttons/SplitCellBtn.svelte.d.ts +14 -0
- package/dist/Toolbar/action-buttons/Undo.svelte +30 -0
- package/dist/Toolbar/action-buttons/Undo.svelte.d.ts +14 -0
- package/dist/Toolbar/action-buttons/marks/Bold.svelte +29 -0
- package/dist/Toolbar/action-buttons/marks/Bold.svelte.d.ts +14 -0
- package/dist/Toolbar/action-buttons/marks/CodeMarkBtn.svelte +33 -0
- package/dist/Toolbar/action-buttons/marks/CodeMarkBtn.svelte.d.ts +14 -0
- package/dist/Toolbar/action-buttons/marks/FontSize.svelte +99 -0
- package/dist/Toolbar/action-buttons/marks/FontSize.svelte.d.ts +14 -0
- package/dist/Toolbar/action-buttons/marks/Italic.svelte +27 -0
- package/dist/Toolbar/action-buttons/marks/Italic.svelte.d.ts +14 -0
- package/dist/Toolbar/action-buttons/marks/LinkBtn.svelte +64 -0
- package/dist/Toolbar/action-buttons/marks/LinkBtn.svelte.d.ts +14 -0
- package/dist/Toolbar/action-buttons/marks/SpecialBox.svelte +21 -0
- package/dist/Toolbar/action-buttons/marks/SpecialBox.svelte.d.ts +14 -0
- package/dist/Toolbar/action-buttons/marks/Strike.svelte +30 -0
- package/dist/Toolbar/action-buttons/marks/Strike.svelte.d.ts +14 -0
- package/dist/Toolbar/action-buttons/marks/TextAlign.svelte +66 -0
- package/dist/Toolbar/action-buttons/marks/TextAlign.svelte.d.ts +14 -0
- package/dist/Toolbar/action-buttons/marks/Underline.svelte +29 -0
- package/dist/Toolbar/action-buttons/marks/Underline.svelte.d.ts +14 -0
- package/dist/Toolbar/action-buttons/nodes/Audio.svelte +60 -0
- package/dist/Toolbar/action-buttons/nodes/Audio.svelte.d.ts +14 -0
- package/dist/Toolbar/action-buttons/nodes/Blockquote.svelte +25 -0
- package/dist/Toolbar/action-buttons/nodes/Blockquote.svelte.d.ts +14 -0
- package/dist/Toolbar/action-buttons/nodes/CodeBlock.svelte +37 -0
- package/dist/Toolbar/action-buttons/nodes/CodeBlock.svelte.d.ts +14 -0
- package/dist/Toolbar/action-buttons/nodes/HardBreakBtn.svelte +26 -0
- package/dist/Toolbar/action-buttons/nodes/HardBreakBtn.svelte.d.ts +14 -0
- package/dist/Toolbar/action-buttons/nodes/HeadingBtn.svelte +78 -0
- package/dist/Toolbar/action-buttons/nodes/HeadingBtn.svelte.d.ts +14 -0
- package/dist/Toolbar/action-buttons/nodes/HorizontalRule.svelte +24 -0
- package/dist/Toolbar/action-buttons/nodes/HorizontalRule.svelte.d.ts +14 -0
- package/dist/Toolbar/action-buttons/nodes/Image.svelte +60 -0
- package/dist/Toolbar/action-buttons/nodes/Image.svelte.d.ts +14 -0
- package/dist/Toolbar/action-buttons/nodes/InlineMath.svelte +50 -0
- package/dist/Toolbar/action-buttons/nodes/InlineMath.svelte.d.ts +14 -0
- package/dist/Toolbar/action-buttons/nodes/ListBtn.svelte +43 -0
- package/dist/Toolbar/action-buttons/nodes/ListBtn.svelte.d.ts +14 -0
- package/dist/Toolbar/action-buttons/nodes/MediaGridBtn.svelte +58 -0
- package/dist/Toolbar/action-buttons/nodes/MediaGridBtn.svelte.d.ts +14 -0
- package/dist/Toolbar/action-buttons/nodes/Table.svelte +60 -0
- package/dist/Toolbar/action-buttons/nodes/Table.svelte.d.ts +14 -0
- package/dist/Toolbar/bubble-menus/BubbleMenuImage.svelte +139 -0
- package/dist/Toolbar/bubble-menus/BubbleMenuImage.svelte.d.ts +14 -0
- package/dist/Toolbar/dropdown-buttons/HeadingsDropdownBtn.svelte +64 -0
- package/dist/Toolbar/dropdown-buttons/HeadingsDropdownBtn.svelte.d.ts +14 -0
- package/dist/Toolbar/dropdown-buttons/HighlightDropdownBtn.svelte +45 -0
- package/dist/Toolbar/dropdown-buttons/HighlightDropdownBtn.svelte.d.ts +14 -0
- package/dist/Toolbar/dropdown-buttons/LineHeightDropdownBtn.svelte +18 -0
- package/dist/Toolbar/dropdown-buttons/LineHeightDropdownBtn.svelte.d.ts +14 -0
- package/dist/Toolbar/dropdown-buttons/ListsDropdownBtn.svelte +188 -0
- package/dist/Toolbar/dropdown-buttons/ListsDropdownBtn.svelte.d.ts +14 -0
- package/dist/Toolbar/dropdown-buttons/TextColorDropdownBtn.svelte +37 -0
- package/dist/Toolbar/dropdown-buttons/TextColorDropdownBtn.svelte.d.ts +14 -0
- package/dist/Toolbar/dropdowns/LineHeightDropdown.svelte +26 -0
- package/dist/Toolbar/dropdowns/LineHeightDropdown.svelte.d.ts +14 -0
- package/dist/Toolbar/toolbar-utils.d.ts +1 -0
- package/dist/Toolbar/toolbar-utils.js +15 -0
- package/dist/extensions/NodeFontSize.d.ts +10 -0
- package/dist/extensions/NodeFontSize.js +53 -0
- package/dist/extensions/SemanticHeadings.d.ts +10 -0
- package/dist/extensions/SemanticHeadings.js +124 -0
- package/dist/extensions/Table/TableCellNodeView.svelte +0 -4
- package/dist/getExtensions.d.ts +7 -0
- package/dist/getExtensions.js +13 -2
- package/dist/styles.css +53 -10
- package/package.json +1 -1
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
const { ariaLabel = "Highlight", onToggleDropdown } = $props();
|
|
3
|
+
|
|
4
|
+
function handleClick(event: MouseEvent) {
|
|
5
|
+
onToggleDropdown?.(event, "highlight");
|
|
6
|
+
}
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<!-- Highlight -->
|
|
10
|
+
<button
|
|
11
|
+
class="fl-bubble-menu-mark-button"
|
|
12
|
+
type="button"
|
|
13
|
+
aria-label={ariaLabel}
|
|
14
|
+
onclick={handleClick}
|
|
15
|
+
>
|
|
16
|
+
<svg
|
|
17
|
+
width="24"
|
|
18
|
+
height="24"
|
|
19
|
+
class="tiptap-button-icon"
|
|
20
|
+
viewBox="0 0 24 24"
|
|
21
|
+
fill="currentColor"
|
|
22
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
23
|
+
><path
|
|
24
|
+
fill-rule="evenodd"
|
|
25
|
+
clip-rule="evenodd"
|
|
26
|
+
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"
|
|
27
|
+
fill="currentColor"
|
|
28
|
+
></path>
|
|
29
|
+
</svg>
|
|
30
|
+
<svg
|
|
31
|
+
class="toogle-dropdown-button-icon"
|
|
32
|
+
aria-hidden="true"
|
|
33
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
34
|
+
fill="none"
|
|
35
|
+
viewBox="0 0 10 6"
|
|
36
|
+
>
|
|
37
|
+
<path
|
|
38
|
+
stroke="currentColor"
|
|
39
|
+
stroke-linecap="round"
|
|
40
|
+
stroke-linejoin="round"
|
|
41
|
+
stroke-width="2"
|
|
42
|
+
d="m1 1 4 4 4-4"
|
|
43
|
+
></path>
|
|
44
|
+
</svg>
|
|
45
|
+
</button>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: Record<string, never>;
|
|
4
|
+
events: {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
};
|
|
7
|
+
slots: {};
|
|
8
|
+
};
|
|
9
|
+
export type HighlightDropdownBtnProps = typeof __propDef.props;
|
|
10
|
+
export type HighlightDropdownBtnEvents = typeof __propDef.events;
|
|
11
|
+
export type HighlightDropdownBtnSlots = typeof __propDef.slots;
|
|
12
|
+
export default class HighlightDropdownBtn extends SvelteComponentTyped<HighlightDropdownBtnProps, HighlightDropdownBtnEvents, HighlightDropdownBtnSlots> {
|
|
13
|
+
}
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
const { ariaLabel = "Line Height", onToggleDropdown } = $props();
|
|
3
|
+
|
|
4
|
+
function handleClick(event: MouseEvent) {
|
|
5
|
+
onToggleDropdown?.(event, "line-height-dropdown");
|
|
6
|
+
}
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<!-- Line Height -->
|
|
10
|
+
<button
|
|
11
|
+
class="fl-bubble-menu-mark-button"
|
|
12
|
+
type="button"
|
|
13
|
+
aria-label={ariaLabel}
|
|
14
|
+
onclick={handleClick}
|
|
15
|
+
>
|
|
16
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-line-height"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 8l3 -3l3 3"/><path d="M3 16l3 3l3 -3"/><path d="M6 5l0 14"/><path d="M13 6l7 0"/><path d="M13 12l7 0"/><path d="M13 18l7 0"/></svg>
|
|
17
|
+
<svg class="toogle-dropdown-button-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6"><use href="#dropdown-arrow"></use></svg>
|
|
18
|
+
</button>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: Record<string, never>;
|
|
4
|
+
events: {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
};
|
|
7
|
+
slots: {};
|
|
8
|
+
};
|
|
9
|
+
export type LineHeightDropdownBtnProps = typeof __propDef.props;
|
|
10
|
+
export type LineHeightDropdownBtnEvents = typeof __propDef.events;
|
|
11
|
+
export type LineHeightDropdownBtnSlots = typeof __propDef.slots;
|
|
12
|
+
export default class LineHeightDropdownBtn extends SvelteComponentTyped<LineHeightDropdownBtnProps, LineHeightDropdownBtnEvents, LineHeightDropdownBtnSlots> {
|
|
13
|
+
}
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
const {
|
|
3
|
+
editor,
|
|
4
|
+
accentSoft = false,
|
|
5
|
+
ariaLabel = "Lists",
|
|
6
|
+
onToggleDropdown,
|
|
7
|
+
} = $props();
|
|
8
|
+
|
|
9
|
+
function handleClick(event: MouseEvent) {
|
|
10
|
+
onToggleDropdown?.(event, "lists-dropdown");
|
|
11
|
+
}
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<!-- Lists dropdown btn -->
|
|
15
|
+
<button
|
|
16
|
+
aria-label={ariaLabel}
|
|
17
|
+
type="button"
|
|
18
|
+
onclick={handleClick}
|
|
19
|
+
class:is-active={$editor.isActive("bulletList") || $editor.isActive("orderedList") || $editor.isActive("taskList")}
|
|
20
|
+
class:accent-soft={accentSoft}
|
|
21
|
+
>
|
|
22
|
+
{#if $editor.isActive("bulletList")}
|
|
23
|
+
<svg
|
|
24
|
+
width="24"
|
|
25
|
+
height="24"
|
|
26
|
+
class="tiptap-button-icon"
|
|
27
|
+
viewBox="0 0 24 24"
|
|
28
|
+
fill="currentColor"
|
|
29
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
30
|
+
><path
|
|
31
|
+
fill-rule="evenodd"
|
|
32
|
+
clip-rule="evenodd"
|
|
33
|
+
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"
|
|
34
|
+
fill="currentColor"
|
|
35
|
+
></path><path
|
|
36
|
+
fill-rule="evenodd"
|
|
37
|
+
clip-rule="evenodd"
|
|
38
|
+
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"
|
|
39
|
+
fill="currentColor"
|
|
40
|
+
></path><path
|
|
41
|
+
fill-rule="evenodd"
|
|
42
|
+
clip-rule="evenodd"
|
|
43
|
+
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"
|
|
44
|
+
fill="currentColor"
|
|
45
|
+
></path><path
|
|
46
|
+
fill-rule="evenodd"
|
|
47
|
+
clip-rule="evenodd"
|
|
48
|
+
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"
|
|
49
|
+
fill="currentColor"
|
|
50
|
+
></path><path
|
|
51
|
+
fill-rule="evenodd"
|
|
52
|
+
clip-rule="evenodd"
|
|
53
|
+
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"
|
|
54
|
+
fill="currentColor"
|
|
55
|
+
></path><path
|
|
56
|
+
fill-rule="evenodd"
|
|
57
|
+
clip-rule="evenodd"
|
|
58
|
+
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"
|
|
59
|
+
fill="currentColor"
|
|
60
|
+
></path></svg
|
|
61
|
+
>
|
|
62
|
+
{:else if $editor.isActive("orderedList")}
|
|
63
|
+
<svg
|
|
64
|
+
width="24"
|
|
65
|
+
height="24"
|
|
66
|
+
class="tiptap-button-icon"
|
|
67
|
+
viewBox="0 0 24 24"
|
|
68
|
+
fill="currentColor"
|
|
69
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
70
|
+
><path
|
|
71
|
+
fill-rule="evenodd"
|
|
72
|
+
clip-rule="evenodd"
|
|
73
|
+
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"
|
|
74
|
+
fill="currentColor"
|
|
75
|
+
></path><path
|
|
76
|
+
fill-rule="evenodd"
|
|
77
|
+
clip-rule="evenodd"
|
|
78
|
+
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"
|
|
79
|
+
fill="currentColor"
|
|
80
|
+
></path><path
|
|
81
|
+
fill-rule="evenodd"
|
|
82
|
+
clip-rule="evenodd"
|
|
83
|
+
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"
|
|
84
|
+
fill="currentColor"
|
|
85
|
+
></path><path
|
|
86
|
+
fill-rule="evenodd"
|
|
87
|
+
clip-rule="evenodd"
|
|
88
|
+
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"
|
|
89
|
+
fill="currentColor"
|
|
90
|
+
></path><path
|
|
91
|
+
fill-rule="evenodd"
|
|
92
|
+
clip-rule="evenodd"
|
|
93
|
+
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"
|
|
94
|
+
fill="currentColor"
|
|
95
|
+
></path><path
|
|
96
|
+
fill-rule="evenodd"
|
|
97
|
+
clip-rule="evenodd"
|
|
98
|
+
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"
|
|
99
|
+
fill="currentColor"
|
|
100
|
+
></path></svg
|
|
101
|
+
>
|
|
102
|
+
{:else if $editor.isActive("taskList")}
|
|
103
|
+
<svg
|
|
104
|
+
width="24"
|
|
105
|
+
height="24"
|
|
106
|
+
class="tiptap-button-icon"
|
|
107
|
+
viewBox="0 0 24 24"
|
|
108
|
+
fill="currentColor"
|
|
109
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
110
|
+
><path
|
|
111
|
+
fill-rule="evenodd"
|
|
112
|
+
clip-rule="evenodd"
|
|
113
|
+
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"
|
|
114
|
+
fill="currentColor"
|
|
115
|
+
></path><path
|
|
116
|
+
fill-rule="evenodd"
|
|
117
|
+
clip-rule="evenodd"
|
|
118
|
+
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"
|
|
119
|
+
fill="currentColor"
|
|
120
|
+
></path><path
|
|
121
|
+
fill-rule="evenodd"
|
|
122
|
+
clip-rule="evenodd"
|
|
123
|
+
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"
|
|
124
|
+
fill="currentColor"
|
|
125
|
+
></path><path
|
|
126
|
+
fill-rule="evenodd"
|
|
127
|
+
clip-rule="evenodd"
|
|
128
|
+
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"
|
|
129
|
+
fill="currentColor"
|
|
130
|
+
></path><path
|
|
131
|
+
fill-rule="evenodd"
|
|
132
|
+
clip-rule="evenodd"
|
|
133
|
+
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"
|
|
134
|
+
fill="currentColor"
|
|
135
|
+
></path></svg
|
|
136
|
+
>
|
|
137
|
+
{:else}
|
|
138
|
+
<svg
|
|
139
|
+
width="24"
|
|
140
|
+
height="24"
|
|
141
|
+
class="tiptap-button-icon"
|
|
142
|
+
viewBox="0 0 24 24"
|
|
143
|
+
fill="currentColor"
|
|
144
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
145
|
+
><path
|
|
146
|
+
fill-rule="evenodd"
|
|
147
|
+
clip-rule="evenodd"
|
|
148
|
+
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"
|
|
149
|
+
fill="currentColor"
|
|
150
|
+
></path><path
|
|
151
|
+
fill-rule="evenodd"
|
|
152
|
+
clip-rule="evenodd"
|
|
153
|
+
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"
|
|
154
|
+
fill="currentColor"
|
|
155
|
+
></path><path
|
|
156
|
+
fill-rule="evenodd"
|
|
157
|
+
clip-rule="evenodd"
|
|
158
|
+
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"
|
|
159
|
+
fill="currentColor"
|
|
160
|
+
></path><path
|
|
161
|
+
fill-rule="evenodd"
|
|
162
|
+
clip-rule="evenodd"
|
|
163
|
+
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"
|
|
164
|
+
fill="currentColor"
|
|
165
|
+
></path><path
|
|
166
|
+
fill-rule="evenodd"
|
|
167
|
+
clip-rule="evenodd"
|
|
168
|
+
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"
|
|
169
|
+
fill="currentColor"
|
|
170
|
+
></path><path
|
|
171
|
+
fill-rule="evenodd"
|
|
172
|
+
clip-rule="evenodd"
|
|
173
|
+
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"
|
|
174
|
+
fill="currentColor"
|
|
175
|
+
></path></svg
|
|
176
|
+
>
|
|
177
|
+
{/if}
|
|
178
|
+
|
|
179
|
+
<svg
|
|
180
|
+
class="toogle-dropdown-button-icon"
|
|
181
|
+
aria-hidden="true"
|
|
182
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
183
|
+
fill="none"
|
|
184
|
+
viewBox="0 0 10 6"
|
|
185
|
+
>
|
|
186
|
+
<use href="#dropdown-arrow"></use>
|
|
187
|
+
</svg>
|
|
188
|
+
</button>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: Record<string, never>;
|
|
4
|
+
events: {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
};
|
|
7
|
+
slots: {};
|
|
8
|
+
};
|
|
9
|
+
export type ListsDropdownBtnProps = typeof __propDef.props;
|
|
10
|
+
export type ListsDropdownBtnEvents = typeof __propDef.events;
|
|
11
|
+
export type ListsDropdownBtnSlots = typeof __propDef.slots;
|
|
12
|
+
export default class ListsDropdownBtn extends SvelteComponentTyped<ListsDropdownBtnProps, ListsDropdownBtnEvents, ListsDropdownBtnSlots> {
|
|
13
|
+
}
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
const { editor, ariaLabel = "Text color", onToggleDropdown } = $props();
|
|
3
|
+
|
|
4
|
+
function handleClick(event: MouseEvent) {
|
|
5
|
+
onToggleDropdown?.(event, "text-color-dropdown");
|
|
6
|
+
}
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<!-- Text color -->
|
|
10
|
+
<button
|
|
11
|
+
aria-label={ariaLabel}
|
|
12
|
+
type="button"
|
|
13
|
+
onclick={handleClick}
|
|
14
|
+
class="fl-bubble-menu-mark-button"
|
|
15
|
+
>
|
|
16
|
+
<span
|
|
17
|
+
class="fl-button-color-text-popover"
|
|
18
|
+
style="background: {$editor?.getAttributes('textStyle')?.color ||
|
|
19
|
+
'currentColor'}"
|
|
20
|
+
></span>
|
|
21
|
+
|
|
22
|
+
<svg
|
|
23
|
+
class="toogle-dropdown-button-icon"
|
|
24
|
+
aria-hidden="true"
|
|
25
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
26
|
+
fill="none"
|
|
27
|
+
viewBox="0 0 10 6"
|
|
28
|
+
>
|
|
29
|
+
<path
|
|
30
|
+
stroke="currentColor"
|
|
31
|
+
stroke-linecap="round"
|
|
32
|
+
stroke-linejoin="round"
|
|
33
|
+
stroke-width="2"
|
|
34
|
+
d="m1 1 4 4 4-4"
|
|
35
|
+
></path>
|
|
36
|
+
</svg>
|
|
37
|
+
</button>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: Record<string, never>;
|
|
4
|
+
events: {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
};
|
|
7
|
+
slots: {};
|
|
8
|
+
};
|
|
9
|
+
export type TextColorDropdownBtnProps = typeof __propDef.props;
|
|
10
|
+
export type TextColorDropdownBtnEvents = typeof __propDef.events;
|
|
11
|
+
export type TextColorDropdownBtnSlots = typeof __propDef.slots;
|
|
12
|
+
export default class TextColorDropdownBtn extends SvelteComponentTyped<TextColorDropdownBtnProps, TextColorDropdownBtnEvents, TextColorDropdownBtnSlots> {
|
|
13
|
+
}
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
let {
|
|
3
|
+
editor,
|
|
4
|
+
accenSoft = false,
|
|
5
|
+
ariaLabel = "Line height",
|
|
6
|
+
lineHeight
|
|
7
|
+
} = $props();
|
|
8
|
+
|
|
9
|
+
function handleRangeInput(e: any) {
|
|
10
|
+
$editor.commands.setNodeLineHeight(lineHeight.toString());
|
|
11
|
+
}
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<div class="fl-range-element">
|
|
15
|
+
<span class="fl-range-element-value">
|
|
16
|
+
{lineHeight.toFixed(2)}
|
|
17
|
+
</span>
|
|
18
|
+
<input
|
|
19
|
+
oninput={handleRangeInput}
|
|
20
|
+
type="range"
|
|
21
|
+
min="0.5"
|
|
22
|
+
max="4"
|
|
23
|
+
step="0.05"
|
|
24
|
+
bind:value={lineHeight}
|
|
25
|
+
/>
|
|
26
|
+
</div>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: Record<string, never>;
|
|
4
|
+
events: {
|
|
5
|
+
[evt: string]: CustomEvent<any>;
|
|
6
|
+
};
|
|
7
|
+
slots: {};
|
|
8
|
+
};
|
|
9
|
+
export type LineHeightDropdownProps = typeof __propDef.props;
|
|
10
|
+
export type LineHeightDropdownEvents = typeof __propDef.events;
|
|
11
|
+
export type LineHeightDropdownSlots = typeof __propDef.slots;
|
|
12
|
+
export default class LineHeightDropdown extends SvelteComponentTyped<LineHeightDropdownProps, LineHeightDropdownEvents, LineHeightDropdownSlots> {
|
|
13
|
+
}
|
|
14
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function isNodeFullySelected(editor: any): boolean;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
// Función auxiliar para verificar si un nodo está completamente seleccionado
|
|
2
|
+
export function isNodeFullySelected(editor) {
|
|
3
|
+
const { from, to } = editor.state.selection;
|
|
4
|
+
const resolvedFrom = editor.state.doc.resolve(from);
|
|
5
|
+
const resolvedTo = editor.state.doc.resolve(to);
|
|
6
|
+
// Verificar si estamos en el mismo nodo padre
|
|
7
|
+
if (resolvedFrom.parent !== resolvedTo.parent) {
|
|
8
|
+
return false;
|
|
9
|
+
}
|
|
10
|
+
const node = resolvedFrom.parent;
|
|
11
|
+
const start = resolvedFrom.start();
|
|
12
|
+
const end = resolvedTo.end();
|
|
13
|
+
// Verificar si la selección cubre todo el contenido del nodo
|
|
14
|
+
return from === start && to === end;
|
|
15
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Extension } from "@tiptap/core";
|
|
2
|
+
declare module '@tiptap/core' {
|
|
3
|
+
interface Commands<ReturnType> {
|
|
4
|
+
nodeFontSize: {
|
|
5
|
+
setNodeFontSize: (fontSize: string) => ReturnType;
|
|
6
|
+
unsetNodeFontSize: () => ReturnType;
|
|
7
|
+
};
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
export declare const NodeFontSize: Extension<any, any>;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { Extension } from "@tiptap/core";
|
|
2
|
+
const allowedTypes = ["paragraph", "heading", "h1"];
|
|
3
|
+
export const NodeFontSize = Extension.create({
|
|
4
|
+
name: "nodeFontSize",
|
|
5
|
+
addGlobalAttributes() {
|
|
6
|
+
return [
|
|
7
|
+
{
|
|
8
|
+
types: allowedTypes,
|
|
9
|
+
attributes: {
|
|
10
|
+
fontSize: {
|
|
11
|
+
default: null,
|
|
12
|
+
parseHTML: element => element.style.fontSize || null,
|
|
13
|
+
renderHTML: attributes => {
|
|
14
|
+
if (!attributes.fontSize)
|
|
15
|
+
return {};
|
|
16
|
+
return {
|
|
17
|
+
style: `font-size: ${attributes.fontSize}`,
|
|
18
|
+
};
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
];
|
|
24
|
+
},
|
|
25
|
+
addCommands() {
|
|
26
|
+
return {
|
|
27
|
+
setNodeFontSize: (fontSize) => ({ state, commands }) => {
|
|
28
|
+
const { $from } = state.selection;
|
|
29
|
+
for (let d = $from.depth; d > 0; d--) {
|
|
30
|
+
const node = $from.node(d);
|
|
31
|
+
if (allowedTypes.includes(node.type.name)) {
|
|
32
|
+
return commands.updateAttributes(node.type.name, {
|
|
33
|
+
fontSize,
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
return false;
|
|
38
|
+
},
|
|
39
|
+
unsetNodeFontSize: () => ({ state, commands }) => {
|
|
40
|
+
const { $from } = state.selection;
|
|
41
|
+
for (let d = $from.depth; d > 0; d--) {
|
|
42
|
+
const node = $from.node(d);
|
|
43
|
+
if (allowedTypes.includes(node.type.name)) {
|
|
44
|
+
return commands.updateAttributes(node.type.name, {
|
|
45
|
+
fontSize: null,
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
return false;
|
|
50
|
+
},
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
});
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Extension } from '@tiptap/core';
|
|
2
|
+
declare module '@tiptap/core' {
|
|
3
|
+
interface Commands<ReturnType> {
|
|
4
|
+
semanticHeadings: {
|
|
5
|
+
canInsertHeading: (level: number) => ReturnType;
|
|
6
|
+
getAllowedHeadingLevels: () => ReturnType;
|
|
7
|
+
};
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
export declare const SemanticHeadings: Extension<any, any>;
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
import { Extension } from '@tiptap/core';
|
|
2
|
+
import { Plugin, PluginKey } from '@tiptap/pm/state';
|
|
3
|
+
export const SemanticHeadings = Extension.create({
|
|
4
|
+
name: 'semanticHeadings',
|
|
5
|
+
addProseMirrorPlugins() {
|
|
6
|
+
return [
|
|
7
|
+
new Plugin({
|
|
8
|
+
key: new PluginKey('semanticHeadings'),
|
|
9
|
+
appendTransaction(transactions, oldState, newState) {
|
|
10
|
+
// Solo validar si hubo cambios en el documento
|
|
11
|
+
if (!transactions.some(tr => tr.docChanged)) {
|
|
12
|
+
return null;
|
|
13
|
+
}
|
|
14
|
+
const doc = newState.doc;
|
|
15
|
+
let headings = [];
|
|
16
|
+
let h1Count = 0;
|
|
17
|
+
// Recolectar todos los headings en orden
|
|
18
|
+
doc.descendants((node, pos) => {
|
|
19
|
+
if (node.type.name === 'heading') {
|
|
20
|
+
headings.push({
|
|
21
|
+
level: node.attrs.level,
|
|
22
|
+
pos: pos
|
|
23
|
+
});
|
|
24
|
+
if (node.attrs.level === 1) {
|
|
25
|
+
h1Count++;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
// Solo puede haber un h1
|
|
30
|
+
if (h1Count > 1) {
|
|
31
|
+
return oldState.tr; // Revertir
|
|
32
|
+
}
|
|
33
|
+
// Si no hay headings, todo está bien
|
|
34
|
+
if (headings.length === 0) {
|
|
35
|
+
return null;
|
|
36
|
+
}
|
|
37
|
+
// Validar la jerarquía
|
|
38
|
+
for (let i = 0; i < headings.length; i++) {
|
|
39
|
+
const { level } = headings[i];
|
|
40
|
+
// El primer heading debe ser h1
|
|
41
|
+
if (i === 0 && level !== 1) {
|
|
42
|
+
return oldState.tr; // Revertir
|
|
43
|
+
}
|
|
44
|
+
if (i > 0) {
|
|
45
|
+
const prevLevel = headings[i - 1].level;
|
|
46
|
+
// Solo puede:
|
|
47
|
+
// - Mantener el mismo nivel (excepto h1)
|
|
48
|
+
// - Retroceder a cualquier nivel superior (menor número, excepto h1 si ya existe)
|
|
49
|
+
// - Profundizar solo un nivel (prevLevel + 1)
|
|
50
|
+
const isValid = (level === prevLevel && level !== 1) || // Mismo nivel (pero no h1)
|
|
51
|
+
(level < prevLevel && !(level === 1 && h1Count > 0)) || // Retroceder (pero no a h1 si ya existe)
|
|
52
|
+
level === prevLevel + 1; // Profundizar un nivel
|
|
53
|
+
if (!isValid) {
|
|
54
|
+
return oldState.tr; // Revertir
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
return null; // Todo correcto
|
|
59
|
+
}
|
|
60
|
+
})
|
|
61
|
+
];
|
|
62
|
+
},
|
|
63
|
+
addCommands() {
|
|
64
|
+
return {
|
|
65
|
+
canInsertHeading: (level) => ({ state }) => {
|
|
66
|
+
const doc = state.doc;
|
|
67
|
+
let lastHeadingLevel = null;
|
|
68
|
+
let hasH1 = false;
|
|
69
|
+
// Buscar el último heading y verificar si ya existe h1
|
|
70
|
+
doc.descendants((node) => {
|
|
71
|
+
if (node.type.name === 'heading') {
|
|
72
|
+
lastHeadingLevel = node.attrs.level;
|
|
73
|
+
if (node.attrs.level === 1) {
|
|
74
|
+
hasH1 = true;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
// Si no hay headings, solo se permite h1
|
|
79
|
+
if (lastHeadingLevel === null) {
|
|
80
|
+
return level === 1;
|
|
81
|
+
}
|
|
82
|
+
// No permitir h1 si ya existe uno
|
|
83
|
+
if (level === 1 && hasH1) {
|
|
84
|
+
return false;
|
|
85
|
+
}
|
|
86
|
+
// Permitir:
|
|
87
|
+
// - Mismo nivel que el último (excepto h1)
|
|
88
|
+
// - Cualquier nivel superior (retroceder, excepto h1 si ya existe)
|
|
89
|
+
// - Un nivel más profundo
|
|
90
|
+
return ((level === lastHeadingLevel && level !== 1) || // Mismo nivel
|
|
91
|
+
(level < lastHeadingLevel && !(level === 1 && hasH1)) || // Retroceder
|
|
92
|
+
level === lastHeadingLevel + 1 // Profundizar uno
|
|
93
|
+
);
|
|
94
|
+
},
|
|
95
|
+
getAllowedHeadingLevels: () => ({ state }) => {
|
|
96
|
+
const doc = state.doc;
|
|
97
|
+
let lastHeadingLevel = null;
|
|
98
|
+
let hasH1 = false;
|
|
99
|
+
doc.descendants((node) => {
|
|
100
|
+
if (node.type.name === 'heading') {
|
|
101
|
+
lastHeadingLevel = node.attrs.level;
|
|
102
|
+
if (node.attrs.level === 1) {
|
|
103
|
+
hasH1 = true;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
});
|
|
107
|
+
if (lastHeadingLevel === null) {
|
|
108
|
+
return [1]; // Solo h1 permitido
|
|
109
|
+
}
|
|
110
|
+
const allowed = [];
|
|
111
|
+
// Permitir todos los niveles desde h2 (o h1 si no existe) hasta el último
|
|
112
|
+
const startLevel = hasH1 ? 2 : 1;
|
|
113
|
+
for (let i = startLevel; i <= lastHeadingLevel; i++) {
|
|
114
|
+
allowed.push(i);
|
|
115
|
+
}
|
|
116
|
+
// Permitir también el siguiente nivel (si no es mayor que 6)
|
|
117
|
+
if (lastHeadingLevel < 6) {
|
|
118
|
+
allowed.push(lastHeadingLevel + 1);
|
|
119
|
+
}
|
|
120
|
+
return allowed;
|
|
121
|
+
}
|
|
122
|
+
};
|
|
123
|
+
}
|
|
124
|
+
});
|
|
@@ -66,10 +66,6 @@ onMount(() => {
|
|
|
66
66
|
if (node?.type?.name !== "tableCell" && node?.type?.name !== "tableHeader")
|
|
67
67
|
return;
|
|
68
68
|
|
|
69
|
-
const nodeEl = editor.view.nodeDOM(getPos());
|
|
70
|
-
// console.log(nodeEl);
|
|
71
|
-
|
|
72
|
-
// console.log("update", transaction);
|
|
73
69
|
|
|
74
70
|
const attrs = node.attrs;
|
|
75
71
|
const { colspan, rowspan, colwidth } = attrs;
|
package/dist/getExtensions.d.ts
CHANGED