leksy-editor 2.2.0 → 2.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leksy-editor",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "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/utilities.js

@@ -3648,6 +3648,7 @@ const findAndReplace = (core, options, event) => {
         const matchCase = matchCaseCheckbox.checked;
         const useRegex = useRegexCheckbox.checked;
         const wholeWord = wholeWordCheckbox.checked;
+
         span.innerText = "";
         countSpan.innerText = "";
 
@@ -3656,129 +3657,172 @@ const findAndReplace = (core, options, event) => {
             return;
         }
 
-        let textContent = editor.textContent;
-        let matchIndex = -1;
-        let matchLength = 0;
-
         let searchPattern = searchText;
 
         if (!useRegex) {
-            const escaped = searchText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-            if (wholeWord) {
-                searchPattern = `\\b${escaped}\\b`;
-            } else {
-                searchPattern = escaped;
-            }
+            const cleaned = wholeWord ? searchText.trim() : searchText;
+            const escaped = cleaned.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+            searchPattern = wholeWord
+                ? `(?<!\\w)${escaped}(?!\\w)`
+                : escaped;
         }
 
         const selection = iframeWindow.getSelection();
 
+        let regex;
         try {
             const flags = matchCase ? 'g' : 'gi';
-            const regex = new RegExp(searchPattern, flags);
-            const matches = [...textContent.matchAll(regex)];
-
-            if (matches.length > 0) {
-                let startIndex = 0;
-                if (selection.rangeCount > 0) {
-                    const range = selection.getRangeAt(0);
-                    if (direction === 'next') {
-                        startIndex = getCharIndex(editor, range.endContainer, range.endOffset);
-                    } else {
-                        startIndex = getCharIndex(editor, range.startContainer, range.startOffset);
-                    }
-                }
+            regex = new RegExp(searchPattern, flags);
+        } catch (error) {
+            span.innerText = "Invalid regular expression";
+            return;
+        }
 
-                let match;
-                if (direction === 'next') {
-                    match = matches.find(m => m.index >= startIndex);
-                    if (!match) match = matches[0];
-                } else {
-                    for (let i = matches.length - 1; i >= 0; i--) {
-                        if (matches[i].index < startIndex) {
-                            match = matches[i];
-                            break;
-                        }
-                    }
-                    if (!match) match = matches[matches.length - 1];
-                }
+        // ✅ Collect matches (node-based + global index)
+        const walker = core.elements.iframeWindow.createTreeWalker(
+            editor,
+            NodeFilter.SHOW_TEXT,
+            null
+        );
 
-                if (match) {
-                    matchIndex = match.index;
-                    matchLength = match[0].length;
-                    countSpan.innerText = `${matches.indexOf(match) + 1} of ${matches.length}`;
-                }
+        const matches = [];
+        let node;
+        let globalIndex = 0;
+
+        while ((node = walker.nextNode())) {
+            const text = node.nodeValue;
+            regex.lastIndex = 0;
+
+            let match;
+            while ((match = regex.exec(text)) !== null) {
+                matches.push({
+                    node,
+                    start: match.index,
+                    end: match.index + match[0].length,
+                    globalStart: globalIndex + match.index
+                });
             }
-        } catch (error) {
-            span.innerText = "Invalid regular expression";
+
+            globalIndex += text.length;
+        }
+
+        if (!matches.length) {
+            countSpan.innerText = "0 of 0";
             return;
         }
 
-        if (matchIndex !== -1) {
-            const startNodeInfo = getNodeAndOffsetFromIndex(editor, matchIndex);
-            const endNodeInfo = getNodeAndOffsetFromIndex(editor, matchIndex + matchLength);
+        // ✅ Get current cursor global position
+        let currentGlobal = 0;
 
-            if (startNodeInfo && endNodeInfo) {
-                const newRange = iframeWindow.createRange();
-                newRange.setStart(startNodeInfo.node, startNodeInfo.offset);
-                newRange.setEnd(endNodeInfo.node, endNodeInfo.offset);
-                selection.removeAllRanges();
-                selection.addRange(newRange);
+        if (selection.rangeCount > 0) {
+            const range = selection.getRangeAt(0);
+
+            const walker2 = core.elements.iframeWindow.createTreeWalker(
+                editor,
+                NodeFilter.SHOW_TEXT,
+                null
+            );
+
+            let n, count = 0;
 
-                startNodeInfo.node.parentElement.scrollIntoView({ block: "center", behavior: "smooth" });
+            while ((n = walker2.nextNode())) {
+                if (n === range.startContainer) {
+                    currentGlobal = count + range.startOffset;
+                    break;
+                }
+                count += n.nodeValue.length;
             }
+        }
+
+        // ✅ Find next / prev
+        let matchIndex = -1;
+
+        if (direction === 'next') {
+            matchIndex = matches.findIndex(m => m.globalStart > currentGlobal);
+            if (matchIndex === -1) matchIndex = 0;
         } else {
-            countSpan.innerText = "0 of 0";
+            for (let i = matches.length - 1; i >= 0; i--) {
+                if (matches[i].globalStart < currentGlobal) {
+                    matchIndex = i;
+                    break;
+                }
+            }
+            if (matchIndex === -1) matchIndex = matches.length - 1;
         }
+
+        const match = matches[matchIndex];
+
+        // ✅ Select
+        const newRange = core.elements.iframeWindow.createRange();
+        newRange.setStart(match.node, match.start);
+        newRange.setEnd(match.node, match.end);
+
+        selection.removeAllRanges();
+        selection.addRange(newRange);
+
+        match.node.parentElement?.scrollIntoView({
+            block: "center",
+            behavior: "smooth"
+        });
+
+        countSpan.innerText = `${matchIndex + 1} of ${matches.length}`;
     };
 
     const replace = () => {
         const searchText = findInput.value;
         const replaceText = replaceInput.value;
-        const useRegex = useRegexCheckbox.checked;
         const matchCase = matchCaseCheckbox.checked;
+        const useRegex = useRegexCheckbox.checked;
         const wholeWord = wholeWordCheckbox.checked;
 
         if (!searchText) return;
 
+        // 🔹 Build regex (same as find)
+        let pattern = searchText;
+
+        if (!useRegex) {
+            const cleaned = wholeWord ? searchText.trim() : searchText;
+            const escaped = cleaned.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+            pattern = wholeWord
+                ? `(?<!\\w)${escaped}(?!\\w)`
+                : escaped;
+        }
+
+        let regex;
+        try {
+            regex = new RegExp(pattern, matchCase ? '' : 'i');
+        } catch {
+            return;
+        }
+
         const selection = iframeWindow.getSelection();
-        if (selection.rangeCount > 0) {
-            const range = selection.getRangeAt(0);
-            const selectedText = range.toString();
-            let shouldReplace = false;
-            let newText = replaceText;
-
-            let searchPattern = searchText;
-            let isRegexSearch = useRegex;
-
-            if (!useRegex && wholeWord) {
-                const escaped = searchText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-                searchPattern = `\\b${escaped}\\b`;
-                isRegexSearch = true;
-            }
-
-            if (isRegexSearch) {
-                try {
-                    const regex = new RegExp(searchPattern, matchCase ? '' : 'i');
-                    const match = selectedText.match(regex);
-                    if (match && match[0] === selectedText) {
-                        shouldReplace = true;
-                        newText = selectedText.replace(regex, replaceText);
-                    }
-                } catch (e) { }
-            } else if (selectedText === searchText || (!matchCase && selectedText.toLowerCase() === searchText.toLowerCase())) {
-                shouldReplace = true;
-            }
 
-            if (shouldReplace) {
-                iframeWindow.execCommand('insertText', false, newText);
-                find('next');
-            } else {
-                find('next');
-            }
-        } else {
+        if (!selection.rangeCount) {
             find('next');
+            return;
         }
+
+        const range = selection.getRangeAt(0);
+        const selectedText = range.toString();
+
+        const match = selectedText.match(regex);
+
+        if (match && match[0] === selectedText) {
+            const newText = selectedText.replace(regex, replaceText);
+
+            // ✅ safe replace
+            range.deleteContents();
+            range.insertNode(core.elements.iframeWindow.createTextNode(newText));
+
+            // move cursor after replaced text
+            range.setStart(range.endContainer, range.endOffset);
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+
+        find('next');
     };
 
     const replaceAll = () => {
@@ -3790,76 +3834,72 @@ const findAndReplace = (core, options, event) => {
 
         if (!searchText) return;
 
-        let count = 0;
-        const selection = iframeWindow.getSelection();
+        let pattern = searchText;
 
-        const range = iframeWindow.createRange();
-        const startNode = getNodeAndOffsetFromIndex(editor, 0);
-        if (startNode) {
-            range.setStart(startNode.node, 0);
-            range.collapse(true);
-            selection.removeAllRanges();
-            selection.addRange(range);
+        if (!useRegex) {
+            const cleaned = wholeWord ? searchText.trim() : searchText;
+            const escaped = cleaned.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+            pattern = wholeWord
+                ? `(?<!\\w)${escaped}(?!\\w)`
+                : escaped;
         }
 
-        while (true) {
-            const currentRange = selection.getRangeAt(0);
-            const searchStart = getCharIndex(editor, currentRange.endContainer, currentRange.endOffset);
+        let regex;
+        try {
+            regex = new RegExp(pattern, matchCase ? 'g' : 'gi');
+        } catch {
+            return;
+        }
 
-            let currentContent = editor.textContent;
-            let matchIndex = -1;
-            let matchLength = 0;
-            let newText = replaceText;
+        // 🔹 Collect matches (same as find)
+        const walker = core.elements.iframeWindow.createTreeWalker(
+            editor,
+            NodeFilter.SHOW_TEXT,
+            null
+        );
 
-            let searchPattern = searchText;
-            let isRegexSearch = useRegex;
+        const matches = [];
+        let node;
 
-            if (!useRegex && wholeWord) {
-                const escaped = searchText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-                searchPattern = `\\b${escaped}\\b`;
-                isRegexSearch = true;
+        while ((node = walker.nextNode())) {
+            const text = node.nodeValue;
+            regex.lastIndex = 0;
+
+            let match;
+            while ((match = regex.exec(text)) !== null) {
+                matches.push({
+                    node,
+                    start: match.index,
+                    end: match.index + match[0].length,
+                    original: match[0]
+                });
             }
+        }
 
-            if (isRegexSearch) {
-                try {
-                    const regex = new RegExp(searchPattern, matchCase ? 'g' : 'gi');
-                    regex.lastIndex = searchStart;
-                    const match = regex.exec(currentContent);
-                    if (match) {
-                        matchIndex = match.index;
-                        matchLength = match[0].length;
-                        newText = match[0].replace(new RegExp(searchPattern, matchCase ? '' : 'i'), replaceText);
-                    }
-                } catch (e) { break; }
-            } else {
-                let search = searchText;
-                if (!matchCase) {
-                    currentContent = currentContent.toLowerCase();
-                    search = search.toLowerCase();
-                }
-                matchIndex = currentContent.indexOf(search, searchStart);
-                matchLength = search.length;
-            }
+        // 🔹 Replace in reverse (important)
+        let count = 0;
 
-            if (matchIndex === -1) break;
+        for (let i = matches.length - 1; i >= 0; i--) {
+            const m = matches[i];
+            const text = m.node.nodeValue;
 
-            const startNodeInfo = getNodeAndOffsetFromIndex(editor, matchIndex);
-            const endNodeInfo = getNodeAndOffsetFromIndex(editor, matchIndex + matchLength);
+            const newText = m.original.replace(
+                new RegExp(pattern, matchCase ? '' : 'i'),
+                replaceText
+            );
 
-            if (startNodeInfo && endNodeInfo) {
-                const newRange = iframeWindow.createRange();
-                newRange.setStart(startNodeInfo.node, startNodeInfo.offset);
-                newRange.setEnd(endNodeInfo.node, endNodeInfo.offset);
-                selection.removeAllRanges();
-                selection.addRange(newRange);
+            m.node.nodeValue =
+                text.slice(0, m.start) +
+                newText +
+                text.slice(m.end);
 
-                iframeWindow.execCommand('insertText', false, newText);
-                count++;
-            } else {
-                break;
-            }
+            count++;
         }
+
         span.innerText = `Replaced ${count} occurrences.`;
+
+        find('next');
     };
 
     prevBtn.onclick = () => find('prev');
@@ -3903,32 +3943,68 @@ const handleBackspaceInList = (event, core) => {
     const nestedList = li.querySelector('ul, ol');
     if (!nestedList) return;
 
+    
+    if (!isCaretAtStart(range, li)) return;
+
+    event.preventDefault();
+
+    const parentList = li.parentElement;
+    const prevLi = li.previousElementSibling;
+
     const clone = li.cloneNode(true);
     const nestedInClone = clone.querySelector('ul, ol');
     if (nestedInClone) nestedInClone.remove();
-    const textContent = clone.textContent.replace(/\u200B/g, '').trim();
 
-    if (textContent.length > 0 && !isCaretAtStart(range, li)) return;
-
-    event.preventDefault();
+    const parentText = clone.textContent.replace(/\u200B/g, '').trim();
 
-    const parentList = li.parentElement;
     const fragment = document.createDocumentFragment();
     const children = Array.from(nestedList.children);
 
     children.forEach(child => fragment.appendChild(child));
 
-    if (children.length > 0) {
-        parentList.insertBefore(fragment, li);
-        const firstChild = children[0];
+    // Case 1: previous list item exists
+    if (prevLi) {
+
+        if (parentText.length > 0) {
+            prevLi.appendChild(document.createTextNode(parentText));
+        }
+
+        if (children.length > 0) {
+            parentList.insertBefore(fragment, li);
+        }
+
+        li.remove();
+
+        const newRange = document.createRange();
+        newRange.selectNodeContents(prevLi);
+        newRange.collapse(false);
+
+        selection.removeAllRanges();
+        selection.addRange(newRange);
+
+    }
+    else {newRange.collapse(false);
+
+        // Case 2: first list item
+        const p = document.createElement('p');
+        p.textContent = parentText;
+
+        parentList.parentElement.insertBefore(p, parentList);
+
+        if (children.length > 0) {
+            parentList.insertBefore(fragment, li);
+        }
+
+        li.remove();
+
         const newRange = document.createRange();
-        newRange.setStart(firstChild, 0);
+        newRange.selectNodeContents(p);
         newRange.collapse(true);
+
         selection.removeAllRanges();
         selection.addRange(newRange);
     }
 
-    li.remove();
     core.updateCaretPosition();
 };