Dynamic bottom padding

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;

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 && (

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