From b431754d713b067205bfec377792034825aa701e Mon Sep 17 00:00:00 2001
From: Zhang Minghan <zmh13054618081@dingtalk.com>
Date: Wed, 4 Oct 2023 07:44:59 +0800
Subject: [PATCH] fix input ref not found error

---
 app/src/components/EditorProvider.tsx | 151 ++++++++++++++++++++++++++
 app/src/components/RichEditor.tsx     | 143 ------------------------
 app/src/routes/Home.tsx               |   4 +-
 3 files changed, 153 insertions(+), 145 deletions(-)
 create mode 100644 app/src/components/EditorProvider.tsx
 delete mode 100644 app/src/components/RichEditor.tsx

diff --git a/app/src/components/EditorProvider.tsx b/app/src/components/EditorProvider.tsx
new file mode 100644
index 00000000..29bb629f
--- /dev/null
+++ b/app/src/components/EditorProvider.tsx
@@ -0,0 +1,151 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./ui/dialog.tsx";
+import { Edit, Image, MenuSquare, PanelRight } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import "../assets/editor.less";
+import { Textarea } from "./ui/textarea.tsx";
+import Markdown from "./Markdown.tsx";
+import { useEffect, useRef, useState } from "react";
+import { Toggle } from "./ui/toggle.tsx";
+import {mobile} from "../utils.ts";
+
+type RichEditorProps = {
+  value: string;
+  onChange: (value: string) => void;
+  className?: string;
+  id?: string;
+  placeholder?: string;
+  maxLength?: number;
+};
+
+function RichEditor({
+  value,
+  onChange,
+  id,
+  placeholder,
+  maxLength,
+}: RichEditorProps) {
+  const input = useRef(null);
+  const [openPreview, setOpenPreview] = useState(!mobile);
+  const [openInput, setOpenInput] = useState(true);
+
+  useEffect(() => {
+    if (!input.current) return;
+    const target = input.current as HTMLElement;
+    const preview = target.parentElement?.querySelector(
+      ".editor-preview",
+    ) as HTMLElement;
+
+    const listener = () => {
+      preview.style.height = `${target.clientHeight}px`;
+    };
+    target.addEventListener("transitionstart", listener);
+    setInterval(listener, 250);
+    target.addEventListener("scroll", () => {
+      preview.scrollTop = target.scrollTop;
+    });
+
+    preview.style.height = `${target.clientHeight}px`;
+
+    if (openInput) target.focus();
+  }, [input]);
+
+  return (
+    <div className={`editor-container`}>
+      <div className={`editor-toolbar`}>
+        <div className={`grow`} />
+        <Toggle
+          variant={`outline`}
+          className={`h-8 w-8 p-0`}
+          pressed={openInput && !openPreview}
+          onClick={() => {
+            setOpenPreview(false);
+            setOpenInput(true);
+          }}
+        >
+          <MenuSquare className={`h-3.5 w-3.5`} />
+        </Toggle>
+
+        <Toggle
+          variant={`outline`}
+          className={`h-8 w-8 p-0`}
+          pressed={openInput && openPreview}
+          onClick={() => {
+            setOpenPreview(true);
+            setOpenInput(true);
+          }}
+        >
+          <PanelRight className={`h-3.5 w-3.5`} />
+        </Toggle>
+
+        <Toggle
+          variant={`outline`}
+          className={`h-8 w-8 p-0`}
+          pressed={!openInput && openPreview}
+          onClick={() => {
+            setOpenPreview(true);
+            setOpenInput(false);
+          }}
+        >
+          <Image className={`h-3.5 w-3.5`} />
+        </Toggle>
+      </div>
+      <div className={`editor-wrapper`}>
+        <div
+          className={`editor-object ${
+            openInput ? "show-editor" : ""
+          } ${openPreview ? "show-preview" : ""}`}
+        >
+          {openInput && (
+            <Textarea
+              placeholder={placeholder}
+              value={value}
+              className={`editor-input`}
+              id={id}
+              maxLength={maxLength}
+              onChange={(e) => onChange(e.target.value)}
+              ref={input}
+            />
+          )}
+          {openPreview && (
+            <Markdown className={`editor-preview`} children={value} />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function EditorProvider(props: RichEditorProps) {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Dialog>
+        <DialogTrigger asChild>
+          <div
+            className={`editor-action active ${props.className}`}
+          >
+            <Edit className={`h-3.5 w-3.5`} />
+          </div>
+        </DialogTrigger>
+        <DialogContent className={`editor-dialog flex-dialog`}>
+          <DialogHeader>
+            <DialogTitle>{t("edit")}</DialogTitle>
+            <DialogDescription asChild>
+              <RichEditor {...props} />
+            </DialogDescription>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
+export default EditorProvider;
diff --git a/app/src/components/RichEditor.tsx b/app/src/components/RichEditor.tsx
deleted file mode 100644
index 4d2e03a8..00000000
--- a/app/src/components/RichEditor.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "./ui/dialog.tsx";
-import { Edit, Image, MenuSquare, PanelRight } from "lucide-react";
-import { useTranslation } from "react-i18next";
-import "../assets/editor.less";
-import { Textarea } from "./ui/textarea.tsx";
-import Markdown from "./Markdown.tsx";
-import { useEffect, useRef, useState } from "react";
-import { Toggle } from "./ui/toggle.tsx";
-import {mobile} from "../utils.ts";
-
-type RichEditorProps = {
-  value: string;
-  onChange: (value: string) => void;
-  className?: string;
-  id?: string;
-  placeholder?: string;
-  maxLength?: number;
-};
-
-function RichEditor({
-  value,
-  onChange,
-  className,
-  id,
-  placeholder,
-  maxLength,
-}: RichEditorProps) {
-  const { t } = useTranslation();
-  const input = useRef(null);
-  const [openPreview, setOpenPreview] = useState(!mobile);
-  const [openInput, setOpenInput] = useState(true);
-
-  useEffect(() => {
-    if (!input.current) return;
-    const target = input.current as HTMLElement;
-    const preview = target.parentElement?.querySelector(
-      ".editor-preview",
-    ) as HTMLElement;
-
-    const listener = () => {
-      preview.style.height = `${target.clientHeight}px`;
-    };
-    target.addEventListener("transitionstart", listener);
-    const task = setInterval(listener, 250);
-    target.addEventListener("scroll", () => {
-      preview.scrollTop = target.scrollTop;
-    });
-
-    preview.style.height = `${target.clientHeight}px`;
-  }, [input]);
-
-  return (
-    <>
-      <Dialog>
-        <DialogTrigger asChild>
-          <div
-            className={`editor-action active ${className}`}
-          >
-            <Edit className={`h-3.5 w-3.5`} />
-          </div>
-        </DialogTrigger>
-        <DialogContent className={`editor-dialog flex-dialog`}>
-          <DialogHeader>
-            <DialogTitle>{t("edit")}</DialogTitle>
-            <DialogDescription asChild>
-              <div className={`editor-container`}>
-                <div className={`editor-toolbar`}>
-                  <div className={`grow`} />
-                  <Toggle
-                    variant={`outline`}
-                    className={`h-8 w-8 p-0`}
-                    pressed={openInput && !openPreview}
-                    onClick={() => {
-                      setOpenPreview(false);
-                      setOpenInput(true);
-                    }}
-                  >
-                    <MenuSquare className={`h-3.5 w-3.5`} />
-                  </Toggle>
-
-                  <Toggle
-                    variant={`outline`}
-                    className={`h-8 w-8 p-0`}
-                    pressed={openInput && openPreview}
-                    onClick={() => {
-                      setOpenPreview(true);
-                      setOpenInput(true);
-                    }}
-                  >
-                    <PanelRight className={`h-3.5 w-3.5`} />
-                  </Toggle>
-
-                  <Toggle
-                    variant={`outline`}
-                    className={`h-8 w-8 p-0`}
-                    pressed={!openInput && openPreview}
-                    onClick={() => {
-                      setOpenPreview(true);
-                      setOpenInput(false);
-                    }}
-                  >
-                    <Image className={`h-3.5 w-3.5`} />
-                  </Toggle>
-                </div>
-                <div className={`editor-wrapper`}>
-                  <div
-                    className={`editor-object ${
-                      openInput ? "show-editor" : ""
-                    } ${openPreview ? "show-preview" : ""}`}
-                  >
-                    {openInput && (
-                      <Textarea
-                        placeholder={placeholder}
-                        value={value}
-                        className={`editor-input`}
-                        id={id}
-                        maxLength={maxLength}
-                        onChange={(e) => onChange(e.target.value)}
-                        ref={input}
-                      />
-                    )}
-                    {openPreview && (
-                      <Markdown className={`editor-preview`} children={value} />
-                    )}
-                  </div>
-                </div>
-              </div>
-            </DialogDescription>
-          </DialogHeader>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}
-
-export default RichEditor;
diff --git a/app/src/routes/Home.tsx b/app/src/routes/Home.tsx
index 6aecfc5a..b4a47812 100644
--- a/app/src/routes/Home.tsx
+++ b/app/src/routes/Home.tsx
@@ -66,7 +66,7 @@ import { setMenu } from "../store/menu.ts";
 import FileProvider, { FileObject } from "../components/FileProvider.tsx";
 import router from "../router.ts";
 import SelectGroup from "../components/SelectGroup.tsx";
-import RichEditor from "../components/RichEditor.tsx";
+import EditorProvider from "../components/EditorProvider.tsx";
 
 function SideBar() {
   const { t } = useTranslation();
@@ -399,7 +399,7 @@ function ChatWrapper() {
                   if (e.key === "Enter") await handleSend(auth, model, web);
                 }}
               />
-              <RichEditor
+              <EditorProvider
                 value={input}
                 onChange={setInput}
                 className={`editor`}