Add basic crud for snippets

Author: rossta

app/controllers/snippets_controller.rb

@@ -1,22 +1,23 @@
 class SnippetsController < ApplicationController
-  before_action :set_snippet, only: %i[show edit update destroy]
-
   # GET /snippets
   def index
     @snippets = Snippet.all
   end
 
   # GET /snippets/1
   def show
+    @snippet = Snippet.find(params[:id])
   end
 
   # GET /snippets/new
   def new
-    @snippet = Snippet.new
+    @snippet = Snippet.new(snippet_params)
   end
 
   # GET /snippets/1/edit
   def edit
+    @snippet = Snippet.find(params[:id])
+    @snippet.assign_attributes(snippet_params)
   end
 
   # POST /snippets
@@ -32,6 +33,7 @@ def create
 
   # PATCH/PUT /snippets/1
   def update
+    @snippet = Snippet.find(params[:id])
     if @snippet.update(snippet_params)
       redirect_to @snippet, notice: "Snippet was successfully updated.", status: :see_other
     else
@@ -41,19 +43,15 @@ def update
 
   # DELETE /snippets/1
   def destroy
+    @snippet = Snippet.find(params[:id])
     @snippet.destroy!
     redirect_to snippets_url, notice: "Snippet was successfully destroyed.", status: :see_other
   end
 
   private
 
-  # Use callbacks to share common setup or constraints between actions.
-  def set_snippet
-    @snippet = Snippet.find(params[:id])
-  end
-
   # Only allow a list of trusted parameters through.
   def snippet_params
-    params.fetch(:snippet, {})
+    params.fetch(:snippet, {}).permit(:filename, :source, :url, :language)
   end
 end

app/javascript/controllers/index.js

@@ -17,6 +17,7 @@ import TableOfContents from './table-of-contents';
 
 import FrameForm from './forms/frame';
 import SyntaxHighlightPreview from './syntax-highlight/preview';
+import SnippetPreview from './snippets/preview';
 
 application.register('analytics', AnalyticsCustomEvent);
 application.register('code-example', CodeExample);
@@ -29,4 +30,5 @@ application.register('pwa-web-push-demo', PwaWebPushDemo);
 application.register('table-of-contents', TableOfContents);
 
 application.register('frame-form', FrameForm);
+application.register('snippet-preview', SnippetPreview);
 application.register('syntax-highlight-preview', SyntaxHighlightPreview);

app/javascript/controllers/snippets/preview.js

@@ -0,0 +1,36 @@
+import { Controller } from '@hotwired/stimulus';
+
+import debug from '../../utils/debug';
+
+const console = debug('app:javascript:controllers:snippets:preview');
+
+export default class extends Controller {
+  static targets = ['source', 'previewButton'];
+  idleTimeout = null;
+
+  connect() {
+    console.log('Connect!');
+    // this.sourceTarget.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  disconnect() {
+    // this.sourceTarget.removeEventListener('keydown', this.handleKeyDown);
+    clearTimeout(this.idleTimeout);
+  }
+
+  preview = () => {
+    console.log('Start preview timer!');
+    clearTimeout(this.idleTimeout);
+    this.idleTimeout = setTimeout(this.clickPreviewButton, 500);
+  };
+
+  // handleKeyDown = () => {
+  //   clearTimeout(this.idleTimeout);
+  //   this.idleTimeout = setTimeout(this.clickPreviewButton, 500);
+  // };
+
+  clickPreviewButton = () => {
+    console.log('Click preview button!');
+    this.previewButtonTarget.click();
+  };
+}

app/javascript/css/components/code.scss

@@ -6,9 +6,11 @@
 }
 
 @media screen and (min-width: $screen-md) {
-  .code-wrapper {
-    margin-inline-start: calc(var(--space-m) * -1);
-    margin-inline-end: calc(var(--space-m) * -1);
+  .article-content {
+    & .code-wrapper {
+      margin-inline-start: calc(var(--space-m) * -1);
+      margin-inline-end: calc(var(--space-m) * -1);
+    }
   }
 }
 
@@ -17,17 +19,28 @@
   flex-direction: row;
   justify-content: space-between;
   overflow-x: auto;
+  position: relative;
 
-  pre {
+  & pre {
     line-height: 1.7777778;
     margin-top: 0;
     margin-bottom: 0;
     border-radius: 0.5rem;
+    background-color: inherit;
+  }
+
+  & pre,
+  & textarea {
     padding-top: var(--space-m);
     padding-inline-end: var(--space-m);
     padding-bottom: var(--space-m);
     padding-inline-start: var(--space-m);
-    background-color: inherit;
+  }
+
+  textarea {
+    width: 100%;
+    font-family: var(--monospace);
+    border: none;
   }
 }
 
@@ -154,3 +167,13 @@
     }
   }
 }
+
+.snippet {
+  .code-body {
+    & code {
+      word-wrap: break-word;
+      white-space: pre-wrap;
+      word-break: normal;
+    }
+  }
+}

app/javascript/css/layout.scss

@@ -21,6 +21,7 @@ main > *,
 .section-content,
 .footer-content,
 .main-content,
