leksy-editor 1.0.0

package/plugin.js

@@ -0,0 +1,1055 @@
+import { EMOJI_CATEGORIES, FONT_SIZE_OPTIONS, FONTS, FORMAT_OPTIONS, MIMETYPE, REGEX, SPECIAL_CHARACTERS, SVG } from "./constant"
+import { giphy, pexels, tenor } from "./gallery";
+import { changeAllToolbarState, changeToolbarHtmlByName, changeToolbarStateByName, changeToolbarValueByName, cleanHTML, constructEmbedUrl, extractSocialMediaId, openModal } 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 applyOrderList = (core) => {
+    core.elements.iframeWindow.execCommand('insertOrderedList');
+    core.elements.editor.focus();
+    core.updateCaretPosition()
+
+    const isActive = core.elements.iframeWindow.queryCommandState('insertOrderedList');
+    if (isActive) changeToolbarStateByName(core, 'active', ['ordered_list'])
+    else changeToolbarStateByName(core, 'inactive', ['ordered_list'])
+    changeToolbarStateByName(core, 'inactive', ['unordered_list'])
+}
+
+const PLUGINS = {
+    'undo': {
+        title: 'Undo',
+        icon: SVG.UNDO,
+        type: 'button',
+        click: (event, core) => {
+            core.history.undo()
+            core.updateCaretPosition()
+        }
+    },
+    'redo': {
+        title: 'Redo',
+        icon: SVG.REDO,
+        type: 'button',
+        click: (event, core) => {
+            core.history.redo()
+            core.updateCaretPosition()
+        }
+    },
+    '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.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.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.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.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) => {
+            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)
+                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',
+        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();
+            core.elements.iframeWindow.execCommand('formatBlock', false, tag);
+
+            core.updateCaretPosition()
+            changeToolbarValueByName(core, 'format-block', tag)
+        }
+    },
+    'ordered_list': {
+        title: "Ordered List",
+        icon: SVG.LIST_NUMBER,
+        type: 'button',
+        click: (event, core, options) => {
+            core.elements.editor.focus();
+            core.elements.iframeWindow.execCommand('insertOrderedList');
+            core.updateCaretPosition()
+
+            const isActive = core.elements.iframeWindow.queryCommandState('insertOrderedList');
+            if (isActive) changeToolbarStateByName(core, 'active', ['ordered_list'])
+            else changeToolbarStateByName(core, 'inactive', ['ordered_list'])
+            changeToolbarStateByName(core, 'inactive', ['unordered_list'])
+        }
+    },
+    'unordered_list': {
+        title: "Unordered List",
+        icon: SVG.LIST_BULLETS,
+        type: 'button',
+        click: (event, core, options) => {
+            core.elements.editor.focus();
+            core.elements.iframeWindow.execCommand('insertUnorderedList');
+            core.updateCaretPosition()
+
+            const isActive = core.elements.iframeWindow.queryCommandState('insertUnorderedList');
+            if (isActive) changeToolbarStateByName(core, 'active', ['unordered_list'])
+            else changeToolbarStateByName(core, 'inactive', ['unordered_list'])
+            changeToolbarStateByName(core, 'inactive', ['ordered_list'])
+        }
+    },
+    '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()
+        }
+    },
+    '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()
+        }
+    },
+    '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' }
+        ],
+        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;
+                }
+            }
+            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()
+        }
+    },
+    '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()
+        }
+    },
+    '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 inputLink = document.createElement('input');
+            inputLink.value = anchorLink
+            inputLink.type = 'text'
+            inputLink.placeholder = 'Insert the link'
+            inputLink.addEventListener('keydown', onInputKeydown);
+
+            const inputText = document.createElement('input');
+            inputText.value = anchorText
+            inputText.type = 'text'
+            inputText.style.marginTop = '8px'
+            inputText.placeholder = 'Link text'
+            inputText.addEventListener('keydown', onInputKeydown);
+
+            const span = document.createElement('span');
+            span.className = 'warning'
+            body.append(inputLink, inputText, 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: "Link",
+                bodyNode: body,
+                footerNode: footer,
+
+            }, core, options)
+            inputLink.focus()
+
+            button.onclick = () => {
+                const link = inputLink.value
+                const value = inputText.value
+                if (REGEX.URL.test(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()
+                } 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 }) => {
+            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 = 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: (event, core, options) => {
+            if (event.target.getAttribute('data-value') === 'upload') {
+
+                const onInputKeydown = (event) => {
+                    if (event.key === 'Enter') {
+                        event.preventDefault();
+                        button.click();
+                    }
+                };
+
+                const body = document.createElement('div');
+
+                const fileInput = document.createElement('input');
+                fileInput.type = 'file';
+                fileInput.accept = MIMETYPE.IMAGE;
+
+                const altInput = document.createElement('input');
+                altInput.type = 'text';
+                altInput.placeholder = 'Alternative Text';
+                altInput.style.marginTop = '10px';
+                altInput.addEventListener('keydown', onInputKeydown);
+
+                const span = document.createElement('span');
+                span.className = 'warning';
+
+                body.append(fileInput, altInput, 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: "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 = async function (e) {
+                            base64String = e.target.result;
+                        };
+
+                        reader.readAsDataURL(file);
+                        span.innerText = ""; // Clear warning if file is selected
+                    }
+                });
+                button.onclick = async () => {
+                    if (!base64String) {
+                        span.innerText = 'Image not selected';
+                        return;
+                    }
+
+                    const img = document.createElement('img');
+                    img.src = await core.manuplateImage('base64', base64String);
+                    img.alt = altInput.value || "";
+
+                    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 input = document.createElement('input');
+                input.value = ''
+                input.type = 'text'
+                input.placeholder = 'Insert the link'
+                input.addEventListener('keydown', onInputKeydown);
+
+                const altInput = document.createElement('input');
+                altInput.value = ''
+                altInput.style.marginTop = '10px'
+                altInput.type = 'text'
+                altInput.placeholder = 'Alternative Text'
+                altInput.addEventListener('keydown', onInputKeydown);
+
+                const span = document.createElement('span');
+                span.className = 'warning'
+                body.append(input, altInput, 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: "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.target = '_blank'
+                        const img = document.createElement('img');
+                        img.src = url.thumbnailUrl
+                        a.appendChild(img)
+                        core.insertNode(a);
+                    }
+                }
+            });
+            fileInput.click();
+            core.updateCaretPosition()
+        }
+    },
+    '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.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 urlInput = document.createElement('input');
+            urlInput.type = 'text';
+            urlInput.placeholder = 'Enter Embed URL';
+            urlInput.style.marginBottom = '10px';
+            urlInput.addEventListener('keydown', onInputKeydown);
+
+            // Input for Width (%)
+            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 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(urlInput, widthInput, 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()
+        }
+    }
+}
+
+export default PLUGINS
+export {
+    applyTextFormat,
+    applyOrderList,
+}