@flexiui/svelte-rich-text 0.0.60 → 0.0.61

package/dist/Toolbar/action-buttons/marks/FontSize.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FontSizeProps = typeof __propDef.props;
+export type FontSizeEvents = typeof __propDef.events;
+export type FontSizeSlots = typeof __propDef.slots;
+export default class FontSize extends SvelteComponentTyped<FontSizeProps, FontSizeEvents, FontSizeSlots> {
+}
+export {};

package/dist/Toolbar/action-buttons/marks/Italic.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  const { editor, accenSoft = false, ariaLabel = "Italic" } = $props();
+</script>
+
+<!-- Italic -->
+<button
+  type="button"
+  onclick={() => $editor.chain().focus().toggleItalic().run()}
+  disabled={!$editor.can().chain().focus().toggleItalic().run()}
+  class="fl-bubble-menu-mark-button"
+  class:is-active={$editor.isActive("italic")}
+  class:accent-soft={accenSoft}
+  aria-label={ariaLabel}
+>
+  <svg
+    width="24"
+    height="24"
+    class="tiptap-button-icon"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    ><path
+      d="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"
+      fill="currentColor"
+    ></path></svg
+  >
+</button>

package/dist/Toolbar/action-buttons/marks/Italic.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ItalicProps = typeof __propDef.props;
+export type ItalicEvents = typeof __propDef.events;
+export type ItalicSlots = typeof __propDef.slots;
+export default class Italic extends SvelteComponentTyped<ItalicProps, ItalicEvents, ItalicSlots> {
+}
+export {};

package/dist/Toolbar/action-buttons/marks/LinkBtn.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  const { editor, accenSoft = false, ariaLabel = "Link" } = $props();
+
+  function setLink() {
+    const previousUrl = $editor.getAttributes("link").href;
+    const url = window.prompt("URL", previousUrl);
+
+    if (url === null) {
+      return;
+    }
+
+    if (url === "") {
+      $editor.chain().focus().extendMarkRange("link").unsetLink().run();
+
+      return;
+    }
+
+    try {
+      $editor
+        .chain()
+        .focus()
+        .extendMarkRange("link")
+        .setLink({ href: url })
+        .run();
+
+      setTimeout(() => {
+        const allLinks = $editor.view.dom.querySelectorAll("a");
+        allLinks.forEach((link: any) => {
+          link.addEventListener("click", (e: any) => {
+            e.preventDefault();
+          });
+        });
+      }, 100);
+    } catch (e) {
+      // console.log(e.message);
+    }
+  }
+</script>
+
+<!-- Link -->
+<button
+  type="button"
+  onclick={() => setLink()}
+  class="fl-bubble-menu-mark-button"
+  class:is-active={$editor.isActive("link")}
+  class:accent-soft={accenSoft}
+  aria-label={ariaLabel}
+>
+  <svg
+    width="24"
+    height="24"
+    class="tiptap-button-icon"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    ><path
+      d="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"
+      fill="currentColor"
+    ></path><path
+      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"
+      fill="currentColor"
+    ></path></svg
+  >
+</button>

package/dist/Toolbar/action-buttons/marks/LinkBtn.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LinkBtnProps = typeof __propDef.props;
+export type LinkBtnEvents = typeof __propDef.events;
+export type LinkBtnSlots = typeof __propDef.slots;
+export default class LinkBtn extends SvelteComponentTyped<LinkBtnProps, LinkBtnEvents, LinkBtnSlots> {
+}
+export {};

package/dist/Toolbar/action-buttons/marks/SpecialBox.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  const { editor, accentSoft = false, ariaLabel = "Special box" } = $props();
+
+  function toggleSpecialBox() {
+    if ($editor) {
+      $editor.chain().focus().specialBox().run();
+    }
+  }
+</script>
+
+<!-- Special box -->
+<button
+  class="fl-bubble-menu-mark-button"
+  class:is-active={$editor?.isActive("specialBox")}
+  class:accent-soft={accentSoft}
+  onclick={toggleSpecialBox}
+  type="button"
+  aria-label={ariaLabel}
+>
+  <span class="special-box-icon">A</span>
+</button>

