@flexiui/svelte-rich-text 0.0.21 → 0.0.23

package/dist/RichText.svelte

@@ -13,8 +13,6 @@
 
   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";
@@ -79,20 +77,12 @@
       // Disable an included extension
       trailingNode: false,
       link: false,
-      // bulletList: false,
-      // listItem: false,
-      // orderedList: false,
-      // listKeymap: false,
+      bulletList: false,
+      listItem: false,
+      orderedList: false,
+      listKeymap: false,
     }),
-    Underline,
     EnhancedLink,
-    Link.configure({
-      openOnClick: false,
-      HTMLAttributes: {
-        target: "_self",
-        rel: "noopener noreferrer",
-      },
-    }),
     ListKit,
     TextAlign.configure({
       types: [
@@ -234,7 +224,6 @@
         },
         handleKeyDown: (view, event) => {
   if (event.key === "Enter" && !event.ctrlKey) {
-    console.log("Enter");
     enterPressed = true;
     
     setTimeout(() => {
@@ -246,8 +235,8 @@
       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);
+      // 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" || 
@@ -265,14 +254,14 @@
         if (element instanceof HTMLElement) {
           const computedSize = window.getComputedStyle(element).fontSize;
           const computedLineHeight = window.getComputedStyle(element).lineHeight;
-          console.log({ computedSize, computedLineHeight });
+          // 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"
+          // console.log(lineHeightUnitless.toFixed(2)); // ej: "x.xx"
 
           fontSize = Math.round(Number(computedSize.replace("px", "")));
           $editor.chain().focus().unsetFontSize().run();
@@ -289,7 +278,7 @@
         editor = editor;
 
         if (enterPressed) {
-          console.log("Enter pressed");
+          // console.log("Enter pressed");
           return;
         }
 
@@ -308,19 +297,19 @@
         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);
+          // 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"
+          // 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");
+          // console.log("Tiptap font size:", tiptapSize ? tiptapSize : "default");
+          // console.log("Tiptap line height:", tiptapLineHeight ? tiptapLineHeight : "default");
 
           if (tiptapSize) {
             fontSize = Number(tiptapSize.replace("px", ""));
@@ -483,14 +472,11 @@
   }
 
   function handleRangeInput(e: any) {
-    
-
+     
     
       $editor
-        .chain()
-        .focus()
-        .setNodeLineHeight(e.target.value.toString())
-        .run();
+        .commands
+        .setNodeLineHeight(lineHeight.toString())
     
   }
 </script>
@@ -822,20 +808,22 @@
       </div>
 
       <!-- Font size editor -->
-      <div role="group" class="fl-rich-text-toolbar-group flex-auto">
-        <div class="fl-font-size-editor flex-auto">
+      <div role="group" class="fl-rich-text-toolbar-group">
+        <div class="fl-font-size-editor">
             <button
-              type="button"
               aria-label="Decrease font size"
               onclick={decrementFontSize}
-              class="fl-font-size-editor-button">-</button
+              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">+</button
+              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>
       </div>
@@ -1815,7 +1803,7 @@
      <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}>
+     <input oninput={handleRangeInput} type="range" min="0.5" max="4" step="0.05" bind:value={lineHeight}>
    </div>
    
   {/if}

package/dist/extensions/NodeLineHeight.d.ts

@@ -1,4 +1,4 @@
-import { Extension } from '@tiptap/core';
+import { Extension } from "@tiptap/core";
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
         lineHeight: {

package/dist/extensions/NodeLineHeight.js

@@ -1,24 +1,17 @@
-import { Extension } from '@tiptap/core';
+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',
-        };
-    },
+    name: "nodeLineHeight",
     addGlobalAttributes() {
         return [
             {
-                types: this.options.types,
+                types: ["paragraph", "heading"],
                 attributes: {
                     lineHeight: {
-                        default: this.options.defaultLineHeight,
-                        parseHTML: element => element.style.lineHeight || this.options.defaultLineHeight,
+                        default: null,
+                        parseHTML: element => element.style.lineHeight || null,
                         renderHTML: attributes => {
-                            if (!attributes.lineHeight || attributes.lineHeight === this.options.defaultLineHeight) {
+                            if (!attributes.lineHeight)
                                 return {};
-                            }
                             return {
                                 style: `line-height: ${attributes.lineHeight}`,
                             };
@@ -30,12 +23,28 @@ export const NodeLineHeight = Extension.create({
     },
     addCommands() {
         return {
-            setNodeLineHeight: (lineHeight) => ({ commands }) => {
-                return this.options.types.every((type) => commands.updateAttributes(type, { lineHeight }));
+            setNodeLineHeight: (lineHeight) => ({ state, commands }) => {
+                const { $from } = state.selection;
+                for (let d = $from.depth; d > 0; d--) {
+                    const node = $from.node(d);
+                    if (node.type.name === "paragraph") {
+                        return commands.updateAttributes("paragraph", {
+                            lineHeight,
+                        });
+                    }
+                    if (node.type.name === "heading") {
+                        return commands.updateAttributes("heading", {
+                            lineHeight,
+                        });
+                    }
+                }
+                return false;
             },
             unsetNodeLineHeight: () => ({ commands }) => {
-                return this.options.types.every((type) => commands.resetAttributes(type, 'lineHeight'));
+                return commands.updateAttributes("paragraph", {
+                    lineHeight: null,
+                });
             },
         };
-    },
+    }
 });

package/dist/styles.css

@@ -398,9 +398,10 @@
     display: flex;
     align-items: center;
     gap: 4px;
-    padding: 0 8px;
+    padding: 0 6px;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.1);
+    min-height: 32px;
 
     & button {
       background: transparent;
@@ -410,23 +411,31 @@
       justify-content: center;
       padding: 2px;
       backdrop-filter: blur(5px);
-      border-radius: 8px;
       cursor: pointer;
+      min-height: 18px;
+      min-width: 18px;
+      border-radius: 100%;
+      background: #474747;
+
+      &:hover {
+        background: rgb(104, 104, 104);
+      }
 
       & svg {
-        width: 18px;
-        height: 18px;
+        width: 12px;
+        height: 12px;
       }
     }
 
     input {
-      width: 32px;
+      width: 28px;
       text-align: center;
       border: none;
       background: transparent;
       color: var(--text-color);
       font-size: 14px;
       padding: 0;
+      outline: none;
     }
   }
 

package/package.json

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