Add direct image upload to the EasyMDE field

app/components/avo/fields/markdown_field/edit_component.html.erb

@@ -7,6 +7,7 @@
         view: view,
         'easy-mde-target': 'element',
         'component-options': @field.options.to_json,
+        upload_url: @field.options[:upload_url]
       },
       disabled: disabled?,
       placeholder: @field.placeholder,

app/javascript/js/controllers/fields/easy_mde_controller.js

@@ -1,36 +1,106 @@
-import { Controller } from '@hotwired/stimulus'
-import EasyMDE from 'easymde'
+import { Controller } from "@hotwired/stimulus";
+import EasyMDE from "easymde";
+import { DirectUpload } from "@rails/activestorage";
 
 export default class extends Controller {
-  static targets = ['element']
+  static targets = ["element"];
 
   get view() {
-    return this.elementTarget.dataset.view
+    return this.elementTarget.dataset.view;
   }
 
   get componentOptions() {
     try {
-      return JSON.parse(this.elementTarget.dataset.componentOptions)
+      return JSON.parse(this.elementTarget.dataset.componentOptions);
     } catch (error) {
-      return {}
+      return {};
     }
   }
 
   connect() {
+    console.log("Hello from the connection")
+
     const options = {
       element: this.elementTarget,
       spellChecker: this.componentOptions.spell_checker,
-      autoRefresh: { delay: 500},
+      autoRefresh: { delay: 500 },
+    };
+
+    if (this.view === "show") {
+      options.toolbar = false;
+      options.status = false;
     }
 
-    if (this.view === 'show') {
-      options.toolbar = false
-      options.status = false
+
+    if (this.componentOptions.image_upload) {
+      this._configureImageUploads(options);
     }
 
-    const easyMde = new EasyMDE(options)
-    if (this.view === 'show') {
-      easyMde.codemirror.options.readOnly = true
+    const easyMde = new EasyMDE(options);
+    if (this.view === "show") {
+      easyMde.codemirror.options.readOnly = true;
     }
   }
+
+  _configureImageUploads(options) {
+    options.uploadImage = true;
+    options.imageUploadEndpoint = this.elementTarget.dataset.uploadUrl;
+    options.imageUploadFunction = this._handleImageUpload.bind(this);
+    options.imageAccept = "image/*";
+    options.previewImagesInEditor = true;
+    options.toolbar = this.toolbarItems;
+    return options;
+  }
+
+  _handleImageUpload(file, onSuccess, onError) {
+    const upload = new DirectUpload(file, this.elementTarget.dataset.uploadUrl);
+    upload.create((error, blob) => {
+      if (error) return onError(error);
+      const imageUrl = this._encodedImageUrl(blob);
+      onSuccess(imageUrl);
+    });
+  }
+
+  _encodedImageUrl(blob) {
+    return `/rails/active_storage/blobs/redirect/${
+      blob.signed_id
+    }/${encodeURIComponent(blob.filename)}`;
+  }
+
+  get toolbarItems() {
+    const baseItems = [
+      "bold",
+      "italic",
+      "heading",
+      "|",
+      "quote",
+      "unordered-list",
+      "ordered-list",
+      "|",
+      "link",
+      "image",
+    ];
+
+    const uploadImageItem = this.componentOptions.image_upload
+      ? [
+          {
+            name: "upload-image",
+            action: EasyMDE.drawUploadedImage,
+            className: "fa fa-file-picture-o",
+            title: "Upload & insert image",
+          },
+        ]
+      : [];
+
+    return [
+      ...baseItems,
+      ...uploadImageItem,
+      "|",
+      "preview",
+      "side-by-side",
+      "fullscreen",
+      "|",
+      "guide",
+    ];
+  }
 }

lib/avo/fields/markdown_field.rb

@@ -9,14 +9,26 @@ def initialize(id, **args, &block)
         hide_on :index
 
         @always_show = args[:always_show].present? ? args[:always_show] : false
-        @height = args[:height].present? ? args[:height].to_s : "auto"
-        @spell_checker = args[:spell_checker].present? ? args[:spell_checker] : false
+        @height = args[:height].present? ? args[:height].to_s : 'auto'
+        @upload_url = args[:upload_url].present? ? args[:upload_url] : direct_uploads_url
+        @image_upload =
+          args[:image_upload].present? ? args[:image_upload] : false
+        @spell_checker =
+          args[:spell_checker].present? ? args[:spell_checker] : false
         @options = {
           spell_checker: @spell_checker,
           always_show: @always_show,
+          image_upload: @image_upload,
+          upload_url: direct_uploads_url,
           height: @height
         }
       end
+
+      private
+
+      def direct_uploads_url
+        "/rails/active_storage/direct_uploads"
+      end
     end
   end
 end

spec/dummy/app/avo/resources/project.rb

@@ -60,7 +60,7 @@ def fields
       relative: true,
       timezone: "EET",
       format: "MMMM dd, y HH:mm:ss z"
-    field :description, as: :markdown, height: "350px"
+    field :description, as: :markdown, height: "350px", image_upload: true
     field :files,
       as: :files,
       translation_key: "avo.field_translations.files",