marksmith 0.0.15 → 0.0.16

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0da9e3c49eee802cb04a55505552636af16dd6821180a049bbdcdb51d0664ed6
-  data.tar.gz: 1eddf93578ba14e3b0a79f5915f69efce8a24f28c6ce9cf4f5c94c8764f5c46b
+  metadata.gz: 7d2521a8fb9baa46d9a114cd5eab01821f2174b57652047feab46a1792bda3ff
+  data.tar.gz: 948e273446bc37951ac95723dd38c4d9cf0f02415cae2a34188e98bd8a146c09
 SHA512:
-  metadata.gz: a735566969ff5549736ae7588b20988f24caa424e60df3e41265d9aa9c6934175cebba2e39a51af159be790d91a99283873315beb14fcc080a7f08c7036bea3d
-  data.tar.gz: afab9a21269662a84b2b63e9ea338db62e2e399b4dcf524801510168598413cf37ceba0e8bc0fd21fe9f463d14c4ad1a4c82d04c6f65ace47a778bdddb916e13
+  metadata.gz: 19c9735c29a246ee2e8b8a05ed9fb49b8168c22432a92e2361b227f223ca0f534504189d0686874f1cdbf8f1c33ef6b8c58d931d4d3a8277b91f3bb2fd36635b
+  data.tar.gz: 587f3cd135ccbcdd211200f73a35263f38027cb533be50773e2cb3a092243e74e8a0a759d120a8021b264cff879f514f5f80f1bd312227e2ce342fcbc88c73ed

data/app/assets/images/marksmith/svgs/gallery.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-images"><path d="M18 22H4a2 2 0 0 1-2-2V6"/><path d="m22 13-1.296-1.296a2.41 2.41 0 0 0-3.408 0L11 18"/><circle cx="12" cy="8" r="2"/><rect width="16" height="16" x="6" y="2" rx="2"/></svg>

data/app/assets/images/marksmith/svgs/markdown.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="800px" height="800px" viewBox="0 0 24 24" role="img"><script xmlns="" src="chrome-extension://hoklmmgfnpapgjgcpechhaamimifchmp/frame_ant/frame_ant.js"/><title>Markdown icon</title><path d="M22.269 19.385H1.731a1.73 1.73 0 0 1-1.73-1.73V6.345a1.73 1.73 0 0 1 1.73-1.73h20.538a1.73 1.73 0 0 1 1.73 1.73v11.308a1.73 1.73 0 0 1-1.73 1.731zm-16.5-3.462v-4.5l2.308 2.885 2.307-2.885v4.5h2.308V8.078h-2.308l-2.307 2.885-2.308-2.885H3.461v7.847zM21.231 12h-2.308V8.077h-2.307V12h-2.308l3.461 4.039z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" role="img"><script xmlns="" src="chrome-extension://hoklmmgfnpapgjgcpechhaamimifchmp/frame_ant/frame_ant.js"/><title>Markdown icon</title><path d="M22.269 19.385H1.731a1.73 1.73 0 0 1-1.73-1.73V6.345a1.73 1.73 0 0 1 1.73-1.73h20.538a1.73 1.73 0 0 1 1.73 1.73v11.308a1.73 1.73 0 0 1-1.73 1.731zm-16.5-3.462v-4.5l2.308 2.885 2.307-2.885v4.5h2.308V8.078h-2.308l-2.307 2.885-2.308-2.885H3.461v7.847zM21.231 12h-2.308V8.077h-2.307V12h-2.308l3.461 4.039z"/></svg>

data/app/assets/images/marksmith/svgs/paperclip.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
   <path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
 </svg>

data/app/assets/javascripts/list_continuation_controller-full.esm.js

@@ -1,5 +1,5 @@
 /*!
-Marksmith 0.0.15
+Marksmith 0.0.16
 */
 var ListContinuationController = (function () {
     'use strict';

data/app/assets/javascripts/list_continuation_controller-no-stimulus.esm.js

@@ -1,5 +1,5 @@
 /*!
-Marksmith 0.0.15
+Marksmith 0.0.16
 */
 var ListContinuationController = (function (stimulus) {
   'use strict';

data/app/assets/javascripts/marksmith_controller-full.esm.js

@@ -1,5 +1,5 @@
 /*!
-Marksmith 0.0.15
+Marksmith 0.0.16
 */
 var MarksmithController = (function () {
     'use strict';
@@ -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)
       }
     }

data/app/assets/javascripts/marksmith_controller-no-stimulus.esm.js

@@ -1,5 +1,5 @@
 /*!
-Marksmith 0.0.15
+Marksmith 0.0.16
 */
 var MarksmithController = (function (stimulus) {
     'use strict';
@@ -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)
       }
     }

data/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);
 }

data/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,

data/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

data/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)
   }
 }

data/app/views/marksmith/shared/_editor.html.erb

@@ -13,6 +13,17 @@
     local_assigns[:value] || nil
   end
   extra_preview_params = local_assigns[:extra_preview_params] || {}
