leksy-editor 2.5.0 → 2.6.0

package/README.md

@@ -183,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

@@ -189,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...')
@@ -301,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.5.0",
+  "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

@@ -2356,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");
@@ -2392,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);