UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: многострочный быстрый ввод задач

plane-src/apps/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx

@@ -5,24 +5,35 @@
  */
 
 import { observer } from "mobx-react";
+import type { KeyboardEvent } from "react";
 import { useTranslation } from "@plane/i18n";
 import type { TQuickAddIssueForm } from "../root";
 
 export const KanbanQuickAddIssueForm = observer(function KanbanQuickAddIssueForm(props: TQuickAddIssueForm) {
   const { ref, projectDetail, register, onSubmit, isEpic } = props;
   const { t } = useTranslation();
+
+  const handleNameKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key !== "Enter" || event.shiftKey) return;
+
+    event.preventDefault();
+    event.currentTarget.form?.requestSubmit();
+  };
+
   return (
     <div className="m-1 overflow-hidden rounded-[28px] bg-layer-2 shadow-raised-200">
-      <form ref={ref} onSubmit={onSubmit} className="flex w-full items-center gap-x-3 p-3">
+      <form ref={ref} onSubmit={onSubmit} className="flex w-full items-start gap-x-3 p-3">
         <div className="w-full">
           <h4 className="text-11 leading-5 font-medium text-tertiary">{projectDetail?.identifier ?? "..."}</h4>
-          <input
+          <textarea
+            rows={1}
             autoComplete="off"
             placeholder={isEpic ? t("epic.title.label") : t("issue.title.label")}
+            onKeyDown={handleNameKeyDown}
             {...register("name", {
               required: isEpic ? t("epic.title.required") : t("issue.title.required"),
             })}
-            className="w-full rounded-md bg-transparent px-2 py-1.5 pl-0 text-13 leading-5 font-medium text-secondary outline-none"
+            className="max-h-32 min-h-8 w-full resize-none overflow-y-auto rounded-md bg-transparent px-2 py-1.5 pl-0 text-13 leading-5 font-medium whitespace-pre-wrap text-secondary outline-none [field-sizing:content]"
           />
         </div>
       </form>