leksy-editor 1.0.6 → 1.0.7

package/index.js

@@ -144,6 +144,11 @@ class LeksyEditor {
                 }
                 return content
             },
+            handleFilePicker: async (mimeType,type) => {
+                if (editorRef.handleFilePicker instanceof Function) {return await editorRef.handleFilePicker(mimeType,type)}
+                return null
+
+            },
             updateBreadcumb: (parentTags) => {
                 if (!options.hideNavigation && Array.isArray(parentTags)) {
                     core.elements.breadcumb.innerHTML = ''
@@ -229,6 +234,7 @@ class LeksyEditor {
             onBlur: () => { },
             onAttachment: () => { },
             manuplateImage: async () => { },
+            handleFilePicker: async () => { },
             uploadVideo: async () => { },
             focus: () => { core.elements.editor.focus() },
             getCore: () => core,

package/package.json

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

@@ -710,7 +710,7 @@ const PLUGINS = {
             { label: 'Upload from device', value: 'upload' },
             { label: 'Using Link', value: 'link' },
         ],
-        click: (event, core, options) => {
+        click: async (event, core, options) => {
             if (event.target.getAttribute('data-value') === 'upload') {
 
                 const onInputKeydown = (event) => {
@@ -719,12 +719,32 @@ const PLUGINS = {
                         button.click();
                     }
                 };
-
                 const body = document.createElement('div');
 
+
                 const fileInput = document.createElement('input');
                 fileInput.type = 'file';
                 fileInput.accept = MIMETYPE.IMAGE;
+                fileInput.style.display = 'none';
+
+                // Create a label or button to trigger file input
+                const uploadBtn = document.createElement('button');
+                uploadBtn.innerText = 'Choose Image';
+                uploadBtn.type = 'button';
+                uploadBtn.style.border = '2px solid grey';
+                uploadBtn.style.padding = '4px';
+                uploadBtn.style.borderRadius = '8px';
+
+
+                // Span to show selected file name
+                const fileNameSpan = document.createElement('span');
+                fileNameSpan.style.marginLeft = '10px';
+                fileNameSpan.innerText = 'No file selected';
+
+                uploadBtn.addEventListener('click', () => {
+                    fileInput.click(); // Trigger file input
+                });
+
 
                 const altInput = document.createElement('input');
                 altInput.type = 'text';
@@ -735,7 +755,7 @@ const PLUGINS = {
                 const span = document.createElement('span');
                 span.className = 'warning';
 
-                body.append(fileInput, altInput, span);
+                body.append(fileInput, uploadBtn, fileNameSpan, altInput, span);
 
                 const footer = document.createElement('div');
                 const button = document.createElement('button');
@@ -766,7 +786,18 @@ const PLUGINS = {
                         };
 
                         reader.readAsDataURL(file);
+                        fileNameSpan.innerText = file.name;
+                        span.innerText = ""; // Clear warning if file is selected
+                    }
+                });
+                fileInput.addEventListener('click', async () => {
+                    let fileFromNative = await core.handleFilePicker(MIMETYPE.IMAGE.split(','), 'image');
+
+                    if (fileFromNative) {
+                        base64String = fileFromNative.data;
+                        fileNameSpan.innerText = fileFromNative.name;
                         span.innerText = ""; // Clear warning if file is selected
+
                     }
                 });
                 button.onclick = async () => {
@@ -865,6 +896,23 @@ const PLUGINS = {
                     }
                 }
             });
+
+            fileInput.addEventListener('click', async () => {
+                let file = await core.handleFilePicker(MIMETYPE.VIDEO.split(','), 'video');
+                if (MIMETYPE.VIDEO.includes(file.type)) {
+                    const url = await core.uploadVideo(file);
+                    if (url) {
+                        const a = document.createElement('a');
+                        a.href = url.videoUrl
+                        a.target = '_blank'
+                        const img = document.createElement('img');
+                        img.src = url.thumbnailUrl
+                        a.appendChild(img)
+                        core.insertNode(a);
+                    }
+                }
+            });
+
             fileInput.click();
             core.updateCaretPosition()
         }
@@ -881,6 +929,12 @@ const PLUGINS = {
             fileInput.addEventListener('change', (event) => {
                 core.onAttachment(event.target.files);
             });
+
+            fileInput.addEventListener('click', async () => {
+                let files = await core.handleFilePicker(["*"], 'attachment');
+                core.onAttachment(files);
+
+            });
             fileInput.click();
             core.updateCaretPosition()
         }