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

package/es/utils/tree.js

@@ -0,0 +1,469 @@
+/**
+ * Tree utilities with performance optimizations using level-based operations.
+ *
+ * Key performance improvements:
+ * - Level property enables O(1) depth checks and early exit conditions
+ * - Pre-allocated arrays for path operations avoid costly array resizing
+ * - Level-based filtering for efficient node selection
+ * - Optimized tree traversal with level-aware recursion control
+ *
+ * @file src/utils/tree.ts
+ */
+/**
+ * Normalizes a tree structure from a nested format to a flat, relational format.
+ * Each node is stored in a map by its ID, and relationships are maintained via `parentId` and `childIds`.
+ *
+ * @template T The type of data in the tree nodes.
+ * @param {TreeNode<T>[]} nodes - An array of root tree nodes in their original nested structure.
+ * @returns {NormalizedTreeState<T>} The normalized tree state, containing a map of items and a set of root item IDs.
+ */
+export function normalizeTreeData(nodes) {
+    const items = new Map();
+    const rootItemIds = new Set();
+    /**
+     * Recursively visits each node to flatten it.
+     * @param {TreeNode<T>} node - The current node to process.
+     * @param {string | null} parentId - The ID of the parent of the current node.
+     * @param {number} level - The depth/level of the current node.
+     */
+    function visit(node, parentId, level) {
+        const { children, ...restOfNode } = node;
+        const normalizedNode = {
+            ...restOfNode,
+            parentId,
+            childIds: children ? children.map(child => child.id) : [],
+            level,
+        };
+        items.set(node.id, normalizedNode);
+        if (parentId === null) {
+            rootItemIds.add(node.id);
+        }
+        if (children && children.length > 0) {
+            children.forEach(child => visit(child, node.id, level + 1));
+        }
+    }
+    nodes.forEach(node => visit(node, null, 0));
+    return { items, rootItemIds };
+}
+/**
+ * Retrieves all normalized nodes from the items store as an array.
+ *
+ * @template T The type of data in the nodes.
+ * @param {Map<string, NormalizedNode<T>>} itemsStore - The map of normalized nodes.
+ * @returns {NormalizedNode<T>[]} An array of all normalized nodes.
+ */
+export function getAllItems(itemsStore) {
+    return Array.from(itemsStore.values());
+}
+/**
+ * Recursively reconstructs a subtree (or a portion of it) from the normalized data,
+ * starting from a given item ID.
+ *
+ * @template T The type of data in the nodes.
+ * @param {string} itemId - The ID of the node from which to start reconstructing the subtree.
+ * @param {Map<string, NormalizedNode<T>>} itemsStore - The map of normalized nodes.
+ * @param {number} [maxLevels=Infinity] - The maximum number of levels of children to retrieve.
+ * @param {number} [startLevel] - The starting level for depth calculation (used internally).
+ * @returns {TreeNode<T>[]} An array of reconstructed tree nodes (children of the `itemId` node).
+ *                         Returns an empty array if the item has no children or `maxLevels` is reached.
+ */
+export function getChildrenRecursively(itemId, itemsStore, maxLevels = Infinity, startLevel) {
+    const item = itemsStore.get(itemId);
+    if (!item || !item.childIds || item.childIds.length === 0) {
+        return [];
+    }
+    // Use the stored level for performance optimization
+    const currentStartLevel = startLevel ?? item.level;
+    return item.childIds
+        .map((childId) => {
+        const childItem = itemsStore.get(childId);
+        if (!childItem) {
+            // This case should ideally not happen if data integrity is maintained
+            // (e.g., childId in parent's childIds list actually exists in itemsStore).
+            // Consider logging a warning here if such inconsistencies are possible.
+            return null;
+        }
+        // Performance optimization: Check level difference instead of tracking recursion depth
+        const levelDifference = childItem.level - currentStartLevel;
+        if (levelDifference >= maxLevels) {
+            return {
+                id: childItem.id,
+                data: childItem.data,
+                children: [], // Don't recurse further if max levels reached
+            };
+        }
+        // Exclude childIds, level, and parentId from the reconstructed node as children are handled by recursion.
+        const { childIds: _childIds, level: _level, parentId: _parentId, ...baseChildItem } = childItem;
+        return {
+            ...baseChildItem, // Spread properties like id, data, parentId
+            children: getChildrenRecursively(childId, itemsStore, maxLevels, currentStartLevel),
+        };
+    })
+        .filter((node) => node !== null); // Type guard to filter out nulls and ensure correct type.
+}
+/**
+ * Retrieves a single normalized node by its ID from the items store.
+ *
+ * @template T The type of data in the node.
+ * @param {string} itemId - The ID of the node to retrieve.
+ * @param {Map<string, NormalizedNode<T>>} itemsStore - The map of normalized nodes.
+ * @returns {NormalizedNode<T> | undefined} The normalized node if found, otherwise undefined.
+ */
+export function getNode(itemId, itemsStore) {
+    return itemsStore.get(itemId);
+}
+/**
+ * Retrieves the parent of a given node from the items store.
+ *
+ * @template T The type of data in the nodes.
+ * @param {string} itemId - The ID of the node whose parent is to be retrieved.
+ * @param {Map<string, NormalizedNode<T>>} itemsStore - The map of normalized nodes.
+ * @returns {NormalizedNode<T> | undefined} The parent node if found, otherwise undefined.
+ */
+export function getParent(itemId, itemsStore) {
+    const node = itemsStore.get(itemId);
+    if (node?.parentId) {
+        // Optional chaining for conciseness
+        return itemsStore.get(node.parentId);
+    }
+    return undefined;
+}
+/**
+ * Retrieves the path (an array of nodes) from the root to a specified node.
+ * The path includes the target node itself as the last element.
+ * Performance optimized using the level property to pre-allocate array size.
+ *
+ * @template T The type of data in the nodes.
+ * @param {string} itemId - The ID of the target node.
+ * @param {Map<string, NormalizedNode<T>>} itemsStore - The map of normalized nodes.
+ * @returns {NormalizedNode<T>[]} An array of nodes representing the path from a root to the target node.
+ *                                Returns an empty array if the node is not found.
+ */
+export function getPathToNode(itemId, itemsStore) {
+    const targetNode = itemsStore.get(itemId);
+    if (!targetNode) {
+        return [];
+    }
+    // Performance optimization: pre-allocate array with exact size needed
+    const path = new Array(targetNode.level + 1);
+    let currentNode = targetNode;
+    let index = targetNode.level;
+    // Fill the array from end to beginning to avoid unshift operations
+    while (currentNode && index >= 0) {
+        path[index] = currentNode;
+        index--;
+        currentNode = currentNode.parentId ? itemsStore.get(currentNode.parentId) : undefined;
+    }
+    return path;
+}
+/**
+ * Finds all nodes in the items store that satisfy a given predicate function.
+ *
+ * @template T The type of data in the nodes.
+ * @param {(node: NormalizedNode<T>) => boolean} predicate - A function that takes a node and returns true if it matches the criteria.
+ * @param {Map<string, NormalizedNode<T>>} itemsStore - The map of normalized nodes.
+ * @returns {NormalizedNode<T>[]} An array of nodes that satisfy the predicate.
+ */
+export function findNodes(predicate, itemsStore) {
+    const results = [];
+    for (const node of itemsStore.values()) {
+        if (predicate(node)) {
+            results.push(node);
+        }
+    }
+    return results;
+}
+/**
+ * Checks if a node is a descendant of another node.
+ * Performance optimized using level comparison for early exit.
+ *
+ * @template T The type of data in the nodes.
+ * @param {string} potentialDescendantId - The ID of the node to check if it's a descendant.
+ * @param {string} ancestorId - The ID of the potential ancestor node.
+ * @param {Map<string, NormalizedNode<T>>} itemsStore - The map of normalized nodes.
+ * @returns {boolean} True if `potentialDescendantId` is a descendant of `ancestorId`, false otherwise.
+ */
+export function isDescendant(potentialDescendantId, ancestorId, itemsStore) {
+    const descendantNode = itemsStore.get(potentialDescendantId);
+    const ancestorNode = itemsStore.get(ancestorId);
+    // A node cannot be a descendant of itself in this context.
+    // Also, if either node doesn't exist, it can't be a descendant.
+    if (!descendantNode ||
+        !ancestorNode ||
+        !descendantNode.parentId ||
+        potentialDescendantId === ancestorId) {
+        return false;
+    }
+    // Performance optimization: if descendant's level is not greater than ancestor's level,
+    // it cannot be a descendant
+    if (descendantNode.level <= ancestorNode.level) {
+        return false;
+    }
+    let currentNode = descendantNode;
+    while (currentNode?.parentId) {
+        // Traverse up towards the root
+        if (currentNode.parentId === ancestorId) {
+            return true;
+        }
+        currentNode = itemsStore.get(currentNode.parentId);
+    }
+    return false;
+}
+/**
+ * Updates the data of a specific node in an immutable way.
+ *
+ * @template T The type of data in the node.
+ * @param {string} itemId - The ID of the node to update.
+ * @param {Partial<T>} newData - An object containing the new data fields to merge into the existing node's data.
+ * @param {NormalizedTreeState<T>} currentState - The current normalized tree state.
+ * @returns {NormalizedTreeState<T>} A new tree state with the specified node's data updated.
+ *                                   Returns the original state if the node is not found.
+ */
+export function updateNodeData(itemId, newData, currentState) {
+    const originalNode = currentState.items.get(itemId);
+    if (!originalNode) {
+        // eslint-disable-next-line no-console
+        console.warn(`[updateNodeData] Node with ID "${itemId}" not found. Cannot update.`);
+        return currentState; // Return original state if node doesn't exist
+    }
+    // Create the updated node immutably
+    const updatedNode = {
+        ...originalNode,
+        data: {
+            ...originalNode.data, // Preserve existing data
+            ...newData, // Apply new partial data, overwriting existing fields if they overlap
+        },
+    };
+    // Create a new Map for items and set the updated node
+    const newItems = new Map(currentState.items);
+    newItems.set(itemId, updatedNode);
+    return {
+        ...currentState, // Preserve other parts of the state (e.g., rootItemIds)
+        items: newItems,
+    };
+}
+/**
+ * Adds a new node to the tree in an immutable way.
+ *
+ * @template T The type of data for the new node.
+ * @param {string} newNodeId - The ID for the new node. Must be unique.
+ * @param {T} nodeData - The data payload for the new node.
+ * @param {string | null} parentId - The ID of the parent node. If null, the new node is added as a root.
+ * @param {NormalizedTreeState<T>} currentState - The current normalized tree state.
+ * @returns {NormalizedTreeState<T>} A new tree state with the new node added.
+ *                                   If `newNodeId` already exists, it logs a warning and returns the original state.
+ *                                   If `parentId` is provided but not found, the node is added as a root.
+ */
+export function addNode(newNodeId, nodeData, parentId, currentState) {
+    if (currentState.items.has(newNodeId)) {
+        // eslint-disable-next-line no-console
+        console.warn(`[addNode] Node with ID "${newNodeId}" already exists. Cannot add duplicate.`);
+        return currentState;
+    }
+    const newItems = new Map(currentState.items);
+    const newRootItemIds = new Set(currentState.rootItemIds); // Ensure immutability for rootItemIds
+    // Prepare the new node. Its parentId might change if the specified parent is not found.
+    let actualParentId = parentId;
+    let nodeLevel = 0; // Default level for root nodes
+    if (parentId) {
+        const parentNode = newItems.get(parentId);
+        if (parentNode) {
+            nodeLevel = parentNode.level + 1; // Set level based on parent's level
+            const updatedParentNode = {
+                ...parentNode,
+                childIds: [...parentNode.childIds, newNodeId], // Add new child ID immutably
+            };
+            newItems.set(parentId, updatedParentNode); // Update parent in the newItems Map
+        }
+        else {
+            // eslint-disable-next-line no-console
+            console.warn(`[addNode] Parent node with ID "${parentId}" not found. Adding node "${newNodeId}" as a root.`);
+            actualParentId = null; // Set as root if parent not found
+            nodeLevel = 0; // Root level
+        }
+    }
+    const newNode = {
+        id: newNodeId,
+        parentId: actualParentId,
+        data: nodeData,
+        childIds: [], // New nodes have no children initially
+        level: nodeLevel,
+    };
+    newItems.set(newNodeId, newNode);
+    if (actualParentId === null) {
+        newRootItemIds.add(newNodeId); // Add to new set of root IDs
+    }
+    return {
+        items: newItems,
+        rootItemIds: newRootItemIds,
+    };
+}
+/**
+ * Helper function to recursively get all descendant IDs of a given node,
+ * including the starting node's ID itself.
+ * Uses a Set for efficient addition and lookup, and to avoid reprocessing.
+ *
+ * @template T The type of data in the nodes (not directly used but good for consistency).
+ * @param {string} itemId - The ID of the starting node.
+ * @param {Map<string, NormalizedNode<T>>} itemsMap - The map of all normalized nodes.
+ * @param {Set<string>} [idsFound=new Set()] - Accumulator for descendant IDs (used internally for recursion).
+ * @returns {Set<string>} A Set containing the IDs of the starting node and all its descendants.
+ */
+export function getAllDescendantIdsRecursive(itemId, itemsMap, idsFound = new Set()) {
+    // Avoid processing if already visited (e.g., in case of unexpected cycles, though unlikely in a tree)
+    if (idsFound.has(itemId)) {
+        return idsFound;
+    }
+    idsFound.add(itemId); // Add current node's ID
+    const node = itemsMap.get(itemId);
+    if (node?.childIds) {
+        for (const childId of node.childIds) {
+            getAllDescendantIdsRecursive(childId, itemsMap, idsFound); // Recurse for children
+        }
+    }
+    return idsFound;
+}
+/**
+ * Removes a node and all its descendants from the tree in an immutable way.
+ *
+ * @template T The type of data in the nodes.
+ * @param {string} itemIdToRemove - The ID of the node to remove.
+ * @param {NormalizedTreeState<T>} currentState - The current normalized tree state.
+ * @returns {NormalizedTreeState<T>} A new tree state with the specified node and its descendants removed.
+ *                                   Returns the original state if the node to remove is not found.
+ */
+export function removeNode(itemIdToRemove, currentState) {
+    const nodeToRemove = currentState.items.get(itemIdToRemove);
+    if (!nodeToRemove) {
+        // eslint-disable-next-line no-console
+        console.warn(`[removeNode] Node with ID "${itemIdToRemove}" not found. Cannot remove.`);
+        return currentState; // Node doesn't exist, return original state
+    }
+    // 1. Identify all nodes to remove (the node itself and all its descendants)
+    const idsToDelete = getAllDescendantIdsRecursive(itemIdToRemove, currentState.items);
+    // 2. Create the new items Map by excluding all nodes identified for removal
+    const newItems = new Map();
+    for (const [id, node] of currentState.items.entries()) {
+        if (!idsToDelete.has(id)) {
+            newItems.set(id, node);
+        }
+    }
+    // 3. Update the parent node (if any, and if it's not also being deleted)
+    const { parentId } = nodeToRemove;
+    if (parentId && newItems.has(parentId)) {
+        // Check if parent exists in the new map (i.e., wasn't deleted)
+        const parentNode = newItems.get(parentId); // Safe due to newItems.has(parentId) check
+        const updatedParentNode = {
+            ...parentNode,
+            childIds: parentNode.childIds.filter(id => id !== itemIdToRemove), // Remove child ID immutably
+        };
+        newItems.set(parentId, updatedParentNode);
+    }
+    // 4. Update rootItemIds: create a new set excluding any deleted root IDs
+    const newRootItemIds = new Set();
+    for (const rootId of currentState.rootItemIds) {
+        if (!idsToDelete.has(rootId)) {
+            // Only keep roots that were not deleted
+            newRootItemIds.add(rootId);
+        }
+    }
+    return {
+        items: newItems,
+        rootItemIds: newRootItemIds,
+    };
+}
+/**
+ * Gets all nodes at a specific level in the tree.
+ * Performance optimized using the level property.
+ *
+ * @template T The type of data in the nodes.
+ * @param {number} targetLevel - The level to retrieve nodes from (0 for root nodes).
+ * @param {Map<string, NormalizedNode<T>>} itemsStore - The map of normalized nodes.
+ * @returns {NormalizedNode<T>[]} An array of nodes at the specified level.
+ */
+export function getNodesAtLevel(targetLevel, itemsStore) {
+    const results = [];
+    for (const node of itemsStore.values()) {
+        if (node.level === targetLevel) {
+            results.push(node);
+        }
+    }
+    return results;
+}
+/**
+ * Gets the maximum depth/level of the tree.
+ * Performance optimized using the level property.
+ *
+ * @template T The type of data in the nodes.
+ * @param {Map<string, NormalizedNode<T>>} itemsStore - The map of normalized nodes.
+ * @returns {number} The maximum level in the tree, or -1 if the tree is empty.
+ */
+export function getTreeDepth(itemsStore) {
+    let maxLevel = -1;
+    for (const node of itemsStore.values()) {
+        if (node.level > maxLevel) {
+            maxLevel = node.level;
+        }
+    }
+    return maxLevel;
+}
+/**
+ * Gets all nodes within a specified level range (inclusive).
+ * Performance optimized using the level property.
+ *
+ * @template T The type of data in the nodes.
+ * @param {number} minLevel - The minimum level (inclusive).
+ * @param {number} maxLevel - The maximum level (inclusive).
+ * @param {Map<string, NormalizedNode<T>>} itemsStore - The map of normalized nodes.
+ * @returns {NormalizedNode<T>[]} An array of nodes within the specified level range.
+ */
+export function getNodesInLevelRange(minLevel, maxLevel, itemsStore) {
+    const results = [];
+    for (const node of itemsStore.values()) {
+        if (node.level >= minLevel && node.level <= maxLevel) {
+            results.push(node);
+        }
+    }
+    return results;
+}
+/**
+ * Gets all ancestor nodes of a specified node.
+ * Performance optimized using the level property for early termination.
+ *
+ * @template T The type of data in the nodes.
+ * @param {string} itemId - The ID of the node to get ancestors for.
+ * @param {Map<string, NormalizedNode<T>>} itemsStore - The map of normalized nodes.
+ * @returns {NormalizedNode<T>[]} An array of ancestor nodes, ordered from root to immediate parent.
+ */
+export function getAncestors(itemId, itemsStore) {
+    const node = itemsStore.get(itemId);
+    if (!node || node.level === 0) {
+        return []; // Root nodes have no ancestors
+    }
+    const ancestors = [];
+    let currentNode = node;
+    while (currentNode?.parentId) {
+        const parentNode = itemsStore.get(currentNode.parentId);
+        if (parentNode) {
+            ancestors.unshift(parentNode); // Add to beginning to maintain root-to-parent order
+            currentNode = parentNode;
+        }
+        else {
+            break;
+        }
+    }
+    return ancestors;
+}
+/**
+ * Checks if a node is at a leaf level (has no children).
+ * This is a convenience function that leverages the existing childIds property.
+ *
+ * @template T The type of data in the nodes.
+ * @param {string} itemId - The ID of the node to check.
+ * @param {Map<string, NormalizedNode<T>>} itemsStore - The map of normalized nodes.
+ * @returns {boolean} True if the node is a leaf (has no children), false otherwise.
+ */
+export function isLeafNode(itemId, itemsStore) {
+    const node = itemsStore.get(itemId);
+    return node ? node.childIds.length === 0 : false;
+}

