@adminforth/rich-editor 1.0.9 → 1.0.11

package/ChangeLog.md

@@ -0,0 +1,5 @@
+
+
+## [1.0.15]
+
+-- Add image uploads support

package/custom/quillEditor.vue

@@ -34,15 +34,19 @@ function dbg(title: string,...args: any[]) {
 
 // blots/embed: Represents inline embed elements, like images or videos that can be inserted into the text flow.
 const Embed = Quill.import('blots/embed');
+const BlockEmbed = Quill.import('blots/block/embed');
 
 // @ts-ignore
 class CompleteBlot extends Embed {
   static blotName = 'complete';
   static tagName = 'span';
+  // https://stackoverflow.com/a/78434756/27379293
+  static className = "complete-blot";
 
   static create(value: { text: string }) {
     let node = super.create();
-    node.setAttribute('contenteditable', 'false');
+    // we should keep contenteditable=true for case when user clicks on empty area
+    // node.setAttribute('contenteditable', 'false');
     node.setAttribute('completer', '');
     node.innerText = value.text;
     return node;
@@ -54,8 +58,33 @@ class CompleteBlot extends Embed {
     };
   }
 }
+
+// @ts-ignore
+class ImageBlot extends BlockEmbed {
+  static blotName = 'image';
+  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);
 
 const updaterQueue = new AsyncQueue();
 
@@ -78,6 +107,93 @@ const editorFocused = ref(false);
 
 let lastText: string | null = null;
 
+const imageProgress = ref(0);
+
+
+async function saveToServer(file: File) {
+  const fd = new FormData();
+  fd.append('image', file);
+
+  const originalFilename = file.name.split('.').slice(0, -1).join('.');
+  const originalExtension = file.name.split('.').pop();
+  // send fd to s3
+  const { uploadUrl, tagline, previewUrl, s3Path, error } = await callAdminForthApi({
+      path: `/plugin/${props.meta.uploadPluginInstanceId}/get_s3_upload_url`,
+      method: 'POST',
+      body: {
+        originalFilename,
+        contentType: file.type,
+        size: file.size,
+        originalExtension,
+      },
+  });
+
+  if (error) {
+    window.adminforth.alert({
+      message: `File was not uploaded because of error: ${error}`,
+      variant: 'danger'
+    });
+    return;
+  }
+
+  const xhr = new XMLHttpRequest();
+  const success = await new Promise((resolve) => {
+    xhr.upload.onprogress = (e) => {
+      if (e.lengthComputable) {
+        imageProgress.value = Math.round((e.loaded / e.total) * 100);
+      }
+    };
+    xhr.addEventListener('loadend', () => {
+      const success = xhr.readyState === 4 && xhr.status === 200;
+      // try to read response
+      resolve(success);
+    });
+    xhr.open('PUT', uploadUrl, true);
+    xhr.setRequestHeader('Content-Type', file.type);
+    xhr.setRequestHeader('x-amz-tagging', tagline);
+    xhr.send(file);
+  });
+  if (!success) {
+    window.adminforth.alert({
+      messageHtml: `<div>Sorry but the file was not uploaded because of S3 Request Error: </div>
+      <pre style="white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; max-width: 100%;">${
+        xhr.responseText.replace(/</g, '&lt;').replace(/>/g, '&gt;')
+      }</pre>`,
+      variant: 'danger',
+      timeout: 30,
+    });
+    imageProgress.value = 0;
+    return;
+  }
+
+  // here we have s3Path, call createResource to save the image
+  const range = quill.getSelection();
+  quill.insertEmbed(range.index, 'image', { 
+    url: previewUrl, 
+    s3Path: s3Path, 
+    alt: file.name 
+  }, 'user');
+
+}
+
+async function imageHandler() {
+  const input = document.createElement('input');
+  input.setAttribute('type', 'file');
+  input.click();
+
+  // Listen upload local image and save to server
+  input.onchange = () => {
+    const file = input.files[0];
+
+    // file type is only image.
+    if (/^image\//.test(file.type)) {
+      saveToServer(file);
+    } else {
+      console.warn('You could only upload images.');
+    }
+  };
+}
+
 onMounted(() => {
   currentValue.value = props.record[props.column.name] || '';
   editor.value.innerHTML = currentValue.value;
@@ -87,31 +203,36 @@ onMounted(() => {
     placeholder: 'Type here...',
     // formats : ['complete'],
     modules: {
-      toolbar: props.meta.toolbar || [
-        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
-        ['blockquote', 'code-block', 'link', ...props.meta.uploadPluginInstanceId ? ['image'] : []],
-        // [
-        //   // 'image', 
-        //   // 'video', 
-        //   // 'formula'
-        // ],
-        
-
-        [{ 'header': 2 }, { 'header': 3 }],               // custom button values
-        [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
-        // [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
-        // [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
-        // [{ 'direction': 'rtl' }],                         // text direction
-
-        // [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
-        // [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
-
-        // [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
-        // [{ 'font': [] }],
-        [{ 'align': [] }],
-
-        ['clean']                                         // remove formatting button
-      ],
+      toolbar: {
+        container: props.meta.toolbar || [
+            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
+            ['blockquote', 'code-block', 'link', ...props.meta.uploadPluginInstanceId ? ['image'] : []],
+            // [
+            //   // 'image', 
+            //   // 'video', 
+            //   // 'formula'
+            // ],
+            
+
+            [{ 'header': 2 }, { 'header': 3 }],               // custom button values
+            [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
+            // [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
+            // [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
+            // [{ 'direction': 'rtl' }],                         // text direction
+
+            // [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
+            // [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+
+            // [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
+            // [{ 'font': [] }],
+            [{ 'align': [] }],
+
+            ['clean']                                         // remove formatting button
+        ],
+        handlers: {
+          image: imageHandler,
+        },
+      },
       keyboard: {
         bindings: {
           tab: {
@@ -148,10 +269,12 @@ onMounted(() => {
     }
     const text = quill.getText();
     // don't allow to select after completion
-    if (range?.index === text.length) {
-      dbg('✋ prevent selection after completion');
-      quill.setSelection(text.length - 1, 0, 'silent');
-    }
+    // TODO
+    // if (range?.index === text.length) {
+    //   console.log('RANGE IDX', range.index, text.length, 'text', JSON.stringify(text, null, 1));
+    //   dbg('✋ prevent selection after completion');
+    //   quill.setSelection(text.length - 1, 0, 'silent');
+    // }
   });
 
 
@@ -165,8 +288,10 @@ onMounted(() => {
 
 
 async function emitTextUpdate() {
-  const html = quill.root.innerHTML;
-  
+  const editorHtml = quill.root.innerHTML;
+  // remove completion from html
+  const html = editorHtml.replace(/<span[^>]*completer[^>]*>.*?<\/span>/g, '');
+
   if (lastText === html) {
     return;
   }
@@ -341,8 +466,8 @@ async function startCompletion() {
 
     quill.insertEmbed(cursorPosition.index, 'complete', { text: completionAnswer.join('') }, 'silent');
 
-    // dbg('👇 set pos', cursorPosition.index, cursorPosition.length)
-    // quill.setSelection(cursorPosition.index, cursorPosition.length, 'silent');
+    //dbg('👇 set pos', cursorPosition.index, cursorPosition.length)
+    //quill.setSelection(cursorPosition.index, cursorPosition.length, 'silent');
 
     completion.value = completionAnswer;
 
@@ -391,15 +516,19 @@ function removeCompletionOnBlur() {
     }
   }
 
-  .ql-editor:not(:focus) [completer] {
-    display: none;
-  }
+  // .ql-editor:not(:focus) [completer] {
+  //   display: none;
+  // }
 
   .ql-editor [completer] {
     color: gray;
     font-style: italic;
   }
 
+  .ql-editor p {
+    margin-bottom: 0.5rem;
+  }
+
   .ql-snow .ql-stroke {
     @apply dark:stroke-darkPrimary;
     @apply stroke-lightPrimary;

package/dist/custom/quillEditor.vue

@@ -34,15 +34,19 @@ function dbg(title: string,...args: any[]) {
 
 // blots/embed: Represents inline embed elements, like images or videos that can be inserted into the text flow.
 const Embed = Quill.import('blots/embed');
+const BlockEmbed = Quill.import('blots/block/embed');
 
 // @ts-ignore
 class CompleteBlot extends Embed {
   static blotName = 'complete';
   static tagName = 'span';
+  // https://stackoverflow.com/a/78434756/27379293
+  static className = "complete-blot";
 
   static create(value: { text: string }) {
     let node = super.create();
-    node.setAttribute('contenteditable', 'false');
+    // we should keep contenteditable=true for case when user clicks on empty area
+    // node.setAttribute('contenteditable', 'false');
     node.setAttribute('completer', '');
     node.innerText = value.text;
     return node;
@@ -54,8 +58,33 @@ class CompleteBlot extends Embed {
     };
   }
 }
+
+// @ts-ignore
+class ImageBlot extends BlockEmbed {
+  static blotName = 'image';
+  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);
 
 const updaterQueue = new AsyncQueue();
 
@@ -78,6 +107,93 @@ const editorFocused = ref(false);
 
 let lastText: string | null = null;
 
+const imageProgress = ref(0);
+
+
+async function saveToServer(file: File) {
+  const fd = new FormData();
+  fd.append('image', file);
+
+  const originalFilename = file.name.split('.').slice(0, -1).join('.');
+  const originalExtension = file.name.split('.').pop();
+  // send fd to s3
+  const { uploadUrl, tagline, previewUrl, s3Path, error } = await callAdminForthApi({
+      path: `/plugin/${props.meta.uploadPluginInstanceId}/get_s3_upload_url`,
+      method: 'POST',
+      body: {
+        originalFilename,
+        contentType: file.type,
+        size: file.size,
+        originalExtension,
+      },
+  });
+
+  if (error) {
+    window.adminforth.alert({
+      message: `File was not uploaded because of error: ${error}`,
+      variant: 'danger'
+    });
+    return;
+  }
+
+  const xhr = new XMLHttpRequest();
+  const success = await new Promise((resolve) => {
+    xhr.upload.onprogress = (e) => {
+      if (e.lengthComputable) {
+        imageProgress.value = Math.round((e.loaded / e.total) * 100);
+      }
+    };
+    xhr.addEventListener('loadend', () => {
+      const success = xhr.readyState === 4 && xhr.status === 200;
+      // try to read response
+      resolve(success);
+    });
+    xhr.open('PUT', uploadUrl, true);
+    xhr.setRequestHeader('Content-Type', file.type);
+    xhr.setRequestHeader('x-amz-tagging', tagline);
+    xhr.send(file);
+  });
+  if (!success) {
+    window.adminforth.alert({
+      messageHtml: `<div>Sorry but the file was not uploaded because of S3 Request Error: </div>
+      <pre style="white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; max-width: 100%;">${
+        xhr.responseText.replace(/</g, '&lt;').replace(/>/g, '&gt;')
+      }</pre>`,
+      variant: 'danger',
+      timeout: 30,
+    });
+    imageProgress.value = 0;
+    return;
+  }
+
+  // here we have s3Path, call createResource to save the image
+  const range = quill.getSelection();
+  quill.insertEmbed(range.index, 'image', { 
+    url: previewUrl, 
+    s3Path: s3Path, 
+    alt: file.name 
+  }, 'user');
+
+}
+
+async function imageHandler() {
+  const input = document.createElement('input');
+  input.setAttribute('type', 'file');
+  input.click();
+
+  // Listen upload local image and save to server
+  input.onchange = () => {
+    const file = input.files[0];
+
+    // file type is only image.
+    if (/^image\//.test(file.type)) {
+      saveToServer(file);
+    } else {
+      console.warn('You could only upload images.');
+    }
+  };
+}
+
 onMounted(() => {
   currentValue.value = props.record[props.column.name] || '';
   editor.value.innerHTML = currentValue.value;
@@ -87,31 +203,36 @@ onMounted(() => {
     placeholder: 'Type here...',
     // formats : ['complete'],
     modules: {
-      toolbar: props.meta.toolbar || [
-        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
-        ['blockquote', 'code-block', 'link', ...props.meta.uploadPluginInstanceId ? ['image'] : []],
-        // [
-        //   // 'image', 
-        //   // 'video', 
-        //   // 'formula'
-        // ],
-        
-
-        [{ 'header': 2 }, { 'header': 3 }],               // custom button values
-        [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
-        // [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
-        // [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
-        // [{ 'direction': 'rtl' }],                         // text direction
-
-        // [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
-        // [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
-
-        // [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
-        // [{ 'font': [] }],
-        [{ 'align': [] }],
-
-        ['clean']                                         // remove formatting button
-      ],
+      toolbar: {
+        container: props.meta.toolbar || [
+            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
+            ['blockquote', 'code-block', 'link', ...props.meta.uploadPluginInstanceId ? ['image'] : []],
+            // [
+            //   // 'image', 
+            //   // 'video', 
+            //   // 'formula'
+            // ],
+            
+
+            [{ 'header': 2 }, { 'header': 3 }],               // custom button values
+            [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
+            // [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
+            // [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
+            // [{ 'direction': 'rtl' }],                         // text direction
+
+            // [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
+            // [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+
+            // [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
+            // [{ 'font': [] }],
+            [{ 'align': [] }],
+
+            ['clean']                                         // remove formatting button
+        ],
+        handlers: {
+          image: imageHandler,
+        },
+      },
       keyboard: {
         bindings: {
           tab: {
@@ -148,10 +269,12 @@ onMounted(() => {
     }
     const text = quill.getText();
     // don't allow to select after completion
-    if (range?.index === text.length) {
-      dbg('✋ prevent selection after completion');
-      quill.setSelection(text.length - 1, 0, 'silent');
-    }
+    // TODO
+    // if (range?.index === text.length) {
+    //   console.log('RANGE IDX', range.index, text.length, 'text', JSON.stringify(text, null, 1));
+    //   dbg('✋ prevent selection after completion');
+    //   quill.setSelection(text.length - 1, 0, 'silent');
+    // }
   });
 
 
@@ -165,8 +288,10 @@ onMounted(() => {
 
 
 async function emitTextUpdate() {
-  const html = quill.root.innerHTML;
-  
+  const editorHtml = quill.root.innerHTML;
+  // remove completion from html
+  const html = editorHtml.replace(/<span[^>]*completer[^>]*>.*?<\/span>/g, '');
+
   if (lastText === html) {
     return;
   }
@@ -341,8 +466,8 @@ async function startCompletion() {
 
     quill.insertEmbed(cursorPosition.index, 'complete', { text: completionAnswer.join('') }, 'silent');
 
-    // dbg('👇 set pos', cursorPosition.index, cursorPosition.length)
-    // quill.setSelection(cursorPosition.index, cursorPosition.length, 'silent');
+    //dbg('👇 set pos', cursorPosition.index, cursorPosition.length)
+    //quill.setSelection(cursorPosition.index, cursorPosition.length, 'silent');
 
     completion.value = completionAnswer;
 
@@ -391,15 +516,19 @@ function removeCompletionOnBlur() {
     }
   }
 
-  .ql-editor:not(:focus) [completer] {
-    display: none;
-  }
+  // .ql-editor:not(:focus) [completer] {
+  //   display: none;
+  // }
 
   .ql-editor [completer] {
     color: gray;
     font-style: italic;
   }
 
+  .ql-editor p {
+    margin-bottom: 0.5rem;
+  }
+
   .ql-snow .ql-stroke {
     @apply dark:stroke-darkPrimary;
     @apply stroke-lightPrimary;

package/dist/index.js

@@ -7,7 +7,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { AdminForthPlugin } from "adminforth";
+import { AdminForthPlugin, Filters } from "adminforth";
+import * as cheerio from 'cheerio';
 // options:
 // attachments: {
 //   attachmentResource: 'description_images',
@@ -18,7 +19,9 @@ import { AdminForthPlugin } from "adminforth";
 export default class RichEditorPlugin extends AdminForthPlugin {
     constructor(options) {
         super(options, import.meta.url);
+        this.resourceConfig = undefined;
         this.activationOrder = 100000;
+        this.attachmentResource = undefined;
         this.options = options;
     }
     modifyResourceConfig(adminforth, resourceConfig) {
@@ -37,6 +40,7 @@ export default class RichEditorPlugin extends AdminForthPlugin {
                 if (!resource) {
                     throw new Error(`Resource '${this.options.attachments.attachmentResource}' not found`);
                 }
+                this.attachmentResource = resource;
                 const field = resource.columns.find(c => c.name === this.options.attachments.attachmentFieldName);
                 if (!field) {
                     throw new Error(`Field '${this.options.attachments.attachmentFieldName}' not found in resource '${this.options.attachments.attachmentResource}'`);
@@ -46,6 +50,10 @@ export default class RichEditorPlugin extends AdminForthPlugin {
                 if (!plugin) {
                     throw new Error(`Plugin for attachment field '${this.options.attachments.attachmentFieldName}' not found in resource '${this.options.attachments.attachmentResource}', please check if Upload Plugin is installed on the field ${this.options.attachments.attachmentFieldName}`);
                 }
+                if (plugin.pluginOptions.s3ACL !== 'public-read') {
+                    throw new Error(`Upload Plugin for attachment field '${this.options.attachments.attachmentFieldName}' in resource '${this.options.attachments.attachmentResource}' 
+          should have s3ACL set to 'public-read' (in vast majority of cases signed urls inside of HTML text is not desired behavior, so we did not implement it)`);
+                }
                 this.uploadPlugin = plugin;
             }
             const filed = {
@@ -62,6 +70,93 @@ export default class RichEditorPlugin extends AdminForthPlugin {
             }
             c.components.create = filed;
             c.components.edit = filed;
+            const editorRecordPkField = resourceConfig.columns.find(c => c.primaryKey);
+            // if attachment configured we need a post-save hook to create attachment records for each image data-s3path
+            if (this.options.attachments) {
+                function getAttachmentPathes(html) {
+                    if (!html) {
+                        return [];
+                    }
+                    const $ = cheerio.load(html);
+                    const s3Paths = [];
+                    $('img[data-s3path]').each((i, el) => {
+                        const src = $(el).attr('data-s3path');
+                        s3Paths.push(src);
+                    });
+                    return s3Paths;
+                }
+                const createAttachmentRecords = (adminforth, options, recordId, s3Paths, adminUser) => __awaiter(this, void 0, void 0, function* () {
+                    process.env.HEAVY_DEBUG && console.log('📸 Creating attachment records', JSON.stringify(recordId));
+                    yield Promise.all(s3Paths.map((s3Path) => __awaiter(this, void 0, void 0, function* () {
+                        yield adminforth.createResourceRecord({
+                            resource: this.attachmentResource,
+                            record: {
+                                [options.attachments.attachmentFieldName]: s3Path,
+                                [options.attachments.attachmentRecordIdFieldName]: recordId,
+                                [options.attachments.attachmentResourceIdFieldName]: resourceConfig.resourceId,
+                            },
+                            adminUser
+                        });
+                    })));
+                });
+                const deleteAttachmentRecords = (adminforth, options, s3Paths, adminUser) => __awaiter(this, void 0, void 0, function* () {
+                    const attachmentPrimaryKeyField = this.attachmentResource.columns.find(c => c.primaryKey);
+                    const attachments = yield adminforth.resource(options.attachments.attachmentResource).list(Filters.IN(options.attachments.attachmentFieldName, s3Paths));
+                    yield Promise.all(attachments.map((a) => __awaiter(this, void 0, void 0, function* () {
+                        yield adminforth.deleteResourceRecord({
+                            resource: this.attachmentResource,
+                            recordId: a[attachmentPrimaryKeyField.name],
+                            adminUser,
+                            record: a,
+                        });
+                    })));
+                });
+                resourceConfig.hooks.create.afterSave.push((_d) => __awaiter(this, [_d], void 0, function* ({ record, adminUser }) {
+                    // find all s3Paths in the html
+                    const s3Paths = getAttachmentPathes(record[this.options.htmlFieldName]);
+                    process.env.HEAVY_DEBUG && console.log('📸 Found s3Paths', s3Paths);
+                    // create attachment records
+                    yield createAttachmentRecords(adminforth, this.options, record[editorRecordPkField.name], s3Paths, adminUser);
+                    return { ok: true };
+                }));
+                // after edit we need to delete attachments that are not in the html anymore
+                // and add new ones
+                resourceConfig.hooks.edit.afterSave.push((_e) => __awaiter(this, [_e], void 0, function* ({ recordId, record, adminUser }) {
+                    process.env.HEAVY_DEBUG && console.log('⚓ Cought hook', recordId, 'rec', record);
+                    if (record[this.options.htmlFieldName] === undefined) {
+                        // field was not changed, do nothing
+                        return { ok: true };
+                    }
+                    const existingApparts = yield adminforth.resource(this.options.attachments.attachmentResource).list([
+                        Filters.EQ(this.options.attachments.attachmentRecordIdFieldName, recordId),
+                        Filters.EQ(this.options.attachments.attachmentResourceIdFieldName, resourceConfig.resourceId)
+                    ]);
+                    const existingS3Paths = existingApparts.map((a) => a[this.options.attachments.attachmentFieldName]);
+                    const newS3Paths = getAttachmentPathes(record[this.options.htmlFieldName]);
+                    process.env.HEAVY_DEBUG && console.log('📸 Existing s3Paths (from db)', existingS3Paths);
+                    process.env.HEAVY_DEBUG && console.log('📸 Found new s3Paths (from text)', newS3Paths);
+                    const toDelete = existingS3Paths.filter(s3Path => !newS3Paths.includes(s3Path));
+                    const toAdd = newS3Paths.filter(s3Path => !existingS3Paths.includes(s3Path));
+                    process.env.HEAVY_DEBUG && console.log('📸 Found s3Paths to delete', toDelete);
+                    process.env.HEAVY_DEBUG && console.log('📸 Found s3Paths to add', toAdd);
+                    yield Promise.all([
+                        deleteAttachmentRecords(adminforth, this.options, toDelete, adminUser),
+                        createAttachmentRecords(adminforth, this.options, recordId, toAdd, adminUser)
+                    ]);
+                    return { ok: true };
+                }));
+                // after delete we need to delete all attachments
+                resourceConfig.hooks.delete.afterSave.push((_f) => __awaiter(this, [_f], void 0, function* ({ record, adminUser }) {
+                    const existingApparts = yield adminforth.resource(this.options.attachments.attachmentResource).list([
+                        Filters.EQ(this.options.attachments.attachmentRecordIdFieldName, record[editorRecordPkField.name]),
+                        Filters.EQ(this.options.attachments.attachmentResourceIdFieldName, resourceConfig.resourceId)
+                    ]);
+                    const existingS3Paths = existingApparts.map((a) => a[this.options.attachments.attachmentFieldName]);
+                    process.env.HEAVY_DEBUG && console.log('📸 Found s3Paths to delete', existingS3Paths);
+                    yield deleteAttachmentRecords(adminforth, this.options, existingS3Paths, adminUser);
+                    return { ok: true };
+                }));
+            }
         });
     }
     validateConfigAfterDiscover(adminforth, resourceConfig) {

package/index.ts

@@ -1,7 +1,9 @@
 
-import type { IAdminForth, IHttpServer, AdminForthResource } from "adminforth";
-import { AdminForthPlugin } from "adminforth";
+import type { IAdminForth, IHttpServer, AdminForthResource, AdminUser, AfterSaveFunction } from "adminforth";
 import type { PluginOptions } from './types.js';
+import { AdminForthPlugin, Filters } from "adminforth";
+import * as cheerio from 'cheerio';
+
 
 // options:
 // attachments: {
@@ -13,10 +15,14 @@ import type { PluginOptions } from './types.js';
 
 export default class RichEditorPlugin extends AdminForthPlugin {
   options: PluginOptions;
+  resourceConfig: AdminForthResource = undefined;
+
   uploadPlugin: AdminForthPlugin;
 
   activationOrder: number = 100000;
 
+  attachmentResource: AdminForthResource = undefined;
+  
   constructor(options: PluginOptions) {
     super(options, import.meta.url);
     this.options = options;
@@ -35,16 +41,23 @@ export default class RichEditorPlugin extends AdminForthPlugin {
       if (!resource) {
         throw new Error(`Resource '${this.options.attachments!.attachmentResource}' not found`);
       }
+      this.attachmentResource = resource;
       const field = resource.columns.find(c => c.name === this.options.attachments!.attachmentFieldName);
       if (!field) {
         throw new Error(`Field '${this.options.attachments!.attachmentFieldName}' not found in resource '${this.options.attachments!.attachmentResource}'`);
       }
       const plugin = adminforth.activatedPlugins.find(p => 
         p.resourceConfig!.resourceId === this.options.attachments!.attachmentResource && 
-        p.pluginOptions.pathColumnName === this.options.attachments!.attachmentFieldName);
+        p.pluginOptions.pathColumnName === this.options.attachments!.attachmentFieldName
+      );
       if (!plugin) {
         throw new Error(`Plugin for attachment field '${this.options.attachments!.attachmentFieldName}' not found in resource '${this.options.attachments!.attachmentResource}', please check if Upload Plugin is installed on the field ${this.options.attachments!.attachmentFieldName}`);
       }
+
+      if (plugin.pluginOptions.s3ACL !== 'public-read') {
+        throw new Error(`Upload Plugin for attachment field '${this.options.attachments!.attachmentFieldName}' in resource '${this.options.attachments!.attachmentResource}' 
+          should have s3ACL set to 'public-read' (in vast majority of cases signed urls inside of HTML text is not desired behavior, so we did not implement it)`);
+      }
       this.uploadPlugin = plugin;
     }
 
@@ -64,6 +77,130 @@ export default class RichEditorPlugin extends AdminForthPlugin {
     c.components.create = filed;
     c.components.edit = filed;
 
+    const editorRecordPkField = resourceConfig.columns.find(c => c.primaryKey);
+
+
+    // if attachment configured we need a post-save hook to create attachment records for each image data-s3path
+    if (this.options.attachments) {
+
+      function getAttachmentPathes(html: string) {
+        if (!html) {
+          return [];
+        }
+        const $ = cheerio.load(html);
+        const s3Paths = [];
+        $('img[data-s3path]').each((i, el) => {
+          const src = $(el).attr('data-s3path');
+          s3Paths.push(src);
+        });
+        return s3Paths;
+      }
+
+      const createAttachmentRecords = async (
+        adminforth: IAdminForth, options: PluginOptions, recordId: any, s3Paths: string[], adminUser: AdminUser
+      ) => {
+        process.env.HEAVY_DEBUG && console.log('📸 Creating attachment records', JSON.stringify(recordId))
+        await Promise.all(s3Paths.map(async (s3Path) => {
+          await adminforth.createResourceRecord(
+            {
+              resource: this.attachmentResource,
+              record: {
+                [options.attachments.attachmentFieldName]: s3Path,
+                [options.attachments.attachmentRecordIdFieldName]: recordId,
+                [options.attachments.attachmentResourceIdFieldName]: resourceConfig.resourceId,
+              },
+              adminUser
+            }
+          )
+        }
+        ));
+      }
+
+      const deleteAttachmentRecords = async (
+        adminforth: IAdminForth, options: PluginOptions, s3Paths: string[], adminUser: AdminUser
+      ) => {
+        
+        const attachmentPrimaryKeyField = this.attachmentResource.columns.find(c => c.primaryKey);
+        
+        const attachments = await adminforth.resource(options.attachments.attachmentResource).list(
+          Filters.IN(options.attachments.attachmentFieldName, s3Paths)
+        );
+
+        await Promise.all(attachments.map(async (a: any) => {
+          await adminforth.deleteResourceRecord(
+            {
+              resource: this.attachmentResource,
+              recordId: a[attachmentPrimaryKeyField.name],
+              adminUser,
+              record: a,
+            }
+          )
+        }))
+      }
+      
+
+      (resourceConfig.hooks.create.afterSave as Array<AfterSaveFunction>).push(async ({ record, adminUser }: { record: any, adminUser: AdminUser }) => {
+        // find all s3Paths in the html
+        const s3Paths = getAttachmentPathes(record[this.options.htmlFieldName])
+        
+        process.env.HEAVY_DEBUG && console.log('📸 Found s3Paths', s3Paths);
+
+        // create attachment records
+        await createAttachmentRecords(
+          adminforth, this.options, record[editorRecordPkField.name], s3Paths, adminUser);
+
+        return { ok: true };
+      });
+
+      // after edit we need to delete attachments that are not in the html anymore
+      // and add new ones
+      (resourceConfig.hooks.edit.afterSave as Array<AfterSaveFunction>).push(
+        async ({ recordId, record, adminUser }: { recordId: any, record: any, adminUser: AdminUser }) => {
+          process.env.HEAVY_DEBUG && console.log('⚓ Cought hook', recordId, 'rec', record);
+          if (record[this.options.htmlFieldName] === undefined) {
+            // field was not changed, do nothing
+            return { ok: true };
+          }
+          const existingApparts = await adminforth.resource(this.options.attachments.attachmentResource).list([
+            Filters.EQ(this.options.attachments.attachmentRecordIdFieldName, recordId),
+            Filters.EQ(this.options.attachments.attachmentResourceIdFieldName, resourceConfig.resourceId)
+          ]);
+          const existingS3Paths = existingApparts.map((a: any) => a[this.options.attachments.attachmentFieldName]);
+          const newS3Paths = getAttachmentPathes(record[this.options.htmlFieldName]);
+          process.env.HEAVY_DEBUG && console.log('📸 Existing s3Paths (from db)', existingS3Paths)
+          process.env.HEAVY_DEBUG && console.log('📸 Found new s3Paths (from text)', newS3Paths);
+          const toDelete = existingS3Paths.filter(s3Path => !newS3Paths.includes(s3Path));
+          const toAdd = newS3Paths.filter(s3Path => !existingS3Paths.includes(s3Path));
+          process.env.HEAVY_DEBUG && console.log('📸 Found s3Paths to delete', toDelete)
+          process.env.HEAVY_DEBUG && console.log('📸 Found s3Paths to add', toAdd);
+
+          await Promise.all([
+            deleteAttachmentRecords(adminforth, this.options, toDelete, adminUser),
+            createAttachmentRecords(adminforth, this.options, recordId, toAdd, adminUser)
+          ]);
+
+          return { ok: true };
+
+        }
+      );
+
+      // after delete we need to delete all attachments
+      (resourceConfig.hooks.delete.afterSave as Array<AfterSaveFunction>).push(
+        async ({ record, adminUser }: { record: any, adminUser: AdminUser }) => {
+          const existingApparts = await adminforth.resource(this.options.attachments.attachmentResource).list(
+            [
+              Filters.EQ(this.options.attachments.attachmentRecordIdFieldName, record[editorRecordPkField.name]),
+              Filters.EQ(this.options.attachments.attachmentResourceIdFieldName, resourceConfig.resourceId)
+            ]
+          );
+          const existingS3Paths = existingApparts.map((a: any) => a[this.options.attachments.attachmentFieldName]);
+          process.env.HEAVY_DEBUG && console.log('📸 Found s3Paths to delete', existingS3Paths);
+          await deleteAttachmentRecords(adminforth, this.options, existingS3Paths, adminUser);
+
+          return { ok: true };
+        }
+    );
+    }
   }
   
   validateConfigAfterDiscover(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
@@ -72,7 +209,6 @@ export default class RichEditorPlugin extends AdminForthPlugin {
       throw new Error(`Invalid provider ${this.options.completion.provider}`);
     }
 
-
   }
 
   instanceUniqueRepresentation(pluginOptions: any) : string {
@@ -195,7 +331,7 @@ export default class RichEditorPlugin extends AdminForthPlugin {
         };
       }
     });
-  }
 
+  }
 
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/rich-editor",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -11,5 +11,8 @@
   },
   "keywords": [],
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "dependencies": {
+    "cheerio": "^1.0.0"
+  }
 }

package/types.ts

@@ -149,20 +149,24 @@ export interface PluginOptions {
      * Field name in the attachment resource where image is stored. Should point to the existing field in the attachment resource.
      * Also there should be upload plugin installed on this field.
      */
-    attachmentFieldName: 'image_path',
+    attachmentFieldName: string; // e.g. 'image_path',
 
     /**
-     * When attachment is created, it will be linked to the record with this field name.
-     * For example when RichEditor installed on description field of appartment resource,
-     * field in attachment resource describet hear will store id of appartment record.
+     * When attachment is created, it will be linked to the record, by storing id of the record with editor in attachment resource.
+     * Here you define the field name where this id will be stored.
+     * 
+     * Linking is needed to remove all attachments when record is deleted.
+     * 
+     * For example when RichEditor installed on description field of apartment resource,
+     * field in attachment resource described hear will store id of apartment record.
      */
-    attachmentRecordIdFieldName: 'record_id',
+    attachmentRecordIdFieldName: string; // e.g. 'apartment_id',
 
     /**
-     * When attachment is created, it will be linked to the resource with this field name.
-     * For example when RichEditor installed on description field of appartment resource, it will store id of appartment resource.
+     * When attachment is created, it will be linked to the resource, by storing id of the resource with editor in attachment resource.
+     * For example when RichEditor installed on description field of apartment resource, it will store id of apartment resource.
      */
-    attachmentResourceIdFieldName: 'resource_id',
+    attachmentResourceIdFieldName: string; // e.g. 'apartment_resource_id',
   },
 }