fix: auto grow textarea

2023-04-08 02:36:02 +08:00 · 2023-04-08 02:36:02 +08:00 · 13035ecb0d
commit 13035ecb0d
parent d6b2cf8bcb
5 changed files with 83 additions and 149 deletions
--- a/app/calcTextareaHeight.ts
+++ b/app/calcTextareaHeight.ts
@ -1,118 +0,0 @@
-/**
- * fork from element-plus
- * https://github.com/element-plus/element-plus/blob/dev/packages/components/input/src/utils.ts
- */
-
-import { isFirefox } from "./utils";
-
-let hiddenTextarea: HTMLTextAreaElement | undefined = undefined;
-
-const HIDDEN_STYLE = `
-  height:0 !important;
-  visibility:hidden !important;
-  ${isFirefox() ? "" : "overflow:hidden !important;"}
-  position:absolute !important;
-  z-index:-1000 !important;
-  top:0 !important;
-  right:0 !important;
-`;
-
-const CONTEXT_STYLE = [
-  "letter-spacing",
-  "line-height",
-  "padding-top",
-  "padding-bottom",
-  "font-family",
-  "font-weight",
-  "font-size",
-  "text-rendering",
-  "text-transform",
-  "width",
-  "text-indent",
-  "padding-left",
-  "padding-right",
-  "border-width",
-  "box-sizing",
-];
-
-type NodeStyle = {
-  contextStyle: string;
-  boxSizing: string;
-  paddingSize: number;
-  borderSize: number;
-};
-
-type TextAreaHeight = {
-  height: string;
-  minHeight?: string;
-};
-
-function calculateNodeStyling(targetElement: Element): NodeStyle {
-  const style = window.getComputedStyle(targetElement);
-
-  const boxSizing = style.getPropertyValue("box-sizing");
-
-  const paddingSize =
-    Number.parseFloat(style.getPropertyValue("padding-bottom")) +
-    Number.parseFloat(style.getPropertyValue("padding-top"));
-
-  const borderSize =
-    Number.parseFloat(style.getPropertyValue("border-bottom-width")) +
-    Number.parseFloat(style.getPropertyValue("border-top-width"));
-
-  const contextStyle = CONTEXT_STYLE.map(
-    (name) => `${name}:${style.getPropertyValue(name)}`,
-  ).join(";");
-
-  return { contextStyle, paddingSize, borderSize, boxSizing };
-}
-
-export default function calcTextareaHeight(
-  targetElement: HTMLTextAreaElement,
-  minRows: number = 2,
-  maxRows?: number,
-): TextAreaHeight {
-  if (!hiddenTextarea) {
-    hiddenTextarea = document.createElement("textarea");
-    document.body.appendChild(hiddenTextarea);
-  }
-
-  const { paddingSize, borderSize, boxSizing, contextStyle } =
-    calculateNodeStyling(targetElement);
-
-  hiddenTextarea.setAttribute("style", `${contextStyle};${HIDDEN_STYLE}`);
-  hiddenTextarea.value = targetElement.value || targetElement.placeholder || "";
-
-  let height = hiddenTextarea.scrollHeight;
-  const result = {} as TextAreaHeight;
-
-  if (boxSizing === "border-box") {
-    height = height + borderSize;
-  } else if (boxSizing === "content-box") {
-    height = height - paddingSize;
-  }
-
-  hiddenTextarea.value = "";
-  const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
-
-  if (minRows) {
-    let minHeight = singleRowHeight * minRows;
-    if (boxSizing === "border-box") {
-      minHeight = minHeight + paddingSize + borderSize;
-    }
-    height = Math.max(minHeight, height);
-    result.minHeight = `${minHeight}px`;
-  }
-  if (maxRows) {
-    let maxHeight = singleRowHeight * maxRows;
-    if (boxSizing === "border-box") {
-      maxHeight = maxHeight + paddingSize + borderSize;
-    }
-    height = Math.min(maxHeight, height);
-  }
-  result.height = `${height}px`;
-  hiddenTextarea.parentNode?.removeChild(hiddenTextarea);
-  hiddenTextarea = undefined;
-
-  return result;
-}
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@ -1,4 +1,4 @@
-import { useDebouncedCallback } from "use-debounce";
+import { useDebounce, useDebouncedCallback } from "use-debounce";
 import { memo, useState, useRef, useEffect, useLayoutEffect } from "react";

 import SendWhiteIcon from "../icons/send-white.svg";
@ -27,6 +27,7 @@ import {
  getEmojiUrl,
  isMobileScreen,
  selectOrCopy,
+  autoGrowTextArea,
 } from "../utils";

 import dynamic from "next/dynamic";
@ -39,9 +40,7 @@ import { IconButton } from "./button";
 import styles from "./home.module.scss";
 import chatStyle from "./chat.module.scss";

