@flexiui/svelte-rich-text 0.0.67 → 0.0.69

package/dist/RichText.svelte

@@ -100,6 +100,7 @@
     contentWrapperAs?: T;
     inlineNodeMode?: boolean;
     trailingNode?: boolean;
+    cleanMode?: boolean;
   }
 
   type ToolbarButton =
@@ -157,6 +158,8 @@
     contentWrapperAs = "div" as T,
     inlineNodeMode = false,
     trailingNode = true,
+    cleanMode = false,
+    ...rest
   }: Props = $props();
 
   let editor = $state() as Readable<Editor>;
@@ -391,7 +394,7 @@
       content,
       editorProps: {
         attributes: {
-          class: "fl-rich-text-doc",
+          class: cleanMode ? "fl-rich-text-doc-clean" : "fl-rich-text-doc",
         },
         handleKeyDown: (view, event) => {
           if (event.key === "Enter" && !event.ctrlKey) {
@@ -784,153 +787,172 @@ function onOpenChangeHighlight(open: boolean) {
 }
 </script>
 
-<div
-  class="fl-rich-text {className}"
-  class:editable
-  style="
-  --fl-editor-accent-color: {editorConfig.editorAccentColor};
-  --fl-editor-radius: {editorConfig.editorRadius};
-  --fl-editor-bg: {editorConfig.editorBgColor};
-  --fl-toolbar-sticky-position: {editorConfig.toolbarStickyPosition}px;
-  --fl-toolbar-z-index: {editorConfig.toolbarZIndex};
-  --fl-toolbar-padding: {editorConfig.toolbarPadding};
-  --fl-toolbar-gap: {editorConfig.toolbarGap};
-  --fl-toolbar-bg: {editorConfig.toolbarBgColor};
-  --fl-toolbar-justify-content: {editorConfig.toolbarJustifyContent};
-  --fl-toolbar-text-color: {editorConfig.toolbarTextColor};
-  --fl-toolbar-btn-padding: {editorConfig.toolbarBtnPadding};
-  --fl-toolbar-btn-radius: {editorConfig.toolbarBtnRadius};
-  --fl-toolbar-btn-min-height: {editorConfig.toolbarBtnMinHeight};
-  --fl-toolbar-btn-min-width: {editorConfig.toolbarBtnMinWidth ||
-    editorConfig.toolbarBtnMinHeight};
-  --fl-doc-max-width: {editorConfig.docMaxWidth};
-  --fl-doc-padding: {editorConfig.docPadding};
-  --fl-doc-bg: {editorConfig.docBg};
-  --fl-doc-margin-inline: {editorConfig.docMarginInline};
-  --fl-doc-margin-block: {editorConfig.docMarginBlock};
-  --fl-doc-radius: {editorConfig.docRadius};
-  --fl-doc-text-color: {editorConfig.docTextColor};
-"
->
-  {#if editor && showToolbar}
-    <header class="fl-rich-text-toolbar">
-      <div class="fl-rich-text-toolbar-container container">
-        {#each toolbarGroups as toolbarGroup}
-          {#if toolbarGroup.length > 0}
-            <div role="group" class="fl-rich-text-toolbar-group">
-              {#each toolbarGroup as toolbarItem}
-                {#if Array.isArray(toolbarItem)}
-                  <!-- Si por alguna razón hay un array anidado, manejarlo -->
-                  <p>Array anidado (no debería pasar)</p>
-                {:else if typeof toolbarItem === "string"}
-                  <RenderToolbarButton
-                    type={toolbarItem}
-                    {editor}
-                    {nodeCounters}
-                    {nodesLimit}
-                    {currentNodeCount}
-                    accentSoft={isAccentSoft}
-                    {fontSize}
-                    onToggleDropdown={(e: MouseEvent, dropdownName: string) => {
-                      toogleDropdown(
-                        e.currentTarget as HTMLElement,
-                        dropdownName,
-                      );
-                    }}
-                  />
-                {:else if isButton(toolbarItem)}
-                  <RenderToolbarButton
-                    type={toolbarItem.type}
-                    {editor}
-                    {nodeCounters}
-                    {nodesLimit}
-                    {currentNodeCount}
-                    accentSoft={isAccentSoft}
-                    {fontSize}
-                    onToggleDropdown={(e: MouseEvent, dropdownName: string) => {
-                      toogleDropdown(
-                        e.currentTarget as HTMLElement,
-                        dropdownName,
-                      );
-                    }}
-                  />
-                {/if}
-              {/each}
-            </div>
-          {/if}
-        {/each}
-      </div>
-    </header>
-  {/if}
+{#if cleanMode}
 
-  <EditorContent
-    as={contentWrapperAs}
-    editor={$editor}
-    class="fl-rich-text-content"
-    data-fl-editable="true"
-  />
-
-  <!-- Warning message for node limit -->
-  {#if showLimitWarning && nodesLimit}
-    <div class="fl-node-limit-warning">
-      {limitWarningMessage ||
-        ` No se pueden añadir más nodos a este editor. Max: ${nodesLimit}`}
-    </div>
-  {/if}
-
-  <!-- Bottom bar showing node count -->
-  {#if showCountersBar || percentage >= 90}
-    <div class="fl-counters-bar">
-      <div
-        class="fl-character-count"
-        class:fl-character-count--warning={percentage >= 100}
-      >
-        {#if charactersLimit}
-          <svg height="20" width="20" viewBox="0 0 20 20">
-            <circle r="10" cx="10" cy="10" fill="#ffffff30" />
-            <circle
-              r="5"
-              cx="10"
-              cy="10"
-              fill="transparent"
-              stroke="currentColor"
-              stroke-width="10"
-              stroke-dasharray={`calc(${percentage} * 31.4 / 100) 31.4`}
-              transform="rotate(-90) translate(-20)"
-            />
-            <circle r="6" cx="10" cy="10" fill="var(--fl-editor-bg)" />
-          </svg>
-        {/if}
-
-        <span>
-          Characters: {$editor?.storage?.characterCount?.characters()}
-          {#if charactersLimit}
-            / {charactersLimit}{/if}
-        </span>
+    <EditorContent
+      as={contentWrapperAs}
+      editor={$editor}
+      class="fl-rich-text-content {className}"
+      data-fl-editable="true"
+      {...rest}
+    />
+
+    <!-- Warning message for node limit -->
+    {#if showLimitWarning && nodesLimit}
+      <div class="fl-node-limit-warning">
+        {limitWarningMessage ||
+          ` No se pueden añadir más nodos a este editor. Max: ${nodesLimit}`}
+      </div>
+    {/if}
+
+{:else}
+  <div
+    class="fl-rich-text {className}"
+    class:editable
+    style="
+    --fl-editor-accent-color: {editorConfig.editorAccentColor};
+    --fl-editor-radius: {editorConfig.editorRadius};
+    --fl-editor-bg: {editorConfig.editorBgColor};
+    --fl-toolbar-sticky-position: {editorConfig.toolbarStickyPosition}px;
+    --fl-toolbar-z-index: {editorConfig.toolbarZIndex};
+    --fl-toolbar-padding: {editorConfig.toolbarPadding};
+    --fl-toolbar-gap: {editorConfig.toolbarGap};
+    --fl-toolbar-bg: {editorConfig.toolbarBgColor};
+    --fl-toolbar-justify-content: {editorConfig.toolbarJustifyContent};
+    --fl-toolbar-text-color: {editorConfig.toolbarTextColor};
+    --fl-toolbar-btn-padding: {editorConfig.toolbarBtnPadding};
+    --fl-toolbar-btn-radius: {editorConfig.toolbarBtnRadius};
+    --fl-toolbar-btn-min-height: {editorConfig.toolbarBtnMinHeight};
+    --fl-toolbar-btn-min-width: {editorConfig.toolbarBtnMinWidth ||
+      editorConfig.toolbarBtnMinHeight};
+    --fl-doc-max-width: {editorConfig.docMaxWidth};
+    --fl-doc-padding: {editorConfig.docPadding};
+    --fl-doc-bg: {editorConfig.docBg};
+    --fl-doc-margin-inline: {editorConfig.docMarginInline};
+    --fl-doc-margin-block: {editorConfig.docMarginBlock};
+    --fl-doc-radius: {editorConfig.docRadius};
+    --fl-doc-text-color: {editorConfig.docTextColor};
+  "
+  >
+    {#if editor && showToolbar}
+      <header class="fl-rich-text-toolbar">
+        <div class="fl-rich-text-toolbar-container container">
+          {#each toolbarGroups as toolbarGroup}
+            {#if toolbarGroup.length > 0}
+              <div role="group" class="fl-rich-text-toolbar-group">
+                {#each toolbarGroup as toolbarItem}
+                  {#if Array.isArray(toolbarItem)}
+                    <!-- Si por alguna razón hay un array anidado, manejarlo -->
+                    <p>Array anidado (no debería pasar)</p>
+                  {:else if typeof toolbarItem === "string"}
+                    <RenderToolbarButton
+                      type={toolbarItem}
+                      {editor}
+                      {nodeCounters}
+                      {nodesLimit}
+                      {currentNodeCount}
+                      accentSoft={isAccentSoft}
+                      {fontSize}
+                      onToggleDropdown={(e: MouseEvent, dropdownName: string) => {
+                        toogleDropdown(
+                          e.currentTarget as HTMLElement,
+                          dropdownName,
+                        );
+                      }}
+                    />
+                  {:else if isButton(toolbarItem)}
+                    <RenderToolbarButton
+                      type={toolbarItem.type}
+                      {editor}
+                      {nodeCounters}
+                      {nodesLimit}
+                      {currentNodeCount}
+                      accentSoft={isAccentSoft}
+                      {fontSize}
+                      onToggleDropdown={(e: MouseEvent, dropdownName: string) => {
+                        toogleDropdown(
+                          e.currentTarget as HTMLElement,
+                          dropdownName,
+                        );
+                      }}
+                    />
+                  {/if}
+                {/each}
+              </div>
+            {/if}
+          {/each}
+        </div>
+      </header>
+    {/if}
+
+    <EditorContent
+      as={contentWrapperAs}
+      editor={$editor}
+      class="fl-rich-text-content"
+      data-fl-editable="true"
+    />
+
+    <!-- Warning message for node limit -->
+    {#if showLimitWarning && nodesLimit}
+      <div class="fl-node-limit-warning">
+        {limitWarningMessage ||
+          ` No se pueden añadir más nodos a este editor. Max: ${nodesLimit}`}
       </div>
+    {/if}
 
-      {#if showCountersBar}
-        <span>
-          Words: {$editor?.storage?.characterCount?.words()}
-        </span>
-      {/if}
+    <!-- Bottom bar showing node count -->
+    {#if showCountersBar || percentage >= 90}
+      <div class="fl-counters-bar">
+        <div
+          class="fl-character-count"
+          class:fl-character-count--warning={percentage >= 100}
+        >
+          {#if charactersLimit}
+            <svg height="20" width="20" viewBox="0 0 20 20">
+              <circle r="10" cx="10" cy="10" fill="#ffffff30" />
+              <circle
+                r="5"
+                cx="10"
+                cy="10"
+                fill="transparent"
+                stroke="currentColor"
+                stroke-width="10"
+                stroke-dasharray={`calc(${percentage} * 31.4 / 100) 31.4`}
+                transform="rotate(-90) translate(-20)"
+              />
+              <circle r="6" cx="10" cy="10" fill="var(--fl-editor-bg)" />
+            </svg>
+          {/if}
 
-      {#if nodesLimit}
-        <span class="fl-node-count-text">
-          Nodes: {currentNodeCount} / {nodesLimit}
-        </span>
-      {/if}
+          <span>
+            Characters: {$editor?.storage?.characterCount?.characters()}
+            {#if charactersLimit}
+              / {charactersLimit}{/if}
+          </span>
+        </div>
+
+        {#if showCountersBar}
+          <span>
+            Words: {$editor?.storage?.characterCount?.words()}
+          </span>
+        {/if}
 
-      <!-- <div class="fl-node-count-progress">
-        <div
-          class="fl-node-count-progress-bar"
-          style="width: {Math.min((currentNodeCount / nodesLimit) * 100, 100)}%"
-        ></div>
-      </div> -->
-    </div>
-  {/if}
-</div>
+        {#if nodesLimit}
+          <span class="fl-node-count-text">
+            Nodes: {currentNodeCount} / {nodesLimit}
+          </span>
+        {/if}
 
+        <!-- <div class="fl-node-count-progress">
+          <div
+            class="fl-node-count-progress-bar"
+            style="width: {Math.min((currentNodeCount / nodesLimit) * 100, 100)}%"
+          ></div>
+        </div> -->
+      </div>
+    {/if}
+  </div>
+{/if}
 <div
   class="fl-toolbar-dropdown-panel"
   bind:this={tooltip}

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/extensions/resizable-nodes.d.ts

@@ -0,0 +1,7 @@
+import { Extension } from '@tiptap/core';
+export interface ResizableNodesOptions {
+    nodes: string[];
+    minWidth?: number;
+    handleWidth?: number;
+}
+export declare const ResizableNodes: Extension<ResizableNodesOptions, any>;

package/dist/extensions/resizable-nodes.js

@@ -0,0 +1,116 @@
+// resizable-nodes.ts  (versión completa con Decorations)
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
+export const ResizableNodes = Extension.create({
+    name: 'resizableNodes',
+    addOptions() {
+        return {
+            nodes: [],
+            minWidth: 120,
+            handleWidth: 8,
+        };
+    },
+    // ✅ Añade maxWidth a los nodos configurados SIN tocar su NodeView
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.nodes,
+                attributes: {
+                    maxWidth: {
+                        default: null,
+                        parseHTML: el => {
+                            const val = el.style.maxWidth;
+                            return val || null;
+                        },
+                        renderHTML: attrs => {
+                            if (!attrs.maxWidth)
+                                return {};
+                            return {
+                                style: `max-width: ${attrs.maxWidth}; box-sizing: border-box;`,
+                            };
+                        },
+                    },
+                },
+            },
+        ];
+    },
+    addProseMirrorPlugins() {
+        const extension = this;
+        const pluginKey = new PluginKey('resizableNodes');
+        return [
+            new Plugin({
+                key: pluginKey,
+                // Decoraciones: añade el handle como widget sin reemplazar el NodeView
+                props: {
+                    decorations(state) {
+                        const { doc, selection } = state;
+                        const decorations = [];
+                        const nodeNames = extension.options.nodes;
+                        doc.descendants((node, pos) => {
+                            if (!nodeNames.includes(node.type.name))
+                                return;
+                            if (node.attrs.maxWidth === undefined)
+                                return;
+                            // Widget al FINAL del nodo (después del contenido)
+                            const widget = Decoration.widget(pos + node.nodeSize - 1, () => {
+                                const handle = document.createElement('div');
+                                handle.className = 'resize-handle';
+                                handle.contentEditable = 'false';
+                                handle.dataset.pos = String(pos);
+                                return handle;
+                            }, { side: 1, key: `resize-${pos}` });
+                            decorations.push(widget);
+                        });
+                        return DecorationSet.create(doc, decorations);
+                    },
+                    handleDOMEvents: {
+                        mousedown(view, event) {
+                            const handle = event.target.closest('.resize-handle');
+                            if (!handle)
+                                return false;
+                            event.preventDefault();
+                            const pos = parseInt(handle.dataset.pos || '0', 10);
+                            const node = view.state.doc.nodeAt(pos);
+                            if (!node)
+                                return false;
+                            const dom = view.nodeDOM(pos);
+                            if (!dom)
+                                return false;
+                            const startX = event.clientX;
+                            const startWidth = dom.offsetWidth;
+                            const minWidth = extension.options.minWidth ?? 120;
+                            const onMouseMove = (e) => {
+                                const newWidth = Math.max(minWidth, startWidth + (e.clientX - startX));
+                                console.log(newWidth);
+                                dom.style.maxWidth = `${newWidth}px`; // preview live
+                                // Commit al schema de ProseMirror
+                                const { tr } = view.state;
+                                // tr.setNodeMarkup(pos, undefined, {
+                                //   ...node.attrs,
+                                //   maxWidth: `${newWidth}px`,
+                                // })
+                                view.dispatch(tr);
+                            };
+                            const onMouseUp = (e) => {
+                                document.removeEventListener('mousemove', onMouseMove);
+                                document.removeEventListener('mouseup', onMouseUp);
+                                const finalWidth = Math.max(minWidth, startWidth + (e.clientX - startX));
+                                // Commit al schema de ProseMirror
+                                const { tr } = view.state;
+                                tr.setNodeMarkup(pos, undefined, {
+                                    ...node.attrs,
+                                    maxWidth: `${finalWidth}px`,
+                                });
+                                view.dispatch(tr);
+                            };
+                            document.addEventListener('mousemove', onMouseMove);
+                            document.addEventListener('mouseup', onMouseUp);
+                            return true;
+                        },
+                    },
+                },
+            }),
+        ];
+    },
+});

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/styles.css

@@ -63,6 +63,11 @@
   box-sizing: border-box;
 }
 
+.fl-rich-text-doc-clean {
+  outline: none;
+  position: relative;
+}
+
 .fl-toolbar-dropdown-panel {
   position: absolute;
   padding: 9px;
@@ -637,3 +642,34 @@ button {
     }
   }
 }
+
+
+/* El handle flota sobre el borde derecho del nodo */
+[data-resizable], [style*="max-width"] {
+  position: relative;
+}
+
+.resize-handle {
+  position: absolute;
+  right: -4px;
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  cursor: col-resize;
+  opacity: 0;
+  background: #3b82f6;
+  border-radius: 4px;
+  transition: opacity 0.15s;
+  z-index: 10;
+}
+
+p:hover .resize-handle,
+h1:hover .resize-handle,
+h2:hover .resize-handle,
+blockquote:hover .resize-handle {
+  opacity: 0.6;
+}
+
+.resize-handle:hover {
+  opacity: 1 !important;
+}

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