@flexiui/svelte-rich-text 0.0.67 → 0.0.68

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.67",
+  "version": "0.0.68",
   "description": "A lightweight and flexible rich text editor component for Svelte",
   "keywords": [
     "svelte",