Iterate on snippet editor autogrow js and css

Author: rossta

app/javascript/controllers/snippets/editor.ts

@@ -1,5 +1,6 @@
 import { Controller } from '@hotwired/stimulus';
 
+import { debounce } from '../../utils/debounce';
 import debug from '../../utils/debug';
 
 const console = debug('app:javascript:controllers:snippets:editor');
@@ -11,15 +12,34 @@ export default class extends Controller {
   declare sourceTarget: HTMLElement;
   declare textareaTarget: HTMLTextAreaElement;
 
+  declare onResize: EventListenerOrEventListenerObject;
+  declare resizeDebounceDelayValue: number;
+
+  static values = {
+    resizeDebounceDelay: {
+      type: Number,
+      default: 100,
+    },
+  };
+
   connect() {
     console.log('Stimulus controller connected');
-    this.showCode();
-    this.syncTextarea();
     // 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.textareaTarget.style.overflow = 'hidden';
+    const delay: number = this.resizeDebounceDelayValue;
+
+    // this.onResize = delay > 0 ? debounce(this.autogrow, delay) : this.autogrow;
+
+    this.autogrow();
+
+    // this.textareaTarget.addEventListener('input', this.autogrow);
+    // window.addEventListener('resize', this.onResize);
   }
 
   disconnect() {
@@ -30,29 +50,32 @@ export default class extends Controller {
     // );
   }
 
-  preview() {
-    this.previewButtonTarget.click();
-  }
+  // sync() {
+  //   this.sourceTarget.innerHTML = this.textareaTarget.value;
+  //   this.textareaTarget.style.width = `${this.sourceTarget.offsetWidth}px`;
+  // }
 
-  showTextarea() {
-    this.sourceTarget.style.display = 'none';
-    this.textareaTarget.style.display = 'block';
-    this.textareaTarget.focus();
-    this.autoGrow();
+  toggleEditMode(event: Event) {
+    this.textareaTarget.style.visibility = 'visible';
   }
 
-  syncTextarea() {
-    this.textareaTarget.value = this.sourceTarget.textContent || '';
-    this.autoGrow();
-  }
+  autogrow = () => {
+    // Force re-print before calculating the value.
+    // this.textareaTarget.style.height = 'auto';
+    // this.textareaTarget.style.width = 'auto';
 
-  showCode() {
-    this.sourceTarget.style.display = 'block';
-    this.textareaTarget.style.display = 'none';
-  }
+    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`;
 
-  autoGrow() {
-    this.textareaTarget.style.height = 'auto';
-    this.textareaTarget.style.height = this.textareaTarget.scrollHeight + 'px';
+    // this.textareaTarget.style.height = `${this.textareaTarget.scrollHeight}px`;
+  };
+
+  preview() {
+    this.previewButtonTarget.click();
   }
 }

app/javascript/css/components/code.scss

@@ -1,6 +1,8 @@
 @import '../config/variables.scss';
 
 .code-wrapper {
+  --code-line-height: 1.7777778;
+
   border-radius: var(--space-3xs-2xs);
   border: 1px solid var(--joy-border-quiet);
 }
@@ -22,25 +24,29 @@
   position: relative;
 
   & 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);
   }
 
-  textarea {
-    width: 100%;
+  & 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;
   }
 }
 
@@ -169,11 +175,64 @@
 }
 
 .snippet {
-  .code-body {
-    & code {
-      word-wrap: break-word;
-      white-space: pre-wrap;
-      word-break: normal;
-    }
+  width: fit-content;
+  max-width: var(--grid-max-width);
+
+  & .code-body {
+    flex-direction: column;
+  }
+
+  & .code-editor {
+    padding-top: var(--space-m);
+    padding-inline-end: var(--space-m);
+    padding-bottom: var(--space-m);
+    padding-inline-start: var(--space-m);
   }
 }
+
+.grid-stack {
+  display: grid;
+
+  & > * {
+    grid-area: 1 / 1 / 2 / 2;
+  }
+}
+
+/*
+  .autogrow-wrapper taken from
+  https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
+*/
+.autogrow-wrapper {
+  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
+  display: grid;
+}
+
+.autogrow-wrapper::after {
+  /* Note the weird space! Needed to preventy jumpy behavior */
+  content: attr(data-replicated-value) ' ';
+
+  /* Hidden from view, clicks, and screen readers */
+  visibility: hidden;
+
+  line-height: var(--code-line-height);
+  font-family: var(--monospace);
+  font-size: var(--step--1);
+}
+
+.autogrow-wrapper > textarea {
+  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
+  resize: none;
+
+  /* Firefox shows scrollbar on growth, you can hide like this. */
+  overflow: hidden;
+}
+
+.autogrow-wrapper > textarea,
+.autogrow-wrapper::after {
+  /* Place on top of each other */
+  grid-area: 1 / 1 / 2 / 2;
+
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  max-width: var(--grid-max-width);
+}

app/javascript/css/utilities/tailwind.css

@@ -994,3 +994,26 @@ focus\:ring-0:focus {
     display: inherit;
   }
 }
+
+.resize-none {
+  resize: none;
+}
+.resize-y {
+  resize: vertical;
+}
+.resize-x {
+  resize: horizontal;
+}
+.resize {
+  resize: both;
+}
+
+.visible {
+  visibility: visible;
+}
+.invisible {
+  visibility: hidden;
+}
+.collapse {
+  visibility: collapse;
+}

app/javascript/utils/debounce.ts

@@ -0,0 +1,12 @@
+function debounce(callback: Function, delay: number) {
+  let timeout: number;
+
+  return (...args) => {
+    const context = this;
+    window.clearTimeout(timeout);
+
+    timeout = window.setTimeout(() => callback.apply(context, args), delay);
+  };
+}
+
+export { debounce };

app/views/components/code_block/code.rb

@@ -7,7 +7,7 @@ def code_formatter
 
   attr_reader :source, :language, :data
 
-  def initialize(source = nil, language: nil, data: {})
+  def initialize(source = "", language: nil, data: {})
     @source = source
     @language = language
     @data = data

app/views/components/code_block/snippet.rb

@@ -1,5 +1,6 @@
 class CodeBlock::Snippet < ApplicationComponent
   include Phlex::DeferredRender
+  include Phlex::Rails::Helpers::DOMID
   prepend CodeBlock::AtomAware
 
   attr_reader :snippet
@@ -9,11 +10,17 @@ def initialize(snippet, **)
   end
 
   def view_template
-    render CodeBlock::Container.new(language: language) do
+    render CodeBlock::Container.new(language: language, class: "snippet", id: dom_id(snippet, :code_block)) do
       render CodeBlock::Header.new { title_content }
 
-      render CodeBlock::Body.new do
+      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 }
+        end
       end
     end
   end

app/views/snippets/_form.html.erb

@@ -1,6 +1,5 @@
 <%= form_with(
   model: snippet,
-  data: { controller: "snippet-preview", action: "input->snippet-preview#preview" },
   class: "grid-content"
 ) do |form| %>
   <% if snippet.errors.any? %>
@@ -36,6 +35,10 @@
     </code>
   </fieldset>
 
+  <%= turbo_frame_tag dom_id(snippet, :code_block), class: "grid-cols-12" do %>
+    <%= render snippet %>
+  <% end %>
+
   <fieldset>
     <%= form.submit class: "button primary" %>
     <%= form.submit "Preview", class: "button secondary hidden",
@@ -50,7 +53,4 @@
 <% 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,3 +1 @@
-<div id="<%= dom_id(snippet, :code_block) %>">
-  <%= render CodeBlock::Snippet.new(snippet) %>
-</div>
+<%= render CodeBlock::Snippet.new(snippet) %>