@flexiui/svelte-rich-text 0.0.60 → 0.0.61

package/dist/Toolbar/action-buttons/nodes/HeadingBtn.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 HeadingBtnProps = typeof __propDef.props;
+export type HeadingBtnEvents = typeof __propDef.events;
+export type HeadingBtnSlots = typeof __propDef.slots;
+export default class HeadingBtn extends SvelteComponentTyped<HeadingBtnProps, HeadingBtnEvents, HeadingBtnSlots> {
+}
+export {};

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+  const { editor, ariaLabel = "Horizontal rule" } = $props();
+</script>
+
+<!-- Horizontal rule -->
+<button
+  type="button"
+  onclick={() => $editor.chain().focus().setHorizontalRule().run()}
+  aria-label={ariaLabel}
+>
+  <svg
+    width="15"
+    height="15"
+    viewBox="0 0 15 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    ><path
+      d="M2 7.5C2 7.22386 2.22386 7 2.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H2.5C2.22386 8 2 7.77614 2 7.5Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+    ></path></svg
+  >
+</button>

package/dist/Toolbar/action-buttons/nodes/HorizontalRule.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 HorizontalRuleProps = typeof __propDef.props;
+export type HorizontalRuleEvents = typeof __propDef.events;
+export type HorizontalRuleSlots = typeof __propDef.slots;
+export default class HorizontalRule extends SvelteComponentTyped<HorizontalRuleProps, HorizontalRuleEvents, HorizontalRuleSlots> {
+}
+export {};

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

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { isNodeFullySelected } from "../../toolbar-utils";
+
+  let {
+    editor,
+    nodesLimit,
+    currentNodeCount,
+    accenSoft = false,
+    ariaLabel = "Image",
+  } = $props();
+
+  function addImage() {
+    const hasSelected = isNodeFullySelected($editor);
+
+    if (currentNodeCount >= nodesLimit && !hasSelected) {
+      return;
+    }
+
+    const previousSrc = $editor.getAttributes("image").src;
+    const src = window.prompt("Enter the URL of the image:", 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
+        .setImage({ src })
+        .run();
+    } else {
+      // Comportamiento normal: insertar
+      $editor.chain().focus().setImage({ src }).run();
+    }
+  }
+</script>
+
+<!-- Image -->
+<button
+  type="button"
+  onclick={addImage}
+  aria-label={ariaLabel}
+  class:is-active={$editor.isActive("image")}
+  class:accent-soft={accenSoft}
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    class="icon icon-tabler icons-tabler-filled icon-tabler-photo"
+    ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
+      d="M8.813 11.612c.457 -.38 .918 -.38 1.386 .011l.108 .098l4.986 4.986l.094 .083a1 1 0 0 0 1.403 -1.403l-.083 -.094l-1.292 -1.293l.292 -.293l.106 -.095c.457 -.38 .918 -.38 1.386 .011l.108 .098l4.674 4.675a4 4 0 0 1 -3.775 3.599l-.206 .005h-12a4 4 0 0 1 -3.98 -3.603l6.687 -6.69l.106 -.095zm9.187 -9.612a4 4 0 0 1 3.995 3.8l.005 .2v9.585l-3.293 -3.292l-.15 -.137c-1.256 -1.095 -2.85 -1.097 -4.096 -.017l-.154 .14l-.307 .306l-2.293 -2.292l-.15 -.137c-1.256 -1.095 -2.85 -1.097 -4.096 -.017l-.154 .14l-5.307 5.306v-9.585a4 4 0 0 1 3.8 -3.995l.2 -.005h12zm-2.99 5l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007z"
+    /></svg
+  >
+</button>

package/dist/Toolbar/action-buttons/nodes/Image.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 ImageProps = typeof __propDef.props;
+export type ImageEvents = typeof __propDef.events;
+export type ImageSlots = typeof __propDef.slots;
+export default class Image extends SvelteComponentTyped<ImageProps, ImageEvents, ImageSlots> {
+}
+export {};

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

