@antscorp/antsomi-ui 1.3.7-beta.7 → 1.3.7-beta.70

package/es/components/organism/TextEditor/constants.js

@@ -330,3 +330,69 @@ export const DEFAULT_FONT_GROUPING = {
         label: 'Non-standard',
     },
 };
+/**
+ * All available toolbar actions in default order
+ */
+export const ALL_TOOLBAR_ACTIONS = [
+    // Row 1: Text formatting and styling
+    'fontFamily',
+    'fontSize',
+    'bold',
+    'italic',
+    'underline',
+    'link',
+    'strike',
+    'superscript',
+    'subscript',
+    'textTransform',
+    'textColor',
+    'backgroundColor',
+    'emoji',
+    'smartTag',
+    // Row 2: Lists, alignment, and utilities
+    'bulletList',
+    'orderedList',
+    'textAlign',
+    'lineSpacing',
+    'letterSpacing',
+    'indent',
+    'outdent',
+    'history',
+    'clearFormatting',
+];
+/**
+ * Default grouping of toolbar actions into rows
+ */
+export const DEFAULT_TOOLBAR_GROUPING = [
+    // Row 1
+    [
+        'fontFamily',
+        'fontSize',
+        'bold',
+        'italic',
+        'underline',
+        'link',
+        'strike',
+        'superscript',
+        'subscript',
+        'textTransform',
+        'textColor',
+        'backgroundColor',
+        'emoji',
+        'smartTag',
+    ],
+    // Row 2
+    [
+        'bulletList',
+        'orderedList',
+        'textAlign',
+        'lineSpacing',
+        'letterSpacing',
+        'indent',
+        'outdent',
+        'history',
+        'clearFormatting',
+    ],
+];
+// eslint-disable-next-line no-control-regex
+export const ATTR_WHITESPACE = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g;

package/es/components/organism/TextEditor/extensions/BubbleMenu/bubble-menu-plugin.d.ts

@@ -1,140 +1,18 @@
-import { arrow, autoPlacement, flip, hide, inline, offset, shift, size } from '@floating-ui/dom';
-import type { Editor } from '@tiptap/core';
-import type { EditorState, PluginView } from '@tiptap/pm/state';
-import { Plugin, PluginKey } from '@tiptap/pm/state';
+import type { EditorState } from '@tiptap/pm/state';
+import { BubbleMenuView as TiptapBubbleMenuView } from '@tiptap/extension-bubble-menu';
+import { Plugin } from '@tiptap/pm/state';
 import type { EditorView } from '@tiptap/pm/view';
