Desktop: WYSIWYG: Apply theme to toolbar

ElectronClient/gui/editors/TinyMCE.tsx

@@ -129,6 +129,7 @@ let changeId_:number = 1;
 const TinyMCE = (props:TinyMCEProps, ref:any) => {
 	const [editor, setEditor] = useState(null);
 	const [scriptLoaded, setScriptLoaded] = useState(false);
+	const [editorReady, setEditorReady] = useState(false);
 
 	const attachResources = useRef(null);
 	attachResources.current = props.attachResources;
@@ -140,6 +141,8 @@ const TinyMCE = (props:TinyMCEProps, ref:any) => {
 	joplinHtml.current = props.joplinHtml;
 
 	const rootIdRef = useRef<string>(`tinymce-${Date.now()}${Math.round(Math.random() * 10000)}`);
+	const editorRef = useRef<any>(null);
+	editorRef.current = editor;
 
 	const styles = styles_(props);
 	const theme = themeStyle(props.theme);
@@ -293,6 +296,70 @@ const TinyMCE = (props:TinyMCEProps, ref:any) => {
 		};
 	}, []);
 
+	useEffect(() => {
+		if (!editorReady) return () => {};
+
+		const element = document.createElement('style');
+		element.setAttribute('id', 'tinyMceStyle');
+		document.head.appendChild(element);
+		element.appendChild(document.createTextNode(`
+			.tox .tox-toolbar,
+			.tox .tox-toolbar__overflow,
+			.tox .tox-toolbar__primary,
+			.tox-editor-header .tox-toolbar__primary,
+			.tox .tox-toolbar-overlord,
+			.tox.tox-tinymce-aux .tox-toolbar__overflow,
+			.tox .tox-statusbar {
+				background-color: ${theme.backgroundColor};
+			}
+
+			.tox .tox-editor-header {
+				border-bottom: 1px solid ${theme.dividerColor};
+			}
+
+			.tox .tox-tbtn,
+			.tox .tox-tbtn svg {
+				color: ${theme.color};
+				fill: ${theme.color} !important;
+			}
+
+			.tox .tox-statusbar a,
+			.tox .tox-statusbar__path-item,
+			.tox .tox-statusbar__wordcount,
+			.tox .tox-statusbar__path-divider {
+				color: ${theme.color};
+				fill: ${theme.color};
+				opacity: 0.7;
+			}
+
+			.tox .tox-tbtn--enabled,
+			.tox .tox-tbtn--enabled:hover {
+				background-color: ${theme.selectedColor};
+			}
+
+			.tox .tox-tbtn:hover {
+				background-color: ${theme.backgroundHover};
+				color: ${theme.colorHover};
+				fill: ${theme.colorHover};
+			}
+
+			.tox .tox-toolbar__primary,
+			.tox .tox-toolbar__overflow {
+				background: none;
+			}
+
+			.tox-tinymce,
+			.tox .tox-toolbar__group,
+			.tox.tox-tinymce-aux .tox-toolbar__overflow {
+				border-color: ${theme.dividerColor} !important;
+			}
+		`));
+
+		return () => {
+			document.head.removeChild(element);
+		};
+	}, [editorReady]);
+
 	// -----------------------------------------------------------------------------------------
 	// Enable or disable the editor
 	// -----------------------------------------------------------------------------------------
@@ -404,6 +471,10 @@ const TinyMCE = (props:TinyMCEProps, ref:any) => {
 							dispatchDidUpdate(editor);
 						}
 					});
+
+					editor.on('init', () => {
+						setEditorReady(true);
+					});
 				},
 			});
 
@@ -596,6 +667,18 @@ const TinyMCE = (props:TinyMCEProps, ref:any) => {
 		};
 	}, [props.onWillChange, props.onChange, editor]);
 
+	// -----------------------------------------------------------------------------------------
+	// Destroy the editor when unmounting
+	// Note that this effect must always be last, otherwise other effects that access the
+	// editor in their clean up function will get an invalid reference.
+	// -----------------------------------------------------------------------------------------
+
+	useEffect(() => {
+		return () => {
+			if (editorRef.current) editorRef.current.remove();
+		};
+	}, []);
+
 	function renderDisabledOverlay() {
 		const status = resourcesStatus(props.defaultEditorState.resourceInfos);
 		if (status === 'ready') return null;

ElectronClient/theme.js

@@ -384,6 +384,9 @@ function addExtraStyles(style) {
 
 	style.dropdownList = Object.assign({}, style.inputStyle);
 
+	style.colorHover = style.color;
+	style.backgroundHover = `${style.selectedColor2}44`;
+
 	// In general the highlighted color, used to highlight text or icons, should be the same as selectedColor2
 	// but some times, depending on the theme, it might be too dark or too light, so it can be
 	// specified directly by the theme too.