@antscorp/antsomi-ui 2.0.82 → 2.0.83-text-editor-beta.1

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

@@ -0,0 +1,84 @@
+import { FontConfig } from '../types';
+/**
+ * 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 declare const getBoldFontWeight: (currentFontFamily: string, fonts: FontConfig[], minBoldWeight?: number) => number;
+/**
+ * Gets the modifier key based on the platform
+ * @returns Platform-appropriate modifier key
+ */
+export declare const getModifierKey: () => "⌘" | "Ctrl";
+/**
+ * Formats a hotkey string with the appropriate modifier
+ * @param key The key to format
+ * @returns Formatted hotkey string
+ */
+export declare const formatHotkey: (key: string) => string;
+/**
+ * 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 declare function isGenericFontFamily(fontFamily: string): boolean;
+/**
+ * Extracts the primary font from a font-family string
+ * @param fontFamily Font family string (may contain fallbacks)
+ * @returns Primary font name
+ */
+export declare function getPrimaryFontFamily(fontFamily: string): string;
+/**
+ * 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 declare function isBoldWeight(weight: string | number, threshold?: number): boolean;
+/**
+ * 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 declare function getFontWeights(fontFamily: string, fonts: FontConfig[]): number[];
+/**
+ * Finds the closest available font weight
+ * @param targetWeight Desired font weight
+ * @param availableWeights Array of available weights
+ * @returns Closest available weight
+ */
+export declare function getClosestFontWeight(targetWeight: number, availableWeights: number[]): number;
+/**
+ * Validates font configuration
+ * @param fontConfig Font configuration to validate
+ * @returns true if configuration is valid
+ */
+export declare function isValidFontConfig(fontConfig: FontConfig): boolean;
+/**
+ * Sorts font configurations alphabetically by name
+ * @param fonts Array of font configurations
+ * @returns Sorted array of font configurations
+ */
+export declare function sortFontsByName(fonts: FontConfig[]): FontConfig[];
+/**
+ * Groups fonts by category (if category property exists)
+ * @param fonts Array of font configurations
+ * @returns Object with fonts grouped by category
+ */
+export declare function groupFontsByCategory(fonts: FontConfig[]): Record<string, FontConfig[]>;
+/**
+ * Checks if a font is web safe
+ * @param fontFamily Font family name
+ * @returns true if font is web safe
+ */
+export declare function isWebSafeFont(fontFamily: string): boolean;
+/**
+ * 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 declare function createFontStack(primaryFont: string, category?: 'serif' | 'sans-serif' | 'monospace'): string;

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

@@ -0,0 +1,175 @@
+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

@@ -0,0 +1,62 @@
+/**
+ * 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;

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

@@ -0,0 +1,304 @@
+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 = inheritStyleToComputedStyle(html);
+    // console.log('after inheritStyleToComputedStyle', resultHTML);
+    resultHTML = restructureDynamicTagsWithOptions(resultHTML);
+    // console.log('after restructureDynamicTagsWithOptions', resultHTML);
+    // console.log(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();
+}

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,16 @@
+// 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';