@adminforth/markdown 1.0.0 → 1.2.0

package/.woodpecker/buildSlackNotify.sh

@@ -5,7 +5,7 @@ set -x
 COMMIT_SHORT_SHA=$(echo $CI_COMMIT_SHA | cut -c1-8)
 
 
-if [ "$CI_STEP_STATUS" = "success" ]; then
+if [ "$CI_PREV_PIPELINE_STATUS" = "success" ]; then
   MESSAGE="Did a build without issues on \`$CI_REPO_NAME/$CI_COMMIT_BRANCH\`. Commit: _${CI_COMMIT_MESSAGE}_ (<$CI_COMMIT_URL|$COMMIT_SHORT_SHA>)"
 
   curl  -s -X POST -H "Content-Type: application/json" -d '{

package/.woodpecker/release.yml

@@ -15,8 +15,6 @@ steps:
         from_secret: VAULT_TOKEN
     commands:
       - infisical export --domain https://vault.devforth.io/api --format=dotenv-export --env="prod" > /woodpecker/deploy.vault.env
-    secrets:
-      - VAULT_TOKEN
 
   release:
     image: node:20
@@ -36,7 +34,6 @@ steps:
     when:
       - event: push
         status: [failure, success]
-      - event: push
     image: curlimages/curl
     commands:
       - export $(cat /woodpecker/deploy.vault.env | xargs)

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Devforth.io
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,7 @@
+# AdminForth Markdown Plugin
+
+<img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="License: MIT" /> <img src="https://woodpecker.devforth.io/api/badges/3848/status.svg" alt="Build Status" /> <a href="https://www.npmjs.com/package/@adminforth/markdown"> <img src="https://img.shields.io/npm/dt/@adminforth/markdown" alt="npm downloads" /> </a> <a href="https://www.npmjs.com/package/@adminforth/markdown"> <img src="https://img.shields.io/npm/v/@adminforth/markdown" alt="npm version" /> </a>
+
+Enables powerful Markdown editing capabilities in AdminForth applications using <a href="https://milkdown.dev">Milkdown</a>.
+
+## For usage, see [AdminForth Markdown Documentation](https://adminforth.dev/docs/tutorial/Plugins/markdown/)

package/build.log

@@ -10,5 +10,5 @@ custom/package-lock.json
 custom/package.json
 custom/tsconfig.json
 
-sent 169,522 bytes  received 115 bytes  339,274.00 bytes/sec
-total size is 169,062  speedup is 1.00
+sent 172,084 bytes  received 115 bytes  344,398.00 bytes/sec
+total size is 171,624  speedup is 1.00

package/custom/MarkdownEditor.vue

@@ -9,18 +9,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
-
-import { Editor, rootCtx, defaultValueCtx } from '@milkdown/core';
-import { gfm } from '@milkdown/kit/preset/gfm';
-import { commonmark } from '@milkdown/preset-commonmark';
-import { listener, listenerCtx } from '@milkdown/plugin-listener';
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { callAdminForthApi } from '@/utils';
+import { Editor } from '@milkdown/core';
 import { Crepe } from '@milkdown/crepe';
-
+import type { AdminForthColumn } from '@/types/Common';
 import '@milkdown/crepe/theme/common/style.css';
 import '@milkdown/crepe/theme/frame-dark.css';
 
-const props = defineProps<{ column: any; record: any }>();
+const props = defineProps<{
+  column: AdminForthColumn,
+  record: any,
+  meta: any,
+}>()
+
 const emit = defineEmits(['update:value']);
 const editorContainer = ref<HTMLElement | null>(null);
 const content = ref(props.record[props.column.name] || '');
