ปรับแต่ง ActionText ให้รองรับ Youtube Embeded

export default class YoutubeEmbedded {
  extend (parent) {
    const buttonHTML =
    '<button type="button" class="trix-button" data-trix-attribute="embed" data-trix-action="embed" title="Embed" tabindex="-1">Youtube Embed</button>'
    const buttonGroup = parent.toolbarElement.querySelector(
      ".trix-button-group--text-tools"
    )
    const dialogHml = 
      `<div class="trix-dialog trix-dialog--link" data-trix-dialog="embed" data-trix-dialog-attribute="embed">
        <div class="trix-dialog__link-fields">
          <input type="text" name="embed" class="trix-input trix-input--dialog" placeholder="Paste your youtube video url" aria-label="embed code" required="" data-trix-input="" disabled="disabled">
          <div class="trix-button-group">
            <input type="button" class="trix-button trix-button--dialog" data-trix-custom="add-embed" value="Add">
          </div>
        </div>
      </div>`
    const dialogGroup = parent.toolbarElement.querySelector(".trix-dialogs")
    buttonGroup.insertAdjacentHTML("beforeend", buttonHTML)
    dialogGroup.insertAdjacentHTML("beforeend", dialogHml)

    this.addEmbedEventListener()
  }

  addEmbedEventListener () {
    document
      .querySelector('[data-trix-action="embed"]')
      .addEventListener("click", event => {
        const dialog = document.querySelector('[data-trix-dialog="embed"]');
        const embedInput = document.querySelector('[name="embed"]');
        if (event.target.classList.contains("trix-active")) {
          event.target.classList.remove("trix-active");
          dialog.classList.remove("trix-active");
          delete dialog.dataset.trixActive;
          embedInput.setAttribute("disabled", "disabled");
        } else {
          event.target.classList.add("trix-active");
          dialog.classList.add("trix-active");
          dialog.dataset.trixActive = "";
          embedInput.removeAttribute("disabled");
          embedInput.focus();
        }
      })
  
    document
      .querySelector('[data-trix-custom="add-embed"]')
      .addEventListener("click", event => {
        document.dispatchEvent(new CustomEvent("add-embed", { 
          bubbles: true,
          detail: { link: () => document.querySelector('[name="embed"]').value }
        }))
      })
  }
}

import { Controller } from "stimulus"
import Trix from 'trix'
import YoutubeEmbedded from 'embed'
export default class extends Controller {
  static targets = [ "field" ]

  connect () {
    this.editor = this.fieldTarget.editor;
    let embed = new YoutubeEmbedded()
    embed.extend(this.fieldTarget)
  }
}

  document.addEventListener("add-embed", (event) => {
    let link = event.detail.link()
    if (link) {
      const token = document.querySelector('meta[name="csrf-token"]').content
      fetch('/embeds', {
        method: "POST",
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-Token': token
        },
        body: JSON.stringify({
          embeds: {
            link
          }
        })
      })
      .then(response => response.json())
      .then(({ sgid, content, contentType }) => {
        const attachment = new Trix.Attachment({
          content,
          sgid,
          contentType,
          filename: link,
          previewable: true
        })
        this.editor.insertAttachment(attachment)
        this.editor.insertLineBreak()
      })
    }
  })

json.extract! @embed, :link
json.sgid @embed.attachable_sgid
json.content render(partial: "embed/thumbnail", locals: { embed: @embed }, formats: [:html])
json.contentType "embed/youtube-video"

document.addEventListener("turbolinks:load", () => {
  let elements = document.querySelectorAll("action-text-attachment[content-type^=embed]")
  elements.forEach(element => {
    let caption = element.getAttribute('caption')
    if (caption != null)
      element.insertAdjacentHTML('beforeend', `<caption>${caption}</caption>`)
  })
})