leksy-editor 2.6.0 → 3.0.0

package/tab.js

@@ -1,709 +0,0 @@
-import { v4 as uuidv4 } from 'uuid';
-import { SVG } from "./constant";
-import { destroyAnchorPopover, destroyImageResizer, destroyTableEditPlugin, insertOutlinesItems } from './utilities';
-
-const initTabs = (core, options) => {
-    if (!options.showTabs) return;
-
-    const tabsContainer = document.createElement('div');
-    tabsContainer.className = `tabs-container`;
-    core.elements.tabsContainer = tabsContainer;
-    core.elements.placeholder.style.visibility = 'hidden';
-    core.elements.iframeWindow.body.style.display = 'flex';
-    core.elements.iframeWindow.body.prepend(tabsContainer);
-    renderTabs(core, options);
-}
-
-const findTabLocation = (list, tabId, parent = null) => {
-    for (let i = 0; i < list.length; i++) {
-        if (list[i].tabId === tabId) {
-            return { list, index: i, parent };
-        }
-        if (list[i].children) {
-            const result = findTabLocation(list[i].children, tabId, list[i]);
-            if (result) return result;
-        }
-    }
-    return null;
-};
-
-const findTab = (tabs, tabId) => {
-    for (const tab of tabs) {
-        if (tab.tabId === tabId) return tab;
-        if (tab.children) {
-            const found = findTab(tab.children, tabId);
-            if (found) return found;
-        }
-    }
-    return null;
-};
-
-const isDescendant = (tabs, parentId, childId) => {
-    const parent = findTab(tabs, parentId);
-    if (!parent?.children) return false;
-    return findTab(parent.children, childId) !== null;
-};
-
-const renderTabs = (core, options) => {
-    if (!core.elements.tabsContainer) return;
-
-    core.onChange(core.html);
-    core.elements.tabsContainer.innerHTML = '';
-
-    const renderLevel = (tabs, container, level) => {
-        tabs.forEach(tab => {
-            const tabItem = document.createElement('div');
-            tabItem.className = `tab-item`;
-            tabItem.classList.toggle('active', tab.tabId === core.state.currentTabId)
-
-            tabItem.draggable = true;
-
-            tabItem.ondragstart = (e) => {
-                e.stopPropagation();
-                core.state.draggedTabId = tab.tabId;
-                e.dataTransfer.effectAllowed = 'move';
-                tabItem.style.opacity = '0.5';
-            };
-
-            tabItem.ondragend = (e) => {
-                e.stopPropagation();
-                delete core.state.draggedTabId;
-                tabItem.style.opacity = '1';
-                renderTabs(core, options);
-            };
-
-            tabItem.ondragover = (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                const draggedId = core.state.draggedTabId;
-                if (!draggedId || draggedId === tab.tabId) return;
-                if (isDescendant(core.state.tabs, draggedId, tab.tabId)) return;
-
-                const rect = tabItem.getBoundingClientRect();
-                const relY = e.clientY - rect.top;
-                const height = rect.height;
-
-                tabItem.style.borderTop = '';
-                tabItem.style.borderBottom = '1px solid #eee';
-                tabItem.style.background = '';
-
-                if (relY < height * 0.25) {
-                    tabItem.style.borderTop = '2px solid var(--primary)';
-                } else if (relY > height * 0.75) {
-                    tabItem.style.borderBottom = '2px solid var(--primary)';
-                } else {
-                    tabItem.style.background = 'rgba(0,0,0,0.05)';
-                }
-            };
-
-            tabItem.ondragleave = (e) => {
-                e.stopPropagation();
-                tabItem.style.borderTop = '';
-                tabItem.style.borderBottom = '1px solid #eee';
-                tabItem.style.background = '';
-            };
-
-            tabItem.ondrop = (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                const draggedId = core.state.draggedTabId;
-                if (!draggedId || draggedId === tab.tabId) return;
-                if (isDescendant(core.state.tabs, draggedId, tab.tabId) || level > 1) return;
-
-                const rect = tabItem.getBoundingClientRect();
-                const relY = e.clientY - rect.top;
-                const height = rect.height;
-
-                if (relY < height * 0.25) {
-                    moveTabRelative(core, draggedId, tab.tabId, 'before', options);
-                } else if (relY > height * 0.75) {
-                    moveTabRelative(core, draggedId, tab.tabId, 'after', options);
-                } else {
-                    moveTabInto(core, draggedId, tab.tabId, options);
-                }
-            };
-
-            let clickTimer;
-
-            tabItem.onclick = () => {
-                clearTimeout(clickTimer);
-                clickTimer = setTimeout(() => {
-                    if (tab.tabId === core.state.currentTabId) {
-                        tab.showOutlines = !tab.showOutlines;
-                        renderTabs(core, options);
-                    }
-                    switchTab(core, tab.tabId, options);
-                }, 250);
-            };
-
-            tabItem.ondblclick = () => {
-                if (options.disabled) return
-                clearTimeout(clickTimer);
-                renameTab(core, tab.tabId, titleInput, options);
-            };
-
-            const leftSection = document.createElement('div');
-            leftSection.className = 'left'
-            leftSection.style.paddingLeft = `${level * 12}px`
-
-            const hasChildren = tab.children && tab.children.length > 0;
-            const arrow = document.createElement('span');
-            arrow.style.width = '20px'
-            arrow.style.height = '20px';
-            arrow.style.marginRight = '4px';
-            arrow.style.cursor = 'pointer';
-            arrow.style.transition = 'transform 0.2s';
-
-            if (hasChildren) {
-                arrow.innerHTML = SVG.ARROW_DROP_DOWN_FILL;
-                arrow.style.transform = tab.isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)';
-                arrow.onclick = (e) => {
-                    e.stopPropagation();
-                    tab.isExpanded = !tab.isExpanded;
-                    renderTabs(core, options);
-                };
-            }
-
-            const titleInput = document.createElement('input');
-            titleInput.value = tab.tabTitle || 'Untitled Tab';
-            titleInput.disabled = true;
-            titleInput.className = 'tab-input';
-
-            const menuBtn = document.createElement('span');
-            menuBtn.className = 'tab-icons tab-dropdown';
-            menuBtn.innerHTML = SVG.MORE;
-
-            menuBtn.onclick = (e) => {
-                e.stopPropagation();
-                showContextMenu(core, tab, e, level, options);
-            };
-
-
-            const span = document.createElement('span');
-            span.className = 'tab-icons';
-            span.innerHTML = SVG.TABLE_OF_CONTENT;
-
-            leftSection.appendChild(arrow);
-            leftSection.appendChild(span);
-            leftSection.appendChild(titleInput);
-            tabItem.appendChild(leftSection);
-            if (!options.disabled) tabItem.appendChild(menuBtn);
-
-            const tabItemContainer = document.createElement('div');
-            tabItemContainer.id = tab.tabId;
-            tabItemContainer.appendChild(tabItem);
-
-            const outlineContainer = document.createElement('div');
-            outlineContainer.className = 'outline-items';
-            outlineContainer.style.paddingLeft = `${32 + level * 12}px`
-            tabItemContainer.appendChild(outlineContainer);
-            insertOutlinesItems(core, options, tab, outlineContainer)
-            container.appendChild(tabItemContainer);
-            core.elements.tabs[tab.tabId] = tabItemContainer
-
-            if (tab.children && tab.children.length > 0 && tab.isExpanded) {
-                const childrenContainer = document.createElement('div');
-                renderLevel(tab.children, childrenContainer, level + 1);
-                container.appendChild(childrenContainer);
-            }
-        });
-    };
-
-    const tabListContainer = document.createElement('div');
-    tabListContainer.className = 'tab-items'
-    tabListContainer.addEventListener('scroll', () => {
-        core.state.tabItemsScrollHeight = tabListContainer.scrollTop;
-    });
-    renderLevel(core.state.tabs, tabListContainer, 0);
-    core.elements.tabsContainer.appendChild(tabListContainer);
-    tabListContainer.scrollTop = core.state.tabItemsScrollHeight || 0;
-
-    const tabHeader = document.createElement('span');
-    tabHeader.className = 'tab-header';
-
-    const headerTitle = document.createElement('span');
-    headerTitle.innerHTML = "Tabs";
-
-    const rightDiv = document.createElement('div')
-    const addBtn = document.createElement('button');
-    addBtn.className = 'tab-add-button'
-    addBtn.type = 'button';
-    addBtn.innerHTML = SVG.PLUS;
-    addBtn.onclick = () => createTab(core, options);
-
-    const expandBtn = document.createElement('button');
-    expandBtn.className = 'tab-expand-button'
-    expandBtn.type = 'button';
-    expandBtn.innerHTML = SVG.ARROW_DOWN;
-    expandBtn.onclick = () => {
-        core.state.isTabExpandInResponsive = !core.state.isTabExpandInResponsive
-        expandBtn.classList.toggle('show')
-        tabListContainer.classList.toggle('show')
-    }
-    requestAnimationFrame(() => {
-        tabListContainer.classList.add('animate');
-    });
-    if (core.state.isTabExpandInResponsive) {
-        expandBtn.classList.add('show')
-        tabListContainer.classList.add('show')
-    }
-
-    if (!options.disabled) rightDiv.appendChild(addBtn);
-    rightDiv.appendChild(expandBtn);
-
-    tabHeader.appendChild(headerTitle);
-    tabHeader.appendChild(rightDiv);
-    core.elements.tabsContainer.prepend(tabHeader);
-}
-
-const showContextMenu = (core, tab, event, level, options) => {
-    const existingMenu = core.elements.iframeWindow.getElementById('leksy-editor-tab-context-menu');
-    if (existingMenu) existingMenu.remove();
-
-    const menu = document.createElement('div');
-    menu.id = 'leksy-editor-tab-context-menu';
-
-    // temporary visibility to measure
-    menu.style.visibility = 'hidden';
-    menu.style.display = 'block';
-
-    const closeMenu = (e) => {
-        if (!menu.contains(e.target)) {
-            menu.remove();
-            core.elements.iframeWindow.removeEventListener('click', closeMenu);
-        }
-    };
-
-    const createOption = (text, icon, onClick) => {
-        const item = document.createElement('div');
-        item.innerHTML = icon + text;
-        item.className = 'tab-menu-item';
-        item.onclick = (e) => {
-            e.stopPropagation();
-            menu.remove();
-            core.elements.iframeWindow.removeEventListener('click', closeMenu);
-            onClick();
-        };
-        return item;
-    };
-
-    const createSubmenuOption = (text, items) => {
-        const item = document.createElement('div');
-        item.className = 'tab-menu-item';
-        item.style.position = 'relative';
-
-        const span = document.createElement('span');
-        span.innerHTML = SVG.PLAY_LIST + text;
-        const arrow = document.createElement('span');
-        arrow.innerHTML = SVG.ARROW_DROP_RIGHT;
-        arrow.style.width = '20px';
-        arrow.style.height = '20px';
-        arrow.style.marginLeft = '4px';
-        arrow.style.display = 'flex';
-        arrow.style.alignItems = 'center';
-
-        item.appendChild(span);
-        item.appendChild(arrow);
-
-        let submenu;
-
-        item.onmouseenter = () => {
-            submenu = document.createElement('div');
-            submenu.className = 'tab-submenu';
-            submenu.style.position = 'absolute';
-            submenu.style.left = '100%';
-            submenu.style.top = '0';
-            submenu.style.visibility = 'hidden';
-
-            items.forEach(subItem => {
-                const subOption = createOption(subItem.tabTitle, SVG.TABLE_OF_CONTENT, () => {
-                    moveTabInto(core, tab.tabId, subItem.tabId, options);
-                });
-
-                if (subItem.level > 0) {
-                    subOption.style.paddingLeft = `${16 + subItem.level * 10}px`;
-                }
-
-                submenu.appendChild(subOption);
-            });
-
-            item.appendChild(submenu);
-
-            const rect = submenu.getBoundingClientRect();
-            const itemRect = item.getBoundingClientRect();
-
-            const viewportWidth = core.elements.iframeWindow.documentElement.clientWidth;
-            const viewportHeight = core.elements.iframeWindow.documentElement.clientHeight;
-
-            // if no space on right → open left
-            if (rect.right > viewportWidth) {
-                submenu.style.left = 'auto';
-                submenu.style.right = '100%';
-            }
-
-            // if no space bottom → shift up
-            if (rect.bottom > viewportHeight) {
-                submenu.style.top = `${viewportHeight - itemRect.top - rect.height}px`;
-            }
-
-            submenu.style.visibility = 'visible';
-        };
-
-        item.onmouseleave = () => {
-            if (submenu) submenu.remove();
-            submenu = null;
-        };
-
-        return item;
-    };
-
-    const location = findTabLocation(core.state.tabs, tab.tabId);
-
-    if (level < 2) {
-        menu.appendChild(createOption('Add subtab', SVG.PLUS, () => addSublist(core, tab, options)));
-    }
-
-    menu.appendChild(createOption('Duplicate', SVG.COPY, () => duplicateTab(core, tab, options)));
-
-    menu.appendChild(createOption('Rename', SVG.PENCIL_LINE, () => {
-        const tabItem = event.target.closest(`.tab-item`);
-        if (tabItem) {
-            const input = tabItem.querySelector('input');
-            if (input) renameTab(core, tab.tabId, input, options);
-        }
-    }));
-
-    menu.appendChild(createOption('Delete', SVG.DELETE, () => deleteTab(core, tab.tabId, options)));
-
-    menu.appendChild(createOption('Move up', SVG.ARROW_UP, () => moveTab(core, tab.tabId, 'up', options)));
-    menu.appendChild(createOption('Move down', SVG.ARROW_DOWN_LONG, () => moveTab(core, tab.tabId, 'down', options)));
-
-    const getTargets = (list, currentTabId, level = 0) => {
-        let targets = [];
-        for (const t of list) {
-            if (t.tabId === currentTabId || level > 1) continue;
-            targets.push({ tabId: t.tabId, tabTitle: t.tabTitle, level });
-            if (t.children) targets = targets.concat(getTargets(t.children, currentTabId, level + 1));
-        }
-        return targets;
-    };
-    const targets = getTargets(core.state.tabs, tab.tabId);
-    if (targets.length > 0) {
-        menu.appendChild(createSubmenuOption('Move into', targets));
-    }
-
-    if (location?.parent) {
-        menu.appendChild(createOption('Move out', SVG.DELETE, () => outdentTab(core, tab.tabId, options)));
-    }
-
-    menu.appendChild(createOption(tab.showOutlines ? 'Hide outlines' : 'Show outlines', SVG.LIST_BULLETS, () => {
-        tab.showOutlines = !tab.showOutlines;
-        renderTabs(core, options);
-        if (tab.showOutlines) switchTab(core, tab.tabId, options);
-    }));
-
-    core.elements.iframeWindow.body.appendChild(menu);
-    core.elements.iframeWindow.addEventListener('click', closeMenu);
-
-    const rect = menu.getBoundingClientRect();
-    const menuWidth = rect.width;
-    const menuHeight = rect.height;
-
-    const viewportWidth = core.elements.iframeWindow.documentElement.clientWidth;
-    const viewportHeight = core.elements.iframeWindow.documentElement.clientHeight;
-
-    let left = event.clientX;
-    let top = event.clientY;
-
-    // if not enough space on right → open to left
-    if (left + menuWidth > viewportWidth) {
-        left = event.clientX - menuWidth;
-    }
-
-    // if not enough space on bottom → open above
-    if (top + menuHeight > viewportHeight) {
-        top = event.clientY - menuHeight;
-    }
-
-    menu.style.left = `${left}px`;
-    menu.style.top = `${top}px`;
-    menu.style.visibility = 'visible';
-
-
-};
-
-const createTab = (core, options) => {
-    if (options.disabled) return
-    const newTab = {
-        tabTitle: `Tab ${core.state.tabs.length + 1}`,
-        tabId: uuidv4(),
-        content: '<div><br></div>',
-        children: []
-    };
-
-    core.state.tabs.push(newTab);
-    core.history.tabs[newTab.tabId] = { stack: [], currentIndex: -1 };
-
-    switchTab(core, newTab.tabId, options);
-}
-
-const switchTab = (core, tabId, options) => {
-    if (core.state.currentTabId === tabId) return;
-
-    destroyImageResizer(options, core)
-    destroyTableEditPlugin(options, core)
-    destroyAnchorPopover(core)
-
-    const currentTab = findTab(core.state.tabs, core.state.currentTabId);
-    if (currentTab) {
-        currentTab.content = core.elements.editor.innerHTML;
-    }
-
-    const nextTab = findTab(core.state.tabs, tabId);
-    if (nextTab) {
-        core.state.currentTabId = nextTab.tabId;
-        core.elements.editor.innerHTML = nextTab.content;
-        renderTabs(core, options);
-
-        core.updateCaretPosition();
-        core.elements.editor.focus();
-    }
-}
-
-const deleteTab = (core, tabId, options) => {
-    const deleteFromList = (list) => {
-        const index = list.findIndex(t => t.tabId === tabId);
-        if (index > -1) {
-            list.splice(index, 1);
-            return true;
-        }
-        for (const tab of list) {
-            if (tab.children && deleteFromList(tab.children)) return true;
-        }
-        return false;
-    };
-
-    const tabToDelete = findTab(core.state.tabs, tabId);
-    if (!tabToDelete) return;
-
-    const isCurrentTabAffected = (tab) => {
-        if (tab.tabId === core.state.currentTabId) return true;
-        if (tab.children) {
-            return tab.children.some(child => isCurrentTabAffected(child));
-        }
-        return false;
-    };
-
-    const shouldSwitch = isCurrentTabAffected(tabToDelete);
-
-    deleteFromList(core.state.tabs);
-    delete core.history.tabs[tabId];
-
-    if (shouldSwitch) {
-        if (core.state.tabs.length > 0) {
-            switchTab(core, core.state.tabs[0].tabId, options);
-        } else {
-            createTab(core, options);
-        }
-    } else {
-        renderTabs(core, options);
-    }
-}
-
-const duplicateTab = (core, tab, options) => {
-    const newTab = structuredClone(tab);
-    newTab.tabId = uuidv4();
-    newTab.tabTitle = `${newTab.tabTitle} (Copy)`;
-
-    const updateIds = (t) => {
-        t.tabId = uuidv4();
-        core.history.tabs[t.tabId] = { stack: [], currentIndex: -1 };
-        if (t.children) t.children.forEach(updateIds);
-    };
-    if (newTab.children) newTab.children.forEach(updateIds);
-
-    core.history.tabs[newTab.tabId] = { stack: [], currentIndex: -1 };
-
-    const insertIntoList = (list) => {
-        const index = list.findIndex(t => t.tabId === tab.tabId);
-        if (index > -1) {
-            list.splice(index + 1, 0, newTab);
-            return true;
-        }
-        for (const t of list) {
-            if (t.children && insertIntoList(t.children)) return true;
-        }
-        return false;
-    };
-
-    insertIntoList(core.state.tabs);
-    renderTabs(core, options);
-};
-
-const addSublist = (core, parentTab, options) => {
-    const newTab = {
-        tabTitle: `Subtab ${(parentTab.children?.length || 0) + 1}`,
-        tabId: uuidv4(),
-        content: '<div><br></div>',
-        children: []
-    };
-    core.history.tabs[newTab.tabId] = { stack: [], currentIndex: -1 };
-
-    if (!parentTab.children) parentTab.children = [];
-    parentTab.children.push(newTab);
-    parentTab.isExpanded = true;
-
-    renderTabs(core, options);
-    switchTab(core, newTab.tabId, options);
-};
-
-const moveTab = (core, tabId, direction, options) => {
-    const moveInList = (list) => {
-        const index = list.findIndex(t => t.tabId === tabId);
-        if (index > -1) {
-            if (direction === 'up' && index > 0) {
-                [list[index - 1], list[index]] = [list[index], list[index - 1]];
-                return true;
-            }
-            if (direction === 'down' && index < list.length - 1) {
-                [list[index], list[index + 1]] = [list[index + 1], list[index]];
-                return true;
-            }
-            return false;
-        }
-        for (const tab of list) {
-            if (tab.children && moveInList(tab.children)) return true;
-        }
-        return false;
-    };
-
-    if (moveInList(core.state.tabs)) {
-        renderTabs(core, options);
-    }
-};
-
-const moveTabRelative = (core, tabId, targetTabId, position, options) => {
-    const sourceLoc = findTabLocation(core.state.tabs, tabId);
-    if (!sourceLoc) return;
-
-    const [tab] = sourceLoc.list.splice(sourceLoc.index, 1);
-    const targetLoc = findTabLocation(core.state.tabs, targetTabId);
-
-    if (targetLoc) {
-        if (position === 'before') {
-            targetLoc.list.splice(targetLoc.index, 0, tab);
-        } else {
-            targetLoc.list.splice(targetLoc.index + 1, 0, tab);
-        }
-    } else {
-        sourceLoc.list.splice(sourceLoc.index, 0, tab);
-    }
-    renderTabs(core, options);
-};
-
-const moveTabInto = (core, tabId, targetTabId, options) => {
-    const sourceLoc = findTabLocation(core.state.tabs, tabId);
-    if (!sourceLoc) return;
-
-    const [tab] = sourceLoc.list.splice(sourceLoc.index, 1);
-    const targetTab = findTab(core.state.tabs, targetTabId);
-
-    if (targetTab) {
-        if (!targetTab.children) targetTab.children = [];
-        targetTab.children.push(tab);
-        targetTab.isExpanded = true;
-    }
-    renderTabs(core, options);
-};
-
-const outdentTab = (core, tabId, options) => {
-    const location = findTabLocation(core.state.tabs, tabId);
-    if (!location) return;
-    const { list, index, parent } = location;
-
-    if (parent) {
-        const parentLocation = findTabLocation(core.state.tabs, parent.tabId);
-        if (!parentLocation) return;
-
-        const { list: parentList, index: parentIndex } = parentLocation;
-        const tab = list[index];
-
-        list.splice(index, 1);
-        parentList.splice(parentIndex + 1, 0, tab);
-
-        renderTabs(core, options);
-    }
-};
-
-const renameTab = (core, tabId, titleInput, options) => {
-    const tab = findTab(core.state.tabs, tabId);
-    if (!tab) return;
-
-    titleInput.disabled = false;
-    titleInput.style.pointerEvents = 'auto';
-    titleInput.style.outline = '1px solid gray';
-
-    titleInput.onclick = (e) => e.stopPropagation();
-
-    let saved = false;
-    const save = () => {
-        if (saved) return;
-        saved = true;
-        if (titleInput.value.trim()) {
-            tab.tabTitle = titleInput.value.trim();
-        }
-        renderTabs(core, options);
-    };
-
-    titleInput.onblur = save;
-    titleInput.onkeydown = (e) => {
-        if (e.key === 'Enter') {
-            save();
-        }
-    };
-
-    titleInput.focus();
-    titleInput.select();
-}
-
-const validateAndFixTabId = (tabs) => {
-    const ids = new Set();
-    const traverse = (list) => {
-        list.forEach(tab => {
-            if (!tab.tabId || ids.has(tab.tabId)) {
-                tab.tabId = uuidv4();
-            }
-            if (!tab.content) tab.content = '<div><br></div>';
-            if (!tab.tabTitle) tab.tabTitle = 'Untitled Tab';
-
-            ids.add(tab.tabId);
-            if (tab.children && tab.children.length > 0) {
-                traverse(tab.children);
-            }
-        });
-    };
-    traverse(tabs);
-}
-
-const prepareTabs = (value) => {
-    let initialTabs = [];
-    if (Array.isArray(value) && value.length) {
-        validateAndFixTabId(value);
-        initialTabs = value;
-    } else {
-        initialTabs = [{
-            tabTitle: 'Tab 1',
-            tabId: uuidv4(),
-            content: typeof value === 'string' ? value : '<div><br></div>',
-            children: []
-        }];
-    }
-    return initialTabs
-}
-
-export {
-    initTabs,
-    renderTabs,
-    findTab,
-    prepareTabs,
-}