@antscorp/antsomi-ui 2.0.7 → 2.0.8-3.text-editor-beta.1

package/es/components/organism/TextEditor/utils/selection.d.ts

@@ -0,0 +1,25 @@
+import { EditorState } from '@tiptap/pm/state';
+/**
+ * Kiểm tra xem có selection nào trong tài liệu hay không
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns true nếu không có selection, false nếu có selection
+ */
+export declare const isNoSelection: (state: EditorState) => boolean;
+/**
+ * Gets the text content of the current selection
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns Selected text content
+ */
+export declare const getSelectionText: (state: EditorState) => string;
+/**
+ * Checks if selection spans multiple nodes
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns true if selection spans multiple nodes
+ */
+export declare const isMultiNodeSelection: (state: EditorState) => boolean;
+/**
+ * Gets the depth of the current selection
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns Selection depth
+ */
+export declare const getSelectionDepth: (state: EditorState) => number;

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

@@ -0,0 +1,57 @@
+import { isNodeSelection, isTextSelection } from '@tiptap/core';
+/**
+ * Kiểm tra xem có selection nào trong tài liệu hay không
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns true nếu không có selection, false nếu có selection
+ */
+export const isNoSelection = (state) => {
+    const { selection } = state;
+    if (selection.empty)
+        return true;
+    // Kiểm tra trường hợp text selection không có nội dung
+    if (isTextSelection(selection)) {
+        const { from, to } = selection;
+        if (from === to)
+            return true;
+        const selectedText = state.doc.textBetween(from, to);
+        return selectedText.length === 0;
+    }
+    // Nếu là node selection, thì có selection
+    if (isNodeSelection(selection))
+        return false;
+    return false;
+};
+/**
+ * Gets the text content of the current selection
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns Selected text content
+ */
+export const getSelectionText = (state) => {
+    const { selection } = state;
+    const { from, to } = selection;
+    return state.doc.textBetween(from, to);
+};
+/**
+ * Checks if selection spans multiple nodes
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns true if selection spans multiple nodes
+ */
+export const isMultiNodeSelection = (state) => {
+    const { selection } = state;
+    if (selection.empty)
+        return false;
+    const { from, to } = selection;
+    const $from = state.doc.resolve(from);
+    const $to = state.doc.resolve(to);
+    return $from.parent !== $to.parent;
+};
+/**
+ * Gets the depth of the current selection
+ * @param state EditorState của Tiptap/ProseMirror
+ * @returns Selection depth
+ */
+export const getSelectionDepth = (state) => {
+    const { selection } = state;
+    const { $from } = selection;
+    return $from.depth;
+};

package/es/components/organism/TextEditor/utils/smartTag.d.ts

@@ -0,0 +1,49 @@
+import { EditorView } from '@tiptap/pm/view';
+import { SmartTagHandler } from '../types';
+/**
+ * Handles smart tag actions (create or edit)
+ * @param event Mouse event from the action
+ * @param view EditorView instance
+ * @param smartTagHandler Smart tag handler callbacks
+ */
+export declare const handleSmartTagAction: (event: React.MouseEvent, view: EditorView, smartTagHandler?: SmartTagHandler) => void;
+/**
+ * Gets smart tag node at a specific position
+ * @param view EditorView instance
+ * @param pos Position to check
+ * @returns Smart tag node or null
+ */
+export declare const getSmartTagAtPosition: (view: EditorView, pos: number) => import("prosemirror-model").Node | null;
+/**
+ * Gets all smart tags in the document
+ * @param view EditorView instance
+ * @returns Array of smart tag nodes with their positions
+ */
+export declare const getAllSmartTags: (view: EditorView) => {
+    node: any;
+    pos: number;
+}[];
+/**
+ * Finds smart tag by ID
+ * @param view EditorView instance
+ * @param id Smart tag ID to find
+ * @returns Smart tag node and position or null
+ */
+export declare const findSmartTagById: (view: EditorView, id: string) => null;
+/**
+ * Checks if position is inside a smart tag
+ * @param view EditorView instance
+ * @param pos Position to check
+ * @returns true if position is inside a smart tag
+ */
+export declare const isPositionInSmartTag: (view: EditorView, pos: number) => boolean;
+/**
+ * Gets smart tag content at cursor position
+ * @param view EditorView instance
+ * @returns Smart tag content or null
+ */
+export declare const getSmartTagAtCursor: (view: EditorView) => {
+    id: any;
+    content: any;
+    node: import("prosemirror-model").Node;
+} | null;

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