-export interface BubbleMenuPluginProps {
-    /**
-     * The plugin key.
-     * @type {PluginKey | string}
-     * @default 'bubbleMenu'
-     */
-    pluginKey: PluginKey | string;
-    /**
-     * The editor instance.
-     */
-    editor: Editor;
-    /**
-     * The DOM element that contains your menu.
-     * @type {HTMLElement}
-     * @default null
-     */
-    element: HTMLElement;
-    container?: HTMLElement | (() => HTMLElement) | null;
-    /**
-     * The delay in milliseconds before the menu should be updated.
-     * This can be useful to prevent performance issues.
-     * @type {number}
-     * @default 250
-     */
-    updateDelay?: number;
-    /**
-     * The delay in milliseconds before the menu position should be updated on window resize.
-     * This can be useful to prevent performance issues.
-     * @type {number}
-     * @default 60
-     */
-    resizeDelay?: number;
-    /**
-     * A function that determines whether the menu should be shown or not.
-     * If this function returns `false`, the menu will be hidden, otherwise it will be shown.
-     */
-    shouldShow?: ((props: {
-        editor: Editor;
-        element: HTMLElement;
-        view: EditorView;
-        state: EditorState;
-        oldState?: EditorState;
-        from: number;
-        to: number;
-    }) => boolean) | null;
-    /**
-     * The options for the bubble menu. Those are passed to Floating UI and include options for the placement, offset, flip, shift, arrow, size, autoPlacement,
-     * hide, and inline middlewares.
-     * @default {}
-     * @see https://floating-ui.com/docs/computePosition#options
-     */
-    options?: {
-        strategy?: 'absolute' | 'fixed';
-        placement?: 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
-        offset?: Parameters<typeof offset>[0] | boolean;
-        flip?: Parameters<typeof flip>[0] | boolean;
-        shift?: Parameters<typeof shift>[0] | boolean;
-        arrow?: Parameters<typeof arrow>[0] | false;
-        size?: Parameters<typeof size>[0] | boolean;
-        autoPlacement?: Parameters<typeof autoPlacement>[0] | boolean;
-        hide?: Parameters<typeof hide>[0] | boolean;
-        inline?: Parameters<typeof inline>[0] | boolean;
-        onShow?: () => void;
-        onHide?: () => void;
-        onUpdate?: () => void;
-        onDestroy?: () => void;
-    };
-}
-export type BubbleMenuViewProps = BubbleMenuPluginProps & {
-    view: EditorView;
-};
-export declare class BubbleMenuView implements PluginView {
-    editor: Editor;
-    element: HTMLElement;
-    container?: HTMLElement | (() => HTMLElement) | null;
-    view: EditorView;
-    preventHide: boolean;
-    updateDelay: number;
-    resizeDelay: number;
-    private updateDebounceTimer;
-    private resizeDebounceTimer;
+import type { BubbleMenuPluginProps, BubbleMenuViewProps } from '@tiptap/extension-bubble-menu';
+export declare class BubbleMenuView extends TiptapBubbleMenuView {
     private resizeObserver;
-    private isVisible;
-    private floatingUIOptions;
-    shouldShow: Exclude<BubbleMenuPluginProps['shouldShow'], null>;
-    get middlewares(): {
-        name: string;
-        options?: any;
-        fn: (state: {
-            x: number;
-            y: number;
-            platform: import("@floating-ui/core").Platform;
-            placement: import("@floating-ui/utils").Placement;
-            initialPlacement: import("@floating-ui/utils").Placement;
-            strategy: import("@floating-ui/utils").Strategy;
-            middlewareData: import("@floating-ui/core").MiddlewareData;
-            rects: import("@floating-ui/utils").ElementRects;
-            elements: import("@floating-ui/dom").Elements;
-        }) => import("@floating-ui/core").MiddlewareReturn | Promise<import("@floating-ui/core").MiddlewareReturn>;
-    }[];
-    constructor({ editor, element, view, updateDelay, resizeDelay, container, shouldShow, options, }: BubbleMenuViewProps);
-    mousedownHandler: () => void;
-    dragstartHandler: () => void;
-    /**
-     * Handles the window resize event and element resize event to update the position of the bubble menu.
-     * It uses a debounce mechanism to prevent excessive updates.
-     * The delay is defined by the `resizeDelay` property.
-     */
-    resizeHandler: (delay?: number) => void;
-    /**
-     * Window resize handler that uses the default resize delay.
-     * This is a separate function to maintain the same reference for addEventListener/removeEventListener.
-     */
-    windowResizeHandler: () => void;
+    constructor(props: BubbleMenuViewProps);
     /**
      * Sets up ResizeObserver to watch for bubble menu element size changes.
      * This ensures the bubble menu position is updated when the element resizes
      * due to React component rendering different children, not just when the window resizes.
      */
     setupResizeObserver: () => void;
-    focusHandler: () => void;
-    blurHandler: ({ event }: {
-        event: FocusEvent;
-    }) => void;
-    updatePosition(): void;
-    update(view: EditorView, oldState?: EditorState): void;
-    handleDebouncedUpdate: (view: EditorView, oldState?: EditorState) => void;
-    getShouldShow(oldState?: EditorState): boolean | undefined;
     updateHandler: (view: EditorView, selectionChanged: boolean, docChanged: boolean, oldState?: EditorState) => void;
-    private getContainer;
-    show(): void;
-    hide(): void;
     destroy(): void;
 }
 export declare const BubbleMenuPlugin: (options: BubbleMenuPluginProps) => Plugin<any>;

package/es/components/organism/TextEditor/extensions/BubbleMenu/bubble-menu-plugin.js

@@ -1,123 +1,8 @@
-import { arrow, autoPlacement, computePosition, flip, hide, inline, offset, shift, size, } from '@floating-ui/dom';
-import { isTextSelection, posToDOMRect } from '@tiptap/core';
+import { BubbleMenuView as TiptapBubbleMenuView } from '@tiptap/extension-bubble-menu';
 import { Plugin, PluginKey } from '@tiptap/pm/state';
-import { CellSelection } from '@tiptap/pm/tables';
-function combineDOMRects(rect1, rect2) {
-    const top = Math.min(rect1.top, rect2.top);
-    const bottom = Math.max(rect1.bottom, rect2.bottom);
-    const left = Math.min(rect1.left, rect2.left);
-    const right = Math.max(rect1.right, rect2.right);
-    const width = right - left;
-    const height = bottom - top;
-    const x = left;
-    const y = top;
-    return new DOMRect(x, y, width, height);
-}
-export class BubbleMenuView {
-    get middlewares() {
-        const middlewares = [];
-        if (this.floatingUIOptions.flip) {
-            middlewares.push(flip(typeof this.floatingUIOptions.flip !== 'boolean'
-                ? this.floatingUIOptions.flip
-                : undefined));
-        }
-        if (this.floatingUIOptions.shift) {
-            middlewares.push(shift(typeof this.floatingUIOptions.shift !== 'boolean'
-                ? this.floatingUIOptions.shift
-                : undefined));
-        }
-        if (this.floatingUIOptions.offset) {
-            middlewares.push(offset(typeof this.floatingUIOptions.offset !== 'boolean'
-                ? this.floatingUIOptions.offset
-                : undefined));
-        }
-        if (this.floatingUIOptions.arrow) {
-            middlewares.push(arrow(this.floatingUIOptions.arrow));
-        }
-        if (this.floatingUIOptions.size) {
-            middlewares.push(size(typeof this.floatingUIOptions.size !== 'boolean'
-                ? this.floatingUIOptions.size
-                : undefined));
-        }
-        if (this.floatingUIOptions.autoPlacement) {
-            middlewares.push(autoPlacement(typeof this.floatingUIOptions.autoPlacement !== 'boolean'
-                ? this.floatingUIOptions.autoPlacement
-                : undefined));
-        }
-        if (this.floatingUIOptions.hide) {
-            middlewares.push(hide(typeof this.floatingUIOptions.hide !== 'boolean'
-                ? this.floatingUIOptions.hide
-                : undefined));
-        }
-        if (this.floatingUIOptions.inline) {
-            middlewares.push(inline(typeof this.floatingUIOptions.inline !== 'boolean'
-                ? this.floatingUIOptions.inline
-                : undefined));
-        }
-        return middlewares;
-    }
-    constructor({ editor, element, view, updateDelay = 250, resizeDelay = 60, container, shouldShow, options, }) {
-        this.preventHide = false;
-        this.isVisible = false;
-        this.floatingUIOptions = {
-            strategy: 'absolute',
-            placement: 'top',
-            offset: 8,
-            flip: {},
-            shift: {},
-            arrow: false,
-            size: false,
-            autoPlacement: false,
-            hide: false,
-            inline: false,
-            onShow: undefined,
-            onHide: undefined,
-            onUpdate: undefined,
-            onDestroy: undefined,
-        };
-        this.shouldShow = ({ view, state, from, to, }) => {
-            const { doc, selection } = state;
-            const { empty } = selection;
-            // Sometime check for `empty` is not enough.
-            // Doubleclick an empty paragraph returns a node size of 2.
-            // So we check also for an empty text size.
-            const isEmptyTextBlock = !doc.textBetween(from, to).length && isTextSelection(state.selection);
-            // When clicking on a element inside the bubble menu the editor "blur" event
-            // is called and the bubble menu item is focussed. In this case we should
-            // consider the menu as part of the editor and keep showing the menu
-            const isChildOfMenu = this.element.contains(document.activeElement);
-            const hasEditorFocus = view.hasFocus() || isChildOfMenu;
-            if (!hasEditorFocus || empty || isEmptyTextBlock || !this.editor.isEditable) {
-                return false;
-            }
-            return true;
-        };
-        this.mousedownHandler = () => {
-            this.preventHide = true;
-        };
-        this.dragstartHandler = () => {
-            this.hide();
-        };
-        /**
-         * Handles the window resize event and element resize event to update the position of the bubble menu.
-         * It uses a debounce mechanism to prevent excessive updates.
-         * The delay is defined by the `resizeDelay` property.
-         */
-        this.resizeHandler = (delay = this.resizeDelay) => {
-            if (this.resizeDebounceTimer) {
-                clearTimeout(this.resizeDebounceTimer);
-            }
-            this.resizeDebounceTimer = window.setTimeout(() => {
-                this.updatePosition();
-            }, delay);
-        };
-        /**
-         * Window resize handler that uses the default resize delay.
-         * This is a separate function to maintain the same reference for addEventListener/removeEventListener.
-         */
-        this.windowResizeHandler = () => {
-            this.resizeHandler();
-        };
+export class BubbleMenuView extends TiptapBubbleMenuView {
+    constructor(props) {
+        super(props);
         /**
          * Sets up ResizeObserver to watch for bubble menu element size changes.
          * This ensures the bubble menu position is updated when the element resizes
@@ -131,7 +16,7 @@ export class BubbleMenuView {
             // Timer for debouncing the visibility restoration after resize
             let resizeTimer = null;
             // Time to wait before showing the element again after resize stops
-            const DEBOUNCE_TIME = 100;
+            const DEBOUNCE_TIME = this.resizeDelay + 50;
             this.resizeObserver = new ResizeObserver(entries => {
                 for (const entry of entries) {
                     // Only handle resize events for the bubble menu element itself
@@ -145,7 +30,7 @@ export class BubbleMenuView {
                             clearTimeout(resizeTimer);
                         }
                         // Immediately update the position with no delay for responsive positioning
-                        this.resizeHandler(0);
+                        this.resizeHandler();
                         // Set up a debounced timer to restore visibility after resize activity stops
                         resizeTimer = setTimeout(() => {
                             // Use requestAnimationFrame to ensure the position update is complete
@@ -165,36 +50,6 @@ export class BubbleMenuView {
             // Also observe the editor view DOM element for editor size changes
             this.resizeObserver.observe(this.view.dom);
         };
-        this.focusHandler = () => {
-            // we use `setTimeout` to make sure `selection` is already updated
-            setTimeout(() => this.update(this.editor.view));
-        };
-        this.blurHandler = ({ event }) => {
-            if (this.preventHide) {
-                this.preventHide = false;
-                return;
-            }
-            if (event?.relatedTarget && this.element.parentNode?.contains(event.relatedTarget)) {
-                return;
-            }
-            if (event?.relatedTarget === this.editor.view.dom) {
-                return;
-            }
-            this.hide();
-        };
-        this.handleDebouncedUpdate = (view, oldState) => {
-            const selectionChanged = !oldState?.selection.eq(view.state.selection);
-            const docChanged = !oldState?.doc.eq(view.state.doc);
-            if (!selectionChanged && !docChanged) {
-                return;
-            }
-            if (this.updateDebounceTimer) {
-                clearTimeout(this.updateDebounceTimer);
-            }
-            this.updateDebounceTimer = window.setTimeout(() => {
-                this.updateHandler(view, selectionChanged, docChanged, oldState);
-            }, this.updateDelay);
-        };
         this.updateHandler = (view, selectionChanged, docChanged, oldState) => {
             const { composing } = view;
             const isSame = !selectionChanged && !docChanged;
@@ -209,155 +64,15 @@ export class BubbleMenuView {
             this.show();
             this.updatePosition();
         };
-        this.editor = editor;
-        this.element = element;
-        this.view = view;
-        this.updateDelay = updateDelay;
-        this.resizeDelay = resizeDelay;
-        this.container = container;
-        this.floatingUIOptions = {
-            ...this.floatingUIOptions,
-            ...options,
-        };
-        this.element.tabIndex = 0;
-        if (shouldShow) {
-            this.shouldShow = shouldShow;
-        }
-        const containerElement = this.getContainer();
-        if (containerElement === document.body) {
-            this.element.style.zIndex = '9999';
-        }
-        this.element.addEventListener('mousedown', this.mousedownHandler, { capture: true });
-        this.view.dom.addEventListener('dragstart', this.dragstartHandler);
-        this.editor.on('focus', this.focusHandler);
-        this.editor.on('blur', this.blurHandler);
-        window.addEventListener('resize', this.windowResizeHandler);
         this.setupResizeObserver();
-        this.update(view, view.state);
-        if (this.getShouldShow()) {
-            this.show();
-        }
-    }
-    updatePosition() {
-        const { selection } = this.editor.state;
-        const domRect = posToDOMRect(this.view, selection.from, selection.to);
-        let virtualElement = {
-            getBoundingClientRect: () => domRect,
-            getClientRects: () => [domRect],
-        };
-        // this is a special case for cell selections
-        if (selection instanceof CellSelection) {
-            const { $anchorCell, $headCell } = selection;
-            const from = $anchorCell ? $anchorCell.pos : $headCell.pos;
-            const to = $headCell ? $headCell.pos : $anchorCell.pos;
-            const fromDOM = this.view.nodeDOM(from);
-            const toDOM = this.view.nodeDOM(to);
-            if (!fromDOM || !toDOM) {
-                return;
-            }
-            const clientRect = fromDOM === toDOM
-                ? fromDOM.getBoundingClientRect()
-                : combineDOMRects(fromDOM.getBoundingClientRect(), toDOM.getBoundingClientRect());
-            virtualElement = {
-                getBoundingClientRect: () => clientRect,
-                getClientRects: () => [clientRect],
-            };
-        }
-        computePosition(virtualElement, this.element, {
-            placement: this.floatingUIOptions.placement,
-            strategy: this.floatingUIOptions.strategy,
-            middleware: this.middlewares,
-        }).then(({ x, y, strategy }) => {
-            this.element.style.width = 'max-content';
-            this.element.style.position = strategy;
-            this.element.style.left = `${x}px`;
-            this.element.style.top = `${y}px`;
-            if (this.isVisible && this.floatingUIOptions.onUpdate) {
-                this.floatingUIOptions.onUpdate();
-            }
-        });
-    }
-    update(view, oldState) {
-        const { state } = view;
-        const hasValidSelection = state.selection.from !== state.selection.to;
-        if (this.updateDelay > 0 && hasValidSelection) {
-            this.handleDebouncedUpdate(view, oldState);
-            return;
-        }
-        const selectionChanged = !oldState?.selection.eq(view.state.selection);
-        const docChanged = !oldState?.doc.eq(view.state.doc);
-        this.updateHandler(view, selectionChanged, docChanged, oldState);
-    }
-    getShouldShow(oldState) {
-        const { state } = this.view;
-        const { selection } = state;
-        // support for CellSelections
-        const { ranges } = selection;
-        const from = Math.min(...ranges.map(range => range.$from.pos));
-        const to = Math.max(...ranges.map(range => range.$to.pos));
-        const shouldShow = this.shouldShow?.({
-            editor: this.editor,
-            element: this.element,
-            view: this.view,
-            state,
-            oldState,
-            from,
-            to,
-        });
-        return shouldShow;
-    }
-    getContainer() {
-        if (!this.container) {
-            return this.view.dom.parentElement;
-        }
-        if (typeof this.container === 'function') {
-            return this.container();
-        }
-        return this.container;
-    }
-    show() {
-        if (this.isVisible) {
-            return;
-        }
-        this.element.style.visibility = 'visible';
-        this.element.style.opacity = '1';
-        const container = this.getContainer();
-        if (container) {
-            container.appendChild(this.element);
-        }
-        if (this.floatingUIOptions.onShow) {
-            this.floatingUIOptions.onShow();
-        }
-        this.isVisible = true;
-    }
-    hide() {
-        if (!this.isVisible) {
-            return;
-        }
-        this.element.style.visibility = 'hidden';
-        this.element.style.opacity = '0';
-        // remove from the parent element
-        this.element.remove();
-        if (this.floatingUIOptions.onHide) {
-            this.floatingUIOptions.onHide();
-        }
-        this.isVisible = false;
     }
     destroy() {
-        this.hide();
-        this.element.removeEventListener('mousedown', this.mousedownHandler, { capture: true });
-        this.view.dom.removeEventListener('dragstart', this.dragstartHandler);
-        window.removeEventListener('resize', this.windowResizeHandler);
-        this.editor.off('focus', this.focusHandler);
-        this.editor.off('blur', this.blurHandler);
+        super.destroy();
         // Cleanup ResizeObserver
         if (this.resizeObserver) {
             this.resizeObserver.disconnect();
             this.resizeObserver = undefined;
         }
-        if (this.floatingUIOptions.onDestroy) {
-            this.floatingUIOptions.onDestroy();
-        }
     }
 }
 export const BubbleMenuPlugin = (options) => new Plugin({

package/es/components/organism/TextEditor/extensions/BubbleMenu/bubble-menu.d.ts

@@ -1,5 +1,5 @@
 import { Extension } from '@tiptap/core';
-import type { BubbleMenuPluginProps } from './bubble-menu-plugin';
+import { type BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
 export type BubbleMenuOptions = Omit<BubbleMenuPluginProps, 'editor' | 'element'> & {
     /**
      * The DOM element that contains your menu.

package/es/components/organism/TextEditor/extensions/BubbleMenu/bubble-menu.js

@@ -11,6 +11,7 @@ export const BubbleMenu = Extension.create({
             element: null,
             pluginKey: 'bubbleMenu',
             updateDelay: undefined,
+            appendTo: undefined,
             shouldShow: null,
         };
     },
@@ -24,6 +25,9 @@ export const BubbleMenu = Extension.create({
                 editor: this.editor,
                 element: this.options.element,
                 updateDelay: this.options.updateDelay,
+                options: this.options.options,
+                appendTo: this.options.appendTo,
+                getReferencedVirtualElement: this.options.getReferencedVirtualElement,
                 shouldShow: this.options.shouldShow,
             }),
         ];

package/es/components/organism/TextEditor/extensions/Link.js

@@ -3,7 +3,7 @@ import { CUSTOM_LINK_EXTENSION_NAME, LINK_TEXT_COLOR } from '../constants';
 import { TextSelection } from '@tiptap/pm/state';
 import { dataAttrArrayToObject } from '@antscorp/antsomi-ui/es/utils';
 import { isEmpty, isEqual, map, toString } from 'lodash';
-import { getLinkMarkRanges, getLinkRange, isLinkColor } from '../utils';
+import { getLinkMarkRanges, getLinkRange, isLinkColor, textBetween } from '../utils';
 import { mergeAdjacentRanges } from '../utils/shared';
 export const CustomLink = TiptapLinkExtension.extend({
     name: CUSTOM_LINK_EXTENSION_NAME,
@@ -40,22 +40,41 @@ export const CustomLink = TiptapLinkExtension.extend({
             setCustomLink: ({ attrs, content }) => ({ state, chain }) => {
                 const { selection } = state;
                 const { from, to } = selection;
-                let linkContent = state.doc.textBetween(from, to);
-                if (content && linkContent !== content) {
-                    linkContent = content;
+                // Check if custom content is provided and different from current text
+                const currentText = textBetween(state, from, to);
+                const shouldUseCustomContent = content && currentText !== content;
+                if (shouldUseCustomContent) {
+                    // Use custom content as string (replace content)
+                    return chain()
+                        .focus()
+                        .deleteSelection()
+                        .insertContent(content)
+                        .command(({ tr }) => {
+                        const endPos = tr.selection.from;
+                        const startPos = endPos - content.length;
+                        tr.setSelection(TextSelection.create(tr.doc, startPos, endPos));
+                        return true;
+                    })
+                        .setLink({
+                        ...attrs,
+                        href: attrs?.href || './',
+                    })
+                        .command(({ tr }) => {
+                        const endPos = tr.selection.to;
+                        tr.setSelection(TextSelection.create(tr.doc, endPos, endPos));
+                        return true;
+                    })
+                        .run();
                 }
-                return (chain()
+                // Preserve existing content structure (atom nodes like smartTag)
+                // Just apply link mark on current selection without modifying content
+                return chain()
                     .focus()
-                    .deleteSelection()
-                    .insertContent(linkContent)
                     .command(({ tr }) => {
-                    const endPos = tr.selection.from;
-                    const startPos = endPos - linkContent.length;
-                    tr.setSelection(TextSelection.create(tr.doc, startPos, endPos));
+                    // Ensure selection is set correctly
+                    tr.setSelection(TextSelection.create(tr.doc, from, to));
                     return true;
                 })
-                    // .setUnderline()
-                    // .setColor(LINK_TEXT_COLOR)
                     .setLink({
                     ...attrs,
                     href: attrs?.href || './',
@@ -65,7 +84,7 @@ export const CustomLink = TiptapLinkExtension.extend({
                     tr.setSelection(TextSelection.create(tr.doc, endPos, endPos));
                     return true;
                 })
-                    .run());
+                    .run();
             },
             deleteCustomLink: predicate => ({ state, chain }) => {
                 const { doc } = state;
@@ -146,7 +165,7 @@ export const CustomLink = TiptapLinkExtension.extend({
                     to: state.doc.content.size,
                 }).filter(range => predicate(range.mark.attrs));
                 mergeAdjacentRanges(linkMarkRanges, (existingRanges, candidateRange) => existingRanges.some(range => mergeAdjacentEqualFn(range.mark.attrs, candidateRange.mark.attrs))).forEach(range => {
-                    const currentText = state.doc.textBetween(range.from, range.to);
+                    const currentText = textBetween(state, range.from, range.to);
                     const updatedText = updated(currentText);
                     if (currentText === updatedText)
                         return;

package/es/components/organism/TextEditor/extensions/ListItem.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Custom ListItem extension that extends the default TipTap ListItem
+ * with custom Backspace behavior to prevent merging paragraphs into lists
+ *
+ * This extension only overrides keyboard shortcuts while maintaining
+ * all other default ListItem functionality (HTML parsing, rendering, etc.)
+ *
+ * @see https://www.tiptap.dev/api/nodes/list-item
+ */
+export declare const CustomListItem: import("@tiptap/core").Node<import("@tiptap/extension-list").ListItemOptions, any>;