@flexiui/svelte-rich-text 0.0.18 → 0.0.20

package/dist/RichText.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
+	import { NodeLineHeight } from './extensions/NodeLineHeight';
   import {
     Mathematics,
     migrateMathStrings,
   } from "@tiptap/extension-mathematics";
   import { HEADINGS, rgbToHex } from "./utils";
   import "./styles.css";
-  import 'katex/dist/katex.min.css'
+  import "katex/dist/katex.min.css";
 
   import { onMount, onDestroy } from "svelte";
   import type { Readable } from "svelte/store";
 
   import { createEditor, Editor, EditorContent } from "svelte-tiptap";
 
+  import { Paragraph } from "@tiptap/extension-paragraph";
+  import { Heading } from "@tiptap/extension-heading";
   import StarterKit from "@tiptap/starter-kit";
   import Highlight from "@tiptap/extension-highlight";
   import TextAlign from "@tiptap/extension-text-align";
@@ -132,6 +135,7 @@
         },
       },
     }),
+    NodeLineHeight,
     ...customExtensions,
   ];
 
@@ -142,6 +146,7 @@
   let cleanup: () => void;
   let currentTriggerEl: HTMLElement | null = null;
   let activeDropdownType = $state(null);
+  let enterPressed = $state(false);
 
   const TEXT_COLOR_PALETTE = [
     "rgb(94, 23, 235)",
@@ -223,9 +228,114 @@
     editor = createEditor({
       extensions,
       content,
+      editorProps: {
+        attributes: {
+          class: "fl-rich-text-content-eee",
+        },
+        handleKeyDown: (view, event) => {
+  if (event.key === "Enter" && !event.ctrlKey) {
+    console.log("Enter");
+    enterPressed = true;
+    
+    setTimeout(() => {
+      enterPressed = false;
+      const { from } = view.state.selection;
+      
+      // Obtener el nodo de ProseMirror en la posición actual
+      const pos = view.state.doc.resolve(from);
+      const nodeBefore = pos.node(pos.depth);
+      const parentNode = pos.node(pos.depth - 1);
+      
+      console.log("Node type:", nodeBefore.type.name);
+      console.log("Parent node type:", parentNode?.type.name);
+      
+      // Solo ejecutar si estamos en un párrafo Y el padre no es una lista
+      const isInList = parentNode?.type.name === "listItem" || 
+                       parentNode?.type.name === "bulletList" || 
+                       parentNode?.type.name === "orderedList";
+      
+      if (nodeBefore.type.name === "paragraph" && !isInList) {
+        const domAtPos = view.domAtPos(from);
+        let element = domAtPos.node;
+        
+        if (element.nodeType === Node.TEXT_NODE) {
+          element = element.parentElement;
+        }
+        
+        if (element instanceof HTMLElement) {
+          const computedSize = window.getComputedStyle(element).fontSize;
+          const computedLineHeight = window.getComputedStyle(element).lineHeight;
+          console.log({ computedSize, computedLineHeight });
+
+          const lineHeightPx = parseFloat(computedLineHeight.replace("px", ""))
+          const fontSizePx = parseFloat(computedSize.replace("px", ""))
+
+          const lineHeightUnitless = lineHeightPx / fontSizePx;
+
+          console.log(lineHeightUnitless.toFixed(2)); // ej: "x.xx"
+
+          fontSize = Math.round(Number(computedSize.replace("px", "")));
+          $editor.chain().focus().unsetFontSize().run();
+
+          $editor.chain().focus().unsetNodeLineHeight().run();
+        }
+      }
+    }, 200);
+  }
+},
+      },
       onTransaction: ({ editor, transaction }) => {
         editorEvents.onTransaction({ editor, transaction });
         editor = editor;
+
+        if (enterPressed) {
+          console.log("Enter pressed");
+          return;
+        }
+
+        const { from } = editor.state.selection;
+
+        // Obtener el elemento DOM
+        const domAtPos = editor.view.domAtPos(from);
+        let element = domAtPos.node;
+
+        // Si es un text node, obtener su padre
+        if (element.nodeType === Node.TEXT_NODE) {
+          element = element.parentElement;
+        }
+
+        // Obtener el font-size computado
+        if (element instanceof HTMLElement) {
+          const computedSize = window.getComputedStyle(element).fontSize;
+          const computedLineHeight = window.getComputedStyle(element).lineHeight;
+          console.log("Get element font size:", computedSize);
+          console.log("Get element line height:", computedLineHeight);
+          const lineHeightPx = parseFloat(computedLineHeight.replace("px", ""))
+          const fontSizePx = parseFloat(computedSize.replace("px", ""))
+          const lineHeightUnitless = lineHeightPx / fontSizePx;
+
+          console.log(lineHeightUnitless.toFixed(2)); // ej: "x.xx"
+
+          // O desde Tiptap
+          const tiptapSize = editor.getAttributes("textStyle").fontSize;
+          const tiptapLineHeight = editor.getAttributes("textStyle").lineHeight;
+          console.log("Tiptap font size:", tiptapSize ? tiptapSize : "default");
+          console.log("Tiptap line height:", tiptapLineHeight ? tiptapLineHeight : "default");
+
+          if (tiptapSize) {
+            fontSize = Number(tiptapSize.replace("px", ""));
+          } else {
+            fontSize = Math.round(Number(computedSize.replace("px", "")));
+          }
+
+          if (tiptapLineHeight) {
+            lineHeight = Number(tiptapLineHeight.replace("px", ""));
+          } else {
+            lineHeight = Number(lineHeightUnitless.toFixed(2));
+          }
+
+
+        }
       },
 
       onBeforeCreate({ editor }) {
@@ -252,6 +362,7 @@
       onSelectionUpdate({ editor }) {
         editorEvents.onSelectionUpdate({ editor });
       },
+
       onFocus({ editor, event }) {
         editorEvents.onFocus({ editor, event });
       },
@@ -349,11 +460,45 @@
       return $editor.chain().insertInlineMath({ latex }).focus().run();
     }
   }
+
+  let fontSize = $state(16) as number;
+  let lineHeight = $state(null) as number;
+
+  function decrementFontSize() {
+    fontSize = fontSize - 1;
+    $editor
+      .chain()
+      .focus()
+      .setFontSize(fontSize + "px")
+      .run();
+  }
+
+  function incrementFontSize() {
+    fontSize = fontSize + 1;
+    $editor
+      .chain()
+      .focus()
+      .setFontSize(fontSize + "px")
+      .run();
+  }
+
+  function handleRangeInput(e: any) {
+    
+
+    
+      $editor
+        .chain()
+        .focus()
+        .setNodeLineHeight(e.target.value.toString())
+        .run();
+    
+  }
 </script>
 
 <div class="fl-rich-text {className}" class:editable>
   {#if editor}
     <header class="fl-rich-text-toolbar">
+      <!-- Undo/Redo -->
       <div role="group" class="fl-rich-text-toolbar-group">
         <button
           type="button"
@@ -399,7 +544,9 @@
         </button>
       </div>
 
+      <!-- Heading & list dropdowns -->
       <div class="fl-rich-text-toolbar-group">
+        <!-- Heading  -->
         <button
           type="button"
           onclick={(e) => toogleDropdown(e.currentTarget, "headings-dropdown")}
@@ -433,18 +580,12 @@
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 10 6"
-            ><path
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="m1 1 4 4 4-4"
-            ></path></svg
           >
+            <use href="#dropdown-arrow"></use>
+          </svg>
         </button>
-      </div>
 
-      <div role="group" class="fl-rich-text-toolbar-group">
+        <!-- List -->
         <button
           aria-label="List"
           type="button"
@@ -616,16 +757,15 @@
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 10 6"
-            ><path
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="m1 1 4 4 4-4"
-            ></path></svg
           >
+            <use href="#dropdown-arrow"></use>
+          </svg>
         </button>
+      </div>
 
+      <!-- Code block & blockquote -->
+      <div role="group" class="fl-rich-text-toolbar-group">
+        <!-- Code block -->
         <button
           aria-label="Code block"
           type="button"
@@ -658,6 +798,7 @@
           >
         </button>
 
+        <!-- Blockquote -->
         <button
           aria-label="Blockquote"
           type="button"
@@ -680,6 +821,44 @@
         </button>
       </div>
 
+      <!-- Font size editor -->
+      <div role="group" class="fl-rich-text-toolbar-group flex-auto">
+        <div class="fl-font-size-editor flex-auto">
+            <button
+              onclick={decrementFontSize}
+              class="fl-font-size-editor-button">-</button
+            >
+            <input type="text" bind:value={fontSize} />
+            <button
+              onclick={incrementFontSize}
+              class="fl-font-size-editor-button">+</button
+            >
+        </div>
+      </div>
+
+      <!-- Line height -->
+      <div role="group" class="fl-rich-text-toolbar-group">
+        <button 
+        class="fl-font-size-button" 
+        aria-label="Line height" 
+        type="button"
+        onclick={(e) => toogleDropdown(e.currentTarget, "line-height-dropdown")}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-line-height"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 8l3 -3l3 3" /><path d="M3 16l3 3l3 -3" /><path d="M6 5l0 14" /><path d="M13 6l7 0" /><path d="M13 12l7 0" /><path d="M13 18l7 0" /></svg>
+
+          <svg
+            class="toogle-dropdown-button-icon"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 10 6"
+          >
+            <use href="#dropdown-arrow"></use>
+          </svg>
+        </button>
+      </div>
+
+      <!-- Bold, Italic, Underline, etc. -->
       <div role="group" class="fl-rich-text-toolbar-group">
         <button
           type="button"
@@ -800,7 +979,9 @@
         </button>
       </div>
 
+      <!-- Link, special box, horizontal rule, etc. -->
       <div role="group" class="fl-rich-text-toolbar-group">
+        <!-- Link -->
         <button
           type="button"
           onclick={() => setLink()}
@@ -825,6 +1006,7 @@
           >
         </button>
 
+        <!-- Special box -->
         <button
           class="fl-bubble-menu-mark-button"
           class:is-active={$editor?.isActive("specialBox")}
@@ -835,6 +1017,7 @@
           <span class="special-box-icon">A</span>
         </button>
 
+        <!-- Horizontal rule -->
         <button
           type="button"
           onclick={() => $editor.chain().focus().setHorizontalRule().run()}
@@ -855,6 +1038,7 @@
           >
         </button>
 
+        <!-- Hard break -->
         <button
           type="button"
           onclick={() => $editor.chain().focus().setHardBreak().run()}
@@ -877,10 +1061,12 @@
           >
         </button>
 
+        <!-- Text color dropdown -->
         <button
           aria-label="Toggle text color dropdown"
           type="button"
-          onclick={(e) => toogleDropdown(e.currentTarget, "text-color-dropdown")}
+          onclick={(e) =>
+            toogleDropdown(e.currentTarget, "text-color-dropdown")}
         >
           <span
             class="fl-button-color-text-popover"
@@ -893,24 +1079,68 @@
             aria-hidden="true"
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
-            viewBox="0 0 10 6"
+            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>
+
+        <!-- Highlight dropdown -->
+        <button
+          class="fl-bubble-menu-mark-button"
+          type="button"
+          aria-label="Highlight"
+          onclick={(e) => toogleDropdown(e.currentTarget, "highlight")}
+        >
+          <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="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"
+              fill="currentColor"
+            ></path>
+          </svg>
+          <svg
+            class="toogle-dropdown-button-icon"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 10 6"
+          >
+            <path
               stroke="currentColor"
               stroke-linecap="round"
               stroke-linejoin="round"
               stroke-width="2"
               d="m1 1 4 4 4-4"
-            ></path></svg
-          >
+            ></path>
+          </svg>
         </button>
       </div>
 
+      <!-- Inline math -->
       <div role="group" class="fl-rich-text-toolbar-group">
         <button
           type="button"
           onclick={addInlineMath}
-          class={$editor.isActive("bold") ? "is-active" : ""}
-          aria-label="Bold"
+          aria-label="Add inline LaTeX math"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -930,7 +1160,9 @@
         </button>
       </div>
 
+      <!-- Text align, clear formatting, clear nodes -->
       <div role="group" class="fl-rich-text-toolbar-group">
+        <!-- Text align left -->
         <button
           type="button"
           onclick={() => $editor.chain().focus().toggleTextAlign("left").run()}
@@ -952,6 +1184,7 @@
           >
         </button>
 
+        <!-- Text align center -->
         <button
           type="button"
           onclick={() =>
@@ -974,6 +1207,7 @@
           >
         </button>
 
+        <!-- Text align right -->
         <button
           type="button"
           onclick={() => $editor.chain().focus().toggleTextAlign("right").run()}
@@ -995,6 +1229,7 @@
           >
         </button>
 
+        <!-- Clear formatting -->
         <button
           aria-label="Clear formatting"
           type="button"
@@ -1019,6 +1254,7 @@
           >
         </button>
 
+        <!-- Clear nodes -->
         <button
           type="button"
           onclick={() => $editor.chain().focus().clearNodes().run()}
@@ -1305,7 +1541,10 @@
           onblur={(event: any) => {
             const inclued = recentCustomColors.includes(event?.target?.value);
             if (!inclued) {
-              recentCustomColors = [...recentCustomColors, event?.target?.value];
+              recentCustomColors = [
+                ...recentCustomColors,
+                event?.target?.value,
+              ];
             }
             $editor.chain().focus().setColor(event?.target?.value).run();
             hideDropdown();
@@ -1313,7 +1552,10 @@
           onchange={(event: any) => {
             const inclued = recentCustomColors.includes(event?.target?.value);
             if (!inclued) {
-              recentCustomColors = [...recentCustomColors, event?.target?.value];
+              recentCustomColors = [
+                ...recentCustomColors,
+                event?.target?.value,
+              ];
             }
             $editor.chain().focus().setColor(event?.target?.value).run();
             hideDropdown();
@@ -1421,178 +1663,156 @@
         </button>
       {/if}
     </div>
-  {/if}
-</div>
-
-<style>
-  .flex-auto {
-    flex: auto;
-  }
-
-  .fl-rich-text {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    min-height: 56px;
-    border-radius: 10px;
-    overflow: hidden;
-    background-color: var(--bg-color);
-    color: var(--text-color);
-    border: 1px solid #eeeeee0d;
-    box-sizing: border-box;
-  }
-
-  .fl-rich-text-toolbar {
-    display: flex;
-    flex-wrap: nowrap;
-    overflow: auto;
-    align-items: center;
-    gap: var(--toolbar-gap);
-    padding: var(--toolbar-padding);
-  }
-
-  .fl-rich-text-toolbar-group {
-    display: flex;
-    flex-wrap: nowrap;
-    gap: var(--toolbar-gap);
-
-    button {
-      padding: 8px 8px;
-      flex: auto;
-      border: none;
-      background: rgba(255, 255, 255, 0.1);
-      border-radius: 8px;
-      color: var(--text-color);
-      font-size: 14px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      white-space: nowrap;
-      gap: 2px;
-      cursor: pointer;
-      line-height: 1;
-
-      & svg {
-        width: 16px;
-        height: 16px;
-
-        &.toogle-dropdown-button-icon {
-          width: 7px;
-          height: 7px;
-          margin-left: 4px;
-        }
-      }
-
-      &:disabled {
-        cursor: not-allowed;
-        opacity: 0.5;
-      }
-    }
-  }
-
-  button.is-active {
-    background: var(--purple);
-    color: white;
-  }
-
-  .special-box-icon {
-    width: 16px;
-    height: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 500;
-    border: none;
-    padding: 0px;
-    font-size: 12px;
-    border-radius: 3px;
-    outline: 1px dashed #818181;
-    scale: 1.1;
-  }
-
-  .fl-button-color-text-popover {
-    color: inherit;
-    width: 16px;
-    height: 16px;
-    border-radius: 100%;
-    border: 1px solid #d7d7d78a;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .fl-editor-color-palette {
-    width: 100%;
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    gap: 6px;
-    align-items: center;
-
-    .fl-color-swatch {
-      display: flex;
-      min-width: 17px;
-      border-radius: 100%;
-      align-items: center;
-      justify-content: center;
-      outline: 1px solid #83828238;
-      position: relative;
-      aspect-ratio: 1;
-      border: none;
-      padding: 0;
-      cursor: pointer;
-
-      &.active {
-        box-shadow: 0 0 0 2px #ffffff30;
-      }
-
-      &.unset-color::after {
-        content: "";
-        width: 2px;
-        height: 100%;
-        background: red;
-        position: absolute;
-        transform: rotate(30deg) scaleY(1.2);
-      }
-    }
+  {:else if activeDropdownType === "highlight"}
+    <div class="fl-editor-color-palette">
+      <button
+        class="fl-color-swatch fl-color-picker-btn"
+        aria-label="Highlight color picker"
+        type="button"
+      >
+        <input
+          type="color"
+          onblur={(event: any) => {
+            const inclued = recentCustomColors.includes(event?.target?.value);
+            if (!inclued) {
+              recentCustomColors = [
+                ...recentCustomColors,
+                event?.target?.value,
+              ];
+            }
+            $editor
+              .chain()
+              .focus()
+              .setHighlight({ color: event?.target?.value })
+              .run();
+            hideDropdown();
+          }}
+          onchange={(event: any) => {
+            const inclued = recentCustomColors.includes(event?.target?.value);
+            if (!inclued) {
+              recentCustomColors = [
+                ...recentCustomColors,
+                event?.target?.value,
+              ];
+            }
 
-    input[type="color"] {
-      display: inline-flex;
-      vertical-align: bottom;
-      border: none;
-      border-radius: var(--radius);
-      padding: 0;
-      min-width: 17px;
-      max-height: 17px;
-      aspect-ratio: 1;
-      background: transparent;
-      width: auto;
-      border-radius: 100%;
-
-      &::-webkit-color-swatch-wrapper {
-        padding: 0;
-      }
+            $editor
+              .chain()
+              .focus()
+              .setHighlight({ color: event?.target?.value })
+              .run();
+            hideDropdown();
+          }}
+          value={rgbToHex($editor?.getAttributes("textStyle")?.color)}
+          data-testid="setHiglight"
+          id="colorPicker"
+        />
+      </button>
 
-      &::-webkit-color-swatch {
-        border: 0;
-        border-radius: var(--radius);
-      }
+      {#each HIGHLIGHT_COLOR_PALETTE as color}
+        <button
+          class="fl-color-swatch"
+          class:active={$editor?.isActive("textStyle", {
+            color: color,
+          })}
+          onclick={() => {
+            $editor?.chain().focus().setHighlight({ color }).run();
+            hideDropdown();
+          }}
+          style="background-color: {color};"
+          aria-label={color}
+        >
+        </button>
+      {/each}
 
-      &::-moz-color-swatch {
-        border: 0;
-        border-radius: var(--radius);
-      }
-    }
+      <button
+        class="fl-color-swatch unset-color"
+        onclick={() => {
+          $editor?.chain().focus().unsetColor().run();
+          hideDropdown();
+        }}
+        style="background-color: #ffffff;"
+        aria-label="Unset color"
+      >
+      </button>
 
-    .fl-color-picker-btn {
-      cursor: pointer;
-      position: relative;
-      background: conic-gradient(in hsl longer hue, red 0 100%);
+      {#if recentCustomColors.length > 0}
+        {#each recentCustomColors as color}
+          <button
+            class="fl-color-swatch"
+            class:active={$editor?.isActive("textStyle", {
+              color: color,
+            })}
+            onclick={() => {
+              $editor?.chain().focus().setHighlight({ color }).run();
+              hideDropdown();
+            }}
+            style="background-color: {color};"
+            aria-label={color}
+          >
+          </button>
+        {/each}
+      {:else}
+        <button
+          class="fl-color-swatch"
+          style="outline: 1px dashed #ffffff66;background: transparent;"
+          onclick={() => alert("Not implemented yet")}
+          aria-label="Add new color"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="size-6"
+            style="
+                  width: 11px;
+                  height: 11px;
+              "
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M12 4.5v15m7.5-7.5h-15"
+            ></path>
+          </svg>
+        </button>
 
-      & input {
-        opacity: 0;
-      }
-    }
-  }
-</style>
+        <button
+          class="fl-color-swatch"
+          style="outline: 1px dashed #ffffff66;background: transparent;"
+          onclick={() => alert("Not implemented yet")}
+          aria-label="Add new color"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="size-6"
+            style="
+                  width: 11px;
+                  height: 11px;
+              "
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M12 4.5v15m7.5-7.5h-15"
+            ></path>
+          </svg>
+        </button>
+      {/if}
+    </div>
+  {:else if activeDropdownType === "line-height-dropdown"}
+   <div class="fl-range-element">
+     <span class="fl-range-element-value">
+       {lineHeight.toFixed(2)}
+     </span>
+     <input oninput={handleRangeInput} type="range" min="0.5" max="4" step="0.01" bind:value={lineHeight}>
+   </div>
+   
+  {/if}
+</div>

package/dist/RichText.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import "./styles.css";
-import 'katex/dist/katex.min.css';
+import "katex/dist/katex.min.css";
 declare const __propDef: {
     props: Record<string, never>;
     events: {

package/dist/extensions/NodeLineHeight.d.ts

@@ -0,0 +1,10 @@
+import { Extension } from '@tiptap/core';
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        lineHeight: {
+            setNodeLineHeight: (lineHeight: string) => ReturnType;
+            unsetNodeLineHeight: () => ReturnType;
+        };
+    }
+}
+export declare const NodeLineHeight: Extension<any, any>;

package/dist/extensions/NodeLineHeight.js

@@ -0,0 +1,41 @@
+import { Extension } from '@tiptap/core';
+export const NodeLineHeight = Extension.create({
+    name: 'nodeLineHeight',
+    addOptions() {
+        return {
+            types: ['paragraph', 'heading'], // Aplica a párrafos y encabezados
+            defaultLineHeight: 'normal',
+        };
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    lineHeight: {
+                        default: this.options.defaultLineHeight,
+                        parseHTML: element => element.style.lineHeight || this.options.defaultLineHeight,
+                        renderHTML: attributes => {
+                            if (!attributes.lineHeight || attributes.lineHeight === this.options.defaultLineHeight) {
+                                return {};
+                            }
+                            return {
+                                style: `line-height: ${attributes.lineHeight}`,
+                            };
+                        },
+                    },
+                },
+            },
+        ];
+    },
+    addCommands() {
+        return {
+            setNodeLineHeight: (lineHeight) => ({ commands }) => {
+                return this.options.types.every((type) => commands.updateAttributes(type, { lineHeight }));
+            },
+            unsetNodeLineHeight: () => ({ commands }) => {
+                return this.options.types.every((type) => commands.resetAttributes(type, 'lineHeight'));
+            },
+        };
+    },
+});

package/dist/styles.css

@@ -7,7 +7,8 @@
     --gray-2: #e0e0e0;
     --gray-3: #c0c0c0;
     --toolbar-gap: 5px;
-    --toolbar-padding: 5px;
+    --toolbar-padding: 6px;
+    --fl-editor-radius: 12px;
 }
 
 /* Basic editor styles */
@@ -182,6 +183,7 @@
   min-height: 56px;
   padding: 2rem;
   background: #242424;
+  border-radius: 0 0 var(--fl-editor-radius) var(--fl-editor-radius);
 }
 
 .fl-toolbar-dropdown-panel {
@@ -211,3 +213,234 @@
     background-color: #d4d6ff3c;
   }
 }
+
+
+  .flex-auto {
+    flex: auto;
+  }
+
+  .fl-rich-text {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    min-height: 56px;
+    background-color: var(--fl-bg-color, #242424);
+    color: var(--text-color);
+    box-sizing: border-box;
+    border-radius: var(--fl-editor-radius);
+  }
+
+  .fl-rich-text-toolbar {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow: auto;
+    align-items: center;
+    gap: var(--toolbar-gap);
+    padding: var(--toolbar-padding);
+    position: sticky;
+    top: var(--sticky-position, 0);
+    z-index: var(--fl-toolbar-z-index, 10);
+    background: var(--fl-toolbar-bg, #242424);
+    border-radius: var(--fl-editor-radius);
+  }
+
+  .fl-rich-text-toolbar-group {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: var(--toolbar-gap);
+
+    button {
+      padding: 8px 8px;
+      flex: auto;
+      border: none;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 8px;
+      color: var(--text-color);
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      white-space: nowrap;
+      gap: 2px;
+      cursor: pointer;
+      line-height: 1;
+      min-height: 32px;
+
+      &.fl-font-size-button {
+        font-size: 14px;
+      }
+
+      & svg {
+        width: 16px;
+        height: 16px;
+
+        &.toogle-dropdown-button-icon {
+          width: 7px;
+          height: 7px;
+          margin-left: 4px;
+        }
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+    }
+  }
+
+  button.is-active {
+    background: var(--purple);
+    color: white;
+  }
+
+  .special-box-icon {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 500;
+    border: none;
+    padding: 0px;
+    font-size: 12px;
+    border-radius: 3px;
+    outline: 1px dashed #818181;
+    scale: 1.1;
+  }
+
+  .fl-button-color-text-popover {
+    color: inherit;
+    width: 16px;
+    height: 16px;
+    border-radius: 100%;
+    border: 1px solid #d7d7d78a;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .fl-editor-color-palette {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 6px;
+    align-items: center;
+
+    .fl-color-swatch {
+      display: flex;
+      min-width: 17px;
+      border-radius: 100%;
+      align-items: center;
+      justify-content: center;
+      outline: 1px solid #83828238;
+      position: relative;
+      aspect-ratio: 1;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+
+      &.active {
+        box-shadow: 0 0 0 2px #ffffff30;
+      }
+
+      &.unset-color::after {
+        content: "";
+        width: 2px;
+        height: 100%;
+        background: red;
+        position: absolute;
+        transform: rotate(30deg) scaleY(1.2);
+      }
+    }
+
+    input[type="color"] {
+      display: inline-flex;
+      vertical-align: bottom;
+      border: none;
+      border-radius: var(--radius);
+      padding: 0;
+      min-width: 17px;
+      max-height: 17px;
+      aspect-ratio: 1;
+      background: transparent;
+      width: auto;
+      border-radius: 100%;
+
+      &::-webkit-color-swatch-wrapper {
+        padding: 0;
+      }
+
+      &::-webkit-color-swatch {
+        border: 0;
+        border-radius: var(--radius);
+      }
+
+      &::-moz-color-swatch {
+        border: 0;
+        border-radius: var(--radius);
+      }
+    }
+
+    .fl-color-picker-btn {
+      cursor: pointer;
+      position: relative;
+      background: conic-gradient(in hsl longer hue, red 0 100%);
+
+      & input {
+        opacity: 0;
+      }
+    }
+  }
+
+  .fl-font-size-editor {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 0 8px;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.1);
+
+    & button {
+      background: transparent;
+      border: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 2px;
+      backdrop-filter: blur(5px);
+      border-radius: 8px;
+      cursor: pointer;
+
+      & svg {
+        width: 18px;
+        height: 18px;
+      }
+    }
+
+    input {
+      width: 32px;
+      text-align: center;
+      border: none;
+      background: transparent;
+      color: var(--text-color);
+      font-size: 14px;
+      padding: 0;
+    }
+  }
+
+  .fl-range-element {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .fl-range-element input {
+    accent-color: #ffffff;
+  }
+
+  .fl-range-element-value {
+    padding: 0 6px;
+    font-size: 14px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flexiui/svelte-rich-text",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "A lightweight and flexible rich text editor component for Svelte",
   "keywords": [
     "svelte",