@@ -0,0 +1,89 @@
+/**
+ * Handles smart tag actions (create or edit)
+ * @param event Mouse event from the action
+ * @param view EditorView instance
+ * @param smartTagHandler Smart tag handler callbacks
+ */
+export const handleSmartTagAction = (event, view, smartTagHandler) => {
+    const { state } = view;
+    const { from, to } = state.selection;
+    const smartTagNode = state.doc.nodeAt(from);
+    const smartTagId = smartTagNode?.attrs.id;
+    if (smartTagId) {
+        smartTagHandler?.edit?.(smartTagId, event);
+    }
+    else {
+        const selectedText = state.doc.textBetween(from, to);
+        if (selectedText) {
+            smartTagHandler?.setNew?.({
+                selectionText: selectedText,
+            });
+        }
+    }
+};
+/**
+ * Gets smart tag node at a specific position
+ * @param view EditorView instance
+ * @param pos Position to check
+ * @returns Smart tag node or null
+ */
+export const getSmartTagAtPosition = (view, pos) => {
+    const node = view.state.doc.nodeAt(pos);
+    if (node && node.type.name === 'smartTag') {
+        return node;
+    }
+    return null;
+};
+/**
+ * Gets all smart tags in the document
+ * @param view EditorView instance
+ * @returns Array of smart tag nodes with their positions
+ */
+export const getAllSmartTags = (view) => {
+    const smartTags = [];
+    view.state.doc.descendants((node, pos) => {
+        if (node.type.name === 'smartTag') {
+            smartTags.push({ node, pos });
+        }
+    });
+    return smartTags;
+};
+/**
+ * Finds smart tag by ID
+ * @param view EditorView instance
+ * @param id Smart tag ID to find
+ * @returns Smart tag node and position or null
+ */
+export const findSmartTagById = (view, id) => {
+    let result = null;
+    view.state.doc.descendants((node, pos) => {
+        if (node.type.name === 'smartTag' && node.attrs.id === id) {
+            result = { node, pos };
+            return false; // Stop traversal
+        }
+    });
+    return result;
+};
+/**
+ * Checks if position is inside a smart tag
+ * @param view EditorView instance
+ * @param pos Position to check
+ * @returns true if position is inside a smart tag
+ */
+export const isPositionInSmartTag = (view, pos) => getSmartTagAtPosition(view, pos) !== null;
+/**
+ * Gets smart tag content at cursor position
+ * @param view EditorView instance
+ * @returns Smart tag content or null
+ */
+export const getSmartTagAtCursor = (view) => {
+    const { selection } = view.state;
+    const node = getSmartTagAtPosition(view, selection.from);
+    return node
+        ? {
+            id: node.attrs.id,
+            content: node.attrs.content,
+            node,
+        }
+        : null;
+};

package/es/components/organism/TextEditor/utils/style.d.ts

@@ -0,0 +1,78 @@
+import { TextStyle } from '../types';
+/**
+ * Extracts text style from element's computed style
+ * @param style CSSStyleDeclaration from element
+ * @returns Partial TextStyle object
+ */
+export declare const textStyleFromElStyle: <T extends CSSStyleDeclaration>(style: T) => Partial<TextStyle>;
+/**
+ * Applies text style to HTML element
+ * @param el HTML element to apply styles to
+ * @param style TextStyle object
+ */
+export declare const appendTextStyleToEl: (el: HTMLElement, style: Partial<TextStyle>) => void;
+/**
+ * Converts a style object to a CSS string representation
+ * @param styleObj The style object to convert
+ * @returns The CSS string representation
+ * @example
+ * styleObjectToString({ color: 'red', fontSize: '16px' })
+ * // returns "color: red; font-size: 16px"
+ */
+export declare function styleObjectToString(styleObj: Record<string, unknown>): string;
+/**
+ * Normalizes a font-family string by adding quotes when needed
+ * @param fontFamily The font-family string to normalize
+ * @returns The normalized font-family string
+ * @description
+ * - Preserves existing quoted names
+ * - Doesn't quote generic families (e.g. sans-serif)
+ * - Quotes names containing spaces or special characters
+ * @example
+ * normalizeFontFamily('Arial, Helvetica, sans-serif')
+ * // returns 'Arial, Helvetica, sans-serif'
+ *
+ * normalizeFontFamily('Times New Roman, serif')
+ * // returns '"Times New Roman", serif'
+ */
+export declare function normalizeFontFamily(fontFamily: string): string;
+/**
+ * Creates font-family string with fallback
+ * @param fontFamily Primary font family
+ * @param defaultFont Default fallback font
+ * @returns Normalized font-family string with fallback
+ */
+export declare const fontWithFallback: (fontFamily: string, defaultFont?: string) => string;
+/**
+ * Checks if a color matches the link color
+ * @param color Color to check
+ * @returns true if color matches link color
+ */
+export declare const isLinkColor: (color: string) => boolean;
+/**
+ * Extracts CSS variables from a style object
+ * @param styleObj Style object that may contain CSS variables
+ * @returns Object with CSS variables and regular styles separated
+ */
+export declare function extractCSSVariables(styleObj: Record<string, unknown>): {
+    cssVariables: Record<string, unknown>;
+    regularStyles: Record<string, unknown>;
+};
+/**
+ * Merges multiple text styles with priority
+ * @param styles Array of text styles to merge
+ * @returns Merged text style
+ */
+export declare function mergeTextStyles(...styles: Partial<TextStyle>[]): Partial<TextStyle>;
+/**
+ * Validates if a text style is complete
+ * @param style Text style to validate
+ * @returns true if all required properties are present
+ */
+export declare function isCompleteTextStyle(style: Partial<TextStyle>): style is TextStyle;
+/**
+ * Converts text style to CSS style object
+ * @param textStyle Text style object
+ * @returns CSS style object
+ */
+export declare function textStyleToCSSStyle(textStyle: Partial<TextStyle>): React.CSSProperties;

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

