self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-24 10:27:10 +02:00
Code Issues Releases Activity

Desktop: Fixes #5311: Rich text editor flashing white when switching notes/editor (#5793)

Browse Source
This commit is contained in:
Caleb John 2021-12-03 04:23:31 -08:00 committed by GitHub
parent 122afd6d46
commit aac044fc9c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx
View File

@ -356,8 +356,6 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
}, []);
useEffect(() => {
if (!editorReady) return () => {};
const theme = themeStyle(props.themeId);
const element = document.createElement('style');
@ -491,11 +489,28 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
padding-top: ${theme.toolbarPadding}px;
padding-bottom: ${theme.toolbarPadding}px;
}
.joplin-tinymce .tox .tox-edit-area__iframe {
background-color: ${theme.backgroundColor} !important;
}
.joplin-tinymce .tox .tox-toolbar__primary {
/* This component sets an empty svg with a white background as the background
* which needs to be cleared to prevent it from flashing white in dark themes */
background: none;
background-color: ${theme.backgroundColor3} !important;
}
`));
return () => {
document.head.removeChild(element);
};
// editorReady is here because TinyMCE starts by initializing a blank iframe, which needs to be
// styled by us, otherwise users in dark mode get a bright white flash. During initialization
// our styling is overwritten which causes some elements to have the wrong styling. Removing the
// style and re-applying it on editorReady gives our styles precedence and prevents any flashing
//
// tl;dr: editorReady is used here because the css needs to be re-applied after TinyMCE init
}, [editorReady, props.themeId]);
// -----------------------------------------------------------------------------------------