leksy-editor 1.0.4 → 1.0.6

package/constant.js

@@ -1,4 +1,4 @@
-const WHILE_LISTED_TAG = "br|p|div|pre|blockquote|h1|h2|h3|h4|h5|h6|ol|ul|li|hr|figure|figcaption|img|iframe|audio|video|source|table|thead|tbody|tr|th|td|a|b|strong|var|i|em|u|ins|s|span|strike|del|sub|sup|code|svg|path|details|summary|font|article|section|main|header|footer|aside|mark|cite|abbr|dfn|nav|caption|picture|dl|dt|dd"
+const WHILE_LISTED_TAG = "br|p|div|pre|blockquote|h|h1|h2|h3|h4|h5|h6|ol|ul|li|hr|figure|figcaption|img|iframe|audio|video|source|table|thead|tbody|tr|th|td|a|b|strong|var|i|em|u|ins|s|span|strike|del|sub|sup|code|svg|path|details|summary|font|article|section|main|header|footer|aside|mark|cite|abbr|dfn|nav|caption|picture|dl|dt|dd|time|label|kbd|samp|wbr";
 const WHILE_LISTED_ATTRIBUTES = "align|alt|bgcolor|border|cellpadding|cellspacing|color|colspan|contenteditable|dir|download|face|height|href|lang|name|rowspan|size|src|style|target|title|valign|width|background|media|sizes|srcset";
 
 const REGEX = {

package/index.js

@@ -20,6 +20,7 @@ class LeksyEditor {
      * @property {String} pexelsApiKey
      * @property {String} tenorApiKey
      * @property {Object} cssVariables
+     * @property {Boolean} disablePastedColorStyles
      */
     /**
      * 
@@ -457,7 +458,7 @@ class LeksyEditor {
                     CSS_VARIABLES[key] = cssVariable[key];
                 }
             });
-        
+
             CSS.IFRAME_VARIABLES = `
                 :root {
                     --primary: ${CSS_VARIABLES.primary};
@@ -601,12 +602,12 @@ class LeksyEditor {
             }
 
             const pastedData = clipboardData.getData('text/html') || clipboardData.getData('text/plain');
-            core.elements.iframeWindow.execCommand('insertHtml', false, cleanHTML(pastedData))
+            core.elements.iframeWindow.execCommand('insertHtml', false, cleanHTML(pastedData, options, core))
         };
         contentEditableDiv.ondrop = (e) => {
             e.preventDefault();
             const droppedData = e.dataTransfer.getData('text/html') || e.dataTransfer.getData('text/plain');
-            core.elements.iframeWindow.execCommand('insertHtml', false, cleanHTML(droppedData))
+            core.elements.iframeWindow.execCommand('insertHtml', false, cleanHTML(droppedData, options, core))
         };
         contentEditableDiv.onblur = (e) => {
             core.onBlur(e.target.innerHTML)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leksy-editor",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "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

@@ -136,12 +136,12 @@ const PLUGINS = {
         title: 'Code View',
         icon: SVG.CODE_VIEW,
         type: 'button',
-        click: (event, core) => {
+        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)
+                const _cleanHTML = cleanHTML(core.elements.codeview.value, options, core)
                 core.onChange(_cleanHTML);
                 core.elements.editor.innerHTML = _cleanHTML
                 core.elements.editor.focus()
@@ -314,6 +314,42 @@ const PLUGINS = {
             core.updateCaretPosition()
         }
     },
+    'remove_font_color': {
+        title: 'Remove Font Color',
+        icon: `${SVG.REMOVE_FORMAT}${SVG.FONT_COLOR}`,
+        type: "button",
+        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,
@@ -324,6 +360,15 @@ const PLUGINS = {
             core.updateCaretPosition()
         }
     },
+    'remove_highlight_color': {
+        title: 'Remove Highlight Color',
+        icon: `${SVG.REMOVE_FORMAT}${SVG.HIGHLIGHT_COLOR}`,
+        type: "button",
+        click: (event, core, options) => {
+            core.elements.iframeWindow.execCommand('hiliteColor', false, "transparent"); // Apply color to selected text
+            core.updateCaretPosition()
+        }
+    },
     'text_style': {
         title: 'Text Style',
         icon: SVG.TEXT_STYLE,

package/utilities.js

@@ -1,6 +1,6 @@
 import { CLASSES, FONT_SIZES, FONTS, FORMATS, GIPHY_POWERED_IMAGE, REGEX, RESIZER_PLUGINS, SOCIAL_MEDIA_BASEURLS, SOCIAL_MEDIA_PATTERNS, SVG, TABLE_PLUGINS } from "./constant";
 
-const traverseAndClean = (element) => {
+const traverseAndClean = (element, options, core) => {
     if (!element?.childNodes) return;
 
     // Iterate through child nodes
@@ -22,22 +22,58 @@ const traverseAndClean = (element) => {
                         attributesToRemove.push(attr.name);
                     }
                 }
+                if (options?.disablePastedColorStyles) {
+                    const nodeStyles = node.style
+                    let bgColor = nodeStyles.backgroundColor;
+                    let textColor = nodeStyles.color;
+                    let currentNode = core?.state.range.startContainer;
+                    let bodyBg = getEffectiveBackgroundColor(currentNode);
+                    if (bodyBg && bodyBg?.startsWith('rgb')) {
+                        bodyBg = rgbToHex(bodyBg)
+                    }
+                    if (bgColor && bgColor?.startsWith('rgb')) {
+                        bgColor = rgbToHex(bgColor)
+                    }
+                    if (textColor && textColor?.startsWith('rgb')) {
+                        textColor = rgbToHex(textColor)
+                    }
+
+                    if (bodyBg === bgColor) node.style.removeProperty('background-color');
+                    if (bodyBg === textColor) node.style.removeProperty('color');
+                }
                 attributesToRemove.forEach(attr => node.removeAttribute(attr));
 
                 // Process child nodes
-                traverseAndClean(node);
+                traverseAndClean(node, options,core);
             }
         }
     }
 }
 
-const cleanHTML = (html) => {
+const getEffectiveBackgroundColor = (element) => {
+    let el = element;
+    while (el) {
+        const bgColor = window.getComputedStyle(el).backgroundColor;
+
+        if (bgColor !== 'rgba(0, 0, 0, 0)' &&
+            bgColor !== 'transparent' &&
+            bgColor !== '') {
+            return bgColor;
+        }
+
+        el = el !== document.body ? el.parentElement : null;
+    }
+    const bodyBg = window.getComputedStyle(document.body).backgroundColor;
+    return bodyBg
+}
+
+const cleanHTML = (html, options, core) => {
     // Create a temporary div to manipulate the HTML
     const tempDiv = document.createElement('div');
     tempDiv.innerHTML = html;
 
     // Traverse through all elements and clean attributes
-    traverseAndClean(tempDiv);
+    traverseAndClean(tempDiv, options, core);
 
     // Return manipulated HTML
     return tempDiv.innerHTML;
@@ -142,6 +178,7 @@ const makeToolbarColor = (_plugin, options, core) => {
 
     const pluginIcon = document.createElement('div');
     pluginIcon.innerHTML = _plugin.icon;
+    pluginIcon.onclick = () => pluginButton.click()
     pluginContainer.append(pluginButton, pluginIcon)
     return pluginContainer
 }