@@ -63,32 +65,120 @@ onMounted(async () => {
     // Crepe
     if (props.column.components.edit.meta.pluginType === 'crepe' || props.column.components.create.meta.pluginType === 'crepe') {
       crepeInstance = await new Crepe({
-      root: editorContainer.value,  
-      defaultValue: content.value,
-    });
-
-    crepeInstance.on((listener) => {
-      listener.markdownUpdated(() => {
-        const markdownContent = crepeInstance.getMarkdown();
-        emit('update:value', markdownContent);
+        root: editorContainer.value,
+        defaultValue: content.value,
       });
 
-    listener.focus(() => {
-      isFocused.value = true;
-    });
-    listener.blur(() => {
-      isFocused.value = false;
-    });
-  });
+      crepeInstance.on((listener) => {
+        listener.markdownUpdated(async () => {
+          let markdownContent = crepeInstance.getMarkdown(); 
+          markdownContent = await replaceBlobsWithS3Urls(markdownContent);
+          emit('update:value', markdownContent);
+        });
+
+        listener.focus(() => {
+          isFocused.value = true;
+        });
+        listener.blur(() => {
+          isFocused.value = false;
+        });
+      });
 
-await crepeInstance.create();
-console.log('Crepe editor created');
+      await crepeInstance.create();
+      console.log('Crepe editor created');
     }
   } catch (error) {
     console.error('Failed to initialize editor:', error);
   }
 });
 
