mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-21 10:45:20 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2022-04-14 21:41:48 +02:00
parent 3266562ac2
commit 0c873b0f97
4 changed files with 62 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/components/markdown-renderer/utils/calculate-line-marker-positions.ts
View file

@ -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)
}

23
src/components/render-page/markdown-document.tsx
View file

@ -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 containerWidth = internalDocumentRenderPaneSize.width ?? 0
const [internalDocumentRenderPaneSize, setInternalDocumentRenderPaneSize] = useState<DOMRectReadOnly>()
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,