leksy-editor 2.6.0 → 3.0.0

package/index.js

@@ -1,1028 +0,0 @@
-import './style.css'
-import { CLASSES, CSS, CSS_VARIABLES, ERRORS, REGEX, SVG } from "./constant"
-import PLUGINS, { applyTextFormat } from './plugin';
-import { showAnchorPopover, changeAllToolbarState, changeToolbarStateByName, changeToolbarValueByName, cleanHTML, debounce, destroyImageResizer, destroyTableEditPlugin, initImageResizer, initTableEditPlugin, makeToolbarButton, makeToolbarColor, makeToolbarDropdown, makeToolbarSelect, rgbToHex, updateTableResizerPosition, destroyAnchorPopover, changeToolbarHtmlByName, showRemoteCursor, syncRemoteChangesDebounce, applyRemoteChanges, updateCursorPositionDebounce, buildTributeValues, updateHeight, getTableGrid, getCellPosition, makeUnorderedList, makeOrderedList, makeHeading, makeBlockQuote, makeStrikethrough, makeCodeBlock, makeSublist, showTooltip, makeToolbarButtonSelect, navigateToHeading, updateOutlineItems, highlightActiveOutline, findAndReplace, handleBackspaceInList, trackListSelectionDeletion, cleanupListSelectionDeletion } from './utilities';
-import { initTabs, findTab, renderTabs, prepareTabs } from './tab';
-import { v4 as uuidv4 } from 'uuid';
-
-class LeksyEditor {
-
-    /**
-     * @typedef {Object} EditorOptions
-     * @property {String} classPrefix
-     * @property {String} placeholder
-     * @property {Array<String>} plugins
-     * @property {Array<Object>} labels
-     * @property {Array<Object>} customPlugins
-     * @property {Boolean} spellcheck
-     * @property {Boolean} closePluginOnClick
-     * @property {Array<Object>} value
-     * @property {Boolean} hideNavigation
-     * @property {String} giphyApiKey
-     * @property {String} pexelsApiKey
-     * @property {String} tenorApiKey
-     * @property {Object} cssVariables
-     * @property {Boolean} disablePastedColorStyles
-     * @property {Boolean} removeColorsWhilePasting
-     * @property {Boolean} autoHeight
-     * @property {String} height
-     * @property {String} maxHeight
-     * @property {String} minHeight
-     * @property {String} iframeStyle
-     * @property {Boolean} disabled
-     * @property {Function} onFullScreen
-     * @property {Boolean} showTabs
-     * @property {Boolean} enableFindAndReplace
-     * @property {Array<Object>} customTooltip
-     * @property {Array<Object>} customIcon
-     */
-    /**
-     * 
-     * @param {HTMLElement} baseElement 
-     * @param {EditorOptions} options 
-     */
-    static create(baseElement, options = {}) {
-        /******************************* validations ******************************* */
-        if (!(baseElement instanceof HTMLElement)) throw Error(ERRORS.INVALID_ELEMENT);
-
-        /****************************** for development **************************** */
-        baseElement.innerHTML = ''
-
-        /******************************* initializing ****************************** */
-        if (!options.classPrefix) options.classPrefix = CLASSES.PREFIX
-        if (!options.placeholder) options.placeholder = ''
-        if (options.closePluginOnClick !== false) options.closePluginOnClick = true
-
-        // Initialize Tabs Data
-        let initialTabs = prepareTabs(options.value)
-        const initialCurrentTabId = initialTabs[0].tabId;
-
-        /**
-         * For Internal Use
-         */
-        const core = {
-            elements: {
-                base: baseElement,
-                toolbar: {},
-                tabsContainer: null,
-                tabs: {},
-            },
-            state: { isCodeViewOpen: false, page: 1, totalPages: null, next: null, tribute: null, tabs: initialTabs, currentTabId: initialCurrentTabId },
-            html: initialTabs[0].content,
-            cursor: {
-                startIndex: 0,
-                endIndex: 0,
-                cursorIndex: 0,
-                isCollapsed: false,
-            },
-            history: {
-                tabs: {
-                    [initialCurrentTabId]: {
-                        stack: [],
-                        currentIndex: -1 // Keeps track of the current position in the history stack
-                    }
-                },
-                push: debounce(() => { core.history.saveHistory() }, 300),
-                saveHistory: () => {
-                    // Save the caret position using the selection range
-                    const selection = core.elements.iframeWindow.getSelection();
-                    let caretOffset = null;
-
-                    if (selection?.rangeCount > 0) {
-                        const range = selection.getRangeAt(0);
-                        const preCaretRange = range.cloneRange();
-                        preCaretRange.selectNodeContents(core.elements.editor);
-                        preCaretRange.setEnd(range.endContainer, range.endOffset);
-                        caretOffset = preCaretRange.toString().length;  // Save the character offset of the caret
-                    }
-                    const html = core.elements.editor.innerHTML;
-
-                    const currentTabHistory = core.history.tabs[core.state.currentTabId] || { stack: [], currentIndex: -1 };
-                    if (!core.history.tabs[core.state.currentTabId]) core.history.tabs[core.state.currentTabId] = currentTabHistory;
-
-                    if (currentTabHistory.stack[currentTabHistory.currentIndex]?.html !== html) {
-                        // If new state is pushed, remove redo states if present
-                        currentTabHistory.stack = currentTabHistory.stack.slice(0, currentTabHistory.currentIndex + 1);
-                        currentTabHistory.stack.push({ caretOffset, html });
-                        currentTabHistory.currentIndex++;
-                    }
-                },
-                undo: () => {
-                    const currentTabHistory = core.history.tabs[core.state.currentTabId];
-                    if (!currentTabHistory) return;
-
-                    if (currentTabHistory.currentIndex > 0) {
-                        currentTabHistory.currentIndex--;
-
-                        const { html, caretOffset } = currentTabHistory.stack[currentTabHistory.currentIndex];
-                        core.elements.editor.innerHTML = html;
-                        core.history.restoreCaretPosition(caretOffset);
-                    }
-                },
-                redo: () => {
-                    const currentTabHistory = core.history.tabs[core.state.currentTabId];
-                    if (!currentTabHistory) return;
-
-                    if (currentTabHistory.currentIndex < currentTabHistory.stack.length - 1) {
-                        currentTabHistory.currentIndex++;
-
-                        const { html, caretOffset } = currentTabHistory.stack[currentTabHistory.currentIndex];
-                        core.elements.editor.innerHTML = html;
-                        core.history.restoreCaretPosition(caretOffset);
-                    }
-                },
-                restoreCaretPosition: (caretOffset) => {
-                    const selection = core.elements.iframeWindow.getSelection();
-                    const range = document.createRange();
-                    let charCount = 0;
-
-                    function setCaret(node) {
-                        if (node.nodeType === 3) { // Text node
-                            const length = node.length;
-                            if (charCount + length >= caretOffset) {
-                                range.setStart(node, caretOffset - charCount);
-                                range.setEnd(node, caretOffset - charCount);
-                                selection.removeAllRanges();
-                                selection.addRange(range);
-                                return true;
-                            } else {
-                                charCount += length;
-                            }
-                        } else if (node.nodeType === 1) { // Element node
-                            for (const element of node.childNodes) {
-                                if (setCaret(element)) {
-                                    return true;
-                                }
-                            }
-                        }
-                        return false;
-                    }
-                    setCaret(core.elements.editor);
-                }
-            },
-            onChange: (html = core.elements.editor.innerHTML) => {
-                updateHeight(core, options)
-                updateTableResizerPosition(options, core)
-                if (html === '<br>' || html === '<div><br></div>') html = ''
-                core.html = html;
-                // Update current tab content
-                const currentTab = findTab(core.state.tabs, core.state.currentTabId);
-                if (currentTab) currentTab.content = html;
-
-                // Return array of tabs if showTabs is true, otherwise just html string? 
-                if (typeof editorRef.onChange === 'function') {
-                    editorRef.onChange(structuredClone(core.state.tabs));
-                }
-                if (html.trim()) core.hidePlaceholder()
-                else core.showPlaceholder()
-                core.history.push()
-
-                syncRemoteChangesDebounce(core)
-                updateOutlineItems(core, options)
-            },
-            onSave: () => {
-                if (editorRef.onSave instanceof Function) editorRef.onSave()
-            },
-            onBlur: (html) => {
-                if (editorRef.onBlur instanceof Function) editorRef.onBlur(html)
-            },
-            onAttachment: (files) => {
-                if (editorRef.onAttachment instanceof Function) editorRef.onAttachment(files)
-            },
-            onLinkClick: (href) => {
-                if (editorRef.onLinkClick instanceof Function) editorRef.onLinkClick(href)
-            },
-            manuplateImage: async (type, content) => {
-                if (editorRef.manuplateImage instanceof Function) {
-                    core.changeStatus('Loading...')
-                    const _content = (await editorRef.manuplateImage(type, content)) ?? content
-                    core.changeStatus('')
-                    return _content
-                }
-                return content
-            },
-            handleFilePicker: async (mimeType, type) => {
-                if (editorRef.handleFilePicker instanceof Function) { return await editorRef.handleFilePicker(mimeType, type) }
-                return null
-
-            },
-            updateBreadcumb: (parentTags) => {
-                if (!options.hideNavigation && Array.isArray(parentTags)) {
-                    core.elements.breadcumb.innerHTML = ''
-                    parentTags.forEach(tag => {
-                        const li = document.createElement('li');
-                        li.innerText = tag;
-                        core.elements.breadcumb.appendChild(li)
-                    })
-                }
-            },
-            changeStatus: (text) => {
-                if (!options.hideNavigation) {
-                    core.elements.status.innerText = text
-                }
-            },
-            insertNode: (node) => {
-                if (core.state.range) {
-                    core.state.range.deleteContents();
-                    core.state.range.insertNode(node);
-                    //cursor at the last with this
-                    core.state.range.collapse(false);
-                    core.state.selection.removeAllRanges();
-                    core.state.selection.addRange(core.state.range);
-                } else {
-                    core.elements.editor.appendChild(node);
-                }
-            },
-            uploadVideo: async (file) => {
-                if (editorRef.uploadVideo instanceof Function) {
-                    core.changeStatus('Loading...')
-                    changeToolbarHtmlByName(core, 'video', SVG.LOADER)
-                    const url = await editorRef.uploadVideo(file)
-                    core.changeStatus('')
-                    changeToolbarHtmlByName(core, 'video', SVG.VIDEO)
-                    return url
-                }
-            },
-            showPlaceholder: () => {
-                core.elements.placeholder.style.display = 'block'
-            },
-            hidePlaceholder: () => {
-                core.elements.placeholder.style.display = 'none'
-            },
-            updateCaretPosition: () => {
-                const selection = core.elements.iframeWindow.getSelection();
-                let parentTags = [];
-                let parentElements = [];
-                if (selection?.rangeCount !== 0) {
-                    const range = selection.getRangeAt(0);
-                    core.state.selection = selection;
-                    core.state.range = range;
-                    core.state.parentNode = range.commonAncestorContainer.parentNode;
-
-                    let element = range.commonAncestorContainer;
-                    // If the parent is a text node, get the parent element
-                    if (element.nodeType === Node.TEXT_NODE) {
-                        element = element.parentNode;
-                    }
-
-                    while (element && element !== core.elements.editor) {
-                        parentElements.push(element)
-                        parentTags.push(element.tagName);
-                        element = element.parentElement;
-                    }
-                    parentTags = parentTags.reverse()
-                    parentElements = parentElements.reverse()
-                    core.updateBreadcumb(parentTags)
-                }
-                return { parentTags, parentElements }
-            },
-            updateCursorPosition: () => {
-                updateCursorPositionDebounce(core, editorRef)
-            },
-            onLocalSyncChanges: (diff) => {
-                if (editorRef.onLocalSyncChanges instanceof Function) editorRef.onLocalSyncChanges(diff)
-            },
-        }
-
-
-        /**
-         * For External Use
-         */
-        const editorRef = {
-            setContents: (content) => {
-                const tabs = prepareTabs(content)
-                core.state.tabs = tabs;
-                core.state.currentTabId = tabs[0].tabId;
-                core.html = tabs[0].content;
-                renderTabs(core, options);
-
-                core.elements.editor.innerHTML = core.html;
-                updateHeight(core, options)
-            },
-            getContents: () => core.state.tabs,
-            onChange: () => { },
-            onSave: () => { },
-            onBlur: () => { },
-            onAttachment: () => { },
-            onLinkClick: (href) => {
-                window.open(href, '_blank', 'noopener noreferrer')
-            },
-            manuplateImage: async () => { },
-            handleFilePicker: async () => { },
-            uploadVideo: async () => { },
-            focus: () => { core.elements.editor.focus() },
-            getCore: () => core,
-            updateHeight: (height) => {
-                core.elements.iframeContainer.style.setProperty('height', height);
-            },
-            setDisabled: (disabled) => {
-                options.disabled = disabled;
-                core.elements.editor.contentEditable = !disabled;
-                if (disabled) changeAllToolbarState(core, 'disabled')
-                else changeAllToolbarState(core, 'enabled')
-                renderTabs(core, options)
-            },
-            updateCssVariables: (newVariables) => {
-                const variableMap = {
-                    primary: '--primary',
-                    baseWhite: '--base-white',
-                    whiteDark: '--base-white-dark',
-                    shadow: '--shadow',
-                    resizer: '--resizer',
-                    resizerBackground: '--resizer-background',
-                    mention: '--mention',
-                    mentionHighlight: '--mention-highlight',
-                    dashedBorder: '--dashed-border',
-                    tableResizer: '--table-resizer',
-                    tableResizerOutline: '--table-resizer-outline',
-                    textColor: '--text-color',
-                    resizerPosition: '--resizer-position',
-                    resizerPositionBackground: '--resizer-position-background',
-                    linkColor: '--link-color',
-                    scrollbarThumb: '--scrollbar-thumb',
-                    scrollbarTrack: '--scrollbar-track',
-                };
-
-                const mergedVariables = {
-                    ...CSS_VARIABLES,
-                    ...newVariables
-                };
-
-                Object.keys(variableMap).forEach(key => {
-                    const cssVar = variableMap[key];
-                    const value = mergedVariables[key];
-
-                    if (value !== undefined) {
-                        core.elements.iframeWindow.documentElement.style.setProperty(cssVar, value);
-                    }
-                });
-            },
-            updateLabels: (labels = []) => {
-                if (!core.state.tribute) return;
-
-                const values = buildTributeValues(labels);
-                core.state.tribute.append(0, values, true);
-            },
-            getLocalCursor: () => core.cursor,
-            setRemoteCursor: (user, cursor) => showRemoteCursor(core, user, cursor),
-            onLocalCursorChange: () => { },
-            onLocalSyncChanges: () => { },
-            applyRemoteSyncChanges: (diff) => { applyRemoteChanges(core, diff) },
-            getCurrentTab: () => findTab(core.state.tabs, core.state.currentTabId),
-            parseTabFromHTML: (html) => ({
-                tabTitle: 'Tab 1',
-                tabId: uuidv4(),
-                content: typeof html === 'string' ? html : '<div><br></div>',
-                children: []
-            }),
-            compare: (tabs1, tabs2) => {
-                const normalizeTabs = (tabs) => {
-                    return (tabs || []).map(tab => ({
-                        tabTitle: tab.tabTitle,
-                        tabId: tab.tabId,
-                        content: tab.content || '<div><br></div>',
-                        children: normalizeTabs(tab.children)
-                    }));
-                }
-                return JSON.stringify(normalizeTabs(tabs1)) === JSON.stringify(normalizeTabs(tabs2))
-            }
-        }
-
-        core.elements.base.className = `${options.classPrefix}${CLASSES.CONTAINER}`
-
-        if (Array.isArray(options.plugins) && options.plugins.length) this.#initToolbar(options, core)
-
-        this.#initPlaceholder(options, core)
-        this.#initCodeviewContainer(options, core);
-        this.#initEditableContainer(options, core);
-        if (!options.hideNavigation) this.#initStepper(options, core);
-
-        if (options.value) core.hidePlaceholder()
-        core.history.push()
-
-        return editorRef
-    }
-
-    static #initToolbar(options, core) {
-        const toolbarContainer = document.createElement('div')
-        toolbarContainer.className = `${options.classPrefix}${CLASSES.TOOLBAR}`
-
-        /**
-         * @param {String} plugin 
-         * @returns {HTMLElement}
-         */
-        const initToolbarItems = (plugin) => {
-            /************************* to creating button sets ************************* */
-            if (Array.isArray(plugin)) {
-                const buttonSets = document.createElement('div');
-                buttonSets.className = `${options.classPrefix}${CLASSES.TOOLBAR_ITEMS}`
-                plugin.forEach(plugin => {
-                    const button = initToolbarItems(plugin)
-                    buttonSets.appendChild(button)
-                })
-                return buttonSets
-            }
-
-            const _plugin = PLUGINS[plugin] ?? options.customPlugins?.[plugin];
-            _plugin.pluginId = plugin
-            /******************************* validations ******************************* */
-            if (!_plugin) throw Error(ERRORS.INVALID_PLUGIN);
-            if (_plugin.title === 'GIPHY' && !options.giphyApiKey) throw Error(ERRORS.GIPHY_KEY_NOT_FOUND);
-            if (_plugin.title === 'Pexels' && !options.pexelsApiKey) throw Error(ERRORS.PEXELS_KEY_NOT_FOUND);
-            if (_plugin.title === 'Tenor' && !options.tenorApiKey) throw Error(ERRORS.TENOR_KEY_NOT_FOUND);
-
-            let toolbarPlugin
-            if (_plugin.type === 'button' || _plugin.type === 'reset-color') {
-                toolbarPlugin = makeToolbarButton(_plugin, options, core)
-            } else if (_plugin.type === 'dropdown' || _plugin.type === 'gallery' || _plugin.type === 'category' || _plugin.type === 'mention' || _plugin.type === 'table') {
-                toolbarPlugin = makeToolbarDropdown(_plugin, options, core)
-            } else if (_plugin.type === 'select') {
-                toolbarPlugin = makeToolbarSelect(_plugin, options, core)
-            } else if (_plugin.type === 'color') {
-                toolbarPlugin = makeToolbarColor(_plugin, options, core)
-            } else if (_plugin.type === 'button-select') {
-                toolbarPlugin = makeToolbarButtonSelect(_plugin, options, core)
-            }
-            if (core.elements.toolbar[plugin])
-                core.elements.toolbar[plugin].push(toolbarPlugin)
-            else
-                core.elements.toolbar[plugin] = [toolbarPlugin]
-
-            return toolbarPlugin
-        }
-
-        options.plugins.forEach(plugin => {
-            const toolbarButtonSets = initToolbarItems(plugin)
-            toolbarContainer.appendChild(toolbarButtonSets)
-        })
-
-        if (options.disabled) changeAllToolbarState(core, 'disabled')
-        showTooltip(options)
-
-        core.elements.toolbarContainer = toolbarContainer;
-        core.elements.base.appendChild(toolbarContainer);
-    }
-
-    static #initPlaceholder(options, core) {
-        const placeholderContainer = document.createElement('div');
-        const placeholder = document.createElement('span');
-        placeholder.className = `${options.classPrefix}${CLASSES.PLACEHOLDER}`
-        placeholder.innerText = options.placeholder ?? ''
-        placeholderContainer.appendChild(placeholder)
-        placeholder.onclick = () => core.elements.editor.focus()
-        core.elements.placeholder = placeholder
-        core.elements.base.appendChild(placeholderContainer)
-    }
-
-    static #initCodeviewContainer(options, core) {
-        const textarea = document.createElement('textarea');
-        textarea.className = `${options.classPrefix}${CLASSES.CODEVIEW}`
-        textarea.spellcheck = false
-        core.elements.codeview = textarea
-        core.elements.base.appendChild(textarea)
-    }
-
-    static #initEditableContainer(options, core) {
-
-        const handleCaretPositionAndPlugin = () => {
-            try {
-                const { parentTags, parentElements } = core.updateCaretPosition()
-
-                changeAllToolbarState(core, 'inactive', [])
-                const activePlugin = []
-                if (parentTags.includes('A')) activePlugin.push('link')
-                if (core.elements.iframeWindow.queryCommandState('bold')) activePlugin.push('bold')
-                if (core.elements.iframeWindow.queryCommandState('underline')) activePlugin.push('underline')
-                if (core.elements.iframeWindow.queryCommandState('italic')) activePlugin.push('italic')
-                if (core.elements.iframeWindow.queryCommandState('strikeThrough')) activePlugin.push('strike')
-                if (core.elements.iframeWindow.queryCommandState('subscript')) activePlugin.push('subscript')
-                if (core.elements.iframeWindow.queryCommandState('superscript')) activePlugin.push('superscript')
-                if (core.elements.iframeWindow.queryCommandState('insertOrderedList')) activePlugin.push('ordered_list')
-                if (core.elements.iframeWindow.queryCommandState('insertUnorderedList')) activePlugin.push('unordered_list')
-
-                let format = ''
-                if (parentTags.includes('H1')) format = 'h1'
-                if (parentTags.includes('H2')) format = 'h2'
-                if (parentTags.includes('H3')) format = 'h3'
-                if (parentTags.includes('H4')) format = 'h4'
-                if (parentTags.includes('H5')) format = 'h5'
-                if (parentTags.includes('H6')) format = 'h6'
-                if (parentTags.includes('P')) format = 'P'
-                changeToolbarValueByName(core, 'format-block', format)
-
-                let selectedNode = core.state.range.commonAncestorContainer;
-                if (core.state.range) {
-
-                    // Traverse up to find the element node if selectedNode is a text node
-                    if (selectedNode.nodeType === Node.TEXT_NODE) {
-                        selectedNode = selectedNode.parentNode;
-                    }
-
-                    // Get computed styles for the element where the text is contained
-                    const computedStyle = window.getComputedStyle(selectedNode);
-                    const align = computedStyle.textAlign;
-                    if (align) {
-                        if (align === 'justify')
-                            activePlugin.push('align_justify')
-                        else if (align === 'start' || align === 'left' || align === '-moz-left')
-                            activePlugin.push('align_left')
-                        else if (align === 'end' || align === 'right' || align === '-moz-right')
-                            activePlugin.push('align_right')
-                        else if (align === 'center' || align === '-moz-center')
-                            activePlugin.push('align_center')
-                    }
-
-                    const styles = window.getComputedStyle(selectedNode);
-                    changeToolbarValueByName(core, 'highlight_color', rgbToHex(styles.backgroundColor))
-                }
-
-                changeToolbarStateByName(core, 'active', activePlugin)
-                const styles = window.getComputedStyle(selectedNode);
-
-                const font = parentElements.find(element => element.tagName === 'FONT')
-
-                if (font && font.face) {
-                    changeToolbarValueByName(core, 'font', font.face)
-                } else if (styles.fontFamily) {
-                    const firstFont = styles.fontFamily.split(",")[0].trim().replace(/['"]/g, "");;
-                    const formattedFont = styles.fontFamily.includes(",") ? `${firstFont}...` : firstFont;
-                    changeToolbarValueByName(core, 'font', `<p style='user-select: none;'>${formattedFont}</p>`)
-                } else {
-                    changeToolbarValueByName(core, 'font', '')
-                }
-
-                if (font && font.size) {
-                    changeToolbarValueByName(core, 'font-size', font.size)
-                } else if (styles.fontSize) {
-                    const match = styles.fontSize.match(/^([\d.]+)([a-z%]*)$/);
-                    const numericValue = parseFloat(match[1]);
-                    const unit = match[2];
-                    const fontSize = (numericValue % 1 === 0 ? numericValue.toString() : numericValue.toFixed(2)) + unit;
-                    changeToolbarValueByName(core, 'font-size', `<p style='user-select: none;'>${fontSize}</p>`)
-                } else {
-                    changeToolbarValueByName(core, 'font-size', '')
-                }
-
-                if (font && font.color) {
-                    changeToolbarValueByName(core, 'font_color', font.color)
-                } else if (styles.color) {
-                    changeToolbarValueByName(core, 'font_color', rgbToHex(styles.color))
-                } else {
-                    changeToolbarValueByName(core, 'font_color', '')
-                }
-            } catch (error) {
-                console.error(error)
-            }
-
-        }
-        const keyPressDebounce = debounce(handleCaretPositionAndPlugin, 100)
-        const makeObserver = () => {
-            const observer = new MutationObserver(() => {
-                // Handle mutation and push state to undo stack
-                const inputEvent = new Event('custom-input', { bubbles: true });
-                contentEditableDiv.dispatchEvent(inputEvent);
-            });
-
-            // Start observing the editor for attribute changes (like resizing)
-            observer.observe(contentEditableDiv, {
-                attributes: true,
-                childList: true,
-                subtree: true
-            });
-
-            // font / layout reflow
-            const ro = new ResizeObserver(() => {
-                updateHeight(core, options)
-            });
-            ro.observe(contentEditableDiv);
-        }
-
-        /***************************** for css theme variables ********************************* */
-        if (options.cssVariables) {
-            const cssVariable = options.cssVariables;
-            const _CSS_VARIABLES = structuredClone(CSS_VARIABLES)
-            Object.keys(CSS_VARIABLES).forEach((key) => {
-                if (cssVariable[key] !== undefined) {
-                    _CSS_VARIABLES[key] = cssVariable[key];
-                }
-            });
-
-            CSS.IFRAME_VARIABLES = `
-                :root {
-                    --primary: ${_CSS_VARIABLES.primary};
-                    --base-white: ${_CSS_VARIABLES.baseWhite};
-                    --base-white-dark: ${_CSS_VARIABLES.whiteDark};
-                    --shadow: ${_CSS_VARIABLES.shadow};
-                    --resizer: ${_CSS_VARIABLES.resizer};
-                    --resizer-background: ${_CSS_VARIABLES.resizerBackground};
-                    --mention: ${_CSS_VARIABLES.mention};
-                    --mention-highlight: ${_CSS_VARIABLES.mentionHighlight};
-                    --dashed-border: ${_CSS_VARIABLES.dashedBorder};
-                    --table-resizer: ${_CSS_VARIABLES.tableResizer};
-                    --table-resizer-outline: ${_CSS_VARIABLES.tableResizerOutline};
-                    --text-color: ${_CSS_VARIABLES.textColor};
-                    --resizer-position: ${_CSS_VARIABLES.resizerPosition};
-                    --resizer-position-background: ${_CSS_VARIABLES.resizerPositionBackground};
-                    --link-color: ${_CSS_VARIABLES.linkColor};
-                    --scrollbar-thumb: ${_CSS_VARIABLES.scrollbarThumb};
-                    --scrollbar-track: ${_CSS_VARIABLES.scrollbarTrack};
-                }
-            `;
-        }
-
-        const iframe = document.createElement('iframe');
-        iframe.style.flex = '1 1 auto';
-
-        if (options.autoHeight) iframe.style.height = 'auto';
-        else iframe.style.height = options.minHeight ?? options.height ?? '250px';
-        iframe.style.minHeight = options.minHeight ?? options.height ?? '250px';
-        if (options.maxHeight) iframe.style.maxHeight = options.maxHeight;
-
-        iframe.style.border = '0';
-        core.elements.base.appendChild(iframe)
-
-        const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
-        // Write the basic HTML structure to the iframe's document
-        iframeDoc.open();
-
-        iframeDoc.write(`
-            <!DOCTYPE html>
-            <html lang='en'>
-                <head>
-                    <style>
-                        ${CSS.IFRAME_VARIABLES}
-                        ${CSS.IFRAME_BODY}
-                        ${CSS.IFRAME_TRIBUTE}
-                        ${CSS.IFRAME_EDITOR}
-                        ${CSS.IFRAME_RESIZER}
-                        ${CSS.IFRAME_TAB}
-                        ${CSS.IFRAME_MEDIA_QUERY}
-                        ${options.iframeStyle || ''}
-                    </style>
-                </head>
-                <body></body>
-            </html>
-        `);
-
-        iframeDoc.close();
-
-        iframeDoc.onkeydown = (event) => {
-            // Check if Ctrl or Cmd key is pressed
-            const isCtrlOrCmd = event.ctrlKey || event.metaKey;
-
-            // Check for Ctrl + Z (undo) or Ctrl + Y (redo)
-            if (isCtrlOrCmd && ['z', 'y', 'b', 'i', 'u', 'f', 'h', 's'].includes(event.key)) {
-                return event.preventDefault();  // Prevent the default undo/redo action
-            }
-        }
-
-        const contentEditableDiv = iframeDoc.createElement('div');
-        contentEditableDiv.contentEditable = !options.disabled;
-        contentEditableDiv.spellcheck = !!options.spellcheck
-        contentEditableDiv.innerHTML = core.html;
-        contentEditableDiv.className = 'content-editable';
-
-        contentEditableDiv.oninput = (e) => {
-            cleanupListSelectionDeletion(core);
-            core.onChange(e.target.innerHTML)
-        }
-        contentEditableDiv.onbeforeinput = (e) => {
-            if (e.target.innerHTML === '<br>' || e.target.innerHTML === '') {
-                e.target.innerHTML = '<div><br></div>'
-            }
-        }
-        contentEditableDiv.addEventListener('custom-input', (e) => {
-            core.onChange(e.target.innerHTML)
-        })
-        contentEditableDiv.onkeydown = (event) => {
-            // Check if Ctrl or Cmd key is pressed
-            const isCtrlOrCmd = event.ctrlKey || event.metaKey;
-            let isLinkCreated = false
-
-            if (isCtrlOrCmd) {
-                if (event.key === 'z') {
-                    core.history.undo()
-                } else if (event.key === 'y') {
-                    core.history.redo()
-                } else if (event.key === 'b') {
-                    applyTextFormat(core, 'bold')
-                } else if (event.key === 'u') {
-                    applyTextFormat(core, 'underline')
-                } else if (event.key === 'i') {
-                    applyTextFormat(core, 'italic')
-                } else if (event.key === 'f' || event.key === 'h') {
-                    findAndReplace(core, options, event)
-                } else if (event.key === 's') {
-                    core.onSave();
-                }
-            }
-
-            if (event.shiftKey && ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
-                const selection = core.elements.iframeWindow.getSelection();
-                if (selection.rangeCount > 0) {
-                    let element = selection.focusNode;
-                    if (element.nodeType === Node.TEXT_NODE) element = element.parentElement;
-                    const td = element.closest('td, th');
-
-                    if (td) {
-                        const table = td.closest('table');
-                        if (table) {
-                            const grid = getTableGrid(table);
-                            const pos = getCellPosition(grid, td);
-
-                            if (pos) {
-                                let { r, c } = pos;
-
-                                if (event.key === 'ArrowLeft') {
-                                    const targetCell = grid[r][c - 1];
-                                    if (c === 0) return;
-                                    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();
-                                    }
-                                } else if (event.key === 'ArrowRight') {
-                                    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();
-                                    }
-                                } else if (event.key === 'ArrowUp') {
-                                    if (r === 0) return;
-                                    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();
-                                    }
-                                } else if (event.key === 'ArrowDown') {
-                                    const targetRowIdx = r + (td.rowSpan || 1);
-                                    if (targetRowIdx >= grid.length) return;
-                                    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();
-                                    }
-                                }
-                                core.updateCaretPosition();
-                            }
-                        }
-                    }
-                }
-            }
-
-            if (event.key === 'Tab') {
-                makeSublist(event, core);
-                if (event.defaultPrevented) return;
-
-                event.preventDefault();
-
-                const tabNode = document.createTextNode("\u00a0\u00a0\u00a0\u00a0");
-                core.state.range.insertNode(tabNode);
-                core.state.range.setStartAfter(tabNode);
-                core.state.range.setEndAfter(tabNode);
-                core.state.selection.removeAllRanges();
-                core.state.selection.addRange(core.state.range);
-            }
-            if (event.key === ' ' || event.key === 'Enter') {
-                const sel = core.state.selection;
-                const node = sel?.anchorNode;
-
-                // Only text nodes, not already inside a link
-                if (node && node.nodeType === Node.TEXT_NODE && !node.parentElement.closest('a')) {
-                    const caretOffset = sel.focusOffset;
-                    const textBeforeCaret = node.textContent.slice(0, caretOffset);
-                    const match = textBeforeCaret.match(REGEX.TEXT_URL);
-                    if (match) {
-                        const url = match[0];
-
-                        // Optional: trim trailing punctuation
-                        const cleanUrl = url.replace(/[.,)]$/, '');
-
-                        // Replace URL text with <a> element
-                        const before = textBeforeCaret.slice(0, match.index);
-                        const after = node.textContent.slice(caretOffset);
-
-                        const a = document.createElement('a');
-                        a.href = cleanUrl.toLowerCase().startsWith('http') ? cleanUrl : 'https://' + cleanUrl;
-                        a.textContent = cleanUrl;
-                        a.target = '_blank';
-
-                        const frag = document.createDocumentFragment();
-                        if (before) frag.appendChild(document.createTextNode(before));
-                        frag.appendChild(a);
-                        if (after) frag.appendChild(document.createTextNode(after));
-
-                        node.replaceWith(frag);
-
-                        // Move caret after the link
-                        const range = document.createRange();
-                        range.setStartAfter(a);
-                        range.collapse(true);
-                        sel.removeAllRanges();
-                        sel.addRange(range);
-                        isLinkCreated = true
-                        core.elements.lastCreatedLink = a;
-                    }
-                }
-            }
-
-            if (core.elements.lastCreatedLink && event.key === 'Backspace') {
-                event.preventDefault(); // stop normal backspace
-
-                // Unwrap the link
-                const textNode = document.createTextNode(core.elements.lastCreatedLink.textContent);
-                core.elements.lastCreatedLink.replaceWith(textNode);
-
-                // Move caret to end
-                const range = document.createRange();
-                range.setStart(textNode, textNode.length);
-                range.collapse(true);
-            }
-
-            handleBackspaceInList(event, core);
-            trackListSelectionDeletion(event, core);
-
-            if (!isLinkCreated) core.elements.lastCreatedLink = null
-
-            makeUnorderedList(event, core)
-            makeHeading(event, core)
-            makeBlockQuote(event, core)
-            makeStrikethrough(event, core)
-            makeCodeBlock(event, core)
-
-            keyPressDebounce()
-        }
-        contentEditableDiv.onkeyup = () => {
-            makeOrderedList(event, core)
-        }
-        contentEditableDiv.onclick = (e) => {
-            if (options.disabled) return
-            handleCaretPositionAndPlugin()
-            let element = e.target; // The clicked element
-
-            core.elements.selectedElement = e.target;
-
-            destroyImageResizer(options, core)
-            destroyTableEditPlugin(options, core)
-            destroyAnchorPopover(core)
-
-            if (e.target.closest("a")?.tagName === 'A') {
-                const anchor = e.target.closest("a");
-                if (anchor && element.tagName !== 'IMG') {
-                    core.elements.selectedElement = anchor;
-                    showAnchorPopover(anchor, e.pageX, e.pageY, options, core);
-                }
-
-            }
-            if (element.tagName === 'IMG') initImageResizer('image', e.target, options, core)
-            if (element.tagName === 'TD' || element.tagName === 'TH') initTableEditPlugin(e.target, options, core)
-            if (element.tagName === "FIGURE") initImageResizer('figure', e.target, options, core)
-            if (element.tagName === 'LI' && element.dataset.leksyTocHeadingId) navigateToHeading(core, element.dataset.leksyTocHeadingId)
-            highlightActiveOutline(core, options)
-        }
-        contentEditableDiv.onpaste = (e) => {
-            e.preventDefault();
-            const clipboardData = e.clipboardData;
-
-            if (clipboardData.items) {
-                for (let item of clipboardData.items) {
-                    if (item.kind === 'file' && item.type.startsWith('image/')) {
-                        const file = item.getAsFile();
-                        const reader = new FileReader();
-                        reader.onload = async function (event) {
-                            const img = document.createElement('img');
-                            const base64String = event.target.result;
-                            img.src = await core.manuplateImage('base64', base64String);
-                            core.insertNode(img);
-                        };
-                        reader.readAsDataURL(file);
-                        return;
-                    }
-                }
-            }
-
-            const pastedData = clipboardData.getData('text/html') || clipboardData.getData('text/plain');
-            core.elements.iframeWindow.execCommand('insertHtml', false, cleanHTML(pastedData, options, core))
-        };
-        contentEditableDiv.ondrop = (e) => {
-            e.preventDefault();
-            const droppedData = e.dataTransfer.getData('text/html') || e.dataTransfer.getData('text/plain');
-            core.elements.iframeWindow.execCommand('insertHtml', false, cleanHTML(droppedData, options, core))
-        };
-        contentEditableDiv.onblur = (e) => {
-            core.onBlur(e.target.innerHTML)
-        }
-
-        iframeDoc.body.appendChild(contentEditableDiv);
-
-        const editorCursor = document.createElement('div')
-        editorCursor.style.position = 'absolute'
-        editorCursor.style.top = '0'
-        iframeDoc.body.appendChild(editorCursor);
-
-        if (options.labels?.length) {
-            const script = iframeDoc.createElement('script');
-            script.src = "https://cdnjs.cloudflare.com/ajax/libs/tributejs/5.1.3/tribute.js";
-
-            script.onload = () => {
-                core.state.tribute = new iframe.contentWindow.Tribute({
-                    values: buildTributeValues(options.labels),
-                    noMatchTemplate: () => '<li>No match found</li>',
-                    menuItemTemplate: (item) => {
-                        if (item.original.isCategory) return `<div class="category">${item.original.key}</div>`;
-                        return `<div class="item">${item.original.key}</div>`;
-                    },
-                    containerClass: 'tribute',
-                    selectTemplate: function (item) {
-                        if (item.original.isCategory) return null;
-                        return `<span spellcheck="false" contentEditable="false" data-id="${item.original.value}">${item.original.key}</span>`;
-                    },
-                });
-                core.state.tribute.attach(contentEditableDiv);
-                makeObserver()
-            };
-            iframeDoc.body.appendChild(script);
-        } else {
-            makeObserver()
-        }
-
-        iframeDoc.addEventListener('keydown', core.updateCursorPosition)
-        iframeDoc.addEventListener('keyup', () => {
-            highlightActiveOutline(core, options)
-        })
-        iframeDoc.addEventListener('mouseup', core.updateCursorPosition)
-        iframeDoc.addEventListener('mousedown', core.updateCursorPosition)
-        iframeDoc.addEventListener('selectionchange', core.updateCursorPosition)
-
-        core.elements.editor = contentEditableDiv;
-        core.elements.editorCursor = editorCursor;
-        core.elements.iframeWindow = iframeDoc;
-        core.elements.iframeContainer = iframe;
-        initTabs(core, options);
-    }
-
-    static #initStepper(options, core) {
-        const stepper = document.createElement('div');
-        stepper.className = `${options.classPrefix}${CLASSES.STEPPER}`;
-
-        // Create the <ul> element for the breadcrumb
-        const breadcrumbList = document.createElement('ul');
-        breadcrumbList.className = 'breadcrumb';
-
-        const status = document.createElement('span');
-
-        stepper.appendChild(breadcrumbList)
-        stepper.appendChild(status)
-
-        core.elements.base.appendChild(stepper);
-        core.elements.breadcumb = breadcrumbList
-        core.elements.status = status
-        core.elements.stepper = stepper
-    }
-
-}
-
-const convertHtmlToText = (html) => {
-    const div = document.createElement('div');
-    div.innerHTML = html;
-    return div.textContent
-}
-
-const isHTMLEmpty = (html) => {
-    const tempElement = document.createElement('div');
-    tempElement.innerHTML = html
-    return !tempElement.innerText.trim() && !tempElement.querySelector('img , ol, ul, blockquote, h1, h2, h3');
-}
-
-export default LeksyEditor
-export {
-    convertHtmlToText,
-    isHTMLEmpty,
-}