@flexiui/svelte-rich-text 0.0.60 → 0.0.62

package/dist/extensions/SemanticHeadings.js

@@ -0,0 +1,124 @@
+import { Extension } from '@tiptap/core';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+export const SemanticHeadings = Extension.create({
+    name: 'semanticHeadings',
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                key: new PluginKey('semanticHeadings'),
+                appendTransaction(transactions, oldState, newState) {
+                    // Solo validar si hubo cambios en el documento
+                    if (!transactions.some(tr => tr.docChanged)) {
+                        return null;
+                    }
+                    const doc = newState.doc;
+                    let headings = [];
+                    let h1Count = 0;
+                    // Recolectar todos los headings en orden
+                    doc.descendants((node, pos) => {
+                        if (node.type.name === 'heading') {
+                            headings.push({
+                                level: node.attrs.level,
+                                pos: pos
+                            });
+                            if (node.attrs.level === 1) {
+                                h1Count++;
+                            }
+                        }
+                    });
+                    // Solo puede haber un h1
+                    if (h1Count > 1) {
+                        return oldState.tr; // Revertir
+                    }
+                    // Si no hay headings, todo está bien
+                    if (headings.length === 0) {
+                        return null;
+                    }
+                    // Validar la jerarquía
+                    for (let i = 0; i < headings.length; i++) {
+                        const { level } = headings[i];
+                        // El primer heading debe ser h1
+                        if (i === 0 && level !== 1) {
+                            return oldState.tr; // Revertir
+                        }
+                        if (i > 0) {
+                            const prevLevel = headings[i - 1].level;
+                            // Solo puede:
+                            // - Mantener el mismo nivel (excepto h1)
+                            // - Retroceder a cualquier nivel superior (menor número, excepto h1 si ya existe)
+                            // - Profundizar solo un nivel (prevLevel + 1)
+                            const isValid = (level === prevLevel && level !== 1) || // Mismo nivel (pero no h1)
+                                (level < prevLevel && !(level === 1 && h1Count > 0)) || // Retroceder (pero no a h1 si ya existe)
+                                level === prevLevel + 1; // Profundizar un nivel
+                            if (!isValid) {
+                                return oldState.tr; // Revertir
+                            }
+                        }
+                    }
+                    return null; // Todo correcto
+                }
+            })
+        ];
+    },
+    addCommands() {
+        return {
+            canInsertHeading: (level) => ({ state }) => {
+                const doc = state.doc;
+                let lastHeadingLevel = null;
+                let hasH1 = false;
+                // Buscar el último heading y verificar si ya existe h1
+                doc.descendants((node) => {
+                    if (node.type.name === 'heading') {
+                        lastHeadingLevel = node.attrs.level;
+                        if (node.attrs.level === 1) {
+                            hasH1 = true;
+                        }
+                    }
+                });
+                // Si no hay headings, solo se permite h1
+                if (lastHeadingLevel === null) {
+                    return level === 1;
+                }
+                // No permitir h1 si ya existe uno
+                if (level === 1 && hasH1) {
+                    return false;
+                }
+                // Permitir:
+                // - Mismo nivel que el último (excepto h1)
+                // - Cualquier nivel superior (retroceder, excepto h1 si ya existe)
+                // - Un nivel más profundo
+                return ((level === lastHeadingLevel && level !== 1) || // Mismo nivel
+                    (level < lastHeadingLevel && !(level === 1 && hasH1)) || // Retroceder
+                    level === lastHeadingLevel + 1 // Profundizar uno
+                );
+            },
+            getAllowedHeadingLevels: () => ({ state }) => {
+                const doc = state.doc;
+                let lastHeadingLevel = null;
+                let hasH1 = false;
+                doc.descendants((node) => {
+                    if (node.type.name === 'heading') {
+                        lastHeadingLevel = node.attrs.level;
+                        if (node.attrs.level === 1) {
+                            hasH1 = true;
+                        }
+                    }
+                });
+                if (lastHeadingLevel === null) {
+                    return [1]; // Solo h1 permitido
+                }
+                const allowed = [];
+                // Permitir todos los niveles desde h2 (o h1 si no existe) hasta el último
+                const startLevel = hasH1 ? 2 : 1;
+                for (let i = startLevel; i <= lastHeadingLevel; i++) {
+                    allowed.push(i);
+                }
+                // Permitir también el siguiente nivel (si no es mayor que 6)
+                if (lastHeadingLevel < 6) {
+                    allowed.push(lastHeadingLevel + 1);
+                }
+                return allowed;
+            }
+        };
+    }
+});

package/dist/extensions/Table/TableCellNodeView.svelte

