Skip to content

Conversation

@finist
Copy link

@finist finist commented Dec 9, 2025

Fix race condition when using custom toolbar with Turbo navigation

This PR fixes a race condition that occurs when <lexxy-editor> is initialized before the custom <lexxy-toolbar> is upgraded as a Web Component during Turbo-driven navigation.

Problem

When navigating with Turbo, DOM elements are inserted incrementally.
<lexxy-editor> often connects before the custom toolbar is upgraded, so:

this.toolbarElement.setEditor(this)

throws:

TypeError: this.toolbarElement.setEditor is not a function

This interrupts editor initialization and prevents content from loading.

Related issue:
#458

What this PR changes

  • attachToolbar() no longer assumes that toolbarElement is already a fully upgraded custom element.
  • The method now:
    • attempts to attach immediately (for full page loads),

    • but if setEditor is not yet available, it waits for:

      customElements.whenDefined("lexxy-toolbar")

      and retries on the next animation frame.

  • When a custom toolbar is specified via the toolbar attribute, Lexxy no longer creates a default toolbar.
    This prevents the duplicate-toolbar issue under Turbo navigation.

Result

  • Custom toolbars now work reliably with Turbo navigation.
  • No errors are thrown during editor initialization.
  • Editor content loads correctly.
  • Default behavior (when no custom toolbar is provided) remains unchanged.

@zoltanhosszu
Copy link
Contributor

@finist thank you for this! Could you move these changes to src/elements/toolbar.js and use the build commands to rebuild the source?

@finist
Copy link
Author

finist commented Dec 9, 2025

@zoltanhosszu done

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants