Replace "use-resize-observer" with "@react-hook/resize-observer"

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

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",

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({
+  useResizeObserver(documentElement, calculateNewLineMarkerPositions)
-    ref: documentElement,
-    onResize: () => calculateNewLineMarkerPositions()
-  })
 }

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<MarkdownDocumentProps> = ({
   frontmatterInfo
 }) => {
   const rendererRef = useRef<HTMLDivElement | null>(null)
-  const rendererSize = useResizeObserver({ ref: rendererRef.current })
+  const [rendererSize, setRendererSize] = useState<DOMRectReadOnly>()
+  useResizeObserver(rendererRef.current, (entry) => {
+    setRendererSize(entry.contentRect)
+  })
+  useEffect(() => onHeightChange?.((rendererSize?.height ?? 0) + 1), [rendererSize, onHeightChange])
 
   const internalDocumentRenderPaneRef = useRef<HTMLDivElement>(null)
-  const internalDocumentRenderPaneSize = useResizeObserver({ ref: internalDocumentRenderPaneRef.current })
+  const [internalDocumentRenderPaneSize, setInternalDocumentRenderPaneSize] = useState<DOMRectReadOnly>()
-  const containerWidth = internalDocumentRenderPaneSize.width ?? 0
+  useResizeObserver(internalDocumentRenderPaneRef.current, (entry) =>
+    setInternalDocumentRenderPaneSize(entry.contentRect)
+  )
 
+  const containerWidth = internalDocumentRenderPaneSize?.width ?? 0
   const [tocAst, setTocAst] = useState<TocAst>()
-
   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,

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"