Textable not working with extended text component

Hey @Joshmamroud there is actually a general issue about textable components here #2771

Thanks, @artf. I think my problem here is more so the custom component that extends the Text component. Textable works as expected with the original Text component but when I try to create my own, custom text component that's where I run into issues. It's not just with textable either, I've noticed that an extended text component loses some other functionality as well. I can't think of specifics off the top of my head right now. Is there something that I'm doing wrong in way that I'm extending the text component?

From your demo, I don't see issues with the extended text component, but only those related to textable

Thanks for reporting this, @Joshmamroud.

The issue with Textable not working with extended text component appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating an inconsistent state.

What to try:

1. Add a setTimeout wrapper to ensure the DOM has settled:

setTimeout(() => {
  // your operation here
}, 0);

2. Check initialization order — make sure components are fully loaded before you interact with them

3. Use the editor's event system — listen to completion events:

editor.on('component:mount', (component) => {
  // safe to interact with component here
});

Recommended next steps:

• Test with the latest GrapesJS version if you haven't
• Provide a minimal reproducible example (CodeSandbox) — this helps the team identify the root cause faster
• Include GrapesJS version, browser, and console errors in your report