[Solved] Stimulus controller cannot access element.editor after v2.0.0-beta.1

[goulvench]

I'm using Trix in a Rails/webpacker app to give users a nice-looking WYSIWYG when generating PDF documents. In particular, users can insert references (implemented following Chris Oliver's tutorial) whose value gets calculated when viewing the PDF document.

Since Trix version 2.0.0-beta.1, my stimulus controller can no longer access this.element.editor when connecting, which returns undefined. I'm guessing this happened after changing how Trix gets started (in #1008)?

Calling document.getElementById('#trix-editor').editor works from a browser console, so I guess it's just that the Stimulus controller is attached before Trix has been applied to the base element.

I've tried calling Trix.start() at various steps, but that makes the JS crash, even if I disable chunking in webpacker config.

I found a workaround while researching this issue, see below.

Steps to Reproduce

// app/assets/javascripts/packs/application.js
import Trix from "trix"
document.addEventListener("trix-before-initialize", () => {
  // I18n config
})
import("controllers")

// app/assets/javascripts/controllers/placeholder_controller.js
import { Controller } from "@hotwired/stimulus";
import Trix from "trix"

export default class extends Controller {
  connect() {
    this.editor = this.element.editor // -> undefined after 2.0.0-beta.1
  }
}

Solution

I was able to work around this by calling this.element.editor dynamically when interacting with the controller, instead of storing it when it is connected.

export default class extends Controller {
  connect() {
    // Don't store a reference to this.element.editor
  }
 
  get editor() {
    return this.element.editor
  }
}

Details

• Trix version: 2.0.4
• Browser name and version: Firefox 108.0.1
• Operating system: MacOS Monterey 12.6.2

[pkayokay]

Another work-around is to add an event listener of trix-initialize to the trix-editor element.

import { Controller } from "@hotwired/stimulus";
import Trix from "trix"

export default class extends Controller {
  connect() {
    this.element.addEventListener("trix-initialize", this.trixInitialize.bind(this))
  }

  disconnect() {
    this.contentFieldTarget.removeEventListener("trix-initialize", this.trixInitialize)
  }

  trixInitialize() {
    this.editor = this.element.editor
    // Do some stuff
  }
}