@antscorp/antsomi-ui 2.0.110 → 2.0.112

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

@@ -0,0 +1,149 @@
+import { LIST_EMOJI } from '../extensions/Emoji';
+/**
+ * Default configuration for document state detection
+ */
+const DEFAULT_CONFIG = {
+    minContentSize: 4, // Standard ProseMirror empty doc size
+    ignoreWhitespace: true,
+    customValidator: () => false,
+};
+/**
+ * Calculates the minimum size of an empty document based on schema
+ */
+export function calculateEmptyDocumentSize(state) {
+    // Create a minimal document with the same schema
+    const emptyDoc = state.schema.topNodeType.createAndFill();
+    return emptyDoc?.nodeSize ?? 4;
+}
+/**
+ * Checks if document is effectively empty
+ */
+export function isDocumentEmpty(state, config = {}) {
+    const { minContentSize, ignoreWhitespace, customValidator } = {
+        ...DEFAULT_CONFIG,
+        ...config,
+    };
+    const { doc } = state;
+    // Use custom validator if provided
+    if (customValidator(doc)) {
+        return true;
+    }
+    // Check document size
+    const calculatedMinSize = calculateEmptyDocumentSize(state);
+    const effectiveMinSize = minContentSize === 4 ? calculatedMinSize : minContentSize;
+    if (doc.nodeSize <= effectiveMinSize) {
+        return true;
+    }
+    // Check if content is only whitespace
+    if (ignoreWhitespace) {
+        const textContent = doc.textContent.trim();
+        return textContent.length === 0;
+    }
+    return false;
+}
+/**
+ * Checks if document has meaningful content
+ */
+export function hasDocumentContent(state, config = {}) {
+    return !isDocumentEmpty(state, config);
+}
+/**
+ * Gets document content statistics
+ */
+export function getDocumentStats(state) {
+    const { doc } = state;
+    return {
+        nodeSize: doc.nodeSize,
+        textLength: doc.textContent.length,
+        trimmedTextLength: doc.textContent.trim().length,
+        nodeCount: doc.nodesBetween(0, doc.nodeSize, () => true),
+        isEmpty: isDocumentEmpty(state),
+        emptyDocumentSize: calculateEmptyDocumentSize(state),
+    };
+}
+/**
+ * Document state change detector
+ */
+export class DocumentStateTracker {
+    constructor() {
+        this.previousState = null;
+    }
+    /**
+     * Updates tracker with new state and returns changes
+     */
+    update(state) {
+        const isEmpty = isDocumentEmpty(state);
+        const { nodeSize } = state.doc;
+        const textLength = state.doc.textContent.length;
+        const result = {
+            isEmpty,
+            wasEmpty: this.previousState?.isEmpty ?? true,
+            becameEmpty: false,
+            becameNonEmpty: false,
+            sizeChanged: false,
+            textLengthChanged: false,
+        };
+        if (this.previousState) {
+            result.becameEmpty = !this.previousState.isEmpty && isEmpty;
+            result.becameNonEmpty = this.previousState.isEmpty && !isEmpty;
+            result.sizeChanged = this.previousState.nodeSize !== nodeSize;
+            result.textLengthChanged = this.previousState.textLength !== textLength;
+        }
+        this.previousState = { isEmpty, nodeSize, textLength };
+        return result;
+    }
+    /**
+     * Resets the tracker
+     */
+    reset() {
+        this.previousState = null;
+    }
+}
+export function isEntireParagraphSelected(editor) {
+    const { state } = editor;
+    const { selection } = state;
+    const { from, to } = selection;
+    // Nếu không có selection hoặc selection rỗng
+    if (from === to) {
+        return false;
+    }
+    // Tìm node paragraph chứa selection
+    const $from = state.doc.resolve(from);
+    const $to = state.doc.resolve(to);
+    // Kiểm tra xem from và to có cùng trong một paragraph không
+    const fromParagraph = $from.node($from.depth);
+    const toParagraph = $to.node($to.depth);
+    // Nếu không cùng paragraph, return false
+    if (fromParagraph !== toParagraph || fromParagraph.type.name !== 'paragraph') {
+        return false;
+    }
+    // Lấy vị trí bắt đầu và kết thúc của paragraph
+    const paragraphStart = $from.start($from.depth);
+    const paragraphEnd = $from.end($from.depth);
+    // Kiểm tra xem selection có bao phủ toàn bộ nội dung của paragraph không
+    return from === paragraphStart && to === paragraphEnd;
+}
+/**
+ * Helper function to extract text from atom nodes (emoji, smartTag)
+ * Used as leafText callback for doc.textBetween()
+ */
+export const getTextFromAtomNode = (node) => {
+    if (node.type.name === 'emoji') {
+        // Find emoji character from name
+        const emojiChar = LIST_EMOJI.find(i => i.name === node.attrs.name)?.emoji;
+        return emojiChar || node.attrs.name || '*';
+    }
+    if (node.type.name === 'smartTag') {
+        return node.attrs.content || '*';
+    }
+    return '*';
+};
+/**
+ * Wrapper for doc.textBetween that automatically handles atom nodes (emoji, smartTag)
+ * @param state EditorState
+ * @param from Start position
+ * @param to End position
+ * @param blockSeparator Optional separator between blocks (default: '')
+ * @returns Text content including atom nodes
+ */
+export const textBetween = (state, from, to, blockSeparator = '') => state.doc.textBetween(from, to, blockSeparator, getTextFromAtomNode);

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