+async function replaceBlobsWithS3Urls(markdownContent: string): Promise<string> {
+  const blobUrls = markdownContent.match(/blob:[^\s)]+/g);
+  const base64Images = markdownContent.match(/data:image\/[^;]+;base64,[^\s)]+/g);
+  if (blobUrls) {
+    for (let blobUrl of blobUrls) {
+      const file = await getFileFromBlobUrl(blobUrl);
+      if (file) {
+        const s3Url = await uploadFileToS3(file);
+        if (s3Url) {
+          markdownContent = markdownContent.replace(blobUrl, s3Url);
+        }
+      }
+    }
+  }
+  if (base64Images) {
+  for (let base64Image of base64Images) {
+      const file = await fetch(base64Image).then(res => res.blob()).then(blob => new File([blob], 'image.jpg', { type: blob.type }));
+      if (file) {
+        const s3Url = await uploadFileToS3(file);
+        if (s3Url) {
+          markdownContent = markdownContent.replace(base64Image, s3Url);
+        }
+      }
+    }
+  }
+  return markdownContent;
+}
+
+async function getFileFromBlobUrl(blobUrl: string): Promise<File | null> {
+  try {
+    const response = await fetch(blobUrl);
+    const blob = await response.blob();
+    const file = new File([blob], 'uploaded-image.jpg', { type: blob.type });
+    return file;
+  } catch (error) {
+    console.error('Failed to get file from blob URL:', error);
+    return null;
+  }
+}
+async function uploadFileToS3(file: File) {
+  if (!file || !file.name) {
+    console.error('File or file name is undefined');
+    return;
+  }
+
+  const formData = new FormData();
+  formData.append('image', file);
+  const originalFilename = file.name.split('.').slice(0, -1).join('.');
+  const originalExtension = file.name.split('.').pop();
+
+  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) {
+    console.error('Upload failed:', error);
+    return;
+  }
+
+  const xhr = new XMLHttpRequest();
+  xhr.open('PUT', uploadUrl, true);
+  xhr.setRequestHeader('Content-Type', file.type);
+  xhr.setRequestHeader('x-amz-tagging', tagline);
+  xhr.send(file);
+
+  return new Promise((resolve, reject) => {
+    xhr.onload = () => {
+      if (xhr.status === 200) {
+        resolve(previewUrl);
+      } else {
+        reject('Error uploading to S3');
+      }
+    };
+
+    xhr.onerror = () => {
+      reject('Error uploading to S3');
+    };
+  });
+}
+
 onBeforeUnmount(() => {
   milkdownInstance?.destroy();
   crepeInstance?.destroy();

package/dist/custom/MarkdownEditor.vue

@@ -9,18 +9,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
-
-import { Editor, rootCtx, defaultValueCtx } from '@milkdown/core';
-import { gfm } from '@milkdown/kit/preset/gfm';
-import { commonmark } from '@milkdown/preset-commonmark';
-import { listener, listenerCtx } from '@milkdown/plugin-listener';
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { callAdminForthApi } from '@/utils';
+import { Editor } from '@milkdown/core';
 import { Crepe } from '@milkdown/crepe';
-
+import type { AdminForthColumn } from '@/types/Common';
 import '@milkdown/crepe/theme/common/style.css';
 import '@milkdown/crepe/theme/frame-dark.css';
 
-const props = defineProps<{ column: any; record: any }>();
+const props = defineProps<{
+  column: AdminForthColumn,
+  record: any,
+  meta: any,
+}>()
+
 const emit = defineEmits(['update:value']);
 const editorContainer = ref<HTMLElement | null>(null);
 const content = ref(props.record[props.column.name] || '');
@@ -63,32 +65,120 @@ onMounted(async () => {
     // Crepe
     if (props.column.components.edit.meta.pluginType === 'crepe' || props.column.components.create.meta.pluginType === 'crepe') {
       crepeInstance = await new Crepe({
-      root: editorContainer.value,  
-      defaultValue: content.value,
-    });
-
-    crepeInstance.on((listener) => {
-      listener.markdownUpdated(() => {
-        const markdownContent = crepeInstance.getMarkdown();
-        emit('update:value', markdownContent);
+        root: editorContainer.value,
+        defaultValue: content.value,
       });
 
-    listener.focus(() => {
-      isFocused.value = true;
-    });
-    listener.blur(() => {
-      isFocused.value = false;
-    });
-  });
+      crepeInstance.on((listener) => {
+        listener.markdownUpdated(async () => {
+          let markdownContent = crepeInstance.getMarkdown(); 
+          markdownContent = await replaceBlobsWithS3Urls(markdownContent);
+          emit('update:value', markdownContent);
+        });
+
+        listener.focus(() => {
+          isFocused.value = true;
+        });
+        listener.blur(() => {
+          isFocused.value = false;
+        });
+      });
 
-await crepeInstance.create();
-console.log('Crepe editor created');
+      await crepeInstance.create();
+      console.log('Crepe editor created');
     }
   } catch (error) {
     console.error('Failed to initialize editor:', error);
   }
 });
 
+async function replaceBlobsWithS3Urls(markdownContent: string): Promise<string> {
+  const blobUrls = markdownContent.match(/blob:[^\s)]+/g);
+  const base64Images = markdownContent.match(/data:image\/[^;]+;base64,[^\s)]+/g);
+  if (blobUrls) {
+    for (let blobUrl of blobUrls) {
+      const file = await getFileFromBlobUrl(blobUrl);
+      if (file) {
+        const s3Url = await uploadFileToS3(file);
+        if (s3Url) {
+          markdownContent = markdownContent.replace(blobUrl, s3Url);
+        }
+      }
+    }
+  }
+  if (base64Images) {
+  for (let base64Image of base64Images) {
+      const file = await fetch(base64Image).then(res => res.blob()).then(blob => new File([blob], 'image.jpg', { type: blob.type }));
+      if (file) {
+        const s3Url = await uploadFileToS3(file);
+        if (s3Url) {
+          markdownContent = markdownContent.replace(base64Image, s3Url);
+        }
+      }
+    }
+  }
+  return markdownContent;
+}
+
+async function getFileFromBlobUrl(blobUrl: string): Promise<File | null> {
+  try {
+    const response = await fetch(blobUrl);
+    const blob = await response.blob();
+    const file = new File([blob], 'uploaded-image.jpg', { type: blob.type });
+    return file;
+  } catch (error) {
+    console.error('Failed to get file from blob URL:', error);
+    return null;
+  }
+}
+async function uploadFileToS3(file: File) {
+  if (!file || !file.name) {
+    console.error('File or file name is undefined');
+    return;
+  }
+
+  const formData = new FormData();
+  formData.append('image', file);
+  const originalFilename = file.name.split('.').slice(0, -1).join('.');
+  const originalExtension = file.name.split('.').pop();
+
+  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) {
+    console.error('Upload failed:', error);
+    return;
+  }
+
+  const xhr = new XMLHttpRequest();
+  xhr.open('PUT', uploadUrl, true);
+  xhr.setRequestHeader('Content-Type', file.type);
+  xhr.setRequestHeader('x-amz-tagging', tagline);
+  xhr.send(file);
+
+  return new Promise((resolve, reject) => {
+    xhr.onload = () => {
+      if (xhr.status === 200) {
+        resolve(previewUrl);
+      } else {
+        reject('Error uploading to S3');
+      }
+    };
+
+    xhr.onerror = () => {
+      reject('Error uploading to S3');
+    };
+  });
+}
+
 onBeforeUnmount(() => {
   milkdownInstance?.destroy();
   crepeInstance?.destroy();

package/dist/index.js

@@ -7,10 +7,11 @@ 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";
 export default class MarkdownPlugin extends AdminForthPlugin {
     constructor(options) {
         super(options, import.meta.url);
+        this.attachmentResource = undefined;
         this.options = options;
     }
     instanceUniqueRepresentation(pluginOptions) {
@@ -32,6 +33,7 @@ export default class MarkdownPlugin extends AdminForthPlugin {
             modifyResourceConfig: { get: () => super.modifyResourceConfig }
         });
         return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b;
             _super.modifyResourceConfig.call(this, adminforth, resourceConfig);
             this.resourceConfig = resourceConfig;
             const fieldName = this.options.fieldName;
@@ -42,6 +44,27 @@ export default class MarkdownPlugin extends AdminForthPlugin {
             if (!column.components) {
                 column.components = {};
             }
+            if (this.options.attachments) {
+                const resource = yield adminforth.config.resources.find(r => r.resourceId === this.options.attachments.attachmentResource);
+                if (!resource) {
+                    throw new Error(`Resource '${this.options.attachments.attachmentResource}' not found`);
+                }
+                this.attachmentResource = resource;
+                const field = yield 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 = yield adminforth.activatedPlugins.find(p => p.resourceConfig.resourceId === this.options.attachments.attachmentResource &&
+                    p.pluginOptions.pathColumnName === this.options.attachments.attachmentFieldName);
+                if (!plugin) {
+                    throw new Error(`${plugin} 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;
+            }
             column.components.show = {
                 file: this.componentPath("MarkdownRenderer.vue"),
                 meta: {
@@ -62,6 +85,7 @@ export default class MarkdownPlugin extends AdminForthPlugin {
                     pluginInstanceId: this.pluginInstanceId,
                     columnName: fieldName,
                     pluginType: 'crepe',
+                    uploadPluginInstanceId: (_a = this.uploadPlugin) === null || _a === void 0 ? void 0 : _a.pluginInstanceId,
                 },
             };
             column.components.create = {
@@ -70,8 +94,110 @@ export default class MarkdownPlugin extends AdminForthPlugin {
                     pluginInstanceId: this.pluginInstanceId,
                     columnName: fieldName,
                     pluginType: 'crepe',
+                    uploadPluginInstanceId: (_b = this.uploadPlugin) === null || _b === void 0 ? void 0 : _b.pluginInstanceId,
                 },
             };
+            const editorRecordPkField = resourceConfig.columns.find(c => c.primaryKey);
+            if (this.options.attachments) {
+                function getAttachmentPathes(markdown) {
+                    if (!markdown) {
+                        return [];
+                    }
+                    const s3PathRegex = /!\[.*?\]\((https:\/\/.*?\/.*?)(\?.*)?\)/g;
+                    const matches = [...markdown.matchAll(s3PathRegex)];
+                    return matches
+                        .map(match => match[1])
+                        .filter(src => src.includes("s3") || src.includes("amazonaws"));
+                }
+                const createAttachmentRecords = (adminforth, options, recordId, s3Paths, adminUser) => __awaiter(this, void 0, void 0, function* () {
+                    const extractKey = (s3Paths) => s3Paths.replace(/^https:\/\/[^\/]+\/+/, '');
+                    process.env.HEAVY_DEBUG && console.log('📸 Creating attachment records', JSON.stringify(recordId));
+                    try {
+                        yield Promise.all(s3Paths.map((s3Path) => __awaiter(this, void 0, void 0, function* () {
+                            console.log('Processing path:', s3Path);
+                            try {
+                                yield adminforth.createResourceRecord({
+                                    resource: this.attachmentResource,
+                                    record: {
+                                        [options.attachments.attachmentFieldName]: extractKey(s3Path),
+                                        [options.attachments.attachmentRecordIdFieldName]: recordId,
+                                        [options.attachments.attachmentResourceIdFieldName]: resourceConfig.resourceId,
+                                    },
+                                    adminUser
+                                });
+                                console.log('Successfully created record for:', s3Path);
+                            }
+                            catch (err) {
+                                console.error('Error creating record for', s3Path, err);
+                            }
+                        })));
+                    }
+                    catch (err) {
+                        console.error('Error in Promise.all', err);
+                    }
+                });
+                const deleteAttachmentRecords = (adminforth, options, s3Paths, adminUser) => __awaiter(this, void 0, void 0, function* () {
+                    if (!s3Paths.length) {
+                        return;
+                    }
+                    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((_a) => __awaiter(this, [_a], void 0, function* ({ record, adminUser }) {
+                    // find all s3Paths in the html
+                    const s3Paths = getAttachmentPathes(record[this.options.fieldName]);
+                    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((_a) => __awaiter(this, [_a], void 0, function* ({ recordId, record, adminUser }) {
+                    process.env.HEAVY_DEBUG && console.log('⚓ Cought hook', recordId, 'rec', record);
+                    if (record[this.options.fieldName] === undefined) {
+                        console.log('⚓ Cought hook', recordId, 'rec', record);
+                        // field was not changed, do nothing
+                        return { ok: true };
+                    }
+                    const existingAparts = 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 = existingAparts.map((a) => a[this.options.attachments.attachmentFieldName]);
+                    const newS3Paths = getAttachmentPathes(record[this.options.fieldName]);
+                    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((_a) => __awaiter(this, [_a], void 0, function* ({ record, adminUser }) {
+                    const existingAparts = 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 = existingAparts.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 };
+                }));
+            }
         });
     }
 }

package/index.ts

@@ -1,10 +1,12 @@
-import { AdminForthPlugin, AdminForthResource, IAdminForth } from "adminforth";
+import { AdminForthPlugin, AdminForthResource, IAdminForth, Filters, AdminUser} from "adminforth";
 import { PluginOptions } from "./types.js";
 
 export default class MarkdownPlugin extends AdminForthPlugin {
   options: PluginOptions;
   resourceConfig!: AdminForthResource;
   adminforth!: IAdminForth;
+  uploadPlugin: AdminForthPlugin;
+  attachmentResource: AdminForthResource = undefined;
 
   constructor(options: PluginOptions) {
     super(options, import.meta.url);
@@ -37,10 +39,34 @@ export default class MarkdownPlugin extends AdminForthPlugin {
     if (!column) {
       throw new Error(`Column ${fieldName} not found in resource ${resourceConfig.label}`);
     }
-
     if (!column.components) {
       column.components = {};
     }
+    if (this.options.attachments) {
+      const resource = await adminforth.config.resources.find(r => r.resourceId === this.options.attachments!.attachmentResource);
+      if (!resource) {
+        throw new Error(`Resource '${this.options.attachments!.attachmentResource}' not found`);
+      }
+      this.attachmentResource = resource;
+      const field = await 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 = await adminforth.activatedPlugins.find(p => 
+        p.resourceConfig!.resourceId === this.options.attachments!.attachmentResource && 
+        p.pluginOptions.pathColumnName === this.options.attachments!.attachmentFieldName
+      );
+      if (!plugin) {
+        throw new Error(`${plugin} 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;
+    }
 
     column.components.show = {
       file: this.componentPath("MarkdownRenderer.vue"),
@@ -64,6 +90,7 @@ export default class MarkdownPlugin extends AdminForthPlugin {
         pluginInstanceId: this.pluginInstanceId,
         columnName: fieldName,
         pluginType: 'crepe',
+        uploadPluginInstanceId: this.uploadPlugin?.pluginInstanceId,
       },
     };
     
@@ -73,7 +100,138 @@ export default class MarkdownPlugin extends AdminForthPlugin {
         pluginInstanceId: this.pluginInstanceId,
         columnName: fieldName,
         pluginType: 'crepe',
+        uploadPluginInstanceId: this.uploadPlugin?.pluginInstanceId,
       },
     };
+    const editorRecordPkField = resourceConfig.columns.find(c => c.primaryKey);
+    if (this.options.attachments) {
+
+      function getAttachmentPathes(markdown: string): string[] {
+        if (!markdown) {
+          return [];
+        }
+
+        const s3PathRegex = /!\[.*?\]\((https:\/\/.*?\/.*?)(\?.*)?\)/g;
+      
+        const matches = [...markdown.matchAll(s3PathRegex)];
+
+        return matches
+          .map(match => match[1])
+          .filter(src => src.includes("s3") || src.includes("amazonaws"));
+      }
+
+      const createAttachmentRecords = async (
+        adminforth: IAdminForth, options: PluginOptions, recordId: any, s3Paths: string[], adminUser: AdminUser
+      ) => {
+        const extractKey = (s3Paths: string) => s3Paths.replace(/^https:\/\/[^\/]+\/+/, '');
+        process.env.HEAVY_DEBUG && console.log('📸 Creating attachment records', JSON.stringify(recordId))
+        try {
+          await Promise.all(s3Paths.map(async (s3Path) => {
+            console.log('Processing path:', s3Path);
+            try {
+              await adminforth.createResourceRecord(
+                {
+                  resource: this.attachmentResource,
+                  record: {
+                    [options.attachments.attachmentFieldName]: extractKey(s3Path),
+                    [options.attachments.attachmentRecordIdFieldName]: recordId,
+                    [options.attachments.attachmentResourceIdFieldName]: resourceConfig.resourceId,
+                  },
+                  adminUser
+                }
+              );
+              console.log('Successfully created record for:', s3Path);
+            } catch (err) {
+              console.error('Error creating record for', s3Path, err);
+            }
+          }));
+        } catch (err) {
+          console.error('Error in Promise.all', err);
+        }
+      }
+
+      const deleteAttachmentRecords = async (
+        adminforth: IAdminForth, options: PluginOptions, s3Paths: string[], adminUser: AdminUser
+      ) => {
+        if (!s3Paths.length) {
+          return;
+        }
+        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).push(async ({ record, adminUser }: { record: any, adminUser: AdminUser }) => {
+        // find all s3Paths in the html
+        const s3Paths = getAttachmentPathes(record[this.options.fieldName])
+        
+        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).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.fieldName] === undefined) {
+            console.log('⚓ Cought hook', recordId, 'rec', record);
+            // field was not changed, do nothing
+            return { ok: true };
+          }
+          const existingAparts = 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 = existingAparts.map((a: any) => a[this.options.attachments.attachmentFieldName]);
+          const newS3Paths = getAttachmentPathes(record[this.options.fieldName]);
+          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).push(
+        async ({ record, adminUser }: { record: any, adminUser: AdminUser }) => {
+          const existingAparts = 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 = existingAparts.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 };
+        }
+      );
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/markdown",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Markdown plugin for adminforth",
   "type": "module",
   "main": "dist/index.js",

package/types.ts

@@ -1,4 +1,39 @@
 
 export interface PluginOptions {
   fieldName: string;
+
+  /**
+   * Allows to attach images to the HTML text
+   * Requires to have a separate resource with Upload Plugin installed on attachment field.
+   * Each attachment used in HTML will create one record in the attachment resource.
+   */
+  attachments?: {
+    /**
+     * Resource name where images are stored. Should point to the existing resource.
+     */
+    attachmentResource: string;
+
+    /**
+     * 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: string; // e.g. 'image_path',
+
+    /**
+     * 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: string; // e.g. 'apartment_id',
+
+    /**
+     * 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: string; // e.g. 'apartment_resource_id',
+  },
 }