@@ -0,0 +1,50 @@
+<script lang="ts">
+  let {
+    editor,
+    ariaLabel = "Add inline LaTeX math",
+  } = $props();
+
+  function addInlineMath() {
+    const hasSelection = !$editor.state.selection.empty;
+
+    if (hasSelection) {
+      const latex = prompt("Enter inline math LaTeX expression:", "");
+      if (latex) {
+        return $editor
+          .chain()
+          .deleteSelection()
+          .insertInlineMath({ latex })
+          .focus()
+          .run();
+      }
+      return;
+    }
+
+    const latex = prompt("Enter inline math LaTeX expression:", "");
+    if (latex) {
+      return $editor.chain().insertInlineMath({ latex }).focus().run();
+    }
+  }
+</script>
+
+<button
+  type="button"
+  onclick={addInlineMath}
+  aria-label={ariaLabel}
+>
+  <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-math"
+    ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
+      d="M19 5h-7l-4 14l-3 -6h-2"
+    /><path d="M14 13l6 6" /><path d="M14 19l6 -6" /></svg
+  >
+</button>

package/dist/Toolbar/action-buttons/nodes/InlineMath.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 InlineMathProps = typeof __propDef.props;
+export type InlineMathEvents = typeof __propDef.events;
+export type InlineMathSlots = typeof __propDef.slots;
+export default class InlineMath extends SvelteComponentTyped<InlineMathProps, InlineMathEvents, InlineMathSlots> {
+}
+export {};

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+  interface Props {
+    editor: any;
+    type?: "bulletList" | "orderedList" | "taskList";
+    accenSoft?: boolean;
+    ariaLabel?: string;
+  }
+
+  let {
+    editor,
+    type = "bulletList",
+    accenSoft = false,
+    ariaLabel,
+  }: Props = $props();
+
+  const DEFAULT_ARIA_LABELS = {
+    bulletList: "Bullet list",
+    orderedList: "Ordered list",
+    taskList: "Task list",
+  };
+
+  if (!ariaLabel) {
+    ariaLabel = DEFAULT_ARIA_LABELS[type];
+  }
+
+  const icons = {
+    bulletList: `<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 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" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" 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" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" 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" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" 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" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" 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" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" 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" fill="currentColor"></path></svg>`,
+    orderedList: `<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="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" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" 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" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" 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" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" 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" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" 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" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" 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" fill="currentColor"></path></svg>`,
+    taskList: `<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="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" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" 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" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" 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" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" 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" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" 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" fill="currentColor"></path></svg>`,
+  };
+
+  const itemType = type === "taskList" ? "taskItem" : "listItem";
+</script>
+
+<button
+  type="button"
+  onclick={() => $editor.chain().focus().toggleList(type, itemType).run()}
+  class:is-active={$editor.isActive(type)}
+  class:accent-soft={accenSoft}
+  aria-label={ariaLabel}
+>
+  {@html icons[type]}
+</button>

package/dist/Toolbar/action-buttons/nodes/ListBtn.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 ListBtnProps = typeof __propDef.props;
+export type ListBtnEvents = typeof __propDef.events;
+export type ListBtnSlots = typeof __propDef.slots;
+export default class ListBtn extends SvelteComponentTyped<ListBtnProps, ListBtnEvents, ListBtnSlots> {
+}
+export {};

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

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { isNodeFullySelected } from "../../toolbar-utils";
+  
+  let { 
+    editor, 
+    nodesLimit,
+    currentNodeCount,
+    accenSoft = false, 
+    ariaLabel = "Media grid"
+  } = $props();
+
+  function addMediaGrid() {
+    const hasSelected = isNodeFullySelected($editor);
+
+    if (currentNodeCount >= nodesLimit && !hasSelected) {
+      return;
+    }
+
+    // Si el nodo está completamente seleccionado, reemplazarlo
+    if (hasSelected) {
+      $editor
+        .chain()
+        .deleteSelection() // Elimina el nodo seleccionado
+        .insertGrid({ cols: 2 })
+        .run();
+    } else {
+      // Comportamiento normal: insertar
+      $editor.chain().focus().insertGrid({ cols: 2 }).run();
+    }
+  }
+</script>
+
+<!-- Grid -->
+<button
+  type="button"
+  onclick={addMediaGrid}
+  aria-label={ariaLabel}
+  class:is-active={$editor.isActive("MediaGridComponent")}
+  class:accent-soft={accenSoft}
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    class="icon icon-tabler icons-tabler-filled icon-tabler-layout-grid"
+    ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
+      d="M9 3a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2z"
+    /><path
+      d="M19 3a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2z"
+    /><path
+      d="M9 13a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2z"
+    /><path
+      d="M19 13a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2z"
+    /></svg
+  >
+</button>

