@antscorp/antsomi-ui 2.0.92-text-editor-beta.6 → 2.0.93

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

@@ -1,160 +0,0 @@
-/**
- * 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;
-};
-/**
- * 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,75 +0,0 @@
-import { TextStyle } from '../types';
-/**
- * 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
- * @param wrapperElement - Optional wrapper element to use instead of document.body
- * @returns The restructured HTML string
- */
-export declare function restructureDynamicTagsWithOptions(params: {
-    html: string;
-    options?: {
-        attributesToClone: string[];
-    };
-    defaultStyle: TextStyle;
-    wrapperElement?: Element;
-}): string;
-/**
- * Safely parses and processes HTML content for editor use
- * @param html - HTML string to process
- * @param wrapperElement - Optional wrapper element to use instead of document.body for temporary DOM operations
- * @returns Processed HTML string
- */
-export declare function safeParseHTMLContent(params: {
-    html: string;
-    wrapperElement?: Element;
-    defaultStyle: TextStyle;
-}): 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,343 +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
- * @param wrapperElement - Optional wrapper element to use instead of document.body
- * @returns Array of wrapper elements that provide styling
- */
-function extractStyleWrappers(params) {
-    const { doc, html, dynamicSpan, wrapperElement, defaultStyle } = params;
-    const styleWrappers = [];
-    // Create a temporary container for style computation
-    const tempStyleContainer = document.createElement('div');
-    tempStyleContainer.style.display = 'none';
-    const targetWrapper = wrapperElement || document.body;
-    targetWrapper.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), defaultStyle);
-                    // 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
-        targetWrapper.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
- * @param wrapperElement - Optional wrapper element to use instead of document.body
- * @returns The restructured HTML string
- */
-export function restructureDynamicTagsWithOptions(params) {
-    const { html, options = {
-        attributesToClone: [
-            'class',
-            'id',
-            'style',
-            'data-dynamic',
-            'data-dynamic-id',
-            'direction',
-            'unicode-bidi',
-            'text-align',
-            'background-color',
-            'color',
-        ],
-    }, wrapperElement, defaultStyle, } = params;
-    // 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({
-            doc: parsedDoc,
-            html,
-            dynamicSpan: originalDynamicSpan,
-            wrapperElement,
-            defaultStyle,
-        });
-        // 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
- * @param wrapperElement - Optional wrapper element to use instead of document.body
- * @returns The processed HTML string with computed styles applied
- */
-const inheritStyleToComputedStyle = (params) => {
-    const { html, wrapperElement, defaultStyle } = params;
-    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
-        const targetWrapper = wrapperElement || document.body;
-        targetWrapper.appendChild(container);
-        // Process all span elements
-        const spanElements = container.querySelectorAll('span');
-        spanElements.forEach(span => {
-            const textStyle = textStyleFromElStyle(span.style, defaultStyle);
-            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
- * @param wrapperElement - Optional wrapper element to use instead of document.body for temporary DOM operations
- * @returns Processed HTML string
- */
-export function safeParseHTMLContent(params) {
-    const { html, wrapperElement, defaultStyle } = params;
-    let resultHTML = html;
-    const isFroala = html.includes('fr-box');
-    if (isFroala) {
-        // console.log('safeParseHTMLContent', html);
-        resultHTML = inheritStyleToComputedStyle({
-            html,
-            wrapperElement,
-            defaultStyle,
-        });
-        // console.log('after inheritStyleToComputedStyle', resultHTML);
-        resultHTML = restructureDynamicTagsWithOptions({
-            html: resultHTML,
-            wrapperElement,
-            defaultStyle,
-        });
-        // 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/indent.d.ts

@@ -1,11 +0,0 @@
-import type { Command } from '@tiptap/core';
-export declare const enum IndentProps {
-    max = 7,
-    min = 0,
-    more = 1,
-    less = -1
-}
-export declare function createIndentCommand({ delta, types }: {
-    delta: number;
-    types: string[];
-}): Command;

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

@@ -1,56 +0,0 @@
-import { isList } from '@tiptap/core';
-import { TextSelection, AllSelection } from '@tiptap/pm/state';
-import { clamp } from './shared';
-function setNodeIndentMarkup(tr, pos, delta) {
-    if (!tr.doc)
-        return tr;
-    const node = tr.doc.nodeAt(pos);
-    if (!node)
-        return tr;
-    const minIndent = 0 /* IndentProps.min */;
-    const maxIndent = 7 /* IndentProps.max */;
-    const indent = clamp((node.attrs.indent || 0) + delta, minIndent, maxIndent);
-    if (indent === node.attrs.indent)
-        return tr;
-    const nodeAttrs = {
-        ...node.attrs,
-        indent,
-    };
-    return tr.setNodeMarkup(pos, node.type, nodeAttrs, node.marks);
-}
-function updateIndentLevel(tr, delta, types, editor) {
-    const { doc, selection } = tr;
-    if (!doc || !selection)
-        return tr;
-    if (!(selection instanceof TextSelection || selection instanceof AllSelection)) {
-        return tr;
-    }
-    const { from, to } = selection;
-    doc.nodesBetween(from, to, (node, pos) => {
-        const nodeType = node.type;
-        if (types.includes(nodeType.name)) {
-            tr = setNodeIndentMarkup(tr, pos, delta);
-            return false;
-        }
-        if (isList(node.type.name, editor.extensionManager.extensions)) {
-            return false;
-        }
-        return true;
-    });
-    return tr;
-}
-export function createIndentCommand({ delta, types }) {
-    return ({ state, dispatch, editor }) => {
-        const { selection } = state;
-        let { tr } = state;
-        tr = tr.setSelection(selection);
-        tr = updateIndentLevel(tr, delta, types, editor);
-        if (tr.docChanged) {
-            if (dispatch) {
-                dispatch(tr);
-            }
-            return true;
-        }
-        return false;
-    };
-}

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';