leksy-editor 2.1.4 → 2.2.0

package/README.md

@@ -108,6 +108,7 @@ const app = createApp({
 | `disabled` | To disabled editor |
 | `onFullScreen` | To open custom preview |
 | `showTabs` | Enables or disables the display of tabs. |
+| `enableFindAndReplace` | To enabled find and replace feature|
 
 ### CSS Customization
 

package/constant.js

@@ -41,6 +41,7 @@ const CLASSES = {
     RESIZE_ITEMS: '-resize-items',
     RESIZE_ITEM: '-resize-item',
     MODAL: '-modal',
+    DRAGGABLE_MODAL: '-draggable-modal',
     MODAL_CONTENT: '-modal-content',
     MODAL_HEADER: '-modal-header',
     MODAL_BODY: '-modal-body',

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 } 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 } from './utilities';
 import { initTabs, findTab, renderTabs, prepareTabs } from './tab';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -32,6 +32,7 @@ class LeksyEditor {
      * @property {Boolean} disabled
      * @property {Function} onFullScreen
      * @property {Boolean} showTabs
+     * @property {Boolean} enableFindAndReplace 
      */
     /**
      * 
@@ -177,6 +178,9 @@ class LeksyEditor {
                 syncRemoteChangesDebounce(core)
                 updateOutlineItems(core, options)
             },
+            onSave:() => {
+                if (editorRef.onSave instanceof Function) editorRef.onSave()
+            },
             onBlur: (html) => {
                 if (editorRef.onBlur instanceof Function) editorRef.onBlur(html)
             },
@@ -292,6 +296,7 @@ class LeksyEditor {
             },
             getContents: () => core.state.tabs,
             onChange: () => { },
+            onSave: () => { },
             onBlur: () => { },
             onAttachment: () => { },
             manuplateImage: async () => { },
@@ -657,7 +662,7 @@ class LeksyEditor {
             const isCtrlOrCmd = event.ctrlKey || event.metaKey;
 
             // Check for Ctrl + Z (undo) or Ctrl + Y (redo)
-            if (isCtrlOrCmd && ['z', 'y', 'b', 'i', 'u'].includes(event.key)) {
+            if (isCtrlOrCmd && ['z', 'y', 'b', 'i', 'u', 'f', 'h', 's'].includes(event.key)) {
                 return event.preventDefault();  // Prevent the default undo/redo action
             }
         }
@@ -695,6 +700,10 @@ class LeksyEditor {
                     applyTextFormat(core, 'underline')
                 } else if (event.key === 'i') {
                     applyTextFormat(core, 'italic')
+                } else if (event.key === 'f' || event.key === 'h'){
+                    findAndReplace(core, options, event)
+                } else if (event.key === 's'){
+                    core.onSave();
                 }
             }
 
@@ -846,6 +855,8 @@ class LeksyEditor {
                 range.setStart(textNode, textNode.length);
                 range.collapse(true);
             }
+            
+            handleBackspaceInList(event, core);
 
             if (!isLinkCreated) core.elements.lastCreatedLink = null
 
@@ -996,8 +1007,7 @@ const convertHtmlToText = (html) => {
 const isHTMLEmpty = (html) => {
     const tempElement = document.createElement('div');
     tempElement.innerHTML = html
-
-    return !tempElement.innerText.trim() && !tempElement.querySelector('img');
+    return !tempElement.innerText.trim() && !tempElement.querySelector('img , ol, ul, blockquote, h1, h2, h3');
 }
 
 export default LeksyEditor

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leksy-editor",
-  "version": "2.1.4",
+  "version": "2.2.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/style.css

@@ -472,6 +472,16 @@ button.leksy-editor-popover-tab.active {
     background-color: rgba(0, 0, 0, 0.5);
 }
 
+.leksy-editor-modal.leksy-editor-draggable-modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: inherit;
+    width: fit-content;
+    height: inherit;
+}
+
 .leksy-editor-modal-content {
     margin: 10% auto;
     border: 1px solid #898f9f;
@@ -479,8 +489,13 @@ button.leksy-editor-popover-tab.active {
     border-radius: 12px;
 }
 
+.leksy-editor-modal.leksy-editor-draggable-modal .leksy-editor-modal-content {
+    margin: unset;
+    width: fit-content;
+}
+
 .leksy-editor-modal-header {
-    padding: 1.5rem;
+    padding: 1.25rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -502,7 +517,7 @@ button.leksy-editor-popover-tab.active {
 
 .leksy-editor-modal-footer {
     background-color: #f2f2f3;
-    padding: 1.5rem;
+    padding: 1.25rem;
     display: flex;
     justify-content: flex-end;
     gap: 12px;
@@ -622,34 +637,64 @@ button.leksy-editor-popover-tab.active {
 }
 
 .leksy-editor-upload-img-box {
-  height: 180px;
-  border: 2px dashed #d1d5db;
-  border-radius: 12px;
-  background: #f9fafb;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: border-color 0.2s ease;
+    height: 180px;
+    border: 2px dashed #d1d5db;
+    border-radius: 12px;
+    background: #f9fafb;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: border-color 0.2s ease;
 }
 
 .leksy-editor-upload-img-box:hover {
-  border-color: gray;
+    border-color: gray;
 }
 
 .leksy-editor-upload-img-preview-box {
-  height: 180px;
-  border: 2px solid grey;
-  margin-bottom: 8px;
-  border-radius: 8px;
+    height: 180px;
+    border: 2px solid grey;
+    margin-bottom: 8px;
+    border-radius: 8px;
 }
 
 .leksy-editor-upload-img-preview {
-  width: 100%;
-  height: 100%;
-  border-radius: 8px;
-  object-fit: cover;
-  object-position: top;
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+    object-fit: cover;
+    object-position: top;
+}
+
+.leksy-editor-find-and-replace-modal-tab-btn {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+    padding: 0;
+    color: var(--primary);
+}
+
+.leksy-editor-find-and-replace-modal-tab-btn.active {
+    font-weight: bold;
+    border-bottom: 2px solid black;
+}
+
+.leksy-editor-find-and-replace-modal-label {
+    padding-left: 4px;
+    margin-bottom: 10px;
+}
+
+.leksy-editor-find-and-replace-modal-count {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 12px;
+    color: #585555;
+    pointer-events: none;
+    user-select: none;
 }
 
 @keyframes leksy-editor-rotate {

package/utilities.js

@@ -1122,6 +1122,111 @@ const openModal = ({ title, bodyNode, footerNode }, core, options) => {
     }
 }
 
+const openDraggableModal = ({ title, bodyNode, footerNode, onClose }, core, options) => {
+    const modalContainer = document.createElement('div');
+    modalContainer.className = `${options.classPrefix}${CLASSES.MODAL} ${options.classPrefix}${CLASSES.DRAGGABLE_MODAL} `
+
+    const modalContent = document.createElement('div');
+    modalContent.className = `${options.classPrefix}${CLASSES.MODAL_CONTENT} `
+
+    const modalHeader = document.createElement('div');
+    modalHeader.className = `${options.classPrefix}${CLASSES.MODAL_HEADER} `
+    if (title instanceof HTMLElement) {
+        modalHeader.appendChild(title);
+    } else {
+        const modalTitle = document.createElement('span');
+        modalTitle.innerText = title ?? ''
+        modalHeader.appendChild(modalTitle);
+    }
+    const modalCloseButton = document.createElement('button');
+    modalCloseButton.className = 'modal-close-btn';
+    modalCloseButton.innerHTML = SVG.CLOSE;
+    modalCloseButton.type = 'button'
+    modalCloseButton.onclick = () => {
+        modalContainer.remove();
+        if (typeof onClose === 'function') onClose()
+    }
+    modalHeader.appendChild(modalCloseButton)
+
+    let isDragging = false;
+    let currentX;
+    let currentY;
+    let initialX;
+    let initialY;
+    let xOffset = 0;
+    let yOffset = 0;
+
+    const dragStart = (e) => {
+        if (e.target.closest('button')) return;
+
+        if (e.type === "touchstart") {
+            initialX = e.touches[0].clientX - xOffset;
+            initialY = e.touches[0].clientY - yOffset;
+        } else {
+            initialX = e.clientX - xOffset;
+            initialY = e.clientY - yOffset;
+        }
+
+        isDragging = true;
+
+        document.addEventListener('mouseup', dragEnd);
+        document.addEventListener('touchend', dragEnd);
+        core.elements.iframeWindow.addEventListener('mouseup', dragEnd);
+        core.elements.iframeWindow.addEventListener('touchend', dragEnd);
+        document.addEventListener('mousemove', drag);
+        document.addEventListener('touchmove', drag);
+    };
+
+    const dragEnd = () => {
+        isDragging = false;
+        document.removeEventListener('mouseup', dragEnd, false);
+        document.removeEventListener('touchend', dragEnd, false);
+        core.elements.iframeWindow.removeEventListener('mouseup', dragEnd, false);
+        core.elements.iframeWindow.removeEventListener('touchend', dragEnd, false);
+        document.removeEventListener('mousemove', drag, false);
+        document.removeEventListener('touchmove', drag, false);
+    };
+
+    const drag = (e) => {
+        if (isDragging) {
+            e.preventDefault();
+            currentX = (e.type === "touchmove" ? e.touches[0].clientX : e.clientX) - initialX;
+            currentY = (e.type === "touchmove" ? e.touches[0].clientY : e.clientY) - initialY;
+
+            xOffset = currentX;
+            yOffset = currentY;
+
+            modalContainer.style.transform = `translate(-50%, -50%) translate3d(${currentX}px, ${currentY}px, 0)`;
+        }
+    };
+
+    modalHeader.addEventListener('mousedown', dragStart, false);
+    modalHeader.addEventListener('touchstart', dragStart, false);
+
+    const modalBody = document.createElement('div');
+    modalBody.className = `${options.classPrefix}${CLASSES.MODAL_BODY} `
+    modalBody.appendChild(bodyNode)
+
+    const modalFooter = document.createElement('div');
+    modalFooter.className = `${options.classPrefix}${CLASSES.MODAL_FOOTER} `
+    modalFooter.appendChild(footerNode)
+
+    modalContent.appendChild(modalHeader);
+    modalContent.appendChild(modalBody);
+    modalContent.appendChild(modalFooter);
+
+    modalContainer.appendChild(modalContent)
+    core.elements.base.appendChild(modalContainer)
+
+    return {
+        close: () => {
+            modalContainer.remove();
+            if (typeof onClose === 'function') onClose()
+        }
+    }
+}
+
+
 const initImageResizer = (type, image, options, core) => {
     destroyImageResizer(options, core)
     changeAllToolbarState(core, 'disabled', ['link', 'align_justify', 'align_left', 'align_right', 'align_center'])
@@ -3061,14 +3166,18 @@ const indentListItem = (li, core) => {
     const prevLi = li.previousElementSibling;
     if (!prevLi) return;
 
-    const parentTag = li.parentElement.tagName;
-    let subList = prevLi.querySelector(parentTag);
+    const parentList = li.parentElement;
+    const parentTag = parentList.tagName; // UL or OL
+
+    let subList = prevLi.querySelector(`:scope > ${parentTag}`);
 
+    // create sublist if it doesn't exist
     if (!subList) {
         subList = document.createElement(parentTag);
         prevLi.appendChild(subList);
     }
 
+    // move the li into the sublist
     subList.appendChild(li);
     const selection = core.elements.iframeWindow.getSelection();
     const range = document.createRange();
@@ -3078,7 +3187,6 @@ const indentListItem = (li, core) => {
     selection.addRange(range);
     core.elements.editor.focus();
     core.updateCaretPosition();
-
     if (parentTag === 'OL' || parentTag === 'UL') {
         const level = getListLevel(li);
         applyListStyle(subList, level);
@@ -3089,13 +3197,12 @@ const outdentListItem = (li, core) => {
     const parentOl = li.parentElement;
     const parentLi = parentOl.closest('li');
     if (!parentLi) return;
-
     parentLi.after(li);
 
     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();
@@ -3118,26 +3225,37 @@ const makeSublist = (event, core) => {
     const selection = core.elements.iframeWindow.getSelection();
     if (!selection.rangeCount) return;
 
-    let node = selection.anchorNode;
-    if (node.nodeType === Node.TEXT_NODE) {
-        node = node.parentElement;
+    const range = selection.getRangeAt(0);
+
+    let container = range.commonAncestorContainer;
+
+    if (container.nodeType === Node.TEXT_NODE) {
+        container = container.parentElement;
     }
+    // find the nearest list container
+    const list = container.closest('ul, ol');
+    if (!list) return;
+    const allLis = list.querySelectorAll('li');
 
-    const li = node.closest('li');
-    if (!li) return;
+    const selectedLis = [];
 
-    const clone = li.cloneNode(true);
-    clone.querySelectorAll('ul, ol').forEach(l => l.remove());
-    const hasContent = clone.textContent.replace(/\u00A0/g, '').length > 0 || clone.querySelector('img, video, audio, table, hr');
-    if (hasContent) return;
+    allLis.forEach(li => {
+        if (range.intersectsNode(li)) {
+            selectedLis.push(li);
+        }
+    });
+
+    if (!selectedLis.length) return;
 
     event.preventDefault();
 
-    if (event.shiftKey) {
-        outdentListItem(li, core);
-    } else {
-        indentListItem(li, core);
-    }
+    selectedLis.forEach(li => {
+        if (event.shiftKey) {
+            outdentListItem(li, core);
+        } else {
+            indentListItem(li, core);
+        }
+    });
 };
 
 const transformCase = (text, type) => {
@@ -3350,6 +3468,470 @@ const updateOutlineItems = debounce((core, options) => {
     highlightActiveOutline(core, options, outlineContainer);
 }, 300)
 
+const findAndReplace = (core, options, event) => {
+    if (!options.enableFindAndReplace) return;
+    if (core.state.findAndReplaceModalOpen) return;
+
+    core.state.findAndReplaceModalOpen = true
+    const editor = core.elements.editor;
+    const iframeWindow = core.elements.iframeWindow;
+
+    const headerContainer = document.createElement('div');
+    headerContainer.style.display = 'flex';
+    headerContainer.style.gap = '15px';
+    headerContainer.style.alignItems = 'center';
+
+    const findTab = document.createElement('button');
+    findTab.type = 'button';
+    findTab.innerText = 'Find';
+    findTab.className = 'leksy-editor-find-and-replace-modal-tab-btn';
+
+    const replaceTab = document.createElement('button');
+    replaceTab.type = 'button';
+    replaceTab.innerText = 'Replace';
+    replaceTab.className = 'leksy-editor-find-and-replace-modal-tab-btn';
+
+    headerContainer.append(findTab, replaceTab);
+
+    const body = document.createElement('div');
+
+    const findLabel = document.createElement("label");
+    findLabel.innerText = "Find";
+    findLabel.style.paddingLeft = "4px";
+
+    const findInputWrapper = document.createElement('div');
+    findInputWrapper.style.position = 'relative';
+    findInputWrapper.style.marginBottom = '10px';
+
+    const findInput = document.createElement('input');
+    findInput.type = 'text';
+    findInput.placeholder = 'Search text';
+    findInput.style.width = '100%';
+    findInput.style.boxSizing = 'border-box';
+    findInput.style.paddingRight = '60px';
+
+    const countSpan = document.createElement('span');
+    countSpan.className = 'leksy-editor-find-and-replace-modal-count';
+
+    findInputWrapper.append(findInput, countSpan);
+
+    const replaceLabel = document.createElement("label");
+    replaceLabel.innerText = "Replace with";
+    replaceLabel.style.display = "block";
+    replaceLabel.style.paddingLeft = "4px";
+    const replaceInput = document.createElement('input');
+    replaceInput.type = 'text';
+    replaceInput.placeholder = 'Replace text';
+    replaceInput.style.marginBottom = '10px';
+
+    const optionsContainer = document.createElement('div');
+    optionsContainer.style.marginBottom = '10px';
+    optionsContainer.style.display = 'flex';
+    optionsContainer.style.flexDirection = 'column'
+
+    const matchCaseCheckboxContainer = document.createElement('div');
+    const matchCaseCheckbox = document.createElement('input');
+    matchCaseCheckbox.type = 'checkbox';
+    matchCaseCheckbox.id = 'match-case-opt';
+    matchCaseCheckbox.style.marginRight = '5px';
+    matchCaseCheckbox.style.width = '24px';
+
+    const matchCaseLabel = document.createElement('label');
+    matchCaseLabel.innerText = "Match case";
+    matchCaseLabel.htmlFor = 'match-case-opt';
+    matchCaseLabel.style.userSelect = 'none';
+    matchCaseCheckboxContainer.append(matchCaseCheckbox, matchCaseLabel)
+
+    const wholeWordCheckboxContainer = document.createElement('div');
+    const wholeWordCheckbox = document.createElement('input');
+    wholeWordCheckbox.type = 'checkbox';
+    wholeWordCheckbox.id = 'whole-word-opt';
+    wholeWordCheckbox.style.marginRight = '5px';
+    wholeWordCheckbox.style.width = '24px';
+
+    const wholeWordLabel = document.createElement('label');
+    wholeWordLabel.innerText = "Whole word";
+    wholeWordLabel.htmlFor = 'whole-word-opt';
+    wholeWordLabel.style.userSelect = 'none';
+    wholeWordCheckboxContainer.append(wholeWordCheckbox, wholeWordLabel);
+
+    const regexCheckboxContainer = document.createElement('div');
+    const useRegexCheckbox = document.createElement('input');
+    useRegexCheckbox.type = 'checkbox';
+    useRegexCheckbox.id = 'use-regex-opt';
+    useRegexCheckbox.style.marginRight = '5px';
+    useRegexCheckbox.style.width = '24px';
+
+    const useRegexLabel = document.createElement('label');
+    useRegexLabel.innerText = "Use regular expressions";
+    useRegexLabel.htmlFor = 'use-regex-opt';
+    useRegexLabel.style.userSelect = 'none';
+    regexCheckboxContainer.append(useRegexCheckbox, useRegexLabel)
+
+    optionsContainer.append(matchCaseCheckboxContainer, regexCheckboxContainer, wholeWordCheckboxContainer);
+
+    const span = document.createElement('span');
+    span.className = 'warning';
+
+    body.append(findLabel, findInputWrapper, replaceLabel, replaceInput, optionsContainer, span);
+
+    const footer = document.createElement('div');
+    footer.style.display = 'flex';
+    footer.style.gap = '8px';
+    footer.style.justifyContent = 'flex-end';
+    footer.style.width = '100%';
+
+    const prevBtn = document.createElement('button');
+    prevBtn.type = 'button';
+    prevBtn.className = 'submit';
+    prevBtn.innerText = 'Previous';
+
+    const nextBtn = document.createElement('button');
+    nextBtn.type = 'button';
+    nextBtn.className = 'submit';
+    nextBtn.innerText = 'Next';
+
+    const replaceBtn = document.createElement('button');
+    replaceBtn.type = 'button';
+    replaceBtn.className = 'submit';
+    replaceBtn.innerText = 'Replace';
+
+    const replaceAllBtn = document.createElement('button');
+    replaceAllBtn.type = 'button';
+    replaceAllBtn.className = 'submit';
+    replaceAllBtn.innerText = 'Replace All';
+
+    footer.append(prevBtn, nextBtn, replaceBtn, replaceAllBtn);
+
+    const toggleTab = (mode) => {
+        if (mode === 'find') {
+            replaceLabel.style.display = 'none';
+            replaceInput.style.display = 'none';
+            replaceBtn.style.display = 'none';
+            replaceAllBtn.style.display = 'none';
+
+            findTab.classList.add('active');
+            replaceTab.classList.remove('active');
+        } else {
+            replaceLabel.style.display = 'block';
+            replaceInput.style.display = 'block';
+            replaceBtn.style.display = 'flex';
+            replaceAllBtn.style.display = 'flex';
+
+            replaceTab.classList.add('active');
+            findTab.classList.remove('active');
+        }
+    }
+
+    findTab.onclick = () => toggleTab('find');
+    replaceTab.onclick = () => toggleTab('replace');
+
+    openDraggableModal({
+        title: headerContainer,
+        bodyNode: body,
+        footerNode: footer,
+        onClose: () => {
+            core.state.findAndReplaceModalOpen = false
+        }
+    }, core, options);
+
+    if (event.key === 'f')
+        toggleTab('find');
+    else
+        toggleTab('replace');
+
+
+    findInput.focus();
+
+    const find = (direction) => {
+        const searchText = findInput.value;
+        const matchCase = matchCaseCheckbox.checked;
+        const useRegex = useRegexCheckbox.checked;
+        const wholeWord = wholeWordCheckbox.checked;
+        span.innerText = "";
+        countSpan.innerText = "";
+
+        if (!searchText) {
+            span.innerText = "Please enter text to find";
+            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 selection = iframeWindow.getSelection();
+
+        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);
+                    }
+                }
+
+                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];
+                }
+
+                if (match) {
+                    matchIndex = match.index;
+                    matchLength = match[0].length;
+                    countSpan.innerText = `${matches.indexOf(match) + 1} of ${matches.length}`;
+                }
+            }
+        } catch (error) {
+            span.innerText = "Invalid regular expression";
+            return;
+        }
+
+        if (matchIndex !== -1) {
+            const startNodeInfo = getNodeAndOffsetFromIndex(editor, matchIndex);
+            const endNodeInfo = getNodeAndOffsetFromIndex(editor, matchIndex + matchLength);
+
+            if (startNodeInfo && endNodeInfo) {
+                const newRange = iframeWindow.createRange();
+                newRange.setStart(startNodeInfo.node, startNodeInfo.offset);
+                newRange.setEnd(endNodeInfo.node, endNodeInfo.offset);
+                selection.removeAllRanges();
+                selection.addRange(newRange);
+
+                startNodeInfo.node.parentElement.scrollIntoView({ block: "center", behavior: "smooth" });
+            }
+        } else {
+            countSpan.innerText = "0 of 0";
+        }
+    };
+
+    const replace = () => {
+        const searchText = findInput.value;
+        const replaceText = replaceInput.value;
+        const useRegex = useRegexCheckbox.checked;
+        const matchCase = matchCaseCheckbox.checked;
+        const wholeWord = wholeWordCheckbox.checked;
+
+        if (!searchText) 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 {
+            find('next');
+        }
+    };
+
+    const replaceAll = () => {
+        const searchText = findInput.value;
+        const replaceText = replaceInput.value;
+        const matchCase = matchCaseCheckbox.checked;
+        const useRegex = useRegexCheckbox.checked;
+        const wholeWord = wholeWordCheckbox.checked;
+
+        if (!searchText) return;
+
+        let count = 0;
+        const selection = iframeWindow.getSelection();
+
+        const range = iframeWindow.createRange();
+        const startNode = getNodeAndOffsetFromIndex(editor, 0);
+        if (startNode) {
+            range.setStart(startNode.node, 0);
+            range.collapse(true);
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+
+        while (true) {
+            const currentRange = selection.getRangeAt(0);
+            const searchStart = getCharIndex(editor, currentRange.endContainer, currentRange.endOffset);
+
+            let currentContent = editor.textContent;
+            let matchIndex = -1;
+            let matchLength = 0;
+            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 ? '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;
+            }
+
+            if (matchIndex === -1) break;
+
+            const startNodeInfo = getNodeAndOffsetFromIndex(editor, matchIndex);
+            const endNodeInfo = getNodeAndOffsetFromIndex(editor, matchIndex + matchLength);
+
+            if (startNodeInfo && endNodeInfo) {
+                const newRange = iframeWindow.createRange();
+                newRange.setStart(startNodeInfo.node, startNodeInfo.offset);
+                newRange.setEnd(endNodeInfo.node, endNodeInfo.offset);
+                selection.removeAllRanges();
+                selection.addRange(newRange);
+
+                iframeWindow.execCommand('insertText', false, newText);
+                count++;
+            } else {
+                break;
+            }
+        }
+        span.innerText = `Replaced ${count} occurrences.`;
+    };
+
+    prevBtn.onclick = () => find('prev');
+    nextBtn.onclick = () => find('next');
+    replaceBtn.onclick = replace;
+    replaceAllBtn.onclick = replaceAll;
+
+    const onInputKeydown = (event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            find('next');
+        }
+    };
+    findInput.addEventListener('keydown', onInputKeydown);
+}
+
+const isCaretAtStart = (range, li) => {
+    const preRange = range.cloneRange();
+    preRange.selectNodeContents(li);
+    preRange.setEnd(range.startContainer, range.startOffset);
+
+    return preRange.toString().length === 0;
+};
+const handleBackspaceInList = (event, core) => {
+    if (event.key !== 'Backspace') return;
+
+    const selection = core.elements.iframeWindow.getSelection();
+    if (!selection.rangeCount) return;
+    const range = selection.getRangeAt(0);
+
+    if (!range.collapsed) return;
+
+    let element = range.startContainer;
+    if (element.nodeType === Node.TEXT_NODE) element = element.parentElement;
+
+    const li = element.closest('li');
+    if (!li) return;
+
+    if (!core.elements.editor.contains(li)) return;
+
+    const nestedList = li.querySelector('ul, ol');
+    if (!nestedList) return;
+
+    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 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];
+        const newRange = document.createRange();
+        newRange.setStart(firstChild, 0);
+        newRange.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(newRange);
+    }
+
+    li.remove();
+    core.updateCaretPosition();
+};
+
 export {
     cleanHTML,
     debounce,
@@ -3398,4 +3980,6 @@ export {
     navigateToHeading,
     updateOutlineItems,
     highlightActiveOutline,
+    findAndReplace,
+    handleBackspaceInList,
 }