self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-02-07 19:30:04 +02:00
Code Issues Releases Activity

Deskotp: Legacy Markdown Editor: Fix styles in seconary windows and remove red focus-visible border (#11614)

Browse Source
This commit is contained in:
Henry Heino 2025-01-09 07:28:45 -08:00 committed by GitHub
parent 652812a15c
commit 877f39bb0e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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}