@@ -0,0 +1,74 @@
+import { FontConfig, FontGroupingFunction, FontGroupResult, GroupOrderFunction } 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;
+/**
+ * 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[]>;
+/**
+ * Creates a font stack string from a font configuration
+ * @param font Font configuration
+ * @returns Font stack string
+ */
+export declare const getFontStack: (font: FontConfig) => string;
+/**
+ * Analyzes a font configuration for web safety
+ * @param font Font configuration
+ * @returns Analysis results
+ */
+export declare const analyzeFont: (font: FontConfig) => {
+    isFullyWebSafe: boolean;
+    isPrimaryFontWebSafe: boolean;
+};
+/**
+ * Groups fonts using a custom grouping function or default web-safe categorization
+ * @param fonts Array of font configurations to group
+ * @param fontGroupingFn Optional custom function to determine font groups
+ * @param groupOrder Optional array of group keys or function to define display order
+ * @returns Map with grouped fonts by category in specified order
+ */
+export declare const groupFonts: (fonts: FontConfig[], opts?: {
+    fontGroupingFn?: FontGroupingFunction;
+    groupOrder?: string[] | GroupOrderFunction;
+}) => Map<string, FontGroupResult>;

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

@@ -0,0 +1,147 @@
+import { analyzeFontFamily, isWebSafeFont } from '@antscorp/antsomi-ui/es/utils';
+import { DEFAULT_FONT_GROUPING } from '../constants';
+/**
+ * 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;
+};
+/**
+ * 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;
+}
+/**
+ * Creates a font stack string from a font configuration
+ * @param font Font configuration
+ * @returns Font stack string
+ */
+export const getFontStack = (font) => [font.fontFamily.name, ...(font.fontFamily.fallback || [])].join(', ');
+/**
+ * Analyzes a font configuration for web safety
+ * @param font Font configuration
+ * @returns Analysis results
+ */
+export const analyzeFont = (font) => {
+    const fontStack = getFontStack(font);
+    const { isFullyWebSafe, isPrimaryFontWebSafe } = analyzeFontFamily(fontStack);
+    return { isFullyWebSafe, isPrimaryFontWebSafe };
+};
+/**
+ * Groups fonts using a custom grouping function or default web-safe categorization
+ * @param fonts Array of font configurations to group
+ * @param fontGroupingFn Optional custom function to determine font groups
+ * @param groupOrder Optional array of group keys or function to define display order
+ * @returns Map with grouped fonts by category in specified order
+ */
+export const groupFonts = (fonts, opts = {}) => {
+    const defaultGroupingFn = font => {
+        if (isWebSafeFont(font.fontFamily.name)) {
+            return DEFAULT_FONT_GROUPING.standard;
+        }
+        return DEFAULT_FONT_GROUPING.nonStandard;
+    };
+    const { fontGroupingFn = defaultGroupingFn, groupOrder = [DEFAULT_FONT_GROUPING.standard.key, DEFAULT_FONT_GROUPING.nonStandard.key], } = opts || {};
+    const tempGroups = new Map();
+    for (const font of fonts) {
+        const groupInfo = fontGroupingFn(font);
+        if (groupInfo) {
+            const { key, label } = groupInfo;
+            if (tempGroups.has(key)) {
+                tempGroups.get(key).fonts.push(font);
+            }
+            else {
+                tempGroups.set(key, { label, fonts: [font] });
+            }
+        }
+    }
+    const results = new Map();
+    let orderedGroupKeys = [];
+    if (typeof groupOrder === 'function') {
+        const availableGroupKeys = Array.from(tempGroups.keys());
+        orderedGroupKeys = groupOrder(availableGroupKeys);
+    }
+    else if (Array.isArray(groupOrder) && groupOrder.length > 0) {
+        orderedGroupKeys = groupOrder;
+    }
+    for (const groupKey of orderedGroupKeys) {
+        if (tempGroups.has(groupKey)) {
+            results.set(groupKey, tempGroups.get(groupKey));
+            tempGroups.delete(groupKey);
+        }
+    }
+    for (const [key, value] of tempGroups) {
+        results.set(key, value);
+    }
+    return results;
+};

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

@@ -0,0 +1,87 @@
+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;
+/**
+ * Removes empty paragraphs and spans with only break lines.
+ * @param html - The HTML string to process
+ * @returns The processed HTML string
+ */
+export declare function cleanLineBreaks(html: string): 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;
+/**
+ * Serializes HTML for output
+ * @param htmlEditorContent - HTML string to serialize
+ * @returns Serialized HTML string
+ */
+export declare const htmlSerializerForOutput: (htmlEditorContent: string) => string;