package/dist/Toolbar/action-buttons/marks/SpecialBox.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SpecialBoxProps = typeof __propDef.props;
+export type SpecialBoxEvents = typeof __propDef.events;
+export type SpecialBoxSlots = typeof __propDef.slots;
+export default class SpecialBox extends SvelteComponentTyped<SpecialBoxProps, SpecialBoxEvents, SpecialBoxSlots> {
+}
+export {};

package/dist/Toolbar/action-buttons/marks/Strike.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  const { editor, accenSoft = false, ariaLabel = "Strike" } = $props();
+</script>
+
+<!-- Strike -->
+<button
+  type="button"
+  onclick={() => $editor.chain().focus().toggleStrike().run()}
+  disabled={!$editor.can().chain().focus().toggleStrike().run()}
+  class="fl-bubble-menu-mark-button"
+  class:is-active={$editor.isActive("strike")}
+  class:accent-soft={accenSoft}
+  aria-label={ariaLabel}
+>
+  <svg
+    width="24"
+    height="24"
+    class="tiptap-button-icon"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    ><path
+      d="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"
+      fill="currentColor"
+    ></path><path
+      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"
+      fill="currentColor"
+    ></path></svg
+  >
+</button>

package/dist/Toolbar/action-buttons/marks/Strike.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type StrikeProps = typeof __propDef.props;
+export type StrikeEvents = typeof __propDef.events;
+export type StrikeSlots = typeof __propDef.slots;
+export default class Strike extends SvelteComponentTyped<StrikeProps, StrikeEvents, StrikeSlots> {
+}
+export {};

