Fix velopert#67

Author: velopert

src/components/write/AddLink.tsx

@@ -55,7 +55,8 @@ const AddLinkBlock = styled.div`
 
 interface AddLinkProps {
   left: number;
-  top: number;
+  top: number | null;
+  bottom: number | null;
   stickToRight?: boolean;
   onConfirm: (link: string) => void;
   onClose: () => void;
@@ -68,6 +69,7 @@ const { useCallback, useRef, useEffect } = React;
 const AddLink: React.FC<AddLinkProps> = ({
   left,
   top,
+  bottom,
   stickToRight,
   onConfirm,
   onClose,
@@ -92,7 +94,8 @@ const AddLink: React.FC<AddLinkProps> = ({
       <AddLinkBlock
         style={{
           left: stickToRight ? 'initial' : left,
-          top,
+          top: top || 'initial',
+          bottom: bottom || 'initial',
           right: stickToRight ? '3rem' : 'initial',
         }}
       >

src/components/write/WriteMarkdownEditor.tsx

@@ -34,7 +34,8 @@ export interface MarkdownEditorProps {
 type MarkdownEditorState = {
   shadow: boolean;
   addLink: {
-    top: number;
+    top: number | null;
+    bottom: number | null;
     left: number;
     visible: boolean;
     stickToRight: boolean;
@@ -235,6 +236,7 @@ export default class WriteMarkdownEditor extends React.Component<
     shadow: false,
     addLink: {
       top: 0,
+      bottom: 0,
       left: 0,
       visible: false,
       stickToRight: false,
@@ -404,15 +406,20 @@ export default class WriteMarkdownEditor extends React.Component<
     const cursorPos = this.codemirror.cursorCoords(cursor);
     if (!this.block.current) return;
     const stickToRight = cursorPos.left > this.block.current.clientWidth - 341;
-
+    const calculatedTop =
+      this.block.current.scrollTop +
+      cursorPos.top +
+      this.codemirror.defaultTextHeight() / 2 +
+      1;
+
+    const isAtBottom = calculatedTop + 173 > this.block.current?.clientHeight;
+    const pos = isAtBottom
+      ? { top: null, bottom: 64 }
+      : { top: calculatedTop, bottom: null };
     this.setState({
       addLink: {
         visible: true,
-        top:
-          this.block.current.scrollTop +
-          cursorPos.top +
-          this.codemirror.defaultTextHeight() / 2 +
-          1,
+        ...pos,
         left: cursorPos.left,
         stickToRight,
       },
@@ -838,6 +845,7 @@ ${selected}
                 defaultValue=""
                 left={addLink.left}
                 top={addLink.top}
+                bottom={addLink.bottom}
                 stickToRight={addLink.stickToRight}
                 onConfirm={this.handleConfirmAddLink}
                 onClose={this.handleCancelAddLink}