@@ -66,10 +66,6 @@ onMount(() => {
       if (node?.type?.name !== "tableCell" && node?.type?.name !== "tableHeader")
         return;
 
-      const nodeEl = editor.view.nodeDOM(getPos());
-      // console.log(nodeEl);
-
-      // console.log("update", transaction);
 
       const attrs = node.attrs;
       const { colspan, rowspan, colwidth } = attrs;

package/dist/getExtensions.d.ts

@@ -1,3 +1,10 @@
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        h1: {
+            toggleH1: () => ReturnType;
+        };
+    }
+}
 export declare function getRichTextExtensions(options?: {
     editable?: boolean;
     customExtensions?: any[];

package/dist/getExtensions.js

@@ -9,15 +9,23 @@ import { Mathematics } from "@tiptap/extension-mathematics";
 import { TableKit } from "@tiptap/extension-table";
 import { Audio } from "./extensions/Audio";
 import { NodeLineHeight } from "./extensions/NodeLineHeight";
+import { NodeFontSize } from "./extensions/NodeFontSize";
 import { MediaGridExtension } from "./extensions/MediaGrid/MediaGrid";
 import { MediaGridItemExtension } from "./extensions/MediaGrid/MediaGridItem";
 import { CustomTableCell } from "./extensions/Table/CustomTableCell";
 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({
     name: "h1",
-    group: "none", // <- prevent it from being considered as a `block` in the body of the document
+    addCommands() {
+        return {
+            toggleH1: () => ({ commands }) => {
+                return commands.toggleNode('h1', 'paragraph');
+            },
+        };
+    },
 }).configure({ levels: [1] });
 export function getRichTextExtensions(options) {
     const { editable = false, customExtensions = [] } = options ?? {};
@@ -25,7 +33,9 @@ export function getRichTextExtensions(options) {
         DocHeading,
         Heading.configure({ levels: [2, 3, 4, 5, 6] }),
         Highlight.configure({ multicolor: true }),
-        TextStyleKit,
+        TextStyleKit.configure({
+        // fontSize: false
+        }),
         StarterKit.configure({
             trailingNode: false,
             link: false,
@@ -52,6 +62,7 @@ export function getRichTextExtensions(options) {
             ],
         }),
         NodeLineHeight,
+        NodeFontSize,
         MediaGridExtension,
         MediaGridItemExtension,
         TableKit.configure({

package/dist/styles.css

@@ -12,10 +12,16 @@
   --fl-toolbar-sticky-position: 0;
   --fl-toolbar-z-index: 10;
   --fl-toolbar-padding: 6px;
+  --fl-toolbar-justify-content: center;
   --fl-toolbar-gap: 5px;
   --fl-toolbar-bg: #242424;
   --fl-toolbar-text-color: currentColor;
 
+  --fl-toolbar-btn-padding: 0 9px;
+  --fl-toolbar-btn-radius: 9px;
+  --fl-toolbar-btn-min-height: 34px;
+  --fl-toolbar-btn-min-width: var(--fl-toolbar-btn-min-height);
+
   --fl-doc-max-width: 1032px;
   --fl-doc-padding: 2rem;
   --fl-doc-bg: transparent;
@@ -39,6 +45,12 @@
   width: 100%;
 }
 
+.fl-rich-text-content {
+  img {
+    max-width: 100%;
+  }
+}
+
 .fl-rich-text-doc {
   padding: var(--fl-doc-padding, 2rem);
   background: var(--fl-doc-bg, transparent);
@@ -113,11 +125,11 @@
     backdrop-filter: blur(16px);
     border-radius: 14px;
     display: flex;
-    gap: 6px;
+    gap: 5px;
     position: relative;
     z-index: 9;
 
-    button {
+    .fl-bubble-menu-mark-button {
       border-radius: 9px;
       border: none;
       display: flex;
@@ -175,7 +187,7 @@
   flex-wrap: nowrap;
   overflow: auto;
   align-items: center;
-  justify-content: center;
+  justify-content: var(--fl-toolbar-justify-content);
   gap: var(--fl-toolbar-gap);
   padding: var(--fl-toolbar-padding);
   position: sticky;
@@ -184,6 +196,7 @@
   background: var(--fl-toolbar-bg, #242424);
   color: var(--fl-toolbar-text-color);
   border-radius: var(--fl-editor-radius);
+  margin-bottom: calc(var(--fl-toolbar-padding) * -1);
 }
 
 .fl-rich-text-toolbar-container {
@@ -198,11 +211,11 @@
   gap: var(--fl-toolbar-gap);
 
   button {
-    padding: 8px 8px;
+    padding: var(--fl-toolbar-btn-padding, 0 9px);
     flex: auto;
     border: none;
     background: rgba(255, 255, 255, 0.1);
-    border-radius: 8px;
+    border-radius: var(--fl-toolbar-btn-radius, 9px);
     color: currentColor;
     font-size: 14px;
     display: flex;
@@ -212,7 +225,8 @@
     gap: 2px;
     cursor: pointer;
     line-height: 1;
-    min-height: 32px;
+    min-height: var(--fl-toolbar-btn-min-height, 34px);
+  min-width: var(--fl-toolbar-btn-min-width, var(--fl-toolbar-btn-min-height, 34px));
 
     &.fl-font-size-button {
       font-size: 14px;
@@ -361,14 +375,23 @@ button {
   }
 }
 
+.fl-bubble-menu {
+  .fl-font-size-editor {
+    min-width: 30px;
+    min-height: 30px;
+    padding-inline: 6px;
+  }
+}
+
 .fl-font-size-editor {
   display: flex;
   align-items: center;
   gap: 4px;
-  padding: 0 6px;
-  border-radius: 8px;
+  padding: var(--fl-toolbar-btn-padding, 0 6px);
+  border-radius: var(--fl-toolbar-btn-radius, 9px);
   background: rgba(255, 255, 255, 0.1);
-  min-height: 32px;
+  min-height: var(--fl-toolbar-btn-min-height, 34px);
+  min-width: var(--fl-toolbar-btn-min-width, var(--fl-toolbar-btn-min-height, 34px));
 
   & button {
     border: none;
@@ -517,15 +540,39 @@ button {
   }
 }
 
-.fl-node-count-bar {
+.fl-counters-bar {
   background: var(--fl-toolbar-bg, #242424);
   border-top: 1px solid #333;
-  padding: 8px 16px;
+  padding: 9px 12px;
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 12px;
   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: 9px;
+
+  svg {
+    color: var(--fl-editor-accent-color);
+  }
+
+  &.fl-character-count--warning {
+    color: #ff5c33;
+
+    svg, span {
+      color: currentColor;
+    }
+  }
 }
 
 .fl-node-count-text {

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