Proper way to replace default editor with a react editor

[akzhysparrow]

I am trying to replace the default text editor with a custom one that is built using React. The documentation shows how to replace it using a JS function; but in my case, the editor is a react component. What would be the best way to replace the editor in this case?

I was able to make a basic version work using createRoot().render() however in this case all of the styles applied to the editor are missing.

Here is a basic reproducible demo https://stackblitz.com/edit/vitejs-vite-jjpjyg?file=src%2FApp.jsx

I am using stitches for styling the editor and it looks like the styles are not getting applied even though the proper class names are being added. Is it due to the iframe? Can I do something about this from my side?

[artf]

Yes you're trying to render your react component inside the iframe and I believe stitches is adding those styles on top. I guess you'd need to figure out how to apply those styles inside the iframe with stitches.

[akzhysparrow]

Is using createRoot().render() the correct method to add the react component? Or are there any better methods?

[akzhysparrow]

Found a way to add the css using getCssText function exposed from stitches. It is a bit of a hacky solution, first we had to render the editor component outside of the iframe and then hide it using css. This way getCssText() would return the necessary styles. Then just add the css to a style tag in the iframe

let stitchesStyleAdded = false;
editor.setCustomRte({
  enable(el, rte) {
    if (el.getAttribute("data-text-editor")) {
      if (!stitchesStyleAdded) {
        const styleTag = document.createElement("style");
        styleTag.innerHTML = getCssText();
        el.ownerDocument.head.appendChild(styleTag);
        stitchesStyleAdded = true;
      }
    }
  },
});