@flexiui/svelte-rich-text 0.0.68 → 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/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/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/package.json

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