@antscorp/antsomi-ui 2.0.86-text-editor-beta.5 → 2.0.86

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

@@ -1,175 +0,0 @@
-import { isMacOS } from '@tiptap/core';
-/**
- * Gets the appropriate bold font weight for a given font family
- * @param currentFontFamily The font family to find bold weight for
- * @param fonts Array of available font configurations
- * @param minBoldWeight Minimum weight considered bold (default 700)
- * @returns The first available bold weight for the font family, or minBoldWeight if none found
- */
-export const getBoldFontWeight = (currentFontFamily, fonts, minBoldWeight = 700) => {
-    if (!currentFontFamily || !fonts?.length)
-        return minBoldWeight;
-    const fontConfig = fonts.find(font => font.fontFamily.name === currentFontFamily);
-    return fontConfig?.fontWeight.find(weight => weight >= minBoldWeight) ?? minBoldWeight;
-};
-/**
- * Gets the modifier key based on the platform
- * @returns Platform-appropriate modifier key
- */
-export const getModifierKey = () => (isMacOS() ? '⌘' : 'Ctrl');
-/**
- * Formats a hotkey string with the appropriate modifier
- * @param key The key to format
- * @returns Formatted hotkey string
- */
-export const formatHotkey = (key) => {
-    const modifier = getModifierKey();
-    return `${modifier}+${key}`;
-};
-/**
- * Validates if a font family name is a generic CSS font
- * @param fontFamily Font family name to check
- * @returns true if it's a generic font family
- */
-export function isGenericFontFamily(fontFamily) {
-    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 genericFamilies.has(fontFamily.toLowerCase().trim());
-}
-/**
- * Extracts the primary font from a font-family string
- * @param fontFamily Font family string (may contain fallbacks)
- * @returns Primary font name
- */
-export function getPrimaryFontFamily(fontFamily) {
-    if (!fontFamily)
-        return '';
-    const fonts = fontFamily.split(',');
-    const primaryFont = fonts[0].trim();
-    // Remove quotes if present
-    return primaryFont.replace(/^["']|["']$/g, '');
-}
-/**
- * Checks if a font weight is considered bold
- * @param weight Font weight to check
- * @param threshold Bold threshold (default 600)
- * @returns true if weight is bold
- */
-export function isBoldWeight(weight, threshold = 600) {
-    const numericWeight = typeof weight === 'string' ? parseInt(weight, 10) : weight;
-    return !isNaN(numericWeight) && numericWeight >= threshold;
-}
-/**
- * Gets all available font weights for a font family
- * @param fontFamily Font family name
- * @param fonts Array of font configurations
- * @returns Array of available weights
- */
-export function getFontWeights(fontFamily, fonts) {
-    const fontConfig = fonts.find(font => font.fontFamily.name === fontFamily);
-    return fontConfig?.fontWeight || [400];
-}
-/**
- * Finds the closest available font weight
- * @param targetWeight Desired font weight
- * @param availableWeights Array of available weights
- * @returns Closest available weight
- */
-export function getClosestFontWeight(targetWeight, availableWeights) {
-    if (availableWeights.includes(targetWeight)) {
-        return targetWeight;
-    }
-    return availableWeights.reduce((closest, weight) => Math.abs(weight - targetWeight) < Math.abs(closest - targetWeight) ? weight : closest);
-}
-/**
- * Validates font configuration
- * @param fontConfig Font configuration to validate
- * @returns true if configuration is valid
- */
-export function isValidFontConfig(fontConfig) {
-    return !!(fontConfig.fontFamily?.name &&
-        fontConfig.fontWeight &&
-        Array.isArray(fontConfig.fontWeight) &&
-        fontConfig.fontWeight.length > 0 &&
-        fontConfig.fontWeight.every(weight => typeof weight === 'number' && weight > 0));
-}
-/**
- * Sorts font configurations alphabetically by name
- * @param fonts Array of font configurations
- * @returns Sorted array of font configurations
- */
-export function sortFontsByName(fonts) {
-    return [...fonts].sort((a, b) => a.fontFamily.name.localeCompare(b.fontFamily.name));
-}
-/**
- * Groups fonts by category (if category property exists)
- * @param fonts Array of font configurations
- * @returns Object with fonts grouped by category
- */
-export function groupFontsByCategory(fonts) {
-    const grouped = {};
-    fonts.forEach(font => {
-        const category = font.category || 'Other';
-        if (!grouped[category]) {
-            grouped[category] = [];
-        }
-        grouped[category].push(font);
-    });
-    return grouped;
-}
-/**
- * Checks if a font is web safe
- * @param fontFamily Font family name
- * @returns true if font is web safe
- */
-export function isWebSafeFont(fontFamily) {
-    const webSafeFonts = new Set([
-        'arial',
-        'helvetica',
-        'times new roman',
-        'times',
-        'courier new',
-        'courier',
-        'verdana',
-        'georgia',
-        'palatino',
-        'garamond',
-        'bookman',
-        'comic sans ms',
-        'trebuchet ms',
-        'arial black',
-        'impact',
-        'lucida sans unicode',
-        'tahoma',
-        'lucida console',
-    ]);
-    return webSafeFonts.has(fontFamily.toLowerCase().trim());
-}
-/**
- * Creates a font stack with appropriate fallbacks
- * @param primaryFont Primary font family
- * @param category Font category for fallback selection
- * @returns Complete font stack string
- */
-export function createFontStack(primaryFont, category = 'sans-serif') {
-    const fallbacks = {
-        serif: ['Georgia', 'Times New Roman', 'Times', 'serif'],
-        'sans-serif': ['Arial', 'Helvetica', 'sans-serif'],
-        monospace: ['Courier New', 'Courier', 'monospace'],
-    };
-    const stack = [primaryFont, ...fallbacks[category]];
-    return stack.join(', ');
-}

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

@@ -1,63 +0,0 @@
-/**
- * Restructures dynamic tags from Froala editor format to be compatible with Tiptap editor.
- * This function preserves styling and attributes of dynamic tags while cleaning up their structure.
- *
- * @param html - The HTML string containing dynamic tags
- * @param options - Configuration options for the restructuring process
- * @returns The restructured HTML string
- */
-export declare function restructureDynamicTagsWithOptions(html: string, options?: {
-    attributesToClone: string[];
-}): string;
-/**
- * Safely parses and processes HTML content for editor use
- * @param html - HTML string to process
- * @returns Processed HTML string
- */
-export declare function safeParseHTMLContent(html: string): string;
-/**
- * Sanitizes HTML by removing potentially dangerous elements and attributes
- * @param html - HTML string to sanitize
- * @returns Sanitized HTML string
- */
-export declare function sanitizeHTML(html: string): string;
-/**
- * Extracts text content from HTML
- * @param html - HTML string
- * @returns Plain text content
- */
-export declare function extractTextFromHTML(html: string): string;
-/**
- * Counts words in HTML content
- * @param html - HTML string
- * @returns Word count
- */
-export declare function countWordsInHTML(html: string): number;
-/**
- * Counts characters in HTML content
- * @param html - HTML string
- * @param includeSpaces - Whether to include spaces in count
- * @returns Character count
- */
-export declare function countCharactersInHTML(html: string, includeSpaces?: boolean): number;
-/**
- * Wraps text nodes with specified tag
- * @param html - HTML string
- * @param tagName - Tag name to wrap with
- * @param className - Optional class name for wrapper
- * @returns HTML with wrapped text nodes
- */
-export declare function wrapTextNodes(html: string, tagName?: string, className?: string): string;
-/**
- * Removes empty elements from HTML
- * @param html - HTML string
- * @returns HTML with empty elements removed
- */
-export declare function removeEmptyElements(html: string): string;
-/**
- * Normalizes whitespace in HTML
- * @param html - HTML string
- * @returns HTML with normalized whitespace
- */
-export declare function normalizeWhitespace(html: string): string;
-export declare const htmlMinifyForEmail: (htmlEditorContent: string) => string;

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

@@ -1,319 +0,0 @@
-import { SMART_TAG_HIGHLIGHT_BG } from '../constants';
-import { textStyleFromElStyle, appendTextStyleToEl } from './style';
-import tinycolor from 'tinycolor2';
-/**
- * Creates a clean span element for a dynamic tag with only the essential attributes
- *
- * @param doc - The document used to create the new element
- * @param originalSpan - The original dynamic tag span element
- * @param attributesToPreserve - List of attribute names to copy from the original span
- * @returns A new span element with preserved attributes
- */
-function createCleanDynamicSpan(doc, originalSpan, attributesToPreserve) {
-    const cleanSpan = doc.createElement('span');
-    // Preserve only the specified attributes
-    for (const attrName of attributesToPreserve) {
-        if (originalSpan.hasAttribute(attrName)) {
-            cleanSpan.setAttribute(attrName, originalSpan.getAttribute(attrName));
-        }
-    }
-    // Preserve the text content
-    cleanSpan.textContent = originalSpan.textContent?.trim() || '';
-    return cleanSpan;
-}
-/**
- * Extracts style wrapper elements that need to be preserved from the original dynamic tag
- *
- * @param doc - The document containing the dynamic tag
- * @param html - The original HTML string
- * @param dynamicSpan - The original dynamic tag span element
- * @returns Array of wrapper elements that provide styling
- */
-function extractStyleWrappers(doc, html, dynamicSpan) {
-    const styleWrappers = [];
-    // Create a temporary container for style computation
-    const tempStyleContainer = document.createElement('div');
-    tempStyleContainer.style.display = 'none';
-    document.body.appendChild(tempStyleContainer);
-    try {
-        // Extract computed styles from the original element
-        if (doc.body.firstElementChild) {
-            const tempDoc = new DOMParser().parseFromString(html, 'text/html');
-            if (tempDoc.body.firstElementChild) {
-                tempStyleContainer.appendChild(tempDoc.body.firstElementChild);
-                const originalDynamicElement = tempStyleContainer.querySelector(`span[data-dynamic-id="${dynamicSpan.dataset.dynamicId}"]`);
-                if (originalDynamicElement) {
-                    // Create a span with the computed text styles
-                    const computedTextStyle = textStyleFromElStyle(window.getComputedStyle(originalDynamicElement));
-                    // Remove background color if it matches the highlight color
-                    if (tinycolor.equals(computedTextStyle.backgroundColor, SMART_TAG_HIGHLIGHT_BG)) {
-                        computedTextStyle.backgroundColor = '';
-                    }
-                    const textStyleWrapper = document.createElement('span');
-                    appendTextStyleToEl(textStyleWrapper, computedTextStyle);
-                    styleWrappers.push(textStyleWrapper);
-                }
-            }
-        }
-        // Extract nested style wrappers
-        let nestedElement = dynamicSpan.firstElementChild;
-        while (nestedElement && nestedElement.children.length <= 1) {
-            styleWrappers.push(nestedElement);
-            nestedElement = nestedElement.firstElementChild || null;
-        }
-        return styleWrappers;
-    }
-    finally {
-        // Clean up the temporary container
-        document.body.removeChild(tempStyleContainer);
-    }
-}
-/**
- * Reconstructs the dynamic tag element hierarchy with preserved style wrappers
- *
- * @param doc - The document used to create new elements
- * @param baseSpan - The clean base span element for the dynamic tag
- * @param styleWrappers - Array of style wrapper elements to apply
- * @returns The reconstructed dynamic tag with preserved styling
- */
-function reconstructDynamicTagHierarchy(doc, baseSpan, styleWrappers) {
-    let resultNode = baseSpan;
-    // Apply style wrappers from innermost to outermost
-    styleWrappers.reverse().forEach(originalWrapper => {
-        const wrapperClone = doc.createElement(originalWrapper.tagName.toLowerCase());
-        // Clone all attributes from the original wrapper
-        for (let i = 0; i < originalWrapper.attributes.length; i++) {
-            const { name, value } = originalWrapper.attributes[i];
-            wrapperClone.setAttribute(name, value);
-        }
-        wrapperClone.appendChild(resultNode);
-        resultNode = wrapperClone;
-    });
-    return resultNode;
-}
-/**
- * Restructures dynamic tags from Froala editor format to be compatible with Tiptap editor.
- * This function preserves styling and attributes of dynamic tags while cleaning up their structure.
- *
- * @param html - The HTML string containing dynamic tags
- * @param options - Configuration options for the restructuring process
- * @returns The restructured HTML string
- */
-export function restructureDynamicTagsWithOptions(html, options = {
-    attributesToClone: [
-        'class',
-        'id',
-        'style',
-        'data-dynamic',
-        'data-dynamic-id',
-        'direction',
-        'unicode-bidi',
-        'text-align',
-        'background-color',
-        'color',
-    ],
-}) {
-    // Parse the HTML string into a DOM
-    const parser = new DOMParser();
-    const parsedDoc = parser.parseFromString(html, 'text/html');
-    // Find all dynamic tag spans
-    const dynamicTagSpans = parsedDoc.querySelectorAll('span[data-dynamic]');
-    // Process each dynamic span
-    dynamicTagSpans.forEach(originalDynamicSpan => {
-        // Step 1: Create a new clean span with essential attributes
-        const cleanDynamicSpan = createCleanDynamicSpan(parsedDoc, originalDynamicSpan, options.attributesToClone);
-        // Step 2: Extract style wrappers that need to be preserved
-        const styleWrappers = extractStyleWrappers(parsedDoc, html, originalDynamicSpan);
-        // Step 3: Reconstruct the element hierarchy with preserved styles
-        const restructuredDynamicTag = reconstructDynamicTagHierarchy(parsedDoc, cleanDynamicSpan, styleWrappers);
-        // Step 4: Replace the original span with the restructured node
-        originalDynamicSpan.replaceWith(restructuredDynamicTag);
-    });
-    return parsedDoc.body.innerHTML;
-}
-/**
- * Converts inherited text styles to computed styles for span elements in HTML content.
- * This function processes span elements to ensure text styles are explicitly set rather than inherited.
- *
- * @param html - The HTML string to process
- * @returns The processed HTML string with computed styles applied
- */
-const inheritStyleToComputedStyle = (html) => {
-    try {
-        // Create a new DOM parser and parse the HTML
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(html, 'text/html');
-        if (!doc.body) {
-            // eslint-disable-next-line no-console
-            console.warn('Failed to parse HTML: body not found');
-            return html;
-        }
-        // Create a hidden container
-        const container = document.createElement('div');
-        container.style.visibility = 'hidden';
-        container.innerHTML = doc.body.innerHTML;
-        // Add container to DOM temporarily to compute styles
-        document.body.appendChild(container);
-        // Process all span elements
-        const spanElements = container.querySelectorAll('span');
-        spanElements.forEach(span => {
-            const textStyle = textStyleFromElStyle(span.style);
-            const computedStyle = window.getComputedStyle(span);
-            // Only update styles if there are inherited values
-            const shouldUpdateStyle = Object.values(textStyle).some(value => value === 'inherit');
-            if (!shouldUpdateStyle) {
-                return;
-            }
-            // Update inherited styles with computed values
-            Object.entries(textStyle).forEach(([key, value]) => {
-                if (value === 'inherit' && key in span.style) {
-                    span.style[key] = computedStyle[key];
-                }
-            });
-        });
-        const resultHTML = container.innerHTML;
-        // Clean up
-        container.remove();
-        return resultHTML;
-    }
-    catch (error) {
-        // eslint-disable-next-line no-console
-        console.error('Error processing styles:', error);
-        return html; // Return original HTML in case of error
-    }
-};
-/**
- * Safely parses and processes HTML content for editor use
- * @param html - HTML string to process
- * @returns Processed HTML string
- */
-export function safeParseHTMLContent(html) {
-    let resultHTML = html;
-    const isFroala = html.includes('fr-box');
-    if (isFroala) {
-        // console.log('safeParseHTMLContent', html);
-        resultHTML = inheritStyleToComputedStyle(html);
-        // console.log('after inheritStyleToComputedStyle', resultHTML);
-        resultHTML = restructureDynamicTagsWithOptions(resultHTML);
-        // console.log('after restructureDynamicTagsWithOptions', resultHTML);
-    }
-    return resultHTML;
-}
-/**
- * Sanitizes HTML by removing potentially dangerous elements and attributes
- * @param html - HTML string to sanitize
- * @returns Sanitized HTML string
- */
-export function sanitizeHTML(html) {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(html, 'text/html');
-    // Remove script tags
-    const scripts = doc.querySelectorAll('script');
-    scripts.forEach(script => script.remove());
-    // Remove on* event attributes
-    const allElements = doc.querySelectorAll('*');
-    allElements.forEach(element => {
-        Array.from(element.attributes).forEach(attr => {
-            if (attr.name.startsWith('on')) {
-                element.removeAttribute(attr.name);
-            }
-        });
-    });
-    return doc.body.innerHTML;
-}
-/**
- * Extracts text content from HTML
- * @param html - HTML string
- * @returns Plain text content
- */
-export function extractTextFromHTML(html) {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(html, 'text/html');
-    return doc.body.textContent || '';
-}
-/**
- * Counts words in HTML content
- * @param html - HTML string
- * @returns Word count
- */
-export function countWordsInHTML(html) {
-    const text = extractTextFromHTML(html);
-    return text
-        .trim()
-        .split(/\s+/)
-        .filter(word => word.length > 0).length;
-}
-/**
- * Counts characters in HTML content
- * @param html - HTML string
- * @param includeSpaces - Whether to include spaces in count
- * @returns Character count
- */
-export function countCharactersInHTML(html, includeSpaces = true) {
-    const text = extractTextFromHTML(html);
-    return includeSpaces ? text.length : text.replace(/\s/g, '').length;
-}
-/**
- * Wraps text nodes with specified tag
- * @param html - HTML string
- * @param tagName - Tag name to wrap with
- * @param className - Optional class name for wrapper
- * @returns HTML with wrapped text nodes
- */
-export function wrapTextNodes(html, tagName = 'span', className) {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(html, 'text/html');
-    function wrapTextNodesRecursive(node) {
-        if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
-            const wrapper = doc.createElement(tagName);
-            if (className) {
-                wrapper.className = className;
-            }
-            wrapper.textContent = node.textContent;
-            node.parentNode?.replaceChild(wrapper, node);
-        }
-        else {
-            Array.from(node.childNodes).forEach(wrapTextNodesRecursive);
-        }
-    }
-    wrapTextNodesRecursive(doc.body);
-    return doc.body.innerHTML;
-}
-/**
- * Removes empty elements from HTML
- * @param html - HTML string
- * @returns HTML with empty elements removed
- */
-export function removeEmptyElements(html) {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(html, 'text/html');
-    function removeEmptyRecursive(node) {
-        Array.from(node.children).forEach(child => {
-            removeEmptyRecursive(child);
-            if (!child.textContent?.trim() && child.children.length === 0) {
-                child.remove();
-            }
-        });
-    }
-    removeEmptyRecursive(doc.body);
-    return doc.body.innerHTML;
-}
-/**
- * Normalizes whitespace in HTML
- * @param html - HTML string
- * @returns HTML with normalized whitespace
- */
-export function normalizeWhitespace(html) {
-    return html.replace(/\s+/g, ' ').replace(/>\s+</g, '><').trim();
-}
-export const htmlMinifyForEmail = (htmlEditorContent) => {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(htmlEditorContent, 'text/html');
-    const allElements = doc.body.querySelectorAll('*');
-    allElements.forEach(element => {
-        element.removeAttribute('spellcheck');
-        element.removeAttribute('class');
-        element.removeAttribute('contenteditable');
-    });
-    return doc.body.innerHTML;
-};

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

@@ -1,8 +0,0 @@
-export * from './selection';
-export * from './link';
-export * from './smartTag';
-export * from './style';
-export * from './font';
-export * from './htmlProcessing';
-export * from './menu';
-export * from './documentState';

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

@@ -1,16 +0,0 @@
-// Selection utilities
-export * from './selection';
-// Link utilities
-export * from './link';
-// Smart tag utilities
-export * from './smartTag';
-// Style utilities
-export * from './style';
-// Font utilities
-export * from './font';
-// HTML processing utilities
-export * from './htmlProcessing';
-// Menu utilities
-export * from './menu';
-// Document state utilities
-export * from './documentState';

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

@@ -1,100 +0,0 @@
-import { EditorState } from '@tiptap/pm/state';
-import { MarkRange } from '@tiptap/core';
-import { EditorView } from '@tiptap/pm/view';
-import { LinkHandler } from '../types';
-/**
- * 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
- * @returns true nếu cursor đang nằm trong link, false nếu không
- */
-export declare const isCursorInLink: (state: EditorState) => boolean;
-/**
- * Gets all link mark ranges within a specified range
- * @param params Object containing state, from and to positions
- * @returns Array of MarkRange objects for links
- */
-export declare const getLinkMarkRanges: (params: {
-    state: EditorState;
-    from: number;
-    to: number;
-}) => MarkRange[];
-/**
- * Gets the range of a link mark at a specific position
- * @param params Object containing state and optional position
- * @returns Link mark range or undefined
- */
-export declare const getLinkRange: (params: {
-    state: EditorState;
-    pos?: number;
-}) => void | import("@tiptap/core").Range;
-/**
- * Gets the first link mark in a range
- * @param params Object containing state, optional from and to positions
- * @returns Link mark or undefined
- */
-export declare const getLinkMark: (params: {
-    state: EditorState;
-    from?: number;
-    to?: number;
-}) => import("prosemirror-model").Mark | undefined;
-/**
- * Gets all link marks in a range
- * @param params Object containing state, from and to positions
- * @returns Array of link marks
- */
-export declare const getLinkMarks: (params: {
-    state: EditorState;
-    from: number;
-    to: number;
-}) => import("prosemirror-model").Mark[];
-/**
- * Gets all link IDs from a range
- * @param params Object containing state, optional from and to positions
- * @returns Array of link IDs
- */
-export declare const getLinkIdsFromRange: (params: {
-    state: EditorState;
-    from?: number;
-    to?: number;
-}) => string[];
-/**
- * Gets the active link ID and inactive links from a range
- * @param params Object containing state, optional from and to positions
- * @returns Object with activeId and inactiveLinks or undefined
- */
-export declare const getActiveLinkIdFromRange: (params: {
-    state: EditorState;
-    from?: number;
-    to?: number;
-}) => {
-    activeId: string;
-    inactiveLinks: string[];
-} | undefined;
-/**
- * Extends selection to include full link marks
- * @param state EditorState
- * @param from Start position
- * @param to End position
- * @returns Object with extended from, to positions and linkId
- */
-export declare const extendSelectionToFullLinks: (state: EditorState, from: number, to: number) => {
-    from: number;
-    to: number;
-    linkId?: undefined;
-} | {
-    from: number;
-    to: number;
-    linkId: string;
-};
-/**
- * Handles link actions (create or edit)
- * @param view EditorView instance
- * @param linkHandler Link handler callbacks
- */
-export declare function handleLinkAction(view: EditorView, linkHandler: LinkHandler | undefined): void;
-/**
- * Checks if the link menu should be shown
- * @param state EditorState
- * @returns true if link menu should be shown
- */
-export declare const isShowLinkMenu: (state: EditorState) => boolean;