leksy-editor 1.0.0

package/index.js

@@ -0,0 +1,696 @@
+import './style.css'
+import { CLASSES, CSS, CSS_VARIABLES, ERRORS, SVG } from "./constant"
+import PLUGINS, { applyOrderList, applyTextFormat } from './plugin';
+import { showAnchorPopover, changeAllToolbarState, changeToolbarStateByName, changeToolbarValueByName, cleanHTML, debounce, destroyImageResizer, destroyTableEditPlugin, initImageResizer, initTableEditPlugin, makeToolbarButton, makeToolbarColor, makeToolbarDropdown, makeToolbarSelect, rgbToHex, updateTableResizerPosition, destroyAnchorPopover, changeToolbarHtmlByName } from './utilities';
+
+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 {String} value
+     * @property {Boolean} hideNavigation
+     * @property {String} giphyApiKey
+     * @property {String} pexelsApiKey
+     * @property {String} tenorApiKey
+     * @property {Object} cssVariables
+     */
+    /**
+     * 
+     * @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
+        /**
+         * For Internal Use
+         */
+        const core = {
+            elements: {
+                base: baseElement,
+                toolbar: {},
+            },
+            state: { isCodeViewOpen: false, page: 1, totalPages: null, next: null },
+            html: options.value || '<div><br></div>',
+            history: {
+                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;
+
+                    if (core.history.stack[core.history.currentIndex]?.html !== html) {
+                        // If new state is pushed, remove redo states if present
+                        core.history.stack = core.history.stack.slice(0, core.history.currentIndex + 1);
+                        core.history.stack.push({ caretOffset, html });
+                        core.history.currentIndex++;
+                    }
+                },
+                undo: () => {
+                    if (core.history.currentIndex > 0) {
+                        core.history.currentIndex--;
+
+                        const { html, caretOffset } = core.history.stack[core.history.currentIndex];
+                        core.elements.editor.innerHTML = html;
+                        core.history.restoreCaretPosition(caretOffset);
+                    }
+                },
+                redo: () => {
+                    if (core.history.currentIndex < core.history.stack.length - 1) {
+                        core.history.currentIndex++;
+
+                        const { html, caretOffset } = core.history.stack[core.history.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.element.editor.innerHTML) => {
+                updateTableResizerPosition(options, core)
+                if (html === '<br>' || html === '<div><br></div>') html = ''
+                core.html = html;
+                if (editorRef.onChange instanceof Function) editorRef.onChange(html)
+                if (html.trim()) core.hidePlaceholder()
+                else core.showPlaceholder()
+                core.history.push()
+            },
+            onBlur: (html) => {
+                if (editorRef.onBlur instanceof Function) editorRef.onBlur(html)
+            },
+            onAttachment: (files) => {
+                if (editorRef.onAttachment instanceof Function) editorRef.onAttachment(files)
+            },
+            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
+            },
+            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 }
+            },
+        }
+
+        /**
+         * For External Use
+         */
+        const editorRef = {
+            setContents: (html) => {
+                core.html = html
+                core.elements.editor.innerHTML = html
+            },
+            getContents: () => core.html,
+            onChange: () => { },
+            onBlur: () => { },
+            onAttachment: () => { },
+            manuplateImage: async () => { },
+            uploadVideo: async () => { },
+            focus: () => { core.elements.editor.focus() },
+            getCore: () => core,
+        }
+
+        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];
+            /******************************* 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') {
+                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)
+            }
+            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)
+        })
+
+        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 makeOrderedList = () => {
+            const textNode = core.state.range.startContainer;
+            if (textNode.nodeType === Node.TEXT_NODE) {
+                // Get the text typed so far
+                let text = textNode.nodeValue.replace(/\u00A0/g, ' ');
+
+                // Detect "1. " pattern
+                if (text === "1. ") {
+                    text = text.slice(0, -3);
+                    textNode.nodeValue = text;
+
+                    // Update the caret position
+                    const newRange = document.createRange();
+                    newRange.setStart(textNode, text.length);
+                    newRange.setEnd(textNode, text.length);
+                    core.state.selection.removeAllRanges();
+                    core.state.selection.addRange(newRange);
+                    applyOrderList(core)
+                }
+            }
+
+        }
+        const handleCaretPositionAndPlugin = () => {
+            const { parentTags, parentElements } = core.updateCaretPosition()
+            makeOrderedList()
+
+            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]).toFixed(2);
+                const unit = match[2];
+                const fontSize = numericValue + 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', '')
+            }
+
+        }
+        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
+            });
+        }
+
+        /***************************** for css theme variables ********************************* */
+
+        if (options.cssVariables) {
+            const cssVariable = options.cssVariables;
+            Object.keys(CSS_VARIABLES).forEach((key) => {
+                if (cssVariable[key] !== undefined) {
+                    CSS_VARIABLES[key] = cssVariable[key];
+                }
+            });
+        
+            CSS.IFRAME_VARIABLES = `
+                :root {
+                    --primary: ${CSS_VARIABLES.primary};
+                    --white-mid-darker: ${CSS_VARIABLES.midDarker};
+                    --base-white: ${CSS_VARIABLES.baseWhite};
+                    --base-white-dark: ${CSS_VARIABLES.whiteDark};
+                    --shadow: ${CSS_VARIABLES.shadow};
+                    --resizer: ${CSS_VARIABLES.resizer};
+                    --resizer-background: ${CSS_VARIABLES.resiserBackground};
+                    --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.resiserPositionBackground};
+                }
+            `;
+        }
+
+        const iframe = document.createElement('iframe');
+        iframe.style.flex = '1 1 auto';
+        iframe.style.height = '250px'
+        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}
+                    </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'].includes(event.key)) {
+                return event.preventDefault();  // Prevent the default undo/redo action
+            }
+        }
+
+        const contentEditableDiv = iframeDoc.createElement('div');
+        contentEditableDiv.contentEditable = true;
+        contentEditableDiv.spellcheck = !!options.spellcheck
+        contentEditableDiv.innerHTML = core.html;
+        contentEditableDiv.className = 'content-editable';
+
+        contentEditableDiv.oninput = (e) => {
+            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;
+
+            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')
+                }
+            }
+
+            if (event.key === 'Tab') {
+                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);
+            }
+            keyPressDebounce()
+        }
+        contentEditableDiv.onclick = (e) => {
+            handleCaretPositionAndPlugin()
+            let element = e.target; // The clicked element
+
+            core.elements.selectedElement = e.target;
+
+            destroyImageResizer(options, core)
+            destroyTableEditPlugin(options, core)
+            destroyAnchorPopover(core)
+
+            if (element.tagName === "A") showAnchorPopover(e.target, e.pageX, e.pageY, options, core)
+            if (element.tagName === 'IMG') initImageResizer('image', e.target, options, core)
+            if (element.tagName === 'TD') initTableEditPlugin(e.target, options, core)
+            if (element.tagName === "FIGURE") initImageResizer('figure', e.target, options, core)
+        }
+        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))
+        };
+        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))
+        };
+        contentEditableDiv.onblur = (e) => {
+            core.onBlur(e.target.innerHTML)
+        }
+
+        iframeDoc.body.appendChild(contentEditableDiv);
+
+        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 = () => {
+                const tribute = new iframe.contentWindow.Tribute({
+                    values: options.labels.flatMap(category => {
+                        const fields = [
+                            { key: category.name, isCategory: true },
+                            ...category.fields.map(field => ({
+                                key: field.name,
+                                value: field.value,
+                            }))
+                        ];
+
+                        return fields
+                    }),
+                    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">${item.original.key}</span>`;
+                    },
+                });
+                tribute.attach(contentEditableDiv);
+                makeObserver()
+            };
+            iframeDoc.body.appendChild(script);
+        } else {
+            makeObserver()
+        }
+
+        core.elements.editor = contentEditableDiv;
+        core.elements.iframeWindow = iframeDoc;
+        core.elements.iframeContainer = iframe;
+    }
+
+    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');
+}
+
+export default LeksyEditor
+export {
+    convertHtmlToText,
+    isHTMLEmpty,
+}