self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-09-16 08:56:40 +02:00
Code Issues Releases Activity

Desktop: CodeMirror: Change rootSize parameters to prevent collision with styles.editor (#3505)

Browse Source
This commit is contained in:
Caleb John
2020-07-22 16:16:06 -06:00
committed by GitHub
parent 44d3a4213f
commit a274a56e65
2 changed files with 13 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx
View File

@@ -451,17 +451,19 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
return output; return output;
}, [styles.cellViewer, props.visiblePanes]); }, [styles.cellViewer, props.visiblePanes]);
// The editor needs to be kept up to date on the actual space that it's filling useEffect(() => {
// Ogherwise we can get some rendering errors when the editor size is changed if (!editorRef.current) return;
// (this can happen when switching layout of when toggling sidebars for example)
const editorStyle = useMemo(() => {
const output = Object.assign({}, rootSize, styles.editor);
if (props.visiblePanes.includes('editor') && props.visiblePanes.includes('viewer')) { // Need to let codemirror know that it's container's size has changed so that it can
output.width = Math.floor(rootSize.width / 2); // re-compute anything it needs to. This ensures the cursor (and anything that is
} // based on window size will be correct
// Codemirror will automatically refresh on window size changes but otherwise assumes
return output; // that it's container size is stable, that is not true with Joplin, hence
// why we need to manually let codemirror know about resizes.
// Manually calling refresh here will cause a double refresh in some instances (when the
// window size is changed for example) but this is a fairly quick operation so it's worth
// it.
editorRef.current.refresh();
}, [rootSize, styles.editor, props.visiblePanes]); }, [rootSize, styles.editor, props.visiblePanes]);
const editorReadOnly = props.visiblePanes.indexOf('editor') < 0; const editorReadOnly = props.visiblePanes.indexOf('editor') < 0;
@@ -475,7 +477,7 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
ref={editorRef} ref={editorRef}
mode={props.contentMarkupLanguage === Note.MARKUP_LANGUAGE_HTML ? 'xml' : 'joplin-markdown'} mode={props.contentMarkupLanguage === Note.MARKUP_LANGUAGE_HTML ? 'xml' : 'joplin-markdown'}
theme={styles.editor.codeMirrorTheme} theme={styles.editor.codeMirrorTheme}
style={editorStyle} style={styles.editor}
readOnly={props.visiblePanes.indexOf('editor') < 0} readOnly={props.visiblePanes.indexOf('editor') < 0}
autoMatchBraces={Setting.value('editor.autoMatchingBraces')} autoMatchBraces={Setting.value('editor.autoMatchingBraces')}
keyMap={props.keyboardMode} keyMap={props.keyboardMode}

12
ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/Editor.tsx
View File

@@ -260,18 +260,6 @@ function Editor(props: EditorProps, ref: any) {
} }
}, [props.value, props.theme, props.mode, props.readOnly, props.autoMatchBraces, props.keyMap]); }, [props.value, props.theme, props.mode, props.readOnly, props.autoMatchBraces, props.keyMap]);
useEffect(() => {
if (editor) {
// Need to let codemirror know that it's container's size has changed so that it can
// re-compute anything it needs to. This ensures the cursor (and anything that is
// based on window size will be correct
// Manually calling refresh here will cause a double refresh in some instances (when the
// windows size is changed for example) but this is a fairly quick operation so it's worth
// it.
editor.refresh();
}
}, [props.style.width, props.style.height]);
return <div style={props.style} ref={editorParent} />; return <div style={props.style} ref={editorParent} />;
} }