@@ -0,0 +1,193 @@
+import { DEFAULT_TEXT_STYLE, LINK_TEXT_COLOR } from '../constants';
+import { uniqBy } from 'lodash';
+import tinycolor from 'tinycolor2';
+/**
+ * Extracts text style from element's computed style
+ * @param style CSSStyleDeclaration from element
+ * @returns Partial TextStyle object
+ */
+export const textStyleFromElStyle = (style) => ({
+    color: style.color || DEFAULT_TEXT_STYLE.color,
+    fontFamily: style.fontFamily || DEFAULT_TEXT_STYLE.fontFamily,
+    fontSize: style.fontSize || DEFAULT_TEXT_STYLE.fontSize,
+    backgroundColor: style.backgroundColor,
+    lineHeight: style.lineHeight || DEFAULT_TEXT_STYLE.lineHeight,
+});
+/**
+ * Applies text style to HTML element
+ * @param el HTML element to apply styles to
+ * @param style TextStyle object
+ */
+export const appendTextStyleToEl = (el, style) => {
+    if (style.color) {
+        el.style.color = style.color;
+    }
+    if (style.fontSize) {
+        el.style.fontSize = style.fontSize;
+    }
+    if (style.fontFamily) {
+        el.style.fontFamily = style.fontFamily;
+    }
+    if (style.backgroundColor) {
+        el.style.backgroundColor = style.backgroundColor;
+    }
+    if (style.lineHeight) {
+        el.style.lineHeight = style.lineHeight;
+    }
+    if (style.fontWeight) {
+        el.style.fontWeight = style.fontWeight;
+    }
+};
+/**
+ * Converts a style object to a CSS string representation
+ * @param styleObj The style object to convert
+ * @returns The CSS string representation
+ * @example
+ * styleObjectToString({ color: 'red', fontSize: '16px' })
+ * // returns "color: red; font-size: 16px"
+ */
+export function styleObjectToString(styleObj) {
+    return Object.entries(styleObj)
+        .map(([key, value]) => {
+        // Nếu key đã là kebab-case hoặc bắt đầu bằng dấu '-', giữ nguyên
+        const isPrefixed = key.startsWith('-');
+        const kebabKey = isPrefixed ? key : key.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
+        return `${kebabKey}: ${value}`;
+    })
+        .join('; ');
+}
+/**
+ * Normalizes a font-family string by adding quotes when needed
+ * @param fontFamily The font-family string to normalize
+ * @returns The normalized font-family string
+ * @description
+ * - Preserves existing quoted names
+ * - Doesn't quote generic families (e.g. sans-serif)
+ * - Quotes names containing spaces or special characters
+ * @example
+ * normalizeFontFamily('Arial, Helvetica, sans-serif')
+ * // returns 'Arial, Helvetica, sans-serif'
+ *
+ * normalizeFontFamily('Times New Roman, serif')
+ * // returns '"Times New Roman", serif'
+ */
+export function normalizeFontFamily(fontFamily) {
+    if (!fontFamily || typeof fontFamily !== 'string')
+        return '';
+    const genericFamilies = new Set([
+        'serif',
+        'sans-serif',
+        'monospace',
+        'cursive',
+        'fantasy',
+        'system-ui',
+        'ui-serif',
+        'ui-sans-serif',
+        'ui-monospace',
+        'ui-rounded',
+        'math',
+        'emoji',
+        'fangsong',
+    ]);
+    return uniqBy(fontFamily.split(','), name => name.trim())
+        .map(name => {
+        const trimmed = name.trim();
+        // Preserve already quoted names
+        const isQuoted = (trimmed.startsWith('"') && trimmed.endsWith('"')) ||
+            (trimmed.startsWith("'") && trimmed.endsWith("'"));
+        if (isQuoted)
+            return trimmed;
+        // Do not quote generic family names
+        if (genericFamilies.has(trimmed))
+            return trimmed;
+        // Quote if contains whitespace or special characters
+        const needsQuotes = /[^\w-]/.test(trimmed);
+        return needsQuotes ? `"${trimmed}"` : trimmed;
+    })
+        .join(', ');
+}
+/**
+ * Creates font-family string with fallback
+ * @param fontFamily Primary font family
+ * @param defaultFont Default fallback font
+ * @returns Normalized font-family string with fallback
+ */
+export const fontWithFallback = (fontFamily, defaultFont = DEFAULT_TEXT_STYLE.fontFamily) => normalizeFontFamily(fontFamily ? `${fontFamily}, ${defaultFont}` : defaultFont);
+/**
+ * Checks if a color matches the link color
+ * @param color Color to check
+ * @returns true if color matches link color
+ */
+export const isLinkColor = (color) => tinycolor.equals(color, LINK_TEXT_COLOR);
+/**
+ * Extracts CSS variables from a style object
+ * @param styleObj Style object that may contain CSS variables
+ * @returns Object with CSS variables and regular styles separated
+ */
+export function extractCSSVariables(styleObj) {
+    const cssVariables = {};
+    const regularStyles = {};
+    Object.entries(styleObj).forEach(([key, value]) => {
+        if (key.startsWith('--')) {
+            cssVariables[key] = value;
+        }
+        else {
+            regularStyles[key] = value;
+        }
+    });
+    return { cssVariables, regularStyles };
+}
+/**
+ * Merges multiple text styles with priority
+ * @param styles Array of text styles to merge
+ * @returns Merged text style
+ */
+export function mergeTextStyles(...styles) {
+    return styles.reduce((merged, style) => ({
+        ...merged,
+        ...Object.fromEntries(Object.entries(style).filter(([_, value]) => value !== undefined && value !== null)),
+    }), {});
+}
+/**
+ * Validates if a text style is complete
+ * @param style Text style to validate
+ * @returns true if all required properties are present
+ */
+export function isCompleteTextStyle(style) {
+    const requiredProps = [
+        'fontFamily',
+        'fontSize',
+        'color',
+        'backgroundColor',
+        'lineHeight',
+        'fontWeight',
+    ];
+    return requiredProps.every(prop => style[prop] !== undefined);
+}
+/**
+ * Converts text style to CSS style object
+ * @param textStyle Text style object
+ * @returns CSS style object
+ */
+export function textStyleToCSSStyle(textStyle) {
+    const cssStyle = {};
+    if (textStyle.fontFamily) {
+        cssStyle.fontFamily = textStyle.fontFamily;
+    }
+    if (textStyle.fontSize) {
+        cssStyle.fontSize = textStyle.fontSize;
+    }
+    if (textStyle.color) {
+        cssStyle.color = textStyle.color;
+    }
+    if (textStyle.backgroundColor) {
+        cssStyle.backgroundColor = textStyle.backgroundColor;
+    }
+    if (textStyle.lineHeight) {
+        cssStyle.lineHeight = textStyle.lineHeight;
+    }
+    if (textStyle.fontWeight) {
+        cssStyle.fontWeight = textStyle.fontWeight;
+    }
+    return cssStyle;
+}

