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

Desktop: Resolves #5233: Fire resize event whenever the layout changes (#5344)

Browse Source 
* Fire resize event whenever the layout changes

This solves an issue where the markdown editor was changing size
physically, but the refresh function wasn't being called so the
editor would lose track of it's size and place the cursor wrongly.
The editor was able to correctly resize when the window resize event
was fired, but this didn't happen when the sidebars were toggled.
The solution implemented here is to hook in to the function where
layout props are changed, and emit a resize event there.
This means that anytime the layout changes (whether or not it affects
sizing), the resize event will be fired.
This commit is contained in:
Caleb John 2021-09-19 03:36:23 -07:00 committed by GitHub
parent 2d72d1435e
commit 7a9ec627ee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 14 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/app-desktop/gui/MainScreen/commands/toggleNoteList.ts
View File

@ -19,6 +19,11 @@ export const runtime = (): CommandRuntime => {
visible: !layoutItemProp(layout, 'noteList', 'visible'),
});
// Toggling the sidebar will affect the size of most other on-screen components.
// Dispatching a window resize event is a bit of a hack, but it ensures that any
// component that watches for resizes will be accurately notified
window.dispatchEvent(new Event('resize'));
context.dispatch({
type: 'MAIN_LAYOUT_SET',
value: newLayout,

5
packages/app-desktop/gui/MainScreen/commands/toggleSideBar.ts
View File

@ -19,6 +19,11 @@ export const runtime = (): CommandRuntime => {
visible: !layoutItemProp(layout, 'sideBar', 'visible'),
});
// Toggling the sidebar will affect the size of most other on-screen components.
// Dispatching a window resize event is a bit of a hack, but it ensures that any
// component that watches for resizes will be accurately notified
window.dispatchEvent(new Event('resize'));
context.dispatch({
type: 'MAIN_LAYOUT_SET',
value: newLayout,

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

@ -6,7 +6,8 @@ import { EditorCommand, NoteBodyEditorProps } from '../../utils/types';
import { commandAttachFileToBody, handlePasteEvent } from '../../utils/resourceHandling';
import { ScrollOptions, ScrollOptionTypes } from '../../utils/types';
import { CommandValue } from '../../utils/types';
import { useScrollHandler, usePrevious, cursorPositionToTextOffset, useRootSize } from './utils';
import { useScrollHandler, usePrevious, cursorPositionToTextOffset } from './utils';
import useElementSize from '@joplin/lib/hooks/useElementSize';
import Toolbar from './Toolbar';
import styles_ from './styles';
import { RenderedBody, defaultRenderedBody } from './utils/types';
@ -59,7 +60,7 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
const props_onChangeRef = useRef<Function>(null);
props_onChangeRef.current = props.onChange;
const rootSize = useRootSize({ rootRef });
const rootSize = useElementSize(rootRef);
usePluginServiceRegistration(ref);

20
packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/index.ts
View File

@ -1,4 +1,4 @@
import { useEffect, useCallback, useRef, useState } from 'react';
import { useEffect, useCallback, useRef } from 'react';
import shim from '@joplin/lib/shim';
export function cursorPositionToTextOffset(cursorPos: any, body: string) {
@ -89,21 +89,3 @@ export function useScrollHandler(editorRef: any, webviewRef: any, onScroll: Func
return { resetScroll, setEditorPercentScroll, setViewerPercentScroll, editor_scroll };
}
export function useRootSize(dependencies: any) {
const { rootRef } = dependencies;
const [rootSize, setRootSize] = useState({ width: 0, height: 0 });
useEffect(() => {
if (!rootRef.current) return;
const { width, height } = rootRef.current.getBoundingClientRect();
if (rootSize.width !== width || rootSize.height !== height) {
setRootSize({ width: width, height: height });
}
});
return rootSize;
}