leksy-editor 1.0.0

package/utilities.js

@@ -0,0 +1,1798 @@
+import { CLASSES, FONT_SIZES, FONTS, FORMATS, GIPHY_POWERED_IMAGE, REGEX, RESIZER_PLUGINS, SOCIAL_MEDIA_BASEURLS, SOCIAL_MEDIA_PATTERNS, SVG, TABLE_PLUGINS } from "./constant";
+
+const traverseAndClean = (element) => {
+    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);
+                    }
+                }
+                attributesToRemove.forEach(attr => node.removeAttribute(attr));
+
+                // Process child nodes
+                traverseAndClean(node);
+            }
+        }
+    }
+}
+
+const cleanHTML = (html) => {
+    // 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);
+
+    // 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";
+    }
+}
+
+const makeToolbarButton = (_plugin, options, core) => {
+    const pluginButton = document.createElement('button');
+    pluginButton.type = "button"
+    pluginButton.className = `${options.classPrefix}${CLASSES.TOOLBAR_ITEM}`
+
+    pluginButton.setAttribute('data-title', _plugin.title)
+    pluginButton.setAttribute('data-type', 'button')
+    pluginButton.onclick = (e) => {
+        e.preventDefault();
+        _plugin.click(e, core, options);
+    };
+
+    const pluginIcon = document.createElement('div');
+    pluginIcon.innerHTML = _plugin.icon;
+    pluginButton.appendChild(pluginIcon)
+    return pluginButton
+}
+
+const makeToolbarColor = (_plugin, options, core) => {
+    const pluginContainer = document.createElement('div');
+    pluginContainer.className = `${options.classPrefix}${CLASSES.TOOLBAR_ITEM} ${CLASSES.TOOLBAR_ITEM_COLOR}`
+    pluginContainer.setAttribute('data-title', _plugin.title)
+    pluginContainer.setAttribute('data-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 = _plugin.icon;
+    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
+                core.insertNode(img)
+                core.updateCaretPosition()
+                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
+                    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', _plugin.title)
+
+    const pluginIcon = document.createElement('div');
+    pluginIcon.innerHTML = _plugin.icon;
+    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;
+        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 })
+                    dropdownContent.style.display = 'none'
+                });
+
+                table.appendChild(cell);
+            }
+        }
+        dropdownContent.appendChild(table)
+    }
+
+    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'
+        if (dropdownContent.getBoundingClientRect().right > window.innerWidth) dropdownContent.style.right = '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.setAttribute('data-type', 'select')
+
+    const dropdownButton = document.createElement('button');
+    dropdownButton.type = "button"
+    dropdownButton.className = `${options.classPrefix}${CLASSES.TOOLBAR_ITEM} ${CLASSES.TOOLBAR_ITEM_SELECT}`
+    dropdownButton.setAttribute('data-title', _plugin.title)
+
+    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 = _plugin.icon;
+    const arrow = document.createElement('span');
+    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'
+        if (dropdownContent.getBoundingClientRect().right > window.innerWidth) dropdownContent.style.right = '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'
+            if (popoverContent.getBoundingClientRect().right > window.innerWidth) popoverContent.style.right = '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') {
+        const pluginSet = document.createElement('div')
+        pluginSet.className = `${options.classPrefix}${CLASSES.RESIZE_ITEMS} `
+        TABLE_PLUGINS.forEach(plugin => {
+            const pluginButton = plugin.event === 'border-color'
+                ? document.createElement('input')
+                : document.createElement('button');
+            if (plugin.event === 'border-color') {
+                pluginButton.type = "color"
+                pluginButton.style.width = '30px'
+                pluginButton.style.padding = '4px'
+                pluginButton.oninput = (e) => {
+                    updateTable(plugin.event, e.target.value);
+                }
+            } else
+                pluginButton.type = "button"
+            pluginButton.className = `${options.classPrefix}${CLASSES.RESIZE_ITEM} `
+            pluginButton.setAttribute('data-title', plugin.title)
+            pluginButton.setAttribute('data-type', 'button')
+
+            if (plugin.event !== 'border-color') {
+                pluginButton.onclick = (e) => {
+                    e.preventDefault();
+                    updateTable(plugin.event);
+                };
+
+                const pluginIcon = document.createElement('div');
+                pluginIcon.innerHTML = plugin.icon;
+                pluginButton.appendChild(pluginIcon)
+            }
+            pluginSet.appendChild(pluginButton)
+        })
+        popoverContent.appendChild(pluginSet)
+
+        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'
+            if (popoverContent.getBoundingClientRect().right > window.innerWidth) popoverContent.style.right = '10px'
+            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 initImageResizer = (type, image, options, core) => {
+    destroyImageResizer(options, core)
+    changeAllToolbarState(core, 'disabled', ['link'])
+    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', () => {
+            createPreviewModal(image.src, core, options); // Open custom modal with image preview
+        });
+
+        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 'revert':
+                image.style.width = 'unset';
+                image.style.height = 'unset';
+                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 = (imageSrc, core, options) => {
+    // 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} `
+
+    // Image element
+    const image = document.createElement('img');
+    image.src = imageSrc;
+    image.alt = 'Preview Image';
+
+    modalBody.appendChild(image);
+    modalContent.append(closeButton, modalBody);
+    overlay.appendChild(modalContent);
+
+    // Append to body
+    document.body.appendChild(overlay);
+
+    overlay.addEventListener('click', (event) => {
+        if (event.target !== image) {
+            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) => {
+    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 initTableEditPlugin = (td, options, core) => {
+    destroyTableEditPlugin(options, core)
+    const table = td.closest('table');
+    if (!table) return
+
+    const tableClientRect = table.getBoundingClientRect();
+    let firstX, firstY;
+
+    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-cells-horizontal': {
+                const nextCell = td.nextElementSibling;
+                if (nextCell) {
+                    // Check if next cell has data and merge accordingly
+                    if (nextCell.innerHTML.trim() !== '') {
+                        td.innerHTML += '<br/>' + nextCell.innerHTML;  // Add content of next cell with line break
+                    }
+                    // Adjust colSpan to include the next cell
+                    td.colSpan = (td.colSpan || 1) + (nextCell.colSpan || 1);  // Merge colSpan correctly
+                    nextCell.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 'merge-cells-vertical': {
+                const nextRow = table.rows[rowIndex + 1];
+                if (nextRow) {
+                    const nextCell = nextRow.cells[cellIndex];
+                    if (nextCell) {
+                        // Check if next cell has data and merge accordingly
+                        if (nextCell.innerHTML.trim() !== '') {
+                            td.innerHTML += '<br/>' + nextCell.innerHTML;  // Add content of next cell with line break
+                        }
+                        // Adjust rowSpan to include the next row's cell
+                        td.rowSpan = (td.rowSpan || 1) + (nextCell.rowSpan || 1);  // Merge rowSpan correctly
+                        nextCell.remove();
+                    }
+                    // Check if the row is now empty and remove it if it is
+                    const isRowEmpty = Array.from(nextRow.cells).every(cell => cell.innerHTML.trim() === '');
+                    if (isRowEmpty) {
+                        nextRow.remove();
+                    }
+                }
+                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;
+            }
+        }
+    }
+
+    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.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')
+            }
+            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')
+            }
+            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')
+            }
+            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')
+            }
+            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;
+
+    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`;
+        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 = `${y + 5}px`;
+    popover.style.left = `${x + 5}px`;
+    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";
+
+    // Create clickable link
+    let link = document.createElement("a");
+    link.href = href;
+    link.target = "_blank";
+    link.textContent = href;
+    link.style.textDecoration = "none";
+    link.style.color = "#007bff";
+    link.style.padding = "5px";
+    link.style.overflow = "hidden";
+    link.style.textOverflow = "ellipsis";
+    link.style.webkitBoxOrient = "vertical";
+    link.style.webkitLineClamp = "1"; // Limit to 2 lines
+    link.style.maxWidth = "250px";
+    link.style.wordBreak = "break-word"; // Ensure long URLs wrap properly
+
+    // 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);
+
+    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(link, copyButton, editButton, deleteButton);
+
+    let parent = core.elements.iframeWindow.body; // Change this if needed
+    parent.appendChild(popover);
+
+    requestAnimationFrame(() => {
+        let popoverRect = popover.getBoundingClientRect();
+        let parentRect = parent.getBoundingClientRect(); // Get parent size
+
+        let finalX = x + 5;
+        let finalY = y + 5;
+
+        let spaceRight = parentRect.right - (x + popoverRect.width);
+        let spaceLeft = x - popoverRect.left - popoverRect.width;
+        let spaceBottom = parentRect.bottom - (y + popoverRect.height);
+        let spaceTop = y - parentRect.top - popoverRect.height;
+
+        // Prefer showing below if there's space
+        if (spaceBottom > 0) {
+            finalY = y + 5;
+        }
+        // Otherwise, show above
+        else if (spaceTop > 0) {
+            finalY = y - popoverRect.height - 5;
+        }
+
+        // Prefer showing on the right if there's space
+        if (spaceRight > 0) {
+            finalX = x + 5;
+        }
+        // Otherwise, show on the left
+        else if (spaceLeft > 0) {
+            finalX = x - popoverRect.width - 5;
+        }
+
+        // Ensure the popover stays within the parent’s boundaries
+        finalX = Math.max(parentRect.left + 10, Math.min(finalX, parentRect.right - popoverRect.width - 10));
+        finalY = Math.max(parentRect.top + 10, Math.min(finalY, parentRect.bottom - popoverRect.height - 10));
+
+        // Apply final position
+        popover.style.left = `${finalX - parentRect.left}px`;
+        popover.style.top = `${finalY - parentRect.top}px`;
+        popover.style.visibility = "visible"; // Now show the popover
+    });
+
+    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");
+
+    // Link Input
+    const inputLink = document.createElement("input");
+    inputLink.value = anchorLink;
+    inputLink.type = "text";
+    inputLink.placeholder = "Insert the link";
+
+    // Text Input
+    const inputText = document.createElement("input");
+    inputText.value = anchorText;
+    inputText.type = "text";
+    inputText.style.marginTop = "8px";
+    inputText.placeholder = "Link text";
+
+    const span = document.createElement("span");
+    span.className = "warning";
+
+    body.append(inputLink, inputText, span);
+
+    // 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;
+    }
+
+};
+
+export {
+    cleanHTML,
+    debounce,
+    makeToolbarButton,
+    makeToolbarDropdown,
+    openModal,
+    initImageResizer,
+    destroyImageResizer,
+    changeAllToolbarState,
+    changeToolbarValueByName,
+    makeToolbarSelect,
+    changeToolbarStateByName,
+    changeToolbarHtmlByName,
+    makeToolbarColor,
+    initTableEditPlugin,
+    destroyTableEditPlugin,
+    updateTableResizerPosition,
+    rgbToHex,
+    extractSocialMediaId,
+    constructEmbedUrl,
+    showAnchorPopover,
+    destroyAnchorPopover,
+}