self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-01-26 18:58:21 +02:00
Code Issues Releases Activity

Desktop: Fixed regression with Ace Editor (switching layout had bugs)

Browse Source
This commit is contained in:
Laurent Cozic 2020-05-07 18:08:03 +01:00
parent a04092c99c
commit 132c6543b2
2 changed files with 36 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/AceEditor.tsx
View File

@ -5,7 +5,7 @@ import { useState, useEffect, useRef, forwardRef, useCallback, useImperativeHand
import { EditorCommand, NoteBodyEditorProps } from '../../utils/types'; import { EditorCommand, NoteBodyEditorProps } from '../../utils/types';
import { commandAttachFileToBody } from '../../utils/resourceHandling'; import { commandAttachFileToBody } from '../../utils/resourceHandling';
import { ScrollOptions, ScrollOptionTypes } from '../../utils/types'; import { ScrollOptions, ScrollOptionTypes } from '../../utils/types';
import { textOffsetToCursorPosition, useScrollHandler, usePrevious, lineLeftSpaces, selectionRangeCurrentLine, selectionRangePreviousLine, currentTextOffset, textOffsetSelection, selectedText, useSelectionRange } from './utils'; import { textOffsetToCursorPosition, useScrollHandler, useRootWidth, usePrevious, lineLeftSpaces, selectionRangeCurrentLine, selectionRangePreviousLine, currentTextOffset, textOffsetSelection, selectedText, useSelectionRange } from './utils';
import Toolbar from './Toolbar'; import Toolbar from './Toolbar';
import styles_ from './styles'; import styles_ from './styles';
import { RenderedBody, defaultRenderedBody } from './utils/types'; import { RenderedBody, defaultRenderedBody } from './utils/types';
@ -87,6 +87,7 @@ function AceEditor(props: NoteBodyEditorProps, ref: any) {
const editorRef = useRef(null); const editorRef = useRef(null);
editorRef.current = editor; editorRef.current = editor;
const rootRef = useRef(null);
const indentOrig = useRef<any>(null); const indentOrig = useRef<any>(null);
const webviewRef = useRef(null); const webviewRef = useRef(null);
const props_onChangeRef = useRef<Function>(null); const props_onChangeRef = useRef<Function>(null);
@ -100,6 +101,8 @@ function AceEditor(props: NoteBodyEditorProps, ref: any) {
const selectionRangeRef = useRef(null); const selectionRangeRef = useRef(null);
selectionRangeRef.current = useSelectionRange(editor); selectionRangeRef.current = useSelectionRange(editor);
const rootWidth = useRootWidth({ rootRef });
const { resetScroll, setEditorPercentScroll, setViewerPercentScroll, editor_scroll } = useScrollHandler(editor, webviewRef, props.onScroll); const { resetScroll, setEditorPercentScroll, setViewerPercentScroll, editor_scroll } = useScrollHandler(editor, webviewRef, props.onScroll);
const aceEditor_change = useCallback((newBody: string) => { const aceEditor_change = useCallback((newBody: string) => {
@ -591,11 +594,18 @@ function AceEditor(props: NoteBodyEditorProps, ref: any) {
// Note: Ideally we'd set the display to "none" to take the editor out // Note: Ideally we'd set the display to "none" to take the editor out
// of the DOM but if we do that, certain things won't work, in particular // of the DOM but if we do that, certain things won't work, in particular
// things related to scroll, which are based on the editor. // things related to scroll, which are based on the editor.
output.width = 1;
output.maxWidth = 1; // Note that the below hack doesn't work and causes a bug in this case:
output.position = 'absolute'; // - Put Ace Editor in viewer-only mode
output.left = -100000; // - Go to WYSIWYG editor
// - Create new to-do - set title only
// - Switch to Code View
// - Switch layout and type something
// => Text editor layout is broken and text is off-screen
output.display = 'none'; // Seems to work fine since the refactoring
} }
return output; return output;
}, [styles.cellEditor, props.visiblePanes]); }, [styles.cellEditor, props.visiblePanes]);
@ -614,6 +624,12 @@ function AceEditor(props: NoteBodyEditorProps, ref: any) {
}, [styles.cellViewer, props.visiblePanes]); }, [styles.cellViewer, props.visiblePanes]);
function renderEditor() { function renderEditor() {
// Need to hard-code the editor width, otherwise various bugs pops up
let width = 0;
if (props.visiblePanes.includes('editor')) {
width = !props.visiblePanes.includes('viewer') ? rootWidth : Math.floor(rootWidth / 2);
}
return ( return (
<div style={cellEditorStyle}> <div style={cellEditorStyle}>
<AceEditorReact <AceEditorReact
@ -621,6 +637,7 @@ function AceEditor(props: NoteBodyEditorProps, ref: any) {
mode={props.contentMarkupLanguage === Note.MARKUP_LANGUAGE_HTML ? 'text' : 'markdown'} mode={props.contentMarkupLanguage === Note.MARKUP_LANGUAGE_HTML ? 'text' : 'markdown'}
theme={styles.editor.editorTheme} theme={styles.editor.editorTheme}
style={styles.editor} style={styles.editor}
width={`${width}px`}
fontSize={styles.editor.fontSize} fontSize={styles.editor.fontSize}
showGutter={false} showGutter={false}
readOnly={props.visiblePanes.indexOf('editor') < 0} readOnly={props.visiblePanes.indexOf('editor') < 0}
@ -663,7 +680,7 @@ function AceEditor(props: NoteBodyEditorProps, ref: any) {
} }
return ( return (
<div style={styles.root}> <div style={styles.root} ref={rootRef}>
<div style={styles.rowToolbar}> <div style={styles.rowToolbar}>
<Toolbar <Toolbar
theme={props.theme} theme={props.theme}

13
ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/index.ts
View File

@ -239,3 +239,16 @@ export function useScrollHandler(editor: any, webviewRef: any, onScroll: Functio
return { resetScroll, setEditorPercentScroll, setViewerPercentScroll, editor_scroll }; return { resetScroll, setEditorPercentScroll, setViewerPercentScroll, editor_scroll };
} }
export function useRootWidth(dependencies:any) {
const { rootRef } = dependencies;
const [rootWidth, setRootWidth] = useState(0);
useEffect(() => {
if (!rootRef.current) return;
setRootWidth(rootRef.current.offsetWidth);
});
return rootWidth;
}