Refactor syntax highlight form with nested turbo frame and turbo stream

Author: rossta

app/javascript/controllers/syntax-highlight/preview.js

@@ -1,12 +1,23 @@
 import { Controller } from '@hotwired/stimulus';
 
+import debug from '../../utils/debug';
+
+const console = debug('app:javascript:controllers:syntax-highlight:preview');
+
+let submitting = false;
+
 export default class extends Controller {
   static values = {
     name: String, // The name of the syntax highlight css file to enable
   };
 
+  static targets = ['select'];
+
   connect() {
+    console.log('connect');
+
     const name = this.nameValue;
+
     document
       .querySelectorAll('link[rel="stylesheet"][data-syntax-highlight]')
       .forEach((link) => {
@@ -15,5 +26,19 @@ export default class extends Controller {
         });
         link.disabled = name !== link.dataset.syntaxHighlight;
       });
+
+    if (submitting) {
+      this.selectTarget.focus();
+      submitting = false;
+    }
+  }
+
+  change(event) {
+    if (event.target.form) {
+      event.target.form.requestSubmit();
+
+      // This is some hacky module state so that we can retain the focus on the re-rendered select element after a submit
+      submitting = true;
+    }
   }
 }

app/views/settings/syntax_highlights/form.rb

@@ -4,6 +4,8 @@ class Settings::SyntaxHighlights::Form < ApplicationView
   include Phlex::Rails::Helpers::ButtonTo
   include Phlex::Rails::Helpers::ContentFor
   include Phlex::Rails::Helpers::StylesheetLinkTag
