leksy-editor 2.4.0 → 2.4.1

package/README.md

@@ -177,10 +177,10 @@ Similarly, Pexels and Tenor can be integrated using `pexels` and `tenor` plugins
 
 | Function | Description |
 |----------|-------------|
-| `setContents(html)` | Sets the editor's content. |
-| `getContents()` | Returns the current HTML content of the editor. |
-| `onChange(html)` | Triggered when content changes. |
-| `onBlur(html)` | Triggered when the editor loses focus. |
+| `setContents(tabs || html)` | Sets the editor's content. |
+| `getContents()` | Returns the array of tabs containing HTML content of the editor. |
+| `onChange(tabs)` | Triggered when content changes. |
+| `onBlur(tabs)` | Triggered when the editor loses focus. |
 | `onAttachment(files)` | Fires when files are attached. |
 | `manipulateImage()` | Custom function for manipulating images. |
 | `handleFilePicker()` | Custom function for file upload, useful for Android and iOS file upload. |

package/constant.js

@@ -932,6 +932,7 @@ const UNORDERED_LIST_OPTIONS = {
 
 const RESIZE_MARGIN = 10;
 
+const BLOCK_FORMAT_TAGS = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P'];
 const LIST_STYLES_BY_LEVEL = ['1', 'a', 'i', 'A'];
 const UNORDERED_LIST_STYLES_BY_LEVEL = ['disc', 'circle', 'square'];
 
@@ -958,6 +959,7 @@ export {
     CSS_VARIABLES,
     TAB_CATEGORIES,
     RESIZE_MARGIN,
+    BLOCK_FORMAT_TAGS,
     LIST_STYLES_BY_LEVEL,
     UNORDERED_LIST_STYLES_BY_LEVEL,
     UNORDERED_LIST_OPTIONS,

package/index.js

@@ -1,7 +1,7 @@
 import './style.css'
 import { CLASSES, CSS, CSS_VARIABLES, ERRORS, REGEX, SVG } from "./constant"
 import PLUGINS, { applyTextFormat } from './plugin';
-import { showAnchorPopover, changeAllToolbarState, changeToolbarStateByName, changeToolbarValueByName, cleanHTML, debounce, destroyImageResizer, destroyTableEditPlugin, initImageResizer, initTableEditPlugin, makeToolbarButton, makeToolbarColor, makeToolbarDropdown, makeToolbarSelect, rgbToHex, updateTableResizerPosition, destroyAnchorPopover, changeToolbarHtmlByName, showRemoteCursor, syncRemoteChangesDebounce, applyRemoteChanges, updateCursorPositionDebounce, buildTributeValues, updateHeight, getTableGrid, getCellPosition, makeUnorderedList, makeOrderedList, makeHeading, makeBlockQuote, makeStrikethrough, makeCodeBlock, makeSublist, showTooltip, makeToolbarButtonSelect, navigateToHeading, updateOutlineItems, highlightActiveOutline, findAndReplace, handleBackspaceInList } from './utilities';
+import { showAnchorPopover, changeAllToolbarState, changeToolbarStateByName, changeToolbarValueByName, cleanHTML, debounce, destroyImageResizer, destroyTableEditPlugin, initImageResizer, initTableEditPlugin, makeToolbarButton, makeToolbarColor, makeToolbarDropdown, makeToolbarSelect, rgbToHex, updateTableResizerPosition, destroyAnchorPopover, changeToolbarHtmlByName, showRemoteCursor, syncRemoteChangesDebounce, applyRemoteChanges, updateCursorPositionDebounce, buildTributeValues, updateHeight, getTableGrid, getCellPosition, makeUnorderedList, makeOrderedList, makeHeading, makeBlockQuote, makeStrikethrough, makeCodeBlock, makeSublist, showTooltip, makeToolbarButtonSelect, navigateToHeading, updateOutlineItems, highlightActiveOutline, findAndReplace, handleBackspaceInList, trackListSelectionDeletion, cleanupListSelectionDeletion } from './utilities';
 import { initTabs, findTab, renderTabs, prepareTabs } from './tab';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -675,6 +675,7 @@ class LeksyEditor {
         contentEditableDiv.className = 'content-editable';
 
         contentEditableDiv.oninput = (e) => {
+            cleanupListSelectionDeletion(core);
             core.onChange(e.target.innerHTML)
         }
         contentEditableDiv.onbeforeinput = (e) => {
@@ -858,6 +859,7 @@ class LeksyEditor {
             }
 
             handleBackspaceInList(event, core);
+            trackListSelectionDeletion(event, core);
 
             if (!isLinkCreated) core.elements.lastCreatedLink = null
 
@@ -1015,4 +1017,4 @@ export default LeksyEditor
 export {
     convertHtmlToText,
     isHTMLEmpty,
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leksy-editor",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "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/plugin.js

@@ -1,6 +1,6 @@
 import { EMOJI_CATEGORIES, FONT_SIZE_OPTIONS, FONTS, FORMAT_OPTIONS, MIMETYPE, REGEX, SPECIAL_CHARACTERS, SVG, UNORDERED_LIST_OPTIONS, ORDERED_LIST_OPTIONS, CLASSES } from "./constant"
 import { giphy, pexels, tenor } from "./gallery";
-import { formatLink, changeAllToolbarState, changeToolbarHtmlByName, changeToolbarStateByName, changeToolbarValueByName, cleanHTML, constructEmbedUrl, extractSocialMediaId, isLinkValid, openModal, transformTextStyle, insertTOC, } from "./utilities";
+import { formatLink, changeAllToolbarState, changeToolbarHtmlByName, changeToolbarStateByName, changeToolbarValueByName, cleanHTML, constructEmbedUrl, extractSocialMediaId, isLinkValid, openModal, transformTextStyle, insertTOC, applyFormatBlockInListItem, normalizeHeadingWrappedLists, } from "./utilities";
 
 const applyTextFormat = (core, command) => {
     core.elements.editor.focus();
@@ -12,27 +12,28 @@ const applyTextFormat = (core, command) => {
     else changeToolbarStateByName(core, 'inactive', [command])
 }
 
-const applyOrderList = (core) => {
-    core.elements.iframeWindow.execCommand('insertOrderedList');
+const applyList = (core, { command, activePlugin, inactivePlugin }) => {
+    core.elements.iframeWindow.execCommand(command);
+    normalizeHeadingWrappedLists(core);
     core.elements.editor.focus();
     core.updateCaretPosition()
 
-    const isActive = core.elements.iframeWindow.queryCommandState('insertOrderedList');
-    if (isActive) changeToolbarStateByName(core, 'active', ['ordered_list'])
-    else changeToolbarStateByName(core, 'inactive', ['ordered_list'])
-    changeToolbarStateByName(core, 'inactive', ['unordered_list'])
+    const isActive = core.elements.iframeWindow.queryCommandState(command);
+    changeToolbarStateByName(core, isActive ? 'active' : 'inactive', [activePlugin])
+    changeToolbarStateByName(core, 'inactive', [inactivePlugin])
 }
 
-const applyUnorderedList = (core) => {
-    core.elements.iframeWindow.execCommand('insertUnorderedList');
-    core.elements.editor.focus();
-    core.updateCaretPosition()
+const applyOrderList = (core) => applyList(core, {
+    command: 'insertOrderedList',
+    activePlugin: 'ordered_list',
+    inactivePlugin: 'unordered_list'
+})
 
-    const isActive = core.elements.iframeWindow.queryCommandState('insertUnorderedList');
-    if (isActive) changeToolbarStateByName(core, 'active', ['unordered_list'])
-    else changeToolbarStateByName(core, 'inactive', ['unordered_list'])
-    changeToolbarStateByName(core, 'inactive', ['ordered_list'])
-}
+const applyUnorderedList = (core) => applyList(core, {
+    command: 'insertUnorderedList',
+    activePlugin: 'unordered_list',
+    inactivePlugin: 'ordered_list'
+})
 
 const PLUGINS = {
     'undo': {
@@ -258,7 +259,11 @@ const PLUGINS = {
         width: '110px',
         click: (tag, core, options) => {
             core.elements.editor.focus();
-            core.elements.iframeWindow.execCommand('formatBlock', false, tag);
+            const isFormattedInList = applyFormatBlockInListItem(core, tag);
+            if (!isFormattedInList) {
+                core.elements.iframeWindow.execCommand('formatBlock', false, tag);
+            }
+            normalizeHeadingWrappedLists(core);
 
             core.updateCaretPosition()
             changeToolbarValueByName(core, 'format-block', tag)
@@ -276,6 +281,7 @@ const PLUGINS = {
             const isActive = core.elements.iframeWindow.queryCommandState('insertOrderedList');
             if (!isActive) {
                 core.elements.iframeWindow.execCommand('insertOrderedList');
+                normalizeHeadingWrappedLists(core);
             }
             const selection = core.elements.iframeWindow.getSelection();
             if (selection.rangeCount > 0) {
@@ -308,6 +314,7 @@ const PLUGINS = {
             const isActive = core.elements.iframeWindow.queryCommandState('insertUnorderedList');
             if (!isActive) {
                 core.elements.iframeWindow.execCommand('insertUnorderedList');
+                normalizeHeadingWrappedLists(core);
             }
             const selection = core.elements.iframeWindow.getSelection();
             if (selection.rangeCount > 0) {
@@ -1345,4 +1352,4 @@ export {
     applyTextFormat,
     applyOrderList,
     applyUnorderedList
-}
+}

package/utilities.js

@@ -1,8 +1,8 @@
-import { CLASSES, FONT_SIZES, FONTS, FORMATS, GIPHY_POWERED_IMAGE, REGEX, RESIZER_PLUGINS, SOCIAL_MEDIA_BASEURLS, SOCIAL_MEDIA_PATTERNS, SVG, TABLE_PLUGINS, TAB_CATEGORIES, RESIZE_MARGIN, LIST_STYLES_BY_LEVEL, UNORDERED_LIST_STYLES_BY_LEVEL } from "./constant";
+import { BLOCK_FORMAT_TAGS, CLASSES, FONT_SIZES, FONTS, FORMATS, GIPHY_POWERED_IMAGE, REGEX, RESIZER_PLUGINS, SOCIAL_MEDIA_BASEURLS, SOCIAL_MEDIA_PATTERNS, SVG, TABLE_PLUGINS, TAB_CATEGORIES, RESIZE_MARGIN, LIST_STYLES_BY_LEVEL, UNORDERED_LIST_STYLES_BY_LEVEL } from "./constant";
 import { DiffDOM } from 'diff-dom';
-import { applyUnorderedList, applyOrderList } from "./plugin";
 import { v4 as uuidv4 } from 'uuid';
 import { findTab } from "./tab";
+import { applyOrderList, applyUnorderedList } from "./plugin";
 
 const dd = new DiffDOM();
 
@@ -2870,6 +2870,98 @@ const isInsideTableCell = (node) => {
     return element?.closest('td, th');
 };
 
+const formatListItemContent = (li, tag) => {
+    const formattedBlock = document.createElement(tag);
+    const childNodes = Array.from(li.childNodes);
+
+    childNodes.forEach(child => {
+        if (child.nodeType === Node.ELEMENT_NODE && ['UL', 'OL'].includes(child.tagName)) return;
+        formattedBlock.appendChild(child);
+    });
+
+    if (!formattedBlock.childNodes.length) formattedBlock.innerHTML = '<br>';
+
+    const firstNestedList = Array.from(li.children).find(child => ['UL', 'OL'].includes(child.tagName));
+    li.insertBefore(formattedBlock, firstNestedList || null);
+
+    return formattedBlock;
+}
+
+const applyFormatBlockInListItem = (core, tag) => {
+    const selection = core.elements.iframeWindow.getSelection();
+    const node = selection?.rangeCount ? selection.getRangeAt(0).startContainer : null;
+    const element = node?.nodeType === Node.ELEMENT_NODE ? node : node?.parentElement;
+    const li = element?.closest('li');
+
+    if (!li || !core.elements.editor.contains(li)) return false;
+
+    const currentBlock = element.closest(BLOCK_FORMAT_TAGS.join(','));
+    const isCurrentBlockInLi = currentBlock && currentBlock.closest('li') === li;
+    let formattedBlock;
+
+    const placeCaretAtEnd = (core, element) => {
+        const range = document.createRange();
+        const selection = core.elements.iframeWindow.getSelection();
+
+        range.selectNodeContents(element);
+        range.collapse(false);
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }
+
+    if (tag === 'p') {
+        if (isCurrentBlockInLi) {
+            const fragment = document.createDocumentFragment();
+
+            while (currentBlock.firstChild) fragment.appendChild(currentBlock.firstChild);
+
+            li.insertBefore(fragment, currentBlock);
+            currentBlock.remove();
+        }
+        placeCaretAtEnd(core, li);
+        return true;
+    }
+
+    if (isCurrentBlockInLi) {
+        formattedBlock = document.createElement(tag);
+        formattedBlock.innerHTML = currentBlock.innerHTML || '<br>';
+        currentBlock.replaceWith(formattedBlock);
+    } else {
+        formattedBlock = formatListItemContent(li, tag);
+    }
+
+    placeCaretAtEnd(core, formattedBlock);
+    return true;
+}
+
+const normalizeHeadingWrappedLists = (core) => {
+    core.elements.editor.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(heading => {
+        const lists = Array.from(heading.children).filter(child => ['UL', 'OL'].includes(child.tagName));
+        if (!lists.length) return;
+
+        const headingTag = heading.tagName.toLowerCase();
+        const fragment = document.createDocumentFragment();
+
+        lists.forEach(list => {
+            list.querySelectorAll('li').forEach(li => {
+                const hasBlock = Array.from(li.children).some(child => BLOCK_FORMAT_TAGS.includes(child.tagName));
+                if (!hasBlock) formatListItemContent(li, headingTag);
+            });
+            fragment.appendChild(list);
+        });
+
+        heading.parentNode.insertBefore(fragment, heading);
+
+        if (heading.textContent.replace(/\u200B/g, '').trim() || heading.querySelector('img, br')) {
+            const paragraph = document.createElement('p');
+            paragraph.innerHTML = heading.innerHTML;
+            heading.replaceWith(paragraph);
+        } else {
+            heading.remove();
+        }
+    });
+}
+
 const makeUnorderedList = (event, core) => {
     if (event.key !== ' ') return;
 
@@ -3201,7 +3293,7 @@ const indentListItem = (li, core) => {
     const selection = core.elements.iframeWindow.getSelection();
     const range = document.createRange();
     range.selectNodeContents(li);
-    range.collapse(false);
+    range.collapse(true);
     selection.removeAllRanges();
     selection.addRange(range);
     core.elements.editor.focus();
@@ -3241,7 +3333,109 @@ const outdentListItem = (li, core) => {
 const isEmptyLi = (li) => {
     const text = li.textContent.replace(/\u200B/g, '').trim();
     const hasOnlySublist = li.children.length === 1 && li.querySelector('ul, ol');
-    return text === '' && !hasOnlySublist;
+    const hasMeaningfulElement = li.querySelector('img, iframe, audio, video, table, hr, figure');
+    return text === '' && !hasOnlySublist && !hasMeaningfulElement;
+}
+
+const trackListSelectionDeletion = (event, core) => {
+    if (event.defaultPrevented) {
+        delete core.state.pendingListSelectionDeletion;
+        return;
+    }
+
+    if (!['Backspace', 'Delete'].includes(event.key)) {
+        delete core.state.pendingListSelectionDeletion;
+        return;
+    }
+
+    const selection = core.elements.iframeWindow.getSelection();
+    if (!selection?.rangeCount) return;
+
+    const range = selection.getRangeAt(0);
+    if (range.collapsed) {
+        delete core.state.pendingListSelectionDeletion;
+        return;
+    }
+
+    const getElementFromNode = (node) => {
+        if (!node) return null;
+        return node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+    }
+
+    const startElement = getElementFromNode(range.startContainer);
+    const endElement = getElementFromNode(range.endContainer);
+    const startLi = startElement?.closest('li');
+    const endLi = endElement?.closest('li');
+
+    if (!startLi || !endLi || startLi === endLi) {
+        delete core.state.pendingListSelectionDeletion;
+        return;
+    }
+
+    const listItems = [];
+
+    core.elements.editor.querySelectorAll('li').forEach(li => {
+        if (range.intersectsNode(li)) listItems.push(li);
+    });
+
+    if (listItems.length < 2) {
+        delete core.state.pendingListSelectionDeletion;
+        return;
+    }
+
+    core.state.pendingListSelectionDeletion = {
+        listItems,
+        lists: Array.from(new Set(listItems.map(li => li.parentElement).filter(Boolean))),
+    };
+}
+
+const cleanupListSelectionDeletion = (core) => {
+    const pendingDeletion = core.state.pendingListSelectionDeletion;
+    if (!pendingDeletion) return false;
+
+    delete core.state.pendingListSelectionDeletion;
+
+    let didChange = false;
+    const lists = new Set(pendingDeletion.lists);
+
+    pendingDeletion.listItems.forEach(li => {
+        if (!li.isConnected || !core.elements.editor.contains(li)) return;
+        if (!isEmptyLi(li)) return;
+
+        const parentList = li.parentElement;
+        if (parentList) lists.add(parentList);
+        li.remove();
+        didChange = true;
+    });
+
+    Array.from(lists).reverse().forEach(list => {
+        if (!list?.isConnected || !core.elements.editor.contains(list)) return;
+        if (list.querySelector('li')) return;
+
+        list.remove();
+        didChange = true;
+    });
+
+    if (didChange) {
+        if (!core.elements.editor.textContent.replace(/\u200B/g, '').trim() && !core.elements.editor.querySelector('img, iframe, audio, video, table, hr, figure')) {
+            core.elements.editor.innerHTML = '<div><br></div>';
+        }
+
+        const selection = core.elements.iframeWindow.getSelection();
+        if (!selection?.rangeCount || !core.elements.editor.contains(selection.anchorNode)) {
+            const range = document.createRange();
+            const selection = core.elements.iframeWindow.getSelection();
+
+            range.selectNodeContents(core.elements.editor);
+            range.collapse(false);
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+
+        core.updateCaretPosition();
+    }
+
+    return didChange;
 }
 
 const makeSublist = (event, core) => {
@@ -3251,6 +3445,7 @@ const makeSublist = (event, core) => {
     if (!selection.rangeCount) return;
 
     const range = selection.getRangeAt(0);
+    const isAtStart = range.startOffset === 0;
 
     let container = range.commonAncestorContainer;
 
@@ -3274,7 +3469,7 @@ const makeSublist = (event, core) => {
 
     if (!event.shiftKey) {
         const hasContent = selectedLis.some(li => !isEmptyLi(li));
-        if (hasContent) return;
+        if (hasContent && !isAtStart) return;
     }
 
     event.preventDefault();
@@ -3419,7 +3614,74 @@ const insertTOC = (core) => {
     });
 
     tocContainer.appendChild(ul);
-    core.insertNode(tocContainer);
+
+    const selection = core.elements.iframeWindow.getSelection();
+
+    if (!selection.rangeCount) return;
+
+    const range = selection.getRangeAt(0);
+
+    if (!range.collapsed) {
+        // Replace selected content with TOC
+        range.deleteContents();
+        range.insertNode(tocContainer);
+
+        // Remove empty list items
+        editor.querySelectorAll('li').forEach(li => {
+            const text = li.textContent.replace(/\u00A0/g, '').trim();
+
+            if (
+                !text &&
+                !li.querySelector(
+                    'img, video, table, ul, ol, iframe, blockquote'
+                )
+            ) {
+                li.remove();
+            }
+        });
+
+        // Place cursor after TOC
+        const p = document.createElement('p');
+        p.innerHTML = '<br>';
+        tocContainer.after(p);
+
+        const newRange = document.createRange();
+        newRange.setStart(p, 0);
+        newRange.collapse(true);
+
+        selection.removeAllRanges();
+        selection.addRange(newRange);
+    } else {
+        // No selection -> insert after current block
+        let node = range.startContainer;
+
+        if (node.nodeType === Node.TEXT_NODE) {
+            node = node.parentElement;
+        }
+
+        const block = node.closest(
+            'p, div, h1, h2, h3, h4, h5, h6, blockquote, pre, li'
+        );
+
+        if (block) {
+            block.insertAdjacentElement('afterend', tocContainer);
+        } else {
+            editor.appendChild(tocContainer);
+        }
+
+        // Place cursor after TOC
+        const p = document.createElement('p');
+        p.innerHTML = '<br>';
+        tocContainer.after(p);
+
+        const newRange = document.createRange();
+        newRange.setStart(p, 0);
+        newRange.collapse(true);
+
+        selection.removeAllRanges();
+        selection.addRange(newRange);
+    }
+
     core.updateCaretPosition();
 };
 
@@ -4069,6 +4331,8 @@ export {
     updateHeight,
     getTableGrid,
     getCellPosition,
+    applyFormatBlockInListItem,
+    normalizeHeadingWrappedLists,
     makeUnorderedList,
     makeOrderedList,
     showTooltip,
@@ -4086,4 +4350,6 @@ export {
     highlightActiveOutline,
     findAndReplace,
     handleBackspaceInList,
+    trackListSelectionDeletion,
+    cleanupListSelectionDeletion,
 }