marksmith 0.0.15 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0da9e3c49eee802cb04a55505552636af16dd6821180a049bbdcdb51d0664ed6
-  data.tar.gz: 1eddf93578ba14e3b0a79f5915f69efce8a24f28c6ce9cf4f5c94c8764f5c46b
+  metadata.gz: e75eb38c87cf55bb17635627ebf0c3fa043e8f936d13e36faa997c311a81767a
+  data.tar.gz: 6817d10490f87128ef997c34b1ffb666af6feb433bdde8a2f817b3f831995985
 SHA512:
-  metadata.gz: a735566969ff5549736ae7588b20988f24caa424e60df3e41265d9aa9c6934175cebba2e39a51af159be790d91a99283873315beb14fcc080a7f08c7036bea3d
-  data.tar.gz: afab9a21269662a84b2b63e9ea338db62e2e399b4dcf524801510168598413cf37ceba0e8bc0fd21fe9f463d14c4ad1a4c82d04c6f65ace47a778bdddb916e13
+  metadata.gz: 04f4b63bc45ad9ac1012aee2841e403678b6ef9ae7198e51c2bfeca355dbf04f97ec64220fd513a9bdc7455d46c79e33036f738c9449b0056d20baebc8bbe27d
+  data.tar.gz: 93db1009535a17a459f69cf34a93febe2505fa68aefc29adb8559bd626cd1d48c32c7578ba857b8b74ea26e3e74691b3c51ce64152d4092e5f81ad7a53c8841d

data/README.md

@@ -4,7 +4,9 @@ Marksmith is a GitHub-style markdown editor for Rails apps.
 
 It supports Active Storage attachments and comes with a built-in mardown preview renderer.
 