package/dist/Toolbar/action-buttons/nodes/MediaGridBtn.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 MediaGridBtnProps = typeof __propDef.props;
+export type MediaGridBtnEvents = typeof __propDef.events;
+export type MediaGridBtnSlots = typeof __propDef.slots;
+export default class MediaGridBtn extends SvelteComponentTyped<MediaGridBtnProps, MediaGridBtnEvents, MediaGridBtnSlots> {
+}
+export {};

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

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { isNodeFullySelected } from "../../toolbar-utils";
+
+  let {
+    editor,
+    nodesLimit,
+    currentNodeCount,
+    accenSoft = false,
+    ariaLabel = "Table",
+  } = $props();
+
+  function addTable() {
+    const hasSelected = isNodeFullySelected($editor);
+
+    if (currentNodeCount >= nodesLimit && !hasSelected) {
+      return;
+    }
+
+    // Si el nodo está completamente seleccionado, reemplazarlo
+    if (hasSelected) {
+      $editor
+        .chain()
+        .deleteSelection() // Elimina el nodo seleccionado
+        .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+        .run();
+    } else {
+      // Comportamiento normal: insertar
+      $editor
+        .chain()
+        .focus()
+        .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+        .run();
+    }
+  }
+</script>
+
+<!-- Table -->
+<button
+  type="button"
+  onclick={addTable}
+  aria-label={ariaLabel}
+  class:is-active={$editor.isActive("table")}
+  class:accent-soft={accenSoft}
+>
+  <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-table"
+    ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
+      d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14"
+    /><path d="M3 10h18" /><path d="M10 3v18" /></svg
+  >
+</button>

package/dist/Toolbar/action-buttons/nodes/Table.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 TableProps = typeof __propDef.props;
+export type TableEvents = typeof __propDef.events;
+export type TableSlots = typeof __propDef.slots;
+export default class Table extends SvelteComponentTyped<TableProps, TableEvents, TableSlots> {
+}
+export {};

package/dist/Toolbar/bubble-menus/BubbleMenuImage.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+  import { BubbleMenu } from "svelte-tiptap";
+
+  let { editor, accentSoft = false } = $props();
+
+  let imageUrlInputEl: HTMLInputElement = $state(null) as HTMLInputElement;
+  let imageUrlInputValue: string = $state(null);
+
+  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>
+
+<!-- Image Menu -->
+<div class="hidden">
+  <BubbleMenu
+    editor={$editor}
+    shouldShow={() => {
+      const emptySelection = $editor.state.selection.empty;
+      if (emptySelection) {
+        return false;
+      }
+      return $editor.isActive("image");
+    }}
+  >
+    <div data-test-id="bubble-menu" class="fl-bubble-menu flex">
+      <input
+        class="fl-editor-image-url-input"
+        type="text"
+        placeholder="Insert image url"
+        bind:this={imageUrlInputEl}
+        value={$editor.getAttributes("image").src}
+        oninput={(e: any) => {
+          // console.log(e.target.value);
+          imageUrlInputValue = e.target.value;
+        }}
+        onkeydown={(e: any) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            $editor
+              .chain()
+              .focus()
+              .setImage({ src: imageUrlInputEl?.value })
+              .run();
+          }
+        }}
+      />
+      <button
+        type="button"
+        aria-label="Insert image from url"
+        disabled={!imageUrlInputValue ||
+          imageUrlInputValue === $editor.getAttributes("image").src}
+        class:is-active={imageUrlInputValue &&
+          imageUrlInputValue !== $editor.getAttributes("image").src}
+        class:accent-soft={accentSoft}
+        onclick={() => {
+          $editor
+            .chain()
+            .focus()
+            .setImage({ src: imageUrlInputEl?.value })
+            .run();
+        }}
+      >
+        <svg
+          width="16"
+          height="16"
+          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="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"
+            fill="currentColor"
+            class="s-m1-89pp0R0Iu"
+          ></path></svg
+        >
+      </button>
+
+      <button
+        type="button"
+        onclick={() => setLink()}
+        class="fl-bubble-menu-mark-button"
+        class:is-active={$editor.isActive("link")}
+        class:accent-soft={accentSoft}
+        aria-label="Link"
+      >
+        <svg
+          width="16"
+          height="16"
+          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>
+    </div>
+  </BubbleMenu>
+</div>

