Simple RichText editor for form...what's the most remix-friendly option?

[gentle hull]

Need to convert a form's standard textarea to something that provides basic rich text editing (Bold, Lists).

What's the most Remix(SSR)-friendly solution today?

I've tried some things with Quill and TipTap but keep hitting some rough edges (and lack of knowledge).

Suggestions?

[sterile escarp]

there's pretty much no better solutions than what you tried. Pretty much all WYSIWYG editors immediately try using browser apis. The trick is to put any library like that within a .client file. The .client file tells remix to never run that code outside of the browser. The extra tricky part is then having to check if you're in the browser or your server environment. You can do that by doing:

return (
// react componnent stuff
  {typeof window !== undefined && <MyWysiwigClientComponent/>}
)

Sergiodxa also has a great package called remix utils that has a hook called useHydrated and a ClientOnly hook, both of which could be useful instead of the window check. With that package it might look like:

const hydrated = useHydrated();
return (
// react component stuff
{hydrated && <MyWysiwigClientComponent/>}

when doing those sorts of checks, it's good practice to not do what I did, instead have a fallback component render on the server that way you don't have a layout shift of the page content when the browser does load in

[gentle hull]

Thanks for the tips. I'm a back-end dev pretending to do front-end so I hit the limits of my React/Remix/JS knowledge a lot.

Really wish I could find a full example of one of these to pattern on. I did see this:
https://codesandbox.io/s/remix-quill-bxu3jy?file=/app/components/quill.client.tsx
Which is really close but I see it uses a 'react-quilljs' package as a wrapper. That project is too small for me to feel comfortable relying on.

Was hoping to find something more direct.

[sterile escarp]

well remix is a great place to get more familiar with frontend. But there definitely is challenges integrating some libraries. I have a WYSIWYG editor in one of my apps and I find it to be a real pain to setup and not even a great user experience. For other apps now I've gone the direction of writing Markdown and using markdown parsers to generate the HTML. Makes the bundle size smaller, it's easier to implement because you can just use a basic textarea, but the downside is teaching and or expecting users to know how to use and work with markdown.

You also don't get some WYSIWYG features like changing the font style. But almost everything you can do in WYSIWYG you can do in markdown.

[high birch]

I've tried to integrate EditorJs according to their docs, but it resulted in failure.
Every time, it throws an error ReferenceError : Element is not defined
Can you kindly help, @sterile escarp ?

[sterile escarp]

Not at all familiar with that package. Briefly looked at it and it seems like my above recommendation is about the best info I can give. It seems like a client only package, so you need to make sure remix knows to only have it on the client (browser)