Extract stimulus screenshot controller

Author: rossta

app/javascript/controllers/index.js

@@ -19,6 +19,7 @@ import FrameForm from './forms/frame';
 import SyntaxHighlightPreview from './syntax-highlight/preview';
 import SnippetPreview from './snippets/preview';
 import SnippetEditor from './snippets/editor';
+import SnippetScreenshot from './snippets/screenshot';
 
 application.register('analytics', AnalyticsCustomEvent);
 application.register('code-example', CodeExample);
@@ -31,6 +32,8 @@ application.register('pwa-web-push-demo', PwaWebPushDemo);
 application.register('table-of-contents', TableOfContents);
 
 application.register('frame-form', FrameForm);
+application.register('syntax-highlight-preview', SyntaxHighlightPreview);
+
 application.register('snippet-preview', SnippetPreview);
 application.register('snippet-editor', SnippetEditor);
-application.register('syntax-highlight-preview', SyntaxHighlightPreview);
+application.register('snippet-screenshot', SnippetScreenshot);

app/javascript/controllers/snippets/editor.ts

@@ -22,7 +22,7 @@ export default class extends Controller {
   };
 
   connect() {
-    console.log('Stimulus controller connected');
+    console.log('Connect!');
 
     this.disableEditMode();
 
@@ -35,19 +35,24 @@ export default class extends Controller {
 
     this.element.addEventListener('click', this.enableEditMode);
 
-    this.textareaTarget.addEventListener('blur', this.preview);
+    this.textareaTarget.addEventListener('blur', this.finishedEditing);
     this.textareaTarget.addEventListener('input', this.autogrow);
     window.addEventListener('resize', this.onResize);
+    window.addEventListener('click', this.checkIfFinishedEditing);
   }
 
   disconnect() {
     window.removeEventListener('resize', this.onResize);
+    window.removeEventListener('click', this.checkIfFinishedEditing);
   }
 
   enableEditMode = () => {
     this.textareaTarget.disabled = false;
     this.textareaTarget.style.visibility = 'visible';
     this.sourceTarget.style.visibility = 'hidden';
+    this.textareaTarget.focus();
+
+    this.startedEditing();
   };
 
   disableEditMode = () => {
@@ -62,9 +67,31 @@ export default class extends Controller {
     }
   };
 
-  preview = () => {
-    this.dispatch('changed', {
+  startedEditing = () => {
+    console.log('Started editing!');
+    this.dispatch('edit-start');
+  };
+
+  finishedEditing = () => {
+    console.log('Finished editing!');
+    this.dispatch('edit-finish', {
       detail: { content: this.textareaTarget.value },
     });
   };
+
+  checkIfFinishedEditing = (event: Event) => {
+    if (document.activeElement !== this.textareaTarget) {
+      return;
+    }
+
+    if (
+      this.textareaTarget === event.target ||
+      this.textareaTarget.contains(event.target as Node) ||
+      this.textareaTarget.parentNode === event.target
+    ) {
+      return;
+    }
+
+    this.finishedEditing();
+  };
 }

app/javascript/controllers/snippets/preview.ts

@@ -1,5 +1,4 @@
 import { Controller } from '@hotwired/stimulus';
-import * as htmlToImage from 'html-to-image';
 
 import debug from '../../utils/debug';
 
@@ -10,55 +9,45 @@ export default class extends Controller<HTMLFormElement> {
   // based on https://donatstudios.com/TypeScriptTimeoutTrouble
   private idleTimeout?: ReturnType<typeof setTimeout>;
 
-  static targets = ['previewButton', 'snippet'];
+  static targets = ['previewButton'];
 
   declare readonly hasPreviewButtonTarget: boolean;
   declare readonly previewButtonTarget: HTMLInputElement;
 
-  declare readonly hasSnippetTarget: boolean;
-  declare readonly snippetTarget: HTMLInputElement;
-
   connect(): void {
     console.log('Connect!');
 
-    this.element.addEventListener(
-      'turbo:before-fetch-request',
-      this.prepareScreenshot,
-    );
-  }
-
-  disconnect(): void {
-    this.clearIdleTimeout();
-  }
-
-  clearIdleTimeout(): void {
-    if (this.idleTimeout) clearTimeout(this.idleTimeout);
+    this.element.addEventListener('turbo:submit-start', (event) => {
+      if (
+        (event as CustomEvent).detail.formSubmission.submitter !==
+        this.previewButtonTarget
+      ) {
+        return;
+      }
+
+      if (event.target instanceof HTMLFormElement) {
+        for (const field of event.target.elements) {
+          (field as HTMLInputElement).disabled = true;
+        }
+      }
+    });
+
+    this.element.addEventListener('turbo:submit-end', (event) => {
+      if (event.target instanceof HTMLFormElement) {
+        for (const field of event.target.elements) {
+          (field as HTMLInputElement).disabled = false;
+        }
+      }
+    });
   }
 
   preview = (): void => {
-    console.log('Start preview timer!');
-    this.clearIdleTimeout();
-    this.idleTimeout = setTimeout(this.clickPreviewButton, 500);
+    console.log('Start preview!');
+    this.clickPreviewButton();
   };
 
   clickPreviewButton = (): void => {
     console.log('Click preview button!');
     this.previewButtonTarget.click();
   };
-
-  prepareScreenshot = async (event) => {
-    event.preventDefault();
-
-    if (event.detail.fetchOptions.body instanceof URLSearchParams) {
-      const data = await this.drawScreenshot();
-
-      event.detail.fetchOptions.body.append('screenshot', data);
-    }
-
-    event.detail.resume();
-  };
-
-  drawScreenshot = async () => {
-    return htmlToImage.toPng(this.snippetTarget);
-  };
 }

app/javascript/controllers/snippets/screenshot.ts

@@ -0,0 +1,40 @@
+import { Controller } from '@hotwired/stimulus';
+import * as htmlToImage from 'html-to-image';
+
+import debug from '../../utils/debug';
+
+const console = debug('app:javascript:controllers:snippets:screenshot');
+
+export default class extends Controller<HTMLFormElement> {
+  static targets = ['snippet'];
+
+  declare readonly hasSnippetTarget: boolean;
+  declare readonly snippetTarget: HTMLInputElement;
+
+  connect(): void {
+    console.log('Connect!');
+
+    this.element.addEventListener(
+      'turbo:before-fetch-request',
+      this.prepareScreenshot,
+    );
+  }
+
+  prepareScreenshot = async (event) => {
+    event.preventDefault();
+
+    if (event.detail.fetchOptions.body instanceof URLSearchParams) {
+      console.log('Prepare screenshot!');
+
+      const data = await this.drawScreenshot();
+
+      event.detail.fetchOptions.body.append('screenshot', data);
+    }
+
+    event.detail.resume();
+  };
+
+  drawScreenshot = async () => {
+    return htmlToImage.toPng(this.snippetTarget);
+  };
+}

app/javascript/css/components/code.scss

@@ -34,7 +34,7 @@
 
   & pre {
     border-radius: 0.5rem;
-    padding-top: var(--space-m);
+    padding-top: var(--space-xs);
     padding-inline-end: var(--space-m);
     padding-bottom: var(--space-m);
     padding-inline-start: var(--space-m);
@@ -196,7 +196,7 @@
   }
 
   & .code-editor {
-    padding-top: var(--space-m);
+    padding-top: var(--space-xs);
     padding-inline-end: var(--space-m);
     padding-bottom: var(--space-m);
     padding-inline-start: var(--space-m);

app/views/snippets/form.rb

@@ -15,16 +15,16 @@ def view_template
       model: snippet,
       class: "grid-content",
       data: {
-        controller: "snippet-preview",
-        action: "snippet-editor:changed->snippet-preview#preview"
+        controller: "snippet-preview snippet-screenshot",
+        action: "snippet-editor:edit-finish->snippet-preview#preview"
       }
     ) do |form|
       errors
 
       language_select(form, data: {action: "change->snippet-preview#preview"})
 
       turbo_frame_tag dom_id(snippet, :code_block), class: "snippet-frame grid-cols-12" do
-        div(class: "snippet-background", data: {snippet_preview_target: "snippet"}) do
+        div(class: "snippet-background", data: {snippet_screenshot_target: "snippet"}) do
           render CodeBlock::Container.new(language: language, class: "snippet") do
             render CodeBlock::Header.new do
               label(class: "sr-only", for: "snippet[filename]") { "Filename" }