From 1995a3fb190338687c236581d4eaf4ddcfa98f5d Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Thu, 15 Dec 2022 21:03:47 -0500
Subject: [PATCH] Dynamic bottom padding

---
 app/components/ClickablePadding.ts        | 8 ++++----
 app/components/Editor.tsx                 | 6 +++---
 app/scenes/Document/components/Editor.tsx | 5 +++--
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/components/ClickablePadding.ts b/app/components/ClickablePadding.ts
index 4d5274f61..f6d681b2a 100644
--- a/app/components/ClickablePadding.ts
+++ b/app/components/ClickablePadding.ts
@@ -1,9 +1,9 @@
 import styled from "styled-components";
 
-const ClickablePadding = styled.div<{ grow?: boolean }>`
-  min-height: 50vh;
-  cursor: ${({ onClick }) => (onClick ? "text" : "default")};
-  ${({ grow }) => grow && `flex-grow: 100;`};
+const ClickablePadding = styled.div<{ grow?: boolean; minHeight?: string }>`
+  min-height: ${(props) => props.minHeight || "50vh"};
+  flex-grow: 100;
+  cursor: text;
 `;
 
 export default ClickablePadding;
diff --git a/app/components/Editor.tsx b/app/components/Editor.tsx
index 565e6f233..cd85e1933 100644
--- a/app/components/Editor.tsx
+++ b/app/components/Editor.tsx
@@ -50,10 +50,10 @@ export type Props = Optional<
 > & {
   shareId?: string | undefined;
   embedsDisabled?: boolean;
-  grow?: boolean;
   onHeadingsChange?: (headings: Heading[]) => void;
   onSynced?: () => Promise<void>;
   onPublish?: (event: React.MouseEvent) => any;
+  bottomPadding?: string;
 };
 
 function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
@@ -301,12 +301,12 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
           placeholder={props.placeholder || ""}
           defaultValue={props.defaultValue || ""}
         />
-        {props.grow && !props.readOnly && (
+        {props.bottomPadding && !props.readOnly && (
           <ClickablePadding
             onClick={focusAtEnd}
             onDrop={handleDrop}
             onDragOver={handleDragOver}
-            grow
+            minHeight={props.bottomPadding}
           />
         )}
         {activeLinkEvent && !shareId && (
diff --git a/app/scenes/Document/components/Editor.tsx b/app/scenes/Document/components/Editor.tsx
index f0cf9c5d7..34f68146a 100644
--- a/app/scenes/Document/components/Editor.tsx
+++ b/app/scenes/Document/components/Editor.tsx
@@ -51,6 +51,7 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
     ...rest
   } = props;
 
+  const childRef = React.useRef<HTMLDivElement>(null);
   const focusAtStart = React.useCallback(() => {
     if (ref.current) {
       ref.current.focusAtStart();
@@ -115,10 +116,10 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
         readOnly={readOnly}
         shareId={shareId}
         extensions={fullPackage}
-        grow
+        bottomPadding={`calc(50vh - ${childRef.current?.offsetHeight || 0}px)`}
         {...rest}
       />
-      {children}
+      <div ref={childRef}>{children}</div>
     </Flex>
   );
 }