From 0c873b0f9745dbc41aba6ddf681730fa5b3b6409 Mon Sep 17 00:00:00 2001 From: Tilman Vatteroth Date: Thu, 14 Apr 2022 21:41:48 +0200 Subject: [PATCH] Replace "use-resize-observer" with "@react-hook/resize-observer" Signed-off-by: Tilman Vatteroth --- package.json | 2 +- .../utils/calculate-line-marker-positions.ts | 7 +-- .../render-page/markdown-document.tsx | 23 ++++--- yarn.lock | 61 +++++++++++++++---- 4 files changed, 62 insertions(+), 31 deletions(-) diff --git a/package.json b/package.json index 008479c9e..a2019c9cf 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "@hedgedoc/markdown-it-image-size": "1.0.3", "@hedgedoc/markdown-it-task-lists": "1.0.3", "@matejmazur/react-katex": "3.1.3", + "@react-hook/resize-observer": "1.2.5", "@redux-devtools/core": "3.11.0", "@svgr/webpack": "6.2.1", "@uiw/react-codemirror": "4.5.3", @@ -103,7 +104,6 @@ "sass": "1.50.0", "sharp": "0.30.3", "twemoji-colr-font": "0.0.4", - "use-resize-observer": "8.0.0", "uuid": "8.3.2", "vega": "5.22.1", "vega-embed": "6.20.8", diff --git a/src/components/markdown-renderer/utils/calculate-line-marker-positions.ts b/src/components/markdown-renderer/utils/calculate-line-marker-positions.ts index 8fc09d2f8..a54a0b655 100644 --- a/src/components/markdown-renderer/utils/calculate-line-marker-positions.ts +++ b/src/components/markdown-renderer/utils/calculate-line-marker-positions.ts @@ -7,9 +7,9 @@ import equal from 'fast-deep-equal' import type { RefObject } from 'react' import { useCallback, useEffect, useRef } from 'react' -import useResizeObserver from 'use-resize-observer' import type { LineMarkerPosition } from '../markdown-extension/linemarker/types' import type { LineMarkers } from '../markdown-extension/linemarker/add-line-marker-markdown-it-plugin' +import useResizeObserver from '@react-hook/resize-observer' export const calculateLineMarkerPositions = ( documentElement: HTMLDivElement, @@ -72,8 +72,5 @@ export const useCalculateLineMarkerPosition = ( calculateNewLineMarkerPositions() }, [calculateNewLineMarkerPositions]) - useResizeObserver({ - ref: documentElement, - onResize: () => calculateNewLineMarkerPositions() - }) + useResizeObserver(documentElement, calculateNewLineMarkerPositions) } diff --git a/src/components/render-page/markdown-document.tsx b/src/components/render-page/markdown-document.tsx index 52be031cd..c7b936f4e 100644 --- a/src/components/render-page/markdown-document.tsx +++ b/src/components/render-page/markdown-document.tsx @@ -7,7 +7,7 @@ import type { TocAst } from 'markdown-it-toc-done-right' import type { MutableRefObject } from 'react' import React, { useEffect, useMemo, useRef, useState } from 'react' -import useResizeObserver from 'use-resize-observer' +import useResizeObserver from '@react-hook/resize-observer' import { YamlArrayDeprecationAlert } from '../editor-page/renderer-pane/yaml-array-deprecation-alert' import { useDocumentSyncScrolling } from './hooks/sync-scroll/use-document-sync-scrolling' import type { ScrollProps } from '../editor-page/synced-scroll/scroll-props' @@ -53,23 +53,22 @@ export const MarkdownDocument: React.FC = ({ frontmatterInfo }) => { const rendererRef = useRef(null) - const rendererSize = useResizeObserver({ ref: rendererRef.current }) + const [rendererSize, setRendererSize] = useState() + useResizeObserver(rendererRef.current, (entry) => { + setRendererSize(entry.contentRect) + }) + useEffect(() => onHeightChange?.((rendererSize?.height ?? 0) + 1), [rendererSize, onHeightChange]) const internalDocumentRenderPaneRef = useRef(null) - const internalDocumentRenderPaneSize = useResizeObserver({ ref: internalDocumentRenderPaneRef.current }) - const containerWidth = internalDocumentRenderPaneSize.width ?? 0 + const [internalDocumentRenderPaneSize, setInternalDocumentRenderPaneSize] = useState() + useResizeObserver(internalDocumentRenderPaneRef.current, (entry) => + setInternalDocumentRenderPaneSize(entry.contentRect) + ) + const containerWidth = internalDocumentRenderPaneSize?.width ?? 0 const [tocAst, setTocAst] = useState() - const newlinesAreBreaks = useApplicationState((state) => state.noteDetails.frontmatter.newlinesAreBreaks) - useEffect(() => { - if (!onHeightChange) { - return - } - onHeightChange(rendererSize.height ? rendererSize.height + 1 : 0) - }, [rendererSize.height, onHeightChange]) - const contentLineCount = useMemo(() => markdownContentLines.length, [markdownContentLines]) const [onLineMarkerPositionChanged, onUserScroll] = useDocumentSyncScrolling( internalDocumentRenderPaneRef, diff --git a/yarn.lock b/yarn.lock index 07343e3c5..8cc6f3e86 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2161,6 +2161,7 @@ __metadata: "@hedgedoc/markdown-it-task-lists": 1.0.3 "@matejmazur/react-katex": 3.1.3 "@next/bundle-analyzer": 12.1.4 + "@react-hook/resize-observer": 1.2.5 "@redux-devtools/core": 3.11.0 "@svgr/webpack": 6.2.1 "@testing-library/cypress": 8.0.2 @@ -2261,7 +2262,6 @@ __metadata: ts-node: 10.7.0 twemoji-colr-font: 0.0.4 typescript: 4.6.3 - use-resize-observer: 8.0.0 uuid: 8.3.2 vega: 5.22.1 vega-embed: 6.20.8 @@ -3492,6 +3492,39 @@ __metadata: languageName: node linkType: hard +"@react-hook/latest@npm:^1.0.2": + version: 1.0.3 + resolution: "@react-hook/latest@npm:1.0.3" + peerDependencies: + react: ">=16.8" + checksum: 2408c9cd35c5cfa7697b6da3bc5eebef254a932ade70955074c474f23be7dd3e2f81bbba12edcc9208bd0f89c6ed366d6b11d4f6d7b1052877a0bac8f74afad4 + languageName: node + linkType: hard + +"@react-hook/passive-layout-effect@npm:^1.2.0": + version: 1.2.1 + resolution: "@react-hook/passive-layout-effect@npm:1.2.1" + peerDependencies: + react: ">=16.8" + checksum: 217cb8aa90fb8e677672319a9a466d7752890cf4357c76df000b207696e9cc717cf2ee88080671cc9dae238a82f92093ab4f61ab2f6032d2a8db958fc7d99b5d + languageName: node + linkType: hard + +"@react-hook/resize-observer@npm:1.2.5": + version: 1.2.5 + resolution: "@react-hook/resize-observer@npm:1.2.5" + dependencies: + "@juggle/resize-observer": ^3.3.1 + "@react-hook/latest": ^1.0.2 + "@react-hook/passive-layout-effect": ^1.2.0 + "@types/raf-schd": ^4.0.0 + raf-schd: ^4.0.2 + peerDependencies: + react: ">=16.8" + checksum: a2f3b333e344adb3d7a4cfd2bc77fd75054b07063fba706d57bef0c497650c3e82038eafb64fa4148c08527e8b0a34f2f70392da1700a7a0d9676ee8ba795c16 + languageName: node + linkType: hard + "@redux-devtools/core@npm:3.11.0": version: 3.11.0 resolution: "@redux-devtools/core@npm:3.11.0" @@ -4756,6 +4789,13 @@ __metadata: languageName: node linkType: hard +"@types/raf-schd@npm:^4.0.0": + version: 4.0.1 + resolution: "@types/raf-schd@npm:4.0.1" + checksum: 0babaa85541aadc6e5f8aa64ec79cd68bf67ea56abb7610c8daf3ca5f4b1a75d12e4e147a0b5434938a4031650ebddc733021ec4e7db4f11f7955390ec32c917 + languageName: node + linkType: hard + "@types/react-bootstrap-typeahead@npm:5.1.8": version: 5.1.8 resolution: "@types/react-bootstrap-typeahead@npm:5.1.8" @@ -17082,6 +17122,13 @@ __metadata: languageName: node linkType: hard +"raf-schd@npm:^4.0.2": + version: 4.0.3 + resolution: "raf-schd@npm:4.0.3" + checksum: 45514041c5ad31fa96aef3bb3c572a843b92da2f2cd1cb4a47c9ad58e48761d3a4126e18daa32b2bfa0bc2551a42d8f324a0e40e536cb656969929602b4e8b58 + languageName: node + linkType: hard + "random-bytes@npm:~1.0.0": version: 1.0.0 resolution: "random-bytes@npm:1.0.0" @@ -20264,18 +20311,6 @@ __metadata: languageName: node linkType: hard -"use-resize-observer@npm:8.0.0": - version: 8.0.0 - resolution: "use-resize-observer@npm:8.0.0" - dependencies: - "@juggle/resize-observer": ^3.3.1 - peerDependencies: - react: ">=16.8.0" - react-dom: ">=16.8.0" - checksum: 944ce47811f6056b481ce2f1550c2881bd5c25838cae2e0fb0bc0ed4aad7b5f2e55dcc0fc52107998ecfb602446465f94b2e728d3f3259fe8e6d4a3031cfb24a - languageName: node - linkType: hard - "use@npm:^3.1.0": version: 3.1.1 resolution: "use@npm:3.1.1"