@flexiui/svelte-rich-text 0.0.61 → 0.0.63

package/README.md

@@ -63,6 +63,18 @@ npm install @flexiui/svelte-rich-text
 <RichText showToolbar={false} />
 ```
 
+### With Content Wrapper Element
+
+```svelte
+<RichText contentWrapperAs="h1" />
+```
+
+### Inline Node Mode
+
+```svelte
+<RichText inlineNodeMode={true} />
+```
+
 ### With Node Limit
 
 Limita el número de nodos de primer nivel que puede tener el documento.
@@ -215,6 +227,8 @@ Automáticamente convierte encabezados H1 adicionales en párrafos, permitiendo
 | `customExtensions` | `any[]` | `[]` | Custom Tiptap extensions |
 | `editorEvents` | `EditorEvents` | `{}` | Event handlers for editor events |
 | `config` | `EditorConfig` | `{}` | Visual configuration options |
+| `contentWrapperAs` | `T extends keyof SvelteHTMLElements` | `'div'` | HTML element type for content wrapper |
+| `inlineNodeMode` | `boolean` | `false` | Enable inline node mode (uses inline document) |
 
 ## Editor Events
 

package/dist/RichText.svelte

@@ -1,49 +1,31 @@
-<script lang="ts">
+<script lang="ts" generics="T extends keyof SvelteHTMLElements = 'div'">
+  import type { SvelteHTMLElements } from 'svelte/elements';
   import "./styles.css";
   import "katex/dist/katex.min.css";
-
-  import { onMount, onDestroy, setContext } from "svelte";
+  import { onMount, onDestroy } from "svelte";
   import type { Readable } from "svelte/store";
-
   import { computePosition, offset, autoUpdate } from "@floating-ui/dom";
-
   import {
     Mathematics,
     migrateMathStrings,
   } from "@tiptap/extension-mathematics";
-
   import { CharacterCount } from '@tiptap/extensions'
-
   import { CellSelection } from "prosemirror-tables";
-
   import {
     createEditor,
     Editor,
-    EditorContent,
+    // EditorContent,
     BubbleMenu,
   } from "svelte-tiptap";
 
+  import EditorContent from "./svelte-tiptap-extends/EditorContent.svelte";
   import { getRichTextExtensions } from "./getExtensions";
-
   import { rgbToHex } from "./utils";
 
-  import SpecialBox from "./Toolbar/action-buttons/marks/SpecialBox.svelte";
-
   import MergeCellsBtn from "./Toolbar/action-buttons/MergeCellsBtn.svelte";
   import SplitCellBtn from "./Toolbar/action-buttons/SplitCellBtn.svelte";
 
   import HeadingBtn from "./Toolbar/action-buttons/nodes/HeadingBtn.svelte";
-  import HardBreakBtn from "./Toolbar/action-buttons/nodes/HardBreakBtn.svelte";
-
-  import CodeMarkBtn from "./Toolbar/action-buttons/marks/CodeMarkBtn.svelte";
-  import LinkBtn from "./Toolbar/action-buttons/marks/LinkBtn.svelte";
-  import Strike from "./Toolbar/action-buttons/marks/Strike.svelte";
-  import Underline from "./Toolbar/action-buttons/marks/Underline.svelte";
-  import Italic from "./Toolbar/action-buttons/marks/Italic.svelte";
-  import Bold from "./Toolbar/action-buttons/marks/Bold.svelte";
-
-  import HighlightDropdownBtn from "./Toolbar/dropdown-buttons/HighlightDropdownBtn.svelte";
-  import TextColorDropdownBtn from "./Toolbar/dropdown-buttons/TextColorDropdownBtn.svelte";
 
   import LineHeightDropdown from "./Toolbar/dropdowns/LineHeightDropdown.svelte";
   import ListBtn from "./Toolbar/action-buttons/nodes/ListBtn.svelte";
@@ -51,7 +33,11 @@
 
   import RenderToolbarButton from "./Toolbar/RenderToolbarButton.svelte";
 
-  export interface Props {
+  import { Document } from "@tiptap/extension-document";
+
+  const InlineDoc = Document.extend({ content: "inline*" })
+
+  interface Props {
     id?: string;
     className?: string;
     editable?: boolean;
@@ -60,7 +46,8 @@
     charactersLimit?: number;
     limitWarningMessage?: string;
     showToolbar?: boolean;
-    toolbarAlign?: string;
+    showCountersBar?: boolean;
+    toolbarAlign?: "left" | "center" | "right";
     semanticHeadings?: boolean;
     uniqueH1?: boolean;
     toolbarConfig?: ToolbarConfig;
@@ -104,9 +91,10 @@
       docTextColor?: string;
       buttonStyle?: "accent-soft" | "accent-solid";
     };
-  }
-
-  export type RichTextProps = Props;
+    contentWrapperAs?: T;
+    inlineNodeMode?: boolean;
+    trailingNode?: boolean;
+  }
 
   type ToolbarButton =
     | string
@@ -138,6 +126,7 @@
     charactersLimit,
     limitWarningMessage,
     showToolbar = true,
+    showCountersBar = true,
     toolbarAlign = "center",
     semanticHeadings = false,
     uniqueH1 = false,
@@ -159,7 +148,10 @@
       onPaste: () => {},
     },
     config,
-  }: Props = $props();
+    contentWrapperAs = "div" as T,
+    inlineNodeMode = false,
+    trailingNode = true,
+  }: Props = $props();
 
   let editor = $state() as Readable<Editor>;
 
@@ -241,7 +233,7 @@
 
   const isAccentSoft = editorConfig.buttonStyle === "accent-soft";
   let percentage = $derived.by(() => {
-    return $editor ? Math.round((100 / charactersLimit) * $editor.storage.characterCount.characters()) : 0
+    return $editor ? (100 / charactersLimit) * $editor.storage.characterCount.characters() : 0
   });
 
   let toolbarGroups = $derived(
@@ -286,14 +278,13 @@
     "rgb(255, 102, 142)",
   ];
 
-  const extensions = getRichTextExtensions({
-    editable: true,
-    customExtensions: [
+  const extensions = getRichTextExtensions({
+    editable: true,
+    trailingNode,
+    customExtensions: [
       Mathematics.configure({
         inlineOptions: {
           onClick: (node, pos) => {
-            // you can do anything on click, e.g. open a dialog to edit the math node
-            // or just a prompt to edit the LaTeX code for a quick prototype
             const katex = prompt(
               "Update math LaTeX expression:",
               node.attrs.latex,
@@ -321,7 +312,9 @@
         },
       }),
 
-      charactersLimit && CharacterCount.configure({
+      inlineNodeMode && InlineDoc,
+
+      CharacterCount.configure({
         limit: charactersLimit,
       }),
       ...customExtensions,
@@ -334,9 +327,9 @@
     activeDropdownType = type;
 
     if (tooltipVisible) {
-      hideDropdown(); // Ocultar
+      hideDropdown();
     } else {
-      hideDropdown(); // limpiar antes de abrir
+      hideDropdown();
       currentTriggerEl = el;
       tooltipVisible = true;
       document.body.append(tooltip);
@@ -722,7 +715,7 @@
     </header>
   {/if}
 
-  <EditorContent editor={$editor} class="fl-rich-text-content" />
+  <EditorContent as={contentWrapperAs} editor={$editor} class="fl-rich-text-content" data-fl-editable="true" />
 
   <!-- Warning message for node limit -->
   {#if showLimitWarning && nodesLimit}
@@ -733,40 +726,43 @@
   {/if}
 
   <!-- Bottom bar showing node count -->
-  {#if nodesLimit}
-    <div class="fl-node-count-bar">
-      
+  {#if showCountersBar || percentage >= 90}
+    <div class="fl-counters-bar">
+      <div class="fl-character-count" class:fl-character-count--warning={percentage >= 100}>
         {#if charactersLimit}
-          <div class="fl-character-count" class:fl-character-count--warning={percentage >= 100}>
-            <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>
-
-            <span>
-              Characters count: {$editor?.storage?.characterCount?.characters()} / {charactersLimit}
-            </span>
-
-            <span>
-              Words count: {$editor?.storage?.characterCount?.words()}
-            </span>
-          </div>
+          <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>
+      </div>
 
-      <span class="fl-node-count-text">
-        Nodes count: {currentNodeCount} / {nodesLimit}
-      </span>
+      {#if showCountersBar}
+        <span>
+          Words: {$editor?.storage?.characterCount?.words()}
+        </span>
+      {/if}
+
+      {#if nodesLimit}
+        <span class="fl-node-count-text">
+          Nodes: {currentNodeCount} / {nodesLimit}
+        </span>
+      {/if}
 
       <!-- <div class="fl-node-count-progress">
         <div

package/dist/RichText.svelte.d.ts

@@ -1,90 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from 'svelte/elements';
 import "./styles.css";
 import "katex/dist/katex.min.css";
-type ToolbarButton = string | {
-    type?: string;
-    tooltip?: string;
-    icon?: string;
-    name?: string;
-};
-type ToolbarSelect = {
-    select: ToolbarButton[];
-    name?: string;
-    tooltip?: string;
-    icon?: string;
-    type?: string;
-};
-type ToolbarItem = ToolbarButton | ToolbarSelect;
-type ToolbarConfig = ToolbarItem[] | ToolbarItem[][];
-type BubbleMenuConfig = ToolbarItem[] | ToolbarItem[][];
-export interface Props {
-    id?: string;
-    className?: string;
-    editable?: boolean;
-    content?: string | {
-        type: string;
-        content: any[];
-    } | null;
-    nodesLimit?: number;
-    charactersLimit?: number;
-    limitWarningMessage?: string;
-    showToolbar?: boolean;
-    toolbarAlign?: string;
-    semanticHeadings?: boolean;
-    uniqueH1?: boolean;
-    toolbarConfig?: ToolbarConfig;
-    bubbleMenuConfig?: BubbleMenuConfig;
-    customExtensions?: any[];
-    editorEvents?: {
-        onTransaction?: (params: any) => void;
-        onBeforeCreate?: (params: any) => void;
-        onCreate?: (params: any) => void;
-        onUpdate: (params: any) => void;
-        onFocus?: (params: any) => void;
-        onBlur?: (params: any) => void;
-        onDestroy?: (params: any) => void;
-        onDrop?: (params: any) => void;
-        onDelete?: (params: any) => void;
-        onContentError?: (params: any) => void;
-        onSelectionUpdate?: (params: any) => void;
-        onPaste?: (params: any) => void;
-    };
-    config?: {
-        editorAccentColor?: string;
-        editorBgColor?: string;
-        editorRadius?: string;
-        toolbarStickyPosition?: number;
-        toolbarZIndex?: number;
-        toolbarBgColor?: string;
-        toolbarTextColor?: string;
-        toolbarPadding?: string;
-        toolbarJustifyContent?: string;
-        toolbarGap?: string;
-        toolbarBtnPadding?: string;
-        toolbarBtnRadius?: string;
-        toolbarBtnMinHeight?: string;
-        toolbarBtnMinWidth?: string;
-        docMaxWidth?: string;
-        docPadding?: string;
-        docBg?: string;
-        docMarginInline?: string;
-        docMarginBlock?: string;
-        docRadius?: string;
-        docTextColor?: string;
-        buttonStyle?: "accent-soft" | "accent-solid";
-    };
-}
-export type RichTextProps = Props;
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
+declare class __sveltets_Render<T extends keyof SvelteHTMLElements = 'div'> {
+    props(): Record<string, never>;
+    events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
-};
-type RichTextProps_ = typeof __propDef.props;
-export type RichTextEvents = typeof __propDef.events;
-export type RichTextSlots = typeof __propDef.slots;
-export default class RichText extends SvelteComponentTyped<RichTextProps_, RichTextEvents, RichTextSlots> {
+    slots(): {};
+}
+export type RichTextProps<T extends keyof SvelteHTMLElements = 'div'> = ReturnType<__sveltets_Render<T>['props']>;
+export type RichTextEvents<T extends keyof SvelteHTMLElements = 'div'> = ReturnType<__sveltets_Render<T>['events']>;
+export type RichTextSlots<T extends keyof SvelteHTMLElements = 'div'> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class RichText<T extends keyof SvelteHTMLElements = 'div'> extends SvelteComponentTyped<RichTextProps<T>, RichTextEvents<T>, RichTextSlots<T>> {
 }
 export {};

package/dist/getExtensions.d.ts

@@ -7,5 +7,6 @@ declare module '@tiptap/core' {
 }
 export declare function getRichTextExtensions(options?: {
     editable?: boolean;
+    trailingNode?: boolean;
     customExtensions?: any[];
 }): any[];

package/dist/getExtensions.js

@@ -28,7 +28,7 @@ const DocHeading = Heading.extend({
     },
 }).configure({ levels: [1] });
 export function getRichTextExtensions(options) {
-    const { editable = false, customExtensions = [] } = options ?? {};
+    const { editable = false, trailingNode = true, customExtensions = [] } = options ?? {};
     return [
         DocHeading,
         Heading.configure({ levels: [2, 3, 4, 5, 6] }),
@@ -37,7 +37,7 @@ export function getRichTextExtensions(options) {
         // fontSize: false
         }),
         StarterKit.configure({
-            trailingNode: false,
+            trailingNode: trailingNode ? undefined : false,
             link: false,
             bulletList: false,
             listItem: false,

package/dist/styles.css

@@ -127,7 +127,8 @@
     display: flex;
     gap: 5px;
     position: relative;
-    z-index: 9;
+    z-index: var(--fl-toolbar-sticky-position, 10);
+
 
     .fl-bubble-menu-mark-button {
       border-radius: 9px;
@@ -540,7 +541,7 @@ button {
   }
 }
 
-.fl-node-count-bar {
+.fl-counters-bar {
   background: var(--fl-toolbar-bg, #242424);
   border-top: 1px solid #333;
   padding: 9px 12px;
@@ -551,12 +552,16 @@ button {
   color: var(--fl-toolbar-text-color, currentColor);
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
+
+  span {
+    color: #ffffffab;
+  }
 }
 
 .fl-character-count {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 9px;
 
   svg {
     color: var(--fl-editor-accent-color);
@@ -565,7 +570,7 @@ button {
   &.fl-character-count--warning {
     color: #ff5c33;
 
-    svg {
+    svg, span {
       color: currentColor;
     }
   }

package/dist/svelte-tiptap-extends/Editor.d.ts

@@ -0,0 +1,4 @@
+import { Editor as CoreEditor } from '@tiptap/core';
+export declare class Editor extends CoreEditor {
+    contentElement: HTMLElement | null;
+}

package/dist/svelte-tiptap-extends/Editor.js

@@ -0,0 +1,4 @@
+import { Editor as CoreEditor } from '@tiptap/core';
+export class Editor extends CoreEditor {
+    contentElement = null;
+}

package/dist/svelte-tiptap-extends/EditorContent.svelte

@@ -0,0 +1,62 @@
+<script lang="ts" generics="T extends keyof SvelteHTMLElements = 'div'">
+  import { onDestroy, onMount, tick } from 'svelte';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import type { ComponentInputProps } from './types';
+
+  type Props = ComponentInputProps<{}> & SvelteHTMLElements[T] & {
+    as?: T;
+  };
+
+  const { editor, children, class: className, as = 'div' as T, ...rest }: Props = $props();
+  let element: HTMLElement;
+
+  const init = async () => {
+    await tick();
+    if (!element) {
+      return;
+    }
+
+    if (!editor?.options.element) {
+      return;
+    }
+
+    if (editor.contentElement) {
+      return;
+    }
+
+    const editorElement = editor.options.element;
+    
+    if (editorElement instanceof HTMLElement) {
+      element.append(...Array.from(editorElement.childNodes));
+      editor.setOptions({ element });
+      editor.contentElement = element;
+    }
+  };
+
+  onMount(init);
+
+  onDestroy(() => {
+    if (!editor) {
+      return;
+    }
+
+    editor.contentElement = null;
+
+    const editorElement = editor.options.element;
+    
+    if (editorElement instanceof HTMLElement && editorElement.firstChild) {
+      const newElement = document.createElement('div');
+      newElement.append(...Array.from(editorElement.childNodes));
+
+      editor.setOptions({
+        element: newElement,
+      });
+    }
+  });
+</script>
+
+<svelte:element this={as} bind:this={element} class={className} {...rest}>
+  {#if children}
+    {@render children()}
+  {/if}
+</svelte:element>

package/dist/svelte-tiptap-extends/EditorContent.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from 'svelte/elements';
+declare class __sveltets_Render<T extends keyof SvelteHTMLElements = 'div'> {
+    props(): Record<string, never>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type EditorContentProps<T extends keyof SvelteHTMLElements = 'div'> = ReturnType<__sveltets_Render<T>['props']>;
+export type EditorContentEvents<T extends keyof SvelteHTMLElements = 'div'> = ReturnType<__sveltets_Render<T>['events']>;
+export type EditorContentSlots<T extends keyof SvelteHTMLElements = 'div'> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class EditorContent<T extends keyof SvelteHTMLElements = 'div'> extends SvelteComponentTyped<EditorContentProps<T>, EditorContentEvents<T>, EditorContentSlots<T>> {
+}
+export {};

package/dist/svelte-tiptap-extends/types.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { Editor } from './Editor';
+export interface TiptapNodeViewContext {
+    onDragStart: (event: DragEvent) => void;
+}
+export type ComponentInputProps<T> = Partial<T> & {
+    editor: Editor;
+    class?: string;
+    children?: Snippet;
+};

package/dist/svelte-tiptap-extends/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

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