@flexiui/svelte-rich-text 0.0.60 → 0.0.61

package/dist/RichText.svelte.d.ts

@@ -1,6 +1,22 @@
 import { SvelteComponentTyped } from "svelte";
 import "./styles.css";
 import "katex/dist/katex.min.css";
+type ToolbarButton = string | {
+    type?: string;
+    tooltip?: string;
+    icon?: string;
+    name?: string;
+};
+type ToolbarSelect = {
+    select: ToolbarButton[];
+    name?: string;
+    tooltip?: string;
+    icon?: string;
+    type?: string;
+};
+type ToolbarItem = ToolbarButton | ToolbarSelect;
+type ToolbarConfig = ToolbarItem[] | ToolbarItem[][];
+type BubbleMenuConfig = ToolbarItem[] | ToolbarItem[][];
 export interface Props {
     id?: string;
     className?: string;
@@ -10,7 +26,14 @@ export interface Props {
         content: any[];
     } | null;
     nodesLimit?: number;
+    charactersLimit?: number;
     limitWarningMessage?: string;
+    showToolbar?: boolean;
+    toolbarAlign?: string;
+    semanticHeadings?: boolean;
+    uniqueH1?: boolean;
+    toolbarConfig?: ToolbarConfig;
+    bubbleMenuConfig?: BubbleMenuConfig;
     customExtensions?: any[];
     editorEvents?: {
         onTransaction?: (params: any) => void;
@@ -35,7 +58,12 @@ export interface Props {
         toolbarBgColor?: string;
         toolbarTextColor?: string;
         toolbarPadding?: string;
+        toolbarJustifyContent?: string;
         toolbarGap?: string;
+        toolbarBtnPadding?: string;
+        toolbarBtnRadius?: string;
+        toolbarBtnMinHeight?: string;
+        toolbarBtnMinWidth?: string;
         docMaxWidth?: string;
         docPadding?: string;
         docBg?: string;

package/dist/Toolbar/RenderToolbarButton.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+  import Undo from "./action-buttons/Undo.svelte";
+  import Redo from "./action-buttons/Redo.svelte";
+  import ClearFormatting from "./action-buttons/ClearFormatting.svelte";
+  import ClearNodes from "./action-buttons/ClearNodes.svelte";
+
+  import HeadingsDropdownBtn from "./dropdown-buttons/HeadingsDropdownBtn.svelte";
+  import ListsDropdownBtn from "./dropdown-buttons/ListsDropdownBtn.svelte";
+  import LineHeightDropdownBtn from "./dropdown-buttons/LineHeightDropdownBtn.svelte";
+
+  import CodeBlock from "./action-buttons/nodes/CodeBlock.svelte";
+  import Blockquote from "./action-buttons/nodes/Blockquote.svelte";
+  import HardBreakBtn from "./action-buttons/nodes/HardBreakBtn.svelte";
+  import HorizontalRule from "./action-buttons/nodes/HorizontalRule.svelte";
+  import Image from "./action-buttons/nodes/Image.svelte";
+  import Audio from "./action-buttons/nodes/Audio.svelte";
+  import InlineMath from "./action-buttons/nodes/InlineMath.svelte";
+  import MediaGridBtn from "./action-buttons/nodes/MediaGridBtn.svelte";
+  import Table from "./action-buttons/nodes/Table.svelte";
+
+  import TextAlign from "./action-buttons/marks/TextAlign.svelte";
+  import FontSize from "./action-buttons/marks/FontSize.svelte";
+  import SpecialBox from "./action-buttons/marks/SpecialBox.svelte";
+  import Bold from "./action-buttons/marks/Bold.svelte";
+  import CodeMarkBtn from "./action-buttons/marks/CodeMarkBtn.svelte";
+  import Italic from "./action-buttons/marks/Italic.svelte";
+  import LinkBtn from "./action-buttons/marks/LinkBtn.svelte";
+  import Strike from "./action-buttons/marks/Strike.svelte";
+  import Underline from "./action-buttons/marks/Underline.svelte";
+  import TextColorDropdownBtn from "./dropdown-buttons/TextColorDropdownBtn.svelte";
+  import HighlightDropdownBtn from "./dropdown-buttons/HighlightDropdownBtn.svelte";
+  
+  let {
+    type,
+    editor,
+    nodeCounters,
+    nodesLimit,
+    currentNodeCount,
+    accentSoft,
+    fontSize,
+    onToggleDropdown,
+  } = $props();
+
+  function handleClick(event: MouseEvent, name: string) {
+    onToggleDropdown?.(event, name);
+  }
+</script>
+
+<!-- [] Todo: Mejorar el render para evitar tanto if. 
+    A lo mejor crear un "diccionario/mapa" renderizar según el type.
+-->
+{#if type === "undo"}
+  <Undo {editor} />
+{:else if type === "redo"}
+  <Redo {editor} />
+{:else if type === "headings"}
+  <HeadingsDropdownBtn
+    {editor}
+    {accentSoft}
+    onToggleDropdown={(e: MouseEvent, dropdownName: string) => {
+      handleClick(e, dropdownName);
+    }}
+  />
+{:else if type === "lists"}
+  <ListsDropdownBtn
+    {editor}
+    {accentSoft}
+    onToggleDropdown={(e: MouseEvent, dropdownName: string) => {
+      handleClick(e, dropdownName);
+    }}
+  />
+{:else if type === "codeBlock"}
+  <CodeBlock {editor} accenSoft={accentSoft} />
+{:else if type === "blockquote"}
+  <Blockquote {editor} accenSoft={accentSoft} />
+{:else if type === "fontSize"}
+  <FontSize {editor} accenSoft={accentSoft} {fontSize} />
+{:else if type === "lineHeight"}
+  <LineHeightDropdownBtn
+    onToggleDropdown={(e: MouseEvent, dropdownName: string) => {
+      handleClick(e, dropdownName);
+    }}
+  />
+{:else if type === "horizontalRule"}
+  <HorizontalRule {editor} />
+{:else if type === "hardBreak"}
+  <HardBreakBtn {editor} />
+{:else if type === "inlineMath"}
+  <InlineMath {editor} />
+{:else if type === "image"}
+  <Image {editor} {nodesLimit} {currentNodeCount} accenSoft={accentSoft} />
+{:else if type === "audio"}
+  <Audio {editor} {nodesLimit} {currentNodeCount} accenSoft={accentSoft} />
+{:else if type === "mediaGrid"}
+  <MediaGridBtn
+    {editor}
+    {nodesLimit}
+    {currentNodeCount}
+    accenSoft={accentSoft}
+  />
+{:else if type === "table"}
+  <Table {editor} {nodesLimit} {currentNodeCount} accenSoft={accentSoft} />
+{:else if type === "textAlignLeft"}
+  <TextAlign position="left" {editor} accenSoft={accentSoft} />
+{:else if type === "textAlignCenter"}
+  <TextAlign position="center" {editor} accenSoft={accentSoft} />
+{:else if type === "textAlignRight"}
+  <TextAlign position="right" {editor} accenSoft={accentSoft} />
+{:else if type === "clearFormatting"}
+  <ClearFormatting {editor} />
+{:else if type === "clearNodes"}
+  <ClearNodes {editor} />
+
+{:else if type === "bold"}
+  <Bold {editor} accenSoft={accentSoft} />
+{:else if type === "italic"}
+  <Italic {editor} accenSoft={accentSoft} />
+{:else if type === "underline"}
+  <Underline {editor} accenSoft={accentSoft} />
+{:else if type === "strike"}
+  <Strike {editor} accenSoft={accentSoft} />
+{:else if type === "code"}
+  <CodeMarkBtn {editor} accenSoft={accentSoft} />
+{:else if type === "link"}
+  <LinkBtn {editor} accenSoft={accentSoft} />
+{:else if type === "specialBox"}
+  <SpecialBox {editor} accentSoft={accentSoft} />
+
+{:else if type === "highlight"}
+  <HighlightDropdownBtn
+    onToggleDropdown={(e, dropdownName) => {
+      handleClick(e, dropdownName);
+    }}
+  />
+{:else if type === "textColor"}
+  <TextColorDropdownBtn
+    {editor}
+    onToggleDropdown={(e, dropdownName) => {
+      handleClick(e, dropdownName);
+    }}
+  />
+
+{:else if type === "hardBreak"}
+  <HardBreakBtn {editor} />
+{:else}
+  <p>Render {type}</p>
+{/if}

package/dist/Toolbar/RenderToolbarButton.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 RenderToolbarButtonProps = typeof __propDef.props;
+export type RenderToolbarButtonEvents = typeof __propDef.events;
+export type RenderToolbarButtonSlots = typeof __propDef.slots;
+export default class RenderToolbarButton extends SvelteComponentTyped<RenderToolbarButtonProps, RenderToolbarButtonEvents, RenderToolbarButtonSlots> {
+}
+export {};

package/dist/Toolbar/action-buttons/ClearFormatting.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  const {
+    editor,
+    accenSoft = false,
+    ariaLabel = "Clear formatting",
+  } = $props();
+</script>
+
+<button
+  aria-label={ariaLabel}
+  type="button"
+  onclick={() => $editor.chain().focus().unsetAllMarks().run()}
+>
+  <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-clear-formatting"
+    ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
+      d="M17 15l4 4m0 -4l-4 4"
+    /><path d="M7 6v-1h11v1" /><path d="M7 19l4 0" /><path
+      d="M13 5l-4 14"
+    /></svg
+  >
+</button>

package/dist/Toolbar/action-buttons/ClearFormatting.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 ClearFormattingProps = typeof __propDef.props;
+export type ClearFormattingEvents = typeof __propDef.events;
+export type ClearFormattingSlots = typeof __propDef.slots;
+export default class ClearFormatting extends SvelteComponentTyped<ClearFormattingProps, ClearFormattingEvents, ClearFormattingSlots> {
+}
+export {};

package/dist/Toolbar/action-buttons/ClearNodes.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  const { 
+    editor,
+    accenSoft = false,
+    ariaLabel = "Clear nodes",
+  } = $props();
+</script>
+
+<button
+type="button"
+onclick={() => $editor.chain().focus().clearNodes().run()}
+aria-label={ariaLabel}
+>
+    Clear
+</button>

package/dist/Toolbar/action-buttons/ClearNodes.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 ClearNodesProps = typeof __propDef.props;
+export type ClearNodesEvents = typeof __propDef.events;
+export type ClearNodesSlots = typeof __propDef.slots;
+export default class ClearNodes extends SvelteComponentTyped<ClearNodesProps, ClearNodesEvents, ClearNodesSlots> {
+}
+export {};

package/dist/Toolbar/action-buttons/MergeCellsBtn.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  const { editor, ariaLabel = "Merge cells" } = $props();
+</script>
+
+<button
+  class="fl-bubble-menu-mark-button"
+  type="button"
+  aria-label={ariaLabel}
+  title={ariaLabel}
+  onclick={() => $editor?.chain().focus().mergeCells().run()}
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="16"
+    height="16"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    style="opacity:1;"
+    ><path d="M12 21v-6m0-6V3M3 15h18M3 9h18"></path><rect
+      width="18"
+      height="18"
+      x="3"
+      y="3"
+      rx="2"
+    ></rect></svg
+  >
+</button>

package/dist/Toolbar/action-buttons/MergeCellsBtn.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 MergeCellsBtnProps = typeof __propDef.props;
+export type MergeCellsBtnEvents = typeof __propDef.events;
+export type MergeCellsBtnSlots = typeof __propDef.slots;
+export default class MergeCellsBtn extends SvelteComponentTyped<MergeCellsBtnProps, MergeCellsBtnEvents, MergeCellsBtnSlots> {
+}
+export {};

package/dist/Toolbar/action-buttons/Redo.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  const { editor, accenSoft = false, ariaLabel = "Redo" } = $props();
+</script>
+
+<button
+  type="button"
+  onclick={() => $editor.chain().focus().redo().run()}
+  disabled={!$editor.can().chain().focus().redo().run()}
+  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="M15.7071 2.29289C15.3166 1.90237 14.6834 1.90237 14.2929 2.29289C13.9024 2.68342 13.9024 3.31658 14.2929 3.70711L17.5858 7H9.5C7.77609 7 6.12279 7.68482 4.90381 8.90381C3.68482 10.1228 3 11.7761 3 13.5C3 14.3536 3.16813 15.1988 3.49478 15.9874C3.82144 16.7761 4.30023 17.4926 4.90381 18.0962C6.12279 19.3152 7.77609 20 9.5 20H13C13.5523 20 14 19.5523 14 19C14 18.4477 13.5523 18 13 18H9.5C8.30653 18 7.16193 17.5259 6.31802 16.682C5.90016 16.2641 5.56869 15.768 5.34254 15.2221C5.1164 14.6761 5 14.0909 5 13.5C5 12.3065 5.47411 11.1619 6.31802 10.318C7.16193 9.47411 8.30653 9 9.5 9H17.5858L14.2929 12.2929C13.9024 12.6834 13.9024 13.3166 14.2929 13.7071C14.6834 14.0976 15.3166 14.0976 15.7071 13.7071L20.7071 8.70711C21.0976 8.31658 21.0976 7.68342 20.7071 7.29289L15.7071 2.29289Z"
+      fill="currentColor"
+    ></path></svg
+  >
+</button>

package/dist/Toolbar/action-buttons/Redo.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 RedoProps = typeof __propDef.props;
+export type RedoEvents = typeof __propDef.events;
+export type RedoSlots = typeof __propDef.slots;
+export default class Redo extends SvelteComponentTyped<RedoProps, RedoEvents, RedoSlots> {
+}
+export {};

package/dist/Toolbar/action-buttons/SplitCellBtn.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  const { editor, ariaLabel = "Split cell" } = $props();
+</script>
+
+<button
+  class="fl-bubble-menu-mark-button"
+  type="button"
+  aria-label={ariaLabel}
+  title={ariaLabel}
+  onclick={() => $editor?.chain().focus().splitCell().run()}
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="16"
+    height="16"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    style="opacity:1;"
+    ><path d="M12 15V9m-9 6h18M3 9h18" /><rect
+      width="18"
+      height="18"
+      x="3"
+      y="3"
+      rx="2"
+    /></svg
+  >
+</button>

package/dist/Toolbar/action-buttons/SplitCellBtn.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 SplitCellBtnProps = typeof __propDef.props;
+export type SplitCellBtnEvents = typeof __propDef.events;
+export type SplitCellBtnSlots = typeof __propDef.slots;
+export default class SplitCellBtn extends SvelteComponentTyped<SplitCellBtnProps, SplitCellBtnEvents, SplitCellBtnSlots> {
+}
+export {};

package/dist/Toolbar/action-buttons/Undo.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  const { 
+    editor,
+    accenSoft = false,
+    ariaLabel = "Undo",
+  } = $props();
+</script>
+
+<button
+  type="button"
+  onclick={() => $editor.chain().focus().undo().run()}
+  disabled={!$editor.can().chain().focus().undo().run()}
+  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="M9.70711 3.70711C10.0976 3.31658 10.0976 2.68342 9.70711 2.29289C9.31658 1.90237 8.68342 1.90237 8.29289 2.29289L3.29289 7.29289C2.90237 7.68342 2.90237 8.31658 3.29289 8.70711L8.29289 13.7071C8.68342 14.0976 9.31658 14.0976 9.70711 13.7071C10.0976 13.3166 10.0976 12.6834 9.70711 12.2929L6.41421 9H14.5C15.0909 9 15.6761 9.1164 16.2221 9.34254C16.768 9.56869 17.2641 9.90016 17.682 10.318C18.0998 10.7359 18.4313 11.232 18.6575 11.7779C18.8836 12.3239 19 12.9091 19 13.5C19 14.0909 18.8836 14.6761 18.6575 15.2221C18.4313 15.768 18.0998 16.2641 17.682 16.682C17.2641 17.0998 16.768 17.4313 16.2221 17.6575C15.6761 17.8836 15.0909 18 14.5 18H11C10.4477 18 10 18.4477 10 19C10 19.5523 10.4477 20 11 20H14.5C15.3536 20 16.1988 19.8319 16.9874 19.5052C17.7761 19.1786 18.4926 18.6998 19.0962 18.0962C19.6998 17.4926 20.1786 16.7761 20.5052 15.9874C20.8319 15.1988 21 14.3536 21 13.5C21 12.6464 20.8319 11.8012 20.5052 11.0126C20.1786 10.2239 19.6998 9.50739 19.0962 8.90381C18.4926 8.30022 17.7761 7.82144 16.9874 7.49478C16.1988 7.16813 15.3536 7 14.5 7H6.41421L9.70711 3.70711Z"
+      fill="currentColor"
+    ></path></svg
+  >
+</button>

package/dist/Toolbar/action-buttons/Undo.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 UndoProps = typeof __propDef.props;
+export type UndoEvents = typeof __propDef.events;
+export type UndoSlots = typeof __propDef.slots;
+export default class Undo extends SvelteComponentTyped<UndoProps, UndoEvents, UndoSlots> {
+}
+export {};

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+  const { editor, accenSoft = false, ariaLabel = "Bold" } = $props();
+</script>
+
+<!-- Bold -->
+<button
+  type="button"
+  onclick={() => $editor.chain().focus().toggleBold().run()}
+  disabled={!$editor.can().chain().focus().toggleBold().run()}
+  class="fl-bubble-menu-mark-button"
+  class:is-active={$editor.isActive("bold")}
+  class:accent-soft={accenSoft}
+  aria-label={ariaLabel}
+>
+  <svg
+    width="24"
+    height="24"
+    class="fl-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 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"
+      fill="currentColor"
+    ></path></svg
+  >
+</button>

package/dist/Toolbar/action-buttons/marks/Bold.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 BoldProps = typeof __propDef.props;
+export type BoldEvents = typeof __propDef.events;
+export type BoldSlots = typeof __propDef.slots;
+export default class Bold extends SvelteComponentTyped<BoldProps, BoldEvents, BoldSlots> {
+}
+export {};

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+  const { editor, accenSoft = false, ariaLabel = "Code mark" } = $props();
+</script>
+
+<!-- Code -->
+<button
+  type="button"
+  onclick={() => $editor.chain().focus().toggleCode().run()}
+  disabled={!$editor.can().chain().focus().toggleCode().run()}
+  class="fl-bubble-menu-mark-button"
+  class:is-active={$editor.isActive("code")}
+  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.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"
+      fill="currentColor"
+    ></path><path
+      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"
+      fill="currentColor"
+    ></path><path
+      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"
+      fill="currentColor"
+    ></path></svg
+  >
+</button>

package/dist/Toolbar/action-buttons/marks/CodeMarkBtn.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 CodeMarkBtnProps = typeof __propDef.props;
+export type CodeMarkBtnEvents = typeof __propDef.events;
+export type CodeMarkBtnSlots = typeof __propDef.slots;
+export default class CodeMarkBtn extends SvelteComponentTyped<CodeMarkBtnProps, CodeMarkBtnEvents, CodeMarkBtnSlots> {
+}
+export {};

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

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import { isNodeFullySelected } from "../../toolbar-utils";
+
+  let { 
+    editor, 
+    accenSoft = false,
+    ariaLabel = "Blockquote",
+    fontSize
+  } = $props();
+
+  const aplyToNode = $derived.by(() => {
+    return $editor.state.selection.empty || isNodeFullySelected($editor);
+  })
+
+  function decrementFontSize() {
+    fontSize = fontSize - 1;
+
+    if (aplyToNode) {
+      $editor
+        .chain()
+        .focus()
+        .setNodeFontSize(fontSize + "px")
+        .run();
+    } else {
+      $editor
+        .chain()
+        .focus()
+        .setFontSize(fontSize + "px")
+        .run();
+    }
+  }
+
+  function incrementFontSize() {
+    fontSize = Number(fontSize) + 1;
+    
+    if (aplyToNode) {
+      $editor
+        .chain()
+        .focus()
+        .setNodeFontSize(fontSize + "px")
+        .run();
+    } else {
+      $editor
+        .chain()
+        .focus()
+        .setFontSize(fontSize + "px")
+        .run();
+    }
+  }
+  
+</script>
+
+<div class="fl-font-size-editor">
+  <button
+    type="button"
+    aria-label="Decrease font size"
+    onclick={decrementFontSize}
+    class="fl-font-size-editor-button"
+  >
+    <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-minus"
+      ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
+        d="M5 12l14 0"
+      /></svg
+    >
+  </button>
+  <input type="text" bind:value={fontSize} />
+  <button
+    type="button"
+    aria-label="Increase font size"
+    onclick={incrementFontSize}
+    class="fl-font-size-editor-button"
+  >
+    <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-plus"
+      ><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
+        d="M12 5l0 14"
+      /><path d="M5 12l14 0" /></svg
+    >
+  </button>
+</div>