Ability to preview snippet while editing

Author: rossta

app/controllers/snippets_controller.rb

@@ -13,7 +13,12 @@ def show
 
   # GET /snippets/new
   def new
-    @snippet = Snippet.new(snippet_params)
+    default_params = {
+      filename: "app/models/user.rb",
+      source: "class User < ApplicationRecord\n\s\shas_many :posts\nend",
+      language: "ruby"
+    }
+    @snippet = Snippet.new(snippet_params.presence || default_params)
   end
 
   # GET /snippets/1/edit

app/javascript/controllers/snippets/editor.ts

@@ -24,58 +24,47 @@ export default class extends Controller {
 
   connect() {
     console.log('Stimulus controller connected');
-    // this.textareaTarget.addEventListener('input', this.autoGrow.bind(this));
-    // this.textareaTarget.addEventListener(
-    //   'blur',
-    //   this.handleTextareaBlur.bind(this),
-    // );
 
-    this.element.addEventListener('click', this.toggleEditMode.bind(this));
+    this.disableEditMode();
+
     this.textareaTarget.style.overflow = 'hidden';
     const delay: number = this.resizeDebounceDelayValue;
 
-    // this.onResize = delay > 0 ? debounce(this.autogrow, delay) : this.autogrow;
+    this.onResize = delay > 0 ? debounce(this.autogrow, delay) : this.autogrow;
 
     this.autogrow();
 
-    // this.textareaTarget.addEventListener('input', this.autogrow);
-    // window.addEventListener('resize', this.onResize);
+    this.element.addEventListener('click', this.enableEditMode);
+    this.textareaTarget.addEventListener('blur', this.preview);
+    this.textareaTarget.addEventListener('input', this.autogrow);
+    window.addEventListener('resize', this.onResize);
   }
 
   disconnect() {
-    // this.textareaTarget.removeEventListener('input', this.autoGrow.bind(this));
-    // this.textareaTarget.removeEventListener(
-    //   'blur',
-    //   this.handleTextareaBlur.bind(this),
-    // );
+    window.removeEventListener('resize', this.onResize);
   }
 
-  // sync() {
-  //   this.sourceTarget.innerHTML = this.textareaTarget.value;
-  //   this.textareaTarget.style.width = `${this.sourceTarget.offsetWidth}px`;
-  // }
-
-  toggleEditMode(event: Event) {
+  enableEditMode = () => {
+    this.textareaTarget.disabled = false;
     this.textareaTarget.style.visibility = 'visible';
-  }
+    this.sourceTarget.style.visibility = 'hidden';
+  };
 
-  autogrow = () => {
-    // Force re-print before calculating the value.
-    // this.textareaTarget.style.height = 'auto';
-    // this.textareaTarget.style.width = 'auto';
+  disableEditMode = () => {
+    this.textareaTarget.style.visibility = 'hidden';
+    this.sourceTarget.style.visibility = 'visible';
+  };
 
+  autogrow = () => {
     if (this.textareaTarget.parentNode instanceof HTMLElement) {
       this.textareaTarget.parentNode.dataset.replicatedValue =
         this.textareaTarget.value;
     }
-
-    // this.sourceTarget.innerHTML = this.textareaTarget.value + ' ';
-    // this.textareaTarget.style.width = `${this.sourceTarget.scrollWidth}px`;
-
-    // this.textareaTarget.style.height = `${this.textareaTarget.scrollHeight}px`;
   };
 
-  preview() {
-    this.previewButtonTarget.click();
-  }
+  preview = () => {
+    this.dispatch('changed', {
+      detail: { content: this.textareaTarget.value },
+    });
+  };
 }

app/javascript/controllers/snippets/preview.ts

@@ -9,11 +9,7 @@ export default class extends Controller {
   // based on https://donatstudios.com/TypeScriptTimeoutTrouble
   private idleTimeout?: ReturnType<typeof setTimeout>;
 
-  static targets = ['source', 'previewButton'];
-
-  declare readonly hasSourceTarget: boolean;
-  declare readonly sourceTarget: HTMLInputElement;
-  declare readonly sourceTargets: HTMLInputElement[];
+  static targets = ['previewButton'];
 
   declare readonly hasPreviewButtonTarget: boolean;
   declare readonly previewButtonTarget: HTMLInputElement;

app/javascript/css/components/code.scss

@@ -5,6 +5,15 @@
 
   border-radius: var(--space-3xs-2xs);
   border: 1px solid var(--joy-border-quiet);
+
+  & input,
+  & textarea {
+    border: none;
+    color: white;
+    resize: none;
+    padding: 0;
+    background-color: inherit;
+  }
 }
 
 @media screen and (min-width: $screen-md) {
@@ -33,29 +42,25 @@
 
   & pre,
   & textarea {
-    background-color: inherit;
     line-height: var(--code-line-height);
     margin-top: 0;
     margin-bottom: 0;
   }
 
-  /* https://chriscoyier.net/2023/09/29/css-solves-auto-expanding-textareas-probably-eventually/ */
-
   & textarea {
     font-family: var(--monospace);
-    border: none;
-    color: white;
-    resize: none;
-    padding: 0;
   }
 }
 
 .code-header {
+  --code-header-font-size: 0.875rem;
+  --code-header-line-height: 1.5715;
+
   line-height: 1;
   display: none;
   padding: 1.5rem 1.5rem 0.5rem;
-  font-size: 0.875rem;
-  line-height: 1.5715;
+  font-size: var(--code-header-font-size);
+  line-height: var(--code-header-line-height);
   /* color: rgb(156 163 175 / var(--tw-text-opacity)); */
 
   & .code-title {
@@ -64,6 +69,12 @@
     text-align: center;
     line-height: 1;
 
+    & input {
+      font-size: var(--code-header-font-size);
+      line-height: var(--code-header-line-height);
+      text-align: right;
+    }
+
     & a {
       font-family: var(--sans-serif);
       gap: 0.25rem;
@@ -220,6 +231,8 @@
 }
 
 .autogrow-wrapper > textarea {
+  min-height: auto;
+
   /* You could leave this, but after a user resizes, then it ruins the auto sizing */
   resize: none;
 

app/views/components/code_block/code.rb

@@ -14,8 +14,8 @@ def initialize(source = "", language: nil, data: {})
   end
 
   def view_template(&block)
-    pre do
-      code data: data do
+    pre data: data do
+      code do
         unsafe_raw self.class.code_formatter.format(lexer.lex(source))
       end
     end

app/views/components/code_block/snippet.rb

@@ -10,16 +10,22 @@ def initialize(snippet, **)
   end
 
   def view_template
-    render CodeBlock::Container.new(language: language, class: "snippet", id: dom_id(snippet, :code_block)) do
-      render CodeBlock::Header.new { title_content }
+    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
-        render CodeBlock::Code.new(source, language: language)
-        div(class: "code-editor autogrow-wrapper") do
-          textarea(
-            name: "snippet[source]",
-            data: {snippet_editor_target: "textarea", action: "input->snippet-editor#autogrow"}
-          ) { source }
+        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

app/views/snippets/_form.html.erb

@@ -1,6 +1,7 @@
 <%= form_with(
   model: snippet,
-  class: "grid-content"
+  class: "grid-content",
+  data: { controller: "snippet-preview", action: "snippet-editor:changed->snippet-preview#preview" }
 ) do |form| %>
   <% if snippet.errors.any? %>
     <div style="color: red">
@@ -15,27 +16,16 @@
   <% end %>
 
   <div class="flex items-start flex-col space-col-4 md:items-center md:flex-row md:space-row-4">
-    <fieldset class="flex-grow">
-      <%= form.label :filename, class: "block" %>
-      <%= form.text_field :filename, 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] " %>
-    </fieldset>
-
     <fieldset>
-      <%= form.label :language, class: "block" %>
-      <%= form.select :language, [["Auto", "auto"]] + Rouge::Lexer.all.map { |lexer| [lexer.title, lexer.tag] }, 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]" %>
+      <%= form.label :language, class: "sr-only" %>
+      <%= form.select :language, [["Auto", "auto"]] + Rouge::Lexer.all.map { |lexer| [lexer.title, lexer.tag] },
+          {},
+          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]",
+          data: { action: "change->snippet-preview#preview" } %>
     </fieldset>
   </div>
 
-  <fieldset>
-    <%= form.label :source, class: "block" %>
-    <code>
-    <%= form.text_area :source,
-      # data: { action: "input->snippet-preview#handleChange" },
-      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]" %>
-    </code>
-  </fieldset>
-
-  <%= turbo_frame_tag dom_id(snippet, :code_block), class: "grid-cols-12" do %>
+  <%= turbo_frame_tag dom_id(snippet, :code_block), class: "snippet-frame grid-cols-12" do %>
     <%= render snippet %>
   <% end %>
 

