@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.
Files changed (82) hide show
  1. package/README.md +388 -185
  2. package/dist/RichText.svelte +382 -2070
  3. package/dist/RichText.svelte.d.ts +28 -0
  4. package/dist/Toolbar/RenderToolbarButton.svelte +147 -0
  5. package/dist/Toolbar/RenderToolbarButton.svelte.d.ts +14 -0
  6. package/dist/Toolbar/action-buttons/ClearFormatting.svelte +31 -0
  7. package/dist/Toolbar/action-buttons/ClearFormatting.svelte.d.ts +14 -0
  8. package/dist/Toolbar/action-buttons/ClearNodes.svelte +15 -0
  9. package/dist/Toolbar/action-buttons/ClearNodes.svelte.d.ts +14 -0
  10. package/dist/Toolbar/action-buttons/MergeCellsBtn.svelte +31 -0
  11. package/dist/Toolbar/action-buttons/MergeCellsBtn.svelte.d.ts +14 -0
  12. package/dist/Toolbar/action-buttons/Redo.svelte +26 -0
  13. package/dist/Toolbar/action-buttons/Redo.svelte.d.ts +14 -0
  14. package/dist/Toolbar/action-buttons/SplitCellBtn.svelte +31 -0
  15. package/dist/Toolbar/action-buttons/SplitCellBtn.svelte.d.ts +14 -0
  16. package/dist/Toolbar/action-buttons/Undo.svelte +30 -0
  17. package/dist/Toolbar/action-buttons/Undo.svelte.d.ts +14 -0
  18. package/dist/Toolbar/action-buttons/marks/Bold.svelte +29 -0
  19. package/dist/Toolbar/action-buttons/marks/Bold.svelte.d.ts +14 -0
  20. package/dist/Toolbar/action-buttons/marks/CodeMarkBtn.svelte +33 -0
  21. package/dist/Toolbar/action-buttons/marks/CodeMarkBtn.svelte.d.ts +14 -0
  22. package/dist/Toolbar/action-buttons/marks/FontSize.svelte +99 -0
  23. package/dist/Toolbar/action-buttons/marks/FontSize.svelte.d.ts +14 -0
  24. package/dist/Toolbar/action-buttons/marks/Italic.svelte +27 -0
  25. package/dist/Toolbar/action-buttons/marks/Italic.svelte.d.ts +14 -0
  26. package/dist/Toolbar/action-buttons/marks/LinkBtn.svelte +64 -0
  27. package/dist/Toolbar/action-buttons/marks/LinkBtn.svelte.d.ts +14 -0
  28. package/dist/Toolbar/action-buttons/marks/SpecialBox.svelte +21 -0
  29. package/dist/Toolbar/action-buttons/marks/SpecialBox.svelte.d.ts +14 -0
  30. package/dist/Toolbar/action-buttons/marks/Strike.svelte +30 -0
  31. package/dist/Toolbar/action-buttons/marks/Strike.svelte.d.ts +14 -0
  32. package/dist/Toolbar/action-buttons/marks/TextAlign.svelte +66 -0
  33. package/dist/Toolbar/action-buttons/marks/TextAlign.svelte.d.ts +14 -0
  34. package/dist/Toolbar/action-buttons/marks/Underline.svelte +29 -0
  35. package/dist/Toolbar/action-buttons/marks/Underline.svelte.d.ts +14 -0
  36. package/dist/Toolbar/action-buttons/nodes/Audio.svelte +60 -0
  37. package/dist/Toolbar/action-buttons/nodes/Audio.svelte.d.ts +14 -0
  38. package/dist/Toolbar/action-buttons/nodes/Blockquote.svelte +25 -0
  39. package/dist/Toolbar/action-buttons/nodes/Blockquote.svelte.d.ts +14 -0
  40. package/dist/Toolbar/action-buttons/nodes/CodeBlock.svelte +37 -0
  41. package/dist/Toolbar/action-buttons/nodes/CodeBlock.svelte.d.ts +14 -0
  42. package/dist/Toolbar/action-buttons/nodes/HardBreakBtn.svelte +26 -0
  43. package/dist/Toolbar/action-buttons/nodes/HardBreakBtn.svelte.d.ts +14 -0
  44. package/dist/Toolbar/action-buttons/nodes/HeadingBtn.svelte +78 -0
  45. package/dist/Toolbar/action-buttons/nodes/HeadingBtn.svelte.d.ts +14 -0
  46. package/dist/Toolbar/action-buttons/nodes/HorizontalRule.svelte +24 -0
  47. package/dist/Toolbar/action-buttons/nodes/HorizontalRule.svelte.d.ts +14 -0
  48. package/dist/Toolbar/action-buttons/nodes/Image.svelte +60 -0
  49. package/dist/Toolbar/action-buttons/nodes/Image.svelte.d.ts +14 -0
  50. package/dist/Toolbar/action-buttons/nodes/InlineMath.svelte +50 -0
  51. package/dist/Toolbar/action-buttons/nodes/InlineMath.svelte.d.ts +14 -0
  52. package/dist/Toolbar/action-buttons/nodes/ListBtn.svelte +43 -0
  53. package/dist/Toolbar/action-buttons/nodes/ListBtn.svelte.d.ts +14 -0
  54. package/dist/Toolbar/action-buttons/nodes/MediaGridBtn.svelte +58 -0
  55. package/dist/Toolbar/action-buttons/nodes/MediaGridBtn.svelte.d.ts +14 -0
  56. package/dist/Toolbar/action-buttons/nodes/Table.svelte +60 -0
  57. package/dist/Toolbar/action-buttons/nodes/Table.svelte.d.ts +14 -0
  58. package/dist/Toolbar/bubble-menus/BubbleMenuImage.svelte +139 -0
  59. package/dist/Toolbar/bubble-menus/BubbleMenuImage.svelte.d.ts +14 -0
  60. package/dist/Toolbar/dropdown-buttons/HeadingsDropdownBtn.svelte +64 -0
  61. package/dist/Toolbar/dropdown-buttons/HeadingsDropdownBtn.svelte.d.ts +14 -0
  62. package/dist/Toolbar/dropdown-buttons/HighlightDropdownBtn.svelte +45 -0
  63. package/dist/Toolbar/dropdown-buttons/HighlightDropdownBtn.svelte.d.ts +14 -0
  64. package/dist/Toolbar/dropdown-buttons/LineHeightDropdownBtn.svelte +18 -0
  65. package/dist/Toolbar/dropdown-buttons/LineHeightDropdownBtn.svelte.d.ts +14 -0
  66. package/dist/Toolbar/dropdown-buttons/ListsDropdownBtn.svelte +188 -0
  67. package/dist/Toolbar/dropdown-buttons/ListsDropdownBtn.svelte.d.ts +14 -0
  68. package/dist/Toolbar/dropdown-buttons/TextColorDropdownBtn.svelte +37 -0
  69. package/dist/Toolbar/dropdown-buttons/TextColorDropdownBtn.svelte.d.ts +14 -0
  70. package/dist/Toolbar/dropdowns/LineHeightDropdown.svelte +26 -0
  71. package/dist/Toolbar/dropdowns/LineHeightDropdown.svelte.d.ts +14 -0
  72. package/dist/Toolbar/toolbar-utils.d.ts +1 -0
  73. package/dist/Toolbar/toolbar-utils.js +15 -0
  74. package/dist/extensions/NodeFontSize.d.ts +10 -0
  75. package/dist/extensions/NodeFontSize.js +53 -0
  76. package/dist/extensions/SemanticHeadings.d.ts +10 -0
  77. package/dist/extensions/SemanticHeadings.js +124 -0
  78. package/dist/extensions/Table/TableCellNodeView.svelte +0 -4
  79. package/dist/getExtensions.d.ts +7 -0
  80. package/dist/getExtensions.js +13 -2
  81. package/dist/styles.css +53 -10
  82. 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;
@@ -1,3 +1,10 @@
1
+ declare module '@tiptap/core' {
2
+ interface Commands<ReturnType> {
3
+ h1: {
4
+ toggleH1: () => ReturnType;
5
+ };
6
+ }
7
+ }
1
8
  export declare function getRichTextExtensions(options?: {
2
9
  editable?: boolean;
3
10
  customExtensions?: any[];