@flexiui/svelte-rich-text 0.0.55 → 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.
Files changed (2) hide show
  1. package/dist/RichText.svelte +614 -600
  2. package/package.json +1 -1
package/dist/RichText.svelte CHANGED
@@ -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;
@@ -2087,539 +2089,513 @@
2087
2089
  {/if}
2088
2090
  </div>
2089
2091
 
2090
- {#if $editor}
2092
+ {#if editor}
2091
2093
  <!-- General Menu -->
2092
- <BubbleMenu
2093
- options={{ placement: "top", offset: bubbleOffset, flip: false }}
2094
- editor={$editor}
2095
- shouldShow={() => {
2096
- const emptySelection = $editor.state.selection.empty;
2097
- const isImage = $editor.isActive("image");
2098
- const isCodeBlock = $editor.isActive("codeBlock");
2099
- const isAudio = $editor.isActive("audio");
2100
- const selection = $editor.state.selection;
2101
- const isRow = $editor.storage.tableCell.customTableSelection === "row";
2102
- const isColumn =
2103
- $editor.storage.tableCell.customTableSelection === "column";
2104
-
2105
- // ⛔️ Ocultar si hay flag de selección completa por fila/columna
2106
- if (isRow || isColumn) {
2107
- console.log(
2108
- "Ocultar si hay flag de selección completa por fila/columna"
2109
- );
2110
- return false;
2111
- }
2112
-
2113
- // // ⛔️ Ocultar si es CellSelection completa (por seguridad)
2114
- // if (selection instanceof CellSelection) {
2115
- // return false;
2116
- // }
2117
-
2118
- if (emptySelection || isImage || isCodeBlock || isAudio) {
2119
- return false;
2120
- }
2121
- return true;
2122
- }}
2123
- >
2124
- <div data-test-id="bubble-menu" class="fl-bubble-menu flex">
2125
- <div role="group" class="fl-rich-text-toolbar-group">
2126
- <!-- Bold -->
2127
- <button
2128
- type="button"
2129
- onclick={() => $editor.chain().focus().toggleBold().run()}
2130
- disabled={!$editor.can().chain().focus().toggleBold().run()}
2131
- class="fl-bubble-menu-mark-button"
2132
- class:is-active={$editor.isActive("bold")}
2133
- class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
2134
- aria-label="Bold"
2135
- >
2136
- <svg
2137
- width="24"
2138
- height="24"
2139
- class="fl-button-icon"
2140
- viewBox="0 0 24 24"
2141
- fill="currentColor"
2142
- xmlns="http://www.w3.org/2000/svg"
2143
- ><path
2144
- fill-rule="evenodd"
2145
- clip-rule="evenodd"
2146
- 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"
2147
- fill="currentColor"
2148
- ></path></svg
2149
- >
2150
- </button>
2151
-
2152
- <!-- Italic -->
2153
- <button
2154
- type="button"
2155
- onclick={() => $editor.chain().focus().toggleItalic().run()}
2156
- disabled={!$editor.can().chain().focus().toggleItalic().run()}
2157
- class="fl-bubble-menu-mark-button"
2158
- class:is-active={$editor.isActive("italic")}
2159
- class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
2160
- aria-label="Italic"
2161
- >
2162
- <svg
2163
- width="24"
2164
- height="24"
2165
- class="tiptap-button-icon"
2166
- viewBox="0 0 24 24"
2167
- fill="currentColor"
2168
- xmlns="http://www.w3.org/2000/svg"
2169
- ><path
2170
- 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"
2171
- fill="currentColor"
2172
- ></path></svg
2173
- >
2174
- </button>
2175
-
2176
- <!-- Underline -->
2177
- <button
2178
- type="button"
2179
- onclick={() => $editor.chain().focus().toggleUnderline().run()}
2180
- disabled={!$editor.can().chain().focus().toggleStrike().run()}
2181
- class="fl-bubble-menu-mark-button"
2182
- class:is-active={$editor.isActive("underline")}
2183
- class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
2184
- aria-label="Underline"
2185
- >
2186
- <svg
2187
- width="24"
2188
- height="24"
2189
- class="tiptap-button-icon"
2190
- viewBox="0 0 24 24"
2191
- fill="currentColor"
2192
- xmlns="http://www.w3.org/2000/svg"
2193
- ><path
2194
- fill-rule="evenodd"
2195
- clip-rule="evenodd"
2196
- 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"
2197
- fill="currentColor"
2198
- ></path></svg
2199
- >
2200
- </button>
2201
-
2202
- <!-- Strike -->
2203
- <button
2204
- type="button"
2205
- onclick={() => $editor.chain().focus().toggleStrike().run()}
2206
- disabled={!$editor.can().chain().focus().toggleStrike().run()}
2207
- class="fl-bubble-menu-mark-button"
2208
- class:is-active={$editor.isActive("strike")}
2209
- class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
2210
- aria-label="Strike"
2211
- >
2212
- <svg
2213
- width="24"
2214
- height="24"
2215
- class="tiptap-button-icon"
2216
- viewBox="0 0 24 24"
2217
- fill="currentColor"
2218
- xmlns="http://www.w3.org/2000/svg"
2219
- ><path
2220
- 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"
2221
- fill="currentColor"
2222
- ></path><path
2223
- 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"
2224
- fill="currentColor"
2225
- ></path></svg
2226
- >
2227
- </button>
2228
-
2229
- <!-- Code -->
2230
- <button
2231
- type="button"
2232
- onclick={() => $editor.chain().focus().toggleCode().run()}
2233
- disabled={!$editor.can().chain().focus().toggleCode().run()}
2234
- class="fl-bubble-menu-mark-button"
2235
- class:is-active={$editor.isActive("code")}
2236
- class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
2237
- aria-label="Code"
2238
- >
2239
- <svg
2240
- width="24"
2241
- height="24"
2242
- class="tiptap-button-icon"
2243
- viewBox="0 0 24 24"
2244
- fill="currentColor"
2245
- xmlns="http://www.w3.org/2000/svg"
2246
- ><path
2247
- 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"
2248
- fill="currentColor"
2249
- ></path><path
2250
- 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"
2251
- fill="currentColor"
2252
- ></path><path
2253
- 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"
2254
- fill="currentColor"
2255
- ></path></svg
2256
- >
2257
- </button>
2258
-
2259
- <!-- Link -->
2260
- <button
2261
- type="button"
2262
- onclick={() => setLink()}
2263
- class="fl-bubble-menu-mark-button"
2264
- class:is-active={$editor.isActive("link")}
2265
- class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
2266
- aria-label="Link"
2267
- >
2268
- <svg
2269
- width="24"
2270
- height="24"
2271
- class="tiptap-button-icon"
2272
- viewBox="0 0 24 24"
2273
- fill="currentColor"
2274
- xmlns="http://www.w3.org/2000/svg"
2275
- ><path
2276
- 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"
2277
- fill="currentColor"
2278
- ></path><path
2279
- 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"
2280
- fill="currentColor"
2281
- ></path></svg
2282
- >
2283
- </button>
2284
-
2285
- <!-- Highlight -->
2286
- <button
2287
- class="fl-bubble-menu-mark-button"
2288
- type="button"
2289
- aria-label="Highlight"
2290
- onclick={(e) => toogleDropdown(e.currentTarget, "highlight")}
2291
- >
2292
- <svg
2293
- width="24"
2294
- height="24"
2295
- class="tiptap-button-icon"
2296
- viewBox="0 0 24 24"
2297
- fill="currentColor"
2298
- xmlns="http://www.w3.org/2000/svg"
2299
- ><path
2300
- fill-rule="evenodd"
2301
- clip-rule="evenodd"
2302
- 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"
2303
- fill="currentColor"
2304
- ></path>
2305
- </svg>
2306
- <svg
2307
- class="toogle-dropdown-button-icon"
2308
- aria-hidden="true"
2309
- xmlns="http://www.w3.org/2000/svg"
2310
- fill="none"
2311
- viewBox="0 0 10 6"
2312
- >
2313
- <path
2314
- stroke="currentColor"
2315
- stroke-linecap="round"
2316
- stroke-linejoin="round"
2317
- stroke-width="2"
2318
- d="m1 1 4 4 4-4"
2319
- ></path>
2320
- </svg>
2321
- </button>
2322
-
2323
- <!-- Text color -->
2324
- <button
2325
- aria-label="Text color"
2326
- type="button"
2327
- bind:this={textColorDropdownTriggerEl}
2328
- onclick={() =>
2329
- toogleDropdown(textColorDropdownTriggerEl, "text-color-dropdown")}
2330
- class="fl-bubble-menu-mark-button"
2331
- >
2332
- <span
2333
- class="fl-button-color-text-popover"
2334
- style="background: {$editor?.getAttributes('textStyle')?.color ||
2335
- 'currentColor'}"
2336
- ></span>
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
+ }
2337
2115
 
