Snippet Share

import { Controller } from '@hotwired/stimulus';
import * as htmlToImage from 'html-to-image';

export default class extends Controller {
  connect() {
    this.element.addEventListener(
      'turbo:before-fetch-request',
      this.prepareScreenshot,
    );
  }

  prepareScreenshot = async (event) => {
    event.preventDefault();
    if (event.detail.fetchOptions.body instanceof URLSearchParams) {
      const data = await htmlToImage.toPng(this.snippetTarget);
      event.detail.fetchOptions.body.append('screenshot', data);
    }
    event.detail.resume();
  };
}