marksmith 0.0.13 → 0.0.16

data/app/assets/stylesheets/marksmith.css

@@ -1,5 +1,5 @@
-/*! tailwindcss v4.0.0 | 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

@@ -0,0 +1,22 @@
+<%= 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,
+    }
+  %>
+<% end %>

data/app/components/marksmith/markdown_field/edit_component.rb

@@ -0,0 +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/components/marksmith/markdown_field/show_component.html.erb

@@ -0,0 +1,3 @@
+<%= field_wrapper **field_wrapper_args, full_width: true do %>
+  <%= render partial: "marksmith/shared/rendered_body", locals: { body: Marksmith::Renderer.new.renderer.render(@field.value) } %>
+<% end %>

data/app/components/marksmith/markdown_field/show_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class Marksmith::MarkdownField::ShowComponent < Avo::Fields::ShowComponent
+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/engine.rb

@@ -19,8 +19,33 @@ module Marksmith
 
     initializer "marksmith.assets.precompile" do |app|
       if Rails.application.config.respond_to?(:assets)
+        # The manifest will expose the asset files to the main app.
         app.config.assets.precompile << "marksmith_manifest.js"
       end
     end
+
+    initializer "avo-markdown_field.init" do |app|
+      if defined?(Avo)
+        require "marksmith/fields/markdown_field"
+
+        app.routes.append do
+          mount Marksmith::Engine => "/marksmith"
+        end
+
+        ActiveSupport.on_load(:avo_boot) do
+          Avo.plugin_manager.register :marksmith_field
+
+          Avo.plugin_manager.register_field :markdown, Marksmith::Fields::MarkdownField
+          Avo.plugin_manager.register_field :marksmith, Marksmith::Fields::MarkdownField
+
+          Avo.asset_manager.add_stylesheet "marksmith"
+          Avo.asset_manager.add_javascript "marksmith_controller-no-stimulus.esm"
+          Avo.asset_manager.add_javascript "list_continuation_controller-no-stimulus.esm"
+
+          Avo.asset_manager.register_stimulus_controller "marksmith", "MarksmithController"
+          Avo.asset_manager.register_stimulus_controller "list-continuation", "ListContinuationController"
+        end
+      end
+    end
   end
 end

data/lib/marksmith/fields/markdown_field.rb

@@ -0,0 +1,15 @@
+module Marksmith
+  module Fields
+    class MarkdownField < Avo::Fields::BaseField
+      def initialize(id, **args, &block)
+        super(id, **args, &block)
+
+        hide_on :index
+      end
+
+      def view_component_namespace
+        "Marksmith::MarkdownField"
+      end
+    end
+  end
+end

data/lib/marksmith/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: marksmith
 version: !ruby/object:Gem::Version
-  version: 0.0.13
+  version: 0.0.16
 platform: ruby
 authors:
 - Adrian Marin
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-01-23 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
@@ -64,8 +65,16 @@ files:
 - app/assets/images/marksmith/svgs/quote.svg
 - app/assets/images/marksmith/svgs/task-list.svg
 - app/assets/images/marksmith/svgs/unordered-list.svg
+- app/assets/javascripts/list_continuation_controller-full.esm.js
+- app/assets/javascripts/list_continuation_controller-no-stimulus.esm.js
+- app/assets/javascripts/marksmith_controller-full.esm.js
+- app/assets/javascripts/marksmith_controller-no-stimulus.esm.js
 - app/assets/stylesheets/marksmith.css
 - app/assets/stylesheets/marksmith/application.css
+- app/components/marksmith/markdown_field/edit_component.html.erb
+- app/components/marksmith/markdown_field/edit_component.rb
+- app/components/marksmith/markdown_field/show_component.html.erb
+- app/components/marksmith/markdown_field/show_component.rb
 - app/controllers/marksmith/application_controller.rb
 - app/controllers/marksmith/markdown_previews_controller.rb
 - app/frontend/entrypoints/application.css
@@ -89,6 +98,7 @@ files:
 - config/vite.json
 - lib/marksmith.rb
 - lib/marksmith/engine.rb
+- lib/marksmith/fields/markdown_field.rb
 - lib/marksmith/helper.rb
 - lib/marksmith/version.rb
 - lib/tasks/marksmith_tasks.rake
@@ -114,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.