@flexiui/svelte-rich-text 0.0.66 → 0.0.68

package/dist/RichText.svelte

@@ -667,10 +667,10 @@
 
   let colorValueRgb = $state(colorValue);
 
-  function onChange(value: any) {
-    colorValue = value.hex;
-    colorValueRgb = value.rgb;
-  }
+function onChange(value: any) {
+  colorValue = value.hex;
+  colorValueRgb = value.rgb;
+}
 
 let prevSelection: { from: number; to: number } | null = null;
 let prevColorValueRgb: string | null = null;
@@ -723,6 +723,65 @@ function onOpenChange(open: boolean) {
     }
   }
 }
+
+
+// Highlight colorPicker
+let highlightColorValue = $state(null);
+let highlightColorValueRgb = $state(null);
+let prevSelectionHighlight: { from: number; to: number } | null = null;
+let prevHighlightColorValueRgb: string | null = null;
+
+function onChangeHighlight(value: any) {
+  highlightColorValue = value.hex;
+  highlightColorValueRgb = value.rgb;
+}
+
+function onOpenChangeHighlight(open: boolean) {
+  if (open) {
+    const { from, to } = $editor.state.selection;
+    prevSelectionHighlight = { from, to };
+    prevColorValueRgb = $editor?.getAttributes("highlight")?.color;
+    return;
+  }
+
+  if (!open) {
+    if(highlightColorValue === defaultColor) return;
+
+    if(highlightColorValueRgb === prevHighlightColorValueRgb) {
+      return;
+    }
+
+    // Guardar color reciente
+    const included = recentCustomColors.includes(highlightColorValueRgb);
+    if (!included) {
+      recentCustomColors = [
+        ...recentCustomColors,
+        highlightColorValueRgb,
+      ];
+    }
+
+    // Aplicar color al rango previo
+    if (prevSelectionHighlight) {
+      const { from, to } = prevSelectionHighlight;
+      const { state, view } = $editor;
+
+      const highlight = state.schema.marks.highlight;
+
+      const tr = state.tr.addMark(
+        from,
+        to,
+        highlight.create({ color: highlightColorValueRgb })
+      );
+
+      view.dispatch(tr);
+
+
+      highlightColorValue = defaultColor;
+      highlightColorValueRgb = defaultColor;
+
+    }
+  }
+}
 </script>
 
 <div