package/dist/Toolbar/action-buttons/marks/TextAlign.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  interface Props {
+    editor;
+    position: "left" | "center" | "right";
+    accenSoft?: boolean;
+    ariaLabel?: string;
+  }
+  let { editor, accenSoft = false, ariaLabel, position }: Props = $props();
+
+  if (!ariaLabel) {
+    ariaLabel = `Text align ${position}`;
+  }
+</script>
+
+<!-- Text align -->
+<button
+  type="button"
+  onclick={() => $editor.chain().focus().toggleTextAlign(position).run()}
+  class:is-active={$editor.isActive({ textAlign: position })}
+  class:accent-soft={accenSoft}
+  aria-label={ariaLabel}
+>
+  {#if position === "left"}
+    <svg
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      ><path
+        d="M2 4.5C2 4.22386 2.22386 4 2.5 4H12.5C12.7761 4 13 4.22386 13 4.5C13 4.77614 12.7761 5 12.5 5H2.5C2.22386 5 2 4.77614 2 4.5ZM2 7.5C2 7.22386 2.22386 7 2.5 7H7.5C7.77614 7 8 7.22386 8 7.5C8 7.77614 7.77614 8 7.5 8H2.5C2.22386 8 2 7.77614 2 7.5ZM2 10.5C2 10.2239 2.22386 10 2.5 10H10.5C10.7761 10 11 10.2239 11 10.5C11 10.7761 10.7761 11 10.5 11H2.5C2.22386 11 2 10.7761 2 10.5Z"
+        fill="currentColor"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+      ></path></svg
+    >
+  {:else if position === "center"}
+    <svg
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      ><path
+        d="M2 4.5C2 4.22386 2.22386 4 2.5 4H12.5C12.7761 4 13 4.22386 13 4.5C13 4.77614 12.7761 5 12.5 5H2.5C2.22386 5 2 4.77614 2 4.5ZM4 7.5C4 7.22386 4.22386 7 4.5 7H10.5C10.7761 7 11 7.22386 11 7.5C11 7.77614 10.7761 8 10.5 8H4.5C4.22386 8 4 7.77614 4 7.5ZM3 10.5C3 10.2239 3.22386 10 3.5 10H11.5C11.7761 10 12 10.2239 12 10.5C12 10.7761 11.7761 11 11.5 11H3.5C3.22386 11 3 10.7761 3 10.5Z"
+        fill="currentColor"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+      ></path></svg
+    >
+  {:else if position === "right"}
+    <svg
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      ><path
+        d="M2 4.5C2 4.22386 2.22386 4 2.5 4H12.5C12.7761 4 13 4.22386 13 4.5C13 4.77614 12.7761 5 12.5 5H2.5C2.22386 5 2 4.77614 2 4.5ZM7 7.5C7 7.22386 7.22386 7 7.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H7.5C7.22386 8 7 7.77614 7 7.5ZM4 10.5C4 10.2239 4.22386 10 4.5 10H12.5C12.7761 10 13 10.2239 13 10.5C13 10.7761 12.7761 11 12.5 11H4.5C4.22386 11 4 10.7761 4 10.5Z"
+        fill="currentColor"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+      ></path></svg
+    >
+  {/if}
+</button>

package/dist/Toolbar/action-buttons/marks/TextAlign.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TextAlignProps = typeof __propDef.props;
+export type TextAlignEvents = typeof __propDef.events;
+export type TextAlignSlots = typeof __propDef.slots;
+export default class TextAlign extends SvelteComponentTyped<TextAlignProps, TextAlignEvents, TextAlignSlots> {
+}
+export {};

package/dist/Toolbar/action-buttons/marks/Underline.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  const { editor, accenSoft = false, ariaLabel = "Underline" } = $props();
+</script>
+
+<!-- Underline -->
+<button
+  type="button"
+  onclick={() => $editor.chain().focus().toggleUnderline().run()}
+  disabled={!$editor.can().chain().focus().toggleStrike().run()}
+  class="fl-bubble-menu-mark-button"
+  class:is-active={$editor.isActive("underline")}
+  class:accent-soft={accenSoft}
+  aria-label={ariaLabel}
+>
+  <svg
+    width="24"
+    height="24"
+    class="tiptap-button-icon"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    ><path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M7 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"
+      fill="currentColor"
+    ></path></svg
+  >
+</button>

package/dist/Toolbar/action-buttons/marks/Underline.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UnderlineProps = typeof __propDef.props;
+export type UnderlineEvents = typeof __propDef.events;
+export type UnderlineSlots = typeof __propDef.slots;
+export default class Underline extends SvelteComponentTyped<UnderlineProps, UnderlineEvents, UnderlineSlots> {
+}
+export {};

package/dist/Toolbar/action-buttons/nodes/Audio.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { isNodeFullySelected } from "../../toolbar-utils";
+
+  let {
+    editor,
+    nodesLimit,
+    currentNodeCount,
+    accenSoft = false,
+    ariaLabel = "Audio",
+  } = $props();
+
+  function addAudio() {
+    const hasSelected = isNodeFullySelected($editor);
+
+    if (currentNodeCount >= nodesLimit && !hasSelected) {
+      return;
+    }
+
+    const previousSrc = $editor.getAttributes("audio").src;
+    const src = window.prompt("Enter the URL of the audio:", previousSrc);
+
+    if (!src) {
+      alert("Please enter a valid URL");
+      return;
+    }
+
+    // Si el nodo está completamente seleccionado, reemplazarlo
+    if (hasSelected) {
+      $editor
+        .chain()
+        .deleteSelection() // Elimina el nodo seleccionado
+        .setAudio({ src, controls: true })
+        .run();
+    } else {
+      // Comportamiento normal: insertar
+      $editor.chain().focus().setAudio({ src, controls: true }).run();
+    }
+  }
+</script>
+
+<!-- Audio -->
+<button
+  type="button"
+  onclick={addAudio}
+  aria-label={ariaLabel}
+  class:is-active={$editor.isActive("audio")}
+  class:accent-soft={accenSoft}
+>
+  <svg
+    style="transform: scale(1.1);"
+    fill="currentColor"
+    width="24px"
+    viewBox="0 -960 960 960"
+    height="24px"
+    xmlns="http://www.w3.org/2000/svg"
+    ><path
+      d="M400-120q-66 0-113-47t-47-113q0-66 47-113t113-47q23 0 42.5 5.5T480-418v-422h240v160H560v400q0 66-47 113t-113 47Z"
+    ></path></svg
+  >
+</button>

package/dist/Toolbar/action-buttons/nodes/Audio.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AudioProps = typeof __propDef.props;
+export type AudioEvents = typeof __propDef.events;
+export type AudioSlots = typeof __propDef.slots;
+export default class Audio extends SvelteComponentTyped<AudioProps, AudioEvents, AudioSlots> {
+}
+export {};

package/dist/Toolbar/action-buttons/nodes/Blockquote.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  const { editor, accenSoft = false, ariaLabel = "Blockquote" } = $props();
+</script>
+
+<button
+  type="button"
+  onclick={() => $editor.chain().focus().toggleBlockquote().run()}
+  class={$editor.isActive("blockquote") ? "is-active" : ""}
+  aria-label={ariaLabel}
+  class:accent-soft={accenSoft}
+>
+  <svg
+    width="15"
+    height="15"
+    viewBox="0 0 15 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    ><path
+      d="M9.42503 3.44136C10.0561 3.23654 10.7837 3.2402 11.3792 3.54623C12.7532 4.25224 13.3477 6.07191 12.7946 8C12.5465 8.8649 12.1102 9.70472 11.1861 10.5524C10.262 11.4 8.98034 11.9 8.38571 11.9C8.17269 11.9 8 11.7321 8 11.525C8 11.3179 8.17644 11.15 8.38571 11.15C9.06497 11.15 9.67189 10.7804 10.3906 10.236C10.9406 9.8193 11.3701 9.28633 11.608 8.82191C12.0628 7.93367 12.0782 6.68174 11.3433 6.34901C10.9904 6.73455 10.5295 6.95946 9.97725 6.95946C8.7773 6.95946 8.0701 5.99412 8.10051 5.12009C8.12957 4.28474 8.66032 3.68954 9.42503 3.44136ZM3.42503 3.44136C4.05614 3.23654 4.78366 3.2402 5.37923 3.54623C6.7532 4.25224 7.34766 6.07191 6.79462 8C6.54654 8.8649 6.11019 9.70472 5.1861 10.5524C4.26201 11.4 2.98034 11.9 2.38571 11.9C2.17269 11.9 2 11.7321 2 11.525C2 11.3179 2.17644 11.15 2.38571 11.15C3.06497 11.15 3.67189 10.7804 4.39058 10.236C4.94065 9.8193 5.37014 9.28633 5.60797 8.82191C6.06282 7.93367 6.07821 6.68174 5.3433 6.34901C4.99037 6.73455 4.52948 6.95946 3.97725 6.95946C2.7773 6.95946 2.0701 5.99412 2.10051 5.12009C2.12957 4.28474 2.66032 3.68954 3.42503 3.44136Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+    ></path></svg
+  >
+</button>

package/dist/Toolbar/action-buttons/nodes/Blockquote.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BlockquoteProps = typeof __propDef.props;
+export type BlockquoteEvents = typeof __propDef.events;
+export type BlockquoteSlots = typeof __propDef.slots;
+export default class Blockquote extends SvelteComponentTyped<BlockquoteProps, BlockquoteEvents, BlockquoteSlots> {
+}
+export {};

package/dist/Toolbar/action-buttons/nodes/CodeBlock.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  const { editor, accenSoft = false, ariaLabel = "Code block" } = $props();
+</script>
+
+<!-- Code block -->
+<button
+  type="button"
+  onclick={() => $editor.chain().focus().toggleCodeBlock().run()}
+  class={$editor.isActive("codeBlock") ? "is-active" : ""}
+  aria-label={ariaLabel}
+  class:accent-soft={accenSoft}
+>
+  <svg
+    width="24"
+    height="24"
+    class="tiptap-button-icon"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    ><path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.70711 2.29289C7.09763 2.68342 7.09763 3.31658 6.70711 3.70711L4.41421 6L6.70711 8.29289C7.09763 8.68342 7.09763 9.31658 6.70711 9.70711C6.31658 10.0976 5.68342 10.0976 5.29289 9.70711L2.29289 6.70711C1.90237 6.31658 1.90237 5.68342 2.29289 5.29289L5.29289 2.29289C5.68342 1.90237 6.31658 1.90237 6.70711 2.29289Z"
+      fill="currentColor"
+    ></path><path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M10.2929 2.29289C10.6834 1.90237 11.3166 1.90237 11.7071 2.29289L14.7071 5.29289C15.0976 5.68342 15.0976 6.31658 14.7071 6.70711L11.7071 9.70711C11.3166 10.0976 10.6834 10.0976 10.2929 9.70711C9.90237 9.31658 9.90237 8.68342 10.2929 8.29289L12.5858 6L10.2929 3.70711C9.90237 3.31658 9.90237 2.68342 10.2929 2.29289Z"
+      fill="currentColor"
+    ></path><path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M17 4C17 3.44772 17.4477 3 18 3H19C20.6569 3 22 4.34315 22 6V18C22 19.6569 20.6569 21 19 21H5C3.34315 21 2 19.6569 2 18V12C2 11.4477 2.44772 11 3 11C3.55228 11 4 11.4477 4 12V18C4 18.5523 4.44772 19 5 19H19C19.5523 19 20 18.5523 20 18V6C20 5.44772 19.5523 5 19 5H18C17.4477 5 17 4.55228 17 4Z"
+      fill="currentColor"
+    ></path></svg
+  >
+</button>

package/dist/Toolbar/action-buttons/nodes/CodeBlock.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CodeBlockProps = typeof __propDef.props;
+export type CodeBlockEvents = typeof __propDef.events;
+export type CodeBlockSlots = typeof __propDef.slots;
+export default class CodeBlock extends SvelteComponentTyped<CodeBlockProps, CodeBlockEvents, CodeBlockSlots> {
+}
+export {};

package/dist/Toolbar/action-buttons/nodes/HardBreakBtn.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  const { editor, ariaLabel = "Hard break" } = $props();
+</script>
+
+<button
+  class="fl-bubble-menu-mark-button"
+  type="button"
+  onclick={() => $editor.chain().focus().setHardBreak().run()}
+  aria-label={ariaLabel}
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    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-corner-down-left"
+    ><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path
+      d="M18 6v6a3 3 0 0 1 -3 3h-10l4 -4m0 8l-4 -4"
+    ></path></svg
+  >
+</button>

package/dist/Toolbar/action-buttons/nodes/HardBreakBtn.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type HardBreakBtnProps = typeof __propDef.props;
+export type HardBreakBtnEvents = typeof __propDef.events;
+export type HardBreakBtnSlots = typeof __propDef.slots;
+export default class HardBreakBtn extends SvelteComponentTyped<HardBreakBtnProps, HardBreakBtnEvents, HardBreakBtnSlots> {
+}
+export {};

package/dist/Toolbar/action-buttons/nodes/HeadingBtn.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  interface Props {
+    editor: any;
+    nodeCounters: { totalCount: number; h1Count: number };
+    uniqueH1?: boolean;
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+    accenSoft?: boolean;
+    ariaLabel?: string;
+  }
+  let {
+    editor,
+    nodeCounters,
+    uniqueH1,
+    level,
+    accenSoft = false,
+    ariaLabel,
+  }: Props = $props();
+
+  if (!ariaLabel) {
+    ariaLabel = `Heading ${level}`;
+  }
+
+  const icons = {
+    1: `<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13 20H11V13H4V20H2V4H4V11H11V4H13V20ZM21.0005 8V20H19.0005L19 10.204L17 10.74V8.67L19.5005 8H21.0005Z"></path></svg>`,
+    2: `<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 4V11H11V4H13V20H11V13H4V20H2V4H4ZM18.5 8C20.5711 8 22.25 9.67893 22.25 11.75C22.25 12.6074 21.9623 13.3976 21.4781 14.0292L21.3302 14.2102L18.0343 18H22V20H15L14.9993 18.444L19.8207 12.8981C20.0881 12.5908 20.25 12.1893 20.25 11.75C20.25 10.7835 19.4665 10 18.5 10C17.5818 10 16.8288 10.7071 16.7558 11.6065L16.75 11.75H14.75C14.75 9.67893 16.4289 8 18.5 8Z"></path></svg>`,
+    3: `<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M22 8L21.9984 10L19.4934 12.883C21.0823 13.3184 22.25 14.7728 22.25 16.5C22.25 18.5711 20.5711 20.25 18.5 20.25C16.674 20.25 15.1528 18.9449 14.8184 17.2166L16.7821 16.8352C16.9384 17.6413 17.6481 18.25 18.5 18.25C19.4665 18.25 20.25 17.4665 20.25 16.5C20.25 15.5335 19.4665 14.75 18.5 14.75C18.214 14.75 17.944 14.8186 17.7056 14.9403L16.3992 13.3932L19.3484 10H15V8H22ZM4 4V11H11V4H13V20H11V13H4V20H2V4H4Z"></path></svg>`,
+    4: `<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13 20H11V13H4V20H2V4H4V11H11V4H13V20ZM22 8V16H23.5V18H22V20H20V18H14.5V16.66L19.5 8H22ZM20 11.133L17.19 16H20V11.133Z"></path></svg>`,
+    5: `<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M22 8V10H17.6769L17.2126 12.6358C17.5435 12.5472 17.8912 12.5 18.25 12.5C20.4591 12.5 22.25 14.2909 22.25 16.5C22.25 18.7091 20.4591 20.5 18.25 20.5C16.4233 20.5 14.8827 19.2756 14.4039 17.6027L16.3271 17.0519C16.5667 17.8881 17.3369 18.5 18.25 18.5C19.3546 18.5 20.25 17.6046 20.25 16.5C20.25 15.3954 19.3546 14.5 18.25 14.5C17.6194 14.5 17.057 14.7918 16.6904 15.2478L14.8803 14.3439L16 8H22ZM4 4V11H11V4H13V20H11V13H4V20H2V4H4Z"></path></svg>`,
+    6: `<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M21.097 8L18.499 12.5C20.7091 12.5 22.5 14.2909 22.5 16.5C22.5 18.7091 20.7091 20.5 18.5 20.5C16.2909 20.5 14.5 18.7091 14.5 16.5C14.5 15.7636 14.699 15.0737 15.0461 14.4811L18.788 8H21.097ZM4 4V11H11V4H13V20H11V13H4V20H2V4H4ZM18.5 14.5C17.3954 14.5 16.5 15.3954 16.5 16.5C16.5 17.6046 17.3954 18.5 18.5 18.5C19.6046 18.5 20.5 17.6046 20.5 16.5C20.5 15.3954 19.6046 14.5 18.5 14.5Z"></path></svg>`
+  }
+
+  function hasH1AfterCursor(editor) {
+    const { state } = editor;
+    const { doc, selection } = state;
+    const currentPos = selection.from;
+
+    let found = false;
+
+    doc.descendants((node, pos) => {
+      if (pos > currentPos) {
+        if (node.type.name === "h1") {
+          found = true;
+          return false; // corta el recorrido
+        }
+      }
+    });
+
+    return found;
+  }
+
+  function canCreateSubheading(editor) {
+    return !hasH1AfterCursor(editor);
+  }
+</script>
+
+{#if level === 1}
+  <button
+    type="button"
+    onclick={() => $editor.chain().focus().toggleH1().run()}
+    class:is-active={$editor.isActive("h1")}
+    class:accent-soft={accenSoft}
+    aria-label="H1"
+    disabled={uniqueH1 && !$editor.isActive("h1") && nodeCounters?.h1Count >= 1}
+  >
+    {@html icons[level]}
+  </button>
+{:else}
+  <button
+    type="button"
+    onclick={() => $editor.chain().focus().toggleHeading({ level }).run()}
+    class:is-active={$editor.isActive("heading", { level })}
+    class:accent-soft={accenSoft}
+    aria-label={ariaLabel}
+    disabled={!canCreateSubheading($editor)}
+  >
+    {@html icons[level]}
+  </button>
+{/if}