Some elements are not displaying correctly in textarea

[ezeamin]

Some elements like image, text in bold, italics, are not displaying in the textarea, unless those texts are selected.

I'm only using rehype-sanitize as plugin, but the error existed since i first installed the library. The mentioned classname does nothing but animate the component.

[jaywcjlove]

If you can provide me with an example through codesandbox.io, I can help you troubleshoot. It may be due to a style conflict. @ezeamin

[ezeamin]

Sure @jaywcjlove ! Here it is.

CodeSandbox

The problem is when setting a display: flex in a container above the editor. In this case, i use it over all the page content (set in App.tsx with the class "content") to make sure the footer stays on the lower end of the screen. I included the styling library I use (MUI / Emotion) to make sure you get the whole context in which I'm working in.

I really appreciate your time.

You can see the error when adding an image from the toolbar, or setting bold font.

[jaywcjlove]

@ezeamin

[ezeamin]

@jaywcjlove check again please. The error was due a visibility config

[jaywcjlove]

style conflict @ezeamin

[ezeamin]

Thanks for reviewing the issue. Though, in my opinion, that class name should be changed to something like "editor-content" or anything more specific to the editor itself. Otherwise, more issues like this one will appear.

Have a great day!