2338
- <svg
2339
- class="toogle-dropdown-button-icon"
2340
- aria-hidden="true"
2341
- xmlns="http://www.w3.org/2000/svg"
2342
- fill="none"
2343
- viewBox="0 0 10 6"
2344
- >
2345
- <path
2346
- stroke="currentColor"
2347
- stroke-linecap="round"
2348
- stroke-linejoin="round"
2349
- stroke-width="2"
2350
- d="m1 1 4 4 4-4"
2351
- ></path>
2352
- </svg>
2353
- </button>
2116
+ // // ⛔️ Ocultar si es CellSelection completa (por seguridad)
2117
+ // if (selection instanceof CellSelection) {
2118
+ // return false;
2119
+ // }
2354
2120
 
2355
- {#if !isCellSelection()}
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 -->
2356
2131
  <button
2357
- class="fl-bubble-menu-mark-button"
2358
2132
  type="button"
2359
- onclick={() => $editor.chain().focus().setHardBreak().run()}
2360
- aria-label="Hard break"
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"
2361
2139
  >
2362
2140
  <svg
2363
- xmlns="http://www.w3.org/2000/svg"
2364
2141
  width="24"
2365
2142
  height="24"
2143
+ class="fl-button-icon"
2366
2144
  viewBox="0 0 24 24"
2367
- fill="none"
2368
- stroke="currentColor"
2369
- stroke-width="2"
2370
- stroke-linecap="round"
2371
- stroke-linejoin="round"
2372
- class="icon icon-tabler icons-tabler-outline icon-tabler-corner-down-left"
2373
- ><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
2374
- d="M18 6v6a3 3 0 0 1 -3 3h-10l4 -4m0 8l-4 -4"
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"
2375
2152
  ></path></svg
2376
2153
  >
2377
2154
  </button>
2378
- {/if}
2379
2155
 
2380
- {#if isCellSelection()}
2156
+ <!-- Italic -->
2381
2157
  <button
2382
- class="fl-bubble-menu-mark-button"
2383
2158
  type="button"
2384
- aria-label="Merge cells"
2385
- title="Merge cells"
2386
- onclick={() => $editor?.chain().focus().mergeCells().run()}
2159
+ onclick={() => $editor.chain().focus().toggleItalic().run()}
2160
+ disabled={!$editor.can().chain().focus().toggleItalic().run()}
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"
2387
2165
  >
2388
2166
  <svg
2389
- xmlns="http://www.w3.org/2000/svg"
2167
+ width="24"
2168
+ height="24"
2169
+ class="tiptap-button-icon"
2390
2170
  viewBox="0 0 24 24"
2391
- width="16"
2392
- height="16"
2393
- fill="none"
2394
- stroke="currentColor"
2395
- stroke-width="2"
2396
- stroke-linecap="round"
2397
- stroke-linejoin="round"
2398
- style="opacity:1;"
2399
- ><path d="M12 21v-6m0-6V3M3 15h18M3 9h18"></path><rect
2400
- width="18"
2401
- height="18"
2402
- x="3"
2403
- y="3"
2404
- rx="2"
2405
- ></rect></svg
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
2406
2177
  >
2407
2178
  </button>
2408
2179
 
2180
+ <!-- Underline -->
2409
2181
  <button
2410
- class="fl-bubble-menu-mark-button"
2411
2182
  type="button"
2412
- aria-label="Split cell"
2413
- title="Split cell"
2414
- onclick={() => $editor?.chain().focus().splitCell().run()}
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"
2415
2189
  >
2416
2190
  <svg
2417
- xmlns="http://www.w3.org/2000/svg"
2191
+ width="24"
2192
+ height="24"
2193
+ class="tiptap-button-icon"
2418
2194
  viewBox="0 0 24 24"
2419
- width="16"
2420
- height="16"
2421
- fill="none"
2422
- stroke="currentColor"
2423
- stroke-width="2"
2424
- stroke-linecap="round"
2425
- stroke-linejoin="round"
2426
- style="opacity:1;"
2427
- ><path d="M12 15V9m-9 6h18M3 9h18" /><rect
2428
- width="18"
2429
- height="18"
2430
- x="3"
2431
- y="3"
2432
- rx="2"
2433
- /></svg
2195
+ fill="currentColor"
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
2434
2203
  >
2435
2204
  </button>
2436
- {/if}
2437
- </div>
2438
- </div>
2439
2205
 
2440
- <!-- <div
2441
- class="fl-toolbar-dropdown-panel"
2442
- bind:this={tooltip}
2443
- style="display: {tooltipVisible
2444
- ? 'flex'
2445
- : 'none'}; left: {tooltipX}px; top: {tooltipY}px;"
2446
- >
2447
- {#if activeDropdownType === "text-color"}
2448
- <div class="fl-editor-color-palette">
2206
+ <!-- Strike -->
2449
2207
  <button
2450
- class="fl-color-swatch fl-color-picker-btn"
2451
- aria-label="Text color picker"
2452
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"
2453
2215
  >
2454
- <input
2455
- type="color"
2456
- onchange={(event: any) => {
2457
- recentCustomColors = [
2458
- ...recentCustomColors,
2459
- event?.target?.value,
2460
- ];
2461
- $editor.chain().focus().setColor(event?.target?.value).run();
2462
- hideDropdown();
2463
- }}
2464
- value={rgbToHex($editor?.getAttributes("textStyle")?.color)}
2465
- data-testid="setColor"
2466
- id="colorPicker"
2467
- />
2468
- </button>
2469
-
2470
- {#each TEXT_COLOR_PALETTE as color}
2471
- <button
2472
- class="fl-color-swatch"
2473
- class:active={$editor?.isActive("textStyle", {
2474
- color: color,
2475
- })}
2476
- onclick={() => {
2477
- $editor?.chain().focus().setColor(color).run();
2478
- hideDropdown();
2479
- }}
2480
- style="background-color: {color};"
2481
- aria-label={color}
2216
+ <svg
2217
+ width="24"
2218
+ height="24"
2219
+ class="tiptap-button-icon"
2220
+ viewBox="0 0 24 24"
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"
2229
+ ></path></svg
2482
2230
  >
2483
- </button>
2484
- {/each}
2231
+ </button>
2485
2232
 
2233
+ <!-- Code -->
2486
2234
  <button
2487
- class="fl-color-swatch unset-color"
2488
- onclick={() => {
2489
- $editor?.chain().focus().unsetColor().run();
2490
- hideDropdown();
2491
- }}
2492
- style="background-color: #ffffff;"
2493
- aria-label="Unset color"
2235
+ type="button"
2236
+ onclick={() => $editor.chain().focus().toggleCode().run()}
2237
+ disabled={!$editor.can().chain().focus().toggleCode().run()}
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"
2494
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
+ >
2495
2261
  </button>
2496
2262
 
2497
- {#if recentCustomColors.length > 0}
2498
- {#each recentCustomColors as color}
2499
- <button
2500
- class="fl-color-swatch"
2501
- class:active={$editor?.isActive("textStyle", {
2502
- color: color,
2503
- })}
2504
- onclick={() => {
2505
- $editor?.chain().focus().setColor(color).run();
2506
- hideDropdown();
2507
- }}
2508
- style="background-color: {color};"
2509
- aria-label={color}
2510
- >
2511
- </button>
2512
- {/each}
2513
- {:else}
2263
+ <!-- Link -->
2264
+ <button
2265
+ type="button"
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"
2271
+ >
2272
+ <svg
2273
+ width="24"
2274
+ height="24"
2275
+ class="tiptap-button-icon"
2276
+ viewBox="0 0 24 24"
2277
+ fill="currentColor"
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"
2300
+ viewBox="0 0 24 24"
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"
2314
+ fill="none"
2315
+ viewBox="0 0 10 6"
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>
2325
+ </button>
2326
+
2327
+ <!-- Text color -->
2328
+ <button
2329
+ aria-label="Text color"
2330
+ type="button"
2331
+ bind:this={textColorDropdownTriggerEl}
2332
+ onclick={() =>
2333
+ toogleDropdown(textColorDropdownTriggerEl, "text-color-dropdown")}
2334
+ class="fl-bubble-menu-mark-button"
2335
+ >
2336
+ <span
2337
+ class="fl-button-color-text-popover"
2338
+ style="background: {$editor?.getAttributes('textStyle')?.color ||
2339
+ 'currentColor'}"
2340
+ ></span>
2341
+
2342
+ <svg
2343
+ class="toogle-dropdown-button-icon"
2344
+ aria-hidden="true"
2345
+ xmlns="http://www.w3.org/2000/svg"
2346
+ fill="none"
2347
+ viewBox="0 0 10 6"
2348
+ >
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>
2357
+ </button>
2358
+
2359
+ {#if !isCellSelection()}
2514
2360
  <button
2515
- class="fl-color-swatch"
2516
- style="outline: 1px dashed #ffffff66;background: transparent;"
2517
- onclick={() => alert("Not implemented yet")}
2518
- aria-label="Add new color"
2361
+ class="fl-bubble-menu-mark-button"
2362
+ type="button"
2363
+ onclick={() => $editor.chain().focus().setHardBreak().run()}
2364
+ aria-label="Hard break"
2519
2365
  >
2520
2366
  <svg
2521
2367
  xmlns="http://www.w3.org/2000/svg"
2522
- fill="none"
2368
+ width="24"
2369
+ height="24"
2523
2370
  viewBox="0 0 24 24"
2524
- stroke-width="1.5"
2371
+ fill="none"
2525
2372
  stroke="currentColor"
2526
- class="size-6"
2527
- style="
2528
- width: 11px;
2529
- height: 11px;
2530
- "
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
2531
2380
  >
2532
- <path
2533
- stroke-linecap="round"
2534
- stroke-linejoin="round"
2535
- d="M12 4.5v15m7.5-7.5h-15"
2536
- ></path>
2537
- </svg>
2538
2381
  </button>
2382
+ {/if}
2539
2383
 
2384
+ {#if isCellSelection()}
2540
2385
  <button
2541
- class="fl-color-swatch"
2542
- style="outline: 1px dashed #ffffff66;background: transparent;"
2543
- onclick={() => alert("Not implemented yet")}
2544
- aria-label="Add new color"
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()}
2545
2391
  >
2546
2392
  <svg
2547
2393
  xmlns="http://www.w3.org/2000/svg"
2394
+ viewBox="0 0 24 24"
2395
+ width="16"
2396
+ height="16"
2548
2397
  fill="none"
2398
+ stroke="currentColor"
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
2410
+ >
2411
+ </button>
2412
+
2413
+ <button
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()}
2419
+ >
2420
+ <svg
2421
+ xmlns="http://www.w3.org/2000/svg"
2549
2422
  viewBox="0 0 24 24"
2550
- stroke-width="1.5"
2423
+ width="16"
2424
+ height="16"
2425
+ fill="none"
2551
2426
  stroke="currentColor"
2552
- class="size-6"
2553
- style="
2554
- width: 11px;
2555
- height: 11px;
2556
- "
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
2557
2438
  >
2558
- <path
2559
- stroke-linecap="round"
2560
- stroke-linejoin="round"
2561
- d="M12 4.5v15m7.5-7.5h-15"
2562
- ></path>
2563
- </svg>
2564
2439
  </button>
2565
2440
  {/if}
2566
2441
  </div>
2567
- {:else if activeDropdownType === "highlight"}
2568
- <div class="fl-editor-color-palette">
2569
- <button
2570
- class="fl-color-swatch fl-color-picker-btn"
2571
- aria-label="Highlight color picker"
2572
- type="button"
2573
- >
2574
- <input
2575
- type="color"
2576
- onchange={(event: any) => {
2577
- recentCustomColors = [
2578
- ...recentCustomColors,
2579
- event?.target?.value,
2580
- ];
2581
- $editor
2582
- .chain()
2583
- .focus()
2584
- .setHighlight({ color: event?.target?.value })
2585
- .run();
2586
- hideDropdown();
2587
- }}
2588
- value={rgbToHex($editor?.getAttributes("textStyle")?.color)}
2589
- data-testid="setHiglight"
2590
- id="colorPicker"
2591
- />
2592
- </button>
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}
2593
2489
 
2594
- {#each HIGHLIGHT_COLOR_PALETTE as color}
2595
2490
  <button
2596
- class="fl-color-swatch"
2597
- class:active={$editor?.isActive("textStyle", {
2598
- color: color,
2599
- })}
2491
+ class="fl-color-swatch unset-color"
2600
2492
  onclick={() => {
2601
- $editor?.chain().focus().setHighlight({ color }).run();
2493
+ $editor?.chain().focus().unsetColor().run();
2602
2494
  hideDropdown();
2603
2495
  }}
2604
- style="background-color: {color};"
2605
- aria-label={color}
2496
+ style="background-color: #ffffff;"
2497
+ aria-label="Unset color"
2606
2498
  >
2607
2499
  </button>
2608
- {/each}
2609
2500
 
2610
- <button
2611
- class="fl-color-swatch unset-color"
2612
- onclick={() => {
2613
- $editor?.chain().focus().unsetColor().run();
2614
- hideDropdown();
2615
- }}
2616
- style="background-color: #ffffff;"
2617
- aria-label="Unset color"
2618
- >
2619
- </button>
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>
2620
2597
 
2621
- {#if recentCustomColors.length > 0}
2622
- {#each recentCustomColors as color}
2598
+ {#each HIGHLIGHT_COLOR_PALETTE as color}
2623
2599
  <button
2624
2600
  class="fl-color-swatch"
2625
2601
  class:active={$editor?.isActive("textStyle", {
@@ -2634,154 +2610,192 @@
2634
2610
  >
2635
2611
  </button>
2636
2612
  {/each}
2637
- {:else}
2613
+
2638
2614
  <button
2639
- class="fl-color-swatch"
2640
- style="outline: 1px dashed #ffffff66;background: transparent;"
2641
- onclick={() => alert("Not implemented yet")}
2642
- aria-label="Add new color"
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"
2643
2622
  >
2644
- <svg
2645
- xmlns="http://www.w3.org/2000/svg"
2646
- fill="none"
2647
- viewBox="0 0 24 24"
2648
- stroke-width="1.5"
2649
- stroke="currentColor"
2650
- class="size-6"
2651
- style="
2652
- width: 11px;
2653
- height: 11px;
2654
- "
2655
- >
2656
- <path
2657
- stroke-linecap="round"
2658
- stroke-linejoin="round"
2659
- d="M12 4.5v15m7.5-7.5h-15"
2660
- ></path>
2661
- </svg>
2662
2623
  </button>
2663
2624
 
2664
- <button
2665
- class="fl-color-swatch"
2666
- style="outline: 1px dashed #ffffff66;background: transparent;"
2667
- onclick={() => alert("Not implemented yet")}
2668
- aria-label="Add new color"
2669
- >
2670
- <svg
2671
- xmlns="http://www.w3.org/2000/svg"
2672
- fill="none"
2673
- viewBox="0 0 24 24"
2674
- stroke-width="1.5"
2675
- stroke="currentColor"
2676
- class="size-6"
2677
- style="
2678
- width: 11px;
2679
- height: 11px;
2680
- "
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"
2681
2647
  >
2682
- <path
2683
- stroke-linecap="round"
2684
- stroke-linejoin="round"
2685
- d="M12 4.5v15m7.5-7.5h-15"
2686
- ></path>
2687
- </svg>
2688
- </button>
2689
- {/if}
2690
- </div>
2691
- {/if}
2692
- </div> -->
2693
- </BubbleMenu>
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>
2694
2699
 
2695
2700
  <!-- Image Menu -->
2696
- <BubbleMenu
2697
- editor={$editor}
2698
- shouldShow={() => {
2699
- const emptySelection = $editor.state.selection.empty;
2700
- if (emptySelection) {
2701
- return false;
2702
- }
2703
- return $editor.isActive("image");
2704
- }}
2705
- >
2706
- <div data-test-id="bubble-menu" class="fl-bubble-menu flex">
2707
- <input
2708
- class="fl-editor-image-url-input"
2709
- type="text"
2710
- placeholder="Insert image url"
2711
- bind:this={imageUrlInputEl}
2712
- value={$editor.getAttributes("image").src}
2713
- oninput={(e: any) => {
2714
- // console.log(e.target.value);
2715
- imageUrlInputValue = e.target.value;
2716
- }}
2717
- onkeydown={(e: any) => {
2718
- if (e.key === "Enter") {
2719
- e.preventDefault();
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={() => {
2720
2743
  $editor
2721
2744
  .chain()
2722
2745
  .focus()
2723
2746
  .setImage({ src: imageUrlInputEl?.value })
2724
2747
  .run();
2725
- }
2726
- }}
2727
- />
2728
- <button
2729
- type="button"
2730
- aria-label="Insert image from url"
2731
- disabled={!imageUrlInputValue ||
2732
- imageUrlInputValue === $editor.getAttributes("image").src}
2733
- class:is-active={imageUrlInputValue &&
2734
- imageUrlInputValue !== $editor.getAttributes("image").src}
2735
- class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
2736
- onclick={() => {
2737
- $editor
2738
- .chain()
2739
- .focus()
2740
- .setImage({ src: imageUrlInputEl?.value })
2741
- .run();
2742
- }}
2743
- >
2744
- <svg
2745
- width="16"
2746
- height="16"
2747
- class="tiptap-button-icon"
2748
- viewBox="0 0 24 24"
2749
- fill="currentColor"
2750
- xmlns="http://www.w3.org/2000/svg"
2751
- ><path
2752
- fill-rule="evenodd"
2753
- clip-rule="evenodd"
2754
- 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"
2755
- fill="currentColor"
2756
- class="s-m1-89pp0R0Iu"
2757
- ></path></svg
2748
+ }}
2758
2749
  >
2759
- </button>
2760
-
2761
- <button
2762
- type="button"
2763
- onclick={() => setLink()}
2764
- class="fl-bubble-menu-mark-button"
2765
- class:is-active={$editor.isActive("link")}
2766
- class:accent-soft={editorConfig.buttonStyle === "accent-soft"}
2767
- aria-label="Link"
2768
- >
2769
- <svg
2770
- width="16"
2771
- height="16"
2772
- class="tiptap-button-icon"
2773
- viewBox="0 0 24 24"
2774
- fill="currentColor"
2775
- xmlns="http://www.w3.org/2000/svg"
2776
- ><path
2777
- 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"
2778
- fill="currentColor"
2779
- ></path><path
2780
- 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"
2781
2755
  fill="currentColor"
2782
- ></path></svg
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"
2783
2774
  >
2784
- </button>
2785
- </div>
2786
- </BubbleMenu>
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>
2787
2794
  {/if}
2795
+
2796
+
2797
+ <style>
2798
+ .hidden {
2799
+ display: none;
2800
+ }
2801
+ </style>