fix(rich-text-editor): fix dark mode ui appearance #696

htuerker · 2022-06-28T00:30:50Z

Fixes #537

Screen.Recording.2022-06-28.at.03.13.29.mov

This is a very minimal solution. I tried something else but it seemed overkill then left it like that.

@notsidney This gives at least a chance to make a theme switch without issues.

For future references on this issue, there might be a solution something like the below:

const useDisabledStylesheets(mode, sheet, cache) {
  useEffect(()=> {
    if(!cache[mode]) {
        cache[mode] = sheet;
    }
    sheet.disabled = false;
     return () => {
      cache[sheet].disabled = true;
    }
  })
}

import "/foo.css"
const LightCSS = (cache) => {
   useDisabledStylesheets("light", document.stylesheets[document.stylesheets.length - 1]), cache]
   return null;
}

src/components/RichTextEditor.tsx

notsidney · 2022-06-28T03:13:50Z

I noticed that when switching from light to dark, it correctly shows the dark menu. But when switching from dark to light, it’s stuck on the dark menu (the background and text colors are both white).

This is because importing the CSS file results in a <style> tag with the CSS to be appended to the <head>, but doesn’t remove any previously imported styles that have been unmounted. So the result is:

<style> light styles </style>
<style> dark styles </style>

Then the dark styles will always take precedence from now on.

This can be solved by writing the <style> tag ourselves:

// Editor styles
/* eslint import/no-webpack-loader-syntax: off */
import skinCss from "!!raw-loader!tinymce/skins/ui/oxide/skin.min.css";
import skinDarkCss from "!!raw-loader!tinymce/skins/ui/oxide-dark/skin.min.css";

...

<style>{theme.palette.mode === "dark" ? skinDarkCss : skinCss}</style>

The second problem is that the iframe used to display the content doesn’t re-render when the theme changes. The <Editor> component receives an updated content_style prop, but doesn’t update the iframe itself. We can force this to happen by setting key={theme.palette.mode} on the <Editor> component itself (which remounts the entire component).

This is ok to do because the user’s input is stored in state in the component containing <RichTextEditor>, so when the editor is remounted, we don’t lose the user input.

I’ll write review comments on specific lines, which you can approve yourself, then I’ll merge this PR 👍

notsidney

Please commit the suggestions. Feel free to expand the <GlobalStyles> to further improve styling to match our theme.

src/components/RichTextEditor.tsx

src/theme/RichTextEditorDarkCSS.tsx

src/theme/RichTextEditorLightCSS.tsx

htuerker · 2022-06-28T03:33:44Z

This can be solved by writing the <style> tag ourselves:

I disagree. This can only be solved: scan all the entire appended stylesheets then disable invalid ones by reverse engineering. Just joking 😄 Thanks for your guidance, by the way!

Co-authored-by: Sidney Alcantara <sidney@sidney.me>

htuerker · 2022-06-28T20:05:41Z

I think this is good to go! @notsidney

Screen.Recording.2022-06-28.at.23.03.06.mov

notsidney

Looks good to me!

~~Also just wondering why you’re importing GlobalStyles from tss-react instead of MUI—is there an advantage there that I’m not aware of?~~

Oh, I just realised I forgot to put that suggestion in. Either should be fine since we’re already using tss-react elsewhere, because of the migration from MUI v4 to v5 away from JSS.

