Refactor snippet form to Phlex component

Author: rossta

app/javascript/controllers/snippets/editor.ts

@@ -6,9 +6,8 @@ import debug from '../../utils/debug';
 const console = debug('app:javascript:controllers:snippets:editor');
 
 export default class extends Controller {
-  static targets = ['previewButton', 'source', 'textarea'];
+  static targets = ['source', 'textarea'];
 
-  declare previewButtonTarget: HTMLButtonElement;
   declare sourceTarget: HTMLElement;
   declare textareaTarget: HTMLTextAreaElement;
 

app/javascript/controllers/snippets/preview.ts

@@ -14,11 +14,9 @@ export default class extends Controller<HTMLFormElement> {
 
   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!');
@@ -48,20 +46,6 @@ export default class extends Controller<HTMLFormElement> {
     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();
 

app/views/components/code_block/snippet.rb

@@ -7,35 +7,17 @@ class CodeBlock::Snippet < ApplicationComponent
 
   def initialize(snippet, editing: false, data: {}, **)
     @snippet = snippet
-    @editing = editing
-    @data = data
   end
 
   def view_template
-    div(class: "snippet-background", data:) do
+    div(class: "snippet-background") do
       render CodeBlock::Container.new(language: language, class: "snippet") do
         render CodeBlock::Header.new do
-          if editing?
-            label(class: "sr-only", for: "snippet[filename]") { "Filename" }
-            input(type: "text", name: "snippet[filename]", value: filename)
-          else
-            filename
-          end
+          filename
         end
 
-        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?
-              label(class: "sr-only", for: "snippet[source]") { "Source" }
-              div(class: "code-editor autogrow-wrapper") do
-                textarea(
-                  name: "snippet[source]",
-                  data: {snippet_editor_target: "textarea"}
-                ) { source }
-              end
-            end
-          end
+        render CodeBlock::Body.new do
+          render CodeBlock::Code.new(source, language: language, data: {snippet_editor_target: "source"})
         end
       end
     end
@@ -54,11 +36,5 @@ def source
     snippet.source || ""
   end
 
-  def editing? = !!@editing
-
   delegate :language, :filename, to: :snippet
-
-  def editor_data
-    editing? ? {controller: "snippet-editor"} : {}
-  end
 end

app/views/snippets/_form.html.erb

@@ -1,6 +1,6 @@
 <%= render Pages::Header.new(title: "Edit snippet") %>
 <div class="section-content container py-gap">
-  <%= render "form", snippet: @snippet %>
+  <%= render Snippets::Form.new(snippet: @snippet) %>
 
   <br>
 

app/views/snippets/edit.html.erb

@@ -0,0 +1,125 @@
+class Snippets::Form < ApplicationComponent
+  include Phlex::Rails::Helpers::DOMID
+  include Phlex::Rails::Helpers::FormWith
+  include Phlex::Rails::Helpers::TurboFrameTag
+  include Phlex::Rails::Helpers::Pluralize
+
+  attr_accessor :snippet
+
+  def initialize(snippet:)
+    @snippet = snippet
+  end
+
+  def view_template
+    form_with(
+      model: snippet,
+      class: "grid-content",
+      data: {
+        controller: "snippet-preview",
+        action: "snippet-editor:changed->snippet-preview#preview"
+      }
+    ) do |form|
+      errors
+
+      language_select(form, data: {action: "change->snippet-preview#preview"})
+
+      turbo_frame_tag dom_id(snippet, :code_block), class: "snippet-frame grid-cols-12" do
+        div(class: "snippet-background", data: {snippet_preview_target: "snippet"}) do
+          render CodeBlock::Container.new(language: language, class: "snippet") do
+            render CodeBlock::Header.new do
+              label(class: "sr-only", for: "snippet[filename]") { "Filename" }
+              input(type: "text", name: "snippet[filename]", value: filename)
+            end
+
+            render CodeBlock::Body.new(data: {controller: "snippet-editor"}) do
+              div(class: "grid-stack") do
+                render CodeBlock::Code.new(source, language: language, data: {snippet_editor_target: "source"})
+                label(class: "sr-only", for: "snippet[source]") { "Source" }
+                div(class: "code-editor autogrow-wrapper") do
+                  textarea(
+                    name: "snippet[source]",
+                    data: {snippet_editor_target: "textarea"}
+                  ) { source }
+                end
+              end
+            end
+          end
+        end
+      end
+
+      fieldset do
+        plain form.submit class: "button primary"
+        whitespace
+        plain form.button "Share",
+          class: "button secondary",
+          data: {
+            action: "snippet-preview#share"
+          }
+        whitespace
+        plain form.submit "Preview",
+          class: "button secondary hidden",
+          formaction: form_path,
+          formmethod: "get",
+          formnovalidate: true,
+          data: {
+            snippet_preview_target: "previewButton",
+            turbo_frame: dom_id(snippet, :code_block)
+          }
+      end
+    end
+  end
+
+  private
+
+  def language = snippet.language
+
+  def filename = snippet.filename
+
+  def source = snippet.source || ""
+
+  def errors
+    if snippet.errors.any?
+      div(style: "color:red") do
+        h2 do
+          pluralize(snippet.errors.count, "error")
+          plain " prohibited this snippet from being saved:"
+        end
+        ul do
+          snippet.errors.each do |error|
+            li { error.full_message }
+            whitespace
+          end
+        end
+      end
+    end
+  end
+
+  def language_select(form, data: {})
+    div(class: "flex items-start flex-col space-col-4 md:items-center md:flex-row md:space-row-4") do
+      fieldset do
+        plain form.label :language, class: "sr-only"
+        plain form.select :language,
+          language_select_options,
+          {},
+          data:,
+          class:
+            "flex-1 rounded bg-white/5 focus-ring focus:ring-0 ring-1 ring-inset ring-white/10 w-full lg:min-w-[36ch]"
+      end
+    end
+  end
+
+  def language_select_options
+    [%w[Auto auto]] +
+      Rouge::Lexer.all.map { |lexer|
+        [lexer.title, lexer.tag]
+      }
+  end
+
+  def form_path
+    if snippet.persisted?
+      edit_snippet_path(snippet)
+    else
+      new_snippet_path
+    end
+  end
+end

app/views/snippets/form.rb

@@ -1,6 +1,8 @@
 <%= render Pages::Header.new(title: "New Snippet") %>
 <div class="section-content container py-gap">
-  <%= render "form", snippet: @snippet %>
+  <%= render Snippets::Form.new(snippet: @snippet) %>
+
+  <br>
 
   <div>
     <%= link_to "Back to snippets", snippets_path %>