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

package/es/components/organism/TextEditor/utils/link.js

@@ -4,6 +4,7 @@ import { isNoSelection } from './selection';
 import { isEmpty } from 'lodash';
 import { isLinkMarkRange } from '../types';
 import { CUSTOM_LINK_EXTENSION_NAME } from '../constants';
+import { textBetween } from './documentState';
 /**
  * Kiểm tra xem cursor có đang nằm trong một đoạn text có mark là link hay không
  * @param state EditorState của Tiptap/ProseMirror
@@ -84,7 +85,60 @@ export const getActiveLinkAttrsFromRange = (params) => {
     };
 };
 /**
- * Extends selection to include full link marks
+ * Builds lookup maps for adjacent link search by position
+ * @param allLinks All link ranges in document
+ * @returns Maps of links indexed by their start/end positions
+ */
+const buildLinkLookupMaps = (allLinks) => {
+    const linkEndingAt = new Map();
+    const linkStartingAt = new Map();
+    allLinks.forEach(link => {
+        if (!linkEndingAt.has(link.to)) {
+            linkEndingAt.set(link.to, []);
+        }
+        linkEndingAt.get(link.to).push(link);
+        if (!linkStartingAt.has(link.from)) {
+            linkStartingAt.set(link.from, []);
+        }
+        linkStartingAt.get(link.from).push(link);
+    });
+    return { linkEndingAt, linkStartingAt };
+};
+/**
+ * Finds all adjacent link ranges with the same href
+ * @param linkRange Current link range to check
+ * @param targetHref Target href to match
+ * @param linkEndingAt Map of links ending at each position
+ * @param linkStartingAt Map of links starting at each position
+ * @param doc Document node
+ * @returns Array of adjacent link ranges with same href (includes the input linkRange)
+ */
+const findAdjacentLinksWithSameHref = (linkRange, targetHref, linkEndingAt, linkStartingAt, doc) => {
+    const adjacentLinks = [linkRange];
+    // Find adjacent links before (links ending where current link starts)
+    let currentFrom = linkRange.from;
+    while (currentFrom > 0) {
+        const linksEndingHere = linkEndingAt.get(currentFrom) || [];
+        const adjacentBefore = linksEndingHere.find(range => range.mark.attrs.href === targetHref);
+        if (!adjacentBefore)
+            break;
+        adjacentLinks.unshift(adjacentBefore);
+        currentFrom = adjacentBefore.from;
+    }
+    // Find adjacent links after (links starting where current link ends)
+    let currentTo = linkRange.to;
+    while (currentTo < doc.content.size) {
+        const linksStartingHere = linkStartingAt.get(currentTo) || [];
+        const adjacentAfter = linksStartingHere.find(range => range.mark.attrs.href === targetHref);
+        if (!adjacentAfter)
+            break;
+        adjacentLinks.push(adjacentAfter);
+        currentTo = adjacentAfter.to;
+    }
+    return adjacentLinks;
+};
+/**
+ * Extends selection to include full link marks and adjacent links with same href
  * @param state EditorState
  * @param from Start position
  * @param to End position
@@ -93,17 +147,117 @@ export const getActiveLinkAttrsFromRange = (params) => {
 export const extendSelectionToFullLinks = (state, from, to) => {
     const { activeAttrs } = getActiveLinkAttrsFromRange({ state, from, to }) || {};
     const linkMarkRanges = getLinkMarkRanges({ state, from, to });
-    if (linkMarkRanges.length === 0 || isEmpty(activeAttrs))
+    if (linkMarkRanges.length === 0 || isEmpty(activeAttrs)) {
         return { from, to };
-    // Tính toán range mới
-    const newFrom = Math.min(...linkMarkRanges.map(range => range.from), from);
-    const newTo = Math.max(...linkMarkRanges.map(range => range.to), to);
+    }
+    // Get all document links and build lookup maps for adjacent search
+    const allDocLinks = getLinkMarkRanges({
+        state,
+        from: 0,
+        to: state.doc.content.size,
+    });
+    const { linkEndingAt, linkStartingAt } = buildLinkLookupMaps(allDocLinks);
+    // Check if single link has adjacents with same href
+    if (linkMarkRanges.length === 1) {
+        const singleLink = linkMarkRanges[0];
+        const { href } = singleLink.mark.attrs;
+        if (href) {
+            const hasAdjacentBefore = linkEndingAt
+                .get(singleLink.from)
+                ?.some(range => range.mark.attrs.href === href);
+            const hasAdjacentAfter = linkStartingAt
+                .get(singleLink.to)
+                ?.some(range => range.mark.attrs.href === href);
+            if (!hasAdjacentBefore && !hasAdjacentAfter) {
+                return {
+                    from: singleLink.from,
+                    to: singleLink.to,
+                    linkAttrs: singleLink.mark.attrs,
+                };
+            }
+        }
+    }
+    // Track min/max positions directly instead of collecting all ranges
+    let newFrom = from;
+    let newTo = to;
+    const processedRanges = new Set();
+    for (const linkRange of linkMarkRanges) {
+        const rangeKey = `${linkRange.from}-${linkRange.to}`;
+        if (processedRanges.has(rangeKey))
+            continue;
+        const { href } = linkRange.mark.attrs;
+        if (!href) {
+            newFrom = Math.min(newFrom, linkRange.from);
+            newTo = Math.max(newTo, linkRange.to);
+            processedRanges.add(rangeKey);
+            continue;
+        }
+        // Find all adjacent links with same href
+        const adjacentLinks = findAdjacentLinksWithSameHref(linkRange, href, linkEndingAt, linkStartingAt, state.doc);
+        // Since adjacentLinks is sorted (before links unshifted, after links pushed),
+        // first link has minimum from, last link has maximum to
+        newFrom = Math.min(newFrom, adjacentLinks[0].from);
+        newTo = Math.max(newTo, adjacentLinks[adjacentLinks.length - 1].to);
+        // Mark all adjacent links as processed
+        adjacentLinks.forEach(adjLink => {
+            processedRanges.add(`${adjLink.from}-${adjLink.to}`);
+        });
+    }
     return {
         from: newFrom,
         to: newTo,
         linkAttrs: activeAttrs,
     };
 };
+/**
+ * Gets all full link groups in the document (adjacent links with same href are grouped)
+ * @param state EditorState
+ * @returns Array of link groups with attrs and content
+ */
+export const getAllFullLinkGroups = (state) => {
+    const { doc } = state;
+    // Get all link ranges in document
+    const allLinks = getLinkMarkRanges({
+        state,
+        from: 0,
+        to: doc.content.size,
+    });
+    if (allLinks.length === 0)
+        return [];
+    // Build lookup maps for adjacent link search
+    const { linkEndingAt, linkStartingAt } = buildLinkLookupMaps(allLinks);
+    // Track processed ranges to avoid duplicates
+    const processedRanges = new Set();
+    const linkGroups = [];
+    // Process each link and find adjacent links with same href
+    for (const link of allLinks) {
+        const rangeKey = `${link.from}-${link.to}`;
+        if (processedRanges.has(rangeKey))
+            continue;
+        const { href } = link.mark.attrs;
+        if (!href) {
+            // Link without href, process individually
+            const content = textBetween(state, link.from, link.to);
+            linkGroups.push({ attrs: link.mark.attrs, content });
+            processedRanges.add(rangeKey);
+            continue;
+        }
+        // Find all adjacent links with same href
+        const adjacentLinks = findAdjacentLinksWithSameHref(link, href, linkEndingAt, linkStartingAt, doc);
+        // Mark all adjacent links as processed
+        adjacentLinks.forEach(adjLink => {
+            processedRanges.add(`${adjLink.from}-${adjLink.to}`);
+        });
+        // Calculate full link range
+        const fullFrom = adjacentLinks[0].from;
+        const fullTo = adjacentLinks[adjacentLinks.length - 1].to;
+        // Get content from full link range
+        const content = textBetween(state, fullFrom, fullTo);
+        // Add link group with attrs from first link and full content
+        linkGroups.push({ attrs: adjacentLinks[0].mark.attrs, content });
+    }
+    return linkGroups;
+};
 /**
  * Handles link actions (create or edit)
  * @param view EditorView instance
@@ -121,7 +275,7 @@ export function handleLinkAction(view, linkHandler) {
             view.dispatch(tr.setSelection(TextSelection.create(tr.doc, linkRange.from, linkRange.to)));
             linkHandler?.edit?.({
                 attrs: linkMark.attrs,
-                selectionText: state.doc.textBetween(linkRange.from, linkRange.to),
+                selectionText: textBetween(state, linkRange.from, linkRange.to),
             });
             return;
         }
@@ -129,7 +283,7 @@ export function handleLinkAction(view, linkHandler) {
     const { from: newFrom, to: newTo, linkAttrs } = extendSelectionToFullLinks(state, from, to);
     // Update selection to include full links
     view.dispatch(tr.setSelection(TextSelection.create(tr.doc, newFrom, newTo)));
-    const selectedText = state.doc.textBetween(newFrom, newTo);
+    const selectedText = textBetween(state, newFrom, newTo);
     if (linkAttrs) {
         linkHandler?.edit?.({
             attrs: linkAttrs,

package/es/components/organism/TextEditor/utils/menu.js

@@ -1,6 +1,7 @@
 import { isTextSelection } from '@tiptap/core';
 import { isNoSelection } from './selection';
 import { isCursorInLink } from './link';
+import { textBetween } from './documentState';
 /**
  * Default function to determine if bubble menu should be shown
  * @param params Object containing editor state and view information
@@ -19,7 +20,7 @@ export const defaultShouldShowBubbleMenu = (params) => {
         // Doubleclick an empty paragraph returns a node size of 2.
         // So we check also for an empty text size.
         // BUT: if it's an atom node, we should still show the bubble menu
-        const isEmptyTextBlock = !doc.textBetween(from, to).length && isTextSelection(state.selection) && !isAtomNode;
+        const isEmptyTextBlock = !textBetween(state, from, to).length && isTextSelection(state.selection) && !isAtomNode;
         // 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

package/es/components/organism/TextEditor/utils/selection.js

@@ -1,4 +1,5 @@
 import { isNodeSelection, isTextSelection } from '@tiptap/core';
+import { textBetween } from './documentState';
 /**
  * Kiểm tra xem có selection nào trong tài liệu hay không
  * @param state EditorState của Tiptap/ProseMirror
@@ -13,7 +14,7 @@ export const isNoSelection = (state) => {
         const { from, to } = selection;
         if (from === to)
             return true;
-        const selectedText = state.doc.textBetween(from, to);
+        const selectedText = textBetween(state, from, to);
         return selectedText.length === 0;
     }
     // Nếu là node selection, thì có selection
@@ -29,7 +30,7 @@ export const isNoSelection = (state) => {
 export const getSelectionText = (state) => {
     const { selection } = state;
     const { from, to } = selection;
-    return state.doc.textBetween(from, to);
+    return textBetween(state, from, to);
 };
 /**
  * Checks if selection spans multiple nodes

package/es/components/organism/TextEditor/utils/smartTag.js

@@ -1,3 +1,4 @@
+import { textBetween } from './documentState';
 /**
  * Handles smart tag actions (create or edit)
  * @param event Mouse event from the action
@@ -13,7 +14,7 @@ export const handleSmartTagAction = (event, view, smartTagHandler) => {
         smartTagHandler?.edit?.(smartTagId, event);
     }
     else {
-        const selectedText = state.doc.textBetween(from, to);
+        const selectedText = textBetween(state, from, to);
         if (selectedText) {
             smartTagHandler?.setNew?.({
                 selectionText: selectedText,