* Bump ejs from 3.1.6 to 3.1.8 Bumps [ejs](https://github.com/mde/ejs) from 3.1.6 to 3.1.8. - [Release notes](https://github.com/mde/ejs/releases) - [Changelog](https://github.com/mde/ejs/blob/main/CHANGELOG.md) - [Commits](mde/ejs@v3.1.6...v3.1.8) --- updated-dependencies: - dependency-name: ejs dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> * Bump minimist from 1.2.5 to 1.2.6 Bumps [minimist](https://github.com/substack/minimist) from 1.2.5 to 1.2.6. - [Release notes](https://github.com/substack/minimist/releases) - [Commits](https://github.com/substack/minimist/compare/1.2.5...1.2.6) --- updated-dependencies: - dependency-name: minimist dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> * Bump tmpl from 1.0.4 to 1.0.5 Bumps [tmpl](https://github.com/daaku/nodejs-tmpl) from 1.0.4 to 1.0.5. - [Release notes](https://github.com/daaku/nodejs-tmpl/releases) - [Commits](https://github.com/daaku/nodejs-tmpl/commits/v1.0.5) --- updated-dependencies: - dependency-name: tmpl dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> * Bump protobufjs from 6.11.2 to 6.11.3 Bumps [protobufjs](https://github.com/protobufjs/protobuf.js) from 6.11.2 to 6.11.3. - [Release notes](https://github.com/protobufjs/protobuf.js/releases) - [Changelog](https://github.com/protobufjs/protobuf.js/blob/v6.11.3/CHANGELOG.md) - [Commits](protobufjs/protobuf.js@v6.11.2...v6.11.3) --- updated-dependencies: - dependency-name: protobufjs dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> * fix(rich-text-editor): fix dark mode ui appearance (#696) * fix(rich-text-editor): fix dark mode ui appearance * Update src/components/RichTextEditor.tsx Co-authored-by: Sidney Alcantara <sidney@sidney.me> * Update src/components/RichTextEditor.tsx Co-authored-by: Sidney Alcantara <sidney@sidney.me> * Update src/components/RichTextEditor.tsx Co-authored-by: Sidney Alcantara <sidney@sidney.me> * Update src/components/RichTextEditor.tsx Co-authored-by: Sidney Alcantara <sidney@sidney.me> * Update src/components/RichTextEditor.tsx Co-authored-by: Sidney Alcantara <sidney@sidney.me> * Update src/components/RichTextEditor.tsx Co-authored-by: Sidney Alcantara <sidney@sidney.me> * Update src/components/RichTextEditor.tsx Co-authored-by: Sidney Alcantara <sidney@sidney.me> * Update src/theme/RichTextEditorDarkCSS.tsx Co-authored-by: Sidney Alcantara <sidney@sidney.me> * Update src/theme/RichTextEditorLightCSS.tsx Co-authored-by: Sidney Alcantara <sidney@sidney.me> * fix(rich-text-editor): add stylings to dropdown * fix(rich-text-editor): add toolbar stylings * fix(rich-text-editor): reset hover&focus bg Co-authored-by: Sidney Alcantara <sidney@sidney.me> * update date & time filter operators for clarity * Action field: prevent selecting self as required field (fixes ROWY-551) * Date & Time: only show date for date filters * move fullScreenButton to be shared, remove md settings * bundle-analyzer * Leaf icon: use mdi-material-ui * Feat: Percentage field color customization (#692) * feat(percentage-c11n): convert to table cell * feat(percentage-c11n): add logic to default configs * feat(percentage-c11n): add color picker to settings * feat(percentage-c11n): change default colors * feat(percentage-c11n): fix button text color * feat(percentage-c11n): add labels to settings * feat(percentage-c11n): add preview section * feat(percentage-c11n): fix cache issues with debouncing * feat(percentage-c11n): add width responsiveness to color picker * feat(percentage-c11n): fix responsiveness issues * feat(percentage-c11n): add checkbox, refactor a little * feat(percentage-c11n): convert data type to array * feat(percentage-c11n): refactor config states * feat(percentage-c11n): fix defaults * feat(percentage-c11n): add basic cell without bg * feat(percentage-c11n): remove collapse * feat(percentage-c11n): refactor checkStates * feat(percentage-c11n): add grid layout * feat(percentage-c11n): chore conventions * feat(percentage-c11n): add default theme color to sidedrawer * remove redundant fragment Co-authored-by: Sidney Alcantara <sidney@sidney.me> * fix text color in preview Co-authored-by: Sidney Alcantara <sidney@sidney.me> * fix: change state to derived state Co-authored-by: Sidney Alcantara <sidney@sidney.me> * fix: review suggestions * fix: remove redundant change call Co-authored-by: Sidney Alcantara <sidney@sidney.me> * fix(percentage-c11n): remove redundant dependencies Co-authored-by: Shams <shams.mosowi@gmail.com> Co-authored-by: Sidney Alcantara <sidney@sidney.me> * extend callable timeout to over 9minutes * fix timeout value * fix page loading with white screen while system is in dark mode * Revert "bundle-analyzer" This reverts commit dd214b9. * fix nav items not accessible with Tab * Percentage: don’t display if value null or undefined * fix NavDrawer causing compile to fail * show text field if collections array is empy * column ids * row ID * fix create table showing empty dropdown for collections * fix row not writing to db once all required fields are written Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Han Tuerker <46192266+htuerker@users.noreply.github.com> Co-authored-by: shamsmosowi <shams.mosowi@gmail.com>

fix(rich-text-editor): fix dark mode ui appearance

22bd75e

htuerker commented Jun 28, 2022

View reviewed changes

src/components/RichTextEditor.tsx Outdated Show resolved Hide resolved

notsidney suggested changes Jun 28, 2022

View reviewed changes

htuerker marked this pull request as draft June 28, 2022 18:02

htuerker and others added 11 commits June 28, 2022 21:04

Update src/components/RichTextEditor.tsx

82c36f7

Co-authored-by: Sidney Alcantara <sidney@sidney.me>

Update src/components/RichTextEditor.tsx

907bb8e

Co-authored-by: Sidney Alcantara <sidney@sidney.me>

Update src/components/RichTextEditor.tsx

3a41ba4

Co-authored-by: Sidney Alcantara <sidney@sidney.me>

Update src/components/RichTextEditor.tsx

50bb7d7

Co-authored-by: Sidney Alcantara <sidney@sidney.me>

Update src/components/RichTextEditor.tsx

9a02b84

Co-authored-by: Sidney Alcantara <sidney@sidney.me>

Update src/components/RichTextEditor.tsx

1cc9594

Co-authored-by: Sidney Alcantara <sidney@sidney.me>

Update src/components/RichTextEditor.tsx

8b5f064

Co-authored-by: Sidney Alcantara <sidney@sidney.me>

Update src/theme/RichTextEditorDarkCSS.tsx

d275cab

Co-authored-by: Sidney Alcantara <sidney@sidney.me>

Update src/theme/RichTextEditorLightCSS.tsx

d084843

Co-authored-by: Sidney Alcantara <sidney@sidney.me>

fix(rich-text-editor): add stylings to dropdown

126f035

fix(rich-text-editor): add toolbar stylings

e30117b

fix(rich-text-editor): reset hover&focus bg

2a309e0

notsidney approved these changes Jun 29, 2022

View reviewed changes

notsidney marked this pull request as ready for review June 29, 2022 02:31

notsidney linked an issue Jun 29, 2022 that may be closed by this pull request

Bug in RichText field Headers option #537

Closed

notsidney merged commit 28c1d67 into rowyio:develop Jun 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(rich-text-editor): fix dark mode ui appearance #696

fix(rich-text-editor): fix dark mode ui appearance #696

htuerker commented Jun 28, 2022

notsidney commented Jun 28, 2022

notsidney left a comment

htuerker commented Jun 28, 2022

htuerker commented Jun 28, 2022

notsidney left a comment •

edited

Loading

fix(rich-text-editor): fix dark mode ui appearance #696

fix(rich-text-editor): fix dark mode ui appearance #696

Conversation

htuerker commented Jun 28, 2022

notsidney commented Jun 28, 2022

notsidney left a comment

Choose a reason for hiding this comment

htuerker commented Jun 28, 2022

htuerker commented Jun 28, 2022

notsidney left a comment • edited Loading

Choose a reason for hiding this comment

notsidney left a comment •

edited

Loading