+
+  # Used by Avo and other adapters to enable the gallery link.
+  gallery_enabled = local_assigns.dig(:gallery, :enabled) || false
+  gallery_open_path = local_assigns.dig(:gallery, :open_path) || nil
+  gallery_params = local_assigns.dig(:gallery, :params) || {}
+  if gallery_open_path.present?
+    gallery_full_path = gallery_open_path + "?" + gallery_params.map { |k,v| "#{k}=#{v}" }.join('&')
+  else
+    gallery_full_path = nil
+  end
+  gallery_turbo_frame = local_assigns.dig(:gallery, :turbo_frame) || nil
 %>
 <%= content_tag :div,
   class: "ms:block ms:flex-col ms:w-full ms:border ms:border-neutral-300 ms:rounded ms:@container ms:focus-within:border-neutral-400",
@@ -22,10 +33,12 @@
       beforeinput->list-continuation#handleBeforeInput
       input->list-continuation#handleInput
     ",
+    unique_selector: ".#{@input_id}", # used to pinpoint the exact element in which to insert the attachment
     marksmith_preview_url_value: marksmith.markdown_previews_path,
     marksmith_active_tab_class: "bg-white",
     marksmith_attach_url_value: main_app.rails_direct_uploads_url,
     marksmith_extra_preview_params_value: extra_preview_params.as_json,
+    **local_assigns.fetch(:controller_data_attributes, {})
   } do %>
   <% toggle_button_classes = class_names(marksmith_button_classes, "ms:bg-neutral-200 ms:border-0 ms:bg-none ms:text-sm ms:hover:bg-neutral-300 ms:uppercase ms:text-xs ms:font-semibold ms:text-neutral-800") %>
   <div class="ms:flex-1 ms:flex-col-reverse ms:@md:flex-row ms:grow ms:flex  ms:justify-bewteen ms:bg-neutral-50 ms:rounded ms:px-2 ms:py-1 ms:gap-y-1">
@@ -69,11 +82,16 @@
         style:
       %>
       <div class="ms:flex ms:flex-1 ms:flex-grow ms:space-x-2 ms:py-1 ms:border-t ms:border-neutral-300 ms:px-2 ms:font-sans ms:text-sm">
-        <%= link_to "https://docs.github.com/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax", target: "_blank", class: class_names("ms:flex ms:items-center ms:gap-x-2 ms:text-neutral-800 ms:no-underline", toolbar_button_classes) do %>
-          <%= image_tag asset_path("marksmith/svgs/markdown.svg"), class: "ms:inline ms:size-4" %> <%= t("marksmith.markdown_is_supported").humanize %>
+        <%= link_to "https://docs.github.com/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax", target: "_blank", class: class_names("ms:flex ms:items-center ms:text-neutral-800 ms:no-underline", toolbar_button_classes) do %>
+          <%= image_tag asset_path("marksmith/svgs/markdown.svg"), class: "ms:inline ms:size-4 ms:mr-1" %> <%= t("marksmith.markdown_is_supported").humanize %>
         <% end %>
         <%= button_tag data: { action: "click->marksmith#buttonUpload" }, class: class_names("ms:bg-none ms:border-none ms:bg-transparent ms:text-neutral-600 ms:items-center ms:flex", toolbar_button_classes) do %>
-          <%= image_tag asset_path("marksmith/svgs/paperclip.svg"), class: "ms:inline ms:size-4" %> <%= t("marksmith.attach_files").humanize %>
+          <%= image_tag asset_path("marksmith/svgs/paperclip.svg"), class: "ms:inline ms:size-4 ms:mr-1" %> <%= t("marksmith.upload_files").humanize %>
+        <% end %>
+        <% if gallery_enabled %>
+          <%= link_to gallery_full_path, data: { turbo_frame: gallery_turbo_frame }, class: class_names("ms:flex ms:items-center ms:text-neutral-800 ms:no-underline", toolbar_button_classes) do %>
+            <%= image_tag asset_path("marksmith/svgs/gallery.svg"), class: "ms:inline ms:size-4 ms:mr-1" %> <%= t("marksmith.attach_from_gallery").humanize %>
+          <% end %>
         <% end %>
       </div>
     <% end %>

data/config/locales/marksmith.en.yml

@@ -30,7 +30,7 @@
 
 en:
   marksmith:
-    attach_files: attach files
+    attach_from_gallery: Attach from gallery
     bold: bold
     code: code
     header: header
@@ -43,4 +43,5 @@ en:
     quote: quote
     task_list: task_list
     unordered_list: unordered list
+    upload_files: upload files
     write: write

data/lib/marksmith/version.rb

@@ -1,3 +1,3 @@
 module Marksmith
-  VERSION = "0.0.15"
+  VERSION = "0.0.16"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: marksmith
 version: !ruby/object:Gem::Version
-  version: 0.0.15
+  version: 0.0.16
 platform: ruby
 authors:
 - Adrian Marin
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-01-25 00:00:00.000000000 Z
+date: 2025-01-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -53,6 +53,7 @@ files:
 - app/assets/images/marksmith/svgs/code.svg
 - app/assets/images/marksmith/svgs/color-swatch copy.svg
 - app/assets/images/marksmith/svgs/color-swatch.svg
+- app/assets/images/marksmith/svgs/gallery.svg
 - app/assets/images/marksmith/svgs/header.svg
 - app/assets/images/marksmith/svgs/image.svg
 - app/assets/images/marksmith/svgs/italic.svg
@@ -123,7 +124,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.10
+rubygems_version: 3.5.9
 signing_key:
 specification_version: 4
 summary: Marksmith is a GitHub-style markdown editor for Ruby on Rails applications.