Customize Attachment Preview URL

[seanpdoyle]

Related to #1154

First, document the existing Attachment previewing process, including which content types are supported out of the box.

Next, resolve some ManagedAttachment to Attachment proxying issues. The ManagedAttachment class is what gets dispatched as part of trix-attachment-add events. It does not inherit from Attachment, but instead proxies method calls and property access. Prior to this commit, there were some proxy definition gaps.

For example, the ManagedAttachment declares a proxy for the setAttribute method. Unfortunately, an Attachment.setAttribute method did not exist prior to these changes. This commit remedies that.

Next, this commit adds proxy definitions for Attachment.setPreviewURL and Attachment.getPreviewURL so that event handlers can customize the value from the event-level ManagedAttachment instance, without deeply reaching into the Attachment instance (via
event.attachment.attachment).

[brendon]

I currently have a stimulus controller like so:

import convert from 'heic-convert/browser'

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = {
    contentTypes: { type: Array, default: [] }
  }

  connect() {
    this.element.addEventListener('trix-file-accept', this.screenFile.bind(this))

    if (this.contentTypesValue.length === 0) {
      this.element.addEventListener('trix-attachment-add', event => event.attachment.remove())
    }
  }

  screenFile(event) {
    if (!this.contentTypesValue.includes(event.file.type)) {
      event.preventDefault()
      alert(`${event.file.type} is not a supported file type.`)
    } else if (event.file.type === 'image/heic') {
      event.preventDefault()

      this.convert(event.file).then((file) => {
        event.target.editor.insertFile(file)
      })
    }
  }

  async convert(file) {
    const buffer = await file.arrayBuffer()
    const uint8 = new Uint8Array(buffer)

    const outputBuffer = await convert({
      buffer: uint8, format: 'JPEG', quality: 0.8
    })

    const blob = new Blob([outputBuffer], { type: 'image/jpeg' })
    const name = `${file.name.replace(/\.heic$/i, '')}.jpeg`
    return new File([blob], name, { type: 'image/jpeg' })
  }

  process() {
    const attachments = this.element.editor.getDocument().getAttachments()
    this.dispatch('uploading', { detail: attachments.some(attachment => attachment.isPending()) })
  }
}

Would this PR make that process easier?