@visactor/vtable-plugins 1.26.1-alpha.0 → 1.26.2-alpha.1

package/dist/vtable-plugins.js

@@ -1214,11 +1214,6 @@
         }
     }
 
-    const MENU_CONTAINER_CLASS = 'vtable-context-menu-container';
-    const MENU_ITEM_CLASS = 'vtable-context-menu-item';
-    const MENU_ITEM_DISABLED_CLASS = 'vtable-context-menu-item-disabled';
-    const MENU_ITEM_SEPARATOR_CLASS = 'vtable-context-menu-item-separator';
-    const MENU_ITEM_SUBMENU_CLASS = 'vtable-context-menu-item-submenu';
     const MENU_STYLES = {
         menuContainer: {
             position: 'absolute',
@@ -1226,7 +1221,7 @@
             boxShadow: '0 2px 10px rgba(0, 0, 0, 0.2)',
             borderRadius: '4px',
             padding: '5px 0',
-            zIndex: 1000,
+            zIndex: '1000',
             minWidth: '180px',
             maxHeight: '300px',
             overflowY: 'auto',
@@ -1245,7 +1240,7 @@
             backgroundColor: '#f5f5f5'
         },
         menuItemDisabled: {
-            opacity: 0.5,
+            opacity: '0.5',
             cursor: 'not-allowed'
         },
         menuItemSeparator: {
@@ -1262,7 +1257,7 @@
             justifyContent: 'center'
         },
         menuItemText: {
-            flex: 1
+            flex: '1'
         },
         menuItemShortcut: {
             marginLeft: '20px',
@@ -1282,7 +1277,7 @@
             boxShadow: '0 2px 10px rgba(0, 0, 0, 0.2)',
             borderRadius: '4px',
             padding: '5px 0',
-            zIndex: 1001,
+            zIndex: '1001',
             minWidth: '180px',
             fontSize: '12px'
         },
@@ -1316,6 +1311,99 @@
             fontSize: '12px'
         }
     };
