@antscorp/antsomi-ui 2.0.110 → 2.0.111

package/es/utils/web.js

@@ -1,4 +1,199 @@
 import { VALUE_C, VALUE_CONTROL, VALUE_LEFT_WINDOW, VALUE_V, VALUE_X, VALUE_Z, } from '@antscorp/antsomi-ui/es/constants/keyCode';
+import { GENERIC_FONT_FAMILIES, WEB_SAFE_FONTS } from '../constants';
+/**
+ * Parses a font family string and extracts individual font names
+ * Handles quoted fonts, fallbacks, and CSS font-family syntax
+ * @param fontFamily - Font family string (e.g., "'Roboto', Arial, sans-serif")
+ * @returns Array of individual font names
+ */
+export function parseFontFamily(fontFamily) {
+    if (!fontFamily || typeof fontFamily !== 'string') {
+        return [];
+    }
+    // Split by comma and clean up each font name
+    return fontFamily
+        .split(',')
+        .map(font => font.trim())
+        .map(font => 
+    // Remove quotes (single or double)
+    font.replace(/^['"]|['"]$/g, ''))
+        .map(font => font.trim())
+        .filter(font => font.length > 0);
+}
+/**
+ * Checks if a given font name is considered a web safe font
+ * @param fontName - The font name to check (case insensitive)
+ * @param includeGeneric - Whether to consider generic font families as web safe (default: false)
+ * @returns boolean - True if the font is web safe, false otherwise
+ */
+export function isWebSafeFont(fontName, includeGeneric = false) {
+    if (!fontName || typeof fontName !== 'string') {
+        return false;
+    }
+    // Normalize the font name: trim whitespace and convert to lowercase
+    const normalizedFontName = fontName.trim().toLowerCase();
+    // Check if it's a specific web safe font
+    const isSpecificWebSafe = WEB_SAFE_FONTS.some(f => f === normalizedFontName);
+    // If including generic fonts, also check if it's a generic font family
+    if (includeGeneric) {
+        const isGeneric = GENERIC_FONT_FAMILIES.some(f => f === normalizedFontName);
+        return isSpecificWebSafe || isGeneric;
+    }
+    return isSpecificWebSafe;
+}
+/**
+ * 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 = parseFontFamily(fontFamily);
+    const primaryFont = fonts[0].trim();
+    // Remove quotes if present
+    return primaryFont.replace(/^["']|["']$/g, '');
+}
+/**
+ * Checks if the first font in a font family string is web safe
+ * @param fontFamily - Font family string
+ * @returns boolean - True if the primary font is web safe
+ */
+export function isPrimaryFontWebSafe(fontFamily) {
+    const fonts = parseFontFamily(fontFamily);
+    return fonts.length > 0 ? isWebSafeFont(fonts[0]) : false;
+}
+/**
+ * Checks if a font name is a generic font family (CSS keyword)
+ * @param fontName - The font name to check
+ * @returns boolean - True if it's a generic font family
+ */
+export function isGenericFontFamily(fontName) {
+    if (!fontName || typeof fontName !== 'string') {
+        return false;
+    }
+    const normalizedFontName = fontName.trim().toLowerCase();
+    return GENERIC_FONT_FAMILIES.includes(normalizedFontName);
+}
+/**
+ * Checks if a font family string (with potential fallbacks) contains any web safe fonts
+ * @param fontFamily - Font family string with potential fallbacks (e.g., "'Custom Font', Arial, sans-serif")
+ * @param options - Configuration options
+ * @returns Object with detailed analysis
+ */
+export function analyzeFontFamily(fontFamily, options = {}) {
+    const { includeGenericAsWebSafe = false } = options;
+    const fonts = parseFontFamily(fontFamily);
+    const webSafeFonts = [];
+    const nonWebSafeFonts = [];
+    const genericFonts = [];
+    fonts.forEach(font => {
+        if (isGenericFontFamily(font)) {
+            genericFonts.push(font);
+        }
+        else if (isWebSafeFont(font)) {
+            webSafeFonts.push(font);
+        }
+        else {
+            nonWebSafeFonts.push(font);
+        }
+    });
+    // Calculate web safety based on options
+    let isFullyWebSafe;
+    let hasWebSafeFonts;
+    if (includeGenericAsWebSafe) {
+        // Include generic fonts as web safe
+        hasWebSafeFonts = webSafeFonts.length > 0 || genericFonts.length > 0;
+        isFullyWebSafe =
+            nonWebSafeFonts.length === 0 && (webSafeFonts.length > 0 || genericFonts.length > 0);
+    }
+    else {
+        // Only specific web safe fonts count
+        hasWebSafeFonts = webSafeFonts.length > 0;
+        // Must have NO non-web-safe fonts AND NO generic fonts for strict mode
+        isFullyWebSafe =
+            nonWebSafeFonts.length === 0 && genericFonts.length === 0 && webSafeFonts.length > 0;
+    }
+    return {
+        hasWebSafeFonts,
+        webSafeFonts,
+        nonWebSafeFonts,
+        genericFonts,
+        allFonts: fonts,
+        isFullyWebSafe,
+        isPrimaryFontWebSafe: isPrimaryFontWebSafe(fontFamily),
+    };
+}
+/**
+ * Gets all available web safe fonts
+ * @returns Array of web safe font names
+ */
+export function getWebSafeFonts() {
+    return WEB_SAFE_FONTS;
+}
+/**
+ * Finds web safe font alternatives for a given font
+ * @param fontName - The font name to find alternatives for
+ * @returns Array of similar web safe fonts
+ */
+export function getWebSafeFontAlternatives(fontName) {
+    const normalizedFontName = fontName.trim().toLowerCase();
+    // Define font categories and their alternatives
+    const fontCategories = {
+        serif: [
+            'times new roman',
+            'times',
+            'georgia',
+            'garamond',
+            'book antiqua',
+            'palatino linotype',
+            'palatino',
+        ],
+        sansSerif: ['arial', 'helvetica', 'verdana', 'tahoma', 'geneva', 'lucida sans'],
+        monospace: ['courier new', 'courier', 'monaco', 'menlo', 'consolas', 'lucida console'],
+        cursive: ['comic sans ms', 'brush script mt'],
+        fantasy: ['papyrus', 'copperplate', 'fantasy'],
+    };
+    // If it's already web safe, return similar fonts from the same category
+    if (isWebSafeFont(normalizedFontName)) {
+        for (const [_category, fonts] of Object.entries(fontCategories)) {
+            if (fonts.includes(normalizedFontName)) {
+                return fonts.filter(font => font !== normalizedFontName);
+            }
+        }
+    }
+    // For non-web-safe fonts, suggest based on common patterns
+    if (normalizedFontName.includes('serif') && !normalizedFontName.includes('sans')) {
+        return fontCategories.serif;
+    }
+    if (normalizedFontName.includes('sans') ||
+        normalizedFontName.includes('arial') ||
+        normalizedFontName.includes('helvetica')) {
+        return fontCategories.sansSerif;
+    }
+    if (normalizedFontName.includes('mono') ||
+        normalizedFontName.includes('courier') ||
+        normalizedFontName.includes('code')) {
+        return fontCategories.monospace;
+    }
+    if (normalizedFontName.includes('script') ||
+        normalizedFontName.includes('cursive') ||
+        normalizedFontName.includes('comic')) {
+        return fontCategories.cursive;
+    }
+    // Default fallback to common sans-serif fonts
+    return fontCategories.sansSerif;
+}
+/**
+ * Creates a font stack with appropriate fallbacks
+ * @param primaryFont Primary font family
+ * @returns Complete font stack string
+ */
+export function createFontStack(primaryFont) {
+    const fallbacks = getWebSafeFontAlternatives(primaryFont);
+    const stack = [primaryFont, ...fallbacks];
+    return stack.join(', ');
+}
 /**
  * Function to parse search params string to object
  * @param {string} searchParams - search params
@@ -57,3 +252,34 @@ export const isLinux = () => getPlatform() === 'linux';
  * @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}`;
+};
+/**
+ * Chuyển đổi giá trị CSS 'px' thành số nguyên.
+ * Ví dụ: "16px" => 16
+ *
+ * @param fontSizeString - Chuỗi kích thước font, ví dụ: "16px".
+ * @returns Số nguyên hoặc null nếu chuỗi không hợp lệ.
+ */
+export function convertPxToNumber(fontSizeString) {
+    // Kiểm tra xem đầu vào có phải là chuỗi không
+    if (typeof fontSizeString !== 'string') {
+        return null;
+    }
+    // Sử dụng parseInt để lấy phần số.
+    // parseInt sẽ dừng lại khi gặp ký tự không phải số, ví dụ 'p' trong 'px'.
+    const numberValue = parseInt(fontSizeString, 10);
+    // Kiểm tra xem kết quả có phải là một số hợp lệ không
+    // (isNaN - Is Not a Number)
+    if (isNaN(numberValue)) {
+        return null;
+    }
+    return numberValue;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "2.0.110",
+  "version": "2.0.111",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -69,6 +69,7 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@emotion/react": "^11.11.1",
+    "@floating-ui/react": "^0.27.8",
     "@fortawesome/fontawesome-svg-core": "6.1.1",
     "@fortawesome/free-brands-svg-icons": "6.1.1",
     "@fortawesome/free-regular-svg-icons": "6.1.1",
@@ -78,6 +79,18 @@
     "@tanstack/react-query": "4.20.4",
     "@tanstack/react-query-devtools": "4.20.4",
     "@tinymce/tinymce-react": "^3.7.0",
+    "@tiptap/core": "3.10.2",
+    "@tiptap/extension-link": "3.10.2",
+    "@tiptap/extension-strike": "3.10.2",
+    "@tiptap/extension-subscript": "3.10.2",
+    "@tiptap/extension-superscript": "3.10.2",
+    "@tiptap/extension-text-align": "3.10.2",
+    "@tiptap/extension-text-style": "3.10.2",
+    "@tiptap/extensions": "3.10.2",
+    "@tiptap/pm": "3.10.2",
+    "@tiptap/react": "3.10.2",
+    "@tiptap/starter-kit": "3.10.2",
+    "@tiptap/suggestion": "3.10.2",
     "@yaireo/tagify": "^4.31.2",
     "ace-builds": "1.4.14",
     "animate.css": "^4.1.1",
@@ -98,6 +111,7 @@
     "html-react-parser": "^5.1.12",
     "html-to-image": "^1.11.11",
     "html2canvas": "^1.4.1",
+    "html2canvas-pro": "^1.5.11",
     "i18next": "23.7.9",
     "i18next-browser-languagedetector": "6.1.2",
     "immer": "3.0.0",
@@ -117,6 +131,7 @@
     "react-device-detect": "^2.2.3",
     "react-diff-viewer": "^3.1.1",
     "react-draggable": "^4.4.5",
+    "react-fast-compare": "^3.2.1",
     "react-frame-component": "^5.2.6",
     "react-google-recaptcha": "^3.1.0",
     "react-helmet": "^6.1.0",
@@ -128,8 +143,7 @@
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-window": "^1.8.10",
     "rehype-highlight": "^6.0.0",
-    "remark-gfm": "^3.0.1",
-    "remark-gfm-alias-story": "npm:remark-gfm@4.0.0",
+    "remark-gfm": "^4",
     "reselect": "^5.1.1",
     "socket.io-client": "^4.7.5",
     "string-replace-to-array": "^2.1.0",
@@ -138,6 +152,7 @@
     "tui-image-editor": "^3.15.3",
     "uniqid": "^5.4.0",
     "use-context-selector": "^1.4.4",
+    "use-debounce": "^10.0.4",
     "use-image": "^1.1.1",
     "use-immer": "^0.4.1",
     "zustand": "^4.5.2"
@@ -160,17 +175,11 @@
     "@babel/preset-typescript": "^7.23.3",
     "@commitlint/cli": "17.5.0",
     "@commitlint/config-conventional": "17.4.4",
-    "@storybook/addon-docs": "^8.6.9",
-    "@storybook/addon-essentials": "^8.6.9",
-    "@storybook/addon-links": "^8.6.9",
-    "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
-    "@storybook/blocks": "^8.6.9",
-    "@storybook/manager-api": "^8.6.9",
-    "@storybook/react": "^8.6.9",
-    "@storybook/react-webpack5": "^8.6.9",
-    "@storybook/test": "^8.6.9",
-    "@storybook/theming": "^8.6.9",
+    "@storybook/addon-docs": "^9.1.10",
+    "@storybook/addon-links": "^9.1.10",
+    "@storybook/addon-styling-webpack": "^2.0.0",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
+    "@storybook/react-webpack5": "^9.1.10",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.0",
@@ -194,6 +203,7 @@
     "@types/react-window": "^1.8.8",
     "@types/styled-components": "^5.1.26",
     "@types/tinycolor2": "^1.4.6",
+    "@types/uniqid": "^5.3.4",
     "@types/yaireo__tagify": "^4.27.0",
     "@typescript-eslint/eslint-plugin": "^5.55.0",
     "@typescript-eslint/parser": "^5.55.0",
@@ -220,7 +230,7 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.12.0",
+    "eslint-plugin-storybook": "^9.1.10",
     "file-loader": "^6.2.0",
     "googleapis": "^142.0.0",
     "husky": "^8.0.3",
@@ -233,12 +243,11 @@
     "prettier": "^3.3.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-fast-compare": "^3.2.1",
     "react-i18next": "11.16.7",
     "react-router-dom": "5.1.0 || 6.14.2",
     "sass": "^1.77.8",
     "sass-loader": "^16.0.1",
-    "storybook": "^8.6.9",
+    "storybook": "^9.1.10",
     "style-loader": "^4.0.0",
     "styled-components": "^5.3.9",
     "terser-webpack-plugin": "^5.3.10",