+.grid-content,
 .article-content {
   display: grid;
 }

app/models/snippet.rb

@@ -1,2 +1,36 @@
 class Snippet < ApplicationRecord
+  validates :language, presence: true
+
+  validate :recognized_language
+  before_validation :auto_detect_language, if: :auto_detecting?
+
+  attr_reader :auto_detecting
+
+  def language=(value)
+    if value == "auto"
+      @auto_detecting = true
+      super(guess_language)
+    else
+      super(value.to_s.downcase)
+    end
+  end
+
+  def auto_detect_language
+    self.language = guess_language
+  end
+
+  def guess_language
+    Rouge::Lexer.guesses({filename: filename, source: source}.compact).first&.tag
+  end
+
+  private
+
+  def auto_detecting? = !!@auto_detecting
+
+  def recognized_language
+    return if Rouge::Lexer.find(language)
+
+    message = auto_detecting? ? "could not be auto-detected from filename or source" : "is not a recognized language"
+    errors.add(:language, message)
+  end
 end

app/views/components/code_block/article.rb

@@ -1,30 +1,41 @@
 class CodeBlock::Article < Phlex::HTML
   include InlineSvg::ActionView::Helpers
   include Phlex::DeferredRender
+  include Phlex::Rails::Helpers::ClassNames
 
-  def initialize(source = "", language: nil, filename: nil, run: false, show_header: true)
-    @source = source
-    @language = language
-    @filename = filename
+  def initialize(
+    source = "",
+    language: nil,
+    filename: nil,
+    run: false,
+    show_header: true,
+    enable_copy: true,
+    **options
+  )
+    @source = source || ""
+    @language = language.presence
+    @filename = filename.presence
     @enable_run = run
     @show_header = show_header
+    @enable_copy = enable_copy
+    @options = options
   end
 
   def view_template
     div(
-      class: "code-wrapper highlight language-#{language}",
+      class: class_names("code-wrapper", "highlight", "language-#{language}", *options[:class]),
       data: code_example_data.keep_if { enable_run }.merge(data)
     ) do
       if @show_header
         div(class: "code-header") do
-          plain inline_svg_tag("app-dots.svg", class: "app-dots")
+          plain inline_svg_tag("app-dots.svg", class: "app-dots mr-4")
           span(class: "code-title", &title_content)
         end
       end
 
       div(class: "code-body") do
         render CodeBlock::Basic.new(source, language: language, data: {code_example_target: "source"})
-        render ClipboardCopy.new(text: source)
+        render ClipboardCopy.new(text: source) if enable_copy
       end
 
       if enable_run
@@ -62,7 +73,7 @@ def title_content
 
   private
 
-  attr_reader :source, :language, :filename, :enable_run
+  attr_reader :source, :language, :filename, :enable_run, :enable_copy, :options
 
   def data = {language: language, lines:}
 

app/views/snippets/_form.html.erb

@@ -1,4 +1,8 @@
-<%= form_with(model: snippet) do |form| %>
+<%= form_with(
+  model: snippet,
+  data: { controller: "snippet-preview", action: "input->snippet-preview#preview" },
+  class: "grid-content"
+) do |form| %>
   <% if snippet.errors.any? %>
     <div style="color: red">
       <h2><%= pluralize(snippet.errors.count, "error") %> prohibited this snippet from being saved:</h2>
@@ -11,7 +15,42 @@
     </div>
   <% end %>
 
-  <div>
-    <%= form.submit %>
+  <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]" %>
+    </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>
+
+  <fieldset>
+    <%= form.submit class: "button primary" %>
+    <%= form.submit "Preview", class: "button secondary hidden",
+      formaction: (snippet.persisted? ? edit_snippet_path(snippet) : new_snippet_path),
+      formmethod: "get",
+      formnovalidate: true,
+      data: {
+        snippet_preview_target: "previewButton",
+        turbo_frame: dom_id(snippet, :code_block)
+      } %>
+  </fieldset>
 <% end %>
+
+<div class="grid-content">
+  <%= turbo_frame_tag dom_id(snippet, :code_block) do %>
+    <%= render snippet %>
+  <% end %>
+</div>

app/views/snippets/_snippet.html.erb

@@ -1,2 +1,7 @@
-<div id="<%= dom_id snippet %>">
+<div id="<%= dom_id(snippet, :code_block) %>">
+  <%= render CodeBlock::Article.new(
+    snippet.source || "",
+    language: snippet.language,
+    filename: snippet.filename,
+  ) %>
 </div>

app/views/snippets/edit.html.erb

@@ -1,10 +1,11 @@
-<h1>Editing snippet</h1>
+<%= render Pages::Header.new(title: "Edit snippet") %>
+<div class="section-content container py-gap">
+  <%= render "form", snippet: @snippet %>
 
-<%= render "form", snippet: @snippet %>
+  <br>
 
-<br>
-
-<div>
-  <%= link_to "Show this snippet", @snippet %> |
-  <%= link_to "Back to snippets", snippets_path %>
+  <div>
+    <%= link_to "Show this snippet", @snippet %> |
+    <%= link_to "Back to snippets", snippets_path %>
+  </div>
 </div>