leksy-editor 2.0.0 → 2.1.0

package/constant.js

@@ -390,6 +390,7 @@ const CSS = {
             overflow-y: auto;
             z-index: 9999;
             color: var(--text-color);
+            height: 100vh;
         }
 
         .tabs-container .tab-header {
@@ -401,14 +402,33 @@ const CSS = {
             align-items: center;
             border-bottom: 1px solid var(--base-white-dark);
         }
-        .tabs-container .tab-header .tab-add-button {
+        .tabs-container .tab-header .tab-add-button,
+        .tabs-container .tab-header .tab-expand-button {
             cursor: pointer;
             border: none;
             background: transparent;
+            width: 24px;
+            height: 24px;
         }
-        .tabs-container .tab-header .tab-add-button svg {
+        .tabs-container .tab-header .tab-expand-button {
+            display: none;
+        }
+        .tabs-container .tab-header .tab-add-button svg,
+        .tabs-container .tab-header .tab-expand-button svg {
             fill: var(--text-color);
         }
+        .tabs-container .tab-header .tab-expand-button svg {
+            margin-bottom: 4px;
+            rotate: 180deg;
+        }
+        .tabs-container .tab-header .tab-expand-button.show svg {
+            rotate: 0deg;
+        }
+
+        .tabs-container .tab-items {
+            overflow-y: auto;
+            transition: max-height 0.3s ease, opacity 0.2s ease;
+        }
 
         .tabs-container .tab-items .tab-item {
             padding: 8px;
@@ -515,6 +535,7 @@ const CSS = {
             box-shadow: 0 2px 5px var(--shadow);
             z-index: 10001;
             max-height: 200px;
+            overflow-y: auto;
         }
         #leksy-editor-tab-context-menu .tab-submenu .tab-menu-item {
             text-overflow: ellipsis;
@@ -529,7 +550,35 @@ const CSS = {
             height: 14px;
             margin-right: 4px;
         }
-    `
+    `,
+    IFRAME_MEDIA_QUERY: `
+        @media only screen and (max-width: 991px) {
+            .tabs-container {
+                position: fixed;
+                outline: 1px solid grey;
+                width: 100%;
+                bottom: 0px;
+                border-radius: 16px 16px 0 0;
+            }
+            .tabs-container {
+                height: unset;
+            }
+            .tabs-container .tab-items {
+                max-height: 0;
+                opacity: 0;
+            }
+            .tabs-container .tab-header .tab-expand-button {
+               display: inline-block;
+            }
+            .tabs-container .tab-items.show {
+                max-height: 30vh;
+                opacity: 1;
+            }
+            .tabs-container .tab-items .tab-item .tab-dropdown {
+                visibility: visible;
+            }
+        }
+    `,
 }
 
 const RESIZER_PLUGINS = [

package/index.js

@@ -641,6 +641,7 @@ class LeksyEditor {
                         ${CSS.IFRAME_EDITOR}
                         ${CSS.IFRAME_RESIZER}
                         ${CSS.IFRAME_TAB}
+                        ${CSS.IFRAME_MEDIA_QUERY}
                         ${options.iframeStyle || ''}
                     </style>
                 </head>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leksy-editor",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Leksy Editor is an alternative to traditional WYSIWYG editors, designed primarily for creating mail templates, blogs, and documents without any content manipulation.",
   "main": "index.js",
   "directories": {

package/tab.js

@@ -1,6 +1,6 @@
 import { v4 as uuidv4 } from 'uuid';
 import { SVG } from "./constant";
-import { insertOutlinesItems } from './utilities';
+import { destroyAnchorPopover, destroyImageResizer, destroyTableEditPlugin, insertOutlinesItems } from './utilities';
 
 const initTabs = (core, options) => {
     if (!options.showTabs) return;
@@ -133,7 +133,7 @@ const renderTabs = (core, options) => {
                         renderTabs(core, options);
                     }
                     switchTab(core, tab.tabId, options);
-                }, 200);
+                }, 250);
             };
 
             tabItem.ondblclick = () => {
@@ -210,8 +210,12 @@ const renderTabs = (core, options) => {
 
     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';
@@ -219,13 +223,32 @@ const renderTabs = (core, options) => {
     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')
+    }
+    if (core.state.isTabExpandInResponsive) {
+        expandBtn.classList.add('show')
+        tabListContainer.classList.add('show')
+    }
+
+    rightDiv.appendChild(addBtn);
+    rightDiv.appendChild(expandBtn);
+
     tabHeader.appendChild(headerTitle);
-    tabHeader.appendChild(addBtn);
+    tabHeader.appendChild(rightDiv);
     core.elements.tabsContainer.prepend(tabHeader);
 }
 
@@ -235,8 +258,10 @@ const showContextMenu = (core, tab, event, level, options) => {
 
     const menu = document.createElement('div');
     menu.id = 'leksy-editor-tab-context-menu';
-    menu.style.left = `${event.clientX}px`;
-    menu.style.top = `${event.clientY}px`;
+
+    // temporary visibility to measure
+    menu.style.visibility = 'hidden';
+    menu.style.display = 'block';
 
     const closeMenu = (e) => {
         if (!menu.contains(e.target)) {
@@ -281,17 +306,43 @@ const showContextMenu = (core, tab, event, level, options) => {
         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);
+                    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 = () => {
@@ -341,7 +392,7 @@ const showContextMenu = (core, tab, event, level, options) => {
         menu.appendChild(createOption('Move out', SVG.DELETE, () => outdentTab(core, tab.tabId, options)));
     }
 
-    menu.appendChild(createOption(tab.showOutlines ? 'Hide outline' : 'Show outline', SVG.LIST_BULLETS, () => {
+    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);
@@ -349,6 +400,32 @@ const showContextMenu = (core, tab, event, level, 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) => {
@@ -368,6 +445,10 @@ const createTab = (core, 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;