leksy-editor 2.6.0 → 3.0.0

package/utilities.js

@@ -1,4359 +0,0 @@
-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 { v4 as uuidv4 } from 'uuid';
-import { findTab } from "./tab";
-import { applyOrderList, applyUnorderedList } from "./plugin";
-
-const dd = new DiffDOM();
-
-const removeBlockedStyles = (node) => {
-    if (!node?.style) return;
-    const styleProperties = Array.from(node.style);
-
-    styleProperties.forEach((propertyName) => {
-        if (REGEX.BLOCKED_STYLES.test(propertyName)) {
-            node.style.removeProperty(propertyName);
-        }
-    });
-
-    if (!node.getAttribute('style')?.trim()) {
-        node.removeAttribute('style');
-    }
-}
-
-const traverseAndClean = (element, options, core) => {
-    if (!element?.childNodes) return;
-
-    // Iterate through child nodes
-    const childNodes = element.childNodes;
-    for (let i = childNodes.length - 1; i >= 0; i--) {
-        const node = childNodes[i];
-
-        // Recursively process child elements
-        if (node.nodeType === Node.ELEMENT_NODE) {
-            // Check if element tag is allowed
-            if (!REGEX.WHILE_LISTED_TAG.test(node.tagName)) {
-                // Remove the element if not allowed
-                node.parentNode.removeChild(node);
-            } else {
-                // Remove attributes not in the whitelist
-                const attributesToRemove = [];
-                for (const attr of node.attributes) {
-                    if (!REGEX.WHILE_LISTED_ATTRIBUTES.test(attr.name) || attr.value.includes('var(')) {
-                        attributesToRemove.push(attr.name);
-                    }
-                }
-                if (options?.disablePastedColorStyles) {
-                    const nodeStyles = node.style
-                    let bgColor = nodeStyles.backgroundColor;
-                    let textColor = nodeStyles.color;
-                    let currentNode = core?.state?.range?.startContainer;
-                    let bodyBg = getEffectiveBackgroundColor(currentNode);
-                    if (bodyBg && bodyBg?.startsWith('rgb')) {
-                        bodyBg = rgbToHex(bodyBg)
-                    }
-                    if (bgColor && bgColor?.startsWith('rgb')) {
-                        bgColor = rgbToHex(bgColor)
-                    }
-                    if (textColor && textColor?.startsWith('rgb')) {
-                        textColor = rgbToHex(textColor)
-                    }
-
-                    if (bodyBg === bgColor) node.style.removeProperty('background-color');
-                    if (bodyBg === textColor) node.style.removeProperty('color');
-                }
-                if (options?.removeColorsWhilePasting) {
-                    node.style.removeProperty('background-color');
-                    node.style.removeProperty('color');
-                }
-                removeBlockedStyles(node);
-                attributesToRemove.forEach(attr => node.removeAttribute(attr));
-
-                // Process child nodes
-                traverseAndClean(node, options, core);
-            }
-        }
-    }
-}
-
-const getEffectiveBackgroundColor = (element) => {
-    if (!(element instanceof Element)) return null;
-    let el = element;
-    while (el) {
-        const bgColor = window?.getComputedStyle(el)?.backgroundColor;
-
-        if (bgColor !== 'rgba(0, 0, 0, 0)' &&
-            bgColor !== 'transparent' &&
-            bgColor !== '') {
-            return bgColor;
-        }
-
-        el = el !== document.body ? el.parentElement : null;
-    }
-    const bodyBg = window?.getComputedStyle(document.body)?.backgroundColor;
-    return bodyBg
-}
-
-const cleanHTML = (html, options, core) => {
-    // Create a temporary div to manipulate the HTML
-    const tempDiv = document.createElement('div');
-    tempDiv.innerHTML = html;
-
-    // Traverse through all elements and clean attributes
-    traverseAndClean(tempDiv, options, core);
-
-    // Return manipulated HTML
-    return tempDiv.innerHTML;
-}
-
-const debounce = (fn, delay) => {
-    let timeout = null;
-
-    return (...args) => {
-        if (timeout) {
-            clearTimeout(timeout);
-        }
-
-        timeout = setTimeout(async () => {
-            fn(...args);
-            timeout = null; // Clear the timeout reference after execution
-        }, delay);
-    }
-}
-
-function asyncDebounce(fn, delay) {
-    let timeout = null;
-    let isRunning = false;
-    let callNextFn = false;
-    let newArgs = [];
-
-    function call(...args) {
-        if (isRunning) {
-            newArgs = args;
-            callNextFn = true;
-            return;
-        } else {
-            clearTimeout(timeout);
-            newArgs = [];
-            callNextFn = false;
-        }
-
-        return new Promise((resolve) => {
-            timeout = setTimeout(async () => {
-                isRunning = true;
-                await fn(...args);
-                resolve();
-                isRunning = false;
-                if (callNextFn) call(...newArgs);
-            }, delay);
-        });
-    }
-
-    return call;
-}
-
-function getDeviceName() {
-    const userAgent = navigator.userAgent;
-
-    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
-        return "IOS";
-    } else if (/Android/.test(userAgent)) {
-        return "ANDROID";
-    } else if (/Macintosh/.test(userAgent)) {
-        return "MAC";
-    } else if (/Windows/.test(userAgent)) {
-        return "WINDOWS";
-    } else if (/Linux/.test(userAgent)) {
-        return "LINUX";
-    } else {
-        return "Unknown";
-    }
-}
-
-function getScrollParent(element) {
-    let parent = element.parentElement;
-    while (parent && parent !== document.body) {
-        const style = getComputedStyle(parent);
-        const overflowX = style.overflowX;
-        if (overflowX === 'auto' || overflowX === 'scroll' || overflowX === 'hidden') {
-            return parent;
-        }
-        parent = parent.parentElement;
-    }
-    return document.body;
-}
-
-const showTooltip = (options) => {
-    document.addEventListener('mouseover', (e) => {
-        const el = e.target.closest(`.${options.classPrefix}${CLASSES.TOOLBAR_ITEM}`);
-        if (!el) return;
-
-        const rect = el.getBoundingClientRect();
-
-        let top = rect.bottom + 2;
-        let left = rect.left + rect.width / 2;
-
-        left = Math.max(68, Math.min(left, window.innerWidth - 68));
-
-        el.style.setProperty('--leksy-editor-top', `${top}px`);
-        el.style.setProperty('--leksy-editor-left', `${left}px`);
-    });
-};
-
-const getTooltip = (plugin, options) => {
-    return options?.customTooltip?.[plugin.pluginId] ?? plugin.title
-}
-
-const getToolbarIcon = (plugin, options) => {
-    return options?.customIcon?.[plugin.pluginId] ?? plugin.icon
-}
-
-const makeToolbarButton = (_plugin, options, core) => {
-    const pluginButton = document.createElement('button');
-    pluginButton.type = "button"
-    pluginButton.className = `${options.classPrefix}${CLASSES.TOOLBAR_ITEM} ${_plugin.type === 'reset-color' ? 'reset-color' : ''}`
-
-    pluginButton.dataset.title = getTooltip(_plugin, options)
-    pluginButton.dataset.type = 'button'
-    pluginButton.onclick = (e) => {
-        e.preventDefault();
-        _plugin.click(e, core, options);
-    };
-
-    const pluginIcon = document.createElement('div');
-    pluginIcon.innerHTML = getToolbarIcon(_plugin, options);
-    pluginButton.appendChild(pluginIcon)
-    return pluginButton
-}
-
-
-const makeToolbarButtonSelect = (_plugin, options, core) => {
-    const pluginButton = document.createElement('button');
-    pluginButton.type = "button"
-    pluginButton.className = `${options.classPrefix}${CLASSES.TOOLBAR_ITEM} ${_plugin.type === 'button-select' ? CLASSES.TOOLBAR_ITEM_BUTTON_SELECT : ''}`
-
-    pluginButton.dataset.title = getTooltip(_plugin, options)
-    pluginButton.dataset.type = 'button'
-    pluginButton.onclick = (e) => {
-        e.preventDefault();
-        _plugin.mainClick(e, core, options);
-    };
-
-    const pluginIcon = document.createElement('div');
-    pluginIcon.innerHTML = getToolbarIcon(_plugin, options);
-    pluginButton.appendChild(pluginIcon)
-    const pluginSelect = makeToolbarSelect({ ..._plugin, icon: '' }, options, core);
-
-    const pluginButtonSelect = document.createElement('div');
-    pluginButtonSelect.dataset.type = 'button-select'
-    pluginButtonSelect.style.display = 'flex'
-    pluginButtonSelect.appendChild(pluginButton);
-    pluginButtonSelect.appendChild(pluginSelect);
-    return pluginButtonSelect
-}
-
-
-const makeToolbarColor = (_plugin, options, core) => {
-    const pluginContainer = document.createElement('div');
-    pluginContainer.className = `${options.classPrefix}${CLASSES.TOOLBAR_ITEM} ${CLASSES.TOOLBAR_ITEM_COLOR}`
-    pluginContainer.dataset.title = getTooltip(_plugin, options)
-    pluginContainer.dataset.type = 'color'
-
-    const pluginButton = document.createElement('input');
-    pluginButton.type = "color"
-    pluginButton.onclick = () => { if (getDeviceName() !== 'IOS') core.elements.editor.focus() }
-
-    pluginButton.onchange = (e) => {
-        e.preventDefault();
-        _plugin.change(e, core, options);
-    };
-
-    const pluginIcon = document.createElement('div');
-    pluginIcon.innerHTML = getToolbarIcon(_plugin, options);
-    pluginIcon.onclick = () => pluginButton.click()
-    pluginContainer.append(pluginButton, pluginIcon)
-    return pluginContainer
-}
-
-const makeToolbarDropdown = (_plugin, options, core) => {
-    const handleOutsideClick = (e, forceFully) => {
-        if (!forceFully && (e.target.getAttribute('data-toolbar-option') || dropdownPlugin.contains(e.target))) return
-        dropdownContent.style.display = 'none'
-        document.removeEventListener('mousedown', handleOutsideClick, false);
-        core.elements.editor.removeEventListener('click', handleOutsideClick, false);
-    }
-    const renderGalary = (images) => {
-        if ((core.state.page == 1 && !core.state.next) || (!core.state.page && !core.state.next)) container.innerHTML = ''
-        images.forEach(image => {
-            const imageElement = document.createElement('img');
-            imageElement.src = image.src;
-            imageElement.style.width = '120px';
-            imageElement.style.height = '120px';
-            imageElement.style.cursor = 'pointer';
-            imageElement.style.margin = '2px';
-            imageElement.onclick = (e) => {
-                const img = document.createElement('img');
-                img.src = image.src
-                if (image?.url) { // for video
-                    const linkNode = document.createElement('a');
-                    linkNode.href = image.url;
-                    linkNode.target = '_blank';
-                    linkNode.appendChild(img);
-                    core.insertNode(linkNode);
-                } else {
-                    core.insertNode(img);
-                }
-                core.updateCaretPosition()
-                core.elements.editor.focus()
-                options.closePluginOnClick && handleOutsideClick(e, true)
-            };
-            container.appendChild(imageElement);
-        })
-    }
-    const renderMentions = (value) => {
-        container.innerHTML = ''
-        const labels = JSON.parse(JSON.stringify(options.labels))
-            .map(label => {
-                label.fields = label.fields.filter(field => field.name.toLowerCase().includes(value.toLowerCase()))
-                return label
-            })
-            .filter(label => label.fields.length)
-        labels.forEach(category => {
-            const categoryElement = document.createElement('div')
-            categoryElement.textContent = category.name
-            container.append(categoryElement)
-            category.fields.forEach(field => {
-                const labelElement = document.createElement('button')
-                labelElement.type = "button"
-                labelElement.textContent = field.name
-                labelElement.onclick = (e) => {
-                    core.elements.editor.focus();
-                    const span = document.createElement('span');
-                    span.spellcheck = false
-                    span.contentEditable = false
-                    span.innerText = field.name
-                    span.setAttribute('data-id', field.value);
-
-                    core.insertNode(span)
-                    core.updateCaretPosition()
-                    options.closePluginOnClick && handleOutsideClick(e, true)
-                }
-                container.append(labelElement)
-            })
-        })
-    }
-
-    const dropdownPlugin = document.createElement('div');
-    dropdownPlugin.setAttribute('data-type', 'dropdown')
-
-    const dropdownButton = document.createElement('button');
-    dropdownButton.type = "button"
-    dropdownButton.className = `${options.classPrefix}${CLASSES.TOOLBAR_ITEM}`
-    dropdownButton.setAttribute('data-title', getTooltip(_plugin, options))
-
-    const pluginIcon = document.createElement('div');
-    pluginIcon.innerHTML = getToolbarIcon(_plugin, options);
-    dropdownButton.appendChild(pluginIcon)
-
-    const dropdownContent = document.createElement('div');
-    dropdownContent.className = `${options.classPrefix}${CLASSES.DROPDOWN_CONTENT} ${_plugin.type}`
-
-    const container = document.createElement('div');
-
-    if (_plugin.type === 'dropdown') {
-        _plugin.options.forEach(option => {
-            const optionDiv = document.createElement('button');
-            optionDiv.type = "button"
-            optionDiv.textContent = option.label;
-            optionDiv.setAttribute('data-value', option.value);  // Set custom attribute for value
-            optionDiv.setAttribute('data-toolbar-option', true);  // Set custom attribute for value
-
-            // Event listener to handle selection
-            optionDiv.addEventListener('click', function (e) {
-                dropdownContent.style.display = 'none';
-                _plugin.click(e, core, options)
-            });
-
-            // Append option to the dropdown content div
-            dropdownContent.appendChild(optionDiv);
-        });
-    } else if (_plugin.type === 'gallery') {
-        const search = document.createElement('input');
-        search.placeholder = 'Search...'
-        const fetchAndRenderImages = async (searchQuery = '', page) => {
-            let res;
-            if (searchQuery) {
-                res = await _plugin.search(options, searchQuery, page);
-            } else {
-                res = await _plugin.suggestions(options, page);
-            }
-            if (res.totalPages) core.state.totalPages = res.totalPages; // Update total pages if available
-            if (res.next) core.state.next = res.next; // Update next page if available
-            renderGalary(res.images); // Pass search query and append flag
-        };
-
-        const debounce = asyncDebounce(async (value) => {
-            core.state.page = 1; // Reset page on new search
-            core.state.next = "";
-            core.state.currentSearch = value; // Store the search term
-            if (_plugin.title == "Tenor") {
-                await fetchAndRenderImages(value, "");
-            } else {
-                await fetchAndRenderImages(value, 1);
-            }
-        }, 300);
-
-        search.oninput = (e) => debounce(e.target.value)
-
-        dropdownContent.addEventListener("scroll", async () => {
-            if (core.state.isFetching) return; // Prevent multiple calls while fetching
-
-            if (dropdownContent.scrollTop + dropdownContent.clientHeight >= dropdownContent.scrollHeight - 10) {
-                if (core.state.next) {
-                    core.state.isFetching = true; // Set fetching state
-                    await fetchAndRenderImages(core.state.currentSearch, core.state.next); // Fetch new images
-                    core.state.isFetching = false; // Reset fetching state
-                }
-                if (core.state.totalPages && core.state.page < core.state.totalPages) {
-                    core.state.isFetching = true; // Set fetching state
-                    core.state.page += 1; // Increment page
-                    await fetchAndRenderImages(core.state.currentSearch, core.state.page); // Fetch new images
-                    core.state.isFetching = false; // Reset fetching state
-                }
-            }
-        });
-        const footer = document.createElement('div');
-        footer.className = 'footer';
-        if (_plugin.title === "GIPHY") {
-            const img = document.createElement('img');
-
-            img.src = `data:image/png;base64,${GIPHY_POWERED_IMAGE}`;
-            img.alt = "Powered By GIPHY";
-            footer.append(img)
-        } else {
-            footer.innerHTML = `<span>Powered By ${_plugin.title}</span>`;
-        }
-        footer.style.position = 'sticky';
-        footer.style.bottom = '0';
-        footer.style.width = '100%';
-        footer.style.background = '#f1f1f1';
-        footer.style.textAlign = 'center';
-        footer.style.height = '44px';
-        footer.style.display = 'flex';
-        footer.style.alignItems = 'center';
-        footer.style.justifyContent = 'center';
-        footer.style.overflow = 'hidden';
-
-        dropdownContent.append(search, container, footer)
-    } else if (_plugin.type === 'category') {
-        _plugin.categories.forEach(category => {
-            const categoryElement = document.createElement('div')
-            categoryElement.textContent = category.label
-            dropdownContent.append(categoryElement)
-            category.icons.forEach(emoji => {
-                const emojiElement = document.createElement('span')
-                emojiElement.textContent = emoji
-                emojiElement.onclick = (e) => {
-                    core.elements.editor.focus();
-                    core.elements.iframeWindow.execCommand('insertText', false, emoji)
-                    options.closePluginOnClick && handleOutsideClick(e, true)
-                }
-                dropdownContent.append(emojiElement)
-            })
-        })
-    } else if (_plugin.type === 'mention') {
-        const search = document.createElement('input');
-        search.placeholder = 'Search...'
-        search.oninput = (e) => renderMentions(e.target.value)
-        dropdownContent.append(search, container)
-        renderMentions('')
-    } else if (_plugin.type === 'table') {
-        const totalRows = 10;
-        const totalCols = 10;
-
-        // Create wrapper for table and checkbox
-        const wrapper = document.createElement('div');
-        wrapper.className = 'toolbar-table-wrapper'
-
-        // Create header checkbox
-        const headerOption = document.createElement('label');
-        headerOption.style.display = 'block';
-        headerOption.style.marginBottom = '8px';
-
-        const checkbox = document.createElement('input');
-        checkbox.type = 'checkbox';
-        checkbox.checked = true; // Default to include header
-        checkbox.style.marginRight = '6px';
-
-        headerOption.appendChild(checkbox);
-        headerOption.appendChild(document.createTextNode('Include header row'));
-
-        wrapper.appendChild(headerOption);
-
-        const table = document.createElement('div');
-        table.className = `${options.classPrefix}${CLASSES.TOOLBAR_TABLE}`
-
-        // Create table selector grid
-        for (let i = 0; i < totalRows; i++) {
-            for (let j = 0; j < totalCols; j++) {
-
-                const cell = document.createElement('div');
-                cell.className = 'cell'
-
-                cell.setAttribute('data-row', i);
-                cell.setAttribute('data-col', j);
-                if (j === 0) {
-                    cell.setAttribute('tabIndex', '0');
-                }
-
-                cell.addEventListener('mouseover', () => {
-                    const cells = table.querySelectorAll('.cell');
-                    cells.forEach((cell) => {
-                        const cellRow = parseInt(cell.getAttribute('data-row'));
-                        const cellCol = parseInt(cell.getAttribute('data-col'));
-
-                        if (cellRow <= i && cellCol <= j) {
-                            cell.classList.add('selected');
-                        } else {
-                            cell.classList.remove('selected');
-                        }
-                    });
-                });
-                cell.addEventListener('click', () => {
-                    _plugin.create(core, options, { rows: i, cols: j, header: checkbox.checked })
-                    dropdownContent.style.display = 'none'
-                });
-
-                table.appendChild(cell);
-            }
-        }
-        wrapper.appendChild(table);
-        dropdownContent.appendChild(wrapper);
-    }
-
-    let isSuggestionLoaded = false;
-    dropdownButton.onclick = () => {
-        if (dropdownContent.style.display === 'block') {
-            dropdownContent.style.display = 'none'
-            document.removeEventListener('mousedown', handleOutsideClick, false);
-            core.elements.editor.removeEventListener('click', handleOutsideClick, false);
-            return
-        }
-        dropdownContent.style.display = 'block'
-        const container = getScrollParent(dropdownContent);
-        const containerRect = container.getBoundingClientRect();
-        const popoverRect = dropdownContent.getBoundingClientRect();
-
-        const overflowRight = popoverRect.right > containerRect.right;
-        const overflowLeft = popoverRect.left < containerRect.left;
-
-        if (overflowRight) {
-            dropdownContent.style.right = '10px';
-        } else if (overflowLeft) {
-            dropdownContent.style.left = '10px';
-        }
-
-        if (!isSuggestionLoaded && _plugin.type === 'gallery') {
-            _plugin.suggestions(options)
-                .then(res => {
-                    isSuggestionLoaded = true
-                    if (res.totalPages) {
-                        core.state.totalPages = res.totalPages;
-                        core.state.next = ""
-                    } // Update total pages if available
-                    if (res.next) {
-                        core.state.next = res.next;
-                        core.state.totalPages = null
-                    } // Update next page if available
-                    renderGalary(res.images)
-                })
-        }
-
-        document.addEventListener('mousedown', handleOutsideClick);
-        core.elements.editor.addEventListener('click', handleOutsideClick);
-    }
-
-    dropdownPlugin.appendChild(dropdownButton)
-    dropdownPlugin.appendChild(dropdownContent)
-    return dropdownPlugin
-}
-
-const makeToolbarSelect = (_plugin, options, core) => {
-    const handleOutsideClick = (e) => {
-        if (e.target.getAttribute('data-toolbar-option') || selectPlugin.contains(e.target)) return
-        dropdownContent.style.display = 'none'
-        document.removeEventListener('mousedown', handleOutsideClick, false);
-        core.elements.editor.removeEventListener('click', handleOutsideClick, false);
-    }
-
-    const selectPlugin = document.createElement('div');
-    selectPlugin.dataset.type = 'select'
-
-    const dropdownButton = document.createElement('button');
-    dropdownButton.type = "button"
-    dropdownButton.className = `${options.classPrefix}${CLASSES.TOOLBAR_ITEM} ${CLASSES.TOOLBAR_ITEM_SELECT} ${_plugin.type === 'button-select' ? CLASSES.TOOLBAR_ITEM_BUTTON_SELECT : ''}`
-    dropdownButton.dataset.title = _plugin.type == 'button-select' ? `Options` : getTooltip(_plugin, options)
-
-    const pluginIcon = document.createElement('div');
-    pluginIcon.style.width = _plugin.width
-    pluginIcon.style.textAlign = 'left'
-    pluginIcon.style.display = 'flex'
-    pluginIcon.style.justifyContent = 'space-between'
-
-    const iconName = document.createElement('span');
-    iconName.innerHTML = getToolbarIcon(_plugin, options);
-
-    const arrow = document.createElement('span');
-    if (_plugin.type == 'button-select') {
-        arrow.innerHTML = SVG.ARROW_DROP_DOWN_FILL;
-    } else {
-        arrow.innerHTML = SVG.ARROW_DOWN;
-        arrow.style.paddingLeft = '8px';
-    }
-    pluginIcon.append(iconName, arrow)
-
-    dropdownButton.append(pluginIcon)
-
-    const dropdownContent = document.createElement('div');
-    dropdownContent.className = `${options.classPrefix}${CLASSES.DROPDOWN_CONTENT}`
-    _plugin.options.forEach(option => {
-        const optionDiv = document.createElement('button');
-        optionDiv.type = "button"
-        optionDiv.innerHTML = option.label;
-        optionDiv.setAttribute('data-value', option.value);  // Set custom attribute for value
-        optionDiv.setAttribute('data-toolbar-option', true);  // Set custom attribute for value
-
-        // Event listener to handle selection
-        optionDiv.addEventListener('click', function (e) {
-            dropdownContent.style.display = 'none';
-            _plugin.click(option.value, core, options)
-        });
-
-        // Append option to the dropdown content div
-        dropdownContent.appendChild(optionDiv);
-    });
-
-    dropdownButton.onclick = () => {
-        if (dropdownContent.style.display === 'block') {
-            dropdownContent.style.display = 'none'
-            document.removeEventListener('mousedown', handleOutsideClick, false);
-            core.elements.editor.removeEventListener('click', handleOutsideClick, false);
-            return
-        }
-        dropdownContent.style.display = 'block'
-        const container = getScrollParent(dropdownContent);
-        const containerRect = container.getBoundingClientRect();
-        const popoverRect = dropdownContent.getBoundingClientRect();
-
-        const overflowRight = popoverRect.right > containerRect.right;
-        const overflowLeft = popoverRect.left < containerRect.left;
-
-        if (overflowRight) {
-            dropdownContent.style.right = '10px';
-        } else if (overflowLeft) {
-            dropdownContent.style.left = '10px';
-        }
-        document.addEventListener('mousedown', handleOutsideClick);
-        core.elements.editor.addEventListener('click', handleOutsideClick);
-    }
-
-    selectPlugin.appendChild(dropdownButton)
-    selectPlugin.appendChild(dropdownContent)
-    return selectPlugin
-}
-
-const makeEditToolbar = (options, core, { type, td, image, updateImage, updateTable }) => {
-    const handleOutsideClick = (e) => {
-        if (popoverPlugin.contains(e.target)) return
-        popoverContent.style.display = 'none'
-        document.removeEventListener('mousedown', handleOutsideClick, false);
-        core.elements.editor.removeEventListener('click', handleOutsideClick, false);
-    }
-
-    const popoverPlugin = document.createElement('div');
-    popoverPlugin.setAttribute('data-type', 'popover')
-
-    const popoverButton = document.createElement('button');
-    popoverButton.type = "button"
-    popoverButton.className = `${options.classPrefix}${CLASSES.TOOLBAR_ITEM}`
-    popoverButton.setAttribute('data-title', `Edit ${type === 'td' ? 'Cell' : type === 'image' ? 'Image' : "Embed"}`)
-
-    const pluginIcon = document.createElement('div');
-    pluginIcon.innerHTML = SVG.EDIT;
-    popoverButton.appendChild(pluginIcon)
-
-    const popoverContent = document.createElement('div');
-    popoverContent.className = `${options.classPrefix}${CLASSES.POPOVER_CONTENT}`
-
-    if (type === 'image' || type === 'figure') {
-        const resizeByIds = {
-            byPercentage: Math.random(),
-            byPixels: Math.random(),
-            percentageWidth: Math.random(),
-            percentageHeight: Math.random(),
-            pixelsWidth: Math.random(),
-            pixelsHeight: Math.random(),
-            percentage: Math.random(),
-            pixels: Math.random(),
-            aspectRatio: Math.random(),
-            altText: Math.random(),
-            submit: Math.random(),
-        }
-
-        popoverContent.innerHTML = (`
-            <div style="border-bottom: 1px solid gray; padding-bottom: 4px;">
-                <div>
-                    By:
-                    <input type="radio" value="percentage" id="${resizeByIds.byPercentage}" checked/>
-                    <label for="${resizeByIds.byPercentage}">Percentage</label>
-                    <input type="radio" value="pixels" id="${resizeByIds.byPixels}" />
-                    <label for="${resizeByIds.byPixels}">Pixels</label>
-                </div>
-                <div id="${resizeByIds.percentage}">
-                    <div style="display: flex; justify-content: space-between; margin-top: 4px">
-                        <label for="${resizeByIds.percentageWidth}">Width (%)</label>
-                        <input style="width: 100px" type="number" name='width' placeholder="Width" id="${resizeByIds.percentageWidth}" />
-                    </div>
-                    <div style="display: flex; justify-content: space-between; margin-top: 4px">
-                        <label for="${resizeByIds.percentageHeight}">Height (%)</label>
-                        <input style="width: 100px" type="number" name='height' placeholder="Height" id="${resizeByIds.percentageHeight}" />
-                    </div>
-                </div>
-                <div id="${resizeByIds.pixels}" style="display: none">
-                    <div style="display: flex; justify-content: space-between; margin-top: 4px">
-                        <label for="${resizeByIds.pixelsWidth}">Width (px)</label>
-                        <input style="width: 100px" type="number" name='width' placeholder="Width" id="${resizeByIds.pixelsWidth}" />
-                    </div>
-                    <div style="display: flex; justify-content: space-between; margin-top: 4px">
-                        <label for="${resizeByIds.pixelsHeight}">Height (px)</label>
-                        <input style="width: 100px" type="number" name='height' placeholder="Height" id="${resizeByIds.pixelsHeight}" />
-                    </div>
-                </div>
-                <div style="margin-top: 4px;">
-                    <input type="checkbox" id="${resizeByIds.aspectRatio}" checked/>
-                    <label for="${resizeByIds.aspectRatio}">Maintain Aspect Ratio</label>
-                </div>
-                ${type === "image" ? `
-                    <div style="display: flex; justify-content: space-between; margin-top: 4px">
-                        <label for="${resizeByIds.altText}">Alt Text</label>
-                        <input style="width: 100px" type="text" id="${resizeByIds.altText}" placeholder="Enter alt text" style="width: 100%;" />
-                    </div>` : ""}
-                <div style="display: flex; justify-content: end; margin-top: 4px;">
-                    <button style="border: 1px solid gray; padding: 2px 4px; border-radius: 4px; color: white; background-color: hsl(160, 100%, 40%);" type="button" id="${resizeByIds.submit}">Update</button>
-                </div>
-            </div >
-        `)
-
-        const pluginSet = document.createElement('div')
-        pluginSet.className = `${options.classPrefix}${CLASSES.RESIZE_ITEMS} `
-        RESIZER_PLUGINS.forEach(plugin => {
-            const pluginButton = document.createElement('button');
-            pluginButton.type = "button"
-            pluginButton.className = `${options.classPrefix}${CLASSES.RESIZE_ITEM} `
-
-            pluginButton.setAttribute('data-title', plugin.title)
-            pluginButton.setAttribute('data-type', 'button')
-            pluginButton.onclick = (e) => {
-                e.preventDefault();
-                updateImage(plugin.event);
-            };
-
-            const pluginIcon = document.createElement('div');
-            pluginIcon.innerHTML = plugin.icon;
-            pluginButton.appendChild(pluginIcon)
-            pluginSet.appendChild(pluginButton)
-        })
-        popoverContent.appendChild(pluginSet)
-        popoverButton.onclick = () => {
-            const onInputKeydown = (event) => {
-                if (event.key === 'Enter') {
-                    event.preventDefault()
-                    resizeBy.submit.click();
-                }
-            }
-
-            if (popoverContent.style.display === 'block') {
-                popoverContent.style.display = 'none'
-                document.removeEventListener('mousedown', handleOutsideClick, false);
-                core.elements.editor.removeEventListener('click', handleOutsideClick, false);
-                return
-            }
-            popoverContent.style.display = 'block'
-            const container = getScrollParent(popoverContent);
-            const containerRect = container.getBoundingClientRect();
-            const popoverRect = popoverContent.getBoundingClientRect();
-
-            const overflowRight = popoverRect.right > containerRect.right;
-            const overflowLeft = popoverRect.left < containerRect.left;
-
-            if (overflowRight) {
-                popoverContent.style.right = '10px';
-            } else if (overflowLeft) {
-                popoverContent.style.left = '10px';
-            }
-            const resizeBy = {
-                byPercentage: document.getElementById(resizeByIds.byPercentage),
-                byPixels: document.getElementById(resizeByIds.byPixels),
-                percentageWidth: document.getElementById(resizeByIds.percentageWidth),
-                percentageHeight: document.getElementById(resizeByIds.percentageHeight),
-                pixelsWidth: document.getElementById(resizeByIds.pixelsWidth),
-                pixelsHeight: document.getElementById(resizeByIds.pixelsHeight),
-                percentage: document.getElementById(resizeByIds.percentage),
-                pixels: document.getElementById(resizeByIds.pixels),
-                aspectRatio: document.getElementById(resizeByIds.aspectRatio),
-                submit: document.getElementById(resizeByIds.submit),
-            }
-            if (type == "image") resizeBy.altText = document.getElementById(resizeByIds.altText)
-
-            const imageClientRect = image.getBoundingClientRect()
-            resizeBy.percentageWidth.value = (imageClientRect.width / image.naturalWidth) * 100
-            resizeBy.percentageHeight.value = (imageClientRect.height / image.naturalHeight) * 100
-            resizeBy.pixelsWidth.value = imageClientRect.width
-            resizeBy.pixelsHeight.value = imageClientRect.height
-            if (type == "image") resizeBy.altText.value = image.alt || "";
-
-            resizeBy.byPercentage.onchange = (e) => {
-                if (e.target.checked) {
-                    resizeBy.pixels.style.display = 'none'
-                    resizeBy.percentage.style.display = 'block'
-                    resizeBy.byPixels.checked = false
-                }
-            }
-            resizeBy.byPixels.onchange = (e) => {
-                if (e.target.checked) {
-                    resizeBy.percentage.style.display = 'none'
-                    resizeBy.pixels.style.display = 'block'
-                    resizeBy.byPercentage.checked = false
-                }
-            }
-
-            const handlePercentage = (e) => {
-                let value = parseInt(e.target.value)
-                if (value) {
-                    if (value > 100) value = 100;
-                    if (resizeBy.aspectRatio.checked) {
-                        resizeBy.percentageWidth.value = value
-                        resizeBy.percentageHeight.value = value
-                    } else {
-                        e.target.value = value
-                    }
-                }
-            }
-            resizeBy.percentageWidth.oninput = handlePercentage
-            resizeBy.percentageHeight.oninput = handlePercentage
-
-            const handlePixel = (e) => {
-                let value = parseInt(e.target.value)
-                if (value) {
-                    if (resizeBy.aspectRatio.checked) {
-                        let width, height;
-                        if (e.target.name === 'width') {
-                            width = value
-                            const delta = image.naturalWidth / value
-                            height = image.naturalHeight / delta
-                        } else {
-                            height = value
-                            const delta = image.naturalHeight / value
-                            width = image.naturalWidth / delta
-                        }
-
-                        resizeBy.pixelsWidth.value = width
-                        resizeBy.pixelsHeight.value = height
-                    } else {
-                        e.target.value = value
-                    }
-                }
-            }
-            resizeBy.pixelsWidth.oninput = handlePixel
-            resizeBy.pixelsHeight.oninput = handlePixel
-
-            resizeBy.percentageWidth.onkeydown = onInputKeydown
-            resizeBy.percentageHeight.onkeydown = onInputKeydown
-            resizeBy.pixelsWidth.onkeydown = onInputKeydown
-            resizeBy.pixelsHeight.onkeydown = onInputKeydown
-
-            resizeBy.aspectRatio.onchange = (e) => {
-                if (e.target.checked) {
-                    if (resizeBy.byPixels.checked) {
-                        const delta = image.naturalWidth / parseInt(resizeBy.pixelsWidth.value)
-                        const height = image.naturalHeight / delta
-                        resizeBy.pixelsHeight.value = height
-                    } else {
-                        resizeBy.percentageHeight.value = resizeBy.percentageWidth.value
-                    }
-                }
-            }
-
-            resizeBy.submit.onclick = (e) => {
-                if (resizeBy.byPixels.checked) {
-                    if (parseInt(resizeBy.pixelsWidth.value) && parseInt(resizeBy.pixelsHeight.value))
-                        updateImage('update', { width: resizeBy.pixelsWidth.value + 'px', height: resizeBy.pixelsHeight.value + 'px', })
-                } else if (resizeBy.byPercentage.checked) {
-                    if (parseInt(resizeBy.percentageWidth.value) && parseInt(resizeBy.percentageHeight.value))
-                        updateImage('update', { width: resizeBy.percentageWidth.value + '%', height: resizeBy.percentageHeight.value + '%', })
-                }
-                if (type == "image") image.alt = resizeBy.altText.value;
-            }
-
-            document.addEventListener('mousedown', handleOutsideClick);
-            core.elements.editor.addEventListener('click', handleOutsideClick);
-        }
-    } else if (type === 'td') {
-        popoverContent.style.padding = '0';
-
-        const tabsContainer = document.createElement('div');
-        tabsContainer.className = `${options.classPrefix}${CLASSES.POPOVER_TABS}`
-
-        const tabContentContainer = document.createElement('div');
-        tabContentContainer.style.padding = '0px 2px';
-
-        popoverContent.innerHTML = ''; // Clear existing content
-        popoverContent.append(tabsContainer, tabContentContainer);
-
-        const createPluginItem = (plugin) => {
-            const isColorInput =
-                plugin.event === 'border-color' ||
-                plugin.event === 'background-color' ||
-                plugin.event === 'row-background-color' ||
-                plugin.event === 'column-background-color';
-            const isDimensionInput = ['cell-width', 'cell-height', 'cell-padding'].includes(plugin.event);
-
-            let pluginElement;
-
-            if (isColorInput) {
-                pluginElement = document.createElement('label');
-                pluginElement.className = `${options.classPrefix}${CLASSES.RESIZE_ITEM}`;
-                pluginElement.style.display = 'flex';
-                pluginElement.style.gap = '6px';
-                pluginElement.style.alignItems = 'center';
-                pluginElement.style.width = '100%';
-                pluginElement.style.cursor = 'pointer';
-                pluginElement.style.padding = '4px 8px';
-                pluginElement.onmouseenter = () => { pluginElement.style.backgroundColor = '#ddd'; };
-                pluginElement.onmouseleave = () => { pluginElement.style.backgroundColor = 'transparent'; };
-
-                const icon = document.createElement('span');
-                icon.innerHTML = plugin.icon;
-
-                const title = document.createElement('span');
-                title.textContent = plugin.title;
-
-                const colorInput = document.createElement('input');
-                colorInput.type = "color";
-                colorInput.style.width = '24px';
-                colorInput.style.height = '24px';
-                colorInput.style.padding = '0px';
-                colorInput.style.border = 'none';
-                colorInput.style.background = 'transparent';
-                colorInput.style.cursor = 'pointer';
-                colorInput.oninput = (e) => {
-                    updateTable(plugin.event, e.target.value);
-                };
-
-                pluginElement.append(icon, title, colorInput);
-            } else if (isDimensionInput) {
-                pluginElement = document.createElement('label');
-                pluginElement.className = `${options.classPrefix}${CLASSES.RESIZE_ITEM}`;
-                pluginElement.style.display = 'flex';
-                pluginElement.style.gap = '8px';
-                pluginElement.style.alignItems = 'center';
-                pluginElement.style.width = '100%';
-                pluginElement.style.cursor = 'pointer';
-                pluginElement.style.padding = '4px 8px';
-                pluginElement.onmouseenter = () => { pluginElement.style.backgroundColor = '#ddd'; };
-                pluginElement.onmouseleave = () => { pluginElement.style.backgroundColor = 'transparent'; };
-
-                const icon = document.createElement('span');
-                icon.innerHTML = plugin.icon;
-
-                const title = document.createElement('span');
-                title.textContent = plugin.title;
-
-                const input = document.createElement('input');
-                input.type = "number";
-                input.placeholder = "auto";
-                input.style.width = '60px';
-                input.style.padding = '2px';
-                input.style.border = '1px solid #ccc';
-                input.style.borderRadius = '4px';
-                if (plugin.event === 'cell-width') {
-                    input.value = toPx(td.style.width) || '';
-                } else if (plugin.event === 'cell-height') {
-                    input.value = toPx(td.parentElement.style.height) || '';
-                } else if (plugin.event === 'cell-padding') {
-                    input.value = toPx(td.style.padding) || '';
-                }
-                input.onchange = (e) => updateTable(plugin.event, (Number.parseInt(e.target.value) || 0) + 'px');
-                input.onclick = (e) => e.stopPropagation();
-                pluginElement.append(icon, title, input);
-            } else {
-                pluginElement = document.createElement('button');
-                pluginElement.type = "button";
-                pluginElement.className = `${options.classPrefix}${CLASSES.RESIZE_ITEM}`;
-                pluginElement.style.display = 'flex';
-                pluginElement.style.alignItems = 'center';
-                pluginElement.style.gap = '8px';
-                pluginElement.style.width = '100%';
-                pluginElement.style.padding = '4px 8px';
-                pluginElement.style.border = 'none';
-                pluginElement.style.background = 'transparent';
-                pluginElement.style.textAlign = 'left';
-                pluginElement.onmouseenter = () => { pluginElement.style.backgroundColor = '#ddd'; };
-                pluginElement.onmouseleave = () => { pluginElement.style.backgroundColor = 'transparent'; };
-
-                pluginElement.onclick = (e) => {
-                    e.preventDefault();
-                    updateTable(plugin.event);
-                };
-
-                const icon = document.createElement('div');
-                icon.innerHTML = plugin.icon;
-
-                const title = document.createElement('span');
-                title.textContent = plugin.title;
-
-                pluginElement.append(icon, title);
-            }
-            return pluginElement;
-        };
-
-        Object.keys(TAB_CATEGORIES).forEach((categoryName, index) => {
-            const tabButton = document.createElement('button');
-            tabButton.type = 'button'
-            tabButton.textContent = categoryName;
-            tabButton.className = `${options.classPrefix}${CLASSES.POPOVER_TAB}`
-
-            const tabId = categoryName.replaceAll(' ', '-');
-            tabButton.dataset.tab = tabId;
-
-            const tabContent = document.createElement('div');
-            tabContent.id = tabId;
-            tabContent.className = `${options.classPrefix}${CLASSES.POPOVER_TAB_CONTENT}`;
-            tabContent.style.display = 'none';
-
-            if (index === 0) {
-                tabButton.classList.add('active');
-                tabContent.style.display = 'block';
-            }
-
-            const subCategories = TAB_CATEGORIES[categoryName];
-            Object.keys(subCategories).forEach(subCategoryName => {
-                if (subCategoryName) {
-                    const subHeader = document.createElement('div');
-                    subHeader.style.padding = '4px';
-                    subHeader.textContent = subCategoryName;
-                    tabContent.appendChild(subHeader);
-                }
-
-                const pluginListContainer = document.createElement('div');
-                pluginListContainer.className = `${options.classPrefix}${CLASSES.RESIZE_ITEMS}`;
-                pluginListContainer.style.width = '100%';
-
-                subCategories[subCategoryName].forEach(pluginEvent => {
-                    const plugin = TABLE_PLUGINS.find(p => p.event === pluginEvent);
-                    if (plugin) {
-                        const item = createPluginItem(plugin);
-                        pluginListContainer.appendChild(item);
-                    }
-                });
-                tabContent.appendChild(pluginListContainer);
-            });
-
-            tabsContainer.appendChild(tabButton);
-            tabContentContainer.appendChild(tabContent);
-
-            tabButton.onclick = (e) => {
-                tabsContainer.querySelectorAll(`.${options.classPrefix}${CLASSES.POPOVER_TAB}`).forEach(btn => {
-                    btn.classList.remove('active');
-                });
-                tabContentContainer.querySelectorAll(`.${options.classPrefix}${CLASSES.POPOVER_TAB_CONTENT}`).forEach(content => {
-                    content.style.display = 'none';
-                });
-                e.currentTarget.classList.add('active');
-                tabContentContainer.querySelector(`#${e.currentTarget.getAttribute('data-tab')}`).style.display = 'block';
-            };
-        });
-
-        popoverButton.onclick = () => {
-            if (popoverContent.style.display === 'block') {
-                popoverContent.style.display = 'none'
-                document.removeEventListener('mousedown', handleOutsideClick, false);
-                core.elements.editor.removeEventListener('click', handleOutsideClick, false);
-                return
-            }
-            popoverContent.style.display = 'block'
-            const container = getScrollParent(popoverContent);
-            const containerRect = container.getBoundingClientRect();
-            const popoverRect = popoverContent.getBoundingClientRect();
-
-            const overflowRight = popoverRect.right > containerRect.right;
-            const overflowLeft = popoverRect.left < containerRect.left;
-
-            if (overflowRight) {
-                popoverContent.style.right = '20px';
-            } else if (overflowLeft) {
-                popoverContent.style.left = '20px';
-            }
-            document.addEventListener('mousedown', handleOutsideClick);
-            core.elements.editor.addEventListener('click', handleOutsideClick);
-        }
-    }
-
-    popoverPlugin.appendChild(popoverButton)
-    popoverPlugin.appendChild(popoverContent)
-    core.elements.toolbarContainer.appendChild(popoverPlugin)
-    core.elements.resizerPlugin = popoverPlugin
-}
-
-const openModal = ({ title, bodyNode, footerNode }, core, options) => {
-    const modalContainer = document.createElement('div');
-    modalContainer.className = `${options.classPrefix}${CLASSES.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} `
-    const modalTitle = document.createElement('span');
-    modalTitle.innerText = title ?? ''
-    const modalCloseButton = document.createElement('button');
-    modalCloseButton.className = 'modal-close-btn';
-    modalCloseButton.innerHTML = SVG.CLOSE;
-    modalCloseButton.type = 'button'
-    modalCloseButton.onclick = () => {
-        core.elements.base.removeChild(modalContainer)
-    }
-    modalHeader.append(modalTitle, modalCloseButton)
-
-    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: () => { core.elements.base.removeChild(modalContainer) }
-    }
-}
-
-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'])
-    core.elements.editor.blur() // to remove focus from the editor
-
-    const imageClientRect = image.getBoundingClientRect();
-    const resizer = document.createElement('div');
-    resizer.className = `resizer`
-    resizer.style.width = imageClientRect.width + 'px';
-    resizer.style.height = imageClientRect.height + 'px';
-    resizer.style.top = imageClientRect.top + 'px';
-    resizer.style.left = imageClientRect.left + 'px';
-
-    // Full-screen button (only for images)
-    if (type === 'image') {
-        const fullscreenButton = document.createElement('span');
-        fullscreenButton.innerHTML = SVG.FULLSCREEN_IMAGE
-        fullscreenButton.style.position = 'absolute';
-        fullscreenButton.style.top = '5px';
-        fullscreenButton.style.right = '5px';
-        fullscreenButton.style.background = 'rgba(0, 0, 0, 0.6)';
-        fullscreenButton.style.color = 'white';
-        fullscreenButton.style.border = 'none';
-        fullscreenButton.style.cursor = 'pointer';
-        fullscreenButton.style.borderRadius = '4px';
-        fullscreenButton.style.fontSize = '14px';
-        fullscreenButton.style.transition = '0.3s ease-in-out';
-        fullscreenButton.style.width = '28px';
-        fullscreenButton.style.height = '28px';
-        fullscreenButton.style.display = 'flex';
-        fullscreenButton.style.alignItems = 'center';
-        fullscreenButton.style.justifyContent = 'center';
-
-        fullscreenButton.addEventListener('click', () => {
-            const anchor = image.closest('a');
-            let isVideo = false;
-            let src = image.src;
-
-            if (anchor?.dataset?.leksyPreview === 'video-url') {
-                const href = anchor.getAttribute('href');
-                if (href) {
-                    isVideo = true;
-                    src = href;
-                }
-            }
-            if (options.onFullScreen instanceof Function) {
-                const type = isVideo ? 'video/mp4' : 'image/png';
-                options.onFullScreen(src, type);
-            }
-            else createPreviewModal(src, core, options, isVideo);
-        });
-
-        resizer.appendChild(fullscreenButton);
-    }
-
-    let firstX, firstY, direction, aspectRatio, resizerClientRect;
-    const handleMouseDown = (e) => {
-        resizerClientRect = resizer.getBoundingClientRect();
-        direction = e.target.getAttribute('data-resize')
-        firstX = e.clientX || e.touches[0].clientX;
-        firstY = e.clientY || e.touches[0].clientY;
-        aspectRatio = resizer.offsetWidth / resizer.offsetHeight;
-        core.elements.iframeWindow.addEventListener('mousemove', handleMouseMove)
-        core.elements.iframeWindow.addEventListener('mouseup', handleMouseUp)
-        core.elements.iframeWindow.addEventListener('touchmove', handleMouseMove)
-        core.elements.iframeWindow.addEventListener('touchend', handleMouseUp)
-    }
-
-    const handleMouseMove = (e) => {
-        const position = {
-            clientX: e.clientX || e.touches[0].clientX,
-            clientY: e.clientY || e.touches[0].clientY,
-        }
-        // Calculate the new dimensions
-        if (direction === 'up') {
-            let top = resizerClientRect.top + (position.clientY - firstY);
-            let height = resizerClientRect.height - (position.clientY - firstY);
-            if (height < 0) {
-                top = resizerClientRect.bottom;
-                height = 0
-            }
-            resizer.style.top = top + 'px';
-            resizer.style.height = height + 'px';
-        } else if (direction === 'bottom') {
-            let height = resizerClientRect.height + (position.clientY - firstY);
-            if (height < 0) height = 0
-            resizer.style.height = height + 'px';
-        } else if (direction === 'left') {
-            let left = resizerClientRect.left + (position.clientX - firstX);
-            let width = resizerClientRect.width - (position.clientX - firstX);
-            if (width < 0) {
-                left = resizerClientRect.right;
-                width = 0
-            }
-            resizer.style.left = left + 'px';
-            resizer.style.width = width + 'px';
-        } else if (direction === 'right') {
-            let width = resizerClientRect.width + (position.clientX - firstX);
-            if (width < 0) width = 0
-            resizer.style.width = width + 'px';
-        } else if (direction === 'bottom-right') {
-            const distanceX = position.clientX - firstX
-            const distanceY = position.clientY - firstY
-            const delta = Math.sign(distanceX) === -1 || Math.sign(distanceY) === -1
-                ? Math.min(distanceX, distanceY)
-                : Math.max(distanceX, distanceY)
-            const width = resizerClientRect.width + delta;
-            const height = width / aspectRatio;
-            resizer.style.width = width + 'px';
-            resizer.style.height = height + 'px';
-        } else if (direction === 'bottom-left') {
-            const distanceX = position.clientX - firstX
-            const distanceY = position.clientY - firstY
-            const delta = distanceX > 0 ? Math.max(distanceX, distanceY) : distanceX
-            let width = resizerClientRect.width - delta;
-            if (width < 0) width = 0
-            let left = resizerClientRect.left + resizerClientRect.width - width;
-            const height = width / aspectRatio;
-            resizer.style.width = width + 'px';
-            resizer.style.left = left + 'px';
-            resizer.style.height = height + 'px';
-        } else if (direction === 'up-right') {
-            const distanceX = position.clientX - firstX
-            const distanceY = position.clientY - firstY
-            const delta = distanceX > 0 ? Math.max(distanceX, distanceY) : distanceX
-
-            let width = resizerClientRect.width + delta;
-            if (width < 0) width = 0
-            const height = width / aspectRatio;
-            const top = resizerClientRect.top + (resizerClientRect.height - height)
-            resizer.style.top = top + 'px';
-            resizer.style.width = width + 'px';
-            resizer.style.height = height + 'px';
-        } else if (direction === 'up-left') {
-            const distanceX = position.clientX - firstX
-            const distanceY = position.clientY - firstY
-            const delta = distanceX > 0 ? Math.max(distanceX, distanceY) : distanceX
-            let width = resizerClientRect.width - delta;
-            if (width < 0) width = 0
-            const height = width / aspectRatio;
-            const top = resizerClientRect.top + (resizerClientRect.height - height)
-            const left = resizerClientRect.left + (resizerClientRect.width - width)
-            resizer.style.top = top + 'px';
-            resizer.style.width = width + 'px';
-            resizer.style.height = height + 'px';
-            resizer.style.left = left + 'px';
-        }
-        position.textContent = `${parseInt(resizer.style.width)}x${parseInt(resizer.style.height)} `;
-    }
-
-    const handleMouseUp = (e) => {
-        image.style.width = parseInt(resizer.style.width) + 'px'
-        image.style.height = parseInt(resizer.style.height) + 'px'
-        const imageClientRect = image.getBoundingClientRect();
-        resizer.style.width = imageClientRect.width + 'px';
-        resizer.style.height = imageClientRect.height + 'px';
-        resizer.style.top = imageClientRect.top + 'px';
-        resizer.style.left = imageClientRect.left + 'px';
-        core.elements.iframeWindow.removeEventListener('mousemove', handleMouseMove, false)
-        core.elements.iframeWindow.removeEventListener('mouseup', handleMouseUp, false)
-        core.elements.iframeWindow.removeEventListener('touchmove', handleMouseMove, false)
-        core.elements.iframeWindow.removeEventListener('touchend', handleMouseUp, false)
-    }
-
-    const dot1 = document.createElement('button');
-    dot1.type = 'button'
-    dot1.className = 'dot up-left'
-    dot1.setAttribute('data-resize', 'up-left')
-    dot1.addEventListener('mousedown', handleMouseDown)
-    dot1.addEventListener('touchstart', handleMouseDown)
-
-    const dot2 = document.createElement('button');
-    dot2.type = 'button'
-    dot2.className = 'dot up'
-    dot2.setAttribute('data-resize', 'up')
-    dot2.addEventListener('mousedown', handleMouseDown)
-    dot2.addEventListener('touchstart', handleMouseDown)
-
-    const dot3 = document.createElement('button');
-    dot3.type = 'button'
-    dot3.className = 'dot up-right'
-    dot3.setAttribute('data-resize', 'up-right')
-    dot3.addEventListener('mousedown', handleMouseDown)
-    dot3.addEventListener('touchstart', handleMouseDown)
-
-    const dot4 = document.createElement('button');
-    dot4.type = 'button'
-    dot4.className = 'dot right'
-    dot4.setAttribute('data-resize', 'right')
-    dot4.addEventListener('mousedown', handleMouseDown)
-    dot4.addEventListener('touchstart', handleMouseDown)
-
-    const dot5 = document.createElement('button');
-    dot5.type = 'button'
-    dot5.className = 'dot bottom-right'
-    dot5.setAttribute('data-resize', 'bottom-right')
-    dot5.addEventListener('mousedown', handleMouseDown)
-    dot5.addEventListener('touchstart', handleMouseDown)
-
-    const dot6 = document.createElement('button');
-    dot6.type = 'button'
-    dot6.className = 'dot bottom'
-    dot6.setAttribute('data-resize', 'bottom')
-    dot6.addEventListener('mousedown', handleMouseDown)
-    dot6.addEventListener('touchstart', handleMouseDown)
-
-    const dot7 = document.createElement('button');
-    dot7.type = 'button'
-    dot7.className = 'dot bottom-left'
-    dot7.setAttribute('data-resize', 'bottom-left')
-    dot7.addEventListener('mousedown', handleMouseDown)
-    dot7.addEventListener('touchstart', handleMouseDown)
-
-    const dot8 = document.createElement('button');
-    dot8.type = 'button'
-    dot8.className = 'dot left'
-    dot8.setAttribute('data-resize', 'left')
-    dot8.addEventListener('mousedown', handleMouseDown)
-    dot8.addEventListener('touchstart', handleMouseDown)
-
-    const position = document.createElement('div')
-    position.className = 'position';
-    position.textContent = `${parseInt(imageClientRect.width)}x${parseInt(imageClientRect.height)} `;
-
-    resizer.append(dot1, dot2, dot3, dot4, dot5, dot6, dot7, dot8, position)
-
-    const updateImage = (event, data) => {
-        switch (event) {
-            case 'update':
-                image.style.width = data.width;
-                image.style.height = data.height;
-                break;
-            case '100%':
-            case '75%':
-            case '50%':
-            case 'auto':
-                image.style.width = event;
-                image.style.height = 'unset';
-                break;
-            case 'wrap-left':
-                image.style.float = 'left';
-                image.style.margin = '0 10px 10px 0';
-                break;
-            case 'wrap-right':
-                image.style.float = 'right';
-                image.style.margin = '0 0 10px 10px';
-                break;
-            case 'revert':
-                image.style.width = 'unset';
-                image.style.height = 'unset';
-                image.style.float = 'none';
-                image.style.margin = '';
-                break;
-            case 'delete':
-                image.remove()
-                destroyImageResizer(options, core)
-                break;
-        }
-        const imageClientRect = image.getBoundingClientRect();
-        resizer.style.width = imageClientRect.width + 'px';
-        resizer.style.height = imageClientRect.height + 'px';
-        resizer.style.top = imageClientRect.top + 'px';
-        resizer.style.left = imageClientRect.left + 'px';
-        position.textContent = `${parseInt(resizer.style.width)}x${parseInt(resizer.style.height)} `;
-    }
-
-    makeEditToolbar(options, core, { type, image, updateImage })
-
-    core.elements.resizerImage = image
-    core.elements.resizer = resizer
-    core.elements.iframeWindow.body.appendChild(resizer)
-    core.resizerHandler = (e) => updateImageResizerPosition(e, core);
-    core.deleteImageHandler = (e) => {
-        if (e.key === 'Backspace' || e.key === 'Delete') updateImage('delete')
-    }
-    core.elements.iframeWindow.addEventListener('scroll', core.resizerHandler)
-    core.elements.iframeWindow.addEventListener('keydown', core.deleteImageHandler)
-}
-
-const createPreviewModal = (src, core, options, isVideo = false) => {
-    // Create overlay
-    const overlay = document.createElement('div');
-    overlay.className = `${options.classPrefix}${CLASSES.PREVIEW_MODAL_OVERLAY} `
-
-    // Create modal content
-    const modalContent = document.createElement('div');
-    modalContent.className = `${options.classPrefix}${CLASSES.PREVIEW_MODAL_CONTENT} `
-
-    // Close button
-    const closeButton = document.createElement('span');
-    closeButton.className = `${options.classPrefix}${CLASSES.PREVIEW_MODAL_CLOSE} `
-    closeButton.innerHTML = SVG.CLOSE;
-    closeButton.onclick = () => overlay.remove();
-
-    // Create modal body
-    const modalBody = document.createElement('div');
-    modalBody.className = `${options.classPrefix}${CLASSES.PREVIEW_MODAL_BODY} `
-
-    let element;
-    if (isVideo) {
-        element = document.createElement('video');
-        element.src = src;
-        element.controls = true;
-        element.style.maxWidth = '100%';
-        element.style.maxHeight = '100%';
-        element.setAttribute('controlsList', 'nodownload');
-        element.setAttribute('disablePictureInPicture', true);
-    } else {
-        element = document.createElement('img');
-        element.src = src;
-        element.alt = 'Preview Image';
-    }
-
-    modalBody.appendChild(element);
-    modalContent.append(closeButton, modalBody);
-    overlay.appendChild(modalContent);
-
-    // Append to body
-    document.body.appendChild(overlay);
-
-    overlay.addEventListener('click', (event) => {
-        if (event.target !== element) {
-            overlay.remove();
-        }
-    });
-    // Show modal
-    setTimeout(() => {
-        overlay.classList.add('active');
-    }, 10);
-}
-
-const updateImageResizerPosition = (e, core) => {
-    const imageClientRect = core.elements.resizerImage.getBoundingClientRect();
-    core.elements.resizer.style.width = imageClientRect.width + 'px';
-    core.elements.resizer.style.height = imageClientRect.height + 'px';
-    core.elements.resizer.style.top = imageClientRect.top + 'px';
-    core.elements.resizer.style.left = imageClientRect.left + 'px';
-}
-
-const destroyImageResizer = (options, core) => {
-    if (!options.disabled) changeAllToolbarState(core, 'enabled')
-    if (core.elements.resizerPlugin) core.elements.toolbarContainer.removeChild(core.elements.resizerPlugin)
-    if (core.elements.resizer) core.elements.iframeWindow.body.removeChild(core.elements.resizer)
-    core.elements.iframeWindow.removeEventListener('scroll', core.resizerHandler, false)
-    core.elements.iframeWindow.removeEventListener('scroll', core.deleteImageHandler, false)
-    core.elements.iframeWindow.removeEventListener('keydown', core.deleteImageHandler, false)
-    delete core.elements.resizer
-    delete core.resizerHandler
-    delete core.deleteImageHandler
-    delete core.elements.resizerImage
-    delete core.elements.resizerPlugin
-}
-
-const getTableGrid = (table) => {
-    const grid = [];
-    const rows = table.rows;
-    for (let r = 0; r < rows.length; r++) {
-        if (!grid[r]) grid[r] = [];
-        const row = rows[r];
-        let colIndex = 0;
-        for (let c = 0; c < row.cells.length; c++) {
-            const cell = row.cells[c];
-            // Skip occupied cells
-            while (grid[r][colIndex]) colIndex++;
-
-            const rowspan = cell.rowSpan || 1;
-            const colspan = cell.colSpan || 1;
-
-            for (let rs = 0; rs < rowspan; rs++) {
-                for (let cs = 0; cs < colspan; cs++) {
-                    if (!grid[r + rs]) grid[r + rs] = [];
-                    grid[r + rs][colIndex + cs] = cell;
-                }
-            }
-            colIndex += colspan;
-        }
-    }
-    return grid;
-}
-
-const getCellPosition = (grid, cell) => {
-    for (let r = 0; r < grid.length; r++) {
-        for (let c = 0; c < grid[r].length; c++) {
-            if (grid[r][c] === cell) return { r, c };
-        }
-    }
-    return null;
-}
-
-const initTableEditPlugin = (td, options, core) => {
-    destroyTableEditPlugin(options, core)
-    const table = td.closest('table');
-    if (!table) return
-
-    const tableClientRect = table.getBoundingClientRect();
-    let firstX, firstY;
-
-    const handleColumnResizeMouseMove = (e) => {
-        const cell = e.target.closest('th, td');
-        if (!cell) return;
-
-        const rect = cell.getBoundingClientRect();
-        const isNearRightEdge =
-            rect.right - e.clientX <= RESIZE_MARGIN;
-
-        table.style.cursor = isNearRightEdge ? 'col-resize' : 'default';
-    };
-
-    const handleColumnResizeMouseDown = (e) => {
-        const isTouch = e.type === 'touchstart';
-        const clientX = isTouch ? e.touches[0].clientX : e.clientX;
-
-        if (!isTouch && table.style.cursor !== 'col-resize') return;
-        const target = e.target.closest('td, th');
-        if (!target) return;
-
-        if (isTouch) {
-            const rect = target.getBoundingClientRect();
-            const isNearRightEdge = rect.right - clientX <= RESIZE_MARGIN;
-            if (!isNearRightEdge) return;
-        }
-
-        e.preventDefault();
-        e.stopPropagation();
-
-        const startX = clientX;
-
-        const firstRowCells = Array.from(table.rows[0].cells);
-        firstRowCells.forEach(cell => {
-            cell.style.width = cell.getBoundingClientRect().width + 'px';
-        });
-
-        const targetRect = target.getBoundingClientRect();
-        const resizeTargetIndex = firstRowCells.findIndex(cell => Math.abs(cell.getBoundingClientRect().right - targetRect.right) < 5);
-
-        if (resizeTargetIndex === -1) return;
-
-        const resizeTarget = firstRowCells[resizeTargetIndex];
-        const nextTarget = firstRowCells[resizeTargetIndex + 1];
-
-        const startWidth = resizeTarget.getBoundingClientRect().width;
-        const startNextWidth = nextTarget ? nextTarget.getBoundingClientRect().width : 0;
-        const startTableWidth = table.getBoundingClientRect().width;
-
-        const handleMouseMove = (event) => {
-            const currentX = event.type === 'touchmove' ? event.touches[0].clientX : event.clientX;
-            const diff = currentX - startX;
-
-            if (nextTarget) {
-                const minWidth = 30;
-                const constrainedDiff = Math.min(Math.max(diff, minWidth - startWidth), startNextWidth - minWidth);
-                resizeTarget.style.width = (startWidth + constrainedDiff) + 'px';
-                nextTarget.style.width = (startNextWidth - constrainedDiff) + 'px';
-            } else {
-                const newWidth = Math.max(startWidth + diff, 30);
-                const effectiveDiff = newWidth - startWidth;
-                resizeTarget.style.width = newWidth + 'px';
-                table.style.width = (startTableWidth + effectiveDiff) + 'px';
-            }
-            core.elements.iframeWindow.body.style.cursor = 'col-resize';
-        };
-
-        const handleMouseUp = () => {
-            core.elements.iframeWindow.body.style.cursor = '';
-            core.elements.iframeWindow.removeEventListener('mousemove', handleMouseMove);
-            core.elements.iframeWindow.removeEventListener('mouseup', handleMouseUp);
-            core.elements.iframeWindow.removeEventListener('touchmove', handleMouseMove);
-            core.elements.iframeWindow.removeEventListener('touchend', handleMouseUp);
-        };
-
-        core.elements.iframeWindow.addEventListener('mousemove', handleMouseMove);
-        core.elements.iframeWindow.addEventListener('mouseup', handleMouseUp);
-        core.elements.iframeWindow.addEventListener('touchmove', handleMouseMove);
-        core.elements.iframeWindow.addEventListener('touchend', handleMouseUp);
-    };
-
-    table.addEventListener('mousemove', handleColumnResizeMouseMove);
-    table.addEventListener('mousedown', handleColumnResizeMouseDown);
-    table.addEventListener('touchstart', handleColumnResizeMouseDown);
-
-    core.tableColumnResizeHandlers = {
-        mousemove: handleColumnResizeMouseMove,
-        mousedown: handleColumnResizeMouseDown,
-        touchstart: handleColumnResizeMouseDown
-    };
-
-    const handleMouseDown = (e) => {
-        firstX = e.clientX || e.touches[0].clientX;
-        firstY = e.clientY || e.touches[0].clientY;
-
-        core.elements.iframeWindow.addEventListener('mousemove', handleMouseMove)
-        core.elements.iframeWindow.addEventListener('mouseup', handleMouseUp)
-        core.elements.iframeWindow.addEventListener('touchmove', handleMouseMove)
-        core.elements.iframeWindow.addEventListener('touchend', handleMouseUp)
-    }
-
-    const handleMouseMove = (e) => {
-        // Calculate the new dimensions
-        const distanceX = (e.clientX || e.touches[0].clientX) - firstX
-        const distanceY = (e.clientY || e.touches[0].clientY) - firstY
-        const width = tableClientRect.width + distanceX;
-        const height = tableClientRect.height + distanceY;
-
-        table.style.width = width + 'px';
-        table.style.height = height + 'px';
-    }
-
-    const handleMouseUp = (e) => {
-        core.elements.iframeWindow.removeEventListener('mousemove', handleMouseMove, false)
-        core.elements.iframeWindow.removeEventListener('mouseup', handleMouseUp, false)
-        core.elements.iframeWindow.removeEventListener('touchmove', handleMouseMove, false)
-        core.elements.iframeWindow.removeEventListener('touchend', handleMouseUp, false)
-    }
-
-    const updateTable = (event, value) => {
-        const rowIndex = td.parentElement.rowIndex;
-        const cellIndex = td.cellIndex;
-        const colCount = table.rows[0].cells.length;  // Number of columns in the table
-
-        const addCellWithBorder = (row, index) => {
-            const newCell = row.insertCell(index);
-            newCell.innerHTML = '\u00A0';  // Add content (empty for now)
-            newCell.style.border = '1px solid black';  // Set the border
-        }
-
-        // Helper function to toggle border between 'none' and '1px solid black'
-        const toggleBorder = (cell, side) => {
-            if (cell) {
-                const currentBorder = cell.style[side];
-                cell.style[side] = ['none', 'medium', 'medium none', '0px none rgb(0, 0, 0)'].includes(currentBorder) ? '1px solid black' : 'none';
-            }
-        };
-
-        // Helper function to check if the table has no rows and remove the table if needed
-        const checkAndRemoveTable = () => {
-            if (table.rows.length === 0) {
-                table.remove();
-            }
-        };
-
-        switch (event) {
-            case 'insert-row-above': {
-                const newRow = table.insertRow(rowIndex);  // Insert row above
-                for (let i = 0; i < colCount; i++) {
-                    addCellWithBorder(newRow, i);  // Add proper <td> cells with border
-                }
-                break;
-            }
-            case 'insert-row-below': {
-                const newRow = table.insertRow(rowIndex + 1);  // Insert row below
-                for (let i = 0; i < colCount; i++) {
-                    addCellWithBorder(newRow, i);  // Add proper <td> cells with border
-                }
-                break;
-            }
-            case 'delete-row': {
-                table.deleteRow(rowIndex);  // Delete the row
-                destroyTableEditPlugin(options, core)
-                checkAndRemoveTable()
-                break;
-            }
-            case 'merge-cell-right': {
-                const grid = getTableGrid(table);
-                const pos = getCellPosition(grid, td);
-                if (!pos) break;
-                const { r, c } = pos;
-                const targetCell = grid[r][c + (td.colSpan || 1)];
-
-                if (targetCell && targetCell !== td &&
-                    (targetCell.rowSpan || 1) === (td.rowSpan || 1) &&
-                    getCellPosition(grid, targetCell).r === r
-                ) {
-                    if (targetCell.innerHTML.trim() !== '') {
-                        td.innerHTML += '<br/>' + targetCell.innerHTML;
-                    }
-                    td.colSpan = (td.colSpan || 1) + (targetCell.colSpan || 1);
-                    targetCell.remove();
-                }
-                break;
-            }
-            case 'merge-cell-left': {
-                const grid = getTableGrid(table);
-                const pos = getCellPosition(grid, td);
-                if (!pos) break;
-                const { r, c } = pos;
-                if (c === 0) break;
-                const targetCell = grid[r][c - 1];
-
-                if (targetCell && targetCell !== td &&
-                    (targetCell.rowSpan || 1) === (td.rowSpan || 1) &&
-                    getCellPosition(grid, targetCell).r === r
-                ) {
-                    if (targetCell.innerHTML.trim() !== '') {
-                        td.innerHTML = targetCell.innerHTML + '<br/>' + td.innerHTML;
-                    }
-                    td.colSpan = (td.colSpan || 1) + (targetCell.colSpan || 1);
-                    targetCell.parentNode.insertBefore(td, targetCell);
-                    targetCell.remove();
-                }
-                break;
-            }
-            case 'merge-cell-down': {
-                const grid = getTableGrid(table);
-                const pos = getCellPosition(grid, td);
-                if (!pos) break;
-                const { r, c } = pos;
-                const targetRowIdx = r + (td.rowSpan || 1);
-                if (targetRowIdx >= grid.length) break;
-                const targetCell = grid[targetRowIdx][c];
-
-                if (targetCell && targetCell !== td &&
-                    (targetCell.colSpan || 1) === (td.colSpan || 1) &&
-                    getCellPosition(grid, targetCell).c === c
-                ) {
-                    if (targetCell.innerHTML.trim() !== '') {
-                        td.innerHTML += '<br/>' + targetCell.innerHTML;
-                    }
-                    td.rowSpan = (td.rowSpan || 1) + (targetCell.rowSpan || 1);
-                    targetCell.remove();
-                }
-                break;
-            }
-            case 'merge-cell-up': {
-                const grid = getTableGrid(table);
-                const pos = getCellPosition(grid, td);
-                if (!pos) break;
-                const { r, c } = pos;
-                if (r === 0) break;
-                const targetCell = grid[r - 1][c];
-
-                if (targetCell && targetCell !== td &&
-                    (targetCell.colSpan || 1) === (td.colSpan || 1) &&
-                    getCellPosition(grid, targetCell).c === c
-                ) {
-                    if (targetCell.innerHTML.trim() !== '') {
-                        td.innerHTML = targetCell.innerHTML + '<br/>' + td.innerHTML;
-                    }
-                    td.rowSpan = (td.rowSpan || 1) + (targetCell.rowSpan || 1);
-                    targetCell.parentNode.insertBefore(td, targetCell);
-                    targetCell.remove();
-                }
-                break;
-            }
-            case 'insert-column-left': {
-                for (const element of table.rows) {
-                    const row = element;
-                    addCellWithBorder(row, cellIndex);  // Add a new <td> with border to the left
-                }
-                break;
-            }
-            case 'insert-column-right': {
-                for (const element of table.rows) {
-                    const row = element;
-                    addCellWithBorder(row, cellIndex + 1);  // Add a new <td> with border to the right
-                }
-                break;
-            }
-            case 'delete-column': {
-                for (const element of table.rows) {
-                    element.deleteCell(cellIndex);  // Delete the cell at the current index
-                }
-                checkAndRemoveTable()
-                destroyTableEditPlugin(options, core)
-                break;
-            }
-            case 'split-cell-vertical': {
-                const colspan = td.colSpan || 1;
-                if (colspan > 1) {
-                    td.colSpan = colspan - 1;
-                    const newCell = td.parentNode.insertCell(td.cellIndex + 1);
-                    newCell.innerHTML = '\u00A0';
-                    newCell.style.border = td.style.border;
-                    newCell.rowSpan = td.rowSpan;
-                }
-                break;
-            }
-            case 'split-cell-horizontal': {
-                const rowspan = td.rowSpan || 1;
-                if (rowspan > 1) {
-                    td.rowSpan = rowspan - 1;
-                    const grid = getTableGrid(table);
-                    const pos = getCellPosition(grid, td);
-                    const { r, c } = pos;
-                    const nextRowIdx = r + rowspan - 1;
-                    const nextRow = table.rows[nextRowIdx];
-                    let insertIndex = 0;
-                    for (let i = 0; i < nextRow.cells.length; i++) {
-                        const cell = nextRow.cells[i];
-                        const cellPos = getCellPosition(grid, cell);
-                        if (cellPos.c < c) insertIndex++;
-                        else break;
-                    }
-
-                    const newCell = nextRow.insertCell(insertIndex);
-                    newCell.innerHTML = '\u00A0';
-                    newCell.style.border = td.style.border;
-                    newCell.colSpan = td.colSpan;
-                }
-                break;
-            }
-            case 'align-left': {
-                table.style.marginLeft = '0';
-                table.style.marginRight = 'auto';
-                break;
-            }
-            case 'align-center': {
-                table.style.marginLeft = 'auto';
-                table.style.marginRight = 'auto';
-                break;
-            }
-            case 'align-right': {
-                table.style.marginLeft = 'auto';
-                table.style.marginRight = '0';
-                break;
-            }
-            case 'cell-border-top': {
-                toggleBorder(td, 'borderTop');
-                if (rowIndex > 0) {
-                    const aboveCell = table.rows[rowIndex - 1].cells[cellIndex];
-                    toggleBorder(aboveCell, 'borderBottom');
-                }
-                break;
-            }
-            case 'cell-border-right': {
-                toggleBorder(td, 'borderRight');
-                if (cellIndex < table.rows[rowIndex].cells.length - 1) {
-                    const rightCell = table.rows[rowIndex].cells[cellIndex + 1];
-                    toggleBorder(rightCell, 'borderLeft');
-                }
-                break;
-            }
-            case 'cell-border-bottom': {
-                toggleBorder(td, 'borderBottom');
-                if (rowIndex < table.rows.length - 1) {
-                    const belowCell = table.rows[rowIndex + 1].cells[cellIndex];
-                    toggleBorder(belowCell, 'borderTop');
-                }
-                break;
-            }
-            case 'cell-border-left': {
-                toggleBorder(td, 'borderLeft');
-                if (cellIndex > 0) {
-                    const leftCell = table.rows[rowIndex].cells[cellIndex - 1];
-                    toggleBorder(leftCell, 'borderRight');
-                }
-                break;
-            }
-            case 'cell-border-full': {
-                td.style.border = '1px solid black';
-                // Handle top neighbor
-                if (rowIndex > 0) {
-                    if (table.rows[rowIndex - 1].cells[cellIndex])
-                        table.rows[rowIndex - 1].cells[cellIndex].style.borderBottom = '1px solid black';
-                }
-
-                // Handle bottom neighbor
-                if (rowIndex < table.rows.length - 1) {
-                    if (table.rows[rowIndex + 1].cells[cellIndex])
-                        table.rows[rowIndex + 1].cells[cellIndex].style.borderTop = '1px solid black';
-                }
-
-                // Handle left neighbor
-                if (cellIndex > 0) {
-                    if (table.rows[rowIndex].cells[cellIndex - 1])
-                        table.rows[rowIndex].cells[cellIndex - 1].style.borderRight = '1px solid black';
-                }
-
-                // Handle right neighbor
-                if (cellIndex < table.rows[rowIndex].cells.length - 1) {
-                    if (table.rows[rowIndex].cells[cellIndex + 1])
-                        table.rows[rowIndex].cells[cellIndex + 1].style.borderLeft = '1px solid black';
-                }
-                break;
-            }
-            case 'cell-border-none': {
-                // Remove all borders from the current cell
-                td.style.border = 'none';
-
-                // Handle top neighbor
-                if (rowIndex > 0) {
-                    if (table.rows[rowIndex - 1].cells[cellIndex])
-                        table.rows[rowIndex - 1].cells[cellIndex].style.borderBottom = 'none';
-                }
-
-                // Handle bottom neighbor
-                if (rowIndex < table.rows.length - 1) {
-                    if (table.rows[rowIndex + 1].cells[cellIndex])
-                        table.rows[rowIndex + 1].cells[cellIndex].style.borderTop = 'none';
-                }
-
-                // Handle left neighbor
-                if (cellIndex > 0) {
-                    if (table.rows[rowIndex].cells[cellIndex - 1])
-                        table.rows[rowIndex].cells[cellIndex - 1].style.borderRight = 'none';
-                }
-
-                // Handle right neighbor
-                if (cellIndex < table.rows[rowIndex].cells.length - 1) {
-                    if (table.rows[rowIndex].cells[cellIndex + 1])
-                        table.rows[rowIndex].cells[cellIndex + 1].style.borderLeft = 'none';
-                }
-                break;
-            }
-            case 'fixed-column-width': {
-                if (table.style.tableLayout === 'fixed') {
-                    table.style.tableLayout = 'auto';
-                } else {
-                    table.style.tableLayout = 'fixed';
-                    table.style.wordBreak = 'break-all'
-                }
-                break;
-            }
-            case 'border-color': {
-                td.style.borderColor = value;
-
-                // Handle top neighbor
-                if (rowIndex > 0) {
-                    if (table.rows[rowIndex - 1].cells[cellIndex])
-                        table.rows[rowIndex - 1].cells[cellIndex].style.borderBottomColor = value;
-                }
-
-                // Handle bottom neighbor
-                if (rowIndex < table.rows.length - 1) {
-                    if (table.rows[rowIndex + 1].cells[cellIndex])
-                        table.rows[rowIndex + 1].cells[cellIndex].style.borderTopColor = value;
-                }
-
-                // Handle left neighbor
-                if (cellIndex > 0) {
-                    if (table.rows[rowIndex].cells[cellIndex - 1])
-                        table.rows[rowIndex].cells[cellIndex - 1].style.borderRightColor = value;
-                }
-
-                // Handle right neighbor
-                if (cellIndex < table.rows[rowIndex].cells.length - 1) {
-                    if (table.rows[rowIndex].cells[cellIndex + 1])
-                        table.rows[rowIndex].cells[cellIndex + 1].style.borderLeftColor = value;
-                }
-                break;
-            }
-            case 'background-color': {
-                td.style.backgroundColor = value;
-                break;
-            }
-            case 'row-background-color': {
-                const row = td.parentElement;
-                for (let i = 0; i < row.cells.length; i++) {
-                    row.cells[i].style.backgroundColor = value;
-                }
-                break;
-            }
-            case 'column-background-color': {
-                for (let r = 0; r < table.rows.length; r++) {
-                    const cell = table.rows[r].cells[cellIndex];
-                    if (cell) {
-                        cell.style.backgroundColor = value;
-                    }
-                }
-                break;
-            }
-            case 'cell-width': {
-                for (let i = 0; i < table.rows.length; i++) {
-                    const cell = table.rows[i].cells[cellIndex];
-                    if (cell) cell.style.width = value;
-                }
-                break;
-            }
-            case 'cell-height': {
-                td.parentElement.style.height = value;
-                break;
-            }
-            case 'cell-padding': {
-                td.style.padding = value;
-                break;
-            }
-
-        }
-    }
-
-    makeEditToolbar(options, core, { type: 'td', td, updateTable })
-
-
-    const resizer = document.createElement('div');
-    resizer.className = `table-resizer`
-    resizer.style.width = tableClientRect.width + 'px';
-    resizer.style.height = tableClientRect.height + 'px';
-    resizer.style.top = tableClientRect.top + 'px';
-    resizer.style.left = tableClientRect.left + 'px';
-
-    const resizerButton = document.createElement('button');
-    resizerButton.className = `table-resizer-btn`
-    resizerButton.style.top = tableClientRect.bottom - 6 + 'px';
-    resizerButton.style.left = tableClientRect.right - 6 + 'px';
-    resizerButton.addEventListener('mousedown', handleMouseDown)
-    resizerButton.addEventListener('touchstart', handleMouseDown)
-
-    resizer.appendChild(resizerButton)
-
-    core.elements.table = table
-    core.elements.tableResizer = resizer
-    core.elements.tableResizerBtn = resizerButton
-    core.resizerHandler = (e) => updateTableResizerPosition(options, core);
-    core.elements.iframeWindow.addEventListener('scroll', core.resizerHandler)
-    core.elements.iframeWindow.body.appendChild(resizer)
-}
-
-const updateTableResizerPosition = (options, core) => {
-    if (core.elements.tableResizerBtn) {
-        if (!core.elements.editor.contains(core.elements.table)) return destroyTableEditPlugin(options, core)
-        const tableClientRect = core.elements.table.getBoundingClientRect();
-        core.elements.tableResizer.style.width = tableClientRect.width + 'px';
-        core.elements.tableResizer.style.height = tableClientRect.height + 'px';
-        core.elements.tableResizer.style.top = tableClientRect.top + 'px';
-        core.elements.tableResizer.style.left = tableClientRect.left + 'px';
-        core.elements.tableResizerBtn.style.top = tableClientRect.bottom - 6 + 'px';
-        core.elements.tableResizerBtn.style.left = tableClientRect.right - 6 + 'px';
-    }
-}
-
-const destroyTableEditPlugin = (options, core) => {
-    if (core.elements.table && core.tableColumnResizeHandlers) {
-        core.elements.table.removeEventListener('mousemove', core.tableColumnResizeHandlers.mousemove);
-        core.elements.table.removeEventListener('mousedown', core.tableColumnResizeHandlers.mousedown);
-        core.elements.table.removeEventListener('touchstart', core.tableColumnResizeHandlers.touchstart);
-        core.elements.table.style.cursor = '';
-        delete core.tableColumnResizeHandlers;
-    }
-    if (core.elements.resizerPlugin) core.elements.toolbarContainer.removeChild(core.elements.resizerPlugin)
-    if (core.elements.tableResizer) core.elements.iframeWindow.body.removeChild(core.elements.tableResizer)
-    core.elements.iframeWindow.removeEventListener('scroll', core.resizerHandler, false)
-    delete core.elements.resizerPlugin
-    delete core.resizerHandler
-    delete core.elements.table
-    delete core.elements.tableResizer
-    delete core.elements.tableResizerBtn
-}
-
-const changeToolbarStatByPlugin = (plugin, action, value) => {
-    switch (action) {
-        case 'disabled':
-            if (plugin.getAttribute('data-type') === 'button') {
-                plugin.disabled = true
-                plugin.classList.add('disabled')
-            } else if (plugin.getAttribute('data-type') === 'dropdown' || plugin.getAttribute('data-type') === 'select') {
-                plugin.childNodes[0].disabled = true
-                plugin.childNodes[0].classList.add('disabled')
-            } else if (plugin.getAttribute('data-type') === 'color') {
-                plugin.childNodes[0].disabled = true
-                plugin.classList.add('disabled')
-            } else if (plugin.getAttribute('data-type') === 'button-select') {
-                plugin.querySelectorAll('button').forEach(btn => {
-                    btn.disabled = true
-                    btn.classList.add('disabled')
-                })
-            }
-            break;
-        case 'enabled':
-            if (plugin.getAttribute('data-type') === 'button') {
-                plugin.disabled = false
-                plugin.classList.remove('disabled')
-            } else if (plugin.getAttribute('data-type') === 'dropdown' || plugin.getAttribute('data-type') === 'select') {
-                plugin.childNodes[0].disabled = false
-                plugin.childNodes[0].classList.remove('disabled')
-            } else if (plugin.getAttribute('data-type') === 'color') {
-                plugin.childNodes[0].disabled = false
-                plugin.classList.remove('disabled')
-            } else if (plugin.getAttribute('data-type') === 'button-select') {
-                plugin.querySelectorAll('button').forEach(btn => {
-                    btn.disabled = false
-                    btn.classList.remove('disabled')
-                })
-            }
-            break;
-        case 'active':
-            if (plugin.getAttribute('data-type') === 'button') {
-                plugin.classList.add('active')
-            } else if (plugin.getAttribute('data-type') === 'dropdown' || plugin.getAttribute('data-type') === 'select') {
-                plugin.childNodes[0].classList.add('active')
-            } else if (plugin.getAttribute('data-type') === 'color') {
-                plugin.classList.add('active')
-            } else if (plugin.getAttribute('data-type') === 'button-select') {
-                plugin.querySelector('button[data-type="button"]')?.classList.add('active')
-            }
-            break;
-        case 'inactive':
-            if (plugin.getAttribute('data-type') === 'button') {
-                plugin.classList.remove('active')
-            } else if (plugin.getAttribute('data-type') === 'dropdown' || plugin.getAttribute('data-type') === 'select') {
-                plugin.childNodes[0].classList.remove('active')
-            } else if (plugin.getAttribute('data-type') === 'color') {
-                plugin.classList.remove('active')
-            } else if (plugin.getAttribute('data-type') === 'button-select') {
-                plugin.querySelector('button[data-type="button"]')?.classList.remove('active')
-            }
-            break;
-        case 'font':
-            plugin.childNodes[0].childNodes[0].childNodes[0].innerHTML = FONTS[value] ? FONTS[value] : value ? value : 'Font'
-            break;
-        case 'font-size':
-            plugin.childNodes[0].childNodes[0].childNodes[0].innerHTML = FONT_SIZES[value] ? FONT_SIZES[value] : value ? value : 'Font-Size'
-            break;
-        case 'format-block':
-            plugin.childNodes[0].childNodes[0].childNodes[0].innerHTML = FORMATS[value] ?? 'Format'
-            break;
-        case 'font_color':
-            plugin.childNodes[0].value = value || '#000000'
-            break;
-        case 'highlight_color':
-            plugin.childNodes[0].value = value || '#ffffff'
-            break;
-        case 'icon':
-            plugin.innerHTML = value
-    }
-}
-
-const changeAllToolbarState = (core, action, preventPlugins = []) => {
-    Object.keys(core.elements.toolbar).forEach(pluginName => {
-        core.elements.toolbar[pluginName].forEach(plugin => {
-            if (preventPlugins.includes(pluginName)) return
-            changeToolbarStatByPlugin(plugin, action)
-        })
-    })
-}
-
-const changeToolbarStateByName = (core, action, pluginNames = []) => {
-    Object.keys(core.elements.toolbar).forEach(pluginName => {
-        if (!pluginNames.includes(pluginName)) return
-        core.elements.toolbar[pluginName].forEach(plugin => {
-            changeToolbarStatByPlugin(plugin, action)
-        })
-    })
-}
-
-const changeToolbarValueByName = (core, pluginName, value) => {
-    core.elements.toolbar[pluginName]?.forEach(plugin => {
-        changeToolbarStatByPlugin(plugin, pluginName, value)
-    })
-}
-
-const changeToolbarHtmlByName = (core, pluginName, value) => {
-    core.elements.toolbar[pluginName]?.forEach(plugin => {
-        changeToolbarStatByPlugin(plugin, 'icon', value)
-    })
-}
-
-const rgbToHex = (rgb) => {
-    const rgbArray = rgb.match(/\d+/g); // Extracts the numeric RGB values
-    return `#${rgbArray.map(x => {
-        const hex = parseInt(x).toString(16);
-        return hex.length === 1 ? '0' + hex : hex;  // Pads with 0 if needed
-    }).join('')
-        } `.slice(0, 7);
-};
-
-const extractSocialMediaId = (url) => {
-    for (const platform in SOCIAL_MEDIA_PATTERNS) {
-        const match = url.match(SOCIAL_MEDIA_PATTERNS[platform]);
-        if (match) {
-
-            return { platform, id: match[1] };
-        }
-    }
-
-    return { platform: null, id: null };
-};
-
-const constructEmbedUrl = (platform, id) => {
-    if (!SOCIAL_MEDIA_BASEURLS[platform] || !id) return null;
-    const parentDomain = window.location.hostname;
-    switch (platform) {
-        case "INSTAGRAM":
-        case "THREADS":
-            return `${SOCIAL_MEDIA_BASEURLS[platform]}${id}/embed`;
-        case "REDDIT":
-            return `${SOCIAL_MEDIA_BASEURLS[platform]}${id}/?ref_source=embed&ref=share`;
-        case "TWITCH":
-        case "TWITCH_CHANNEL":
-            return `${SOCIAL_MEDIA_BASEURLS[platform]}${id}&parent=${parentDomain}&autoplay=false&time=0h0m0s`
-        default:
-            return `${SOCIAL_MEDIA_BASEURLS[platform]}${id}`;
-    }
-};
-
-const showAnchorPopover = (element, x, y, options, core) => {
-    let href = element.getAttribute("href");
-
-    // Create popover container
-    let popover = document.createElement("div");
-    popover.id = "anchor-popover";
-    popover.style.position = "absolute";
-    popover.style.top = "0";
-    popover.style.left = "0";
-    popover.style.padding = "8px";
-    popover.style.background = "white";
-    popover.style.border = "1px solid #ccc";
-    popover.style.borderRadius = "6px";
-    popover.style.boxShadow = "0px 4px 8px rgba(0,0,0,0.2)";
-    popover.style.zIndex = "1000";
-    popover.style.display = "flex";
-    popover.style.alignItems = "center";
-    popover.style.gap = "5px";
-    popover.style.whiteSpace = "nowrap";
-    popover.style.maxWidth = "300px";
-    popover.style.visibility = "hidden";
-
-    // Create clickable link
-    let linkDiv = document.createElement("div");
-    linkDiv.textContent = href;
-    linkDiv.style.textDecoration = "none";
-    linkDiv.style.color = "#007bff";
-    linkDiv.style.padding = "5px";
-    linkDiv.style.overflow = "hidden";
-    linkDiv.style.textOverflow = "ellipsis";
-    linkDiv.style.webkitBoxOrient = "vertical";
-    linkDiv.style.webkitLineClamp = "1";
-    linkDiv.style.maxWidth = "250px";
-    linkDiv.style.wordBreak = "break-word";
-    linkDiv.style.cursor = "pointer";
-    linkDiv.onclick = () => core.onLinkClick(href);
-
-    // Create Edit button
-    let editButton = document.createElement("span");
-    editButton.innerHTML = SVG.EDIT_LINK;
-    editButton.style.padding = "5px";
-    editButton.title = "Edit link";
-    editButton.onclick = (event) => editAnchorTag(event, core, options);
-
-    // Create Copy button
-    let copyButton = document.createElement("span");
-    copyButton.innerHTML = SVG.COPY_LINK;
-    copyButton.style.padding = "5px";
-    copyButton.title = "Copy link";
-    copyButton.onclick = (event) => navigator.clipboard.writeText(href);
-
-    // Create Delete button
-    let deleteButton = document.createElement("span");
-    deleteButton.innerHTML = SVG.DELETE_LINK;
-    deleteButton.style.padding = "5px";
-    deleteButton.title = "Remove link";
-    deleteButton.onclick = (event) => removeAnchorTag(event, element, core);
-
-    // Append elements to popover
-    popover.append(linkDiv, copyButton, editButton, deleteButton);
-
-    let parent = core.elements.iframeWindow.body;
-    parent.appendChild(popover);
-
-    requestAnimationFrame(() => {
-        let popoverRect = popover.getBoundingClientRect();
-        let parentRect = parent.getBoundingClientRect();
-
-        let scrollX = parent.scrollLeft;
-        let scrollY = parent.scrollTop;
-
-        let finalX = x + scrollX + 5;
-        let finalY = y + scrollY + 5;
-
-        let spaceRight = parentRect.right - x;
-        let spaceLeft = x - parentRect.left;
-        let spaceBelow = parentRect.bottom - y;
-        let spaceAbove = y - parentRect.top;
-
-        if (spaceBelow < popoverRect.height && spaceAbove >= popoverRect.height) {
-            finalY = y + scrollY - popoverRect.height - 5;
-        } else if (spaceBelow < popoverRect.height) {
-            finalY = Math.max(0, y + scrollY - popoverRect.height);
-        }
-
-        if (spaceRight < popoverRect.width && spaceLeft >= popoverRect.width) {
-            finalX = x + scrollX - popoverRect.width - 5;
-        } else if (spaceRight < popoverRect.width) {
-            finalX = Math.max(0, x + scrollX - popoverRect.width);
-        }
-
-        // Boundary safety
-        finalX = Math.max(5, Math.min(finalX, parent.scrollWidth - popoverRect.width - 5));
-        finalY = Math.max(5, Math.min(finalY, parent.scrollHeight - popoverRect.height - 5));
-
-        popover.style.left = `${finalX}px`;
-        popover.style.top = `${finalY}px`;
-        popover.style.visibility = "visible";
-    });
-
-    core.elements.anchorPopover = popover;
-
-    const closePopover = (event) => {
-        if (!popover.contains(event.target) || event.key === "Escape") {
-            destroyAnchorPopover(core);
-            document.removeEventListener("click", closePopover);
-            document.removeEventListener("keydown", closePopover);
-            document.removeEventListener("scroll", closePopover, true);
-        }
-    };
-
-    document.addEventListener("click", closePopover);
-    document.addEventListener("keydown", closePopover);
-    document.addEventListener("scroll", closePopover, true);
-};
-
-
-const editAnchorTag = (event, core, options) => {
-    event.stopPropagation();
-
-    if (!core.elements.selectedElement || core.elements.selectedElement.tagName !== "A") {
-        console.warn("No anchor tag selected for editing.");
-        return;
-    }
-
-    const anchorElement = core.elements.selectedElement;
-    let anchorLink = anchorElement.getAttribute("href") || "";
-    let anchorText = anchorElement.innerText || "";
-
-    const body = document.createElement("div");
-
-    const linkLabel = document.createElement("label");
-    linkLabel.innerText = "Link";
-    linkLabel.style.display = "block";
-    linkLabel.style.paddingLeft = "4px";
-
-    // Link Input
-    const inputLink = document.createElement("input");
-    inputLink.value = anchorLink;
-    inputLink.type = "text";
-    inputLink.placeholder = "Insert link, mail, phone no";
-
-    const textLabel = document.createElement("label");
-    textLabel.innerText = "Link Text";
-    textLabel.style.display = "block";
-    textLabel.style.marginTop = "8px";
-    textLabel.style.paddingLeft = "4px";
-
-    // Text Input
-    const inputText = document.createElement("input");
-    inputText.value = anchorText;
-    inputText.type = "text";
-    inputText.placeholder = "Link text";
-
-    const span = document.createElement("span");
-    span.className = "warning";
-
-    body.append(linkLabel, inputLink, span, textLabel, inputText);
-
-    // Footer (Buttons)
-    const footer = document.createElement("div");
-    const button = document.createElement("button");
-    button.type = "button";
-    button.className = "submit";
-    button.innerText = "Update";
-
-    footer.append(button);
-
-    // Open Modal
-    const modal = openModal(
-        {
-            title: "Edit Link",
-            bodyNode: body,
-            footerNode: footer,
-        },
-        core,
-        options
-    );
-
-    inputLink.focus();
-
-    // Handle Enter Key Submission
-    const onInputKeydown = (event) => {
-        if (event.key === "Enter") {
-            event.preventDefault();
-            button.click();
-        }
-    };
-
-    inputLink.addEventListener("keydown", onInputKeydown);
-    inputText.addEventListener("keydown", onInputKeydown);
-
-    // Button Click Logic
-    button.onclick = () => {
-        const newLink = inputLink.value.trim();
-        const newText = inputText.value.trim();
-
-        if (REGEX.URL.test(newLink)) {
-            anchorElement.setAttribute("href", newLink);
-            anchorElement.innerText = newText || newLink;
-            modal.close();
-        } else {
-            span.innerText = "Invalid URL";
-        }
-    };
-    destroyAnchorPopover(core);
-    core.updateCaretPosition();
-};
-
-const removeAnchorTag = (event, element, core) => {
-    event.stopPropagation();
-    const anchorContent = core.elements.selectedElement.innerHTML;
-    core.elements.selectedElement.outerHTML = anchorContent;
-
-    destroyAnchorPopover(core);
-};
-
-const destroyAnchorPopover = (core) => {
-    if (core.elements.anchorPopover) {
-        core.elements.anchorPopover.style.display = "none"
-        delete core.elements.anchorPopover;
-    }
-
-};
-
-function getCharIndex(root, node, offset) {
-    const range = document.createRange();
-    range.selectNodeContents(root);
-    range.setEnd(node, offset);
-    return range.toString().length;
-}
-
-const getNodeAndOffsetFromIndex = (root, index) => {
-    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, false);
-    let currentNode, currentIndex = 0;
-
-    while ((currentNode = walker.nextNode())) {
-        const len = currentNode.textContent.length;
-        if (currentIndex + len >= index) {
-            return { node: currentNode, offset: index - currentIndex };
-        }
-        currentIndex += len;
-    }
-
-    return null;
-}
-
-const getTightClientRects = (root, range) => {
-    const rects = [];
-    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, false);
-
-    let node;
-    while ((node = walker.nextNode())) {
-        // For each text node, check if it overlaps our range
-        const nodeRange = document.createRange();
-        nodeRange.selectNodeContents(node);
-
-        // If nodeRange and range do not intersect, skip
-        if (
-            range.compareBoundaryPoints(Range.END_TO_START, nodeRange) >= 0 ||
-            range.compareBoundaryPoints(Range.START_TO_END, nodeRange) <= 0
-        ) {
-            continue;
-        }
-
-        // Compute the overlap offsets:
-        const startOffset = node === range.startContainer
-            ? range.startOffset
-            : 0;
-        const endOffset = node === range.endContainer
-            ? range.endOffset
-            : node.textContent.length;
-
-        // Create a sub-range just for that text node’s overlap
-        const subRange = document.createRange();
-        subRange.setStart(node, startOffset);
-        subRange.setEnd(node, endOffset);
-
-        // Gather the tight bounding rect(s) for that fragment
-        Array.from(subRange.getClientRects()).forEach(r => rects.push(r));
-
-        subRange.detach();
-    }
-
-    return rects;
-}
-
-/**
- * Draws highlight overlays behind exactly the text selected in `range`.
- * - `editor` is the contenteditable container (positioned ancestor).
- * - `color` is a CSS color (e.g. "#ff0000")—we’ll add “33” alpha for a translucent fill.
- */
-const highlightTextRange = (editor, range, color, overlayContainer) => {
-    const editorBox = editor.getBoundingClientRect();
-
-    // 1. Get all tight rectangles for only the text portions
-    const tightRects = getTightClientRects(editor, range);
-
-    // 2. Draw a div behind each rect
-    tightRects.forEach(rect => {
-        const highlight = document.createElement('div');
-        highlight.style.position = 'absolute';
-        highlight.style.left = (rect.left + editor.scrollLeft - editorBox.left) + 'px';
-        highlight.style.top = (rect.top + editor.scrollTop - editorBox.top) + 'px';
-        highlight.style.width = rect.width + 'px';
-        highlight.style.height = rect.height + 'px';
-        highlight.style.background = color + '33'; // add alpha for translucency
-        overlayContainer.appendChild(highlight);
-    });
-}
-
-const showRemoteCursor = (core, user, data) => {
-    const { id, color, name } = user
-    const { startIndex, endIndex, cursorIndex, isCollapsed } = data;
-
-    const editor = core.elements.editor;
-    const overlayContainer = core.elements.editorCursor; // Where overlays go
-
-    if (!editor || !overlayContainer) return;
-
-    // Remove old overlay (scoped to the correct container)
-    const oldOverlay = overlayContainer.querySelector(`#remote-overlay-${id}`);
-    if (oldOverlay) oldOverlay.remove();
-
-    const overlay = document.createElement('div');
-    overlay.id = `remote-overlay-${id}`;
-    overlay.style.position = 'absolute';
-    overlay.style.pointerEvents = 'none';
-
-    if (!isCollapsed) {
-        const range = document.createRange();
-
-        const startNodeInfo = getNodeAndOffsetFromIndex(editor, startIndex);
-        const endNodeInfo = getNodeAndOffsetFromIndex(editor, endIndex);
-
-        range.setStart(startNodeInfo.node, startNodeInfo.offset);
-        range.setEnd(endNodeInfo.node, endNodeInfo.offset);
-
-        highlightTextRange(editor, range, color, overlay);
-
-    }
-
-    // Create a caret div to indicate cursor position
-    if (typeof cursorIndex === 'number') {
-        if (editor.innerText.trim() === '') {
-            editor.innerHTML = '<div>\u200B</div>';
-        }
-        const cursorNodeInfo = getNodeAndOffsetFromIndex(editor, cursorIndex);
-        if (!cursorNodeInfo) return;
-
-        const cursorRange = document.createRange();
-        cursorRange.setStart(cursorNodeInfo.node, cursorNodeInfo.offset);
-        cursorRange.collapse(true);
-
-        const cursorRect = cursorRange.getBoundingClientRect();
-        const cursor = document.createElement('div');
-        cursor.style.position = 'absolute';
-        cursor.style.left = cursorRect.left + editor.scrollLeft - editor.getBoundingClientRect().left + 'px';
-        cursor.style.top = cursorRect.top + editor.scrollTop - editor.getBoundingClientRect().top + 'px';
-        cursor.style.width = '2px';
-        cursor.style.height = cursorRect.height + 'px';
-        cursor.style.backgroundColor = color;
-        cursor.style.borderRadius = '1px';
-
-        const label = document.createElement('div')
-        label.style.fontSize = '12px'
-        label.style.color = 'white';
-        label.style.backgroundColor = color;
-        label.style.borderRadius = '4px 4px 0 0'
-        label.style.padding = '0 4px'
-        label.style.position = 'absolute';
-        label.style.whiteSpace = 'nowrap';
-        label.style.left = cursorRect.left + editor.scrollLeft - editor.getBoundingClientRect().left + 'px';
-        label.style.top = cursorRect.top + editor.scrollTop - editor.getBoundingClientRect().top - 6 + 'px';
-        label.innerText = name
-
-        overlay.appendChild(label);
-        overlay.appendChild(cursor);
-    }
-    overlayContainer.appendChild(overlay);
-}
-
-const updateCursorPosition = (core, editorRef) => {
-    const editor = core.elements.editor;
-    const selection = core.elements.iframeWindow.getSelection(); // Use iframe's window
-    if (!selection || !editor || selection.rangeCount === 0) return;
-
-    const range = selection.getRangeAt(0);
-    if (!editor.contains(range.startContainer) || !editor.contains(range.endContainer)) return;
-
-    // Helper to get character index from start of editor to a container+offset
-    const getCharIndex = (container, offset) => {
-        const tempRange = core.elements.iframeWindow.createRange();
-        tempRange.selectNodeContents(editor);
-        tempRange.setEnd(container, offset);
-        return tempRange.toString().length;
-    }
-
-    const start = getCharIndex(range.startContainer, range.startOffset);
-    const end = getCharIndex(range.endContainer, range.endOffset);
-
-    const isBackward = (() => {
-        const position = selection.anchorNode.compareDocumentPosition(selection.focusNode);
-        if (position === 0) {
-            return selection.anchorOffset > selection.focusOffset;
-        }
-        return position === Node.DOCUMENT_POSITION_PRECEDING;
-    })();
-
-    const cursorIndex = isBackward ? start : end;
-
-    core.cursor = {
-        startIndex: start,
-        endIndex: end,
-        cursorIndex,
-        isCollapsed: range.collapsed,
-    };
-    if (editorRef.onLocalCursorChange instanceof Function) editorRef.onLocalCursorChange(core.cursor)
-}
-
-const updateCursorPositionDebounce = asyncDebounce(updateCursorPosition, 200)
-
-const syncRemoteChanges = (core) => {
-    if (!core.state.previousDOM) core.state.previousDOM = core.elements.editor.cloneNode(true);
-
-    const currentDOM = core.elements.editor.cloneNode(true);
-    const diffs = dd.diff(core.state.previousDOM, currentDOM);
-
-    if (diffs.length > 0) {
-        core.onLocalSyncChanges({ type: 'html-patch', diffs });
-        core.state.previousDOM = currentDOM;
-    }
-}
-
-const syncRemoteChangesDebounce = debounce(syncRemoteChanges, 50)
-
-const applyRemoteChanges = (core, diffs) => {
-    const editor = core.elements.editor;
-    const iframeWindow = core.elements.iframeWindow;
-    if (!editor || !diffs?.diffs) return;
-
-    const selection = iframeWindow.getSelection();
-    let saved = null;
-
-    if (selection && selection.rangeCount > 0) {
-        const range = selection.getRangeAt(0);
-        if (editor.contains(range.startContainer) && editor.contains(range.endContainer)) {
-            // Save selection as indexes (pre-change)
-            saved = {
-                start: getCharIndex(editor, range.startContainer, range.startOffset),
-                end: getCharIndex(editor, range.endContainer, range.endOffset),
-            };
-        }
-    }
-
-    requestAnimationFrame(() => {
-        dd.apply(editor, diffs.diffs); // Apply patch
-        core.state.previousDOM = editor.cloneNode(true); // Update snapshot
-
-        if (saved) {
-            const newStart = getNodeAndOffsetFromIndex(editor, saved.start);
-            const newEnd = getNodeAndOffsetFromIndex(editor, saved.end);
-            if (newStart && newEnd) {
-                const newRange = iframeWindow.createRange();
-                newRange.setStart(newStart.node, newStart.offset);
-                newRange.setEnd(newEnd.node, newEnd.offset);
-                const sel = iframeWindow.getSelection();
-                if (sel) {
-                    sel.removeAllRanges();
-                    sel.addRange(newRange);
-                }
-            }
-        }
-    });
-}
-
-const isLinkValid = (link) => {
-    const trimmed = link.trim();
-
-    const isURL = REGEX.URL.test(trimmed);
-    const isMailto = REGEX.MAILTO.test(trimmed);
-    const isTel = REGEX.TEL.test(trimmed);
-
-    return isURL || isMailto || isTel;
-};
-
-const formatLink = (value) => {
-    const trimmed = value.trim();
-    if (REGEX.EMAIL.test(trimmed)) {
-        return 'mailto:' + trimmed;
-    }
-    if (REGEX.MOBILE.test(trimmed)) {
-        return 'tel:' + trimmed;
-    }
-    return trimmed;
-};
-
-const buildTributeValues = (labels = []) => {
-    return labels.flatMap(category => ([
-        { key: category.name, isCategory: true },
-        ...category.fields.map(field => ({
-            key: field.name,
-            value: field.value,
-        }))
-    ]));
-};
-
-function toPx(value, el = document.body) {
-    if (!value) return null;
-    if (typeof value === 'number') return value;
-
-    const tmp = document.createElement('div');
-    tmp.style.width = value;
-    tmp.style.position = 'absolute';
-    tmp.style.visibility = 'hidden';
-    el.appendChild(tmp);
-    const px = tmp.getBoundingClientRect().width;
-    tmp.remove();
-    return px;
-}
-
-const updateHeight = (core, options) => {
-    if (options.autoHeight) {
-        let h = core.elements.editor.scrollHeight;
-        const minH = toPx(options.minHeight, core.elements.iframeContainer.parentElement);
-        const maxH = toPx(options.maxHeight, core.elements.iframeContainer.parentElement);
-        if (minH != null) h = Math.max(h, minH);
-        if (maxH != null) h = Math.min(h, maxH);
-        core.elements.iframeContainer.style.height = h + 'px';
-    }
-}
-
-const isInsideTableCell = (node) => {
-    const element =
-        node?.nodeType === Node.ELEMENT_NODE
-            ? node
-            : node?.parentElement;
-
-    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;
-
-    core.updateCaretPosition();
-    const range = core.state.range;
-    if (!range) return;
-
-    const textNode = range.startContainer;
-    if (textNode.nodeType !== Node.TEXT_NODE) return;
-
-    let text = textNode.nodeValue.replace(/\u00A0/g, ' ');
-    if (textNode.parentNode.closest('li')) return;
-
-    const cell = isInsideTableCell(textNode);
-
-    if ((text + event.key) === '* ' || (text + event.key) === '- ') {
-        event.preventDefault();
-
-        textNode.nodeValue = text.slice(0, -1);
-
-        if (cell) {
-            const ul = document.createElement('ul');
-            const li = document.createElement('li');
-            const text = document.createTextNode('\u00A0');
-
-            li.appendChild(text);
-            ul.appendChild(li);
-
-            cell.innerHTML = '';
-            cell.appendChild(ul);
-
-            const newRange = document.createRange();
-            newRange.setStart(text, 1);
-            newRange.collapse(true);
-
-            core.state.selection.removeAllRanges();
-            core.state.selection.addRange(newRange);
-
-        } else {
-            const newRange = document.createRange();
-            newRange.setStart(textNode, textNode.nodeValue.length);
-            newRange.setEnd(textNode, textNode.nodeValue.length);
-            core.state.selection.removeAllRanges();
-            core.state.selection.addRange(newRange);
-            applyUnorderedList(core)
-        }
-    }
-}
-
-
-const makeOrderedList = (event, core) => {
-    const textNode = core.state.range.startContainer;
-    if (textNode.nodeType === Node.TEXT_NODE) {
-        // Get the text typed so far
-        let text = textNode.nodeValue.replace(/\u00A0/g, ' ');
-        const haveLiNode = textNode.parentNode.closest('li')
-
-        // Detect "1. " pattern
-        if (!haveLiNode && text === "1. ") {
-
-            const cell = isInsideTableCell(textNode);
-            text = text.slice(0, -3);
-            textNode.nodeValue = text;
-            if (cell) {
-                const ol = document.createElement('ol');
-                const li = document.createElement('li');
-                const text = document.createTextNode('\u00A0');
-
-                li.appendChild(text);
-                ol.appendChild(li);
-
-                cell.innerHTML = '';
-                cell.appendChild(ol);
-
-                const newRange = document.createRange();
-                newRange.setStart(text, 1);
-                newRange.collapse(true);
-
-                core.state.selection.removeAllRanges();
-                core.state.selection.addRange(newRange);
-
-            } else {
-                // Update the caret position
-                const newRange = document.createRange();
-                newRange.setStart(textNode, text.length);
-                newRange.setEnd(textNode, text.length);
-                core.state.selection.removeAllRanges();
-                core.state.selection.addRange(newRange);
-                applyOrderList(core)
-            }
-        }
-    }
-
-}
-
-const makeHeading = (event, core) => {
-    if (event.key !== ' ') return;
-    core.updateCaretPosition();
-    const range = core.state.range;
-    const textNode = range.startContainer;
-    if (textNode.nodeType !== Node.TEXT_NODE) return;
-
-    let text = textNode.nodeValue.replace(/\u00A0/g, ' ');
-    const fullText = text + event.key;
-
-    const matches = ['# ', '## ', '### ', '#### ', '##### ', '###### '];
-    if (!matches.includes(fullText)) return;
-
-    event.preventDefault();
-
-    const level = fullText.trim().length;
-    const cell = isInsideTableCell(textNode);
-
-    textNode.nodeValue = text.slice(0, -level);
-
-    if (cell) {
-
-        const h = document.createElement(`h${level}`);
-        h.innerHTML = '&nbsp;';
-
-        cell.innerHTML = '';
-        cell.appendChild(h);
-
-        const newRange = document.createRange();
-        newRange.setStart(h, 0);
-        newRange.collapse(true);
-        core.state.selection.removeAllRanges();
-        core.state.selection.addRange(newRange);
-
-    } else {
-        core.elements.iframeWindow.execCommand(
-            'formatBlock',
-            false,
-            `h${level}`
-        );
-    }
-
-    core.elements.editor.focus();
-    core.updateCaretPosition();
-    changeToolbarValueByName(core, 'format-block', `h${level}`);
-};
-
-
-const makeBlockQuote = (event, core) => {
-    if (event.key !== ' ') return;
-
-    core.updateCaretPosition();
-    const range = core.state.range;
-    const textNode = range.startContainer;
-    if (textNode.nodeType !== Node.TEXT_NODE) return;
-
-    let text = textNode.nodeValue.replace(/\u00A0/g, ' ');
-    if ((text + event.key) !== '> ') return;
-
-    event.preventDefault();
-
-    textNode.nodeValue = text.slice(0, -1);
-
-    const cell = isInsideTableCell(textNode);
-
-    if (cell) {
-
-        const blockquote = document.createElement('blockquote');
-        blockquote.innerHTML = '&nbsp;';
-
-        cell.innerHTML = '';
-        cell.appendChild(blockquote);
-        const newRange = document.createRange();
-        newRange.setStart(blockquote, 0);
-        newRange.collapse(true);
-        core.state.selection.removeAllRanges();
-        core.state.selection.addRange(newRange);
-    } else {
-        core.elements.iframeWindow.execCommand(
-            'formatBlock',
-            false,
-            'blockquote'
-        );
-    }
-
-    core.elements.editor.focus();
-    core.updateCaretPosition();
-};
-
-
-const makeStrikethrough = (event, core) => {
-    if (event.key !== '~') return;
-    core.updateCaretPosition();
-    if (!core.state.range) return;
-
-    const range = core.state.range;
-    const textNode = range.startContainer;
-    if (textNode.nodeType !== Node.TEXT_NODE) return;
-
-    const text = textNode.nodeValue.replace(/\u00A0/g, ' ');
-    const offset = range.startOffset;
-    const textBeforeCaret = text.slice(0, offset) + event.key;
-    const match = textBeforeCaret.match(/~~([^~]+)~~$/);
-    if (!match) return;
-
-    event.preventDefault();
-
-    const content = match[1];
-    const startIndex = match.index;
-    const endIndex = startIndex + match[0].length - 1;
-
-    // Select ~~text~~
-    const replaceRange = document.createRange();
-    replaceRange.setStart(textNode, startIndex);
-    replaceRange.setEnd(textNode, endIndex);
-
-    replaceRange.deleteContents();
-
-    const strike = document.createElement('strike');
-    strike.textContent = content;
-    replaceRange.insertNode(strike);
-
-    const zeroWidthSpace = document.createTextNode('\u200B');
-    if (strike.nextSibling) {
-        strike.parentNode.insertBefore(zeroWidthSpace, strike.nextSibling);
-    } else {
-        strike.parentNode.appendChild(zeroWidthSpace);
-    }
-
-    const newRange = document.createRange();
-    newRange.setStart(zeroWidthSpace, 1);
-    newRange.setEnd(zeroWidthSpace, 1);
-
-    const selection = core.state.selection;
-    selection.removeAllRanges();
-    selection.addRange(newRange);
-
-    core.updateCaretPosition();
-
-    changeToolbarStateByName(core, 'inactive', ['strike']);
-}
-
-const makeCodeBlock = (event, core) => {
-    if (event.key !== '`') return;
-    core.updateCaretPosition();
-    if (!core.state.range) return;
-
-    const range = core.state.range;
-    const textNode = range.startContainer;
-    if (textNode.nodeType !== Node.TEXT_NODE) return;
-
-    const text = textNode.nodeValue.replace(/\u00A0/g, ' ');
-    const offset = range.startOffset;
-    const textBeforeCaret = text.slice(0, offset) + event.key;
-
-    const match = textBeforeCaret.match(/`([^`]+)`$/);
-    if (!match) return;
-
-    event.preventDefault();
-
-    const content = match[1];
-    const startIndex = match.index;
-    const endIndex = startIndex + match[0].length - 1;
-
-    // Select ~~text~~
-    const replaceRange = document.createRange();
-    replaceRange.setStart(textNode, startIndex);
-    replaceRange.setEnd(textNode, endIndex);
-
-    replaceRange.deleteContents();
-
-    const code = document.createElement('code');
-    code.textContent = content;
-    replaceRange.insertNode(code);
-
-    const zeroWidthSpace = document.createTextNode('\u200B');
-    if (code.nextSibling) {
-        code.parentNode.insertBefore(zeroWidthSpace, code.nextSibling);
-    } else {
-        code.parentNode.appendChild(zeroWidthSpace);
-    }
-
-    const newRange = document.createRange();
-    newRange.setStart(zeroWidthSpace, 1);
-    newRange.setEnd(zeroWidthSpace, 1);
-
-    const selection = core.state.selection;
-    selection.removeAllRanges();
-    selection.addRange(newRange);
-
-    core.updateCaretPosition();
-}
-
-const getListLevel = (li) => {
-    let level = 0;
-    let parent = li.parentElement;
-    const tagName = parent.tagName;
-
-    while (parent && parent.tagName === tagName) {
-        level++;
-        parent = parent.parentElement?.closest(tagName);
-    }
-
-    return level;
-};
-
-const applyListStyle = (list, level) => {
-    let type;
-    if (list.tagName === 'OL') {
-        type = LIST_STYLES_BY_LEVEL[(level - 1) % LIST_STYLES_BY_LEVEL.length];
-    } else if (list.tagName === 'UL') {
-        type = UNORDERED_LIST_STYLES_BY_LEVEL[(level - 1) % UNORDERED_LIST_STYLES_BY_LEVEL.length];
-    }
-    if (type) list.setAttribute('type', type);
-};
-
-const indentListItem = (li, core) => {
-    const prevLi = li.previousElementSibling;
-    if (!prevLi) return;
-
-    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();
-    range.selectNodeContents(li);
-    range.collapse(true);
-    selection.removeAllRanges();
-    selection.addRange(range);
-    core.elements.editor.focus();
-    core.updateCaretPosition();
-    if (parentTag === 'OL' || parentTag === 'UL') {
-        const level = getListLevel(li);
-        applyListStyle(subList, level);
-    }
-};
-
-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(true);
-    selection.removeAllRanges();
-    selection.addRange(range);
-    core.elements.editor.focus();
-    core.updateCaretPosition();
-
-
-    if (parentOl.children.length === 0) {
-        parentOl.remove();
-    }
-
-    if (li.parentElement.tagName === 'OL' || li.parentElement.tagName === 'UL') {
-        const level = getListLevel(li);
-        applyListStyle(li.parentElement, level);
-    }
-};
-
-const isEmptyLi = (li) => {
-    const text = li.textContent.replace(/\u200B/g, '').trim();
-    const hasOnlySublist = li.children.length === 1 && li.querySelector('ul, ol');
-    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) => {
-    if (event.key !== 'Tab') return;
-
-    const selection = core.elements.iframeWindow.getSelection();
-    if (!selection.rangeCount) return;
-
-    const range = selection.getRangeAt(0);
-    const isAtStart = range.startOffset === 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 selectedLis = [];
-
-    allLis.forEach(li => {
-        if (range.intersectsNode(li)) {
-            selectedLis.push(li);
-        }
-    });
-
-    if (!selectedLis.length) return;
-
-    if (!event.shiftKey) {
-        const hasContent = selectedLis.some(li => !isEmptyLi(li));
-        if (hasContent && !isAtStart) return;
-    }
-
-    event.preventDefault();
-
-    selectedLis.forEach(li => {
-        if (event.shiftKey) {
-            outdentListItem(li, core);
-        } else {
-            indentListItem(li, core);
-        }
-    });
-};
-
-const transformCase = (text, type) => {
-    if (type === 'upper_case') return text.toUpperCase();
-    if (type === 'lower_case') return text.toLowerCase();
-    if (type === 'title_case') return text.toLowerCase().replace(/\b\w/g, s => s.toUpperCase());
-    return text;
-};
-
-const transformTextStyle = (core, type) => {
-    const range = core.state.range;
-    if (!range) return;
-    const startContainer = range.startContainer;
-    const startOffset = range.startOffset;
-    const endContainer = range.endContainer;
-    let endOffset = range.endOffset;
-
-    const processTextNode = (node, start, end) => {
-        const text = node.nodeValue;
-        const transformedText = transformCase(text.slice(start, end), type);
-        node.nodeValue = text.slice(0, start) + transformedText + text.slice(end);
-        if (node === endContainer) endOffset = start + transformedText.length;
-    };
-
-    if (range.commonAncestorContainer.nodeType === Node.TEXT_NODE) {
-        processTextNode(range.commonAncestorContainer, range.startOffset, range.endOffset);
-    } else {
-        const iterator = core.elements.iframeWindow.createNodeIterator(
-            range.commonAncestorContainer,
-            NodeFilter.SHOW_TEXT,
-            {
-                acceptNode: (node) => {
-                    return range.intersectsNode(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
-                }
-            }
-        );
-
-        const nodes = [];
-        let node;
-        while ((node = iterator.nextNode())) {
-            nodes.push(node);
-        }
-
-        nodes.forEach(node => {
-            let start = 0;
-            let end = node.nodeValue.length;
-
-            if (node === range.startContainer) start = range.startOffset;
-            if (node === range.endContainer) end = range.endOffset;
-
-            processTextNode(node, start, end);
-        });
-    }
-
-    const newRange = core.elements.iframeWindow.createRange();
-    newRange.setStart(startContainer, startOffset);
-    newRange.setEnd(endContainer, endOffset);
-    const selection = core.elements.iframeWindow.getSelection();
-    selection.removeAllRanges();
-    selection.addRange(newRange);
-}
-
-const assignIdToHeading = (heading) => {
-    if (!heading.dataset.leksyHeadingId) heading.dataset.leksyHeadingId = uuidv4()
-    return heading.dataset.leksyHeadingId
-};
-
-const navigateToHeading = (core, headingId) => {
-    if (!headingId) return;
-    const heading = core.elements.iframeWindow.querySelector(`[data-leksy-heading-id="${headingId}"]`);
-    if (!heading) return;
-    heading.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center'
-    });
-    const range = document.createRange();
-    range.selectNodeContents(heading);
-    range.collapse(true);
-
-    const sel = core.elements.iframeWindow.getSelection();
-    sel.removeAllRanges();
-    sel.addRange(range);
-
-    core.elements.editor.focus();
-    core.updateCaretPosition();
-}
-
-const insertTOC = (core) => {
-    const editor = core.elements.editor;
-    const headings = editor.querySelectorAll('h1, h2, h3, h4, h5, h6');
-
-    if (!headings.length) return;
-
-    const tocContainer = document.createElement('div');
-    tocContainer.contentEditable = 'false';
-    tocContainer.dataset.leksyElement = 'toc'
-
-    tocContainer.style.border = '1px solid gray';
-    tocContainer.style.display = 'inline-block';
-    tocContainer.style.width = '100%';
-    tocContainer.style.boxSizing = 'border-box';
-    tocContainer.style.borderRadius = '4px';
-
-    const title = document.createElement('div');
-    title.innerText = 'Table of Contents';
-    title.style.fontWeight = 'bold';
-    title.style.marginBottom = '8px';
-    title.style.borderBottom = '1px solid gray';
-    title.style.padding = '8px 12px';
-
-    tocContainer.appendChild(title);
-
-    const ul = document.createElement('ul');
-    ul.style.listStyle = 'none';
-    ul.style.padding = '8px 12px';
-    ul.style.margin = '0';
-
-    headings.forEach((heading) => {
-        const headingId = assignIdToHeading(heading)
-        const level = Number(heading.tagName[1]);
-
-        const li = document.createElement('li');
-        li.style.marginBottom = '4px';
-        li.style.marginLeft = `${(level - 1) * 15}px`;
-        li.style.color = 'var(--link-color)';
-        li.style.cursor = 'pointer';
-        li.textContent = heading.textContent;
-        li.dataset.leksyTocHeadingId = headingId
-
-        ul.appendChild(li);
-    });
-
-    tocContainer.appendChild(ul);
-
-    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();
-};
-
-function insertOutlinesItems(core, options, tab, outlineContainer) {
-    if (!options.showTabs) return
-    if (!tab.showOutlines) return
-    if (tab.tabId !== core.state.currentTabId) return
-
-    outlineContainer.innerHTML = '';
-    const editor = core.elements.editor;
-    const headings = editor.querySelectorAll('h1, h2, h3, h4, h5, h6');
-
-    headings.forEach((heading) => {
-        if (!heading.textContent?.trim()) return
-        const level = Number(heading.tagName[1]);
-
-        const item = document.createElement('div');
-        item.className = 'outline-item';
-        item.textContent = heading.textContent;
-        item.style.paddingLeft = `${(level - 1) * 12 + 8}px`;
-
-        item.onclick = () => {
-            outlineContainer.querySelectorAll('.outline-item').forEach(el => {
-                el.classList.remove('active');
-            });
-            item.classList.add('active');
-
-            heading.scrollIntoView({ behavior: 'smooth', block: 'center' });
-
-            const range = document.createRange();
-            range.selectNodeContents(heading);
-            range.collapse(true);
-
-            const sel = core.elements.iframeWindow.getSelection();
-            sel.removeAllRanges();
-            sel.addRange(range);
-
-            core.elements.editor.focus();
-            core.updateCaretPosition();
-        };
-
-        outlineContainer.appendChild(item);
-    });
-}
-
-function highlightActiveOutline(core, options, outlineContainer) {
-    if (!options.showTabs) return
-    if (!outlineContainer) {
-        outlineContainer = core.elements.tabs[core.state.currentTabId].querySelector('.outline-items')
-        if (!outlineContainer) return;
-    }
-    const range = core.state.range;
-    const node = range?.startContainer;
-    if (!node) return;
-
-    const items = outlineContainer.querySelectorAll('.outline-item');
-    const editor = core.elements.editor;
-    const headings = editor.querySelectorAll('h1, h2, h3, h4, h5, h6');
-
-    items.forEach(el => el.classList.remove('active'));
-
-    headings.forEach((heading, index) => {
-        if (heading.contains(node)) {
-            items[index]?.classList.add('active');
-        }
-    });
-}
-
-const updateOutlineItems = debounce((core, options) => {
-    if (!options.showTabs) return
-    const tab = findTab(core.state.tabs, core.state.currentTabId)
-    if (!tab) return;
-    const outlineContainer = core.elements.tabs[tab.tabId].querySelector('.outline-items')
-    if (!outlineContainer) return;
-    insertOutlinesItems(core, options, tab, outlineContainer)
-    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 searchPattern = searchText;
-
-        if (!useRegex) {
-            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';
-            regex = new RegExp(searchPattern, flags);
-        } catch (error) {
-            span.innerText = "Invalid regular expression";
-            return;
-        }
-
-        // ✅ Collect matches (node-based + global index)
-        const walker = core.elements.iframeWindow.createTreeWalker(
-            editor,
-            NodeFilter.SHOW_TEXT,
-            null
-        );
-
-        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
-                });
-            }
-
-            globalIndex += text.length;
-        }
-
-        if (!matches.length) {
-            countSpan.innerText = "0 of 0";
-            return;
-        }
-
-        // ✅ Get current cursor global position
-        let currentGlobal = 0;
-
-        if (selection.rangeCount > 0) {
-            const range = selection.getRangeAt(0);
-
-            const walker2 = core.elements.iframeWindow.createTreeWalker(
-                editor,
-                NodeFilter.SHOW_TEXT,
-                null
-            );
-
-            let n, count = 0;
-
-            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 {
-            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 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) {
-            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 = () => {
-        const searchText = findInput.value;
-        const replaceText = replaceInput.value;
-        const matchCase = matchCaseCheckbox.checked;
-        const useRegex = useRegexCheckbox.checked;
-        const wholeWord = wholeWordCheckbox.checked;
-
-        if (!searchText) return;
-
-        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 ? 'g' : 'gi');
-        } catch {
-            return;
-        }
-
-        // 🔹 Collect matches (same as find)
-        const walker = core.elements.iframeWindow.createTreeWalker(
-            editor,
-            NodeFilter.SHOW_TEXT,
-            null
-        );
-
-        const matches = [];
-        let node;
-
-        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]
-                });
-            }
-        }
-
-        // 🔹 Replace in reverse (important)
-        let count = 0;
-
-        for (let i = matches.length - 1; i >= 0; i--) {
-            const m = matches[i];
-            const text = m.node.nodeValue;
-
-            const newText = m.original.replace(
-                new RegExp(pattern, matchCase ? '' : 'i'),
-                replaceText
-            );
-
-            m.node.nodeValue =
-                text.slice(0, m.start) +
-                newText +
-                text.slice(m.end);
-
-            count++;
-        }
-
-        span.innerText = `Replaced ${count} occurrences.`;
-
-        find('next');
-    };
-
-    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 || !core.elements.editor.contains(li)) return;
-
-    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 parentText = clone.textContent.replace(/\u200B/g, '').trim();
-
-    const fragment = document.createDocumentFragment();
-    const children = Array.from(nestedList.children);
-
-    children.forEach(child => fragment.appendChild(child));
-
-    // 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);
-    }
-    // Case 2: first list item
-    else {
-        const span = document.createElement('span');
-        span.textContent = parentText || '';
-
-        parentList.parentElement.insertBefore(span, parentList);
-
-        if (children.length > 0) {
-            parentList.insertBefore(fragment, li);
-        }
-
-        li.remove();
-
-        const newRange = document.createRange();
-        newRange.selectNodeContents(span);
-        newRange.collapse(true);
-
-        selection.removeAllRanges();
-        selection.addRange(newRange);
-    }
-
-    core.updateCaretPosition();
-};
-
-export {
-    cleanHTML,
-    debounce,
-    makeToolbarButton,
-    makeToolbarDropdown,
-    openModal,
-    initImageResizer,
-    destroyImageResizer,
-    changeAllToolbarState,
-    changeToolbarValueByName,
-    makeToolbarSelect,
-    changeToolbarStateByName,
-    changeToolbarHtmlByName,
-    makeToolbarColor,
-    initTableEditPlugin,
-    destroyTableEditPlugin,
-    updateTableResizerPosition,
-    rgbToHex,
-    extractSocialMediaId,
-    constructEmbedUrl,
-    showAnchorPopover,
-    destroyAnchorPopover,
-    showRemoteCursor,
-    syncRemoteChangesDebounce,
-    applyRemoteChanges,
-    updateCursorPositionDebounce,
-    isLinkValid,
-    formatLink,
-    buildTributeValues,
-    toPx,
-    updateHeight,
-    getTableGrid,
-    getCellPosition,
-    applyFormatBlockInListItem,
-    normalizeHeadingWrappedLists,
-    makeUnorderedList,
-    makeOrderedList,
-    showTooltip,
-    makeHeading,
-    makeBlockQuote,
-    makeStrikethrough,
-    makeCodeBlock,
-    makeSublist,
-    transformTextStyle,
-    makeToolbarButtonSelect,
-    insertTOC,
-    insertOutlinesItems,
-    navigateToHeading,
-    updateOutlineItems,
-    highlightActiveOutline,
-    findAndReplace,
-    handleBackspaceInList,
-    trackListSelectionDeletion,
-    cleanupListSelectionDeletion,
-}