package/es/components/organism/TicketEditor/Content.d.ts

@@ -1,13 +1,11 @@
-import React from 'react';
-declare const Content: ({ apiKey, domain, portalId, token, action, ticketId, listUsers, domainTicket, config, ticketDetails, listComment, userId, fetchgetTicketComments, isLoadingComment, handleCloseDrawer, setIsSuccessCreated, isLoadingDetails, isLoadingDataSouce, accountManage, timeZone, isLoadingSelectedAccount, accountEdit, initOwnerId, isAllAccount, setDrawerHeader, openDrawer, dataSelectInput, setDataSelectInput, }: {
-    apiKey: any;
-    domain: any;
+declare const Content: ({ portalId, token, action, ticketId, listUsers, domainTicket, domainUpload, config, ticketDetails, listComment, userId, fetchgetTicketComments, isLoadingComment, handleCloseDrawer, setIsSuccessCreated, isLoadingDetails, isLoadingDataSouce, accountManage, timeZone, isLoadingSelectedAccount, accountEdit, initOwnerId, isAllAccount, openDrawer, dataSelectInput, setDataSelectInput, }: {
     portalId: any;
     token: any;
     action: any;
     ticketId: any;
     listUsers: any;
     domainTicket: any;
+    domainUpload: any;
     config: any;
     ticketDetails: any;
     listComment: any;
@@ -24,9 +22,8 @@ declare const Content: ({ apiKey, domain, portalId, token, action, ticketId, lis
     accountEdit: any;
     initOwnerId: any;
     isAllAccount: any;
-    setDrawerHeader: any;
     openDrawer: any;
     dataSelectInput: any;
     setDataSelectInput: any;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default Content;