leksy-editor 1.4.1 → 2.0.0

package/tab.js

@@ -0,0 +1,623 @@
+import { v4 as uuidv4 } from 'uuid';
+import { SVG } from "./constant";
+import { 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);
+                }, 200);
+            };
+
+            tabItem.ondblclick = () => {
+                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);
+            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'
+    renderLevel(core.state.tabs, tabListContainer, 0);
+    core.elements.tabsContainer.appendChild(tabListContainer);
+
+    const tabHeader = document.createElement('span');
+    tabHeader.className = 'tab-header';
+
+    const headerTitle = document.createElement('span');
+    headerTitle.innerHTML = "Tabs";
+
+    const addBtn = document.createElement('button');
+    addBtn.className = 'tab-add-button'
+    addBtn.type = 'button';
+    addBtn.innerHTML = SVG.PLUS;
+    addBtn.onclick = () => createTab(core, options);
+    tabHeader.appendChild(headerTitle);
+    tabHeader.appendChild(addBtn);
+    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';
+    menu.style.left = `${event.clientX}px`;
+    menu.style.top = `${event.clientY}px`;
+
+    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';
+
+            items.forEach(subItem => {
+                const subOption = createOption(subItem.tabTitle, SVG.TABLE_OF_CONTENT, () => {
+                    moveTabInto(core, tab.tabId, subItem.tabId);
+                });
+                if (subItem.level > 0) {
+                    subOption.style.paddingLeft = `${16 + subItem.level * 10}px`;
+                }
+                submenu.appendChild(subOption);
+            });
+            item.appendChild(submenu);
+        };
+
+        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 outline' : 'Show outline', 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 createTab = (core, options) => {
+    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;
+
+    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,
+}