spec/system/snippets_spec.rb

@@ -0,0 +1,47 @@
+require "rails_helper"
+
+RSpec.describe "Snippets", type: :system do
+  before do
+    Flipper.enable(:snippets)
+  end
+
+  it "can creat and edit a snippet" do
+    login_as_user
+
+    visit snippets_path
+
+    click_link "New snippet"
+
+    fill_in "snippet[filename]", with: "app/models/user.rb"
+    select "Ruby", from: "Language"
+
+    find("[data-controller=snippet-editor]").click
+
+    fill_in "snippet[source]", with: "class User\nend"
+
+    click_button "Create Snippet"
+
+    expect(page).to have_content("Snippet was successfully created.")
+
+    snippet = Snippet.last
+    expect(snippet.source).to eq("class User\nend")
+    expect(snippet.language).to eq("ruby")
+    expect(snippet.filename).to eq("app/models/user.rb")
+
+    click_link "Edit"
+
+    fill_in "snippet[filename]", with: "app/models/admin_user.rb"
+
+    find("[data-controller=snippet-editor]").click
+    fill_in "snippet[source]", with: "class User\n  has_many :posts\nend"
+
+    click_button "Update Snippet"
+
+    expect(page).to have_content("Snippet was successfully updated.")
+
+    snippet.reload
+    expect(snippet.source).to eq("class User\n  has_many :posts\nend")
+    expect(snippet.language).to eq("ruby")
+    expect(snippet.filename).to eq("app/models/admin_user.rb")
+  end
+end