yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Correctly resize full width images when table of contents is opened/closed (#5826)

Browse Source 
* stash

* restore

* Self review
This commit is contained in:
Tom Moor
2023-09-12 21:33:25 -04:00
committed by GitHub
parent d81db7e4f6
commit b80ee89588
6 changed files with 86 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/scenes/Document/components/Contents.tsx
View File

@@ -10,7 +10,9 @@ import useWindowScrollPosition from "~/hooks/useWindowScrollPosition";
const HEADING_OFFSET = 20;
type Props = {
/** Whether the document is rendering full width or not. */
isFullWidth: boolean;
/** The headings to render in the contents. */
headings: {
title: string;
level: number;
@@ -45,7 +47,7 @@ export default function Contents({ headings, isFullWidth }: Props) {
// calculate the minimum heading level and adjust all the headings to make
// that the top-most. This prevents the contents from being weirdly indented
// if all of the headings in the document are level 3, for example.
// if all of the headings in the document start at level 3, for example.
const minHeading = headings.reduce(
(memo, heading) => (heading.level < memo ? heading.level : memo),
Infinity

6
app/scenes/Document/components/Editor.tsx
View File

@@ -11,7 +11,6 @@ import { RefHandle } from "~/components/ContentEditable";
import Editor, { Props as EditorProps } from "~/components/Editor";
import Flex from "~/components/Flex";
import useFocusedComment from "~/hooks/useFocusedComment";
import useMobile from "~/hooks/useMobile";
import usePolicy from "~/hooks/usePolicy";
import useStores from "~/hooks/useStores";
import {
@@ -49,7 +48,6 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
const titleRef = React.useRef<RefHandle>(null);
const { t } = useTranslation();
const match = useRouteMatch();
const isMobile = useMobile();
const focusedComment = useFocusedComment();
const { ui, comments, auth } = useStores();
const { user, team } = auth;
@@ -205,8 +203,8 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
}
extensions={extensions}
editorStyle={{
padding: document.fullWidth || isMobile ? "0 32px" : "0 64px",
margin: document.fullWidth || isMobile ? "0 -32px" : "0 -64px",
padding: "0 32px",
margin: "0 -32px",
paddingBottom: `calc(50vh - ${
childRef.current?.offsetHeight || 0
}px)`,