leksy-editor 2.6.0 → 3.0.0

package/plugin.js

@@ -1,1355 +0,0 @@
-import { EMOJI_CATEGORIES, FONT_SIZE_OPTIONS, FONTS, FORMAT_OPTIONS, MIMETYPE, REGEX, SPECIAL_CHARACTERS, SVG, UNORDERED_LIST_OPTIONS, ORDERED_LIST_OPTIONS, CLASSES } from "./constant"
-import { giphy, pexels, tenor } from "./gallery";
-import { formatLink, changeAllToolbarState, changeToolbarHtmlByName, changeToolbarStateByName, changeToolbarValueByName, cleanHTML, constructEmbedUrl, extractSocialMediaId, isLinkValid, openModal, transformTextStyle, insertTOC, applyFormatBlockInListItem, normalizeHeadingWrappedLists, } from "./utilities";
-
-const applyTextFormat = (core, command) => {
-    core.elements.editor.focus();
-    core.elements.iframeWindow.execCommand(command);
-    core.updateCaretPosition()
-
-    const isActive = core.elements.iframeWindow.queryCommandState(command);
-    if (isActive) changeToolbarStateByName(core, 'active', [command])
-    else changeToolbarStateByName(core, 'inactive', [command])
-}
-
-const applyList = (core, { command, activePlugin, inactivePlugin }) => {
-    core.elements.iframeWindow.execCommand(command);
-    normalizeHeadingWrappedLists(core);
-    core.elements.editor.focus();
-    core.updateCaretPosition()
-
-    const isActive = core.elements.iframeWindow.queryCommandState(command);
-    changeToolbarStateByName(core, isActive ? 'active' : 'inactive', [activePlugin])
-    changeToolbarStateByName(core, 'inactive', [inactivePlugin])
-}
-
-const applyOrderList = (core) => applyList(core, {
-    command: 'insertOrderedList',
-    activePlugin: 'ordered_list',
-    inactivePlugin: 'unordered_list'
-})
-
-const applyUnorderedList = (core) => applyList(core, {
-    command: 'insertUnorderedList',
-    activePlugin: 'unordered_list',
-    inactivePlugin: 'ordered_list'
-})
-
-const PLUGINS = {
-    'undo': {
-        title: 'Undo',
-        icon: SVG.UNDO,
-        type: 'button',
-        click: (event, core) => {
-            core.history.undo()
-            core.updateCaretPosition()
-            core.elements.editor.focus();
-        }
-    },
-    'redo': {
-        title: 'Redo',
-        icon: SVG.REDO,
-        type: 'button',
-        click: (event, core) => {
-            core.history.redo()
-            core.updateCaretPosition()
-            core.elements.editor.focus();
-        }
-    },
-    'bold': {
-        title: 'Bold',
-        icon: SVG.BOLD,
-        type: 'button',
-        click: (event, core) => {
-            applyTextFormat(core, 'bold')
-        }
-    },
-    'underline': {
-        title: 'Underline',
-        icon: SVG.UNDERLINE,
-        type: 'button',
-        click: (event, core) => {
-            applyTextFormat(core, 'underline')
-        }
-    },
-    'italic': {
-        title: 'Italic',
-        icon: SVG.ITALIC,
-        type: 'button',
-        click: (event, core) => {
-            applyTextFormat(core, 'italic')
-        }
-    },
-    'strike': {
-        title: 'Strike',
-        icon: SVG.STRIKE,
-        type: 'button',
-        click: (event, core) => {
-            core.elements.editor.focus();
-            core.elements.iframeWindow.execCommand('strikeThrough');
-            core.updateCaretPosition()
-
-            const isActive = core.elements.iframeWindow.queryCommandState('strikeThrough');
-            if (isActive) changeToolbarStateByName(core, 'active', ['strike'])
-            else changeToolbarStateByName(core, 'inactive', ['strike'])
-        }
-    },
-    'align_justify': {
-        title: 'Align Justify',
-        icon: SVG.ALIGN_JUSTIFY,
-        type: 'button',
-        click: (event, core) => {
-            core.elements.editor.focus();
-            core.elements.iframeWindow.execCommand('justifyFull');
-            core.resizerHandler?.()
-            core.updateCaretPosition()
-
-            changeToolbarStateByName(core, 'active', ['align_justify'])
-            changeToolbarStateByName(core, 'inactive', ['align_left', 'align_right', 'align_center'])
-        }
-    },
-    'align_left': {
-        title: 'Align Left',
-        icon: SVG.ALIGN_LEFT,
-        type: 'button',
-        click: (event, core) => {
-            core.elements.editor.focus();
-            core.elements.iframeWindow.execCommand('justifyLeft');
-            core.resizerHandler?.()
-            core.updateCaretPosition()
-
-            changeToolbarStateByName(core, 'active', ['align_left'])
-            changeToolbarStateByName(core, 'inactive', ['align_justify', 'align_right', 'align_center'])
-        }
-    },
-    'align_right': {
-        title: 'Align Right',
-        icon: SVG.ALIGN_RIGHT,
-        type: 'button',
-        click: (event, core) => {
-            core.elements.editor.focus();
-            core.elements.iframeWindow.execCommand('justifyRight');
-            core.resizerHandler?.()
-            core.updateCaretPosition()
-
-            changeToolbarStateByName(core, 'active', ['align_right'])
-            changeToolbarStateByName(core, 'inactive', ['align_justify', 'align_left', 'align_center'])
-        }
-    },
-    'align_center': {
-        title: 'Align Center',
-        icon: SVG.ALIGN_CENTER,
-        type: 'button',
-        click: (event, core) => {
-            core.elements.editor.focus();
-            core.elements.iframeWindow.execCommand('justifyCenter');
-            core.resizerHandler?.()
-            core.updateCaretPosition()
-
-            changeToolbarStateByName(core, 'active', ['align_center'])
-            changeToolbarStateByName(core, 'inactive', ['align_justify', 'align_left', 'align_right'])
-        }
-    },
-    'code_view': {
-        title: 'Code View',
-        icon: SVG.CODE_VIEW,
-        type: 'button',
-        click: (event, core, options) => {
-            if (core.state.isCodeViewOpen) {
-                core.elements.codeview.style.display = 'none'
-                core.elements.iframeContainer.style.display = 'block'
-                if (core.elements.stepper) core.elements.stepper.style.display = 'flex'
-                const _cleanHTML = cleanHTML(core.elements.codeview.value, options, core)
-                core.onChange(_cleanHTML);
-                core.elements.editor.innerHTML = _cleanHTML
-                core.elements.editor.focus()
-                changeAllToolbarState(core, 'enabled')
-            } else {
-                core.hidePlaceholder()
-                core.elements.iframeContainer.style.display = 'none'
-                if (core.elements.stepper) core.elements.stepper.style.display = 'none'
-                core.elements.codeview.value = core.html
-                core.elements.codeview.style.display = 'block'
-                core.elements.codeview.focus()
-                changeAllToolbarState(core, 'disabled', ['code_view'])
-            }
-            core.state.isCodeViewOpen = !core.state.isCodeViewOpen
-            core.updateCaretPosition()
-        }
-    },
-    'remove_format': {
-        title: "Remove Format",
-        icon: SVG.REMOVE_FORMAT,
-        type: 'button',
-        click: (event, core) => {
-            core.elements.iframeWindow.execCommand('removeFormat');
-            core.elements.editor.focus();
-            core.updateCaretPosition()
-        }
-    },
-    'subscript': {
-        title: 'Sub Script',
-        icon: SVG.SUBSCRIPT,
-        type: 'button',
-        click: (event, core) => {
-            core.elements.editor.focus();
-            core.elements.iframeWindow.execCommand('subscript');
-            core.updateCaretPosition()
-
-            const isActive = core.elements.iframeWindow.queryCommandState('subscript');
-            if (isActive) changeToolbarStateByName(core, 'active', ['subscript'])
-            else changeToolbarStateByName(core, 'inactive', ['subscript'])
-            changeToolbarStateByName(core, 'inactive', ['superscript'])
-        }
-    },
-    'superscript': {
-        title: 'Super Script',
-        icon: SVG.SUPERSCRIPT,
-        type: 'button',
-        click: (event, core) => {
-            core.elements.editor.focus();
-            core.elements.iframeWindow.execCommand('superscript');
-            core.updateCaretPosition()
-
-            const isActive = core.elements.iframeWindow.queryCommandState('superscript');
-            if (isActive) changeToolbarStateByName(core, 'active', ['superscript'])
-            else changeToolbarStateByName(core, 'inactive', ['superscript'])
-            changeToolbarStateByName(core, 'inactive', ['subscript'])
-        }
-    },
-    'font': {
-        title: 'Font',
-        icon: 'Font',
-        type: 'select',
-        options: Object.keys(FONTS).map(font => ({
-            label: FONTS[font], value: font
-        })),
-        width: '140px',
-        click: (name, core, options) => {
-            core.elements.editor.focus();
-            core.elements.iframeWindow.execCommand('fontName', false, name);
-
-            core.updateCaretPosition()
-            changeToolbarValueByName(core, 'font', name)
-        }
-    },
-    'font-size': {
-        title: 'Font Size',
-        icon: 'Font Size',
-        type: 'select',
-        options: Object.keys(FONT_SIZE_OPTIONS).map(size => ({
-            label: FONT_SIZE_OPTIONS[size], value: size
-        })),
-        width: '100px',
-        click: (size, core, options) => {
-            core.elements.editor.focus();
-            core.elements.iframeWindow.execCommand('fontSize', false, parseInt(size));
-
-            core.updateCaretPosition()
-            changeToolbarValueByName(core, 'font-size', size)
-        }
-    },
-    'format-block': {
-        title: 'Format Block',
-        icon: 'Format',
-        type: 'select',
-        options: Object.keys(FORMAT_OPTIONS).map(format => ({
-            label: FORMAT_OPTIONS[format], value: format
-        })),
-        width: '110px',
-        click: (tag, core, options) => {
-            core.elements.editor.focus();
-            const isFormattedInList = applyFormatBlockInListItem(core, tag);
-            if (!isFormattedInList) {
-                core.elements.iframeWindow.execCommand('formatBlock', false, tag);
-            }
-            normalizeHeadingWrappedLists(core);
-
-            core.updateCaretPosition()
-            changeToolbarValueByName(core, 'format-block', tag)
-        }
-    },
-    'ordered_list': {
-        title: "Ordered List",
-        icon: SVG.LIST_NUMBER,
-        type: 'button-select',
-        options: Object.keys(ORDERED_LIST_OPTIONS).map(list => ({
-            label: ORDERED_LIST_OPTIONS[list], value: list
-        })),
-        click: (value, core, options) => {
-            core.elements.editor.focus();
-            const isActive = core.elements.iframeWindow.queryCommandState('insertOrderedList');
-            if (!isActive) {
-                core.elements.iframeWindow.execCommand('insertOrderedList');
-                normalizeHeadingWrappedLists(core);
-            }
-            const selection = core.elements.iframeWindow.getSelection();
-            if (selection.rangeCount > 0) {
-                let node = selection.anchorNode;
-                while (node && node.nodeName !== 'OL' && node !== core.elements.editor) {
-                    node = node.parentNode;
-                }
-                if (node?.nodeName === 'OL') {
-                    node.setAttribute('type', value);
-                }
-            }
-            core.updateCaretPosition()
-            changeToolbarStateByName(core, 'active', ['ordered_list'])
-            changeToolbarStateByName(core, 'inactive', ['unordered_list'])
-        },
-        mainClick: (event, core, options) => {
-            core.elements.editor.focus();
-            applyOrderList(core)
-        }
-    },
-    'unordered_list': {
-        title: "Unordered List",
-        icon: SVG.LIST_BULLETS,
-        type: 'button-select',
-        options: Object.keys(UNORDERED_LIST_OPTIONS).map(list => ({
-            label: UNORDERED_LIST_OPTIONS[list], value: list
-        })),
-        click: (value, core, options) => {
-            core.elements.editor.focus();
-            const isActive = core.elements.iframeWindow.queryCommandState('insertUnorderedList');
-            if (!isActive) {
-                core.elements.iframeWindow.execCommand('insertUnorderedList');
-                normalizeHeadingWrappedLists(core);
-            }
-            const selection = core.elements.iframeWindow.getSelection();
-            if (selection.rangeCount > 0) {
-                let node = selection.anchorNode;
-                while (node && node.nodeName !== 'UL' && node !== core.elements.editor) {
-                    node = node.parentNode;
-                }
-                if (node?.nodeName === 'UL') {
-                    node.style.listStyleType = value;
-                }
-            }
-            core.updateCaretPosition()
-            changeToolbarStateByName(core, 'active', ['unordered_list'])
-            changeToolbarStateByName(core, 'inactive', ['ordered_list'])
-        },
-        mainClick: (event, core, options) => {
-            core.elements.editor.focus();
-            applyUnorderedList(core)
-        }
-    },
-    'line_height': {
-        title: 'Line Height',
-        icon: SVG.LINE_HEIGHT,
-        type: 'dropdown',
-        options: [
-            { label: "Normal", value: "normal" },
-            { label: "1.0", value: "1.0" },
-            { label: "1.5", value: "1.5" },
-            { label: "2.0", value: "2.0" },
-            { label: "2.5", value: "2.5" },
-            { label: "3.0", value: "3.0" },
-        ],
-        click: (event, core, options) => {
-            core.elements.editor.focus();
-            const selection = core.elements.iframeWindow.getSelection();
-            const range = selection.getRangeAt(0);
-            const selectedNode = range.commonAncestorContainer;
-            // Traverse up to the block element
-            let blockElement = selectedNode;
-            while (blockElement && blockElement.nodeType === Node.TEXT_NODE) {
-                blockElement = blockElement.parentNode;
-            }
-            if (blockElement && blockElement !== core.elements.editor) blockElement.style.lineHeight = event.target.getAttribute('data-value');
-
-            core.updateCaretPosition()
-        },
-    },
-    'font_color': {
-        title: 'Font color',
-        icon: SVG.FONT_COLOR, // Assuming SVG icon for color picker
-        type: "color",
-        change: (event, core, options) => {
-            core.elements.editor.focus();
-            core.elements.iframeWindow.execCommand('foreColor', false, event.target.value); // Apply color to selected text
-            core.updateCaretPosition()
-        }
-    },
-    'remove_font_color': {
-        title: 'Remove Font Color',
-        icon: `${SVG.REMOVE_FORMAT}${SVG.FONT_COLOR}`,
-        type: "reset-color",
-        click: (event, core, options) => {
-            if (!core.state.range) return;
-            core.elements.editor.focus();
-            const container = document.createElement('div');
-            const clonedContents = core.state.range.cloneContents();
-            container.appendChild(clonedContents);
-            if (container.innerHTML === container.innerText) {
-                const parentEl = core.state.range.startContainer.parentElement;
-                parentEl.removeAttribute('color');
-                parentEl.style.removeProperty('color');
-
-            } else {
-                container.querySelectorAll('[style]').forEach((el) => {
-                    el.style.removeProperty('color');
-                    if (!el.getAttribute('style')) {
-                        el.removeAttribute('style');
-                    }
-                });
-                container.querySelectorAll('font[color]').forEach((el) => {
-                    el.removeAttribute('color');
-                });
-            }
-            core.state.range.deleteContents();
-            const frag = document.createDocumentFragment();
-            Array.from(container.childNodes).forEach((node) => {
-                frag.appendChild(node);
-            });
-            core.state.range.insertNode(frag);
-            core.updateCaretPosition();
-        }
-
-    },
-    'highlight_color': {
-        title: 'Highlight Color',
-        icon: SVG.HIGHLIGHT_COLOR,
-        type: "color",
-        change: (event, core, options) => {
-            core.elements.editor.focus();
-            core.elements.iframeWindow.execCommand('hiliteColor', false, event.target.value); // Apply color to selected text
-            core.updateCaretPosition()
-        }
-    },
-    'remove_highlight_color': {
-        title: 'Remove Highlight Color',
-        icon: `${SVG.REMOVE_FORMAT}${SVG.HIGHLIGHT_COLOR}`,
-        type: "reset-color",
-        click: (event, core, options) => {
-            core.elements.editor.focus();
-            core.elements.iframeWindow.execCommand('hiliteColor', false, "transparent"); // Apply color to selected text
-            core.updateCaretPosition()
-        }
-    },
-    'text_style': {
-        title: 'Text Style',
-        icon: SVG.TEXT_STYLE,
-        type: 'dropdown',
-        options: [
-            { label: 'Block Quote', value: 'blockquote' },
-            { label: 'Code', value: 'code' },
-            { label: 'Translucent', value: 'translucent' },
-            { label: 'Shadow', value: 'shadow' },
-            { label: 'Upper Case', value: 'upper_case' },
-            { label: 'Lower Case', value: 'lower_case' },
-            { label: 'Title Case', value: 'title_case' },
-            { label: 'Button (Green)', value: 'button_green' },
-            { label: 'Button (Black)', value: 'button_black' }
-        ],
-        click: (event, core, options) => {
-            if (!core.state.range) return
-            switch (event.target.getAttribute('data-value')) {
-                case 'code': {
-                    const code = document.createElement('code');
-                    code.textContent = core.state.range.toString();
-                    core.state.range.deleteContents();
-                    core.state.range.insertNode(code);
-                    break;
-                }
-                case 'translucent': {
-                    const translucent = document.createElement('span');
-                    translucent.textContent = core.state.range.toString();
-                    translucent.style.backgroundColor = 'rgba(200, 151, 231, 0.3)'; // Adjust opacity as needed
-                    core.state.range.deleteContents();
-                    core.state.range.insertNode(translucent);
-                    break;
-                }
-                case 'shadow': {
-                    const shadow = document.createElement('span');
-                    shadow.textContent = core.state.range.toString();
-                    shadow.style.textShadow = '2px 2px 4px rgba(0, 0, 0, 0.3)'; // Adjust opacity as needed
-                    core.state.range.deleteContents();
-                    core.state.range.insertNode(shadow);
-                    break;
-                }
-                case 'blockquote': {
-                    const code = document.createElement('blockquote');
-                    code.textContent = core.state.range.toString();
-                    core.state.range.deleteContents();
-                    core.state.range.insertNode(code);
-                    break;
-                }
-                case 'upper_case': {
-                    transformTextStyle(core, 'upper_case');
-                    break;
-                }
-                case 'lower_case': {
-                    transformTextStyle(core, 'lower_case');
-                    break;
-                }
-                case 'title_case': {
-                    transformTextStyle(core, 'title_case');
-                    break;
-                }
-                case 'button_green': {
-                    core.updateCaretPosition()
-                    const span = document.createElement('span');
-                    span.textContent = core.state.range.toString();
-                    span.style.cssText = 'background-color: #28a745; color: white; font-weight: bold; padding: 8px; border-radius: 4px; text-decoration: none; display: inline-block; cursor: pointer;';
-                    span.contentEditable = 'false';
-                    let element = core.state.range.commonAncestorContainer;
-                    if (element.nodeType === Node.TEXT_NODE) element = element.parentElement;
-                    if (element.nodeName === 'A') {
-                        element.style.cssText = 'background-color: #28a745; color: white; font-weight: bold; padding: 8px; border-radius: 4px; text-decoration: none; display: inline-block; cursor: pointer;';
-                    } else if (span.textContent && !['TR', 'TBODY', 'THEAD', 'TABLE'].includes(element.nodeName)) {
-                        core.state.range.deleteContents();
-                        core.state.range.insertNode(span);
-                    }
-                    break;
-                }
-                case 'button_black': {
-                    core.updateCaretPosition()
-                    const span = document.createElement('span');
-                    span.textContent = core.state.range.toString();
-                    span.style.cssText = 'background-color: black; color: white; font-weight: bold; padding: 8px; border-radius: 4px; text-decoration: none; display: inline-block; cursor: pointer;';
-                    span.contentEditable = 'false';
-                    let element = core.state.range.commonAncestorContainer;
-                    if (element.nodeType === Node.TEXT_NODE) element = element.parentElement;
-                    if (element.nodeName === 'A') {
-                        element.style.cssText = 'background-color: black; color: white; font-weight: bold; padding: 8px; border-radius: 4px; text-decoration: none; display: inline-block; cursor: pointer;';
-                    } else if (span.textContent && !['TR', 'TBODY', 'THEAD', 'TABLE'].includes(element.nodeName)) {
-                        core.state.range.deleteContents();
-                        core.state.range.insertNode(span);
-                    }
-                    break;
-                }
-            }
-            core.elements.editor.focus();
-            core.updateCaretPosition()
-        }
-    },
-    'paragraph_style': {
-        title: 'Paragraph Style',
-        icon: SVG.PARAGRAPH_STYLE, // Assuming SVG icon for paragraph style
-        type: 'dropdown',
-        options: [
-            { label: 'Spaced', value: 'letter-spacing: 2px;' },
-            { label: 'Neon', value: `color: #FD7500; text-shadow: 0 0 5px #02B59F,0 0 10px #022422,0 0 15px #FF9F03,0 0 20px #02B59F,0 0 25px #017562;font-weight: bold;` },
-            { label: 'Bordered', value: 'border: 2px solid black; padding: 5px;' }
-        ],
-        click: (event, core, option) => {
-            core.elements.editor.focus();
-            const selection = core.elements.iframeWindow.getSelection();
-            const range = selection.getRangeAt(0);
-            const selectedNode = range.commonAncestorContainer;
-            // Traverse up to the block element
-            let blockElement = selectedNode;
-            while (blockElement && blockElement.nodeType === Node.TEXT_NODE) {
-                blockElement = blockElement.parentNode;
-            }
-            if (blockElement && blockElement !== core.elements.editor) blockElement.style.cssText = event.target.getAttribute('data-value');
-
-            core.updateCaretPosition()
-        }
-    },
-    'outdent': {
-        title: 'Outdent',
-        icon: SVG.OUTDENT,
-        type: 'button',
-        click: (event, core, options) => {
-            if (!core.state.range) return
-
-            const selectedNode = core.state.range.commonAncestorContainer;
-
-            // Traverse up to the block element
-            let blockElement = selectedNode;
-            while (blockElement && blockElement.nodeType === Node.TEXT_NODE) {
-                blockElement = blockElement.parentNode;
-            }
-
-            if (blockElement) {
-                // Decrease the margin-left (outdent)
-                const currentIndent = parseInt(blockElement.style.marginLeft || '0', 10);
-                blockElement.style.marginLeft = Math.max(0, currentIndent - 40) + 'px';
-            }
-            core.updateCaretPosition()
-            core.elements.editor.focus();
-        }
-    },
-    'indent': {
-        title: 'Indent',
-        icon: SVG.INDENT,
-        type: 'button',
-        click: (event, core, options) => {
-            if (!core.state.range) return
-
-            const selectedNode = core.state.range.commonAncestorContainer;
-
-            // Traverse up to the block element
-            let blockElement = selectedNode;
-            while (blockElement && blockElement.nodeType === Node.TEXT_NODE) {
-                blockElement = blockElement.parentNode;
-            }
-
-            if (blockElement) {
-                // Increase the margin-left (indent)
-                const currentIndent = parseInt(blockElement.style.marginLeft || '0', 10);
-                blockElement.style.marginLeft = (currentIndent + 40) + 'px';
-            }
-            core.updateCaretPosition()
-            core.elements.editor.focus();
-        }
-    },
-    'link': {
-        title: 'Link',
-        icon: SVG.LINK,
-        type: 'button',
-        click: (event, core, options) => {
-            const onInputKeydown = (event) => {
-                if (event.key === 'Enter') {
-                    event.preventDefault();
-                    button.click();
-                }
-            }
-
-
-            /* --------------- If image or text is already have link then show that link and text in respective input fields ----------------- */
-            let anchorLink = ''
-            let anchorText = '';
-            let underAnchor = false;
-            if (core.elements.selectedElement && core.elements.selectedElement.tagName === 'IMG') {
-                const imgElement = core.elements.selectedElement;
-                if (imgElement) {
-                    const imgParentNode = imgElement.parentNode
-                    if (imgParentNode.nodeName === 'A') {
-                        anchorLink = imgParentNode.href
-                        anchorText = imgElement.alt || ''
-                        underAnchor = true
-                    }
-                }
-            } else if (core.state.range) {
-                const selection = core.state.selection;
-                if (selection.rangeCount > 0) {
-                    const range = core.state.range;
-                    let parentElement = range.commonAncestorContainer;
-
-                    // If the commonAncestorContainer is a text node, use its parent element
-                    if (parentElement.nodeType === Node.TEXT_NODE) {
-                        parentElement = parentElement.parentNode;
-                    }
-
-                    if (parentElement.nodeName === 'A') {
-                        anchorLink = parentElement.getAttribute('href')
-                        anchorText = parentElement.innerText || ''
-                        underAnchor = true
-                    }
-                }
-            }
-            const body = document.createElement('div')
-            const linkLabel = document.createElement("label");
-            linkLabel.innerText = "Link";
-            linkLabel.style.display = "block";
-            linkLabel.style.paddingLeft = "4px";
-
-            const inputLink = document.createElement('input');
-            inputLink.value = anchorLink
-            inputLink.type = 'text'
-            inputLink.placeholder = 'Insert link, mail, phone no'
-            inputLink.addEventListener('keydown', onInputKeydown);
-
-            const textLabel = document.createElement("label");
-            textLabel.innerText = "Link Text";
-            textLabel.style.display = "block";
-            textLabel.style.paddingLeft = "4px";
-            textLabel.style.marginTop = "8px";
-
-            const inputText = document.createElement('input');
-            inputText.value = anchorText
-            inputText.type = 'text'
-            inputText.placeholder = 'Link text'
-            inputText.addEventListener('keydown', onInputKeydown);
-
-            const span = document.createElement('span');
-            span.className = 'warning'
-            body.append(linkLabel, inputLink, span, textLabel, inputText);
-
-            const footer = document.createElement('div')
-            const button = document.createElement('button')
-            button.type = 'button';
-            button.className = 'submit';
-            button.innerText = 'Add';
-            footer.append(button)
-
-            const modal = openModal({
-                title: "Link",
-                bodyNode: body,
-                footerNode: footer,
-
-            }, core, options)
-            inputLink.focus()
-
-            button.onclick = () => {
-                const link = formatLink(inputLink.value);
-                const value = inputText.value
-                if (isLinkValid(link)) {
-                    if (underAnchor) {
-                        if (core.elements.selectedElement && core.elements.selectedElement.tagName === 'IMG') {
-                            const imgElement = core.elements.selectedElement;
-                            if (imgElement) {
-                                const imgParentNode = imgElement.parentNode
-                                if (imgParentNode.nodeName === 'A') {
-                                    imgParentNode.href = link
-                                    imgElement.alt = value
-                                }
-                            }
-                        } else if (core.state.range) {
-                            const selection = core.state.selection;
-                            if (selection.rangeCount > 0) {
-                                const range = core.state.range;
-                                let parentElement = range.commonAncestorContainer;
-
-                                // If the commonAncestorContainer is a text node, use its parent element
-                                if (parentElement.nodeType === Node.TEXT_NODE) {
-                                    parentElement = parentElement.parentNode;
-                                }
-
-                                if (parentElement.nodeName === 'A') {
-                                    parentElement.setAttribute('href', link)
-                                    parentElement.innerText = value
-                                }
-                            }
-                        }
-                    } else if (core.elements.selectedElement && core.elements.selectedElement.tagName === 'IMG') {
-                        const a = document.createElement('a');
-                        a.href = link
-                        a.target = '_blank'
-                        core.elements.selectedElement.parentNode.insertBefore(a, core.elements.selectedElement);
-                        a.appendChild(core.elements.selectedElement);
-                        core.elements.selectedElement.alt = value
-                    } else {
-                        const a = document.createElement('a');
-                        a.href = link
-                        a.target = '_blank'
-                        a.textContent = value || link
-                        core.insertNode(a);
-                    }
-                    modal.close()
-                    core.elements.editor.focus();
-                } else {
-                    span.innerText = 'Invalid URL'
-                }
-            };
-            core.updateCaretPosition()
-        }
-    },
-    'unlink': {
-        title: 'Unlink',
-        icon: SVG.UNLINK,
-        type: 'button',
-        click: (event, core, options) => {
-            core.elements.iframeWindow.execCommand('unlink');
-            core.elements.editor.focus();
-            core.updateCaretPosition()
-        }
-    },
-    'horizontal_rule': {
-        title: 'Horizontal Rule',
-        icon: SVG.HORIZONTAL_RULE,
-        type: 'button',
-        click: (event, core, options) => {
-            core.elements.iframeWindow.execCommand('insertHorizontalRule');
-            core.elements.editor.focus();
-            core.updateCaretPosition()
-        }
-    },
-    'table': {
-        title: 'Table',
-        icon: SVG.TABLE,
-        type: 'table',
-        create: (core, options, { rows, cols, header }) => {
-            const table = document.createElement('table');
-            table.style.borderCollapse = 'collapse';
-            table.style.width = core.elements.editor.offsetWidth - 50 + 'px';
-
-            for (let i = 0; i <= rows; i++) {
-                const tr = document.createElement('tr');
-                for (let j = 0; j <= cols; j++) {
-                    const td = i === 0 && header ? document.createElement('th') : document.createElement('td');
-                    td.style.border = '1px solid black';
-                    td.appendChild(document.createTextNode('\u00A0')); // Non-breaking space
-                    tr.appendChild(td);
-                }
-                table.appendChild(tr);
-            }
-
-            core.insertNode(table);
-            core.elements.editor.focus();
-            core.updateCaretPosition()
-        }
-    },
-    'mention': {
-        title: 'Mention',
-        icon: SVG.MENTION,
-        type: 'mention',
-    },
-    'emoji': {
-        title: 'Emoji',
-        icon: SVG.EMOJI,
-        type: 'category',
-        categories: EMOJI_CATEGORIES
-    },
-    'special_character': {
-        title: 'Special Character',
-        icon: SVG.SPECIAL_CHARACTER,
-        type: 'category',
-        categories: SPECIAL_CHARACTERS
-    },
-    'pexels': {
-        title: 'Pexels',
-        icon: SVG.PEXELS,
-        type: 'gallery',
-        suggestions: async (options, page) => pexels.suggestions(options, page),
-        search: async (options, search, page) => pexels.search(options, search, page),
-    },
-    'giphy': {
-        title: 'GIPHY',
-        icon: SVG.GIPHY_SVG,
-        type: 'gallery',
-        suggestions: async (options, page) => giphy.suggestions(options, page),
-        search: async (options, search, page) => giphy.search(options, search, page),
-    },
-    'tenor': {
-        title: 'Tenor',
-        icon: SVG.TENOR,
-        type: 'gallery',
-        suggestions: async (options, next) => tenor.suggestions(options, next),
-        search: async (options, search) => tenor.search(options, search),
-    },
-    'image': {
-        title: "Image",
-        icon: SVG.IMAGE,
-        type: 'dropdown',
-        options: [
-            { label: 'Upload from device', value: 'upload' },
-            { label: 'Using Link', value: 'link' },
-        ],
-        click: async (event, core, options) => {
-            if (event.target.getAttribute('data-value') === 'upload') {
-
-                const onInputKeydown = (event) => {
-                    if (event.key === 'Enter') {
-                        event.preventDefault();
-                        button.click();
-                    }
-                };
-
-                // Top
-                const top = document.createElement('div');
-                top.style.display = 'flex';
-                top.style.gap = '16px';
-
-                // Top - left
-                const left = document.createElement('div');
-                left.style.display = 'flex';
-                left.style.flexDirection = 'column';
-                left.style.gap = '16px';
-                left.style.flex = '1';
-
-                const uploadBox = document.createElement('div');
-                uploadBox.className = `${options.classPrefix}${CLASSES.UPLOAD_IMG_BOX}`;
-                uploadBox.innerHTML = `
-                    <div style="text-align: center; color: #6b7280;">
-                        <div style="font-size: 32px; font-weight: 500;">+</div>
-                        <div style="font-size: 14px;">Click to browse files</div>
-                    </div>
-                `;
-
-                const fileInput = document.createElement('input');
-                fileInput.type = 'file';
-                fileInput.accept = MIMETYPE.IMAGE;
-                fileInput.style.display = 'none';
-                uploadBox.addEventListener('click', () => fileInput.click());
-
-                left.append(uploadBox, fileInput);
-
-                // Top - right
-                const right = document.createElement('div');
-                right.style.display = 'flex';
-                right.style.flexDirection = 'column';
-                right.style.flex = '1';
-
-                const previewBox = document.createElement('div');
-                previewBox.className = `${options.classPrefix}${CLASSES.UPLOAD_IMG_PREVIEW_BOX}`;
-
-                const imgPreview = document.createElement('img');
-                imgPreview.className = `${options.classPrefix}${CLASSES.UPLOAD_IMG_PREVIEW}`;
-                imgPreview.style.display = 'none';
-
-                previewBox.append(imgPreview);
-                right.append(previewBox);
-
-                // Complete top
-                top.append(left, right)
-
-                // other fields
-                const span = document.createElement('div');
-                span.className = 'warning';
-
-                const altLabel = document.createElement('label');
-                altLabel.innerText = 'Image Description (Alt Text)';
-                altLabel.style.display = "block";
-                altLabel.style.paddingLeft = "4px";
-                altLabel.style.marginTop = '4px';
-                altLabel.style.marginBottom = '4px';
-
-                const altInput = document.createElement('input');
-                altInput.type = 'text';
-                altInput.placeholder = 'Alternative Text';
-                altInput.addEventListener('keydown', onInputKeydown);
-
-                const body = document.createElement('div');
-                body.append(top, span, altLabel, altInput);
-
-                // Footer
-                const footer = document.createElement('div');
-                footer.style.display = 'flex';
-                footer.style.justifyContent = 'space-between';
-                footer.style.alignItems = 'center';
-
-                const button = document.createElement('button');
-                button.type = 'button';
-                button.className = 'submit';
-                button.innerText = 'Add';
-
-                footer.append(button);
-
-                const modal = openModal(
-                    {
-                        title: "Upload Image",
-                        bodyNode: body,
-                        footerNode: footer,
-                    },
-                    core,
-                    options
-                );
-                let base64String = '';
-
-                fileInput.addEventListener('change', (event) => {
-                    const file = event.target.files[0];
-                    if (file && MIMETYPE.IMAGE.includes(file.type)) {
-                        const reader = new FileReader();
-                        reader.onload = () => {
-                            base64String = reader.result;
-                            imgPreview.src = base64String;
-                            imgPreview.style.display = 'block';
-                        };
-                        reader.readAsDataURL(file);
-                        span.innerText = "";
-                    }
-                });
-
-                fileInput.addEventListener('click', async () => {
-                    let fileFromNative = await core.handleFilePicker(MIMETYPE.IMAGE.split(','), 'image');
-
-                    if (fileFromNative) {
-                        base64String = fileFromNative.data;
-                        fileNameSpan.innerText = fileFromNative.name;
-                        imgPreview.src = base64String;
-                        imgPreview.style.display = 'block';
-                        span.innerText = ""; // Clear warning if file is selected
-
-                    }
-                });
-
-                button.onclick = async () => {
-                    if (!base64String) {
-                        span.innerText = 'Image not selected';
-                        return;
-                    }
-                    button.disabled = true;
-                    const originalText = button.innerText;
-                    button.innerHTML = ` <span style="margin-left: 8px;">${originalText}</span> ${SVG.SPINNER}`
-                    const img = document.createElement('img');
-                    img.src = await core.manuplateImage('base64', base64String);
-                    img.alt = altInput.value || "";
-                    button.innerText = originalText
-
-                    core.insertNode(img);
-                    modal.close();
-                };
-
-            }
-            else if (event.target.getAttribute('data-value') === 'link') {
-                const onInputKeydown = (event) => {
-                    if (event.key === 'Enter') {
-                        event.preventDefault();
-                        button.click();
-                    }
-                }
-
-                const body = document.createElement('div')
-
-                const linkLabel = document.createElement("label");
-                linkLabel.innerText = "Link";
-                linkLabel.style.display = "block";
-                linkLabel.style.paddingLeft = "4px";
-
-                const input = document.createElement('input');
-                input.value = ''
-                input.type = 'text'
-                input.placeholder = 'Insert the link'
-                input.addEventListener('keydown', onInputKeydown);
-
-                const textLabel = document.createElement("label");
-                textLabel.innerText = "Alternative Text";
-                textLabel.style.display = "block";
-                textLabel.style.marginTop = "8px";
-                textLabel.style.paddingLeft = "4px";
-
-                const altInput = document.createElement('input');
-                altInput.value = ''
-                altInput.style.marginTop = '4px'
-                altInput.type = 'text'
-                altInput.placeholder = 'Alternative Text'
-                altInput.addEventListener('keydown', onInputKeydown);
-
-                const span = document.createElement('span');
-                span.className = 'warning'
-                body.append(linkLabel, input, span, textLabel, altInput);
-
-                const footer = document.createElement('div')
-                const button = document.createElement('button')
-                button.type = 'button';
-                button.className = 'submit';
-                button.innerText = 'Add';
-                footer.append(button)
-
-                const modal = openModal({
-                    title: "Image",
-                    bodyNode: body,
-                    footerNode: footer,
-
-                }, core, options)
-
-                button.onclick = () => {
-                    const value = input.value
-                    if (REGEX.URL.test(value)) {
-                        button.disabled = true;
-                        const img = document.createElement('img');
-                        img.src = value
-                        img.alt = altInput.value
-                        core.insertNode(img);
-                        modal.close()
-                    } else {
-                        span.innerText = 'Invalid url'
-                    }
-                };
-            }
-            core.elements.editor.focus();
-            core.updateCaretPosition()
-        }
-    },
-    'video': {
-        title: "Video",
-        icon: SVG.VIDEO,
-        type: 'button',
-        click: (event, core) => {
-            const fileInput = document.createElement('input');
-            fileInput.type = 'file';
-            fileInput.accept = MIMETYPE.VIDEO
-            fileInput.style.display = 'none';
-            fileInput.addEventListener('change', async (event) => {
-                const file = event.target.files[0]
-                if (MIMETYPE.VIDEO.includes(file.type)) {
-                    const url = await core.uploadVideo(file);
-                    if (url) {
-                        const a = document.createElement('a');
-                        a.href = url.videoUrl
-                        a.dataset.leksyPreview = 'video-url'
-                        a.target = '_blank'
-                        const img = document.createElement('img');
-                        img.src = url.thumbnailUrl
-                        a.appendChild(img)
-                        core.insertNode(a);
-                    }
-                }
-            });
-
-            fileInput.addEventListener('click', async () => {
-                let file = await core.handleFilePicker(MIMETYPE.VIDEO.split(','), 'video');
-                if (file && MIMETYPE.VIDEO.includes(file?.type)) {
-                    const url = await core.uploadVideo(file);
-                    if (url) {
-                        const a = document.createElement('a');
-                        a.href = url.videoUrl
-                        a.dataset.leksyPreview = 'video-url'
-                        a.target = '_blank'
-                        const img = document.createElement('img');
-                        img.src = url.thumbnailUrl
-                        a.appendChild(img)
-                        core.insertNode(a);
-                    }
-                }
-            });
-
-            fileInput.click();
-            core.updateCaretPosition()
-            core.elements.editor.focus();
-        }
-    },
-    'attachment': {
-        title: 'Attachment',
-        icon: SVG.ATTACHMENT,
-        type: 'button',
-        click: (event, core) => {
-            const fileInput = document.createElement('input');
-            fileInput.type = 'file';
-            fileInput.style.display = 'none';
-            fileInput.multiple = true;
-            fileInput.addEventListener('change', (event) => {
-                core.onAttachment(event.target.files);
-            });
-
-            fileInput.addEventListener('click', async () => {
-                let files = await core.handleFilePicker(["*"], 'attachment');
-                if (files) {
-                    core.onAttachment(files);
-                }
-
-            });
-            fileInput.click();
-            core.updateCaretPosition()
-        }
-    },
-    'cut': {
-        title: 'Cut',
-        icon: SVG.CUT,
-        type: 'button',
-        click: (event, core) => {
-            if (!core.state.range) return
-            core.elements.editor.focus();
-
-            const container = document.createElement('div');
-            container.appendChild(core.state.range.cloneContents());
-            const htmlContent = container.innerHTML;
-
-            const clipboardItem = new ClipboardItem({
-                'text/html': new Blob([htmlContent], { type: 'text/html' })
-            });
-            navigator.clipboard.write([clipboardItem]).then(() => {
-                core.state.range.deleteContents();
-                core.updateCaretPosition();
-            })
-        }
-    },
-    'copy': {
-        title: 'Copy',
-        icon: SVG.COPY,
-        type: 'button',
-        click: (event, core) => {
-            if (!core.state.range) return
-            core.elements.editor.focus();
-
-            const container = document.createElement('div');
-            container.appendChild(core.state.range.cloneContents());
-            const htmlContent = container.innerHTML;
-
-            const clipboardItem = new ClipboardItem({
-                'text/html': new Blob([htmlContent], { type: 'text/html' })
-            });
-            navigator.clipboard.write([clipboardItem]).then(() => {
-                core.updateCaretPosition();
-            })
-        }
-    },
-    'paste': {
-        title: 'Paste',
-        icon: SVG.PASTE,
-        type: 'button',
-        click: async (event, core) => {
-            core.elements.editor.focus();
-
-            const clipboardItems = await navigator.clipboard.read();
-            let pastedContentNode;
-
-            for (const item of clipboardItems) {
-                if (item.types.includes('text/html')) {
-                    const blob = await item.getType('text/html');
-                    const container = document.createElement('div');
-                    if (blob) {
-                        container.innerHTML = await blob.text();
-                        pastedContentNode = container;
-                    }
-                    break;
-                } else if (item.types.includes('text/plain')) {
-                    const blob = await item.getType('text/plain');
-                    const plainTextContent = await blob.text();
-                    pastedContentNode = document.createTextNode(plainTextContent);
-                    break;
-                }
-                else if (item.types.find(type => type.startsWith('image/'))) {
-                    const blob = await item.getType(item.types.find(type => type.startsWith('image/')));
-                    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);
-                        pastedContentNode = img;
-                    };
-
-                    reader.readAsDataURL(blob);
-                    break;
-                }
-            }
-            if (pastedContentNode) {
-                core.state.range.deleteContents();
-                core.insertNode(pastedContentNode)
-            }
-            core.updateCaretPosition();
-        }
-    },
-    'select_all': {
-        title: 'Select All',
-        icon: SVG.SELECT_ALL,
-        type: 'button',
-        click: (event, core) => {
-            core.elements.editor.focus();
-            core.elements.iframeWindow.execCommand('selectAll');
-            core.updateCaretPosition()
-        }
-    },
-    'fullscreen': {
-        title: 'Full screen',
-        icon: SVG.FULLSCREEN,
-        type: 'button',
-        click: (event, core) => {
-            const isExists = core.elements.base.classList.toggle('fullscreen')
-            changeToolbarHtmlByName(core, 'fullscreen', isExists ? SVG.FULLSCREEN_EXIT : SVG.FULLSCREEN)
-        }
-    },
-    'print': {
-        title: 'Print',
-        icon: SVG.PRINT,
-        type: 'button',
-        click: (event, core) => {
-            core.elements.iframeContainer.contentWindow.print()
-        }
-    },
-    'embed': {
-        title: 'Embed Link',
-        icon: SVG.EMBED,
-        type: 'button',
-        click: (event, core, options) => {
-            const onInputKeydown = (event) => {
-                if (event.key === 'Enter') {
-                    event.preventDefault();
-                    button.click();
-                }
-            };
-
-            const body = document.createElement('div');
-            body.className = "link"
-
-            // Input for Embed URL
-            const embedLabel = document.createElement("label");
-            embedLabel.innerText = "Embed URL";
-            embedLabel.style.display = "block";
-            embedLabel.style.paddingLeft = "4px";
-            const urlInput = document.createElement('input');
-            urlInput.type = 'text';
-            urlInput.placeholder = 'Enter Embed URL';
-            urlInput.style.marginBottom = '10px';
-            urlInput.addEventListener('keydown', onInputKeydown);
-
-            // Input for Width (%)
-            const widthLabel = document.createElement("label");
-            widthLabel.innerText = "Width";
-            widthLabel.style.display = "block";
-            widthLabel.style.paddingLeft = "4px";
-            const widthInput = document.createElement('input');
-            widthInput.type = 'text';
-            widthInput.placeholder = 'Width (px)';
-            widthInput.style.marginBottom = '10px';
-            widthInput.value = "400"; // Default to 400px
-
-            // Input for Height (%)
-            const heightLabel = document.createElement("label");
-            heightLabel.innerText = "Height";
-            heightLabel.style.display = "block";
-            heightLabel.style.paddingLeft = "4px";
-            const heightInput = document.createElement('input');
-            heightInput.type = 'text';
-            heightInput.placeholder = 'Height (px)';
-            heightInput.style.marginBottom = '10px';
-            heightInput.value = "400"; // Default to 400px
-
-            // Warning span
-            const span = document.createElement('span');
-            span.className = 'warning';
-
-            body.append(embedLabel, urlInput, widthLabel, widthInput, heightLabel, heightInput, span);
-
-            const footer = document.createElement('div');
-            const button = document.createElement('button');
-            button.type = 'button';
-            button.className = 'submit';
-            button.innerText = 'Add';
-            footer.append(button);
-
-            const modal = openModal(
-                {
-                    title: "Embed URL",
-                    bodyNode: body,
-                    footerNode: footer,
-                },
-                core,
-                options
-            );
-
-            button.onclick = () => {
-                const enteredUrl = urlInput.value.trim();
-
-                const { platform, id } = extractSocialMediaId(enteredUrl);
-                if (!platform || !id) {
-                    span.innerText = 'Invalid URL';
-                    return;
-                }
-
-                const url = constructEmbedUrl(platform, id);
-                if (!url) {
-                    span.innerText = 'Unsupported platform';
-                    return;
-                }
-                const wrapper = document.createElement('figure');
-                wrapper.className = 'iframe-wrapper';
-                wrapper.style.height = `${heightInput.value}px`
-                wrapper.style.width = `${widthInput.value}px`
-                const embed = document.createElement('iframe');
-                embed.src = url;
-                embed.style.display = "inline-block"
-                embed.style.height = "100%"
-                embed.style.width = "100%"
-                embed.style.border = "none";
-                wrapper.append(embed)
-                core.insertNode(wrapper);
-                modal.close();
-            };
-            core.elements.editor.focus();
-            core.updateCaretPosition()
-        }
-    },
-    'table_of_content': {
-        title: 'Table of Content',
-        icon: SVG.TABLE_OF_CONTENT,
-        type: 'button',
-        click: (event, core, options) => {
-            insertTOC(core, options);
-        }
-    },
-
-}
-
-export default PLUGINS
-export {
-    applyTextFormat,
-    applyOrderList,
-    applyUnorderedList
-}