From 7a9ec627ee63f6640be9bfecac5fe06170319997 Mon Sep 17 00:00:00 2001 From: Caleb John Date: Sun, 19 Sep 2021 03:36:23 -0700 Subject: [PATCH] Desktop: Resolves #5233: Fire resize event whenever the layout changes (#5344) * 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. --- .../gui/MainScreen/commands/toggleNoteList.ts | 5 +++++ .../gui/MainScreen/commands/toggleSideBar.ts | 5 +++++ .../NoteBody/CodeMirror/CodeMirror.tsx | 5 +++-- .../NoteBody/CodeMirror/utils/index.ts | 20 +------------------ 4 files changed, 14 insertions(+), 21 deletions(-) diff --git a/packages/app-desktop/gui/MainScreen/commands/toggleNoteList.ts b/packages/app-desktop/gui/MainScreen/commands/toggleNoteList.ts index c7d169c1d..773063424 100644 --- a/packages/app-desktop/gui/MainScreen/commands/toggleNoteList.ts +++ b/packages/app-desktop/gui/MainScreen/commands/toggleNoteList.ts @@ -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, diff --git a/packages/app-desktop/gui/MainScreen/commands/toggleSideBar.ts b/packages/app-desktop/gui/MainScreen/commands/toggleSideBar.ts index 1079949b8..698896ee1 100644 --- a/packages/app-desktop/gui/MainScreen/commands/toggleSideBar.ts +++ b/packages/app-desktop/gui/MainScreen/commands/toggleSideBar.ts @@ -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, diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx index fca3a2387..edb28bfa3 100644 --- a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx +++ b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx @@ -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(null); props_onChangeRef.current = props.onChange; - const rootSize = useRootSize({ rootRef }); + const rootSize = useElementSize(rootRef); usePluginServiceRegistration(ref); diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/index.ts b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/index.ts index 3918c04fd..8767410f5 100644 --- a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/index.ts +++ b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/index.ts @@ -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; -}