package/es/utils/web.d.ts

@@ -8,3 +8,7 @@ export declare const getPreventKeyboardAction: (actions?: Array<'undo' | 'copy'
     onKeyDown: (e: React.KeyboardEvent | KeyboardEvent) => false | undefined;
     onKeyUp: (e: React.KeyboardEvent | KeyboardEvent) => void;
 };
+export declare const getPlatform: () => "mac" | "window" | "linux" | "unknown";
+export declare const isMacOS: () => boolean;
+export declare const isWindows: () => boolean;
+export declare const isLinux: () => boolean;

package/es/utils/web.js

@@ -24,3 +24,28 @@ export const getPreventKeyboardAction = (actions = []) => ({
         }
     },
 });
+export const getPlatform = () => {
+    // Modern API (userAgentData)
+    const navAny = navigator;
+    if (navAny.userAgentData && typeof navAny.userAgentData.platform === 'string') {
+        const platform = navAny.userAgentData.platform.toLowerCase();
+        if (platform.includes('mac'))
+            return 'mac';
+        if (platform.includes('win'))
+            return 'window';
+        if (platform.includes('linux') || platform.includes('x11'))
+            return 'linux';
+    }
+    // Fallback for older browsers
+    const ua = navigator.userAgent.toLowerCase();
+    if (ua.includes('mac'))
+        return 'mac';
+    if (ua.includes('win'))
+        return 'window';
+    if (ua.includes('linux') || ua.includes('x11'))
+        return 'linux';
+    return 'unknown';
+};
+export const isMacOS = () => getPlatform() === 'mac';
+export const isWindows = () => getPlatform() === 'window';
+export const isLinux = () => getPlatform() === 'linux';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "2.0.82",
+  "version": "2.0.83-text-editor-beta.1",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -36,7 +36,7 @@
     "test:ui": "vitest --ui",
     "coverage": "vitest run --coverage",
     "ts-compile": "tsc -p tsconfig.esm.json",