@@ -903,25 +962,23 @@ function onOpenChange(open: boolean) {
     </div>
   {:else if activeDropdownType === "text-color-dropdown"}
     <div class="fl-editor-color-palette">
-      <div class="color-picker-wrapper">
+      <div class="color-picker-wrapper" id="color-picker-text-color">
         <ColorPicker
-        value={$editor?.getAttributes("textStyle")?.color || colorValue}
-        defaultFormat="rgb"
-        onFormatChange={onFormatChange}
-        onChange={onChange}
-        onOpenChange={onOpenChange}
-        portalElement={".color-picker-wrapper"}
-      >
-        <ColorPickerTrigger class="font-mono">
-          <!-- <ColorPickerSwatch class="w-6 h-6 rounded-md" showAlpha={true} value={colorValueRgb} /> -->
-          <!-- {colorValue} -->
-          <button
-          class="fl-color-swatch fl-color-picker-btn"
-          aria-label="Text color picker"
-          type="button"
-          ></button>
-        </ColorPickerTrigger>
-      </ColorPicker>
+          value={$editor?.getAttributes("textStyle")?.color || colorValue}
+          defaultFormat="rgb"
+          onFormatChange={onFormatChange}
+          onChange={onChange}
+          onOpenChange={onOpenChange}
+          portalElement={"#color-picker-text-color"}
+        >
+          <ColorPickerTrigger class="font-mono">
+            <button
+            class="fl-color-swatch fl-color-picker-btn"
+            aria-label="Text color picker"
+            type="button"
+            ></button>
+          </ColorPickerTrigger>
+        </ColorPicker>
       </div>
 
       {#each TEXT_COLOR_PALETTE as color}
@@ -933,6 +990,11 @@ function onOpenChange(open: boolean) {
           onclick={() => {
             $editor?.chain().focus().setColor(color).run();
             hideDropdown();
+            
+            setTimeout(() => {
+              colorValue = defaultColor;
+              colorValueRgb = null;
+            }, 100);
           }}
           style="background-color: {color};"
           aria-label={color}
@@ -1061,12 +1123,31 @@ function onOpenChange(open: boolean) {
               .run();
             hideDropdown();
           }}
-          value={rgbToHex($editor?.getAttributes("textStyle")?.color)}
+          value={rgbToHex(rgbToHex($editor?.getAttributes("highlight")?.color))}
           data-testid="setHiglight"
           id="colorPicker"
         />
       </button>
 
+      <div class="color-picker-wrapper" id="color-picker-highlight-color">
+        <ColorPicker
+          value={$editor?.getAttributes("highlight")?.color || highlightColorValue}
+          defaultFormat="rgb"
+          onFormatChange={onFormatChange}
+          onChange={onChangeHighlight}
+          onOpenChange={onOpenChangeHighlight}
+          portalElement={"#color-picker-highlight-color"}
+        >
+          <ColorPickerTrigger class="font-mono">
+            <button
+            class="fl-color-swatch fl-color-picker-btn"
+            aria-label="Text color picker"
+            type="button"
+            ></button>
+          </ColorPickerTrigger>
+        </ColorPicker>
+      </div>
+
       {#each HIGHLIGHT_COLOR_PALETTE as color}
         <button
           class="fl-color-swatch"

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

@@ -51,6 +51,15 @@
   function canCreateSubheading(editor) {
     return !hasH1AfterCursor(editor);
   }
+
+  const headingActions = {
+    "1": () => $editor.chain().focus().toggleH1().run(),
+    "2": () => $editor.chain().focus().toggleH2().run(),
+    "3": () => $editor.chain().focus().toggleH3().run(),
+    "4": () => $editor.chain().focus().toggleH4().run(),
+    "5": () => $editor.chain().focus().toggleH5().run(),
+    "6": () => $editor.chain().focus().toggleH6().run(),
+  };
 </script>
 
 {#if level === 1}
@@ -65,7 +74,7 @@
     {@html icons[level]}
   </button>
 {:else}
-  <button
+  <!-- <button
     type="button"
     onclick={() => $editor.chain().focus().toggleHeading({ level }).run()}
     class:is-active={$editor.isActive("heading", { level })}
@@ -74,5 +83,17 @@
     disabled={!canCreateSubheading($editor)}
   >
     {@html icons[level]}
+  </button> -->
+  <button
+    type="button"
+    onclick={() => {
+      headingActions[level]();
+    }}
+    class:is-active={$editor.isActive("h"+level)}
+    class:accent-soft={accenSoft}
+    aria-label={`Heading ${level}`}
+    disabled={!canCreateSubheading($editor)}
+  >
+    {@html icons[level]}
   </button>
 {/if}

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

@@ -12,7 +12,7 @@
 <button
   type="button"
   onclick={handleClick}
-  class:is-active={$editor.isActive("heading") || $editor.isActive("h1")}
+  class:is-active={$editor.isActive("heading") || $editor.isActive("h1") || $editor.isActive("h2") || $editor.isActive("h3") || $editor.isActive("h4") || $editor.isActive("h5") || $editor.isActive("h6")}
   class:accent-soft={accentSoft}
   aria-label={ariaLabel}
 >
@@ -24,21 +24,30 @@
     {/each}
   {:else if $editor.isActive("h1")}
     {@html HEADINGS[0].icon}
-  {/if}
+  {:else if $editor.isActive("h2")}
+    {@html HEADINGS[1].icon}
+  {:else if $editor.isActive("h3")}
+    {@html HEADINGS[2].icon}
+  {:else if $editor.isActive("h4")}
+    {@html HEADINGS[3].icon}
+  {:else if $editor.isActive("h5")}
+    {@html HEADINGS[4].icon}
+  {:else if $editor.isActive("h6")}
+    {@html HEADINGS[5].icon}
 
-  {#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"
+  {:else}
+     <svg
+        width="24"
+        height="24"
+        class="tiptap-button-icon"
+        viewBox="0 0 24 24"
         fill="currentColor"
-      ></path></svg
-    >
+        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

package/dist/extensions/NodeFontSize.js

@@ -1,5 +1,5 @@
 import { Extension } from "@tiptap/core";
-const allowedTypes = ["paragraph", "heading", "h1"];
+const allowedTypes = ["paragraph", "heading", "h1", "h2", "h3", "h4", "h5", "h6"];
 export const NodeFontSize = Extension.create({
     name: "nodeFontSize",
     addGlobalAttributes() {

package/dist/extensions/NodeLineHeight.js

@@ -1,5 +1,5 @@
 import { Extension } from "@tiptap/core";
-const allowedTypes = ["paragraph", "heading", "h1"];
+const allowedTypes = ["paragraph", "heading", "h1", "h2", "h3", "h4", "h5", "h6"];
 export const NodeLineHeight = Extension.create({
     name: "nodeLineHeight",
     addGlobalAttributes() {

package/dist/extensions/SemanticHeadings.js

@@ -16,7 +16,7 @@ export const SemanticHeadings = Extension.create({
                     let h1Count = 0;
                     // Recolectar todos los headings en orden
                     doc.descendants((node, pos) => {
-                        if (node.type.name === 'heading') {
+                        if (node.type.name === 'heading' || node.type.name === 'h1' || node.type.name === 'h2' || node.type.name === 'h3' || node.type.name === 'h4' || node.type.name === 'h5' || node.type.name === 'h6') {
                             headings.push({
                                 level: node.attrs.level,
                                 pos: pos
@@ -68,7 +68,7 @@ export const SemanticHeadings = Extension.create({
                 let hasH1 = false;
                 // Buscar el último heading y verificar si ya existe h1
                 doc.descendants((node) => {
-                    if (node.type.name === 'heading') {
+                    if (node.type.name === 'heading' || node.type.name === 'h1' || node.type.name === 'h2' || node.type.name === 'h3' || node.type.name === 'h4' || node.type.name === 'h5' || node.type.name === 'h6') {
                         lastHeadingLevel = node.attrs.level;
                         if (node.attrs.level === 1) {
                             hasH1 = true;
@@ -97,7 +97,7 @@ export const SemanticHeadings = Extension.create({
                 let lastHeadingLevel = null;
                 let hasH1 = false;
                 doc.descendants((node) => {
-                    if (node.type.name === 'heading') {
+                    if (node.type.name === 'heading' || node.type.name === 'h1' || node.type.name === 'h2' || node.type.name === 'h3' || node.type.name === 'h4' || node.type.name === 'h5' || node.type.name === 'h6') {
                         lastHeadingLevel = node.attrs.level;
                         if (node.attrs.level === 1) {
                             hasH1 = true;

package/dist/extensions/extensions.js

@@ -34,6 +34,12 @@ export function createExtensions({ customExtensions = [], editable = true, } = {
         ListKit,
         TextAlign.configure({
             types: [
+                "h1",
+                "h2",
+                "h3",
+                "h4",
+                "h5",
+                "h6",
                 "heading",
                 "paragraph",
                 "bulletList",

package/dist/getExtensions.d.ts

@@ -3,6 +3,21 @@ declare module '@tiptap/core' {
         h1: {
             toggleH1: () => ReturnType;
         };
+        h2: {
+            toggleH2: () => ReturnType;
+        };
+        h3: {
+            toggleH3: () => ReturnType;
+        };
+        h4: {
+            toggleH4: () => ReturnType;
+        };
+        h5: {
+            toggleH5: () => ReturnType;
+        };
+        h6: {
+            toggleH6: () => ReturnType;
+        };
     }
 }
 export declare function getRichTextExtensions(options?: {

package/dist/getExtensions.js

@@ -17,7 +17,7 @@ import { CustomTableHeader } from "./extensions/Table/CustomTableHeader";
 import { EnhancedLink } from "./extensions/EnhancedLink";
 import { SemanticHeadings } from "./extensions/SemanticHeadings";
 import { Heading } from "@tiptap/extension-heading";
-const DocHeading = Heading.extend({
+const H1 = Heading.extend({
     name: "h1",
     addCommands() {
         return {
@@ -27,11 +27,66 @@ const DocHeading = Heading.extend({
         };
     },
 }).configure({ levels: [1] });
+const H2 = Heading.extend({
+    name: "h2",
+    addCommands() {
+        return {
+            toggleH2: () => ({ commands }) => {
+                return commands.toggleNode('h2', 'paragraph');
+            },
+        };
+    },
+}).configure({ levels: [2] });
+const H3 = Heading.extend({
+    name: "h3",
+    addCommands() {
+        return {
+            toggleH3: () => ({ commands }) => {
+                return commands.toggleNode('h3', 'paragraph');
+            },
+        };
+    },
+}).configure({ levels: [3] });
+const H4 = Heading.extend({
+    name: "h4",
+    addCommands() {
+        return {
+            toggleH4: () => ({ commands }) => {
+                return commands.toggleNode('h4', 'paragraph');
+            },
+        };
+    },
+}).configure({ levels: [4] });
+const H5 = Heading.extend({
+    name: "h5",
+    addCommands() {
+        return {
+            toggleH5: () => ({ commands }) => {
+                return commands.toggleNode('h5', 'paragraph');
+            },
+        };
+    },
+}).configure({ levels: [5] });
+const H6 = Heading.extend({
+    name: "h6",
+    addCommands() {
+        return {
+            toggleH6: () => ({ commands }) => {
+                return commands.toggleNode('h6', 'paragraph');
+            },
+        };
+    },
+}).configure({ levels: [6] });
 export function getRichTextExtensions(options) {
     const { editable = false, trailingNode = true, customExtensions = [] } = options ?? {};
     return [
-        DocHeading,
-        Heading.configure({ levels: [2, 3, 4, 5, 6] }),
+        H1,
+        H2,
+        H3,
+        H4,
+        H5,
+        H6,
+        // Heading.configure({ levels: [2, 3, 4, 5, 6] }),
         Highlight.configure({ multicolor: true }),
         TextStyleKit.configure({
         // fontSize: false
@@ -53,6 +108,11 @@ export function getRichTextExtensions(options) {
         TextAlign.configure({
             types: [
                 "h1",
+                "h2",
+                "h3",
+                "h4",
+                "h5",
+                "h6",
                 "heading",
                 "paragraph",
                 "bulletList",

package/dist/utils.js

@@ -1,6 +1,6 @@
 export const exampleJSONContent = [
     {
-        type: "heading",
+        type: "h1",
         attrs: { level: 1 },
         content: [{ type: "text", text: "Hi there," }],
     },

package/package.json

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