+  include Phlex::Rails::Helpers::TurboFrameTag
+  include Phlex::Rails::Helpers::TurboStream
 
   def initialize(
     settings:,
@@ -21,91 +23,45 @@ def initialize(
   end
 
   def view_template
-    stylesheet_link_tag @current_highlight.asset_path, data: {syntax_highlight: @current_highlight.name}
-
     div(
-      class: "grid grid-content",
-      data: {
-        controller: "syntax-highlight-preview",
-        syntax_highlight_preview_name_value: @current_highlight.name
-      }
+      class: "grid grid-content"
     ) do
       h2 { "Want to preview a new syntax highlighting theme?" }
 
       markdown do
         "This site uses [Pygments-style CSS](https://pygments.org/) for syntax highlighting. You can use the select menu to preview a new syntax highlighting theme. I have curated over 90 options for you from sources around the web."
       end
 
-      if previewing?
-        markdown do
-          "You are currently previewing **#{@current_highlight.display_name}** as your syntax highlighting theme."
-        end
-      end
-
-      if preserving?
-        markdown do
-          "You have saved **#{@session_syntax_highlight.display_name}** for syntax highlighting across the site."
-        end
-      end
       preview_select
 
-      if previewing?
-        markdown do
-          "You can preview what the site looks with this syntax highlighting theme while you remain on this page. Click the **Reset preview** button to go back to #{@session_syntax_highlight ? "your saved color scheme, **#{@session_syntax_highlight.display_name}**" : "the default color scheme, **#{@default_syntax_highlight.display_name}**"}."
-        end
-
-        div(class: "outside") { reset_button }
+      h2 { %(Preview) }
 
-        darkmode_section
+      markdown do
+        "You can preview what the site looks with this syntax highlighting theme while you remain on this page."
+      end
 
-        markdown do
-          "Click the Save button to preserve **#{@current_highlight.display_name}** as your new syntax highlighting theme."
+      flex_list do
+        div do
+          h3 { %(Ruby) }
+          render CodeBlock::AppFile.new("app/models/examples/counter.rb", language: "rb")
         end
-
-        div(class: "outside") do
-          button_to("Save #{@current_highlight.display_name}",
-            settings_syntax_highlight_path(settings: {syntax_highlight_name: @current_highlight.name}),
-            method: :patch,
-            class: "button primary")
+        div do
+          h3 { %(CSS) }
+          render CodeBlock::AppFile.new("app/javascript/css/components/site-header.css", language: "css")
         end
-      end
-
-      h2 { %(Preview) }
-
-      h3 { %(Ruby) }
-
-      render CodeBlock::Article.new(language: "ruby") do |code|
-        code.body do
-          <<~RUBY.html_safe
-            class Family < Group
-              include Enumerable
-
-              def initialize(*members)
-                @members = members
-              end
-
-              def each(&)
-                @members.each(&)
-              end
-            end
-          RUBY
+        div do
+          h3 { %(JavaScript) }
+          render CodeBlock::AppFile.new("app/javascript/controllers/application.js", language: "js")
         end
-      end
-      h3 { %(CSS) }
-      render CodeBlock::Article.new(language: "css") do |code|
-        code.body do
-          <<~CSS
-            body {
-              font-size: 12pt;
-              background: #fff url(temp.png) top left no-repeat;
-            }
-          CSS
+        div do
+          h3 { %(HTML with ERB) }
+          render CodeBlock::AppFile.new("app/views/examples/counters/show.html.erb", language: "erb")
         end
       end
-      h3 { %(JavaScript) }
-      render CodeBlock::AppFile.new("app/javascript/controllers/syntax-highlight/preview.js", language: "js")
-      h3 { %(HTML with ERB) }
-      render CodeBlock::AppFile.new("app/views/layouts/application.html.erb", language: "erb")
+    end
+
+    div(id: "syntax-highlight-preview-results", class: "grid grid-content") do
+      preview_result
     end
   end
 
@@ -117,51 +73,114 @@ def darkmode_section
     end
 
     markdown do
-      "You can toggle the dark mode switch to see how the syntax highlighting looks in light or dark mode. Choosing **Light Mode** or **Dark Mode** will save in your browser local storage and will persist across page views on your current device. Choose **System Mode** to remove the saved choice and fall back to your system preference."
+      "Toggle this switch to see the syntax highlighting when the _site_ is Light or Dark Mode. Choosing **Light Mode** or **Dark Mode** will save in your browser local storage and will persist across page views on your current device. Choose **System Mode** to remove the saved choice and fall back to your system preference."
     end
     div(class: "outside") do
       render "darkmode/switch", enable_description: true, enable_outline: true
     end
   end
 
-  private
+  def preview_select
+    turbo_frame_tag "syntax-highlight-preview" do
+      stylesheet_link_tag @current_highlight.asset_path, data: {syntax_highlight: @current_highlight.name}
+
+      form_with(
+        model: @settings,
+        url: settings_syntax_highlight_path,
+        method: :get,
+        data: {
+          controller: "syntax-highlight-preview",
+          syntax_highlight_preview_name_value: @current_highlight.name,
+          turbo_action: "advance"
+        }
+      ) do |form|
+        fieldset do
+          flex_block do
+            form.label :syntax_highlight_name, "Choose another syntax highlighting theme to preview:"
+            form.select :syntax_highlight_name,
+              syntax_highlight_options_for_select,
+              {
+                selected: @current_highlight.name,
+                autocomplete: "off"
+              },
+              data: {
+                syntax_highlight_preview_target: "select",
+                action: "change->syntax-highlight-preview#change"
+              }
+          end
+        end
+      end
 
-  def previewing? = @preview_syntax_highlight.present?
+      turbo_stream.update "syntax-highlight-preview-results" do
+        preview_result
+      end
+    end
+  end
 
-  def preserving? = @session_syntax_highlight.present?
+  def preview_result
+    if default?
+      h2 { "Your syntax highlighting theme" }
 
-  def markdown
-    render Markdown::Application.new(yield)
-  end
+      markdown do
+        "You are currently using the default syntax highlighting theme, **#{@default_syntax_highlight.display_name}** as your syntax highlighting theme."
+      end
 
-  def m
-    Markdown::Application.new(yield).call.html_safe
-  end
+      darkmode_section
 
-  def preview_select
-    form_with(
-      model: @settings,
-      url: settings_syntax_highlight_path,
-      method: :get
-    ) do |form|
-      fieldset do
-        flex_block do
-          form.label :syntax_highlight_name, "Choose another syntax highlighting theme to preview:"
-          form.select :syntax_highlight_name,
-            syntax_highlight_options_for_select,
-            {
-              selected: @current_highlight.name
-            },
-            onchange: "this.form.requestSubmit()"
-        end
+      return
+    end
+
+    if previewing?
+      h2 { "Save your preview" }
+
+      markdown do
+        "You are currently previewing **#{@current_highlight.display_name}** as your syntax highlighting theme."
+      end
+
+      darkmode_section
+
+      markdown do
+        "Click the Save button to preserve **#{@current_highlight.display_name}** as your new syntax highlighting theme. Your choice will be saved in your browser session."
+      end
+
+      div(class: "outside") do
+        button_to("Save #{@current_highlight.display_name}",
+          settings_syntax_highlight_path(settings: {syntax_highlight_name: @current_highlight.name}),
+          method: :patch,
+          class: "button primary")
+      end
+
+      markdown do
+        "Click the **Reset preview** button to go back to #{@session_syntax_highlight ? "your saved color scheme, **#{@session_syntax_highlight.display_name}**" : "the default color scheme, **#{@default_syntax_highlight.display_name}**"}."
+      end
+
+      div(class: "outside") { reset_button }
+    end
+
+    if preserving?
+      h2 { "Your syntax highlighting theme" }
+
+      markdown do
+        "You have saved **#{@session_syntax_highlight.display_name}** for syntax highlighting across the site."
       end
+
+      darkmode_section if !previewing?
+
+      markdown do
+        "You can delete #{@session_syntax_highlight.display_name} your saved syntax highlighting theme and go back to the default."
+      end
+      div(class: "outside") { unsave_button }
     end
   end
 
   def flex_block(options = {}, &)
     div(class: "flex items-start flex-col space-col-4 grid-cols-12 md:items-center md:flex-row md:space-row-4 #{options[:class]}", &)
   end
 
+  def flex_list(options = {}, &)
+    div(class: "code-examples--list flex items-start flex-col space-col-4 grid-cols-12 md:flex-row md:space-row-4 #{options[:class]}", &)
+  end
+
   def syntax_highlight_options_for_select
     @available_highlights
       .group_by { |sh| sh.mode }
@@ -173,4 +192,24 @@ def reset_button
       url_for,
       class: "button tertiary"
   end
+
+  def unsave_button
+    button_to "Delete my syntax highlighting choice",
+      settings_syntax_highlight_path(settings: {syntax_highlight_name: @default_syntax_highlight.name}),
+      method: :patch,
+      class: "button warn",
+      style: "min-width: 25ch;"
+  end
+
+  private
+
+  def previewing? = @preview_syntax_highlight.present?
+
+  def preserving? = @session_syntax_highlight.present?
+
+  def default? = @current_highlight == @default_syntax_highlight
+
+  def markdown
+    render Markdown::Application.new(yield)
+  end
 end

app/views/settings/syntax_highlights/show_view.rb

@@ -18,8 +18,8 @@ def initialize(
   def view_template
     render Pages::Header.new(title: "Settings: Syntax Highlighting")
 
-    section(class: %(secton-content container py-gap)) do
-      turbo_frame_tag "syntax-highlight-form", data: {turbo_action: "advance"} do
+    section(class: %(section-content container py-gap)) do
+      turbo_frame_tag "syntax-highlight-form" do
         render Settings::SyntaxHighlights::Form.new(
           settings: @settings,
           available_highlights: @available_highlights,