Deskotp: Legacy Markdown Editor: Fix styles in seconary windows and r…

…emove red focus-visible border (#11614)

packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v5/CodeMirror.tsx

@@ -48,7 +48,10 @@ function CodeMirror(props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
 	const [webviewReady, setWebviewReady] = useState(false);
 
 	const editorRef = useRef(null);
-	const rootRef = useRef(null);
+	const [editorRoot, setEditorRoot] = useState<HTMLDivElement|null>(null);
+	const rootRef = useRef<HTMLDivElement|null>(null);
+	rootRef.current = editorRoot;
+
 	const webviewRef = useRef(null);
 	// eslint-disable-next-line @typescript-eslint/ban-types -- Old code before rule was applied
 	const props_onChangeRef = useRef<Function>(null);
@@ -410,6 +413,8 @@ function CodeMirror(props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
 	}, [styles.editor.codeMirrorTheme]);
 
 	useEffect(() => {
+		if (!editorRoot) return () => {};
+
 		const theme = themeStyle(props.themeId);
 
 		// Selection in dark mode is hard to see so make it brighter.
@@ -431,10 +436,11 @@ function CodeMirror(props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
 			max-width: ${props.contentMaxWidth}px !important;
 		` : '';
 
-		const element = document.createElement('style');
+		const ownerDoc = editorRoot.ownerDocument;
+		const element = ownerDoc.createElement('style');
 		element.setAttribute('id', 'codemirrorStyle');
-		document.head.appendChild(element);
-		element.appendChild(document.createTextNode(`
+		ownerDoc.head.appendChild(element);
+		element.appendChild(ownerDoc.createTextNode(`
 			/* These must be important to prevent the codemirror defaults from taking over*/
 			.CodeMirror {
 				font-family: monospace;
@@ -449,6 +455,11 @@ function CodeMirror(props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
 				line-height: ${theme.lineHeight} !important;
 			}
 
+			.CodeMirror-code:focus-visible {
+				/* Avoid showing additional focus-visible decoration */
+				outline: none;
+			}
+
 			.CodeMirror-lines {
 				/* This is used to enable the scroll-past end behaviour. The same height should */
 				/* be applied to the viewer. */
@@ -591,10 +602,9 @@ function CodeMirror(props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
 		`));
 
 		return () => {
-			document.head.removeChild(element);
+			ownerDoc.head.removeChild(element);
 		};
-		// eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied
-	}, [props.themeId, props.contentMaxWidth]);
+	}, [props.themeId, props.contentMaxWidth, props.fontSize, editorRoot]);
 
 	const webview_domReady = useCallback(() => {
 		setWebviewReady(true);
@@ -774,7 +784,7 @@ function CodeMirror(props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
 	const windowId = useContext(WindowIdContext);
 	return (
 		<ErrorBoundary message="The text editor encountered a fatal error and could not continue. The error might be due to a plugin, so please try to disable some of them and try again.">
-			<div style={styles.root} ref={rootRef}>
+			<div style={styles.root} ref={setEditorRoot}>
 				<div style={styles.rowToolbar}>
 					<Toolbar themeId={props.themeId} windowId={windowId}/>
 					{props.noteToolbar}