@adminforth/rich-editor 1.6.5 → 1.6.6

package/build.log

@@ -10,5 +10,5 @@ custom/package.json
 custom/quillEditor.vue
 custom/tsconfig.json
 
-sent 28,647 bytes  received 115 bytes  57,524.00 bytes/sec
-total size is 28,224  speedup is 0.98
+sent 29,604 bytes  received 115 bytes  59,438.00 bytes/sec
+total size is 29,181  speedup is 0.98

package/custom/quillEditor.vue

@@ -87,10 +87,34 @@ class ImageBlot extends BlockEmbed {
   }
 }
 
+// @ts-ignore
+class ImageBlotEmbed extends Embed {
+  static blotName = 'image_embed';
+  static tagName = 'img';
+
+  static create(value) {
+    let node = super.create();
+    node.setAttribute('alt', value.alt);
+    node.setAttribute('src', value.url);
+    node.setAttribute('data-s3path', value['s3Path']);
+    return node;
+  }
+  
+  static value(node) {
+    return {
+      alt: node.getAttribute('alt'),
+      url: node.getAttribute('src'),
+      s3Path: node.getAttribute('data-s3path'),
+    };
+  }
+}
+
 // @ts-ignore
 Quill.register(CompleteBlot);
 // @ts-ignore
 Quill.register(ImageBlot);
+// @ts-ignore
+Quill.register(ImageBlotEmbed);
 
 Quill.register({
   'modules/table-better': QuillTableBetter
@@ -179,12 +203,23 @@ async function saveToServer(file: File) {
 
   // here we have s3Path, call createResource to save the image
   const range = quill.getSelection();
-  quill.insertEmbed(range.index, 'image', { 
-    url: previewUrl, 
-    s3Path: filePath, 
-    alt: file.name 
-  }, 'user');
-
+    const formats = quill.getFormat(range.index);
+
+    // here we are checking if we are inside table cell
+    if (formats['table-cell']) {
+      // if so, we insert image_embed blot in order not to break table structure
+      quill.insertEmbed(range.index, 'image_embed', { 
+        url: previewUrl, 
+        s3Path: filePath, 
+        alt: file.name 
+      }, 'user');
+    } else {
+      quill.insertEmbed(range.index, 'image', { 
+        url: previewUrl, 
+        s3Path: filePath, 
+        alt: file.name 
+      }, 'user');
+    }
 }
 
 async function imageHandler() {

package/dist/custom/quillEditor.vue

@@ -87,10 +87,34 @@ class ImageBlot extends BlockEmbed {
   }
 }
 
+// @ts-ignore
+class ImageBlotEmbed extends Embed {
+  static blotName = 'image_embed';
+  static tagName = 'img';
+
+  static create(value) {
+    let node = super.create();
+    node.setAttribute('alt', value.alt);
+    node.setAttribute('src', value.url);
+    node.setAttribute('data-s3path', value['s3Path']);
+    return node;
+  }
+  
+  static value(node) {
+    return {
+      alt: node.getAttribute('alt'),
+      url: node.getAttribute('src'),
+      s3Path: node.getAttribute('data-s3path'),
+    };
+  }
+}
+
 // @ts-ignore
 Quill.register(CompleteBlot);
 // @ts-ignore
 Quill.register(ImageBlot);
+// @ts-ignore
+Quill.register(ImageBlotEmbed);
 
 Quill.register({
   'modules/table-better': QuillTableBetter
@@ -179,12 +203,23 @@ async function saveToServer(file: File) {
 
   // here we have s3Path, call createResource to save the image
   const range = quill.getSelection();
-  quill.insertEmbed(range.index, 'image', { 
-    url: previewUrl, 
-    s3Path: filePath, 
-    alt: file.name 
-  }, 'user');
-
+    const formats = quill.getFormat(range.index);
+
+    // here we are checking if we are inside table cell
+    if (formats['table-cell']) {
+      // if so, we insert image_embed blot in order not to break table structure
+      quill.insertEmbed(range.index, 'image_embed', { 
+        url: previewUrl, 
+        s3Path: filePath, 
+        alt: file.name 
+      }, 'user');
+    } else {
+      quill.insertEmbed(range.index, 'image', { 
+        url: previewUrl, 
+        s3Path: filePath, 
+        alt: file.name 
+      }, 'user');
+    }
 }
 
 async function imageHandler() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/rich-editor",
-  "version": "1.6.5",
+  "version": "1.6.6",
   "description": "Rich editor plugin for adminforth",
   "type": "module",
   "main": "dist/index.js",