make it compatible with Avo's media library

avo-hq · Jan 31, 2025 · a1dda3a · a1dda3a
1 parent e3635b8
commit a1dda3a
Show file tree

Hide file tree

Showing 16 changed files with 326 additions and 272 deletions.
diff --git a/app/assets/images/marksmith/svgs/gallery.svg b/app/assets/images/marksmith/svgs/gallery.svg
diff --git a/app/assets/images/marksmith/svgs/markdown.svg b/app/assets/images/marksmith/svgs/markdown.svg
diff --git a/app/assets/images/marksmith/svgs/paperclip.svg b/app/assets/images/marksmith/svgs/paperclip.svg
diff --git a/app/assets/javascripts/marksmith_controller-full.esm.js b/app/assets/javascripts/marksmith_controller-full.esm.js
@@ -2825,6 +2825,8 @@ var MarksmithController = (function () {
         previewUrl: String,
         extraPreviewParams: { type: Object, default: {} },
         fieldId: String,
+        galleryEnabled: { type: Boolean, default: false },
+        galleryOpenPath: String,
       }
 
       static targets = ['fieldContainer', 'fieldElement', 'previewElement', 'writeTabButton', 'previewTabButton', 'toolbar']
@@ -2877,14 +2879,14 @@ var MarksmithController = (function () {
 
       dropUpload(event) {
         event.preventDefault();
-        this.uploadFiles(event.dataTransfer.files);
+        this.#uploadFiles(event.dataTransfer.files);
       }
 
       pasteUpload(event) {
         if (!event.clipboardData.files.length) return
 
         event.preventDefault();
-        this.uploadFiles(event.clipboardData.files);
+        this.#uploadFiles(event.clipboardData.files);
       }
 
       buttonUpload(event) {
@@ -2896,40 +2898,58 @@ var MarksmithController = (function () {
         fileInput.accept = 'image/*,.pdf,.doc,.docx,.txt';
 
         fileInput.addEventListener('change', (e) => {
-          this.uploadFiles(e.target.files);
+          this.#uploadFiles(e.target.files);
         });
 
         fileInput.click();
       }
 
-      uploadFiles(files) {
-        Array.from(files).forEach((file) => this.uploadFile(file));
+      // Invoked by the other controllers (media-library)
+      insertAttachments(attachments, event) {
+        const editorAttachments = attachments.map((attachment) => {
+          const { blob, path, url } = attachment;
+          const link = this.#markdownLinkFromUrl(blob.filename, path, blob.content_type);
+
+          this.#injectLink(link);
+        });
+
+        this.editor?.chain().focus().setAttachment(editorAttachments).run();
+      }
+
+      #uploadFiles(files) {
+        Array.from(files).forEach((file) => this.#uploadFile(file));
       }
 
-      uploadFile(file) {
+      #uploadFile(file) {
         const upload = new DirectUpload(file, this.attachUrlValue);
 
         upload.create((error, blob) => {
           if (error) {
             console.log('Error', error);
           } else {
-            const text = this.markdownLink(blob);
-            const start = this.fieldElementTarget.selectionStart;
-            const end = this.fieldElementTarget.selectionEnd;
-            this.fieldElementTarget.setRangeText(text, start, end);
+            const link = this.#markdownLinkFromUrl(blob.filename, this.#pathFromBlob(blob), blob.content_type);
+            this.#injectLink(link);
           }
         });
       }
 
-      markdownLink(blob) {
-        const { filename } = blob;
-        const url = `/rails/active_storage/blobs/${blob.signed_id}/${filename}`;
-        const prefix = (this.isImage(blob.content_type) ? '!' : '');
+      #injectLink(link) {
+        const start = this.fieldElementTarget.selectionStart;
+        const end = this.fieldElementTarget.selectionEnd;
+        this.fieldElementTarget.setRangeText(link, start, end);
+      }
+
+      #pathFromBlob(blob) {
+        return `/rails/active_storage/blobs/redirect/${blob.signed_id}/${blob.filename}`
+      }
+
+      #markdownLinkFromUrl(filename, url, contentType) {
+        const prefix = (this.#isImage(contentType) ? '!' : '');
 
         return `${prefix}[${filename}](${url})\n`
       }
 
-      isImage(contentType) {
+      #isImage(contentType) {
         return ['image/jpeg', 'image/gif', 'image/png'].includes(contentType)
       }
     }

diff --git a/app/assets/javascripts/marksmith_controller-no-stimulus.esm.js b/app/assets/javascripts/marksmith_controller-no-stimulus.esm.js
@@ -2335,6 +2335,8 @@ var MarksmithController = (function (stimulus) {
         previewUrl: String,
         extraPreviewParams: { type: Object, default: {} },
         fieldId: String,
+        galleryEnabled: { type: Boolean, default: false },
+        galleryOpenPath: String,
       }
 
       static targets = ['fieldContainer', 'fieldElement', 'previewElement', 'writeTabButton', 'previewTabButton', 'toolbar']
@@ -2387,14 +2389,14 @@ var MarksmithController = (function (stimulus) {
 
       dropUpload(event) {
         event.preventDefault();
-        this.uploadFiles(event.dataTransfer.files);
+        this.#uploadFiles(event.dataTransfer.files);
       }
 
       pasteUpload(event) {
         if (!event.clipboardData.files.length) return
 
         event.preventDefault();
-        this.uploadFiles(event.clipboardData.files);
+        this.#uploadFiles(event.clipboardData.files);
       }
 
       buttonUpload(event) {
@@ -2406,40 +2408,58 @@ var MarksmithController = (function (stimulus) {
         fileInput.accept = 'image/*,.pdf,.doc,.docx,.txt';
 
         fileInput.addEventListener('change', (e) => {
-          this.uploadFiles(e.target.files);
+          this.#uploadFiles(e.target.files);
         });
 
         fileInput.click();
       }
 
-      uploadFiles(files) {
-        Array.from(files).forEach((file) => this.uploadFile(file));
+      // Invoked by the other controllers (media-library)
+      insertAttachments(attachments, event) {
+        const editorAttachments = attachments.map((attachment) => {
+          const { blob, path, url } = attachment;
+          const link = this.#markdownLinkFromUrl(blob.filename, path, blob.content_type);
+
+          this.#injectLink(link);
+        });
+
+        this.editor?.chain().focus().setAttachment(editorAttachments).run();
+      }
+
+      #uploadFiles(files) {
+        Array.from(files).forEach((file) => this.#uploadFile(file));
       }
 
-      uploadFile(file) {
+      #uploadFile(file) {
         const upload = new DirectUpload(file, this.attachUrlValue);
 
         upload.create((error, blob) => {
           if (error) {
             console.log('Error', error);
           } else {
-            const text = this.markdownLink(blob);
-            const start = this.fieldElementTarget.selectionStart;
-            const end = this.fieldElementTarget.selectionEnd;
-            this.fieldElementTarget.setRangeText(text, start, end);
+            const link = this.#markdownLinkFromUrl(blob.filename, this.#pathFromBlob(blob), blob.content_type);
+            this.#injectLink(link);
           }
         });
       }
 
-      markdownLink(blob) {
-        const { filename } = blob;
-        const url = `/rails/active_storage/blobs/${blob.signed_id}/${filename}`;
-        const prefix = (this.isImage(blob.content_type) ? '!' : '');
+      #injectLink(link) {
+        const start = this.fieldElementTarget.selectionStart;
+        const end = this.fieldElementTarget.selectionEnd;
+        this.fieldElementTarget.setRangeText(link, start, end);
+      }
+
+      #pathFromBlob(blob) {
+        return `/rails/active_storage/blobs/redirect/${blob.signed_id}/${blob.filename}`
+      }
+
+      #markdownLinkFromUrl(filename, url, contentType) {
+        const prefix = (this.#isImage(contentType) ? '!' : '');
 
         return `${prefix}[${filename}](${url})\n`
       }
 
-      isImage(contentType) {
+      #isImage(contentType) {
         return ['image/jpeg', 'image/gif', 'image/png'].includes(contentType)
       }
     }

diff --git a/app/assets/stylesheets/marksmith.css b/app/assets/stylesheets/marksmith.css
@@ -1,5 +1,5 @@
-/*! tailwindcss v4.0.0-beta.10 | MIT License | https://tailwindcss.com */
-:root {
+/*! tailwindcss v4.0.1 | MIT License | https://tailwindcss.com */
+:root, :host {
   --ms-font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
     'Segoe UI Symbol', 'Noto Color Emoji';
   --ms-font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
@@ -788,6 +788,9 @@
     margin-bottom: 0;
   }
 }
+.ms\:mr-1 {
+  margin-right: calc(var(--ms-spacing) * 1);
+}
 .ms\:block {
   display: block;
 }
@@ -841,9 +844,6 @@
 .ms\:items-center {
   align-items: center;
 }
-.ms\:gap-x-2 {
-  column-gap: calc(var(--ms-spacing) * 2);
-}
 .ms\:gap-y-1 {
   row-gap: calc(var(--ms-spacing) * 1);
 }

diff --git a/app/components/marksmith/markdown_field/edit_component.html.erb b/app/components/marksmith/markdown_field/edit_component.html.erb
@@ -1,5 +1,19 @@
 <%= field_wrapper **field_wrapper_args, full_width: true do %>
   <%= @form.marksmith @field.id,
+    gallery: {
+      enabled: true,
+      open_path: avo.attach_media_path,
+      turbo_frame: ::Avo::MODAL_FRAME_ID,
+      params: {
+        resource_name: @resource.singular_route_key,
+        controller_name: "marksmith",
+        controller_selector: "[data-unique-selector='#{unique_id}']",
+        record_id: @resource&.record&.to_param,
+      }
+    },
+    controller_data_attributes: {
+      unique_selector: unique_id, # it must coincide with the selector above
+    },
     extra_preview_params: {
       resource_class: @resource.class.name,
       field_id: field.id,

diff --git a/app/components/marksmith/markdown_field/edit_component.rb b/app/components/marksmith/markdown_field/edit_component.rb
@@ -1,4 +1,7 @@
 # frozen_string_literal: true
 
 class Marksmith::MarkdownField::EditComponent < Avo::Fields::EditComponent
+  def unique_id
+    [@field.type, @resource&.singular_route_key, @field.id].compact.join("_")
+  end
 end
diff --git a/app/frontend/entrypoints/javascript/controllers/marksmith_controller.js b/app/frontend/entrypoints/javascript/controllers/marksmith_controller.js
@@ -15,6 +15,8 @@ export default class extends Controller {
     previewUrl: String,
     extraPreviewParams: { type: Object, default: {} },
     fieldId: String,
+    galleryEnabled: { type: Boolean, default: false },
+    galleryOpenPath: String,
   }
 
   static targets = ['fieldContainer', 'fieldElement', 'previewElement', 'writeTabButton', 'previewTabButton', 'toolbar']
@@ -67,14 +69,14 @@ export default class extends Controller {
 
   dropUpload(event) {
     event.preventDefault()
-    this.uploadFiles(event.dataTransfer.files)
+    this.#uploadFiles(event.dataTransfer.files)
   }
 
   pasteUpload(event) {
     if (!event.clipboardData.files.length) return
 
     event.preventDefault()
-    this.uploadFiles(event.clipboardData.files)
+    this.#uploadFiles(event.clipboardData.files)
   }
 
   buttonUpload(event) {
@@ -86,40 +88,58 @@ export default class extends Controller {
     fileInput.accept = 'image/*,.pdf,.doc,.docx,.txt'
 
     fileInput.addEventListener('change', (e) => {
-      this.uploadFiles(e.target.files)
+      this.#uploadFiles(e.target.files)
     })
 
     fileInput.click()
   }
 
-  uploadFiles(files) {
-    Array.from(files).forEach((file) => this.uploadFile(file))
+  // Invoked by the other controllers (media-library)
+  insertAttachments(attachments, event) {
+    const editorAttachments = attachments.map((attachment) => {
+      const { blob, path, url } = attachment
+      const link = this.#markdownLinkFromUrl(blob.filename, path, blob.content_type)
+
+      this.#injectLink(link)
+    })
+
+    this.editor?.chain().focus().setAttachment(editorAttachments).run();
+  }
+
+  #uploadFiles(files) {
+    Array.from(files).forEach((file) => this.#uploadFile(file))
   }
 
-  uploadFile(file) {
+  #uploadFile(file) {
     const upload = new DirectUpload(file, this.attachUrlValue)
 
     upload.create((error, blob) => {
       if (error) {
         console.log('Error', error)
       } else {
-        const text = this.markdownLink(blob)
-        const start = this.fieldElementTarget.selectionStart
-        const end = this.fieldElementTarget.selectionEnd
-        this.fieldElementTarget.setRangeText(text, start, end)
+        const link = this.#markdownLinkFromUrl(blob.filename, this.#pathFromBlob(blob), blob.content_type)
+        this.#injectLink(link)
       }
     })
   }
 
-  markdownLink(blob) {
-    const { filename } = blob
-    const url = `/rails/active_storage/blobs/${blob.signed_id}/${filename}`
-    const prefix = (this.isImage(blob.content_type) ? '!' : '')
+  #injectLink(link) {
+    const start = this.fieldElementTarget.selectionStart
+    const end = this.fieldElementTarget.selectionEnd
+    this.fieldElementTarget.setRangeText(link, start, end)
+  }
+
+  #pathFromBlob(blob) {
+    return `/rails/active_storage/blobs/redirect/${blob.signed_id}/${blob.filename}`
+  }
+
+  #markdownLinkFromUrl(filename, url, contentType) {
+    const prefix = (this.#isImage(contentType) ? '!' : '')
 
     return `${prefix}[${filename}](${url})\n`
   }
 
-  isImage(contentType) {
+  #isImage(contentType) {
     return ['image/jpeg', 'image/gif', 'image/png'].includes(contentType)
   }
 }