Cannot use Lexxy with Turbo when using custom toolbar nested in the editor element

[daniel-rikowski]

In my app I'm using a custom toolbar which is nested in the editor element, similar to how the default toolbar is created.

<lexxy-editor toolbar="toolbar-custom" value="...">
  <lexxy-toolbar id="toolbar-custom">
    <!-- ... -->
  </lexxy-toolbar>
</lexxy-editor>

(various attributes stripped for legibility)

This works almost 100%. (Some problems with lexxy-link-dialog and nested form elements...)

But when I navigate to the page containing the editor with Turbo, Lexxy cannot find the toolbar. ("this.toolbarElement.setEditor is not a function")

Call stack:

#attachToolbar lexxy.esm.js:3452
#initialize lexxy.esm.js:3263
connectedCallback lexxy.esm.js:3154
renderElement turbo.es2017-esm.js:5349
assignNewBody turbo.es2017-esm.js:5524
replaceBody turbo.es2017-esm.js:5430
preservingPermanentElements turbo.es2017-esm.js:1795
preservingPermanentElements turbo.es2017-esm.js:1896
replaceBody turbo.es2017-esm.js:5428

Lexxy assumes correctly that there is a toolbar, but then cannot find the element.

This seems to be the relevant code:

  #attachToolbar() {
    if (this.#hasToolbar) {
      this.toolbarElement.setEditor(this);
    }
  }

  get #hasToolbar() {
    return this.getAttribute("toolbar") !== "false"
  }

 get toolbarElement() {
    if (!this.#hasToolbar) return null

    this.toolbar = this.toolbar || this.#findOrCreateDefaultToolbar();
    return this.toolbar
  }

  #findOrCreateDefaultToolbar() {
    const toolbarId = this.getAttribute("toolbar");
    return toolbarId ? document.getElementById(toolbarId) : this.#createDefaultToolbar()
  }

When the toolbar is outside the editor it works (which then requires some CSS changes to not look broken...)

I'm not 100% sure what is happening, but it appears that when connectedCallback is called, the toolbar cannot yet be found using document.getElementById. It looks like this happens, because it is later in the DOM tree, although that is no problem on the initial page load. Perhaps there is something different going on when Turbo calls document.body.replaceWith.

Perhaps a requestAnimationFrame is all which is needed to solve this problem.