leksy-editor 2.4.1 → 2.6.0

package/README.md

@@ -110,6 +110,7 @@ const app = createApp({
 | `showTabs` | Enables or disables the display of tabs. |
 | `enableFindAndReplace` | To enabled find and replace feature|
 | `customTooltip` | Customize tooltip according to your need, set using key-value pair|
+| `customIcon` | Customize icon according to your need, set using key-value pair|
 
 ### CSS Customization
 
@@ -182,6 +183,7 @@ Similarly, Pexels and Tenor can be integrated using `pexels` and `tenor` plugins
 | `onChange(tabs)` | Triggered when content changes. |
 | `onBlur(tabs)` | Triggered when the editor loses focus. |
 | `onAttachment(files)` | Fires when files are attached. |
+| `onLinkClick(href)` | To open custom link opener. |
 | `manipulateImage()` | Custom function for manipulating images. |
 | `handleFilePicker()` | Custom function for file upload, useful for Android and iOS file upload. |
 | `uploadVideo(file)` | Handles video uploads, returns a promise with video URL. |

package/index.js

@@ -32,7 +32,9 @@ class LeksyEditor {
      * @property {Boolean} disabled
      * @property {Function} onFullScreen
      * @property {Boolean} showTabs
-     * @property {Boolean} enableFindAndReplace 
+     * @property {Boolean} enableFindAndReplace
+     * @property {Array<Object>} customTooltip
+     * @property {Array<Object>} customIcon
      */
     /**
      * 
@@ -187,6 +189,9 @@ class LeksyEditor {
             onAttachment: (files) => {
                 if (editorRef.onAttachment instanceof Function) editorRef.onAttachment(files)
             },
+            onLinkClick: (href) => {
+                if (editorRef.onLinkClick instanceof Function) editorRef.onLinkClick(href)
+            },
             manuplateImage: async (type, content) => {
                 if (editorRef.manuplateImage instanceof Function) {
                     core.changeStatus('Loading...')
@@ -299,6 +304,9 @@ class LeksyEditor {
             onSave: () => { },
             onBlur: () => { },
             onAttachment: () => { },
+            onLinkClick: (href) => {
+                window.open(href, '_blank', 'noopener noreferrer')
+            },
             manuplateImage: async () => { },
             handleFilePicker: async () => { },
             uploadVideo: async () => { },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leksy-editor",
-  "version": "2.4.1",
+  "version": "2.6.0",
   "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/utilities.js

@@ -204,6 +204,10 @@ const getTooltip = (plugin, options) => {
     return options?.customTooltip?.[plugin.pluginId] ?? plugin.title
 }
 
+const getToolbarIcon = (plugin, options) => {
+    return options?.customIcon?.[plugin.pluginId] ?? plugin.icon
+}
+
 const makeToolbarButton = (_plugin, options, core) => {
     const pluginButton = document.createElement('button');
     pluginButton.type = "button"
@@ -217,7 +221,7 @@ const makeToolbarButton = (_plugin, options, core) => {
     };
 
     const pluginIcon = document.createElement('div');
-    pluginIcon.innerHTML = _plugin.icon;
+    pluginIcon.innerHTML = getToolbarIcon(_plugin, options);
     pluginButton.appendChild(pluginIcon)
     return pluginButton
 }
@@ -236,7 +240,7 @@ const makeToolbarButtonSelect = (_plugin, options, core) => {
     };
 
     const pluginIcon = document.createElement('div');
-    pluginIcon.innerHTML = _plugin.icon;
+    pluginIcon.innerHTML = getToolbarIcon(_plugin, options);
     pluginButton.appendChild(pluginIcon)
     const pluginSelect = makeToolbarSelect({ ..._plugin, icon: '' }, options, core);
 
@@ -265,7 +269,7 @@ const makeToolbarColor = (_plugin, options, core) => {
     };
 
     const pluginIcon = document.createElement('div');
-    pluginIcon.innerHTML = _plugin.icon;
+    pluginIcon.innerHTML = getToolbarIcon(_plugin, options);
     pluginIcon.onclick = () => pluginButton.click()
     pluginContainer.append(pluginButton, pluginIcon)
     return pluginContainer
@@ -348,7 +352,7 @@ const makeToolbarDropdown = (_plugin, options, core) => {
     dropdownButton.setAttribute('data-title', getTooltip(_plugin, options))
 
     const pluginIcon = document.createElement('div');
-    pluginIcon.innerHTML = _plugin.icon;
+    pluginIcon.innerHTML = getToolbarIcon(_plugin, options);
     dropdownButton.appendChild(pluginIcon)
 
     const dropdownContent = document.createElement('div');
@@ -597,7 +601,7 @@ const makeToolbarSelect = (_plugin, options, core) => {
     pluginIcon.style.justifyContent = 'space-between'
 
     const iconName = document.createElement('span');
-    iconName.innerHTML = _plugin.icon;
+    iconName.innerHTML = getToolbarIcon(_plugin, options);
 
     const arrow = document.createElement('span');
     if (_plugin.type == 'button-select') {
@@ -2352,19 +2356,19 @@ const showAnchorPopover = (element, x, y, options, core) => {
     popover.style.visibility = "hidden";
 
     // Create clickable link
-    let link = document.createElement("a");
-    link.href = href;
-    link.target = "_blank";
-    link.textContent = href;
-    link.style.textDecoration = "none";
-    link.style.color = "#007bff";
-    link.style.padding = "5px";
-    link.style.overflow = "hidden";
-    link.style.textOverflow = "ellipsis";
-    link.style.webkitBoxOrient = "vertical";
-    link.style.webkitLineClamp = "1";
-    link.style.maxWidth = "250px";
-    link.style.wordBreak = "break-word";
+    let linkDiv = document.createElement("div");
+    linkDiv.textContent = href;
+    linkDiv.style.textDecoration = "none";
+    linkDiv.style.color = "#007bff";
+    linkDiv.style.padding = "5px";
+    linkDiv.style.overflow = "hidden";
+    linkDiv.style.textOverflow = "ellipsis";
+    linkDiv.style.webkitBoxOrient = "vertical";
+    linkDiv.style.webkitLineClamp = "1";
+    linkDiv.style.maxWidth = "250px";
+    linkDiv.style.wordBreak = "break-word";
+    linkDiv.style.cursor = "pointer";
+    linkDiv.onclick = () => core.onLinkClick(href);
 
     // Create Edit button
     let editButton = document.createElement("span");
@@ -2388,7 +2392,7 @@ const showAnchorPopover = (element, x, y, options, core) => {
     deleteButton.onclick = (event) => removeAnchorTag(event, element, core);
 
     // Append elements to popover
-    popover.append(link, copyButton, editButton, deleteButton);
+    popover.append(linkDiv, copyButton, editButton, deleteButton);
 
     let parent = core.elements.iframeWindow.body;
     parent.appendChild(popover);