-[![Marksmith demo](https://github.com/user-attachments/assets/09820413-7b2f-4d9d-a6a5-a9b1d5b90bea)](https://github.com/user-attachments/assets/f257db9d-6bfd-4fbc-ac10-dff1dfc99ff2)
+![Marksmith logo](./marksmith.png)
+
+![Marksmith demo](./marksmith.gif)
 
 ## Usage
 
@@ -107,7 +109,10 @@ bin/importmap pin @avo-hq/marksmith
 
 ## Active Storage
 
-The field supports Actve Storage uploads using drag and drop and pasting files into the field.
+The editor supports [ActiveStorage](https://guides.rubyonrails.org/active_storage_overview.html) uploads using drag and drop and pasting files into the field.
+
+Whe used in Avo it supports injecting assets using the [Media Library feature](http://docs.avohq.io/3.0/media-library.html).
+
 
 ## List Continuation
 

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.1.0
 */
 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.1.0
 */
 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.1.0
 */
 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.1.0
 */
 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);
 }
@@ -854,6 +854,9 @@
     margin-inline-end: calc(calc(var(--ms-spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
   }
 }
+.ms\:overflow-auto {
+  overflow: auto;
+}
 .ms\:rounded {
   border-radius: 0.25rem;
 }
@@ -900,15 +903,9 @@
 .ms\:px-2 {
   padding-inline: calc(var(--ms-spacing) * 2);
 }
-.ms\:px-3 {
-  padding-inline: calc(var(--ms-spacing) * 3);
-}
 .ms\:py-1 {
   padding-block: calc(var(--ms-spacing) * 1);
 }
-.ms\:py-2 {
-  padding-block: calc(var(--ms-spacing) * 2);
-}
 .ms\:py-px {
   padding-block: 1px;
 }
@@ -1027,6 +1024,9 @@
     flex-direction: row;
   }
 }
+.marksmith, .marksmith * {
+  box-sizing: border-box;
+}
 .ms\:button-spinner {
   width: 24px;
   height: 24px;

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/application.css

@@ -12,6 +12,11 @@
 @source "./../../helpers/";
 @source "./../../../lib/";
 
+.marksmith,
+.marksmith * {
+  box-sizing: border-box;
+}
+
 .ms\:button-spinner {
   width: 24px;
   height: 24px;

data/app/frontend/entrypoints/javascript/controllers/index.js

@@ -1,7 +1,9 @@
 import { application } from "./application"
 
 import MarksmithController from "./marksmith_controller"
+import ListContinuationController from "./list_continuation_controller"
 // import MarksmithController from "./../../../../../app/assets/builds/marksmith.esm.js"
 // console.log(MarksmithController)
 
 application.register("marksmith", MarksmithController)
+application.register("list-continuation", ListContinuationController)

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/markdown_previews/create.turbo_stream.erb

@@ -1,6 +1,4 @@
 <%= turbo_stream.update params[:element_id] do %>
-  <div class="ms:px-3 ms:py-2">
-    <%= render partial: "marksmith/shared/rendered_body", locals: { body: @body } %>
-  </div>
+  <%= render partial: "marksmith/shared/rendered_body", locals: { body: @body } %>
 <% end %>
 

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

@@ -13,19 +13,32 @@
     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",
+  class: "marksmith ms:block ms:flex-col ms:w-full ms:border ms:border-neutral-300 ms:rounded ms:@container ms:focus-within:border-neutral-400",
   data: {
     controller: "marksmith list-continuation",
     action: "
       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">
@@ -52,11 +65,11 @@
     </markdown-toolbar>
   </div>
   <% toolbar_button_classes = "ms:cursor-pointer ms:hover:bg-neutral-100 ms:px-1 ms:py-px ms:rounded ms:text-sm" %>
-  <div class="ms:border-t ms:w-full ms:border-neutral-300 ms:flex">
-    <%= content_tag :div, class: "ms:flex ms:flex-col ms:size-full", data: { marksmith_target: "fieldContainer" } do %>
+  <div class="ms:border-t ms:w-full ms:border-neutral-300 ms:flex ms:flex-1">
+    <%= content_tag :div, class: "ms:flex ms:flex-1 ms:flex-col ms:size-full", data: { marksmith_target: "fieldContainer" } do %>
       <%= text_area_tag field_name, value,
         id: name,
-        class: class_names("ms:flex ms:flex-1 ms:rounded ms:border-none ms:p-2 ms:resize-y ms:focus:outline-none ms:font-mono ms:focus:ring-0 ms:leading-normal", classes),
+        class: class_names("ms:flex ms:flex-1 ms:rounded ms:border-none ms:resize-y ms:focus:outline-none ms:font-mono ms:focus:ring-0 ms:leading-normal ms:p-2", classes),
         rows: rows,
         data: {
           action: "drop->marksmith#dropUpload paste->marksmith#pasteUpload",
@@ -68,17 +81,22 @@
         autofocus:,
         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 %>
+      <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 ms:p-2">
+        <%= 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 %>
     <%= content_tag :div,
-      class: "ms:hidden ms:markdown-preview ms:size-full ms:flex-1 ms:flex ms:size-full",
+      class: "ms:hidden ms:markdown-preview ms:size-full ms:flex-1 ms:flex ms:size-full ms:p-2 ms:overflow-auto",
       id: "markdown-preview-#{name}",
       data: {
         marksmith_target: "previewElement",

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

@@ -1,3 +1,3 @@
-<%= content_tag :div, class: "ms:prose ms:prose-neutral ms:max-w-none" do %>
+<%= content_tag :div, class: "ms:block ms:w-full ms:prose ms:max-w-none ms:prose-neutral" do %>
   <%= sanitize(body, tags: %w(table th tr td span) + ActionView::Helpers::SanitizeHelper.sanitizer_vendor.safe_list_sanitizer.allowed_tags.to_a) %>
 <% 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.1.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: marksmith
 version: !ruby/object:Gem::Version
-  version: 0.0.15
+  version: 0.1.0
 platform: ruby
 authors:
 - Adrian Marin
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-01-25 00:00:00.000000000 Z
+date: 2025-02-03 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.