Support upload of base64 image data to snippet with active storage

Use Stimulus to capture 'turbo:before-fetch-request' event to modify the
request body. This event allows for pausing and resuming the form submit
event on the Snippet form asynchronously. This enables us to use the
html-to-image library to render the Snippet html as a base64 data uri
image and append to the form submit request body. On the backend, we
enable the attachment by converting the base64 data to image data and
attaching to the Snippet.

Author: rossta

app/controllers/snippets_controller.rb

@@ -42,6 +42,7 @@ def create
   def update
     @snippet = Snippet.find(params[:id])
     if @snippet.update(snippet_params)
+      @snippet.attach_screenshot_from_base64(params[:screenshot]) if params[:screenshot]
       redirect_to @snippet, notice: "Snippet was successfully updated.", status: :see_other
     else
       render :edit, status: :unprocessable_entity
@@ -59,7 +60,7 @@ def destroy
 
   # Only allow a list of trusted parameters through.
   def snippet_params
-    params.fetch(:snippet, {}).permit(:filename, :source, :url, :language)
+    params.fetch(:snippet, {}).permit(:filename, :source, :language)
   end
 
   def feature_enabled!

app/javascript/controllers/snippets/editor.ts

@@ -35,6 +35,7 @@ export default class extends Controller {
     this.autogrow();
 
     this.element.addEventListener('click', this.enableEditMode);
+
     this.textareaTarget.addEventListener('blur', this.preview);
     this.textareaTarget.addEventListener('input', this.autogrow);
     window.addEventListener('resize', this.onResize);

app/javascript/controllers/snippets/preview.ts

@@ -1,22 +1,32 @@
 import { Controller } from '@hotwired/stimulus';
+import * as htmlToImage from 'html-to-image';
 
 import debug from '../../utils/debug';
 
 const console = debug('app:javascript:controllers:snippets:preview');
 
-export default class extends Controller {
+export default class extends Controller<HTMLFormElement> {
   // Make timeout type play nice with TypeScript
   // based on https://donatstudios.com/TypeScriptTimeoutTrouble
   private idleTimeout?: ReturnType<typeof setTimeout>;
 
-  static targets = ['previewButton'];
+  static targets = ['previewButton', 'snippet'];
 
   declare readonly hasPreviewButtonTarget: boolean;
   declare readonly previewButtonTarget: HTMLInputElement;
   declare readonly previewButtonTargets: HTMLInputElement[];
 
+  declare readonly hasSnippetTarget: boolean;
+  declare readonly snippetTarget: HTMLInputElement;
+  declare readonly snippetTargets: HTMLInputElement[];
+
   connect(): void {
     console.log('Connect!');
+
+    this.element.addEventListener(
+      'turbo:before-fetch-request',
+      this.prepareScreenshot,
+    );
   }
 
   disconnect(): void {
@@ -37,4 +47,34 @@ export default class extends Controller {
     console.log('Click preview button!');
     this.previewButtonTarget.click();
   };
+
+  share = async (event: CustomEvent) => {
+    console.log('Share!');
+    event.preventDefault();
+
+    const data = await htmlToImage.toPng(this.snippetTarget);
+
+    const input = document.createElement('input');
+    input.type = 'hidden';
+    input.name = 'snippet[screenshot]';
+    input.value = data;
+
+    this.element.requestSubmit();
+  };
+
+  prepareScreenshot = async (event) => {
+    event.preventDefault();
+
+    if (event.detail.fetchOptions.body instanceof URLSearchParams) {
+      const data = await this.drawScreenshot();
+
+      event.detail.fetchOptions.body.append('screenshot', data);
+    }
+
+    event.detail.resume();
+  };
+
+  drawScreenshot = async () => {
+    return htmlToImage.toPng(this.snippetTarget);
+  };
 }

app/javascript/css/components/article-content.css

@@ -60,7 +60,7 @@
     padding: 0;
     margin: 0;
     z-index: 100;
-    max-width: calc(var(--grid-max-width) / 3);
+    max-width: var(--grid-max-width);
   }
 
   & ul {

app/models/snippet.rb

@@ -1,11 +1,26 @@
+require_relative "../../lib/image_data_uri"
 class Snippet < ApplicationRecord
   validates :language, presence: true
 
   validate :recognized_language
   before_validation :auto_detect_language, if: :auto_detecting?
 
+  has_one_attached :screenshot
+
   attr_reader :auto_detecting
 
+  def attach_screenshot_from_base64(data)
+    data_uri = ImageDataUri.new(data)
+    image_filename = filename.presence || SecureRandom.uuid
+    image_filename = [image_filename.parameterize, data_uri.extension].join
+
+    screenshot.attach(
+      io: StringIO.new(data_uri.file_data),
+      content_type: data_uri.content_type,
+      filename: image_filename
+    )
+  end
+
   def language=(value)
     if value == "auto"
       @auto_detecting = true

app/views/components/code_block/snippet.rb

@@ -3,15 +3,16 @@ class CodeBlock::Snippet < ApplicationComponent
   include Phlex::Rails::Helpers::DOMID
   prepend CodeBlock::AtomAware
 
-  attr_reader :snippet
+  attr_reader :snippet, :data
 
-  def initialize(snippet, editing: false, **)
+  def initialize(snippet, editing: false, data: {}, **)
     @snippet = snippet
     @editing = editing
+    @data = data
   end
 
   def view_template
-    div(class: "snippet-background") do
+    div(class: "snippet-background", data:) do
       render CodeBlock::Container.new(language: language, class: "snippet") do
         render CodeBlock::Header.new do
           if editing?
@@ -22,7 +23,7 @@ def view_template
           end
         end
 
-        render CodeBlock::Body.new(data: controller_data) do
+        render CodeBlock::Body.new(data: editor_data) do
           div(class: "grid-stack") do
             render CodeBlock::Code.new(source, language: language, data: {snippet_editor_target: "source"})
             if editing?
@@ -57,7 +58,7 @@ def editing? = !!@editing
 
   delegate :language, :filename, to: :snippet
 
-  def controller_data
+  def editor_data
     editing? ? {controller: "snippet-editor"} : {}
   end
 end

app/views/snippets/_form.html.erb

@@ -26,7 +26,7 @@
   </div>
 
   <%= turbo_frame_tag dom_id(snippet, :code_block), class: "snippet-frame grid-cols-12" do %>
-    <%= render CodeBlock::Snippet.new(snippet, editing: true) %>
+    <%= render CodeBlock::Snippet.new(snippet, editing: true, data: { snippet_preview_target: "snippet" }) %>
   <% end %>
 
   <fieldset>
@@ -39,6 +39,8 @@
         snippet_preview_target: "previewButton",
         turbo_frame: dom_id(snippet, :code_block)
       } %>
+
+    <%= form.button "Share", class: "button secondary", data: { action: "snippet-preview#share" } %>
   </fieldset>
 <% end %>
 

app/views/snippets/index.html.erb

@@ -6,7 +6,11 @@
 
   <% @snippets.each do |snippet| %>
     <%= link_to snippet, class: "block" do %>
-      <%= render CodeBlock::Snippet.new(snippet) %>
+      <% if snippet.screenshot.attached? %>
+        <%= image_tag snippet.screenshot %>
+      <% else %>
+        <%= render CodeBlock::Snippet.new(snippet) %>
+      <% end %>
     <% end %>
   <% end %>
 </div>

app/views/snippets/show.html.erb

@@ -2,6 +2,8 @@
 <div class="section-content container py-gap">
   <%= render CodeBlock::Snippet.new(@snippet) %>
 
+  <%= image_tag @snippet.screenshot if @snippet.screenshot.attached? %>
+
   <div>
     <%= link_to "Edit this snippet", edit_snippet_path(@snippet) %> |
     <%= link_to "Back to snippets", snippets_path %>

config/initializers/filter_parameter_logging.rb

@@ -4,5 +4,5 @@
 # Use this to limit dissemination of sensitive information.
 # See the ActiveSupport::ParameterFilter documentation for supported notations and behaviors.
 Rails.application.config.filter_parameters += [
-  :passw, :secret, :token, :_key, :crypt, :salt, :certificate, :otp, :ssn
+  :passw, :secret, :token, :_key, :crypt, :salt, :certificate, :otp, :ssn, :screenshot
 ]