+    const MENU_CLASSES = {
+        menuContainer: 'vtable-context-menu-container',
+        submenuContainer: 'vtable-context-submenu-container',
+        menuItem: 'vtable-context-menu-item',
+        menuItemSeparator: 'vtable-context-menu-item-separator',
+        menuItemSubmenu: 'vtable-context-menu-item-submenu',
+        menuItemDisabled: 'vtable-context-menu-item-disabled'
+    };
+    const DANGEROUS_SVG_ELEMENTS = new Set([
+        'script',
+        'iframe',
+        'object',
+        'embed',
+        'form',
+        'input',
+        'textarea',
+        'select',
+        'button'
+    ]);
+    const DANGEROUS_ATTR_PREFIXES = ['on'];
+    const DANGEROUS_URL_ATTRS = new Set(['href', 'xlink:href']);
+    function sanitizeSvg(svgString) {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(svgString, 'image/svg+xml');
+        const errorNode = doc.querySelector('parsererror');
+        if (errorNode) {
+            return '';
+        }
+        const svg = doc.documentElement;
+        if (svg.tagName.toLowerCase() !== 'svg') {
+            return '';
+        }
+        sanitizeNode(svg);
+        const serializer = new XMLSerializer();
+        return serializer.serializeToString(svg);
+    }
+    function sanitizeNode(node) {
+        const children = Array.from(node.children);
+        for (const child of children) {
+            if (DANGEROUS_SVG_ELEMENTS.has(child.tagName.toLowerCase())) {
+                node.removeChild(child);
+            }
+            else {
+                sanitizeNode(child);
+            }
+        }
+        const attrs = Array.from(node.attributes);
+        for (const attr of attrs) {
+            const name = attr.name.toLowerCase();
+            if (DANGEROUS_ATTR_PREFIXES.some(prefix => name.startsWith(prefix))) {
+                node.removeAttribute(attr.name);
+                continue;
+            }
+            if (DANGEROUS_URL_ATTRS.has(name)) {
+                const value = attr.value.trim().toLowerCase();
+                if (value.startsWith('javascript:') || value.startsWith('data:')) {
+                    node.removeAttribute(attr.name);
+                }
+            }
+        }
+    }
+    function mergeStyles(styles) {
+        if (!styles) {
+            return { ...MENU_STYLES };
+        }
+        const result = {};
+        for (const _key in MENU_STYLES) {
+            const key = _key;
+            if (styles[key]) {
+                result[key] = { ...MENU_STYLES[key], ...styles[key] };
+            }
+            else {
+                result[key] = { ...MENU_STYLES[key] };
+            }
+        }
+        return result;
+    }
+    function mergeClasses(classes) {
+        if (!classes) {
+            return { ...MENU_CLASSES };
+        }
+        const result = {};
+        for (const _key in MENU_CLASSES) {
+            const key = _key;
+            if (classes[key]) {
+                result[key] = `${MENU_CLASSES[key]} ${normalizeClassName(classes[key]).join(' ')}`;
+            }
+            else {
+                result[key] = MENU_CLASSES[key];
+            }
+        }
+        return result;
+    }
     function createElement$1(tag, className, styles) {
         const element = document.createElement(tag);
         if (className) {
@@ -1327,11 +1415,39 @@
         return element;
     }
     function applyStyles$1(element, styles) {
-        Object.entries(styles).forEach(([key, value]) => {
-            element.style[key] = value;
-        });
-    }
-    function createIcon(iconName) {
+        for (const key in styles) {
+            const value = styles[key];
+            if (value !== undefined) {
+                element.style[key] = value;
+            }
+        }
+    }
+    function createIcon(icon, menuItem, iconStyles = MENU_STYLES.menuItemIcon) {
+        if (typeof icon === 'function') {
+            const element = icon(menuItem);
+            applyStyles$1(element, iconStyles);
+            return element;
+        }
+        if (typeof icon === 'object' && 'svg' in icon) {
+            const svgConfig = icon;
+            const iconElement = createElement$1('span');
+            const safeSvg = sanitizeSvg(svgConfig.svg);
+            if (safeSvg) {
+                iconElement.innerHTML = safeSvg;
+                const svgEl = iconElement.querySelector('svg');
+                if (svgEl) {
+                    if (svgConfig.width !== undefined) {
+                        svgEl.setAttribute('width', String(svgConfig.width));
+                    }
+                    if (svgConfig.height !== undefined) {
+                        svgEl.setAttribute('height', String(svgConfig.height));
+                    }
+                }
+            }
+            applyStyles$1(iconElement, iconStyles);
+            return iconElement;
+        }
+        const iconName = icon;
         const iconElement = createElement$1('span');
         switch (iconName) {
             case 'copy':
@@ -1376,30 +1492,48 @@
             default:
                 iconElement.innerHTML = '•';
         }
-        applyStyles$1(iconElement, MENU_STYLES.menuItemIcon);
+        applyStyles$1(iconElement, iconStyles);
         return iconElement;
     }
-    function createNumberInputItem(label, defaultValue = 1, iconName, callback) {
+    function createNumberInputItem(label, defaultValue = 1, icon, callback, styles = MENU_STYLES) {
         const container = createElement$1('div');
-        applyStyles$1(container, MENU_STYLES.inputContainer);
-        if (iconName) {
-            const icon = createIcon(iconName);
-            container.appendChild(icon);
+        applyStyles$1(container, styles.inputContainer);
+        if (icon) {
+            const iconEl = createIcon(icon, undefined, styles.menuItemIcon);
+            container.appendChild(iconEl);
         }
         const labelElement = createElement$1('label');
         labelElement.textContent = label;
-        applyStyles$1(labelElement, MENU_STYLES.inputLabel);
+        applyStyles$1(labelElement, styles.inputLabel);
         container.appendChild(labelElement);
         const input = createElement$1('input');
         input.type = 'number';
         input.min = '1';
         input.value = defaultValue.toString();
-        applyStyles$1(input, MENU_STYLES.inputField);
+        applyStyles$1(input, styles.inputField);
         container.appendChild(input);
         const wrapper = createElement$1('div');
         wrapper.appendChild(container);
         return wrapper;
     }
+    function normalizeItemClassNameConfig(classNames) {
+        const normalized = {};
+        if (classNames) {
+            Object.keys(classNames).forEach(item => {
+                const className = classNames[item];
+                if (className) {
+                    normalized[item] = normalizeClassName(className);
+                }
+            });
+        }
+        return normalized;
+    }
+    function normalizeClassName(className) {
+        if (!className) {
+            return [];
+        }
+        return isArray$6(className) ? className : className.split(' ').filter(Boolean);
+    }
 
     class MenuManager {
         menuContainer = null;
@@ -1412,12 +1546,19 @@
         submenuShowDelay = 100;
         submenuHideDelay = 500;
         menuInitializationDelay = 200;
+        styles;
+        classes;
+        constructor(styles, classes) {
+            this.styles = styles ?? MENU_STYLES;
+            this.classes = classes ?? MENU_CLASSES;
+        }
         showMenu(menuItems, x, y, context, table) {
             this.context = context;
             this.table = table;
             this.release();
-            this.menuContainer = createElement$1('div', MENU_CONTAINER_CLASS);
-            applyStyles$1(this.menuContainer, MENU_STYLES.menuContainer);
+            this.menuContainer = createElement$1('div');
+            this.menuContainer.classList.add(...normalizeClassName(this.classes.menuContainer));
+            applyStyles$1(this.menuContainer, this.styles.menuContainer);
             document.body.appendChild(this.menuContainer);
             this.menuContainer.addEventListener('contextmenu', (e) => {
                 e.preventDefault();
@@ -1440,36 +1581,55 @@
         createMenuItems(items, container, parentItem) {
             items.forEach(item => {
                 if (typeof item === 'string' && item === '---') {
-                    const separator = createElement$1('div', MENU_ITEM_SEPARATOR_CLASS);
-                    applyStyles$1(separator, MENU_STYLES.menuItemSeparator);
+                    const separator = createElement$1('div');
+                    separator.classList.add(...normalizeClassName(this.classes.menuItemSeparator));
+                    applyStyles$1(separator, this.styles.menuItemSeparator);
                     container.appendChild(separator);
                 }
                 else if (typeof item === 'object') {
                     const menuItem = item;
-                    const menuItemElement = createElement$1('div', MENU_ITEM_CLASS);
-                    applyStyles$1(menuItemElement, MENU_STYLES.menuItem);
+                    const customClassName = normalizeItemClassNameConfig(item.customClassName);
+                    const menuItemElement = createElement$1('div');
+                    menuItemElement.classList.add(...normalizeClassName(this.classes.menuItem));
+                    if (customClassName.item) {
+                        menuItemElement.classList.add(...customClassName.item);
+                    }
+                    applyStyles$1(menuItemElement, this.styles.menuItem);
                     const leftContainer = createElement$1('div');
+                    if (customClassName.leftContainer) {
+                        leftContainer.classList.add(...customClassName.leftContainer);
+                    }
                     leftContainer.style.display = 'flex';
                     leftContainer.style.alignItems = 'center';
-                    if (menuItem.iconName) {
-                        const icon = createIcon(menuItem.iconName);
+                    const iconValue = menuItem.customIcon ?? menuItem.iconName;
+                    if (iconValue) {
+                        const icon = createIcon(iconValue, menuItem, this.styles.menuItemIcon);
+                        if (customClassName.icon) {
+                            icon.classList.add(...customClassName.icon);
+                        }
                         leftContainer.appendChild(icon);
                     }
                     else if (menuItem.iconPlaceholder) {
                         const placeholder = createElement$1('span');
-                        applyStyles$1(placeholder, MENU_STYLES.menuItemIcon);
+                        applyStyles$1(placeholder, this.styles.menuItemIcon);
                         leftContainer.appendChild(placeholder);
                     }
                     const text = createElement$1('span');
+                    if (customClassName.text) {
+                        text.classList.add(...customClassName.text);
+                    }
                     text.textContent = menuItem.text;
-                    applyStyles$1(text, MENU_STYLES.menuItemText);
+                    applyStyles$1(text, this.styles.menuItemText);
                     leftContainer.appendChild(text);
                     if (item.inputDefaultValue) {
                         const input = createElement$1('input');
+                        if (customClassName.input) {
+                            input.classList.add(...customClassName.input);
+                        }
                         input.type = 'number';
                         input.min = '1';
                         input.value = item.inputDefaultValue.toString();
-                        applyStyles$1(input, MENU_STYLES.inputField);
+                        applyStyles$1(input, this.styles.inputField);
                         leftContainer.appendChild(input);
                         input.addEventListener('keydown', (e) => {
                             if (e.key === 'Enter') {
@@ -1484,25 +1644,37 @@
                     }
                     menuItemElement.appendChild(leftContainer);
                     const rightContainer = createElement$1('div');
+                    if (customClassName.rightContainer) {
+                        rightContainer.classList.add(...customClassName.rightContainer);
+                    }
                     rightContainer.style.display = 'flex';
                     rightContainer.style.alignItems = 'center';
                     if (menuItem.shortcut) {
                         const shortcut = createElement$1('span');
+                        if (customClassName.shortcut) {
+                            shortcut.classList.add(...customClassName.shortcut);
+                        }
                         shortcut.textContent = menuItem.shortcut;
-                        applyStyles$1(shortcut, MENU_STYLES.menuItemShortcut);
+                        applyStyles$1(shortcut, this.styles.menuItemShortcut);
                         rightContainer.appendChild(shortcut);
                     }
                     if (menuItem.children && menuItem.children.length > 0) {
-                        menuItemElement.classList.add(MENU_ITEM_SUBMENU_CLASS);
+                        menuItemElement.classList.add(...normalizeClassName(this.classes.menuItemSubmenu));
                         const arrow = createElement$1('span');
+                        if (customClassName.arrow) {
+                            arrow.classList.add(...customClassName.arrow);
+                        }
                         arrow.textContent = '▶';
-                        applyStyles$1(arrow, MENU_STYLES.submenuArrow);
+                        applyStyles$1(arrow, this.styles.submenuArrow);
                         rightContainer.appendChild(arrow);
                     }
                     menuItemElement.appendChild(rightContainer);
                     if (menuItem.disabled) {
-                        menuItemElement.classList.add(MENU_ITEM_DISABLED_CLASS);
-                        applyStyles$1(menuItemElement, MENU_STYLES.menuItemDisabled);
+                        menuItemElement.classList.add(...normalizeClassName(this.classes.menuItemDisabled));
+                        if (customClassName.itemDisabled) {
+                            menuItemElement.classList.add(...customClassName.itemDisabled);
+                        }
+                        applyStyles$1(menuItemElement, this.styles.menuItemDisabled);
                     }
                     if (!menuItem.disabled) {
                         if (!menuItem.children || menuItem.children.length === 0) {
@@ -1518,7 +1690,7 @@
                             });
                         }
                         menuItemElement.addEventListener('mouseenter', () => {
-                            applyStyles$1(menuItemElement, MENU_STYLES.menuItemHover);
+                            applyStyles$1(menuItemElement, this.styles.menuItemHover);
                             if (this.hideTimeout !== null) {
                                 clearTimeout(this.hideTimeout);
                                 this.hideTimeout = null;
@@ -1540,7 +1712,7 @@
                             }
                         });
                         menuItemElement.addEventListener('mouseleave', () => {
-                            Object.keys(MENU_STYLES.menuItemHover).forEach(key => {
+                            Object.keys(this.styles.menuItemHover).forEach(key => {
                                 menuItemElement.style[key] = '';
                             });
                             if (menuItem.children && menuItem.children.length > 0) {
@@ -1556,8 +1728,9 @@
         }
         showSubmenu(items, parentElement, parentItem) {
             const parentRect = parentElement.getBoundingClientRect();
-            const submenu = createElement$1('div', MENU_CONTAINER_CLASS);
-            applyStyles$1(submenu, MENU_STYLES.submenuContainer);
+            const submenu = createElement$1('div');
+            submenu.classList.add(...normalizeClassName(this.classes.menuContainer), ...normalizeClassName(this.classes.submenuContainer));
+            applyStyles$1(submenu, this.styles.submenuContainer);
             this.createMenuItems(items, submenu, parentItem);
             document.body.appendChild(submenu);
             const submenuRect = submenu.getBoundingClientRect();
@@ -10231,7 +10404,7 @@ ${recordsStr}
         constructor(pluginOptions = {}) {
             this.id = pluginOptions.id ?? this.id;
             this.pluginOptions = pluginOptions;
-            this.menuManager = new MenuManager();
+            this.menuManager = new MenuManager(mergeStyles(pluginOptions.customMenuAttributions?.style), mergeClasses(pluginOptions.customMenuAttributions?.class));
             this.menuHandler = new MenuHandler();
             this.initDefaultMenuItems();
         }
@@ -27048,11 +27221,7 @@ ${recordsStr}
     exports.HighlightHeaderWhenSelectCellPlugin = HighlightHeaderWhenSelectCellPlugin;
     exports.HistoryPlugin = HistoryPlugin;
     exports.InvertHighlightPlugin = InvertHighlightPlugin;
-    exports.MENU_CONTAINER_CLASS = MENU_CONTAINER_CLASS;
-    exports.MENU_ITEM_CLASS = MENU_ITEM_CLASS;
-    exports.MENU_ITEM_DISABLED_CLASS = MENU_ITEM_DISABLED_CLASS;
-    exports.MENU_ITEM_SEPARATOR_CLASS = MENU_ITEM_SEPARATOR_CLASS;
-    exports.MENU_ITEM_SUBMENU_CLASS = MENU_ITEM_SUBMENU_CLASS;
+    exports.MENU_CLASSES = MENU_CLASSES;
     exports.MENU_STYLES = MENU_STYLES;
     exports.MasterDetailPlugin = MasterDetailPlugin;
     exports.MenuManager = MenuManager;
@@ -27078,10 +27247,15 @@ ${recordsStr}
     exports.extendNumberRule = extendNumberRule;
     exports.formulaRule = formulaRule;
     exports.loopSeriesRule = loopSeriesRule;
+    exports.mergeClasses = mergeClasses;
+    exports.mergeStyles = mergeStyles;
+    exports.normalizeClassName = normalizeClassName;
+    exports.normalizeItemClassNameConfig = normalizeItemClassNameConfig;
     exports.numberRule = numberRule;
     exports.otherRule = otherRule;
     exports.replayCommand = replayCommand;
     exports.reverseIfNeed = reverseIfNeed;
     exports.rotate90WithTransform = rotate90WithTransform;
+    exports.sanitizeSvg = sanitizeSvg;
 
 }));