package/dist/Toolbar/bubble-menus/BubbleMenuImage.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 BubbleMenuImageProps = typeof __propDef.props;
+export type BubbleMenuImageEvents = typeof __propDef.events;
+export type BubbleMenuImageSlots = typeof __propDef.slots;
+export default class BubbleMenuImage extends SvelteComponentTyped<BubbleMenuImageProps, BubbleMenuImageEvents, BubbleMenuImageSlots> {
+}
+export {};

package/dist/Toolbar/dropdown-buttons/HeadingsDropdownBtn.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { HEADINGS } from "../../utils";
+
+  const { editor, accentSoft = false, ariaLabel = "Headings",  onToggleDropdown, } = $props();
+
+  function handleClick(event: MouseEvent) {
+    onToggleDropdown?.(event, "headings-dropdown");
+  }
+</script>
+
+<!-- Headings dropdown btn  -->
+<button
+  type="button"
+  onclick={handleClick}
+  class:is-active={$editor.isActive("heading") || $editor.isActive("h1")}
+  class:accent-soft={accentSoft}
+  aria-label={ariaLabel}
+>
+  {#if $editor.isActive("heading")}
+    {#each HEADINGS as heading}
+      {#if $editor.isActive("heading", { level: Number(heading.level) })}
+        {@html heading.icon}
+      {/if}
+    {/each}
+  {:else if $editor.isActive("h1")}
+    {@html HEADINGS[0].icon}
+  {/if}
+
+  {#if !$editor.isActive("heading") && !$editor.isActive("h1")}
+    <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="M6 3C6.55228 3 7 3.44772 7 4V11H17V4C17 3.44772 17.4477 3 18 3C18.5523 3 19 3.44772 19 4V20C19 20.5523 18.5523 21 18 21C17.4477 21 17 20.5523 17 20V13H7V20C7 20.5523 6.55228 21 6 21C5.44772 21 5 20.5523 5 20V4C5 3.44772 5.44772 3 6 3Z"
+        fill="currentColor"
+      ></path></svg
+    >
+  {/if}
+
+  <svg
+    class="toogle-dropdown-button-icon"
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 20 12"
+  >
+    <defs>
+      <symbol id="dropdown-arrow" viewBox="0 0 10 6" fill="none">
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m1 1 4 4 4-4"
+        ></path>
+      </symbol>
+    </defs>
+    <use href="#dropdown-arrow"></use>
+  </svg>
+</button>

package/dist/Toolbar/dropdown-buttons/HeadingsDropdownBtn.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 HeadingsDropdownBtnProps = typeof __propDef.props;
+export type HeadingsDropdownBtnEvents = typeof __propDef.events;
+export type HeadingsDropdownBtnSlots = typeof __propDef.slots;
+export default class HeadingsDropdownBtn extends SvelteComponentTyped<HeadingsDropdownBtnProps, HeadingsDropdownBtnEvents, HeadingsDropdownBtnSlots> {
+}
+export {};