-import { Input, Modal, showModal, showToast } from "./ui-lib";
-
-import calcTextareaHeight from "../calcTextareaHeight";
+import { Input, Modal, showModal } from "./ui-lib";

 const Markdown = dynamic(
  async () => memo((await import("./markdown")).Markdown),
@ -333,10 +332,6 @@ function useScrollToBottom() {
 export function Chat(props: {
  showSideBar?: () => void;
  sideBarShowing?: boolean;
-  autoSize: {
-    minRows: number;
-    maxRows?: number;
-  };
 }) {
  type RenderMessage = Message & { preview?: boolean };

@ -354,7 +349,6 @@ export function Chat(props: {
  const { submitKey, shouldSubmit } = useSubmitHandler();
  const { scrollRef, setAutoScroll } = useScrollToBottom();
  const [hitBottom, setHitBottom] = useState(false);
-  const [textareaStyle, setTextareaStyle] = useState({});

  const onChatBodyScroll = (e: HTMLElement) => {
    const isTouchBottom = e.scrollTop + e.clientHeight >= e.scrollHeight - 20;
@ -388,13 +382,26 @@ export function Chat(props: {
    dom.scrollTop = dom.scrollHeight - dom.offsetHeight + paddingBottomNum;
  };

-  // textarea has an adaptive height
-  const resizeTextarea = () => {
-    const dom = inputRef.current;
-    if (!dom) return;
-    const { minRows, maxRows } = props.autoSize;
-    setTextareaStyle(calcTextareaHeight(dom, minRows, maxRows));
-  };
+  // auto grow input
+  const [inputRows, setInputRows] = useState(2);
+  const measure = useDebouncedCallback(
+    () => {
+      const rows = inputRef.current ? autoGrowTextArea(inputRef.current) : 1;
+      const inputRows = Math.min(
+        5,
+        Math.max(2 + Number(!isMobileScreen()), rows),
+      );
+      setInputRows(inputRows);
+    },
+    100,
+    {
+      leading: true,
+      trailing: true,
+    },
+  );
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(measure, [userInput]);

  // only search prompts when user input is short
  const SEARCH_TEXT_LIMIT = 30;
@ -527,12 +534,6 @@ export function Chat(props: {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

-  // Textarea Adaptive height
-  useEffect(() => {
-    resizeTextarea();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [userInput]);
-
  return (
    <div className={styles.chat} key={session.id}>
      <div className={styles["window-header"]}>
@ -688,7 +689,6 @@ export function Chat(props: {
          <textarea
            ref={inputRef}
            className={styles["chat-input"]}
-            style={textareaStyle}
            placeholder={Locale.Chat.Input(submitKey)}
            onInput={(e) => onInput(e.currentTarget.value)}
            value={userInput}
@ -699,6 +699,7 @@ export function Chat(props: {
              setTimeout(() => setPromptHints([]), 500);
            }}
            autoFocus={!props?.sideBarShowing}
+            rows={inputRows}
          />
          <IconButton
            icon={<SendWhiteIcon />}
--- a/app/components/home.module.scss
+++ b/app/components/home.module.scss
@ -411,12 +411,6 @@
  outline: none;
 }

-@media only screen and (max-width: 600px) {
-  .chat-input {
-    font-size: 16px;
-  }
-}
-
 .chat-input:focus {
  border: 1px solid var(--primary);
 }
@ -427,7 +421,17 @@

  position: absolute;
  right: 30px;
+  bottom: 32px;
+}
+
+@media only screen and (max-width: 600px) {
+  .chat-input {
+    font-size: 16px;
+  }
+
+  .chat-input-send {
    bottom: 30px;
+  }
 }

 .export-content {
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@ -189,7 +189,6 @@ function _Home() {
            key="chat"
            showSideBar={() => setShowSideBar(true)}
            sideBarShowing={showSideBar}
-            autoSize={{ minRows: 2, maxRows: 6 }}
          />
        )}
      </div>
--- a/app/utils.ts
+++ b/app/utils.ts
@ -97,3 +97,51 @@ export function getCurrentVersion() {
 export function getEmojiUrl(unified: string, style: EmojiStyle) {
  return `https://cdn.staticfile.org/emoji-datasource-apple/14.0.0/img/${style}/64/${unified}.png`;
 }
+
+function getDomContentWidth(dom: HTMLElement) {
+  const style = window.getComputedStyle(dom);
+  const paddingWidth =
+    parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+  const width = dom.clientWidth - paddingWidth;
+  return width;
+}
+
+function getOrCreateMeasureDom(id: string, init?: (dom: HTMLElement) => void) {
+  let dom = document.getElementById(id);
+
+  if (!dom) {
+    dom = document.createElement("span");
+    dom.style.position = "absolute";
+    dom.style.wordBreak = "break-word";
+    dom.style.fontSize = "14px";
+    dom.style.transform = "translateY(-200vh)";
+    dom.style.pointerEvents = "none";
+    dom.style.opacity = "0";
+    dom.id = id;
+    document.body.appendChild(dom);
+    init?.(dom);
+  }
+
+  return dom!;
+}
+
+export function autoGrowTextArea(dom: HTMLTextAreaElement) {
+  const measureDom = getOrCreateMeasureDom("__measure");
+  const singleLineDom = getOrCreateMeasureDom("__single_measure", (dom) => {
+    dom.innerText = "TEXT_FOR_MEASURE";
+  });
+
+  const width = getDomContentWidth(dom);
+  measureDom.style.width = width + "px";
+  measureDom.innerHTML = dom.value.trim().length > 0 ? dom.value : "1";
+
+  const lineWrapCount = Math.max(0, dom.value.split("\n").length - 1);
+  const height = parseFloat(window.getComputedStyle(measureDom).height);
+  const singleLineHeight = parseFloat(
+    window.getComputedStyle(singleLineDom).height,
+  );
+
+  const rows = Math.round(height / singleLineHeight) + lineWrapCount;
+
+  return rows;
+}