-    "copy-files": "copyfiles -u 1 src/**/*.json src/**/*.svg src/**/*.scss src/**/*.png es",
+    "copy-files": "copyfiles -u 1 \"src/**/*.json\" \"src/**/*.svg\" \"src/**/*.png\" \"src/**/*.scss\" es",
     "icons:export": "sh -e scripts/generate-export-icon.sh",
     "icons:format": "prettier --loglevel warn --write \"src/components/icons/*.tsx\"",
     "icons:update": "sh -e scripts/update-icons.sh",
@@ -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,26 @@
     "@tanstack/react-query": "4.20.4",
     "@tanstack/react-query-devtools": "4.20.4",
     "@tinymce/tinymce-react": "^3.7.0",
+    "@tiptap/core": "^2.12.0",
+    "@tiptap/extension-color": "^2.12.0",
+    "@tiptap/extension-font-family": "^2.12.0",
+    "@tiptap/extension-highlight": "^2.12.0",
+    "@tiptap/extension-image": "^2.12.0",
+    "@tiptap/extension-link": "^2.12.0",
+    "@tiptap/extension-list-item": "^2.12.0",
+    "@tiptap/extension-strike": "^2.12.0",
+    "@tiptap/extension-subscript": "^2.12.0",
+    "@tiptap/extension-superscript": "^2.12.0",
+    "@tiptap/extension-task-item": "^2.12.0",
+    "@tiptap/extension-task-list": "^2.12.0",
+    "@tiptap/extension-text-align": "^2.12.0",
+    "@tiptap/extension-text-style": "^2.12.0",
+    "@tiptap/extension-typography": "^2.12.0",
+    "@tiptap/extension-underline": "^2.12.0",
+    "@tiptap/pm": "^2.12.0",
+    "@tiptap/react": "^2.12.0",
+    "@tiptap/starter-kit": "^2.12.0",
+    "@tiptap/suggestion": "^2.12.0",
     "@types/currency-formatter": "1.5.1",
     "@types/react-custom-scrollbars": "^4.0.13",
     "@types/react-frame-component": "^4.1.6",
@@ -108,6 +129,7 @@
     "immer": "3.0.0",
     "konva": "^9.3.6",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.510.0",
     "moment": "2.29.2",
     "pako": "2.0.4",
     "qs": "6.10.3",
@@ -120,6 +142,7 @@
     "react-custom-scrollbars": "^4.2.1",
     "react-device-detect": "^2.2.3",
     "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",
@@ -136,9 +159,11 @@
     "socket.io-client": "^4.7.5",
     "string-replace-to-array": "^2.1.0",
     "swiper": "^11.0.7",
+    "tinycolor2": "^1.6.0",
     "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"
@@ -187,6 +212,8 @@
     "@types/react-resizable": "^3.0.7",
     "@types/react-syntax-highlighter": "^15.5.11",
     "@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",
@@ -226,7 +253,6 @@
     "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",