Spike snippet editor stimulus

Author: rossta

app/javascript/controllers/index.js

@@ -18,6 +18,7 @@ import TableOfContents from './table-of-contents';
 import FrameForm from './forms/frame';
 import SyntaxHighlightPreview from './syntax-highlight/preview';
 import SnippetPreview from './snippets/preview';
+import SnippetEditor from './snippets/editor';
 
 application.register('analytics', AnalyticsCustomEvent);
 application.register('code-example', CodeExample);
@@ -31,4 +32,5 @@ application.register('table-of-contents', TableOfContents);
 
 application.register('frame-form', FrameForm);
 application.register('snippet-preview', SnippetPreview);
+application.register('snippet-editor', SnippetEditor);
 application.register('syntax-highlight-preview', SyntaxHighlightPreview);

app/javascript/controllers/snippets/editor.ts

@@ -0,0 +1,58 @@
+import { Controller } from '@hotwired/stimulus';
+
+import debug from '../../utils/debug';
+
+const console = debug('app:javascript:controllers:snippets:editor');
+
+export default class extends Controller {
+  static targets = ['previewButton', 'source', 'textarea'];
+
+  declare previewButtonTarget: HTMLButtonElement;
+  declare sourceTarget: HTMLElement;
+  declare textareaTarget: HTMLTextAreaElement;
+
+  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),
+    // );
+  }
+
+  disconnect() {
+    // this.textareaTarget.removeEventListener('input', this.autoGrow.bind(this));
+    // this.textareaTarget.removeEventListener(
+    //   'blur',
+    //   this.handleTextareaBlur.bind(this),
+    // );
+  }
+
+  preview() {
+    this.previewButtonTarget.click();
+  }
+
+  showTextarea() {
+    this.sourceTarget.style.display = 'none';
+    this.textareaTarget.style.display = 'block';
+    this.textareaTarget.focus();
+    this.autoGrow();
+  }
+
+  syncTextarea() {
+    this.textareaTarget.value = this.sourceTarget.textContent || '';
+    this.autoGrow();
+  }
+
+  showCode() {
+    this.sourceTarget.style.display = 'block';
+    this.textareaTarget.style.display = 'none';
+  }
+
+  autoGrow() {
+    this.textareaTarget.style.height = 'auto';
+    this.textareaTarget.style.height = this.textareaTarget.scrollHeight + 'px';
+  }
+}