@antscorp/antsomi-ui 1.3.7-beta.6 → 1.3.7-beta.61

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>;

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

@@ -0,0 +1,93 @@
+import { ListItem } from '@tiptap/extension-list-item';
+/**
+ * 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 const CustomListItem = ListItem.extend({
+    addOptions() {
+        return {
+            HTMLAttributes: {
+                style: 'line-height:normal;',
+            },
+            bulletListTypeName: 'customUnorderedList',
+            orderedListTypeName: 'customOrderedList',
+        };
+    },
+    addKeyboardShortcuts() {
+        return {
+            // Keep default keyboard shortcuts from parent ListItem
+            Enter: () => this.editor.commands.splitListItem(this.name),
+            Tab: () => this.editor.commands.sinkListItem(this.name),
+            'Shift-Tab': () => this.editor.commands.liftListItem(this.name),
+            /**
+             * Custom Backspace handler to prevent merging empty paragraphs into lists
+             *
+             * Behavior:
+             * 1. Check if cursor is at the start of a paragraph
+             * 2. Check if the node before is a list (ordered or unordered)
+             * 3. If both conditions are true and paragraph is empty, delete the paragraph
+             * 4. Otherwise, use default backspace behavior
+             */
+            Backspace: () => {
+                const { state } = this.editor;
+                const { selection } = state;
+                const { $from, empty } = selection;
+                // Only handle if selection is empty (cursor position, not text selection)
+                if (!empty) {
+                    return false;
+                }
+                // Check if cursor is at the start of current node
+                const isAtStart = $from.parentOffset === 0;
+                if (!isAtStart) {
+                    return false;
+                }
+                // Get current node (should be a paragraph)
+                const currentNode = $from.parent;
+                // Only handle paragraphs
+                if (currentNode.type.name !== 'paragraph') {
+                    return false;
+                }
+                // Get the index of current paragraph in its parent (usually doc)
+                const paragraphDepth = $from.depth;
+                const indexInParent = $from.index(paragraphDepth - 1);
+                // Check if there's a node before (index > 0)
+                if (indexInParent === 0) {
+                    return false;
+                }
+                // Get parent node (usually doc) and the node before current paragraph
+                const parent = $from.node(paragraphDepth - 1);
+                const nodeBefore = parent.child(indexInParent - 1);
+                if (!nodeBefore) {
+                    return false;
+                }
+                // Check if the node before is a list (ordered or unordered)
+                const isListBefore = nodeBefore.type.name === this.options.orderedListTypeName ||
+                    nodeBefore.type.name === this.options.bulletListTypeName;
+                if (!isListBefore) {
+                    return false;
+                }
+                // Check if current paragraph is empty
+                const isParagraphEmpty = currentNode.content.size === 0;
+                if (!isParagraphEmpty) {
+                    // If paragraph has content, allow default backspace to handle
+                    return false;
+                }
+                // Calculate the exact positions of the paragraph node
+                // We need to delete from the position before the paragraph open tag
+                // to the position after the paragraph close tag
+                const paragraphPos = $from.before();
+                const paragraphEndPos = $from.after();
+                // Delete the entire paragraph node using deleteRange
+                return this.editor.commands.deleteRange({
+                    from: paragraphPos,
+                    to: paragraphEndPos,
+                });
+            },
+        };
+    },
+});

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

@@ -1,16 +1,15 @@
 import { Node } from '@tiptap/core';
 import { Attrs } from '@tiptap/pm/model';
-export type SmartTagAttrs = {
-    id: string;
-} & Partial<{
-    content: string;
-    tag: string;
-}>;
 /**
  * Represents the options for the SmartTag node.
  */
 export interface SmartTagOptions {
     HTMLAttributes: Record<string, unknown>;
+    /**
+     * Custom function to generate unique IDs for smart tags
+     * If not provided, falls back to uniqid library
+     */
+    generateSmartTagId?: () => string;
 }
 /**
  * Represents the options for the SmartTag node.