Bug in RichText field Headers option

[harinij]

Is your feature request related to a problem? Please describe.
Currently, when someone tries to edit a RichText field in the side drawer, the headers drop down list has a CSS color issue where it is all white in light and dark mode. Needs to fixed

[acaldwell710]

Going to try to work on this! (Amber Caldwell)

[htuerker]

Hello 👋

I did some work here. I'd like to get some direction before opening a PR.

The problem here is the below line is completely useless and has no effect on the editor's UI styling:

rowy/src/components/RichTextEditor.tsx

Lines 126 to 128 in 57e758d

	content_style: [
	theme.palette.mode === "dark" ? contentCssDark : contentCss,
	theme.palette.mode === "dark" ? contentUiCssDark : contentUiCss,

As this does nothing, we alter the color to palette.text.primary in content_styles which also affects the dropdown stylings.

rowy/src/components/RichTextEditor.tsx

Lines 136 to 139 in 57e758d

	html, body { background-color: transparent; }
	body {
	font-family: ${theme.typography.fontFamily};
	color: ${theme.palette.text.primary};

I implemented a tricky solution by importing both tinymce/skins/ui/oxide/skin.min.css and tinymce/skins/ui/oxide-dark/skin.min.css then load the proper one dynamically with React.lazy:

      const OxideTheme = lazy(() => import("@src/theme/RichTextUIDark"));
      const OxideDarkTheme = lazy(() => import("@src/theme/RichTextUILight"));

      {theme.palette.mode === "dark" ? <OxideDarkTheme /> : <OxideTheme />}

Lastly, this still causes the same problem on theme switches because it has loaded both stylings. I guess there's no easy workaround without customizing the styles. Of course, there's a costly solution over this to destroy and reinitialize the editor when theme changed.

Let me know if I miss something here ❤️

[notsidney]

Hi @htuerker, thanks for your interest in Rowy!

contentCss and contentUiCss are used to style the actual content of the rich text, so it shouldn’t affect the editor UI. I’m not exactly sure why it’s also part of content_style, but it’s recommended in their example code on how to use it with React: https://www.tiny.cloud/docs/integrations/react/#:~:text=the%20React%20application-,using%20a%20module%20loader,-Tiny%20does%20not

I haven’t checked it in a while, but if I recall correctly, removing that part of content_style may cause the editor content to use the wrong theme when the theme is changed. You can find out about that option in the docs.

Using React.lazy for the CSS is a good idea, but I can’t seem to find where you implemented @src/theme/RichTextUILight. I’m curious why it’s a React component itself.

To solve the theme switching issue, it may be helpful to force the tinymce editor to re-mount with the key prop, although this may cause issues if a user has unsaved changes and they lose those changes. In that case, I think it’s better to leave that unfixed because of how rarely a user would change the theme.

[harinij]

This issue has been resolved.