leksy-editor 1.0.7 → 1.0.9

package/constant.js

@@ -362,7 +362,10 @@ const TABLE_PLUGINS = [
     { icon: SVG.CELL_BORDER_FULL, title: 'Border None', event: 'cell-border-none' },
 
     { icon: SVG.FIXED_COLUMN_WIDTH, title: 'Fixed Column', event: 'fixed-column-width' },
-    { icon: SVG.COLOR, title: 'Color', event: 'border-color' },
+    { icon: SVG.COLOR, title: 'Cell Border Color', event: 'border-color' },
+    { icon: SVG.COLOR, title: 'Cell Background Color', event: 'background-color' },
+    { icon: SVG.COLOR, title: 'Row Background Color', event: 'row-background-color' },
+    { icon: SVG.COLOR, title: 'Column Background Color', event: 'column-background-color' },
 ]
 
 const EMOJI_CATEGORIES = [

package/index.js

@@ -144,8 +144,8 @@ class LeksyEditor {
                 }
                 return content
             },
-            handleFilePicker: async (mimeType,type) => {
-                if (editorRef.handleFilePicker instanceof Function) {return await editorRef.handleFilePicker(mimeType,type)}
+            handleFilePicker: async (mimeType, type) => {
+                if (editorRef.handleFilePicker instanceof Function) { return await editorRef.handleFilePicker(mimeType, type) }
                 return null
 
             },
@@ -583,7 +583,7 @@ class LeksyEditor {
 
             if (element.tagName === "A") showAnchorPopover(e.target, e.pageX, e.pageY, options, core)
             if (element.tagName === 'IMG') initImageResizer('image', e.target, options, core)
-            if (element.tagName === 'TD') initTableEditPlugin(e.target, options, core)
+            if (element.tagName === 'TD' || element.tagName === 'TH') initTableEditPlugin(e.target, options, core)
             if (element.tagName === "FIGURE") initImageResizer('figure', e.target, options, core)
         }
         contentEditableDiv.onpaste = (e) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leksy-editor",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "Leksy Editor is an alternative to traditional WYSIWYG editors, designed primarily for creating mail templates, blogs, and documents without any content manipulation.",
   "main": "index.js",
   "directories": {

package/plugin.js

@@ -87,6 +87,7 @@ const PLUGINS = {
         click: (event, core) => {
             core.elements.editor.focus();
             core.elements.iframeWindow.execCommand('justifyFull');
+            core.resizerHandler()
             core.updateCaretPosition()
 
             changeToolbarStateByName(core, 'active', ['align_justify'])
@@ -100,6 +101,7 @@ const PLUGINS = {
         click: (event, core) => {
             core.elements.editor.focus();
             core.elements.iframeWindow.execCommand('justifyLeft');
+            core.resizerHandler()
             core.updateCaretPosition()
 
             changeToolbarStateByName(core, 'active', ['align_left'])
@@ -113,6 +115,7 @@ const PLUGINS = {
         click: (event, core) => {
             core.elements.editor.focus();
             core.elements.iframeWindow.execCommand('justifyRight');
+            core.resizerHandler()
             core.updateCaretPosition()
 
             changeToolbarStateByName(core, 'active', ['align_right'])
@@ -126,6 +129,7 @@ const PLUGINS = {
         click: (event, core) => {
             core.elements.editor.focus();
             core.elements.iframeWindow.execCommand('justifyCenter');
+            core.resizerHandler()
             core.updateCaretPosition()
 
             changeToolbarStateByName(core, 'active', ['align_center'])
@@ -643,7 +647,7 @@ const PLUGINS = {
         title: 'Table',
         icon: SVG.TABLE,
         type: 'table',
-        create: (core, options, { rows, cols }) => {
+        create: (core, options, { rows, cols, header }) => {
             const table = document.createElement('table');
             table.style.borderCollapse = 'collapse';
             table.style.width = core.elements.editor.offsetWidth - 50 + 'px';
@@ -651,7 +655,7 @@ const PLUGINS = {
             for (let i = 0; i <= rows; i++) {
                 const tr = document.createElement('tr');
                 for (let j = 0; j <= cols; j++) {
-                    const td = document.createElement('td');
+                    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);
@@ -899,7 +903,7 @@ const PLUGINS = {
 
             fileInput.addEventListener('click', async () => {
                 let file = await core.handleFilePicker(MIMETYPE.VIDEO.split(','), 'video');
-                if (MIMETYPE.VIDEO.includes(file.type)) {
+                if (file && MIMETYPE.VIDEO.includes(file?.type)) {
                     const url = await core.uploadVideo(file);
                     if (url) {
                         const a = document.createElement('a');
@@ -932,7 +936,9 @@ const PLUGINS = {
 
             fileInput.addEventListener('click', async () => {
                 let files = await core.handleFilePicker(["*"], 'attachment');
-                core.onAttachment(files);
+                if (files) {
+                    core.onAttachment(files);
+                }
 
             });
             fileInput.click();

package/utilities.js

@@ -44,7 +44,7 @@ const traverseAndClean = (element, options, core) => {
                 attributesToRemove.forEach(attr => node.removeAttribute(attr));
 
                 // Process child nodes
-                traverseAndClean(node, options,core);
+                traverseAndClean(node, options, core);
             }
         }
     }
@@ -367,6 +367,26 @@ const makeToolbarDropdown = (_plugin, options, core) => {
     } else if (_plugin.type === 'table') {
         const totalRows = 10;
         const totalCols = 10;
+
+        // Create wrapper for table and checkbox
+        const wrapper = document.createElement('div');
+        wrapper.className = 'toolbar-table-wrapper'
+
+        // Create header checkbox
+        const headerOption = document.createElement('label');
+        headerOption.style.display = 'block';
+        headerOption.style.marginBottom = '8px';
+
+        const checkbox = document.createElement('input');
+        checkbox.type = 'checkbox';
+        checkbox.checked = true; // Default to include header
+        checkbox.style.marginRight = '6px';
+
+        headerOption.appendChild(checkbox);
+        headerOption.appendChild(document.createTextNode('Include header row'));
+
+        wrapper.appendChild(headerOption);
+
         const table = document.createElement('div');
         table.className = `${options.classPrefix}${CLASSES.TOOLBAR_TABLE}`
 
@@ -397,14 +417,15 @@ const makeToolbarDropdown = (_plugin, options, core) => {
                     });
                 });
                 cell.addEventListener('click', () => {
-                    _plugin.create(core, options, { rows: i, cols: j })
+                    _plugin.create(core, options, { rows: i, cols: j, header: checkbox.checked })
                     dropdownContent.style.display = 'none'
                 });
 
                 table.appendChild(cell);
             }
         }
-        dropdownContent.appendChild(table)
+        wrapper.appendChild(table);
+        dropdownContent.appendChild(wrapper);
     }
 
     let isSuggestionLoaded = false;
@@ -739,23 +760,39 @@ const makeEditToolbar = (options, core, { type, td, image, updateImage, updateTa
         const pluginSet = document.createElement('div')
         pluginSet.className = `${options.classPrefix}${CLASSES.RESIZE_ITEMS} `
         TABLE_PLUGINS.forEach(plugin => {
-            const pluginButton = plugin.event === 'border-color'
-                ? document.createElement('input')
-                : document.createElement('button');
-            if (plugin.event === 'border-color') {
-                pluginButton.type = "color"
-                pluginButton.style.width = '30px'
-                pluginButton.style.padding = '4px'
-                pluginButton.oninput = (e) => {
+            const isColorInput =
+                plugin.event === 'border-color' ||
+                plugin.event === 'background-color' ||
+                plugin.event === 'row-background-color' ||
+                plugin.event === 'column-background-color';
+
+            if (isColorInput) {
+                const label = document.createElement('label');
+                label.className = `${options.classPrefix}${CLASSES.RESIZE_ITEM}`;
+                label.setAttribute('data-title', plugin.title);
+                label.style.display = 'inline-block';
+                label.style.cursor = 'pointer';
+
+                const pluginInput = document.createElement('input');
+                pluginInput.type = "color";
+                pluginInput.style.width = '30px';
+                pluginInput.style.padding = '4px';
+                pluginInput.style.border = 'none';
+                pluginInput.style.background = 'transparent';
+                pluginInput.style.cursor = 'pointer';
+                pluginInput.oninput = (e) => {
                     updateTable(plugin.event, e.target.value);
-                }
-            } else
-                pluginButton.type = "button"
-            pluginButton.className = `${options.classPrefix}${CLASSES.RESIZE_ITEM} `
-            pluginButton.setAttribute('data-title', plugin.title)
-            pluginButton.setAttribute('data-type', 'button')
+                };
+
+                label.appendChild(pluginInput);
+                pluginSet.appendChild(label);
+            } else {
+                const pluginButton = document.createElement('button');
+                pluginButton.type = "button";
+                pluginButton.className = `${options.classPrefix}${CLASSES.RESIZE_ITEM}`;
+                pluginButton.setAttribute('data-title', plugin.title);
+                pluginButton.setAttribute('data-type', 'button');
 
-            if (plugin.event !== 'border-color') {
                 pluginButton.onclick = (e) => {
                     e.preventDefault();
                     updateTable(plugin.event);
@@ -763,10 +800,11 @@ const makeEditToolbar = (options, core, { type, td, image, updateImage, updateTa
 
                 const pluginIcon = document.createElement('div');
                 pluginIcon.innerHTML = plugin.icon;
-                pluginButton.appendChild(pluginIcon)
+                pluginButton.appendChild(pluginIcon);
+                pluginSet.appendChild(pluginButton);
             }
-            pluginSet.appendChild(pluginButton)
-        })
+        });
+
         popoverContent.appendChild(pluginSet)
 
         popoverButton.onclick = () => {
@@ -831,7 +869,7 @@ const openModal = ({ title, bodyNode, footerNode }, core, options) => {
 
 const initImageResizer = (type, image, options, core) => {
     destroyImageResizer(options, core)
-    changeAllToolbarState(core, 'disabled', ['link'])
+    changeAllToolbarState(core, 'disabled', ['link', 'align_justify', 'align_left', 'align_right', 'align_center'])
     core.elements.editor.blur() // to remove focus from the editor
 
     const imageClientRect = image.getBoundingClientRect();
@@ -1411,6 +1449,27 @@ const initTableEditPlugin = (td, options, core) => {
                 }
                 break;
             }
+            case 'background-color': {
+                td.style.backgroundColor = value;
+                break;
+            }
+            case 'row-background-color': {
+                const row = td.parentElement;
+                for (let i = 0; i < row.cells.length; i++) {
+                    row.cells[i].style.backgroundColor = value;
+                }
+                break;
+            }
+            case 'column-background-color': {
+                for (let r = 0; r < table.rows.length; r++) {
+                    const cell = table.rows[r].cells[cellIndex];
+                    if (cell) {
+                        cell.style.backgroundColor = value;
+                    }
+                }
+                break;
+            }
+
         }
     }