leksy-editor 1.4.0 → 1.4.1

package/README.md

@@ -99,6 +99,7 @@ const app = createApp({
 | `tenorApiKey` | API key for Tenor integration. |
 | `cssVariables` | Custom CSS styling variables for multiple themes and modes. |
 | `disablePastedColorStyles` | Remove color-related CSS while pasting. |
+| `removeColorsWhilePasting` | Remove all color and bg color CSS while pasting. |
 | `autoHeight` | Automatically adjusts height based on content. |
 | `height` | Height for the editor. |
 | `maxHeight` | Maximum height for the editor. |

package/constant.js

@@ -50,6 +50,9 @@ const CLASSES = {
     PREVIEW_MODAL_CONTENT: '-preview-modal-content',
     PREVIEW_MODAL_CLOSE: '-preview-modal-close',
     PREVIEW_MODAL_BODY: '-preview-modal-body',
+    UPLOAD_IMG_BOX: '-upload-img-box',
+    UPLOAD_IMG_PREVIEW_BOX: '-upload-img-preview-box',
+    UPLOAD_IMG_PREVIEW: '-upload-img-preview',
 }
 
 const SVG = {
@@ -139,10 +142,8 @@ const SVG = {
     FULLSCREEN_IMAGE: '<svg xmlns="http://www.w3.org/2000/svg" width="20px" viewBox="0 0 24 24" fill="currentColor"><path d="M8 3V5H4V9H2V3H8ZM2 21V15H4V19H8V21H2ZM22 21H16V19H20V15H22V21ZM22 9H20V5H16V3H22V9Z"></path></svg>',
     CLOSE: '<svg xmlns="http://www.w3.org/2000/svg" width="16px" viewBox="0 0 24 24" fill="currentColor"><path d="M10.5859 12L2.79297 4.20706L4.20718 2.79285L12.0001 10.5857L19.793 2.79285L21.2072 4.20706L13.4143 12L21.2072 19.7928L19.793 21.2071L12.0001 13.4142L4.20718 21.2071L2.79297 19.7928L10.5859 12Z"></path></svg>',
     SPINNER: '<svg class="leksy-editor-spinner" width="16" height="16" viewBox="0 0 50 50"><circle class="leksy-editor-path" cx="25" cy="25" r="20" fill="none" stroke-width="4"></circle></svg>',
-
 }
 
-
 const MIMETYPE = {
     IMAGE: 'image/png,image/jpg,image/jpeg,image/webp',
     VIDEO: 'video/mp4,video/quicktime',
@@ -150,7 +151,6 @@ const MIMETYPE = {
 
 const SOCIAL_MEDIA_PATTERNS = {
     YOUTUBE: /(?:youtube\.com\/(?:.*[?&]v=|embed\/|v\/|watch\?v=|live\/)|youtu\.be\/)([^"&?\/\s]{11})/,
-    // TWITTER: /(?:twitter\.com\/(?:#!\/)?(?:\w+)\/status\/|x\.com\/(?:#!\/)?(?:\w+)\/status\/)(\d+)/,
     REDDIT: /(?:reddit\.com\/r\/[\w-]+\/comments\/|reddit\.com\/comments\/)([\w-]+)/,
     INSTAGRAM: /(?:instagram\.com\/(?:p|reel|tv|stories\/[\w-]+|[\w-]+\/posts|share\/p)\/|instagr\.am\/p\/)([\w-]+)/,
     THREADS: /(?:threads\.net\/@[\w-]+\/post\/)([\w-]+)/,
@@ -163,7 +163,6 @@ const SOCIAL_MEDIA_PATTERNS = {
 
 const SOCIAL_MEDIA_BASEURLS = {
     YOUTUBE: "https://www.youtube.com/embed/",
-    // TWITTER: "https://twitframe.com/show?url=https://twitter.com/user/status/",
     INSTAGRAM: "https://www.instagram.com/p/",
     REDDIT: "https://www.redditmedia.com/r/all/comments/",
     PINTEREST: "https://assets.pinterest.com/ext/embed.html?id=",
@@ -173,6 +172,7 @@ const SOCIAL_MEDIA_BASEURLS = {
     TWITCH_CHANNEL: 'https://player.twitch.tv/?channel=',
     TIKTOK: 'https://www.tiktok.com/embed/',
 };
+
 const CSS_VARIABLES = {
     primary: "hsl(160, 100%, 40%)",
     midDarker: "hsl(223, 5%, 76%)",

package/index.js

@@ -21,6 +21,7 @@ class LeksyEditor {
      * @property {String} tenorApiKey
      * @property {Object} cssVariables
      * @property {Boolean} disablePastedColorStyles
+     * @property {Boolean} removeColorsWhilePasting
      * @property {Boolean} autoHeight
      * @property {String} height
      * @property {String} maxHeight

package/package.json

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

@@ -1,4 +1,4 @@
-import { EMOJI_CATEGORIES, FONT_SIZE_OPTIONS, FONTS, FORMAT_OPTIONS, MIMETYPE, REGEX, SPECIAL_CHARACTERS, SVG, UNORDERED_LIST_OPTIONS, ORDERED_LIST_OPTIONS } from "./constant"
+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 } from "./utilities";
 
@@ -844,7 +844,7 @@ const PLUGINS = {
                 left.style.flex = '1';
 
                 const uploadBox = document.createElement('div');
-                uploadBox.className = `${options.classPrefix}-upload-img-box`;
+                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>
@@ -867,10 +867,10 @@ const PLUGINS = {
                 right.style.flex = '1';
 
                 const previewBox = document.createElement('div');
-                previewBox.className = `${options.classPrefix}-upload-img-preview-box`;
+                previewBox.className = `${options.classPrefix}${CLASSES.UPLOAD_IMG_PREVIEW_BOX}`;
 
                 const imgPreview = document.createElement('img');
-                imgPreview.className = `${options.classPrefix}-upload-img-preview`;
+                imgPreview.className = `${options.classPrefix}${CLASSES.UPLOAD_IMG_PREVIEW}`;
                 imgPreview.style.display = 'none';
 
                 previewBox.append(imgPreview);

package/utilities.js

@@ -45,6 +45,10 @@ const traverseAndClean = (element, options, core) => {
                     if (bodyBg === bgColor) node.style.removeProperty('background-color');
                     if (bodyBg === textColor) node.style.removeProperty('color');
                 }
+                if (options?.removeColorsWhilePasting) {
+                    node.style.removeProperty('background-color');
+                    node.style.removeProperty('color');
+                }
                 attributesToRemove.forEach(attr => node.removeAttribute(attr));
 
                 // Process child nodes