@antscorp/antsomi-ui 1.3.7-beta.2 → 1.3.7-beta.21

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,
+                };
+            }
+        }
+    }
+    // Collect all link ranges including adjacent ones with same href
+    const allLinkRanges = [];
+    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) {
+            allLinkRanges.push(linkRange);
+            processedRanges.add(rangeKey);
+            continue;
+        }
+        // Find all adjacent links with same href
+        const adjacentLinks = findAdjacentLinksWithSameHref(linkRange, href, linkEndingAt, linkStartingAt, state.doc);
+        adjacentLinks.forEach(range => {
+            const key = `${range.from}-${range.to}`;
+            if (!processedRanges.has(key)) {
+                allLinkRanges.push(range);
+                processedRanges.add(key);
+            }
+        });
+    }
+    // Calculate final range from all collected links
+    const newFrom = Math.min(...allLinkRanges.map(range => range.from), from);
+    const newTo = Math.max(...allLinkRanges.map(range => range.to), 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,

package/es/components/organism/index.d.ts

@@ -17,6 +17,6 @@ export * from './Login';
 export * from './BasicLogin';
 export * from './Filter';
 export { ActivityTimeline, type ActivityTimeLineProps } from './ActivityTimeline';
-export { TextEditor, TextEditorProvider, type TextEditorProps, type TextEditorRef, type TextEditorJSONContent, type TextEditorProviderProps, type TextEditorProviderRefHandler, type TextEditorComponentsRender, type FontConfig, CUSTOM_LINK_EXTENSION_NAME, } from './TextEditor';
+export { TextEditor, TextEditorProvider, type TextEditorWithProviderRef, type TextEditorAllProps, type TextEditorProps, type TextEditorRef, type TextEditorJSONContent, type TextEditorProviderProps, type TextEditorProviderRefHandler, type TextEditorComponentsRender, type FontConfig, CUSTOM_LINK_EXTENSION_NAME, } from './TextEditor';
 export { SQLGeneration, SQLGenerationIntegrations, SQLGenerationProvider, useSQLGenerationStore, type SQLGenerationProps, type SQLGenerationProviderProps, } from './SQLGeneration';
 export { WhatsappMobile, SAMPLE_PREVIEW } from './PreviewCollections';

package/es/hooks/index.d.ts

@@ -30,5 +30,5 @@ export * from './useElementSize';
 export * from './useIsMounted';
 export * from './useBroadcastedLocalStorage';
 export * from './useEyedropper';
-export * from './useCountdown';
 export * from './useFocusManagement';
+export * from './useCountdown';

package/es/hooks/index.js

@@ -49,5 +49,5 @@ export * from './useElementSize';
 export * from './useIsMounted';
 export * from './useBroadcastedLocalStorage';
 export * from './useEyedropper';
-export * from './useCountdown';
 export * from './useFocusManagement';
+export * from './useCountdown';

package/es/services/MediaTemplateDesign/UploadFile/index.js

@@ -7,7 +7,7 @@ export const getListingSavedMedia = async (domainUrl, slug, infos, page = 1) =>
     try {
         const { type = '', ...restInfos } = infos || {};
         const { data } = await services.mediaTemplateDesign.getList({
-            API_HOST: `${domainUrl}/${slug}/saved-media/index?type=${type}&page=${page}&limit=10`,
+            API_HOST: `${domainUrl}${slug ? `/${slug}` : ''}/saved-media/index?type=${type}&page=${page}&limit=10`,
         }, restInfos);
         let savedImages = data?.data || [];
         savedImages = savedImages.map((savedImage) => new SavedMedia(savedImage));
@@ -20,7 +20,7 @@ export const getListingSavedMedia = async (domainUrl, slug, infos, page = 1) =>
 export const createSavedMedia = (domainUrl, slug, infos, data) => {
     try {
         return services.mediaTemplateDesign.create({
-            API_HOST: `${domainUrl}/${slug}/saved-media/index`,
+            API_HOST: `${domainUrl}${slug ? `/${slug}` : ''}/saved-media/index`,
             ...data,
         }, infos);
     }
@@ -31,7 +31,7 @@ export const createSavedMedia = (domainUrl, slug, infos, data) => {
 export const deleteSavedMedia = (domainUrl, slug, infos, id) => {
     try {
         return services.mediaTemplateDesign.create({
-            API_HOST: `${domainUrl}/${slug}/saved-media/index/update-status`,
+            API_HOST: `${domainUrl}${slug ? `/${slug}` : ''}/saved-media/index/update-status`,
             media_id: [id],
             status: 80,
         }, infos);
@@ -52,7 +52,7 @@ export const uploadFile = async (domainUrl, slug, infos, files) => {
             fileType = 'origin-file';
         }
         const result = await services.mediaTemplateDesign.upload({
-            API_HOST: `${domainUrl}/${slug}/file-upload/${fileType}`,
+            API_HOST: `${domainUrl}${slug ? `/${slug}` : ''}/file-upload/${fileType}`,
             formData,
         }, restInfos);
         const uploadData = result ? result.data?.data : null;

package/es/types/index.d.ts

@@ -34,8 +34,8 @@ export * from './actionsButton';
 export * from './condition';
 export * from './api';
 export * from './date';
-export * from './unsubscribe';
 export * from './auth';
+export * from './unsubscribe';
 export type PayloadInfo = {
     url?: string;
     userId?: string;

package/es/types/index.js

@@ -9,5 +9,5 @@ export * from './actionsButton';
 export * from './condition';
 export * from './api';
 export * from './date';
-export * from './unsubscribe';
 export * from './auth';
+export * from './unsubscribe';

package/es/utils/common.d.ts

@@ -171,5 +171,5 @@ export declare const antsomiClsx: (componentName: string) => (className: string)
  * @returns A spreadable object of data-attributes
  */
 export declare const dataAttrArrayToObject: (attributes?: DataAttributes) => Record<string, string>;
-export declare function compareStrings(a: any, b: any): number;
 export declare function arrayToMapByProperty<T extends object, K extends keyof T>(array: T[], propertyName: K): Map<T[K], T>;
+export declare function compareStrings(a: any, b: any): number;

package/es/utils/common.js

@@ -780,9 +780,6 @@ export const dataAttrArrayToObject = (attributes = []) => attributes.reduce((out
     // return the object
     return output;
 }, {});
-export function compareStrings(a, b) {
-    return String(a).localeCompare(String(b));
-}
 export function arrayToMapByProperty(array, propertyName) {
     // Đảm bảo đầu vào là một mảng và không rỗng
     if (!Array.isArray(array) || array.length === 0) {
@@ -798,3 +795,6 @@ export function arrayToMapByProperty(array, propertyName) {
     // new Map() có thể nhận mảng này để khởi tạo Map
     return new Map(Object.entries(keyedObject));
 }
+export function compareStrings(a, b) {
+    return String(a).localeCompare(String(b));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.7-beta.2",
+  "version": "1.3.7-beta.21",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -93,11 +93,6 @@
     "@tiptap/react": "3.0.7",
     "@tiptap/starter-kit": "3.0.7",
     "@tiptap/suggestion": "3.0.7",
-    "@types/currency-formatter": "1.5.1",
-    "@types/react-custom-scrollbars": "^4.0.13",
-    "@types/react-frame-component": "^4.1.6",
-    "@types/react-router-dom": "^5.3.3",
-    "@types/react-window": "^1.8.8",
     "@yaireo/tagify": "^4.31.2",
     "ace-builds": "1.4.14",
     "animate.css": "^4.1.1",
@@ -153,8 +148,7 @@
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.10",
     "rehype-highlight": "^6.0.0",
-    "remark-gfm": "^3.0.1",
-    "remark-gfm-alias-story": "npm:remark-gfm@4.0.0",
+    "remark-gfm": "^4",
     "reselect": "^5.1.1",
     "socket.io-client": "^4.7.5",
     "string-replace-to-array": "^2.1.0",
@@ -171,7 +165,7 @@
   "devDependencies": {
     "@antscorp/antsomi-constants": "1.0.8-beta.1",
     "@antscorp/eslint-config-antsomi": "1.0.4",
-    "@antscorp/antsomi-locales": "^1.0.77",
+    "@antscorp/antsomi-locales": "^1.0.79",
     "@babel/cli": "^7.23.4",
     "@babel/core": "^7.21.3",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
@@ -186,17 +180,11 @@
     "@babel/preset-typescript": "^7.23.3",
     "@commitlint/cli": "17.5.0",
     "@commitlint/config-conventional": "17.4.4",
-    "@storybook/addon-docs": "^8.6.9",
-    "@storybook/addon-essentials": "^8.6.9",
-    "@storybook/addon-links": "^8.6.9",
-    "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
-    "@storybook/blocks": "^8.6.9",
-    "@storybook/manager-api": "^8.6.9",
-    "@storybook/react": "^8.6.9",
-    "@storybook/react-webpack5": "^8.6.9",
-    "@storybook/test": "^8.6.9",
-    "@storybook/theming": "^8.6.9",
+    "@storybook/addon-docs": "^9.1.10",
+    "@storybook/addon-links": "^9.1.10",
+    "@storybook/addon-styling-webpack": "^2.0.0",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
+    "@storybook/react-webpack5": "^9.1.10",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.0",
@@ -247,7 +235,7 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.12.0",
+    "eslint-plugin-storybook": "^9.1.10",
     "file-loader": "^6.2.0",
     "googleapis": "^142.0.0",
     "husky": "^8.0.3",
@@ -264,7 +252,7 @@
     "react-router-dom": "5.1.0 || 6.14.2",
     "sass": "^1.77.8",
     "sass-loader": "^16.0.1",
-    "storybook": "^8.6.9",
+    "storybook": "^9.1.10",
     "style-loader": "^4.0.0",
     "styled-components": "^5.3.9",
     "terser-webpack-plugin": "^5.3.10",
@@ -288,6 +276,6 @@
     "react-dom": ">=16.9.0",
     "react-router-dom": ">= 5.1.0",
     "@antscorp/antsomi-constants": ">=1.0.8-beta.1",
-    "@antscorp/antsomi-locales": ">=1.0.77"
+    "@antscorp/antsomi-locales": ">=1.0.79"
   }
 }