github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-12-23 23:41:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

Calculate overflow when languageName or visual change (#13872)

Browse source 
GitOrigin-RevId: f2d200d0d34e810688defe78b8143829f095df9f
This commit is contained in:
Alf Eaton 2023-07-18 11:21:56 +01:00 committed by Copybot
parent b284434ad2
commit 930cec2189
3 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
services/web/frontend/js/features/pdf-preview/components/pdf-log-entry-raw-content.js
View file

@ -13,7 +13,7 @@ export default function PdfLogEntryRawContent({
const [expanded, setExpanded] = useState(false)
const [needsExpander, setNeedsExpander] = useState(false)
const containerRef = useResizeObserver(element => {
const { elementRef } = useResizeObserver(element => {
setNeedsExpander(element.scrollHeight > collapsedSize)
})
@ -27,7 +27,7 @@ export default function PdfLogEntryRawContent({
height: expanded || !needsExpander ? 'auto' : collapsedSize,
}}
>
<pre className="log-entry-content-raw" ref={containerRef}>
<pre className="log-entry-content-raw" ref={elementRef}>
{rawContent.trim()}
</pre>
</div>

15
services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx
View file

@ -1,4 +1,4 @@
import { memo, useCallback, useRef, useState } from 'react'
import { memo, useCallback, useEffect, useRef, useState } from 'react'
import { createPortal } from 'react-dom'
import {
useCodeMirrorStateContext,
@ -87,8 +87,15 @@ const Toolbar = memo(function Toolbar() {
[setOverflowOpen]
)
// build when the container resizes
const resizeRef = useResizeObserver(buildOverflow)
// calculate overflow when the container resizes
const { elementRef, resizeRef } = useResizeObserver(buildOverflow)
// calculate overflow when `languageName` or `visual` change
useEffect(() => {
if (resizeRef.current) {
buildOverflow(resizeRef.current.element)
}
}, [buildOverflow, languageName, resizeRef, visual])
const toggleToolbar = useCallback(() => {
setCollapsed(value => !value)
@ -99,7 +106,7 @@ const Toolbar = memo(function Toolbar() {
}
return (
<div className="ol-cm-toolbar toolbar-editor" ref={resizeRef}>
<div className="ol-cm-toolbar toolbar-editor" ref={elementRef}>
{showSourceToolbar && <EditorSwitch />}
<ToolbarItems state={state} languageName={languageName} visual={visual} />
<div

2
services/web/frontend/js/shared/hooks/use-resize-observer.ts
View file

@ -35,5 +35,5 @@ export const useResizeObserver = (handleResize: (element: Element) => void) => {
}
}, [])
return elementRef
return { elementRef, resizeRef }
}