From 5d63f4dbec653167370be583b25b2d41c1d48826 Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Fri, 12 Jul 2024 10:40:31 +0800
Subject: [PATCH 01/29] fix: fix the endpoint of upload files | SCRUM-72

---
 src/app/ui/file-upload.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/ui/file-upload.tsx b/src/app/ui/file-upload.tsx
index 5742b51..85f40b1 100644
--- a/src/app/ui/file-upload.tsx
+++ b/src/app/ui/file-upload.tsx
@@ -44,7 +44,7 @@ export default function FileUpload({
 
     try {
       const response = await fetch(
-        "https://sojek1stci.execute-api.ap-northeast-1.amazonaws.com/dev/upload-multiple-file",
+        "https://api.tpet.awseducate.systems/dev/upload-multiple-file",
         {
           method: "POST",
           body: formData,

From fd245e7ff99cea52d5058ae7b2d5fc443debdab3 Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Fri, 12 Jul 2024 10:44:11 +0800
Subject: [PATCH 02/29] fix: fix the endpoint of list files | SCRUM-72

---
 src/app/ui/select-dropdown.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/app/ui/select-dropdown.tsx b/src/app/ui/select-dropdown.tsx
index 519829d..caf5dfb 100644
--- a/src/app/ui/select-dropdown.tsx
+++ b/src/app/ui/select-dropdown.tsx
@@ -65,8 +65,7 @@ export default function SelectDropdown({
   const fetchFiles = async (file_extension: string, limit: number) => {
     try {
       setIsLoading(true);
-      const base_url =
-        "https://8um2zizr80.execute-api.ap-northeast-1.amazonaws.com/dev";
+      const base_url = "https://api.tpet.awseducate.systems/dev";
       const url = new URL(`${base_url}/files`);
       url.searchParams.append("file_extension", file_extension);
       url.searchParams.append("limit", limit.toString());

From 3b2652e8662f6a49c09691581a4eaf4e9a0060cb Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Fri, 12 Jul 2024 10:55:00 +0800
Subject: [PATCH 03/29] refactor: rewrite the api endpoint of upload files |
 SCURM-72

---
 src/app/ui/file-upload.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/app/ui/file-upload.tsx b/src/app/ui/file-upload.tsx
index 85f40b1..c9a775c 100644
--- a/src/app/ui/file-upload.tsx
+++ b/src/app/ui/file-upload.tsx
@@ -43,13 +43,12 @@ export default function FileUpload({
     setIsSubmitting(true);
 
     try {
-      const response = await fetch(
-        "https://api.tpet.awseducate.systems/dev/upload-multiple-file",
-        {
-          method: "POST",
-          body: formData,
-        }
-      );
+      const base_url = "https://api.tpet.awseducate.systems/dev";
+      const url = new URL(`${base_url}/upload-multiple-file`);
+      const response = await fetch(url.toString(), {
+        method: "POST",
+        body: formData,
+      });
 
       if (!response.ok) {
         const errorMessage = `Upload failed: ${response.status} - ${response.statusText}`;

From 1d8b321e080442229f7370a8ac031bbce320ec98 Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Fri, 12 Jul 2024 11:09:04 +0800
Subject: [PATCH 04/29] fix: fix the endpoint of send emails | SCRUM-72

---
 src/lib/actions.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/lib/actions.ts b/src/lib/actions.ts
index 83627f0..5dd5ccd 100644
--- a/src/lib/actions.ts
+++ b/src/lib/actions.ts
@@ -26,8 +26,10 @@ export async function submitForm(formData: FormData) {
   }
   try {
     console.log("data", data.data);
+    const base_url = "https://api.tpet.awseducate.systems/dev";
+    const url = new URL(`${base_url}/send-email`);
     const response = await fetch(
-      "https://xtbr94xbt7.execute-api.ap-northeast-2.amazonaws.com/dev/send-email",
+      url.toString(),
       {
         method: "POST",
         headers: {

From d3e230dc4ce1d2c960dccb413bebb9bcf5d244ce Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Wed, 26 Jun 2024 15:31:39 +0800
Subject: [PATCH 05/29] feat: add a preview for xlsx file | SCRUM-62

---
 src/app/ui/iframe-preview.tsx  | 27 +++++++++++++++++++
 src/app/ui/send-email-form.tsx | 48 ++++++++++++++++++++++++++++++++++
 2 files changed, 75 insertions(+)
 create mode 100644 src/app/ui/iframe-preview.tsx

diff --git a/src/app/ui/iframe-preview.tsx b/src/app/ui/iframe-preview.tsx
new file mode 100644
index 0000000..6b4bdcd
--- /dev/null
+++ b/src/app/ui/iframe-preview.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+interface IframePreviewProps {
+  src: string;
+  title: string;
+  width: string;
+  height: string;
+}
+
+export default function IframePreview({
+  src,
+  title,
+  width,
+  height,
+}: IframePreviewProps) {
+  return (
+    <div style={{ width, height }}>
+      <iframe
+        src={src}
+        title={title}
+        width="100%"
+        height="100%"
+        style={{ border: "none" }}
+      />
+    </div>
+  );
+}
diff --git a/src/app/ui/send-email-form.tsx b/src/app/ui/send-email-form.tsx
index fc5841c..af1f5a8 100644
--- a/src/app/ui/send-email-form.tsx
+++ b/src/app/ui/send-email-form.tsx
@@ -4,6 +4,7 @@ import { submitForm } from "@/lib/actions";
 import SelectDropdown from "@/app/ui/select-dropdown";
 // import FileUpload from "@/app/ui/file-upload";
 import FileUpload from "@/app/ui/file-upload";
+import IframePreview from "@/app/ui/iframe-preview";
 
 interface SubmitResponse {
   status: string;
@@ -33,6 +34,7 @@ export default function SendEmailForm() {
   const [errors, setErrors] = useState<{ [key: string]: string }>({});
   const [showHtmlUpload, setShowHtmlUpload] = useState<boolean>(false);
   const [showXlsxUpload, setShowXlsxUpload] = useState<boolean>(false);
+  const [previewXlsx, setPreviewXlsx] = useState<boolean>(false);
 
   const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -91,6 +93,14 @@ export default function SendEmailForm() {
     setShowXlsxUpload(false);
   };
 
+  const handlePreviewXlsx = () => {
+    setPreviewXlsx(true);
+  };
+
+  const handlePreviewXlsxClose = () => {
+    setPreviewXlsx(false);
+  };
+
   return (
     <>
       <div className="flex flex-col justify-center items-start">
@@ -194,6 +204,13 @@ export default function SendEmailForm() {
                 onSelect={handleXlsxSelect}
                 fileExtension="xlsx"
               />
+              <button
+                type="button"
+                onClick={handlePreviewXlsx}
+                className="text-sky-950 hover:text-sky-800 flex justify-center items-center border-sky-950 h-10 rounded-lg px-2 md:text-base text-xs font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 aria-disabled:cursor-not-allowed aria-disabled:opacity-50"
+              >
+                preview
+              </button>
               <button
                 type="button"
                 onClick={handleXlsxOpenUpload}
@@ -224,6 +241,37 @@ export default function SendEmailForm() {
                   </div>
                 </div>
               )}
+              {previewXlsx && (
+                <div className="bg-black bg-opacity-50 fixed inset-0 flex items-center justify-center z-50 p-20">
+                  <div className="bg-white rounded-lg shadow-2xl p-8 pb-10 w-full h-full relative">
+                    <button
+                      onClick={handlePreviewXlsxClose}
+                      className="absolute top-8 right-8 text-black"
+                    >
+                      <svg
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          fill="currentColor"
+                          d="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6z"
+                        />
+                      </svg>
+                    </button>
+                    <div className="w-full h-full p-2 flex flex-col">
+                      <p className="text-2xl">Preview xlsx</p>
+                      <IframePreview
+                        src="https://view.officeapps.live.com/op/view.aspx?src=https://github.com/user-attachments/files/15975003/e5a31a0a586a41f88ee5f3a8955bee2f_scrum7-0618.xlsx"
+                        title="Participants Sheet Preview"
+                        width="100%"
+                        height="100%"
+                      />
+                    </div>
+                  </div>
+                </div>
+              )}
             </div>
             {errors.template_file_id && (
               <p className="text-red-500 text-sm">{errors.template_file_id}</p>

From 26811c7296ee6032152ee2260b320ab8692c368d Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Wed, 26 Jun 2024 16:32:57 +0800
Subject: [PATCH 06/29] style: style the xlsx preview | SCRUM-62

---
 src/app/ui/iframe-preview.tsx  | 4 ++--
 src/app/ui/send-email-form.tsx | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/ui/iframe-preview.tsx b/src/app/ui/iframe-preview.tsx
index 6b4bdcd..20fa07c 100644
--- a/src/app/ui/iframe-preview.tsx
+++ b/src/app/ui/iframe-preview.tsx
@@ -14,13 +14,13 @@ export default function IframePreview({
   height,
 }: IframePreviewProps) {
   return (
-    <div style={{ width, height }}>
+    <div style={{ width, height }} className="shadow-xl">
       <iframe
         src={src}
         title={title}
         width="100%"
         height="100%"
-        style={{ border: "none" }}
+        style={{ border: "none", borderRadius: "8px" }}
       />
     </div>
   );
diff --git a/src/app/ui/send-email-form.tsx b/src/app/ui/send-email-form.tsx
index af1f5a8..0b0c8da 100644
--- a/src/app/ui/send-email-form.tsx
+++ b/src/app/ui/send-email-form.tsx
@@ -243,10 +243,10 @@ export default function SendEmailForm() {
               )}
               {previewXlsx && (
                 <div className="bg-black bg-opacity-50 fixed inset-0 flex items-center justify-center z-50 p-20">
-                  <div className="bg-white rounded-lg shadow-2xl p-8 pb-10 w-full h-full relative">
+                  <div className="bg-green-700 rounded-lg shadow-2xl p-8 pb-12 w-full h-full relative">
                     <button
                       onClick={handlePreviewXlsxClose}
-                      className="absolute top-8 right-8 text-black"
+                      className="absolute top-8 right-8 text-white"
                     >
                       <svg
                         width="24"
@@ -261,7 +261,7 @@ export default function SendEmailForm() {
                       </svg>
                     </button>
                     <div className="w-full h-full p-2 flex flex-col">
-                      <p className="text-2xl">Preview xlsx</p>
+                      <p className="text-2xl text-white">Preview xlsx</p>
                       <IframePreview
                         src="https://view.officeapps.live.com/op/view.aspx?src=https://github.com/user-attachments/files/15975003/e5a31a0a586a41f88ee5f3a8955bee2f_scrum7-0618.xlsx"
                         title="Participants Sheet Preview"

From 5a6118d6f32dd37fe5fe1dd674216857f9aec0bc Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Sat, 13 Jul 2024 10:51:06 +0800
Subject: [PATCH 07/29] feat: preview selected html and xlsx | SCRUM-62

---
 src/app/ui/iframe-preview.tsx  |  2 +-
 src/app/ui/select-dropdown.tsx | 16 +++++--
 src/app/ui/send-email-form.tsx | 81 ++++++++++++++++++++++++++++++----
 3 files changed, 86 insertions(+), 13 deletions(-)

diff --git a/src/app/ui/iframe-preview.tsx b/src/app/ui/iframe-preview.tsx
index 20fa07c..4ca19da 100644
--- a/src/app/ui/iframe-preview.tsx
+++ b/src/app/ui/iframe-preview.tsx
@@ -14,7 +14,7 @@ export default function IframePreview({
   height,
 }: IframePreviewProps) {
   return (
-    <div style={{ width, height }} className="shadow-xl">
+    <div style={{ width, height }} className="shadow-xl bg-white rounded p-3">
       <iframe
         src={src}
         title={title}
diff --git a/src/app/ui/select-dropdown.tsx b/src/app/ui/select-dropdown.tsx
index caf5dfb..fda945a 100644
--- a/src/app/ui/select-dropdown.tsx
+++ b/src/app/ui/select-dropdown.tsx
@@ -15,7 +15,7 @@ interface fileDataType {
 }
 
 interface SelectDropdownProps {
-  onSelect: (file_id: string) => void;
+  onSelect: (file_id: string, file_url: string) => void;
   fileExtension: string;
 }
 
@@ -95,8 +95,12 @@ export default function SelectDropdown({
     setIsOpen(!isOpen);
   };
 
-  const handleSelect = (file_id: string, file_name: string) => {
-    onSelect(file_id);
+  const handleSelect = (
+    file_id: string,
+    file_url: string,
+    file_name: string
+  ) => {
+    onSelect(file_id, file_url);
     console.log("Selected file:", file_id);
     setSelectedFileName(file_name);
     setIsOpen(false);
@@ -194,7 +198,11 @@ export default function SelectDropdown({
                       key={option.file_id}
                       className="hover:bg-gray-200 cursor-pointer active:bg-gray-300"
                       onClick={() =>
-                        handleSelect(option.file_id, option.file_name)
+                        handleSelect(
+                          option.file_id,
+                          option.file_url,
+                          option.file_name
+                        )
                       }
                     >
                       <td className="py-2 px-4 border-b border-gray-200 max-w-96 break-words">
diff --git a/src/app/ui/send-email-form.tsx b/src/app/ui/send-email-form.tsx
index 0b0c8da..e5aeb22 100644
--- a/src/app/ui/send-email-form.tsx
+++ b/src/app/ui/send-email-form.tsx
@@ -5,6 +5,7 @@ import SelectDropdown from "@/app/ui/select-dropdown";
 // import FileUpload from "@/app/ui/file-upload";
 import FileUpload from "@/app/ui/file-upload";
 import IframePreview from "@/app/ui/iframe-preview";
+import { set } from "zod";
 
 interface SubmitResponse {
   status: string;
@@ -31,9 +32,12 @@ export default function SendEmailForm() {
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
   const [selectedHtmlFile, setSelectedHtmlFile] = useState("");
   const [selectedXlsxFile, setSelectedXlsxFile] = useState("");
+  const [htmlPreviewLink, setHtmlPreviewLink] = useState<string>("");
+  const [xlsxPreviewLink, setXlsxPreviewLink] = useState<string>("");
   const [errors, setErrors] = useState<{ [key: string]: string }>({});
   const [showHtmlUpload, setShowHtmlUpload] = useState<boolean>(false);
   const [showXlsxUpload, setShowXlsxUpload] = useState<boolean>(false);
+  const [previewHtml, setPreviewHtml] = useState<boolean>(false);
   const [previewXlsx, setPreviewXlsx] = useState<boolean>(false);
 
   const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
@@ -69,14 +73,17 @@ export default function SendEmailForm() {
     setIsSubmitting(false);
   };
 
-  const handleHtmlSelect = (file_id: string) => {
+  const handleHtmlSelect = (file_id: string, file_url: string) => {
     // console.log("selected html file id", file_id);
     setSelectedHtmlFile(file_id);
+    setHtmlPreviewLink(file_url);
   };
 
-  const handleXlsxSelect = (file_id: string) => {
+  const handleXlsxSelect = (file_id: string, file_url: string) => {
     // console.log("selected xlsx file id", file_id);
+    // console.log("selected xlsx file url", file_url);
     setSelectedXlsxFile(file_id);
+    setXlsxPreviewLink(file_url);
   };
 
   const handleOpenHtmlUpload = () => {
@@ -93,6 +100,14 @@ export default function SendEmailForm() {
     setShowXlsxUpload(false);
   };
 
+  const handlePreviewHtml = () => {
+    setPreviewHtml(true);
+  };
+
+  const handlePreviewHtmlClose = () => {
+    setPreviewHtml(false);
+  };
+
   const handlePreviewXlsx = () => {
     setPreviewXlsx(true);
   };
@@ -160,6 +175,13 @@ export default function SendEmailForm() {
                 onSelect={handleHtmlSelect}
                 fileExtension="html"
               />
+              <button
+                type="button"
+                onClick={handlePreviewHtml}
+                className="text-sky-950 hover:text-sky-800 flex justify-center items-center border-sky-950 h-10 rounded-lg px-2 md:text-base text-xs font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 aria-disabled:cursor-not-allowed aria-disabled:opacity-50"
+              >
+                preview
+              </button>
               <button
                 type="button"
                 onClick={handleOpenHtmlUpload}
@@ -190,6 +212,43 @@ export default function SendEmailForm() {
                   </div>
                 </div>
               )}
+              {previewHtml && (
+                <div className="bg-black bg-opacity-50 fixed inset-0 flex items-center justify-center z-50 p-20">
+                  <div className="bg-yellow-400 rounded-lg shadow-2xl p-8 pb-12 w-full h-full relative">
+                    <button
+                      onClick={handlePreviewHtmlClose}
+                      className="absolute top-8 right-8 text-white"
+                    >
+                      <svg
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          fill="currentColor"
+                          d="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6z"
+                        />
+                      </svg>
+                    </button>
+                    <div className="w-full h-full p-2 flex flex-col">
+                      <p className="text-2xl text-white">Preview Html</p>
+                      {htmlPreviewLink ? (
+                        <IframePreview
+                          src={htmlPreviewLink}
+                          title="Participants Sheet Preview"
+                          width="100%"
+                          height="100%"
+                        />
+                      ) : (
+                        <div className="flex w-full h-full justify-center items-center">
+                          <p className="text-white">No preview available</p>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )}
             </div>
             {errors.template_file_id && (
               <p className="text-red-500 text-sm">{errors.template_file_id}</p>
@@ -262,12 +321,18 @@ export default function SendEmailForm() {
                     </button>
                     <div className="w-full h-full p-2 flex flex-col">
                       <p className="text-2xl text-white">Preview xlsx</p>
-                      <IframePreview
-                        src="https://view.officeapps.live.com/op/view.aspx?src=https://github.com/user-attachments/files/15975003/e5a31a0a586a41f88ee5f3a8955bee2f_scrum7-0618.xlsx"
-                        title="Participants Sheet Preview"
-                        width="100%"
-                        height="100%"
-                      />
+                      {xlsxPreviewLink ? (
+                        <IframePreview
+                          src={`https://view.officeapps.live.com/op/view.aspx?src=${xlsxPreviewLink}`}
+                          title="Participants Sheet Preview"
+                          width="100%"
+                          height="100%"
+                        />
+                      ) : (
+                        <div className="flex w-full h-full justify-center items-center">
+                          <p className="text-white">No preview available</p>
+                        </div>
+                      )}
                     </div>
                   </div>
                 </div>

From 2201d42ba0fb1bed960258aed393397e2fa6c9a0 Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Sat, 13 Jul 2024 13:31:50 +0800
Subject: [PATCH 08/29] feat: upload files and attach files | SCRUM-75

---
 src/app/ui/attach-dropdown.tsx | 262 +++++++++++++++++++++++++++++++++
 src/app/ui/file-upload.tsx     |  41 ++++--
 src/app/ui/send-email-form.tsx |  61 +++++++-
 3 files changed, 348 insertions(+), 16 deletions(-)
 create mode 100644 src/app/ui/attach-dropdown.tsx

diff --git a/src/app/ui/attach-dropdown.tsx b/src/app/ui/attach-dropdown.tsx
new file mode 100644
index 0000000..187db37
--- /dev/null
+++ b/src/app/ui/attach-dropdown.tsx
@@ -0,0 +1,262 @@
+"use client";
+import { useState, useEffect, useRef } from "react";
+import { convertToTaipeiTime, formatFileSize } from "@/lib/utils/dataUtils";
+
+interface fileDataType {
+  file_id: string;
+  created_at: string;
+  updated_at: string;
+  file_url: string;
+  file_name: string;
+  file_extension: string;
+  file_size: number;
+  uploader_id: string;
+}
+
+interface AttachDropdownProps {
+  onSelect: (selectedFiles: { file_id: string; file_url: string }[]) => void;
+}
+
+export default function AttachDropdown({ onSelect }: AttachDropdownProps) {
+  const [templateOptions, setTemplateOptions] = useState<fileDataType[] | null>(
+    null
+  );
+  const [filteredOptions, setFilteredOptions] = useState<fileDataType[] | null>(
+    null
+  );
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedFiles, setSelectedFiles] = useState<fileDataType[]>([]);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (templateOptions) {
+      setFilteredOptions(
+        templateOptions.filter((option) =>
+          option.file_name.toLowerCase().includes(searchTerm.toLowerCase())
+        )
+      );
+    }
+  }, [searchTerm, templateOptions]);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [dropdownRef]);
+
+  const fetchFiles = async (limit: number) => {
+    try {
+      setIsLoading(true);
+      const base_url = "https://api.tpet.awseducate.systems/dev";
+      const url = new URL(`${base_url}/files`);
+      url.searchParams.append("limit", limit.toString());
+
+      const response = await fetch(url.toString(), {
+        method: "GET",
+      });
+
+      if (!response.ok) {
+        const errorMessage = `Request failed: ${response.status} - ${response.statusText}`;
+        throw new Error(errorMessage);
+      }
+
+      const result = await response.json();
+      setTemplateOptions(result.data);
+    } catch (error: any) {
+      alert("Failed to fetch files: " + error.message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const toggleDropdown = () => {
+    if (!isOpen) {
+      fetchFiles(15);
+    }
+    setIsOpen(!isOpen);
+  };
+
+  const handleSelect = (file: fileDataType) => {
+    const alreadySelected = selectedFiles.some(
+      (selectedFile) => selectedFile.file_id === file.file_id
+    );
+    let updatedSelectedFiles;
+    if (alreadySelected) {
+      updatedSelectedFiles = selectedFiles.filter(
+        (selectedFile) => selectedFile.file_id !== file.file_id
+      );
+    } else {
+      updatedSelectedFiles = [...selectedFiles, file];
+    }
+    setSelectedFiles(updatedSelectedFiles);
+    onSelect(
+      updatedSelectedFiles.map(({ file_id, file_url }) => ({
+        file_id,
+        file_url,
+      }))
+    );
+  };
+
+  return (
+    <div className="relative inline-block text-left w-full" ref={dropdownRef}>
+      <div>
+        <button
+          type="button"
+          className="text-start inline-flex justify-between w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+          id="options-menu"
+          aria-expanded={isOpen}
+          aria-haspopup="true"
+          onClick={toggleDropdown}
+        >
+          {selectedFiles.length > 0
+            ? `${selectedFiles.map((file) => file.file_name).join(", ")}`
+            : "Attach your files"}
+          <svg
+            className="-mr-1 ml-2 h-5 w-5"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fillRule="evenodd"
+              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 011.414 1.414l-4 4a1 1 01-1.414 0l-4-4a1 1 0 010-1.414z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
+
+      {isOpen && (
+        <div
+          className="z-50 p-3 pb-6 origin-top-right absolute w-full mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
+          role="menu"
+          aria-orientation="vertical"
+          aria-labelledby="options-menu"
+        >
+          <div className="flex justify-between items-center mb-2 pl-4">
+            <p className="font-medium">ATTACH FILES</p>
+            <input
+              className="rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+              placeholder="Search a file name..."
+              type="text"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </div>
+
+          {isLoading ? (
+            <div className="flex justify-center items-center py-4">
+              <svg
+                className="animate-spin -ml-1 mr-3 h-5 w-5 text-gray-500"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <circle
+                  className="opacity-25"
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  stroke="currentColor"
+                  strokeWidth="4"
+                ></circle>
+                <path
+                  className="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291l-1.497-1.32A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                ></path>
+              </svg>
+              <p>Loading...</p>
+            </div>
+          ) : filteredOptions && filteredOptions.length > 0 ? (
+            <div>
+              <table className="w-full bg-white shadow-md rounded-md">
+                <thead>
+                  <tr className="bg-neutral-100 rounded-t-md">
+                    <th className="py-2 px-4 border-b border-gray-200 rounded-tl-md">
+                      File Name
+                    </th>
+                    <th className="py-2 px-4 border-b border-gray-200">
+                      Created At
+                    </th>
+                    <th className="py-2 px-4 border-b border-gray-200 rounded-tr-md">
+                      File Size
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {filteredOptions.map((option) => (
+                    <tr
+                      key={option.file_id}
+                      className={`hover:bg-gray-200 cursor-pointer active:bg-gray-300 ${
+                        selectedFiles.some(
+                          (file) => file.file_id === option.file_id
+                        )
+                          ? "bg-gray-100"
+                          : ""
+                      }`}
+                      onClick={() => handleSelect(option)}
+                    >
+                      <td className="py-2 px-4 border-b border-gray-200 max-w-96 break-words">
+                        {option.file_name}
+                      </td>
+                      <td className="py-2 px-4 border-b border-gray-200">
+                        {convertToTaipeiTime(option.created_at)}
+                      </td>
+                      <td className="py-2 px-4 border-b border-gray-200">
+                        {formatFileSize(option.file_size)}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          ) : (
+            <div>
+              <table className="w-full bg-white">
+                <thead>
+                  <tr className="bg-neutral-100 rounded-t-md">
+                    <th className="py-2 px-4 border-b border-gray-200 rounded-tl-md">
+                      File Name
+                    </th>
+                    <th className="py-2 px-4 border-b border-gray-200">
+                      Created At
+                    </th>
+                    <th className="py-2 px-4 border-b border-gray-200">
+                      Created At
+                    </th>
+                    <th className="py-2 px-4 border-b border-gray-200 rounded-tr-md">
+                      File Size
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td
+                      className="py-2 px-4 border-b border-gray-200"
+                      colSpan={3}
+                    >
+                      No files found
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/ui/file-upload.tsx b/src/app/ui/file-upload.tsx
index c9a775c..c431087 100644
--- a/src/app/ui/file-upload.tsx
+++ b/src/app/ui/file-upload.tsx
@@ -57,13 +57,13 @@ export default function FileUpload({
       const result = await response.json();
 
       setFileData(result.files);
-      result.files.forEach((file: FileDataType) => {
-        if (file.file_extension === "xlsx") {
-          localStorage.setItem("xlsx_key", file.file_id);
-        } else if (file.file_extension === "html") {
-          localStorage.setItem("html_key", file.file_id);
-        }
-      });
+      // result.files.forEach((file: FileDataType) => {
+      //   if (file.file_extension === "xlsx") {
+      //     localStorage.setItem("xlsx_key", file.file_id);
+      //   } else if (file.file_extension === "html") {
+      //     localStorage.setItem("html_key", file.file_id);
+      //   }
+      // });
       // onFileUploadSuccess(result.files);
       alert("File uploaded successfully!");
     } catch (error: any) {
@@ -81,10 +81,14 @@ export default function FileUpload({
           <p className="text-gray-500 italic pb-4">
             Upload your email template.
           </p>
-        ) : (
+        ) : OnFileExtension === ".xlsx" ? (
           <p className="text-gray-500 italic pb-4">
             Upload your participants sheet.
           </p>
+        ) : OnFileExtension === "all" ? (
+          <p className="text-gray-500 italic pb-4">Attach your files.</p>
+        ) : (
+          <p className="text-gray-500 italic pb-4">Unsupported file type.</p>
         )}
       </div>
       <div>
@@ -106,12 +110,21 @@ export default function FileUpload({
               background-color: #082f49;
             }
           `}</style>
-          <p
-            className="mt-1 text-sm text-gray-500 dark:text-gray-300 text-right"
-            id="file_input_help"
-          >
-            only {OnFileExtension} is accepted
-          </p>
+          {OnFileExtension === "all" ? (
+            <p
+              className="mt-1 text-sm text-gray-500 dark:text-gray-300 text-right"
+              id="file_input_help"
+            >
+              all types of files are accepted
+            </p>
+          ) : (
+            <p
+              className="mt-1 text-sm text-gray-500 dark:text-gray-300 text-right"
+              id="file_input_help"
+            >
+              only {OnFileExtension} is accepted
+            </p>
+          )}
         </div>
         <div className="flex justify-end py-3">
           <button
diff --git a/src/app/ui/send-email-form.tsx b/src/app/ui/send-email-form.tsx
index e5aeb22..32cbf94 100644
--- a/src/app/ui/send-email-form.tsx
+++ b/src/app/ui/send-email-form.tsx
@@ -2,10 +2,9 @@
 import React, { useRef, useState, useEffect, FormEvent } from "react";
 import { submitForm } from "@/lib/actions";
 import SelectDropdown from "@/app/ui/select-dropdown";
-// import FileUpload from "@/app/ui/file-upload";
+import AttachDropdown from "./attach-dropdown";
 import FileUpload from "@/app/ui/file-upload";
 import IframePreview from "@/app/ui/iframe-preview";
-import { set } from "zod";
 
 interface SubmitResponse {
   status: string;
@@ -39,6 +38,9 @@ export default function SendEmailForm() {
   const [showXlsxUpload, setShowXlsxUpload] = useState<boolean>(false);
   const [previewHtml, setPreviewHtml] = useState<boolean>(false);
   const [previewXlsx, setPreviewXlsx] = useState<boolean>(false);
+  const [showAttachUpload, setShowAttachUpload] = useState<boolean>(false);
+
+  const [attachment_file_ids, setAttachment_file_ids] = useState<string[]>([]);
 
   const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -86,6 +88,12 @@ export default function SendEmailForm() {
     setXlsxPreviewLink(file_url);
   };
 
+  const handleAttachSelect = (selectedFiles: any) => {
+    const selected_ids = selectedFiles.map((file: any) => file.file_id);
+    setAttachment_file_ids(selected_ids);
+    // console.log("selected attachment file ids", selected_ids);
+  };
+
   const handleOpenHtmlUpload = () => {
     setShowHtmlUpload(true);
   };
@@ -100,6 +108,14 @@ export default function SendEmailForm() {
     setShowXlsxUpload(false);
   };
 
+  const handleAttachOpenUpload = () => {
+    setShowAttachUpload(true);
+  };
+
+  const handleAttachCloseUpload = () => {
+    setShowAttachUpload(false);
+  };
+
   const handlePreviewHtml = () => {
     setPreviewHtml(true);
   };
@@ -342,6 +358,47 @@ export default function SendEmailForm() {
               <p className="text-red-500 text-sm">{errors.template_file_id}</p>
             )}
           </div>
+          <div className="m-3">
+            <label className="mb-2 block text-sm font-medium">
+              Attach files:
+            </label>
+            <div className="flex items-center gap-2">
+              <AttachDropdown onSelect={handleAttachSelect} />
+              <button
+                type="button"
+                onClick={handleAttachOpenUpload}
+                className="text-sky-950 hover:text-sky-800 flex justify-center items-center border-sky-950 h-10 rounded-lg px-2 md:text-base text-xs font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 aria-disabled:cursor-not-allowed aria-disabled:opacity-50"
+              >
+                upload
+              </button>
+              {showAttachUpload && (
+                <div className="bg-black bg-opacity-50 fixed inset-0 flex items-center justify-center z-50">
+                  <div className="bg-white rounded-lg shadow-2xl p-8 pb-20 w-full max-w-screen-lg relative">
+                    <button
+                      onClick={handleAttachCloseUpload}
+                      className="absolute top-8 right-8 text-black"
+                    >
+                      <svg
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          fill="currentColor"
+                          d="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6z"
+                        />
+                      </svg>
+                    </button>
+                    <FileUpload OnFileExtension="all" />
+                  </div>
+                </div>
+              )}
+            </div>
+            {errors.template_file_id && (
+              <p className="text-red-500 text-sm">{errors.template_file_id}</p>
+            )}
+          </div>
         </div>
         <div className="w-full flex justify-end my-3 gap-3">
           {isSubmitting ? (

From 89e550cccc21a311a5709a81e756f3082f42c29c Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Sat, 13 Jul 2024 16:04:09 +0800
Subject: [PATCH 09/29] fix: change the formData to raw | SCRUM-75

---
 src/app/ui/send-email-form.tsx | 28 +++++++++-----
 src/lib/actions.ts             | 70 ++++++++++++++++++----------------
 2 files changed, 56 insertions(+), 42 deletions(-)

diff --git a/src/app/ui/send-email-form.tsx b/src/app/ui/send-email-form.tsx
index 32cbf94..221f58d 100644
--- a/src/app/ui/send-email-form.tsx
+++ b/src/app/ui/send-email-form.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React, { useRef, useState, useEffect, FormEvent } from "react";
+import React, { useRef, useState, FormEvent } from "react";
 import { submitForm } from "@/lib/actions";
 import SelectDropdown from "@/app/ui/select-dropdown";
 import AttachDropdown from "./attach-dropdown";
@@ -41,19 +41,30 @@ export default function SendEmailForm() {
   const [showAttachUpload, setShowAttachUpload] = useState<boolean>(false);
 
   const [attachment_file_ids, setAttachment_file_ids] = useState<string[]>([]);
+  const [isGenerateCertificate, setIsGenerateCertificate] =
+    useState<boolean>(false);
 
   const onSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     if (!ref.current) return;
 
-    const formData = new FormData(ref.current);
-    formData.append("template_file_id", selectedHtmlFile);
-    formData.append("spreadsheet_file_id", selectedXlsxFile);
+    const formData = {
+      subject: (ref.current.querySelector("[id='subject']") as HTMLInputElement)
+        .value,
+      display_name: (
+        ref.current.querySelector("[id='display_name']") as HTMLInputElement
+      ).value,
+      template_file_id: selectedHtmlFile,
+      spreadsheet_file_id: selectedXlsxFile,
+      attachment_file_ids: attachment_file_ids,
+      is_generate_certificate: isGenerateCertificate,
+    };
 
+    console.log(formData.attachment_file_ids);
     setIsSubmitting(true);
     try {
       const response: SubmitResponse = (await submitForm(
-        formData
+        JSON.stringify(formData)
       )) as SubmitResponse;
 
       if (response.status === "error" && response.errors) {
@@ -67,7 +78,7 @@ export default function SendEmailForm() {
       }
 
       alert(response.status + ": " + response.message);
-      setErrors({}); // Clear previous errors
+      setErrors({});
       ref.current.reset();
     } catch (error: any) {
       alert("Failed to send form data: " + error.message);
@@ -76,14 +87,11 @@ export default function SendEmailForm() {
   };
 
   const handleHtmlSelect = (file_id: string, file_url: string) => {
-    // console.log("selected html file id", file_id);
     setSelectedHtmlFile(file_id);
     setHtmlPreviewLink(file_url);
   };
 
   const handleXlsxSelect = (file_id: string, file_url: string) => {
-    // console.log("selected xlsx file id", file_id);
-    // console.log("selected xlsx file url", file_url);
     setSelectedXlsxFile(file_id);
     setXlsxPreviewLink(file_url);
   };
@@ -91,7 +99,7 @@ export default function SendEmailForm() {
   const handleAttachSelect = (selectedFiles: any) => {
     const selected_ids = selectedFiles.map((file: any) => file.file_id);
     setAttachment_file_ids(selected_ids);
-    // console.log("selected attachment file ids", selected_ids);
+    console.log("selected attachment file ids", selected_ids);
   };
 
   const handleOpenHtmlUpload = () => {
diff --git a/src/lib/actions.ts b/src/lib/actions.ts
index 5dd5ccd..f734691 100644
--- a/src/lib/actions.ts
+++ b/src/lib/actions.ts
@@ -7,51 +7,57 @@ const formSchema = z.object({
   display_name: z.string().min(1, "Display name is required"),
   template_file_id: z.string().min(1, "Template file ID is required"),
   spreadsheet_file_id: z.string().min(1, "Spreadsheet file ID is required"),
+  attachment_file_ids: z.array(z.string()),
+  is_generate_certificate: z.boolean(),
 });
 
-export async function submitForm(formData: FormData) {
-  const data = formSchema.safeParse({
-    subject: formData.get("subject") as string,
-    display_name: formData.get("display_name") as string,
-    template_file_id: formData.get("template_file_id") as string,
-    spreadsheet_file_id: formData.get("spreadsheet_file_id") as string,
-  });
+export async function submitForm(data: string) {
+  const parsedData = JSON.parse(data);
+  const validation = formSchema.safeParse(parsedData);
 
-  if (!data.success) {
+  if (!validation.success) {
     return {
       status: "error",
       message: "Validation failed",
-      errors: data.error.errors,
+      errors: validation.error.errors.map((err) => ({
+        path: err.path.join('.'),
+        message: err.message,
+      })),
     };
   }
-  try {
-    console.log("data", data.data);
-    const base_url = "https://api.tpet.awseducate.systems/dev";
-    const url = new URL(`${base_url}/send-email`);
-    const response = await fetch(
-      url.toString(),
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(data.data)
-      }
-    );
 
-    const result = await response.json();
-    // console.log(result); 
+  try {
+    console.log("data", validation.data);
     return {
-      status: result.status,
-      message: result.message,
-      request_id: result.request_id,
-      timestamp: result.timestamp,
-      sqs_message_id: result.sqs_message_id,
-    };
+      status: "success",
+      message: "Form data is valid",
+    }
+    // const base_url = "https://api.tpet.awseducate.systems/dev";
+    // const url = new URL(`${base_url}/send-email`);
+    // const response = await fetch(
+    //   url.toString(),
+    //   {
+    //     method: "POST",
+    //     headers: {
+    //       "Content-Type": "application/json",
+    //     },
+    //     body: JSON.stringify(validation.data)
+    //   }
+    // );
+
+    // const result = await response.json();
+    // return {
+    //   status: result.status,
+    //   message: result.message,
+    //   request_id: result.request_id,
+    //   timestamp: result.timestamp,
+    //   sqs_message_id: result.sqs_message_id,
+    // };
   } catch (error: any) {
     return {
+      status: "error",
       message: "Error: Failed to Send Form Data. Please try again.",
       error: error.message,
     };
   }
-}
+}
\ No newline at end of file

From 4d4888f2a1f9ee9bc4ccda4aac787a73c56609ff Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Sat, 13 Jul 2024 23:55:33 +0800
Subject: [PATCH 10/29] feat: attach files and select whether you want a
 certification or not | SCRUM-75

---
 src/app/ui/send-email-form.tsx | 45 +++++++++++++++++++++++++++++++++
 src/lib/actions.ts             | 46 ++++++++++++++++------------------
 2 files changed, 66 insertions(+), 25 deletions(-)

diff --git a/src/app/ui/send-email-form.tsx b/src/app/ui/send-email-form.tsx
index 221f58d..8a5fa94 100644
--- a/src/app/ui/send-email-form.tsx
+++ b/src/app/ui/send-email-form.tsx
@@ -140,6 +140,12 @@ export default function SendEmailForm() {
     setPreviewXlsx(false);
   };
 
+  // const handleCertificateChange = (
+  //   event: React.ChangeEvent<HTMLInputElement>
+  // ) => {
+  //   setIsGenerateCertificate(event.target.value === "yes");
+  // };
+
   return (
     <>
       <div className="flex flex-col justify-center items-start">
@@ -407,6 +413,45 @@ export default function SendEmailForm() {
               <p className="text-red-500 text-sm">{errors.template_file_id}</p>
             )}
           </div>
+          <div className="my-5 mx-3">
+            <label className="mb-2 block text-sm font-medium">
+              Provide a certification of participation?
+            </label>
+            <div className="flex">
+              <div className="flex items-center me-4">
+                <input
+                  id="inline-radio"
+                  type="radio"
+                  value="yes"
+                  onChange={() => setIsGenerateCertificate(true)}
+                  name="inline-radio-group"
+                  className="w-4 h-4 text-blue-600 bg-white border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                ></input>
+                <label
+                  htmlFor="inline-radio"
+                  className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+                >
+                  Yes
+                </label>
+              </div>
+              <div className="flex items-center me-4">
+                <input
+                  id="inline-2-radio"
+                  type="radio"
+                  value="no"
+                  onChange={() => setIsGenerateCertificate(false)}
+                  name="inline-radio-group"
+                  className="w-4 h-4 text-blue-600 bg-white border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                ></input>
+                <label
+                  htmlFor="inline-2-radio"
+                  className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+                >
+                  No
+                </label>
+              </div>
+            </div>
+          </div>
         </div>
         <div className="w-full flex justify-end my-3 gap-3">
           {isSubmitting ? (
diff --git a/src/lib/actions.ts b/src/lib/actions.ts
index f734691..eeede93 100644
--- a/src/lib/actions.ts
+++ b/src/lib/actions.ts
@@ -27,32 +27,28 @@ export async function submitForm(data: string) {
   }
 
   try {
-    console.log("data", validation.data);
-    return {
-      status: "success",
-      message: "Form data is valid",
-    }
-    // const base_url = "https://api.tpet.awseducate.systems/dev";
-    // const url = new URL(`${base_url}/send-email`);
-    // const response = await fetch(
-    //   url.toString(),
-    //   {
-    //     method: "POST",
-    //     headers: {
-    //       "Content-Type": "application/json",
-    //     },
-    //     body: JSON.stringify(validation.data)
-    //   }
-    // );
+    // console.log("data", validation.data);
+    const base_url = "https://api.tpet.awseducate.systems/dev";
+    const url = new URL(`${base_url}/send-email`);
+    const response = await fetch(
+      url.toString(),
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(validation.data)
+      }
+    );
 
-    // const result = await response.json();
-    // return {
-    //   status: result.status,
-    //   message: result.message,
-    //   request_id: result.request_id,
-    //   timestamp: result.timestamp,
-    //   sqs_message_id: result.sqs_message_id,
-    // };
+    const result = await response.json();
+    return {
+      status: result.status,
+      message: result.message,
+      request_id: result.request_id,
+      timestamp: result.timestamp,
+      sqs_message_id: result.sqs_message_id,
+    };
   } catch (error: any) {
     return {
       status: "error",

From 156edf496ee125276a7d4a12b769a079b5e9362f Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Mon, 17 Jun 2024 21:56:52 +0800
Subject: [PATCH 11/29] feat: set up a simple rich editor using tiptap |
 SCRUM-11

---
 package-lock.json             | 621 +++++++++++++++++++++++++++++++++-
 package.json                  |   4 +
 src/app/richEditor/layout.tsx |  12 +
 src/app/richEditor/page.tsx   |  33 ++
 src/app/ui/Tiptap.tsx         |  33 ++
 src/app/ui/Toolbar.tsx        |  45 +++
 6 files changed, 745 insertions(+), 3 deletions(-)
 create mode 100644 src/app/richEditor/layout.tsx
 create mode 100644 src/app/richEditor/page.tsx
 create mode 100644 src/app/ui/Tiptap.tsx
 create mode 100644 src/app/ui/Toolbar.tsx

diff --git a/package-lock.json b/package-lock.json
index 3c1e89c..6f273ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,9 @@
       "version": "0.1.0",
       "dependencies": {
         "@heroicons/react": "^2.1.3",
+        "@tiptap/pm": "^2.4.0",
+        "@tiptap/react": "^2.4.0",
+        "@tiptap/starter-kit": "^2.4.0",
         "@types/draft-js": "^0.11.18",
         "draft-js": "^0.11.7",
         "draft-js-export-html": "^1.4.1",
@@ -16,6 +19,7 @@
         "flowbite": "^2.3.0",
         "flowbite-react": "^0.9.0",
         "formidable": "^3.5.1",
+        "lucide-react": "^0.395.0",
         "next": "14.2.3",
         "react": "^18",
         "react-dom": "^18",
@@ -492,6 +496,11 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@remirror/core-constants": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-2.0.2.tgz",
+      "integrity": "sha512-dyHY+sMF0ihPus3O27ODd4+agdHMEmuRdyiZJ2CCWjPV5UFmn17ZbElvk6WOGVE4rdCJKZQCrPV2BcikOMLUGQ=="
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.2.tgz",
@@ -512,6 +521,349 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tiptap/core": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.4.0.tgz",
+      "integrity": "sha512-YJSahk8pkxpCs8SflCZfTnJpE7IPyUWIylfgXM2DefjRQa5DZ+c6sNY0s/zbxKYFQ6AuHVX40r9pCfcqHChGxQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/pm": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-blockquote": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-blockquote/-/extension-blockquote-2.4.0.tgz",
+      "integrity": "sha512-nJJy4KsPgQqWTTDOWzFRdjCfG5+QExfZj44dulgDFNh+E66xhamnbM70PklllXJgEcge7xmT5oKM0gKls5XgFw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-bold": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bold/-/extension-bold-2.4.0.tgz",
+      "integrity": "sha512-csnW6hMDEHoRfxcPRLSqeJn+j35Lgtt1YRiOwn7DlS66sAECGRuoGfCvQSPij0TCDp4VCR9if5Sf8EymhnQumQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-bubble-menu": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.4.0.tgz",
+      "integrity": "sha512-s99HmttUtpW3rScWq8rqk4+CGCwergNZbHLTkF6Rp6TSboMwfp+rwL5Q/JkcAG9KGLso1vGyXKbt1xHOvm8zMw==",
+      "dependencies": {
+        "tippy.js": "^6.3.7"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/pm": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-bullet-list": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-2.4.0.tgz",
+      "integrity": "sha512-9S5DLIvFRBoExvmZ+/ErpTvs4Wf1yOEs8WXlKYUCcZssK7brTFj99XDwpHFA29HKDwma5q9UHhr2OB2o0JYAdw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-code": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-2.4.0.tgz",
+      "integrity": "sha512-wjhBukuiyJMq4cTcK3RBTzUPV24k5n1eEPlpmzku6ThwwkMdwynnMGMAmSF3fErh3AOyOUPoTTjgMYN2d10SJA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-code-block": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-2.4.0.tgz",
+      "integrity": "sha512-QWGdv1D56TBGbbJSj2cIiXGJEKguPiAl9ONzJ/Ql1ZksiQsYwx0YHriXX6TOC//T4VIf6NSClHEtwtxWBQ/Csg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/pm": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-document": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-2.4.0.tgz",
+      "integrity": "sha512-3jRodQJZDGbXlRPERaloS+IERg/VwzpC1IO6YSJR9jVIsBO6xC29P3cKTQlg1XO7p6ZH/0ksK73VC5BzzTwoHg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-dropcursor": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-dropcursor/-/extension-dropcursor-2.4.0.tgz",
+      "integrity": "sha512-c46HoG2PEEpSZv5rmS5UX/lJ6/kP1iVO0Ax+6JrNfLEIiDULUoi20NqdjolEa38La2VhWvs+o20OviiTOKEE9g==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/pm": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-floating-menu": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-floating-menu/-/extension-floating-menu-2.4.0.tgz",
+      "integrity": "sha512-vLb9v+htbHhXyty0oaXjT3VC8St4xuGSHWUB9GuAJAQ+NajIO6rBPbLUmm9qM0Eh2zico5mpSD1Qtn5FM6xYzg==",
+      "dependencies": {
+        "tippy.js": "^6.3.7"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/pm": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-gapcursor": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-2.4.0.tgz",
+      "integrity": "sha512-F4y/0J2lseohkFUw9P2OpKhrJ6dHz69ZScABUvcHxjznJLd6+0Zt7014Lw5PA8/m2d/w0fX8LZQ88pZr4quZPQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/pm": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-hard-break": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-2.4.0.tgz",
+      "integrity": "sha512-3+Z6zxevtHza5IsDBZ4lZqvNR3Kvdqwxq/QKCKu9UhJN1DUjsg/l1Jn2NilSQ3NYkBYh2yJjT8CMo9pQIu776g==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-heading": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-heading/-/extension-heading-2.4.0.tgz",
+      "integrity": "sha512-fYkyP/VMo7YHO76YVrUjd95Qeo0cubWn/Spavmwm1gLTHH/q7xMtbod2Z/F0wd6QHnc7+HGhO7XAjjKWDjldaw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-history": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-history/-/extension-history-2.4.0.tgz",
+      "integrity": "sha512-gr5qsKAXEVGr1Lyk1598F7drTaEtAxqZiuuSwTCzZzkiwgEQsWMWTWc9F8FlneCEaqe1aIYg6WKWlmYPaFwr0w==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/pm": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-horizontal-rule": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.4.0.tgz",
+      "integrity": "sha512-yDgxy+YxagcEsBbdWvbQiXYxsv3noS1VTuGwc9G7ZK9xPmBHJ5y0agOkB7HskwsZvJHoaSqNRsh7oZTkf0VR3g==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/pm": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-italic": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-2.4.0.tgz",
+      "integrity": "sha512-aaW/L9q+KNHHK+X73MPloHeIsT191n3VLd3xm6uUcFDnUNvzYJ/q65/1ZicdtCaOLvTutxdrEvhbkrVREX6a8g==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-list-item": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-2.4.0.tgz",
+      "integrity": "sha512-reUVUx+2cI2NIAqMZhlJ9uK/+zvRzm1GTmlU2Wvzwc7AwLN4yemj6mBDsmBLEXAKPvitfLh6EkeHaruOGymQtg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-ordered-list": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-2.4.0.tgz",
+      "integrity": "sha512-Zo0c9M0aowv+2+jExZiAvhCB83GZMjZsxywmuOrdUbq5EGYKb7q8hDyN3hkrktVHr9UPXdPAYTmLAHztTOHYRA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-paragraph": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-2.4.0.tgz",
+      "integrity": "sha512-+yse0Ow67IRwcACd9K/CzBcxlpr9OFnmf0x9uqpaWt1eHck1sJnti6jrw5DVVkyEBHDh/cnkkV49gvctT/NyCw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-strike": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-2.4.0.tgz",
+      "integrity": "sha512-pE1uN/fQPOMS3i+zxPYMmPmI3keubnR6ivwM+KdXWOMnBiHl9N4cNpJgq1n2eUUGKLurC2qrQHpnVyGAwBS6Vg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/extension-text": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-2.4.0.tgz",
+      "integrity": "sha512-LV0bvE+VowE8IgLca7pM8ll7quNH+AgEHRbSrsI3SHKDCYB9gTHMjWaAkgkUVaO1u0IfCrjnCLym/PqFKa+vvg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
+    "node_modules/@tiptap/pm": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.4.0.tgz",
+      "integrity": "sha512-B1HMEqGS4MzIVXnpgRZDLm30mxDWj51LkBT/if1XD+hj5gm8B9Q0c84bhvODX6KIs+c6z+zsY9VkVu8w9Yfgxg==",
+      "dependencies": {
+        "prosemirror-changeset": "^2.2.1",
+        "prosemirror-collab": "^1.3.1",
+        "prosemirror-commands": "^1.5.2",
+        "prosemirror-dropcursor": "^1.8.1",
+        "prosemirror-gapcursor": "^1.3.2",
+        "prosemirror-history": "^1.3.2",
+        "prosemirror-inputrules": "^1.3.0",
+        "prosemirror-keymap": "^1.2.2",
+        "prosemirror-markdown": "^1.12.0",
+        "prosemirror-menu": "^1.2.4",
+        "prosemirror-model": "^1.19.4",
+        "prosemirror-schema-basic": "^1.2.2",
+        "prosemirror-schema-list": "^1.3.0",
+        "prosemirror-state": "^1.4.3",
+        "prosemirror-tables": "^1.3.5",
+        "prosemirror-trailing-node": "^2.0.7",
+        "prosemirror-transform": "^1.8.0",
+        "prosemirror-view": "^1.32.7"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      }
+    },
+    "node_modules/@tiptap/react": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/react/-/react-2.4.0.tgz",
+      "integrity": "sha512-baxnIr6Dy+5iGagOEIKFeHzdl1ZRa6Cg+SJ3GDL/BVLpO6KiCM3Mm5ymB726UKP1w7icrBiQD2fGY3Bx8KaiSA==",
+      "dependencies": {
+        "@tiptap/extension-bubble-menu": "^2.4.0",
+        "@tiptap/extension-floating-menu": "^2.4.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/pm": "^2.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@tiptap/starter-kit": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/starter-kit/-/starter-kit-2.4.0.tgz",
+      "integrity": "sha512-DYYzMZdTEnRn9oZhKOeRCcB+TjhNz5icLlvJKoHoOGL9kCbuUyEf8WRR2OSPckI0+KUIPJL3oHRqO4SqSdTjfg==",
+      "dependencies": {
+        "@tiptap/core": "^2.4.0",
+        "@tiptap/extension-blockquote": "^2.4.0",
+        "@tiptap/extension-bold": "^2.4.0",
+        "@tiptap/extension-bullet-list": "^2.4.0",
+        "@tiptap/extension-code": "^2.4.0",
+        "@tiptap/extension-code-block": "^2.4.0",
+        "@tiptap/extension-document": "^2.4.0",
+        "@tiptap/extension-dropcursor": "^2.4.0",
+        "@tiptap/extension-gapcursor": "^2.4.0",
+        "@tiptap/extension-hard-break": "^2.4.0",
+        "@tiptap/extension-heading": "^2.4.0",
+        "@tiptap/extension-history": "^2.4.0",
+        "@tiptap/extension-horizontal-rule": "^2.4.0",
+        "@tiptap/extension-italic": "^2.4.0",
+        "@tiptap/extension-list-item": "^2.4.0",
+        "@tiptap/extension-ordered-list": "^2.4.0",
+        "@tiptap/extension-paragraph": "^2.4.0",
+        "@tiptap/extension-strike": "^2.4.0",
+        "@tiptap/extension-text": "^2.4.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      }
+    },
     "node_modules/@types/draft-js": {
       "version": "0.11.18",
       "resolved": "https://registry.npmjs.org/@types/draft-js/-/draft-js-0.11.18.tgz",
@@ -785,8 +1137,7 @@
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
     "node_modules/aria-query": {
       "version": "5.3.0",
@@ -1212,6 +1563,11 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
+    },
     "node_modules/cross-fetch": {
       "version": "3.1.8",
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.8.tgz",
@@ -1509,6 +1865,17 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.23.3",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
@@ -1671,7 +2038,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -3201,6 +3567,14 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -3241,6 +3615,35 @@
         "node": "14 || >=16.14"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.395.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.395.0.tgz",
+      "integrity": "sha512-6hzdNH5723A4FLaYZWpK50iyZH8iS2Jq5zuPRRotOFkhu6kxxJiebVdJ72tCR5XkiIeYFOU5NUawFZOac+VeYw==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/markdown-it": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3597,6 +4000,11 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/orderedmap": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-2.1.1.tgz",
+      "integrity": "sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g=="
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -3904,6 +4312,182 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/prosemirror-changeset": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.2.1.tgz",
+      "integrity": "sha512-J7msc6wbxB4ekDFj+n9gTW/jav/p53kdlivvuppHsrZXCaQdVgRghoZbSS3kwrRyAstRVQ4/+u5k7YfLgkkQvQ==",
+      "dependencies": {
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-collab": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-collab/-/prosemirror-collab-1.3.1.tgz",
+      "integrity": "sha512-4SnynYR9TTYaQVXd/ieUvsVV4PDMBzrq2xPUWutHivDuOshZXqQ5rGbZM84HEaXKbLdItse7weMGOUdDVcLKEQ==",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-commands": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.5.2.tgz",
+      "integrity": "sha512-hgLcPaakxH8tu6YvVAaILV2tXYsW3rAdDR8WNkeKGcgeMVQg3/TMhPdVoh7iAmfgVjZGtcOSjKiQaoeKjzd2mQ==",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-dropcursor": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.1.tgz",
+      "integrity": "sha512-M30WJdJZLyXHi3N8vxN6Zh5O8ZBbQCz0gURTfPmTIBNQ5pxrdU7A58QkNqfa98YEjSAL1HUyyU34f6Pm5xBSGw==",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0",
+        "prosemirror-view": "^1.1.0"
+      }
+    },
+    "node_modules/prosemirror-gapcursor": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.3.2.tgz",
+      "integrity": "sha512-wtjswVBd2vaQRrnYZaBCbyDqr232Ed4p2QPtRIUK5FuqHYKGWkEwl08oQM4Tw7DOR0FsasARV5uJFvMZWxdNxQ==",
+      "dependencies": {
+        "prosemirror-keymap": "^1.0.0",
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-view": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-history": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.4.0.tgz",
+      "integrity": "sha512-UUiGzDVcqo1lovOPdi9YxxUps3oBFWAIYkXLu3Ot+JPv1qzVogRbcizxK3LhHmtaUxclohgiOVesRw5QSlMnbQ==",
+      "dependencies": {
+        "prosemirror-state": "^1.2.2",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.31.0",
+        "rope-sequence": "^1.3.0"
+      }
+    },
+    "node_modules/prosemirror-inputrules": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.4.0.tgz",
+      "integrity": "sha512-6ygpPRuTJ2lcOXs9JkefieMst63wVJBgHZGl5QOytN7oSZs3Co/BYbc3Yx9zm9H37Bxw8kVzCnDsihsVsL4yEg==",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-keymap": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.2.2.tgz",
+      "integrity": "sha512-EAlXoksqC6Vbocqc0GtzCruZEzYgrn+iiGnNjsJsH4mrnIGex4qbLdWWNza3AW5W36ZRrlBID0eM6bdKH4OStQ==",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "w3c-keyname": "^2.2.0"
+      }
+    },
+    "node_modules/prosemirror-markdown": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.13.0.tgz",
+      "integrity": "sha512-UziddX3ZYSYibgx8042hfGKmukq5Aljp2qoBiJRejD/8MH70siQNz5RB1TrdTPheqLMy4aCe4GYNF10/3lQS5g==",
+      "dependencies": {
+        "markdown-it": "^14.0.0",
+        "prosemirror-model": "^1.20.0"
+      }
+    },
+    "node_modules/prosemirror-menu": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.2.4.tgz",
+      "integrity": "sha512-S/bXlc0ODQup6aiBbWVsX/eM+xJgCTAfMq/nLqaO5ID/am4wS0tTCIkzwytmao7ypEtjj39i7YbJjAgO20mIqA==",
+      "dependencies": {
+        "crelt": "^1.0.0",
+        "prosemirror-commands": "^1.0.0",
+        "prosemirror-history": "^1.0.0",
+        "prosemirror-state": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-model": {
+      "version": "1.21.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.21.1.tgz",
+      "integrity": "sha512-IVBAuMqOfltTr7yPypwpfdGT+6rGAteVOw2FO6GEvCGGa1ZwxLseqC1Eax/EChDvG/xGquB2d/hLdgh3THpsYg==",
+      "dependencies": {
+        "orderedmap": "^2.0.0"
+      }
+    },
+    "node_modules/prosemirror-schema-basic": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.2.tgz",
+      "integrity": "sha512-/dT4JFEGyO7QnNTe9UaKUhjDXbTNkiWTq/N4VpKaF79bBjSExVV2NXmJpcM7z/gD7mbqNjxbmWW5nf1iNSSGnw==",
+      "dependencies": {
+        "prosemirror-model": "^1.19.0"
+      }
+    },
+    "node_modules/prosemirror-schema-list": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.4.0.tgz",
+      "integrity": "sha512-nZOIq/AkBSzCENxUyLm5ltWE53e2PLk65ghMN8qLQptOmDVixZlPqtMeQdiNw0odL9vNpalEjl3upgRkuJ/Jyw==",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.7.3"
+      }
+    },
+    "node_modules/prosemirror-state": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.3.tgz",
+      "integrity": "sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.27.0"
+      }
+    },
+    "node_modules/prosemirror-tables": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.3.7.tgz",
+      "integrity": "sha512-oEwX1wrziuxMtwFvdDWSFHVUWrFJWt929kVVfHvtTi8yvw+5ppxjXZkMG/fuTdFo+3DXyIPSKfid+Be1npKXDA==",
+      "dependencies": {
+        "prosemirror-keymap": "^1.1.2",
+        "prosemirror-model": "^1.8.1",
+        "prosemirror-state": "^1.3.1",
+        "prosemirror-transform": "^1.2.1",
+        "prosemirror-view": "^1.13.3"
+      }
+    },
+    "node_modules/prosemirror-trailing-node": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-2.0.8.tgz",
+      "integrity": "sha512-ujRYhSuhQb1Jsarh1IHqb2KoSnRiD7wAMDGucP35DN7j5af6X7B18PfdPIrbwsPTqIAj0fyOvxbuPsWhNvylmA==",
+      "dependencies": {
+        "@remirror/core-constants": "^2.0.2",
+        "escape-string-regexp": "^4.0.0"
+      },
+      "peerDependencies": {
+        "prosemirror-model": "^1.19.0",
+        "prosemirror-state": "^1.4.2",
+        "prosemirror-view": "^1.31.2"
+      }
+    },
+    "node_modules/prosemirror-transform": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.9.0.tgz",
+      "integrity": "sha512-5UXkr1LIRx3jmpXXNKDhv8OyAOeLTGuXNwdVfg8x27uASna/wQkr9p6fD3eupGOi4PLJfbezxTyi/7fSJypXHg==",
+      "dependencies": {
+        "prosemirror-model": "^1.21.0"
+      }
+    },
+    "node_modules/prosemirror-view": {
+      "version": "1.33.8",
+      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.33.8.tgz",
+      "integrity": "sha512-4PhMr/ufz2cdvFgpUAnZfs+0xij3RsFysreeG9V/utpwX7AJtYCDVyuRxzWoMJIEf4C7wVihuBNMPpFLPCiLQw==",
+      "dependencies": {
+        "prosemirror-model": "^1.20.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3913,6 +4497,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -4110,6 +4702,11 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/rope-sequence": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz",
+      "integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ=="
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -4649,6 +5246,14 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tippy.js": {
+      "version": "6.3.7",
+      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+      "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+      "dependencies": {
+        "@popperjs/core": "^2.9.0"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -4831,6 +5436,11 @@
         "node": "*"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A=="
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -4866,6 +5476,11 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
diff --git a/package.json b/package.json
index 75ac98e..52d296a 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,9 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.1.3",
+    "@tiptap/pm": "^2.4.0",
+    "@tiptap/react": "^2.4.0",
+    "@tiptap/starter-kit": "^2.4.0",
     "@types/draft-js": "^0.11.18",
     "draft-js": "^0.11.7",
     "draft-js-export-html": "^1.4.1",
@@ -17,6 +20,7 @@
     "flowbite": "^2.3.0",
     "flowbite-react": "^0.9.0",
     "formidable": "^3.5.1",
+    "lucide-react": "^0.395.0",
     "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18",
diff --git a/src/app/richEditor/layout.tsx b/src/app/richEditor/layout.tsx
new file mode 100644
index 0000000..e2c0932
--- /dev/null
+++ b/src/app/richEditor/layout.tsx
@@ -0,0 +1,12 @@
+import SideNav from "@/app/ui/side-nav";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
+      <div className="w-full flex-none md:w-64">
+        <SideNav />
+      </div>
+      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
+    </div>
+  );
+}
diff --git a/src/app/richEditor/page.tsx b/src/app/richEditor/page.tsx
new file mode 100644
index 0000000..f8f0941
--- /dev/null
+++ b/src/app/richEditor/page.tsx
@@ -0,0 +1,33 @@
+"use client";
+import { useState } from "react";
+import TipTap from "@/app/ui/Tiptap";
+
+const htmltemplate = `
+    <p>親愛的 {姓名}，</p>
+    <p>您好！恭喜您成功加入<strong class="highlight">「6th AWS Educate Taiwan 雲端校園大使證照陪跑計畫」</strong>！非常高興您決定與我們一起踏上學習的旅程，共同探索雲端技術的無限可能！</p>
+    <p>為確保您能夠有效利用本計畫資源，校園大使團隊精心統整許多考照資源於在 Notion Page，並建立 Discord 社群以促進更深入的討論和即時互動，讓您可以輕鬆地提問並與大使互動問答。</p>
+    <p>您可以透過以下連結訪問：<br>Notion Page：<a target="_blank" href="https://aws-educate-tw.notion.site/AWS-0824fda6e4aa470e863c4d91daf9563a">點擊這裡</a><br>Discord 社群：{Discord Link}</p>
+    <p>【注意事項】<br>請記得定期追蹤計畫 Notion Page 和 Discord 社群，我們會定期更新資源和消息。<br>陪跑計畫包含證照課程與獎勵課程，獎勵課程需完成規定的課程進度才可以參與，詳細規則請見 Notion Page。</p>
+    <p>【開幕活動與報名資訊】<br>隨著「6th AWS Educate Taiwan 雲端校園大使證照陪跑計畫」正式啟動，誠摯邀請您參加 2024 年 5 月 3 日（星期五）舉行的開幕活動。開幕活動不僅標誌著計畫的正式啟動，也將針對計畫內容、規則等詳細說明，亦可與其他參與者相互認識、交流分享。<br>有意願參加開幕活動請填寫以下報名表單，<span class="important">表單將於 4/29（一）18:00 截止</span>：<a target="_blank" href="https://www.surveycake.com/s/VKO3k">點擊這裡</a></p>
+    <p>若您有任何問題或需要進一步協助，請隨時與我們聯繫，我們將竭誠為您服務！</p>
+    <p>台灣 AWS Educate Cloud Ambassador 官方社群：Facebook＆Instagram</p>
+    <p>Best regards,</p>
+    <p>Bill Wu</p>
+    <p>AWS Educate Cloud Ambassadorbillwu0222@gmail.com</p>`;
+
+export default function Page() {
+  const [content, setContent] = useState(htmltemplate);
+
+  const handleContentChange = (reason: any) => {
+    setContent(reason);
+  };
+
+  return (
+    <div>
+      <TipTap
+        content={content}
+        onChange={(newContent: string) => handleContentChange(newContent)}
+      />
+    </div>
+  );
+}
diff --git a/src/app/ui/Tiptap.tsx b/src/app/ui/Tiptap.tsx
new file mode 100644
index 0000000..53e2c39
--- /dev/null
+++ b/src/app/ui/Tiptap.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Toolbar from "@/app/ui/Toolbar";
+
+const Tiptap = ({ onChange, content }: any) => {
+  const hangdleChange = (newContent: string) => {
+    onChange(newContent);
+  };
+
+  const editor = useEditor({
+    extensions: [StarterKit],
+    editorProps: {
+      attributes: {
+        class:
+          "flex min-h-96 flex-col px-4 justify-start border-b border-l border-r border-gray-700 text-gray-400 items-start w-full gap-3 font-medium pt-4 rounded-bl-md rounded-br-md outline-none focus:ring-2 focus:ring-sky-900 focus:ring-opacity-50",
+      },
+    },
+    onUpdate: ({ editor }) => {
+      hangdleChange(editor.getHTML());
+    },
+  });
+
+  return (
+    <div className="w-full px-4">
+      <Toolbar editor={editor} content={content} />
+      <EditorContent style={{ whiteSpace: "pre-line" }} editor={editor} />
+    </div>
+  );
+};
+
+export default Tiptap;
diff --git a/src/app/ui/Toolbar.tsx b/src/app/ui/Toolbar.tsx
new file mode 100644
index 0000000..3b5c998
--- /dev/null
+++ b/src/app/ui/Toolbar.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import { type Editor } from "@tiptap/react";
+import {
+  Bold,
+  Strikethrough,
+  Italic,
+  List,
+  ListOrdered,
+  Heading2,
+  Underline,
+  Quote,
+  Undo,
+  Redo,
+  Code,
+} from "lucide-react";
+
+type Props = {
+  editor: Editor | null;
+  content: string;
+};
+
+const Toolbar = ({ editor, content }: Props) => {
+  if (!editor) return null;
+  return (
+    <div className="px-4 py-3 rounded-tl-md rounded-tr-md flex justify-between items-start gap-5 w-full flex-wrap border border-gray-700">
+      <div className="flex justify-start items-center gap-5 w-full lg:w-10/12 flex-wrap">
+        <button
+          onClick={(e) => {
+            e.preventDefault();
+            editor.chain().focus().toggleBold().run();
+          }}
+          className={
+            editor.isActive("bold")
+              ? "bg-sky-700 text-white p-1 rounded-lg"
+              : "text-sky-400 p-1"
+          }
+        >
+          <Bold className="w-5 h-5" />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Toolbar;

From d04e3186f06884613e11e242c6106ab08887cf7d Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Mon, 17 Jun 2024 22:12:55 +0800
Subject: [PATCH 12/29] feat: add other functions of rich editor | SCRUM-11

---
 package-lock.json      |  13 +++++
 package.json           |   1 +
 src/app/ui/Tiptap.tsx  |   3 +-
 src/app/ui/Toolbar.tsx | 119 ++++++++++++++++++++++++++++++++++++++++-
 4 files changed, 134 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6f273ac..28bf470 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@heroicons/react": "^2.1.3",
+        "@tiptap/extension-underline": "^2.4.0",
         "@tiptap/pm": "^2.4.0",
         "@tiptap/react": "^2.4.0",
         "@tiptap/starter-kit": "^2.4.0",
@@ -786,6 +787,18 @@
         "@tiptap/core": "^2.0.0"
       }
     },
+    "node_modules/@tiptap/extension-underline": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-2.4.0.tgz",
+      "integrity": "sha512-guWojb7JxUwLz4OKzwNExJwOkhZjgw/ttkXCMBT0PVe55k998MMYe1nvN0m2SeTW9IxurEPtScH4kYJ0XuSm8Q==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
     "node_modules/@tiptap/pm": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.4.0.tgz",
diff --git a/package.json b/package.json
index 52d296a..b63cd4b 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.1.3",
+    "@tiptap/extension-underline": "^2.4.0",
     "@tiptap/pm": "^2.4.0",
     "@tiptap/react": "^2.4.0",
     "@tiptap/starter-kit": "^2.4.0",
diff --git a/src/app/ui/Tiptap.tsx b/src/app/ui/Tiptap.tsx
index 53e2c39..0eb3d95 100644
--- a/src/app/ui/Tiptap.tsx
+++ b/src/app/ui/Tiptap.tsx
@@ -3,6 +3,7 @@
 import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Toolbar from "@/app/ui/Toolbar";
+import { Underline } from "@tiptap/extension-underline";
 
 const Tiptap = ({ onChange, content }: any) => {
   const hangdleChange = (newContent: string) => {
@@ -10,7 +11,7 @@ const Tiptap = ({ onChange, content }: any) => {
   };
 
   const editor = useEditor({
-    extensions: [StarterKit],
+    extensions: [StarterKit, Underline],
     editorProps: {
       attributes: {
         class:
diff --git a/src/app/ui/Toolbar.tsx b/src/app/ui/Toolbar.tsx
index 3b5c998..c370f8a 100644
--- a/src/app/ui/Toolbar.tsx
+++ b/src/app/ui/Toolbar.tsx
@@ -11,7 +11,6 @@ import {
   Quote,
   Undo,
   Redo,
-  Code,
 } from "lucide-react";
 
 type Props = {
@@ -37,6 +36,124 @@ const Toolbar = ({ editor, content }: Props) => {
         >
           <Bold className="w-5 h-5" />
         </button>
+        <button
+          onClick={(e) => {
+            e.preventDefault();
+            editor.chain().focus().toggleItalic().run();
+          }}
+          className={
+            editor.isActive("italic")
+              ? "bg-sky-700 text-white p-1 rounded-lg"
+              : "text-sky-400 p-1"
+          }
+        >
+          <Italic className="w-5 h-5" />
+        </button>
+        <button
+          onClick={(e) => {
+            e.preventDefault();
+            editor.chain().focus().toggleUnderline().run();
+          }}
+          className={
+            editor.isActive("underline")
+              ? "bg-sky-700 text-white p-1 rounded-lg"
+              : "text-sky-400 p-1"
+          }
+        >
+          <Underline className="w-5 h-5" />
+        </button>
+        <button
+          onClick={(e) => {
+            e.preventDefault();
+            editor.chain().focus().toggleStrike().run();
+          }}
+          className={
+            editor.isActive("strike")
+              ? "bg-sky-700 text-white p-1 rounded-lg"
+              : "text-sky-400 p-1"
+          }
+        >
+          <Strikethrough className="w-5 h-5" />
+        </button>
+        <button
+          onClick={(e) => {
+            e.preventDefault();
+            editor.chain().focus().toggleHeading({ level: 2 }).run();
+          }}
+          className={
+            editor.isActive("heading", { level: 2 })
+              ? "bg-sky-700 text-white p-1 rounded-lg"
+              : "text-sky-400 p-1"
+          }
+        >
+          <Heading2 className="w-5 h-5" />
+        </button>
+
+        <button
+          onClick={(e) => {
+            e.preventDefault();
+            editor.chain().focus().toggleBulletList().run();
+          }}
+          className={
+            editor.isActive("bulletList")
+              ? "bg-sky-700 text-white p-1 rounded-lg"
+              : "text-sky-400 p-1"
+          }
+        >
+          <List className="w-5 h-5" />
+        </button>
+        <button
+          onClick={(e) => {
+            e.preventDefault();
+            editor.chain().focus().toggleOrderedList().run();
+          }}
+          className={
+            editor.isActive("orderedList")
+              ? "bg-sky-700 text-white p-1 rounded-lg"
+              : "text-sky-400 p-1"
+          }
+        >
+          <ListOrdered className="w-5 h-5" />
+        </button>
+        <button
+          onClick={(e) => {
+            e.preventDefault();
+            editor.chain().focus().toggleBlockquote().run();
+          }}
+          className={
+            editor.isActive("blockquote")
+              ? "bg-sky-700 text-white p-1 rounded-lg"
+              : "text-sky-400 p-1"
+          }
+        >
+          <Quote className="w-5 h-5" />
+        </button>
+        <button
+          onClick={(e) => {
+            e.preventDefault();
+            editor.chain().focus().undo().run();
+          }}
+          className={
+            editor.isActive("undo")
+              ? "bg-sky-700 text-white p-1 rounded-lg"
+              : "text-sky-400 hover:bg-sky-700 hover:text-white p-1 hover:rounded-lg"
+          }
+        >
+          <Undo className="w-5 h-5" />
+        </button>
+        <button
+          onClick={(e) => {
+            e.preventDefault();
+            editor.chain().focus().redo().run();
+          }}
+          className={
+            editor.isActive("redo")
+              ? "bg-sky-700 text-white p-1 rounded-lg"
+              : "text-sky-400 hover:bg-sky-700 hover:text-white p-1 hover:rounded-lg"
+          }
+        >
+          <Redo className="w-5 h-5" />
+        </button>
       </div>
     </div>
   );

From ab368615159f03e21d81f07cc65c1ce30f9861ff Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Mon, 17 Jun 2024 23:00:50 +0800
Subject: [PATCH 13/29] fix: add a style.scss to fix the indent problem of
 bulletList | SCRUM-11

---
 package-lock.json           |  65 +++++++++++
 package.json                |   4 +
 src/app/richEditor/page.tsx |  15 +--
 src/app/ui/Tiptap.tsx       |  19 +++-
 src/app/ui/Toolbar.tsx      |  29 ++++-
 src/app/ui/styles.scss      | 213 ++++++++++++++++++++++++++++++++++++
 tailwind.config.ts          |   3 +-
 7 files changed, 331 insertions(+), 17 deletions(-)
 create mode 100644 src/app/ui/styles.scss

diff --git a/package-lock.json b/package-lock.json
index 28bf470..cff8915 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,8 @@
       "version": "0.1.0",
       "dependencies": {
         "@heroicons/react": "^2.1.3",
+        "@tiptap/extension-bullet-list": "^2.4.0",
+        "@tiptap/extension-list-item": "^2.4.0",
         "@tiptap/extension-underline": "^2.4.0",
         "@tiptap/pm": "^2.4.0",
         "@tiptap/react": "^2.4.0",
@@ -24,9 +26,11 @@
         "next": "14.2.3",
         "react": "^18",
         "react-dom": "^18",
+        "sass": "^1.77.5",
         "zod": "^3.23.4"
       },
       "devDependencies": {
+        "@tailwindcss/typography": "^0.5.13",
         "@types/formidable": "^3.4.5",
         "@types/node": "^20",
         "@types/react": "^18",
@@ -522,6 +526,34 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.13.tgz",
+      "integrity": "sha512-ADGcJ8dX21dVVHIwTRgzrcunY6YY9uSlAHHGVKvkA+vLc5qLwEszvKts40lx7z0qc4clpjclwLeK5rVCV2P/uw==",
+      "dev": true,
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
+    "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@tiptap/core": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.4.0.tgz",
@@ -3603,6 +3635,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4777,6 +4821,27 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sass": {
+      "version": "1.77.5",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.5.tgz",
+      "integrity": "sha512-oDfX1mukIlxacPdQqNb6mV2tVCrnE+P3nVYioy72V5tlk56CPNcO4TCuFcaCRKKfJ1M3lH95CleRS+dVKL2qMg==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass/node_modules/immutable": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
+      "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ=="
+    },
     "node_modules/scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
diff --git a/package.json b/package.json
index b63cd4b..a6e43db 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.1.3",
+    "@tiptap/extension-bullet-list": "^2.4.0",
+    "@tiptap/extension-list-item": "^2.4.0",
     "@tiptap/extension-underline": "^2.4.0",
     "@tiptap/pm": "^2.4.0",
     "@tiptap/react": "^2.4.0",
@@ -25,9 +27,11 @@
     "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18",
+    "sass": "^1.77.5",
     "zod": "^3.23.4"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.13",
     "@types/formidable": "^3.4.5",
     "@types/node": "^20",
     "@types/react": "^18",
diff --git a/src/app/richEditor/page.tsx b/src/app/richEditor/page.tsx
index f8f0941..65539ef 100644
--- a/src/app/richEditor/page.tsx
+++ b/src/app/richEditor/page.tsx
@@ -2,21 +2,8 @@
 import { useState } from "react";
 import TipTap from "@/app/ui/Tiptap";
 
-const htmltemplate = `
-    <p>親愛的 {姓名}，</p>
-    <p>您好！恭喜您成功加入<strong class="highlight">「6th AWS Educate Taiwan 雲端校園大使證照陪跑計畫」</strong>！非常高興您決定與我們一起踏上學習的旅程，共同探索雲端技術的無限可能！</p>
-    <p>為確保您能夠有效利用本計畫資源，校園大使團隊精心統整許多考照資源於在 Notion Page，並建立 Discord 社群以促進更深入的討論和即時互動，讓您可以輕鬆地提問並與大使互動問答。</p>
-    <p>您可以透過以下連結訪問：<br>Notion Page：<a target="_blank" href="https://aws-educate-tw.notion.site/AWS-0824fda6e4aa470e863c4d91daf9563a">點擊這裡</a><br>Discord 社群：{Discord Link}</p>
-    <p>【注意事項】<br>請記得定期追蹤計畫 Notion Page 和 Discord 社群，我們會定期更新資源和消息。<br>陪跑計畫包含證照課程與獎勵課程，獎勵課程需完成規定的課程進度才可以參與，詳細規則請見 Notion Page。</p>
-    <p>【開幕活動與報名資訊】<br>隨著「6th AWS Educate Taiwan 雲端校園大使證照陪跑計畫」正式啟動，誠摯邀請您參加 2024 年 5 月 3 日（星期五）舉行的開幕活動。開幕活動不僅標誌著計畫的正式啟動，也將針對計畫內容、規則等詳細說明，亦可與其他參與者相互認識、交流分享。<br>有意願參加開幕活動請填寫以下報名表單，<span class="important">表單將於 4/29（一）18:00 截止</span>：<a target="_blank" href="https://www.surveycake.com/s/VKO3k">點擊這裡</a></p>
-    <p>若您有任何問題或需要進一步協助，請隨時與我們聯繫，我們將竭誠為您服務！</p>
-    <p>台灣 AWS Educate Cloud Ambassador 官方社群：Facebook＆Instagram</p>
-    <p>Best regards,</p>
-    <p>Bill Wu</p>
-    <p>AWS Educate Cloud Ambassadorbillwu0222@gmail.com</p>`;
-
 export default function Page() {
-  const [content, setContent] = useState(htmltemplate);
+  const [content, setContent] = useState("");
 
   const handleContentChange = (reason: any) => {
     setContent(reason);
diff --git a/src/app/ui/Tiptap.tsx b/src/app/ui/Tiptap.tsx
index 0eb3d95..2ffc839 100644
--- a/src/app/ui/Tiptap.tsx
+++ b/src/app/ui/Tiptap.tsx
@@ -4,6 +4,22 @@ import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Toolbar from "@/app/ui/Toolbar";
 import { Underline } from "@tiptap/extension-underline";
+import BulletList from "@tiptap/extension-bullet-list";
+import ListItem from "@tiptap/extension-list-item";
+import "./styles.scss";
+
+const htmltemplate = `
+    <p>親愛的 {姓名}，</p>
+    <p>您好！恭喜您成功加入<strong class="highlight">「6th AWS Educate Taiwan 雲端校園大使證照陪跑計畫」</strong>！非常高興您決定與我們一起踏上學習的旅程，共同探索雲端技術的無限可能！</p>
+    <p>為確保您能夠有效利用本計畫資源，校園大使團隊精心統整許多考照資源於在 Notion Page，並建立 Discord 社群以促進更深入的討論和即時互動，讓您可以輕鬆地提問並與大使互動問答。</p>
+    <p>您可以透過以下連結訪問：<br>Notion Page：<a target="_blank" href="https://aws-educate-tw.notion.site/AWS-0824fda6e4aa470e863c4d91daf9563a">點擊這裡</a><br>Discord 社群：{Discord Link}</p>
+    <p>【注意事項】<br>請記得定期追蹤計畫 Notion Page 和 Discord 社群，我們會定期更新資源和消息。<br>陪跑計畫包含證照課程與獎勵課程，獎勵課程需完成規定的課程進度才可以參與，詳細規則請見 Notion Page。</p>
+    <p>【開幕活動與報名資訊】<br>隨著「6th AWS Educate Taiwan 雲端校園大使證照陪跑計畫」正式啟動，誠摯邀請您參加 2024 年 5 月 3 日（星期五）舉行的開幕活動。開幕活動不僅標誌著計畫的正式啟動，也將針對計畫內容、規則等詳細說明，亦可與其他參與者相互認識、交流分享。<br>有意願參加開幕活動請填寫以下報名表單，<span class="important">表單將於 4/29（一）18:00 截止</span>：<a target="_blank" href="https://www.surveycake.com/s/VKO3k">點擊這裡</a></p>
+    <p>若您有任何問題或需要進一步協助，請隨時與我們聯繫，我們將竭誠為您服務！</p>
+    <p>台灣 AWS Educate Cloud Ambassador 官方社群：Facebook＆Instagram</p>
+    <p>Best regards,</p>
+    <p>Bill Wu</p>
+    <p>AWS Educate Cloud Ambassadorbillwu0222@gmail.com</p>`;
 
 const Tiptap = ({ onChange, content }: any) => {
   const hangdleChange = (newContent: string) => {
@@ -11,13 +27,14 @@ const Tiptap = ({ onChange, content }: any) => {
   };
 
   const editor = useEditor({
-    extensions: [StarterKit, Underline],
+    extensions: [StarterKit, Underline, BulletList, ListItem],
     editorProps: {
       attributes: {
         class:
           "flex min-h-96 flex-col px-4 justify-start border-b border-l border-r border-gray-700 text-gray-400 items-start w-full gap-3 font-medium pt-4 rounded-bl-md rounded-br-md outline-none focus:ring-2 focus:ring-sky-900 focus:ring-opacity-50",
       },
     },
+    content: htmltemplate,
     onUpdate: ({ editor }) => {
       hangdleChange(editor.getHTML());
     },
diff --git a/src/app/ui/Toolbar.tsx b/src/app/ui/Toolbar.tsx
index c370f8a..8b4ad88 100644
--- a/src/app/ui/Toolbar.tsx
+++ b/src/app/ui/Toolbar.tsx
@@ -6,7 +6,9 @@ import {
   Italic,
   List,
   ListOrdered,
+  Heading1,
   Heading2,
+  Heading3,
   Underline,
   Quote,
   Undo,
@@ -75,6 +77,19 @@ const Toolbar = ({ editor, content }: Props) => {
         >
           <Strikethrough className="w-5 h-5" />
         </button>
+        <button
+          onClick={(e) => {
+            e.preventDefault();
+            editor.chain().focus().toggleHeading({ level: 1 }).run();
+          }}
+          className={
+            editor.isActive("heading", { level: 1 })
+              ? "bg-sky-700 text-white p-1 rounded-lg"
+              : "text-sky-400 p-1"
+          }
+        >
+          <Heading1 className="w-5 h-5" />
+        </button>
         <button
           onClick={(e) => {
             e.preventDefault();
@@ -88,7 +103,19 @@ const Toolbar = ({ editor, content }: Props) => {
         >
           <Heading2 className="w-5 h-5" />
         </button>
-
+        <button
+          onClick={(e) => {
+            e.preventDefault();
+            editor.chain().focus().toggleHeading({ level: 3 }).run();
+          }}
+          className={
+            editor.isActive("heading", { level: 3 })
+              ? "bg-sky-700 text-white p-1 rounded-lg"
+              : "text-sky-400 p-1"
+          }
+        >
+          <Heading3 className="w-5 h-5" />
+        </button>
         <button
           onClick={(e) => {
             e.preventDefault();
diff --git a/src/app/ui/styles.scss b/src/app/ui/styles.scss
new file mode 100644
index 0000000..c82a1e0
--- /dev/null
+++ b/src/app/ui/styles.scss
@@ -0,0 +1,213 @@
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+
+  img {
+    max-width: 500px;
+    max-height: 500px;
+
+    &.ProseMirror-selectednode {
+      outline: 3px solid #000000;
+    }
+  }
+
+  ul{
+    list-style: disc;
+  }
+  ol{
+    list-style: decimal;
+  }
+
+  ul,
+  ol {
+    padding: 0 1rem;
+  }
+
+  h1{
+    font-size: 2em;
+  }
+  h2{
+    font-size: 1.5em;
+  }
+  h3{
+    font-size: 1.17em;
+  }
+  h4{
+    font-size: 1em;
+  }
+  h5{
+    font-size: 0.83em;
+  }
+  h6{
+    font-size: 0.67em;
+  }
+
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    font-weight: bold;
+  }
+
+  code {
+    background-color: rgba(#616161, 0.1);
+    color: #616161;
+  }
+
+  pre {
+    background: #0D0D0D;
+    color: #FFF;
+    font-family: 'JetBrainsMono', monospace;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+
+    code {
+      color: inherit;
+      padding: 0;
+      background: none;
+      font-size: 0.8rem;
+    }
+    .hljs-comment,
+    .hljs-quote {
+      color: #616161;
+    }
+
+    .hljs-variable,
+    .hljs-template-variable,
+    .hljs-attribute,
+    .hljs-tag,
+    .hljs-name,
+    .hljs-regexp,
+    .hljs-link,
+    .hljs-name,
+    .hljs-selector-id,
+    .hljs-selector-class {
+      color: #f98181;
+    }
+
+    .hljs-number,
+    .hljs-meta,
+    .hljs-built_in,
+    .hljs-builtin-name,
+    .hljs-literal,
+    .hljs-type,
+    .hljs-params {
+      color: #fbbc88;
+    }
+
+    .hljs-string,
+    .hljs-symbol,
+    .hljs-bullet {
+      color: #b9f18d;
+    }
+
+    .hljs-title,
+    .hljs-section {
+      color: #faf594;
+    }
+
+    .hljs-keyword,
+    .hljs-selector-tag {
+      color: #70cff8;
+    }
+
+    .hljs-emphasis {
+      font-style: italic;
+    }
+
+    .hljs-strong {
+      font-weight: 700;
+    }
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  blockquote {
+    padding-left: 1rem;
+    border-left: 2px solid rgba(#0D0D0D, 0.1);
+  }
+
+  hr {
+    border: none;
+    border-top: 2px solid rgba(#0D0D0D, 0.1);
+    margin: 2rem 0;
+  }
+
+  mark {
+    background-color: #FAF594;
+  }
+
+  //  table
+  table {
+    border-collapse: collapse;
+    margin: 0;
+    overflow: hidden;
+    table-layout: fixed;
+    width: 100%;
+
+    td,
+    th {
+      border: 2px solid #ced4da;
+      box-sizing: border-box;
+      min-width: 1em;
+      padding: 3px 5px;
+      position: relative;
+      vertical-align: top;
+
+      > * {
+        margin-bottom: 0;
+      }
+    }
+
+    th {
+      background-color: #f1f3f5;
+      font-weight: bold;
+      text-align: left;
+    }
+
+    .selectedCell:after {
+      background: rgba(200, 200, 255, 0.4);
+      content: "";
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      pointer-events: none;
+      position: absolute;
+      z-index: 2;
+    }
+
+    .column-resize-handle {
+      background-color: #adf;
+      bottom: -2px;
+      position: absolute;
+      right: -2px;
+      pointer-events: none;
+      top: 0;
+      width: 4px;
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+}
+
+.tableWrapper {
+  padding: 1rem 0;
+  overflow-x: auto;
+}
+
+.resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 998c02a..632bd32 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -19,7 +19,8 @@ const config: Config = {
     },
   },
   plugins: [
-    require("flowbite/plugin")
+    require("flowbite/plugin"),
+    require('@tailwindcss/typography'),
   ],
 };
 export default config;
\ No newline at end of file

From b501ed552c1ef6163dc4fce5ffe4fae8cf4d9e1e Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Mon, 17 Jun 2024 23:19:59 +0800
Subject: [PATCH 14/29] feat: add a link button for the rich editor | SCRUM-11

---
 package-lock.json      | 22 ++++++++++++++++++++++
 package.json           |  1 +
 src/app/ui/Tiptap.tsx  | 12 +++++++++++-
 src/app/ui/Toolbar.tsx | 39 +++++++++++++++++++++++++++++++++++++--
 src/app/ui/styles.scss |  9 +++++++++
 5 files changed, 80 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cff8915..d5aec1b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@heroicons/react": "^2.1.3",
         "@tiptap/extension-bullet-list": "^2.4.0",
+        "@tiptap/extension-link": "^2.4.0",
         "@tiptap/extension-list-item": "^2.4.0",
         "@tiptap/extension-underline": "^2.4.0",
         "@tiptap/pm": "^2.4.0",
@@ -759,6 +760,22 @@
         "@tiptap/core": "^2.0.0"
       }
     },
+    "node_modules/@tiptap/extension-link": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-link/-/extension-link-2.4.0.tgz",
+      "integrity": "sha512-r3PjT0bjSKAorHAEBPA0icSMOlqALbxVlWU9vAc+Q3ndzt7ht0CTPNewzFF9kjzARABVt1cblXP/2+c0qGzcsg==",
+      "dependencies": {
+        "linkifyjs": "^4.1.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/pm": "^2.0.0"
+      }
+    },
     "node_modules/@tiptap/extension-list-item": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-2.4.0.tgz",
@@ -3620,6 +3637,11 @@
         "uc.micro": "^2.0.0"
       }
     },
+    "node_modules/linkifyjs": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.1.3.tgz",
+      "integrity": "sha512-auMesunaJ8yfkHvK4gfg1K0SaKX/6Wn9g2Aac/NwX+l5VdmFZzo/hdPGxEOETj+ryRa4/fiOPjeeKURSAJx1sg=="
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
diff --git a/package.json b/package.json
index a6e43db..477920a 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@heroicons/react": "^2.1.3",
     "@tiptap/extension-bullet-list": "^2.4.0",
+    "@tiptap/extension-link": "^2.4.0",
     "@tiptap/extension-list-item": "^2.4.0",
     "@tiptap/extension-underline": "^2.4.0",
     "@tiptap/pm": "^2.4.0",
diff --git a/src/app/ui/Tiptap.tsx b/src/app/ui/Tiptap.tsx
index 2ffc839..834b93e 100644
--- a/src/app/ui/Tiptap.tsx
+++ b/src/app/ui/Tiptap.tsx
@@ -6,6 +6,7 @@ import Toolbar from "@/app/ui/Toolbar";
 import { Underline } from "@tiptap/extension-underline";
 import BulletList from "@tiptap/extension-bullet-list";
 import ListItem from "@tiptap/extension-list-item";
+import { Link } from "@tiptap/extension-link";
 import "./styles.scss";
 
 const htmltemplate = `
@@ -27,7 +28,16 @@ const Tiptap = ({ onChange, content }: any) => {
   };
 
   const editor = useEditor({
-    extensions: [StarterKit, Underline, BulletList, ListItem],
+    extensions: [
+      StarterKit,
+      Underline,
+      BulletList,
+      ListItem,
+      Link.configure({
+        openOnClick: false,
+        autolink: true,
+      }),
+    ],
     editorProps: {
       attributes: {
         class:
diff --git a/src/app/ui/Toolbar.tsx b/src/app/ui/Toolbar.tsx
index 8b4ad88..b491632 100644
--- a/src/app/ui/Toolbar.tsx
+++ b/src/app/ui/Toolbar.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { type Editor } from "@tiptap/react";
 import {
   Bold,
@@ -13,6 +13,7 @@ import {
   Quote,
   Undo,
   Redo,
+  Link,
 } from "lucide-react";
 
 type Props = {
@@ -21,10 +22,44 @@ type Props = {
 };
 
 const Toolbar = ({ editor, content }: Props) => {
-  if (!editor) return null;
+  if (!editor) {
+    return null;
+  }
+
+  const setLink = useCallback(() => {
+    const previousUrl = editor.getAttributes("link").href;
+    const url = window.prompt("URL", previousUrl);
+
+    // cancelled
+    if (url === null) {
+      return;
+    }
+
+    // empty
+    if (url === "") {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+
+      return;
+    }
+
+    // update link
+    editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+  }, [editor]);
+
   return (
     <div className="px-4 py-3 rounded-tl-md rounded-tr-md flex justify-between items-start gap-5 w-full flex-wrap border border-gray-700">
       <div className="flex justify-start items-center gap-5 w-full lg:w-10/12 flex-wrap">
+        <button
+          onClick={setLink}
+          className={
+            editor.isActive("link")
+              ? "bg-sky-700 text-white p-1 rounded-lg"
+              : "text-sky-400 p-1"
+          }
+        >
+          <Link className="w-5 h-5" />
+        </button>
+
         <button
           onClick={(e) => {
             e.preventDefault();
diff --git a/src/app/ui/styles.scss b/src/app/ui/styles.scss
index c82a1e0..a4a2a0b 100644
--- a/src/app/ui/styles.scss
+++ b/src/app/ui/styles.scss
@@ -210,4 +210,13 @@
 .resize-cursor {
   cursor: ew-resize;
   cursor: col-resize;
+}
+
+a {
+  color: blue;
+  cursor: pointer;
+
+  &:hover {
+    color: dodgerblue;
+  }
 }
\ No newline at end of file

From 7b56d13577c2e4d2de71c29428acebd99636a58c Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Tue, 18 Jun 2024 17:21:08 +0800
Subject: [PATCH 15/29] feat: add a image button to upload image with
 capability of resizing | SCRUM-11

---
 package-lock.json      | 24 ++++++++++++++++++++++++
 package.json           |  2 ++
 src/app/ui/Tiptap.tsx  |  6 +++++-
 src/app/ui/Toolbar.tsx | 24 +++++++++++++++++++++++-
 src/app/ui/styles.scss | 13 +++++--------
 5 files changed, 59 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d5aec1b..6ddde8d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@heroicons/react": "^2.1.3",
         "@tiptap/extension-bullet-list": "^2.4.0",
+        "@tiptap/extension-image": "^2.4.0",
         "@tiptap/extension-link": "^2.4.0",
         "@tiptap/extension-list-item": "^2.4.0",
         "@tiptap/extension-underline": "^2.4.0",
@@ -28,6 +29,7 @@
         "react": "^18",
         "react-dom": "^18",
         "sass": "^1.77.5",
+        "tiptap-extension-resize-image": "^1.1.7",
         "zod": "^3.23.4"
       },
       "devDependencies": {
@@ -748,6 +750,18 @@
         "@tiptap/pm": "^2.0.0"
       }
     },
+    "node_modules/@tiptap/extension-image": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-image/-/extension-image-2.4.0.tgz",
+      "integrity": "sha512-NIVhRPMO/ONo8OywEd+8zh0Q6Q7EbFHtBxVsvfOKj9KtZkaXQfUO4MzONTyptkvAchTpj9pIzeaEY5fyU87gFA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0"
+      }
+    },
     "node_modules/@tiptap/extension-italic": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-2.4.0.tgz",
@@ -5354,6 +5368,16 @@
         "@popperjs/core": "^2.9.0"
       }
     },
+    "node_modules/tiptap-extension-resize-image": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/tiptap-extension-resize-image/-/tiptap-extension-resize-image-1.1.7.tgz",
+      "integrity": "sha512-PrYKPufFJijjiV8Tp/gZU84sCTzLnf/65zKzgHL2GNdY9C9VtaPME93qIZxUrIppXRF9oB8q+KWFHFVTJQei7w==",
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0",
+        "@tiptap/extension-image": "^2.0.0",
+        "@tiptap/pm": "^2.0.0"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
diff --git a/package.json b/package.json
index 477920a..7257bcb 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@heroicons/react": "^2.1.3",
     "@tiptap/extension-bullet-list": "^2.4.0",
+    "@tiptap/extension-image": "^2.4.0",
     "@tiptap/extension-link": "^2.4.0",
     "@tiptap/extension-list-item": "^2.4.0",
     "@tiptap/extension-underline": "^2.4.0",
@@ -29,6 +30,7 @@
     "react": "^18",
     "react-dom": "^18",
     "sass": "^1.77.5",
+    "tiptap-extension-resize-image": "^1.1.7",
     "zod": "^3.23.4"
   },
   "devDependencies": {
diff --git a/src/app/ui/Tiptap.tsx b/src/app/ui/Tiptap.tsx
index 834b93e..9bfe6b2 100644
--- a/src/app/ui/Tiptap.tsx
+++ b/src/app/ui/Tiptap.tsx
@@ -8,6 +8,8 @@ import BulletList from "@tiptap/extension-bullet-list";
 import ListItem from "@tiptap/extension-list-item";
 import { Link } from "@tiptap/extension-link";
 import "./styles.scss";
+import Image from "@tiptap/extension-image";
+import ImageResize from "tiptap-extension-resize-image";
 
 const htmltemplate = `
     <p>親愛的 {姓名}，</p>
@@ -37,11 +39,13 @@ const Tiptap = ({ onChange, content }: any) => {
         openOnClick: false,
         autolink: true,
       }),
+      Image,
+      ImageResize,
     ],
     editorProps: {
       attributes: {
         class:
-          "flex min-h-96 flex-col px-4 justify-start border-b border-l border-r border-gray-700 text-gray-400 items-start w-full gap-3 font-medium pt-4 rounded-bl-md rounded-br-md outline-none focus:ring-2 focus:ring-sky-900 focus:ring-opacity-50",
+          "w-full flex-col px-4 justify-start border-b border-l border-r border-gray-700 text-gray-400 items-start w-full gap-3 font-medium pt-4 rounded-bl-md rounded-br-md outline-none focus:ring-2 focus:ring-sky-900 focus:ring-opacity-50",
       },
     },
     content: htmltemplate,
diff --git a/src/app/ui/Toolbar.tsx b/src/app/ui/Toolbar.tsx
index b491632..ff622df 100644
--- a/src/app/ui/Toolbar.tsx
+++ b/src/app/ui/Toolbar.tsx
@@ -14,6 +14,7 @@ import {
   Undo,
   Redo,
   Link,
+  Image,
 } from "lucide-react";
 
 type Props = {
@@ -46,6 +47,18 @@ const Toolbar = ({ editor, content }: Props) => {
     editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
   }, [editor]);
 
+  const addImage = useCallback(() => {
+    const url = window.prompt("URL");
+
+    if (url) {
+      editor.chain().focus().setImage({ src: url }).run();
+    }
+  }, [editor]);
+
+  if (!editor) {
+    return null;
+  }
+
   return (
     <div className="px-4 py-3 rounded-tl-md rounded-tr-md flex justify-between items-start gap-5 w-full flex-wrap border border-gray-700">
       <div className="flex justify-start items-center gap-5 w-full lg:w-10/12 flex-wrap">
@@ -59,7 +72,6 @@ const Toolbar = ({ editor, content }: Props) => {
         >
           <Link className="w-5 h-5" />
         </button>
-
         <button
           onClick={(e) => {
             e.preventDefault();
@@ -190,6 +202,16 @@ const Toolbar = ({ editor, content }: Props) => {
         >
           <Quote className="w-5 h-5" />
         </button>
+        <button
+          onClick={addImage}
+          className={
+            editor.isActive("image")
+              ? "bg-sky-700 text-white p-1 rounded-lg"
+              : "text-sky-400 p-1"
+          }
+        >
+          <Image className="w-5 h-5" />
+        </button>
         <button
           onClick={(e) => {
             e.preventDefault();
diff --git a/src/app/ui/styles.scss b/src/app/ui/styles.scss
index a4a2a0b..ec15a9e 100644
--- a/src/app/ui/styles.scss
+++ b/src/app/ui/styles.scss
@@ -1,16 +1,12 @@
 /* Basic editor styles */
+
 .ProseMirror {
   > * + * {
     margin-top: 0.75em;
   }
 
-  img {
-    max-width: 500px;
-    max-height: 500px;
-
-    &.ProseMirror-selectednode {
-      outline: 3px solid #000000;
-    }
+  p {
+    min-width: 1px;
   }
 
   ul{
@@ -199,6 +195,7 @@
     p {
       margin: 0;
     }
+
   }
 }
 
@@ -219,4 +216,4 @@ a {
   &:hover {
     color: dodgerblue;
   }
-}
\ No newline at end of file
+}

From 4403d338d5c3e8d4c7a37bf9cf0d7a4e70c95dc1 Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Tue, 18 Jun 2024 20:48:29 +0800
Subject: [PATCH 16/29] feat: add a button to save the content to a html file |
 SCRUM-11

---
 src/app/ui/Tiptap.tsx | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/app/ui/Tiptap.tsx b/src/app/ui/Tiptap.tsx
index 9bfe6b2..d230fb6 100644
--- a/src/app/ui/Tiptap.tsx
+++ b/src/app/ui/Tiptap.tsx
@@ -10,6 +10,7 @@ import { Link } from "@tiptap/extension-link";
 import "./styles.scss";
 import Image from "@tiptap/extension-image";
 import ImageResize from "tiptap-extension-resize-image";
+import { useState } from "react";
 
 const htmltemplate = `
     <p>親愛的 {姓名}，</p>
@@ -22,10 +23,25 @@ const htmltemplate = `
     <p>台灣 AWS Educate Cloud Ambassador 官方社群：Facebook＆Instagram</p>
     <p>Best regards,</p>
     <p>Bill Wu</p>
-    <p>AWS Educate Cloud Ambassadorbillwu0222@gmail.com</p>`;
+    <p>AWS Educate Cloud Ambassador</p>
+    <p>billwu0222@gmail.com</p>`;
 
 const Tiptap = ({ onChange, content }: any) => {
-  const hangdleChange = (newContent: string) => {
+  const [editorContent, setEditorContent] = useState(htmltemplate);
+
+  const handleSave = () => {
+    const blob = new Blob([editorContent], { type: "text/html" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "editor-content.html";
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const handleChange = (newContent: string) => {
+    console.log(newContent);
+    setEditorContent(newContent);
     onChange(newContent);
   };
 
@@ -50,7 +66,7 @@ const Tiptap = ({ onChange, content }: any) => {
     },
     content: htmltemplate,
     onUpdate: ({ editor }) => {
-      hangdleChange(editor.getHTML());
+      handleChange(editor.getHTML());
     },
   });
 
@@ -58,6 +74,12 @@ const Tiptap = ({ onChange, content }: any) => {
     <div className="w-full px-4">
       <Toolbar editor={editor} content={content} />
       <EditorContent style={{ whiteSpace: "pre-line" }} editor={editor} />
+      <button
+        onClick={handleSave}
+        className="mt-4 bg-blue-500 text-white py-2 px-4 rounded"
+      >
+        Save as HTML
+      </button>
     </div>
   );
 };

From 9e9d3d3bcdeb69b79518258145c1d9b6464bc9c0 Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Wed, 19 Jun 2024 09:08:18 +0800
Subject: [PATCH 17/29] feat: upload image directly by using upload multiple
 files api | SCRUM-11

---
 src/app/ui/Toolbar.tsx | 39 +++++++++++++++++++++++++++++++--------
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/app/ui/Toolbar.tsx b/src/app/ui/Toolbar.tsx
index ff622df..ade2a04 100644
--- a/src/app/ui/Toolbar.tsx
+++ b/src/app/ui/Toolbar.tsx
@@ -31,28 +31,51 @@ const Toolbar = ({ editor, content }: Props) => {
     const previousUrl = editor.getAttributes("link").href;
     const url = window.prompt("URL", previousUrl);
 
-    // cancelled
     if (url === null) {
       return;
     }
 
-    // empty
     if (url === "") {
       editor.chain().focus().extendMarkRange("link").unsetLink().run();
-
       return;
     }
 
-    // update link
     editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
   }, [editor]);
 
-  const addImage = useCallback(() => {
-    const url = window.prompt("URL");
+  const uploadFile = async (file: File) => {
+    const formData = new FormData();
+    formData.append("file", file);
+
+    const response = await fetch(
+      "https://sojek1stci.execute-api.ap-northeast-1.amazonaws.com/dev/upload-multiple-file",
+      {
+        method: "POST",
+        body: formData,
+      }
+    );
 
-    if (url) {
-      editor.chain().focus().setImage({ src: url }).run();
+    const result = await response.json();
+    if (result && result.files && result.files.length > 0) {
+      return result.files[0].file_url;
     }
+
+    return null;
+  };
+
+  const addImage = useCallback(async () => {
+    const fileInput = document.createElement("input");
+    fileInput.type = "file";
+    fileInput.accept = "image/*";
+    fileInput.onchange = async () => {
+      if (fileInput.files && fileInput.files[0]) {
+        const fileUrl = await uploadFile(fileInput.files[0]);
+        if (fileUrl) {
+          editor.chain().focus().setImage({ src: fileUrl }).run();
+        }
+      }
+    };
+    fileInput.click();
   }, [editor]);
 
   if (!editor) {

From b76634a40d71c7b0f12841c6873dae15b0c8fcb3 Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Wed, 19 Jun 2024 09:22:56 +0800
Subject: [PATCH 18/29] feat: add a button to upload the html using upload
 multiple file api | SCRUM-11

---
 src/app/ui/Tiptap.tsx | 50 +++++++++++++++++++++++++++++++++++++------
 1 file changed, 44 insertions(+), 6 deletions(-)

diff --git a/src/app/ui/Tiptap.tsx b/src/app/ui/Tiptap.tsx
index d230fb6..5502064 100644
--- a/src/app/ui/Tiptap.tsx
+++ b/src/app/ui/Tiptap.tsx
@@ -28,6 +28,9 @@ const htmltemplate = `
 
 const Tiptap = ({ onChange, content }: any) => {
   const [editorContent, setEditorContent] = useState(htmltemplate);
+  const [uploadResponse, setUploadResponse] = useState<null | {
+    error: string;
+  }>(null);
 
   const handleSave = () => {
     const blob = new Blob([editorContent], { type: "text/html" });
@@ -39,6 +42,28 @@ const Tiptap = ({ onChange, content }: any) => {
     URL.revokeObjectURL(url);
   };
 
+  const handleUpload = async () => {
+    const blob = new Blob([editorContent], { type: "text/html" });
+    const formData = new FormData();
+    formData.append("file", blob, "editor-content.html");
+
+    try {
+      const response = await fetch(
+        "https://sojek1stci.execute-api.ap-northeast-1.amazonaws.com/dev/upload-multiple-file",
+        {
+          method: "POST",
+          body: formData,
+        }
+      );
+
+      const result = await response.json();
+      setUploadResponse(result);
+    } catch (error) {
+      console.error("Upload failed:", error);
+      setUploadResponse({ error: "Upload failed" });
+    }
+  };
+
   const handleChange = (newContent: string) => {
     console.log(newContent);
     setEditorContent(newContent);
@@ -74,12 +99,25 @@ const Tiptap = ({ onChange, content }: any) => {
     <div className="w-full px-4">
       <Toolbar editor={editor} content={content} />
       <EditorContent style={{ whiteSpace: "pre-line" }} editor={editor} />
-      <button
-        onClick={handleSave}
-        className="mt-4 bg-blue-500 text-white py-2 px-4 rounded"
-      >
-        Save as HTML
-      </button>
+      <div className="mt-4">
+        <button
+          onClick={handleSave}
+          className="bg-blue-500 text-white py-2 px-4 rounded mr-4"
+        >
+          Save as HTML
+        </button>
+        <button
+          onClick={handleUpload}
+          className="bg-green-500 text-white py-2 px-4 rounded"
+        >
+          Upload and Show Response
+        </button>
+      </div>
+      {uploadResponse && (
+        <pre className="mt-4 p-4 bg-gray-800 text-white rounded">
+          {JSON.stringify(uploadResponse, null, 2)}
+        </pre>
+      )}
     </div>
   );
 };

From 0de94132960226240a6d89535d23b7b065813cf8 Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Fri, 21 Jun 2024 20:13:38 +0800
Subject: [PATCH 19/29] refactor: rename the name route | SCRUM-11

---
 src/app/ui/side-nav.tsx                       | 6 ++++++
 src/app/{richEditor => writeEmail}/layout.tsx | 0
 src/app/{richEditor => writeEmail}/page.tsx   | 0
 3 files changed, 6 insertions(+)
 rename src/app/{richEditor => writeEmail}/layout.tsx (100%)
 rename src/app/{richEditor => writeEmail}/page.tsx (100%)

diff --git a/src/app/ui/side-nav.tsx b/src/app/ui/side-nav.tsx
index 79ca5e4..cdf22a6 100644
--- a/src/app/ui/side-nav.tsx
+++ b/src/app/ui/side-nav.tsx
@@ -31,6 +31,12 @@ export default function SideNav() {
         >
           <p className="px-3 text-white">Send Email</p>
         </Link>
+        <Link
+          href="/writeEmail"
+          className="flex flex-grow min-w-48 max-h-10 items-center justify-center rounded-md bg-sky-950 p-4 hover:bg-sky-800"
+        >
+          <p className="px-3 text-white">Write Email</p>
+        </Link>
         {/* <Link
           href="/htmlTemplate"
           className="flex flex-grow min-w-48 max-h-10 items-center justify-center rounded-md bg-sky-950 p-4 hover:bg-sky-800"
diff --git a/src/app/richEditor/layout.tsx b/src/app/writeEmail/layout.tsx
similarity index 100%
rename from src/app/richEditor/layout.tsx
rename to src/app/writeEmail/layout.tsx
diff --git a/src/app/richEditor/page.tsx b/src/app/writeEmail/page.tsx
similarity index 100%
rename from src/app/richEditor/page.tsx
rename to src/app/writeEmail/page.tsx

From c4c1d972211d462cd2f7bf0499a3a87e7ca0ddd2 Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Fri, 21 Jun 2024 21:07:45 +0800
Subject: [PATCH 20/29] style: style the toolbar | SCRUM-11

---
 src/app/ui/Tiptap.tsx  |   8 +--
 src/app/ui/Toolbar.tsx | 117 +++++++++++++++++++++++++----------------
 2 files changed, 78 insertions(+), 47 deletions(-)

diff --git a/src/app/ui/Tiptap.tsx b/src/app/ui/Tiptap.tsx
index 5502064..8e546db 100644
--- a/src/app/ui/Tiptap.tsx
+++ b/src/app/ui/Tiptap.tsx
@@ -86,7 +86,7 @@ const Tiptap = ({ onChange, content }: any) => {
     editorProps: {
       attributes: {
         class:
-          "w-full flex-col px-4 justify-start border-b border-l border-r border-gray-700 text-gray-400 items-start w-full gap-3 font-medium pt-4 rounded-bl-md rounded-br-md outline-none focus:ring-2 focus:ring-sky-900 focus:ring-opacity-50",
+          "w-full flex-col justify-start text-black items-start w-full gap-3 pt-4 rounded-bl-md rounded-br-md outline-none",
       },
     },
     content: htmltemplate,
@@ -97,8 +97,10 @@ const Tiptap = ({ onChange, content }: any) => {
 
   return (
     <div className="w-full px-4">
-      <Toolbar editor={editor} content={content} />
-      <EditorContent style={{ whiteSpace: "pre-line" }} editor={editor} />
+      <div className="p-3 border-2 border-black flex flex-col justify-between rounded-lg">
+        <EditorContent style={{ whiteSpace: "pre-line" }} editor={editor} />
+        <Toolbar editor={editor} content={content} />
+      </div>
       <div className="mt-4">
         <button
           onClick={handleSave}
diff --git a/src/app/ui/Toolbar.tsx b/src/app/ui/Toolbar.tsx
index ade2a04..af768d7 100644
--- a/src/app/ui/Toolbar.tsx
+++ b/src/app/ui/Toolbar.tsx
@@ -83,17 +83,20 @@ const Toolbar = ({ editor, content }: Props) => {
   }
 
   return (
-    <div className="px-4 py-3 rounded-tl-md rounded-tr-md flex justify-between items-start gap-5 w-full flex-wrap border border-gray-700">
-      <div className="flex justify-start items-center gap-5 w-full lg:w-10/12 flex-wrap">
+    <div className="">
+      <hr className="mt-12 mb-2 h-0.5 border-t-0 bg-neutral-300" />
+      <div className="flex justify-start items-center gap-1 lg:w-10/12 flex-wrap">
         <button
           onClick={setLink}
           className={
             editor.isActive("link")
-              ? "bg-sky-700 text-white p-1 rounded-lg"
-              : "text-sky-400 p-1"
+              ? "border-2 border-neutral-300  bg-neutral-300 rounded text-white hover:bg-neutral-200 active:bg-neutral-100 active:border-neutral-200"
+              : "border-2 border-neutral-300  text-sky-950 rounded shadow-lg hover:bg-neutral-100 active:bg-neutral-300 active:border-neutral-200"
           }
         >
-          <Link className="w-5 h-5" />
+          <div className="p-2">
+            <Link className="w-5 h-5" />
+          </div>
         </button>
         <button
           onClick={(e) => {
@@ -102,11 +105,13 @@ const Toolbar = ({ editor, content }: Props) => {
           }}
           className={
             editor.isActive("bold")
-              ? "bg-sky-700 text-white p-1 rounded-lg"
-              : "text-sky-400 p-1"
+              ? "border-2 border-neutral-300  bg-neutral-300 rounded text-white hover:bg-neutral-200 active:bg-neutral-100 active:border-neutral-200"
+              : "border-2 border-neutral-300  text-sky-950 rounded shadow-lg hover:bg-neutral-100 active:bg-neutral-300 active:border-neutral-200"
           }
         >
-          <Bold className="w-5 h-5" />
+          <div className="p-2">
+            <Bold className="w-5 h-5" />
+          </div>
         </button>
         <button
           onClick={(e) => {
@@ -115,11 +120,13 @@ const Toolbar = ({ editor, content }: Props) => {
           }}
           className={
             editor.isActive("italic")
-              ? "bg-sky-700 text-white p-1 rounded-lg"
-              : "text-sky-400 p-1"
+              ? "border-2 border-neutral-300  bg-neutral-300 rounded text-white hover:bg-neutral-200 active:bg-neutral-100 active:border-neutral-200"
+              : "border-2 border-neutral-300  text-sky-950 rounded shadow-lg hover:bg-neutral-100 active:bg-neutral-300 active:border-neutral-200"
           }
         >
-          <Italic className="w-5 h-5" />
+          <div className="p-2">
+            <Italic className="w-5 h-5" />
+          </div>
         </button>
         <button
           onClick={(e) => {
@@ -128,11 +135,13 @@ const Toolbar = ({ editor, content }: Props) => {
           }}
           className={
             editor.isActive("underline")
-              ? "bg-sky-700 text-white p-1 rounded-lg"
-              : "text-sky-400 p-1"
+              ? "border-2 border-neutral-300  bg-neutral-300 rounded text-white hover:bg-neutral-200 active:bg-neutral-100 active:border-neutral-200"
+              : "border-2 border-neutral-300  text-sky-950 rounded shadow-lg hover:bg-neutral-100 active:bg-neutral-300 active:border-neutral-200"
           }
         >
-          <Underline className="w-5 h-5" />
+          <div className="p-2">
+            <Underline className="w-5 h-5" />
+          </div>
         </button>
         <button
           onClick={(e) => {
@@ -141,11 +150,13 @@ const Toolbar = ({ editor, content }: Props) => {
           }}
           className={
             editor.isActive("strike")
-              ? "bg-sky-700 text-white p-1 rounded-lg"
-              : "text-sky-400 p-1"
+              ? "border-2 border-neutral-300  bg-neutral-300 rounded text-white hover:bg-neutral-200 active:bg-neutral-100 active:border-neutral-200"
+              : "border-2 border-neutral-300  text-sky-950 rounded shadow-lg hover:bg-neutral-100 active:bg-neutral-300 active:border-neutral-200"
           }
         >
-          <Strikethrough className="w-5 h-5" />
+          <div className="p-2">
+            <Strikethrough className="w-5 h-5" />
+          </div>
         </button>
         <button
           onClick={(e) => {
@@ -154,11 +165,13 @@ const Toolbar = ({ editor, content }: Props) => {
           }}
           className={
             editor.isActive("heading", { level: 1 })
-              ? "bg-sky-700 text-white p-1 rounded-lg"
-              : "text-sky-400 p-1"
+              ? "border-2 border-neutral-300  bg-neutral-300 rounded text-white hover:bg-neutral-200 active:bg-neutral-100 active:border-neutral-200"
+              : "border-2 border-neutral-300  text-sky-950 rounded shadow-lg hover:bg-neutral-100 active:bg-neutral-300 active:border-neutral-200"
           }
         >
-          <Heading1 className="w-5 h-5" />
+          <div className="p-2">
+            <Heading1 className="w-5 h-5" />
+          </div>
         </button>
         <button
           onClick={(e) => {
@@ -167,11 +180,13 @@ const Toolbar = ({ editor, content }: Props) => {
           }}
           className={
             editor.isActive("heading", { level: 2 })
-              ? "bg-sky-700 text-white p-1 rounded-lg"
-              : "text-sky-400 p-1"
+              ? "border-2 border-neutral-300  bg-neutral-300 rounded text-white hover:bg-neutral-200 active:bg-neutral-100 active:border-neutral-200"
+              : "border-2 border-neutral-300  text-sky-950 rounded shadow-lg hover:bg-neutral-100 active:bg-neutral-300 active:border-neutral-200"
           }
         >
-          <Heading2 className="w-5 h-5" />
+          <div className="p-2">
+            <Heading2 className="w-5 h-5" />
+          </div>
         </button>
         <button
           onClick={(e) => {
@@ -180,11 +195,13 @@ const Toolbar = ({ editor, content }: Props) => {
           }}
           className={
             editor.isActive("heading", { level: 3 })
-              ? "bg-sky-700 text-white p-1 rounded-lg"
-              : "text-sky-400 p-1"
+              ? "border-2 border-neutral-300  bg-neutral-300 rounded text-white hover:bg-neutral-200 active:bg-neutral-100 active:border-neutral-200"
+              : "border-2 border-neutral-300  text-sky-950 rounded shadow-lg hover:bg-neutral-100 active:bg-neutral-300 active:border-neutral-200"
           }
         >
-          <Heading3 className="w-5 h-5" />
+          <div className="p-2">
+            <Heading3 className="w-5 h-5" />
+          </div>
         </button>
         <button
           onClick={(e) => {
@@ -193,11 +210,13 @@ const Toolbar = ({ editor, content }: Props) => {
           }}
           className={
             editor.isActive("bulletList")
-              ? "bg-sky-700 text-white p-1 rounded-lg"
-              : "text-sky-400 p-1"
+              ? "border-2 border-neutral-300  bg-neutral-300 rounded text-white hover:bg-neutral-200 active:bg-neutral-100 active:border-neutral-200"
+              : "border-2 border-neutral-300  text-sky-950 rounded shadow-lg hover:bg-neutral-100 active:bg-neutral-300 active:border-neutral-200"
           }
         >
-          <List className="w-5 h-5" />
+          <div className="p-2">
+            <List className="w-5 h-5" />
+          </div>
         </button>
         <button
           onClick={(e) => {
@@ -206,11 +225,13 @@ const Toolbar = ({ editor, content }: Props) => {
           }}
           className={
             editor.isActive("orderedList")
-              ? "bg-sky-700 text-white p-1 rounded-lg"
-              : "text-sky-400 p-1"
+              ? "border-2 border-neutral-300  bg-neutral-300 rounded text-white hover:bg-neutral-200 active:bg-neutral-100 active:border-neutral-200"
+              : "border-2 border-neutral-300  text-sky-950 rounded shadow-lg hover:bg-neutral-100 active:bg-neutral-300 active:border-neutral-200"
           }
         >
-          <ListOrdered className="w-5 h-5" />
+          <div className="p-2">
+            <ListOrdered className="w-5 h-5" />
+          </div>
         </button>
         <button
           onClick={(e) => {
@@ -219,21 +240,25 @@ const Toolbar = ({ editor, content }: Props) => {
           }}
           className={
             editor.isActive("blockquote")
-              ? "bg-sky-700 text-white p-1 rounded-lg"
-              : "text-sky-400 p-1"
+              ? "border-2 border-neutral-300  bg-neutral-300 rounded text-white hover:bg-neutral-200 active:bg-neutral-100 active:border-neutral-200"
+              : "border-2 border-neutral-300  text-sky-950 rounded shadow-lg hover:bg-neutral-100 active:bg-neutral-300 active:border-neutral-200"
           }
         >
-          <Quote className="w-5 h-5" />
+          <div className="p-2">
+            <Quote className="w-5 h-5" />
+          </div>
         </button>
         <button
           onClick={addImage}
           className={
             editor.isActive("image")
-              ? "bg-sky-700 text-white p-1 rounded-lg"
-              : "text-sky-400 p-1"
+              ? "border-2 border-neutral-300  bg-neutral-300 rounded text-white hover:bg-neutral-200 active:bg-neutral-100 active:border-neutral-200"
+              : "border-2 border-neutral-300  text-sky-950 rounded shadow-lg hover:bg-neutral-100 active:bg-neutral-300 active:border-neutral-200"
           }
         >
-          <Image className="w-5 h-5" />
+          <div className="p-2">
+            <Image className="w-5 h-5" />
+          </div>
         </button>
         <button
           onClick={(e) => {
@@ -242,11 +267,13 @@ const Toolbar = ({ editor, content }: Props) => {
           }}
           className={
             editor.isActive("undo")
-              ? "bg-sky-700 text-white p-1 rounded-lg"
-              : "text-sky-400 hover:bg-sky-700 hover:text-white p-1 hover:rounded-lg"
+              ? "border-2 border-neutral-300  bg-neutral-300 rounded text-white hover:bg-neutral-200 active:bg-neutral-100 active:border-neutral-200"
+              : "border-2 border-neutral-300  text-sky-950 rounded shadow-lg hover:bg-neutral-100 active:bg-neutral-300 active:border-neutral-200"
           }
         >
-          <Undo className="w-5 h-5" />
+          <div className="p-2">
+            <Undo className="w-5 h-5" />
+          </div>
         </button>
         <button
           onClick={(e) => {
@@ -255,11 +282,13 @@ const Toolbar = ({ editor, content }: Props) => {
           }}
           className={
             editor.isActive("redo")
-              ? "bg-sky-700 text-white p-1 rounded-lg"
-              : "text-sky-400 hover:bg-sky-700 hover:text-white p-1 hover:rounded-lg"
+              ? "border-2 border-neutral-300  bg-neutral-300 rounded text-white hover:bg-neutral-200 active:bg-neutral-100 active:border-neutral-200"
+              : "border-2 border-neutral-300  text-sky-950 rounded shadow-lg hover:bg-neutral-100 active:bg-neutral-300 active:border-neutral-200"
           }
         >
-          <Redo className="w-5 h-5" />
+          <div className="p-2">
+            <Redo className="w-5 h-5" />
+          </div>
         </button>
       </div>
     </div>

From 7f899f27a1996eaf0e8cfe964745d36c33944891 Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Sat, 22 Jun 2024 16:05:35 +0800
Subject: [PATCH 21/29] style: style the whole email input | SCRUM-11

---
 src/app/ui/Tiptap.tsx       | 18 +++++++++++---
 src/app/writeEmail/page.tsx | 49 ++++++++++++++++++++++++++++++++++---
 2 files changed, 59 insertions(+), 8 deletions(-)

diff --git a/src/app/ui/Tiptap.tsx b/src/app/ui/Tiptap.tsx
index 8e546db..7de3bd8 100644
--- a/src/app/ui/Tiptap.tsx
+++ b/src/app/ui/Tiptap.tsx
@@ -31,6 +31,7 @@ const Tiptap = ({ onChange, content }: any) => {
   const [uploadResponse, setUploadResponse] = useState<null | {
     error: string;
   }>(null);
+  const [isFocused, setIsFocused] = useState(false);
 
   const handleSave = () => {
     const blob = new Blob([editorContent], { type: "text/html" });
@@ -97,11 +98,20 @@ const Tiptap = ({ onChange, content }: any) => {
 
   return (
     <div className="w-full px-4">
-      <div className="p-3 border-2 border-black flex flex-col justify-between rounded-lg">
-        <EditorContent style={{ whiteSpace: "pre-line" }} editor={editor} />
+      <div
+        className={`bg-white p-3 px-6 border-2 border-gray-200 flex flex-col justify-between rounded-lg ${
+          isFocused ? "outline outline-2 outline-blue-500" : ""
+        }`}
+      >
+        <EditorContent
+          style={{ whiteSpace: "pre-line" }}
+          editor={editor}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+        />
         <Toolbar editor={editor} content={content} />
       </div>
-      <div className="mt-4">
+      {/* <div className="mt-4">
         <button
           onClick={handleSave}
           className="bg-blue-500 text-white py-2 px-4 rounded mr-4"
@@ -119,7 +129,7 @@ const Tiptap = ({ onChange, content }: any) => {
         <pre className="mt-4 p-4 bg-gray-800 text-white rounded">
           {JSON.stringify(uploadResponse, null, 2)}
         </pre>
-      )}
+      )} */}
     </div>
   );
 };
diff --git a/src/app/writeEmail/page.tsx b/src/app/writeEmail/page.tsx
index 65539ef..34ea86a 100644
--- a/src/app/writeEmail/page.tsx
+++ b/src/app/writeEmail/page.tsx
@@ -11,10 +11,51 @@ export default function Page() {
 
   return (
     <div>
-      <TipTap
-        content={content}
-        onChange={(newContent: string) => handleContentChange(newContent)}
-      />
+      <div className="flex flex-col justify-center items-start">
+        <p className="text-4xl font-bold pt-2">Write a new Email</p>
+        <div className="flex justify-between items-center w-full pb-4">
+          <p className="text-gray-500 italic">
+            Select the participants and write your email
+          </p>
+          <div className="h-10"></div>
+        </div>
+      </div>
+      <div className="flex flex-col gap-2">
+        <p className="bg-neutral-100 px-8 py-4 text-xl font-bold rounded-lg">
+          New Email
+        </p>
+        <div className="rounded-md bg-neutral-100 p-4">
+          <div className="flex items-center m-3 px-1">
+            <label className="min-w-24 text-sm font-medium">主旨 :</label>
+            <input
+              id="subject"
+              name="subject"
+              type="text"
+              placeholder="Enter the subject"
+              // disabled={isSubmitting}
+              className={`rounded-md border py-2 pl-4 text-sm outline-2 placeholder:text-gray-500 w-full border-gray-200`}
+            />
+          </div>
+          <div className="flex items-center m-3 px-1">
+            <label className="min-w-24 text-sm font-medium">寄件人姓名 :</label>
+            <input
+              id="display_name"
+              name="display_name"
+              type="text"
+              placeholder="Enter the name"
+              // disabled={isSubmitting}
+              className={`rounded-md border py-2 pl-4 text-sm outline-2 placeholder:text-gray-500 w-full border-gray-200`}
+            />
+          </div>
+          <div className="flex items-center m-3 px-1 py-2">
+            <label className="min-w-24 text-sm font-medium">內容 :</label>
+          </div>
+          <TipTap
+            content={content}
+            onChange={(newContent: string) => handleContentChange(newContent)}
+          />
+        </div>
+      </div>
     </div>
   );
 }

From a50e7b91b6fd0410a6e65fc2ba9a4b57452e2537 Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Sat, 22 Jun 2024 18:45:21 +0800
Subject: [PATCH 22/29] style: style the write email | SCRUM-11

---
 src/app/ui/Tiptap.tsx       | 2 +-
 src/app/writeEmail/page.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/ui/Tiptap.tsx b/src/app/ui/Tiptap.tsx
index 7de3bd8..da79fb3 100644
--- a/src/app/ui/Tiptap.tsx
+++ b/src/app/ui/Tiptap.tsx
@@ -97,7 +97,7 @@ const Tiptap = ({ onChange, content }: any) => {
   });
 
   return (
-    <div className="w-full px-4">
+    <div className="w-full px-4 pb-6">
       <div
         className={`bg-white p-3 px-6 border-2 border-gray-200 flex flex-col justify-between rounded-lg ${
           isFocused ? "outline outline-2 outline-blue-500" : ""
diff --git a/src/app/writeEmail/page.tsx b/src/app/writeEmail/page.tsx
index 34ea86a..b9a255a 100644
--- a/src/app/writeEmail/page.tsx
+++ b/src/app/writeEmail/page.tsx
@@ -21,10 +21,10 @@ export default function Page() {
         </div>
       </div>
       <div className="flex flex-col gap-2">
-        <p className="bg-neutral-100 px-8 py-4 text-xl font-bold rounded-lg">
+        <p className="bg-neutral-100 px-8 py-4 text-xl font-bold rounded-lg shadow-md">
           New Email
         </p>
-        <div className="rounded-md bg-neutral-100 p-4">
+        <div className="rounded-md bg-neutral-100 p-4 shadow-md">
           <div className="flex items-center m-3 px-1">
             <label className="min-w-24 text-sm font-medium">主旨 :</label>
             <input

From 05196f974300135959592fbf85c12f17b122d2b8 Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Mon, 15 Jul 2024 22:21:15 +0800
Subject: [PATCH 23/29] fix: change the api endpoint to fix the porblem of not
 being able to add images in rich editor | SCRUM-11

---
 src/app/ui/Tiptap.tsx  | 37 ++++++++++++++++++-------------------
 src/app/ui/Toolbar.tsx | 13 ++++++-------
 2 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/src/app/ui/Tiptap.tsx b/src/app/ui/Tiptap.tsx
index da79fb3..649f40c 100644
--- a/src/app/ui/Tiptap.tsx
+++ b/src/app/ui/Tiptap.tsx
@@ -43,27 +43,26 @@ const Tiptap = ({ onChange, content }: any) => {
     URL.revokeObjectURL(url);
   };
 
-  const handleUpload = async () => {
-    const blob = new Blob([editorContent], { type: "text/html" });
-    const formData = new FormData();
-    formData.append("file", blob, "editor-content.html");
+  // const handleUpload = async () => {
+  //   const blob = new Blob([editorContent], { type: "text/html" });
+  //   const formData = new FormData();
+  //   formData.append("file", blob, "editor-content.html");
 
-    try {
-      const response = await fetch(
-        "https://sojek1stci.execute-api.ap-northeast-1.amazonaws.com/dev/upload-multiple-file",
-        {
-          method: "POST",
-          body: formData,
-        }
-      );
+  //   try {
+  //     const base_url = "https://api.tpet.awseducate.systems/dev";
+  //     const url = new URL(`${base_url}/upload-multiple-file`);
+  //     const response = await fetch(url.toString(), {
+  //       method: "POST",
+  //       body: formData,
+  //     });
 
-      const result = await response.json();
-      setUploadResponse(result);
-    } catch (error) {
-      console.error("Upload failed:", error);
-      setUploadResponse({ error: "Upload failed" });
-    }
-  };
+  //     const result = await response.json();
+  //     setUploadResponse(result);
+  //   } catch (error) {
+  //     console.error("Upload failed:", error);
+  //     setUploadResponse({ error: "Upload failed" });
+  //   }
+  // };
 
   const handleChange = (newContent: string) => {
     console.log(newContent);
diff --git a/src/app/ui/Toolbar.tsx b/src/app/ui/Toolbar.tsx
index af768d7..800924f 100644
--- a/src/app/ui/Toolbar.tsx
+++ b/src/app/ui/Toolbar.tsx
@@ -46,14 +46,13 @@ const Toolbar = ({ editor, content }: Props) => {
   const uploadFile = async (file: File) => {
     const formData = new FormData();
     formData.append("file", file);
+    const base_url = "https://api.tpet.awseducate.systems/dev";
+    const url = new URL(`${base_url}/upload-multiple-file`);
 
-    const response = await fetch(
-      "https://sojek1stci.execute-api.ap-northeast-1.amazonaws.com/dev/upload-multiple-file",
-      {
-        method: "POST",
-        body: formData,
-      }
-    );
+    const response = await fetch(url.toString(), {
+      method: "POST",
+      body: formData,
+    });
 
     const result = await response.json();
     if (result && result.files && result.files.length > 0) {

From 07170f1b4dcdb9a20eecfb9edf053ba7e65c7828 Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Mon, 15 Jul 2024 22:56:08 +0800
Subject: [PATCH 24/29] style: style the button | SCRUM-11

---
 src/app/ui/Tiptap.tsx | 60 +++++++++++++++++++++----------------------
 1 file changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/app/ui/Tiptap.tsx b/src/app/ui/Tiptap.tsx
index 649f40c..61073bf 100644
--- a/src/app/ui/Tiptap.tsx
+++ b/src/app/ui/Tiptap.tsx
@@ -11,9 +11,10 @@ import "./styles.scss";
 import Image from "@tiptap/extension-image";
 import ImageResize from "tiptap-extension-resize-image";
 import { useState } from "react";
+import { Download, Upload } from "lucide-react";
 
 const htmltemplate = `
-    <p>親愛的 {姓名}，</p>
+    <p>親愛的 {Name}，</p>
     <p>您好！恭喜您成功加入<strong class="highlight">「6th AWS Educate Taiwan 雲端校園大使證照陪跑計畫」</strong>！非常高興您決定與我們一起踏上學習的旅程，共同探索雲端技術的無限可能！</p>
     <p>為確保您能夠有效利用本計畫資源，校園大使團隊精心統整許多考照資源於在 Notion Page，並建立 Discord 社群以促進更深入的討論和即時互動，讓您可以輕鬆地提問並與大使互動問答。</p>
     <p>您可以透過以下連結訪問：<br>Notion Page：<a target="_blank" href="https://aws-educate-tw.notion.site/AWS-0824fda6e4aa470e863c4d91daf9563a">點擊這裡</a><br>Discord 社群：{Discord Link}</p>
@@ -38,31 +39,32 @@ const Tiptap = ({ onChange, content }: any) => {
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
-    a.download = "editor-content.html";
+    a.download = "html-generate.html";
     a.click();
     URL.revokeObjectURL(url);
   };
 
-  // const handleUpload = async () => {
-  //   const blob = new Blob([editorContent], { type: "text/html" });
-  //   const formData = new FormData();
-  //   formData.append("file", blob, "editor-content.html");
+  const handleUpload = async () => {
+    const blob = new Blob([editorContent], { type: "text/html" });
+    const formData = new FormData();
+    formData.append("file", blob, "html-generate.html");
 
-  //   try {
-  //     const base_url = "https://api.tpet.awseducate.systems/dev";
-  //     const url = new URL(`${base_url}/upload-multiple-file`);
-  //     const response = await fetch(url.toString(), {
-  //       method: "POST",
-  //       body: formData,
-  //     });
+    try {
+      const base_url = "https://api.tpet.awseducate.systems/dev";
+      const url = new URL(`${base_url}/upload-multiple-file`);
+      const response = await fetch(url.toString(), {
+        method: "POST",
+        body: formData,
+      });
 
-  //     const result = await response.json();
-  //     setUploadResponse(result);
-  //   } catch (error) {
-  //     console.error("Upload failed:", error);
-  //     setUploadResponse({ error: "Upload failed" });
-  //   }
-  // };
+      const result = await response.json();
+      alert("You have uploaded the html file successfully!");
+      setUploadResponse(result);
+    } catch (error) {
+      console.error("Upload failed:", error);
+      setUploadResponse({ error: "Upload failed" });
+    }
+  };
 
   const handleChange = (newContent: string) => {
     console.log(newContent);
@@ -110,21 +112,19 @@ const Tiptap = ({ onChange, content }: any) => {
         />
         <Toolbar editor={editor} content={content} />
       </div>
-      {/* <div className="mt-4">
-        <button
-          onClick={handleSave}
-          className="bg-blue-500 text-white py-2 px-4 rounded mr-4"
-        >
-          Save as HTML
-        </button>
+      <div className="mt-4 flex justify-end gap-2">
+        {/* <button onClick={handleSave} className="">
+          <Download className="w-5 h-5" />
+        </button> */}
         <button
           onClick={handleUpload}
-          className="bg-green-500 text-white py-2 px-4 rounded"
+          className="text-sky-950 hover:text-sky-800 flex justify-center items-center border-sky-950 h-10 rounded-lg px-2 md:text-base text-xs font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 aria-disabled:cursor-not-allowed aria-disabled:opacity-50"
         >
-          Upload and Show Response
+          <Upload className="w-5 h-5" />
+          <p className="px-2">Save as template</p>
         </button>
       </div>
-      {uploadResponse && (
+      {/* {uploadResponse && (
         <pre className="mt-4 p-4 bg-gray-800 text-white rounded">
           {JSON.stringify(uploadResponse, null, 2)}
         </pre>

From 40bc12309863f1b70b6bfab2d9bb72ee3166b511 Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Mon, 15 Jul 2024 23:27:28 +0800
Subject: [PATCH 25/29] refactor: seperate the editor page and style the button
 | SCRUM-11

---
 src/app/templateEdit/layout.tsx | 12 +++++
 src/app/templateEdit/page.tsx   | 33 ++++++++++++
 src/app/ui/Tiptap.tsx           | 95 +++++++++++++++++----------------
 src/app/ui/side-nav.tsx         | 26 ++-------
 4 files changed, 99 insertions(+), 67 deletions(-)
 create mode 100644 src/app/templateEdit/layout.tsx
 create mode 100644 src/app/templateEdit/page.tsx

diff --git a/src/app/templateEdit/layout.tsx b/src/app/templateEdit/layout.tsx
new file mode 100644
index 0000000..e2c0932
--- /dev/null
+++ b/src/app/templateEdit/layout.tsx
@@ -0,0 +1,12 @@
+import SideNav from "@/app/ui/side-nav";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
+      <div className="w-full flex-none md:w-64">
+        <SideNav />
+      </div>
+      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
+    </div>
+  );
+}
diff --git a/src/app/templateEdit/page.tsx b/src/app/templateEdit/page.tsx
new file mode 100644
index 0000000..4bd11de
--- /dev/null
+++ b/src/app/templateEdit/page.tsx
@@ -0,0 +1,33 @@
+"use client";
+import { useState } from "react";
+import TipTap from "@/app/ui/Tiptap";
+
+export default function Page() {
+  const [content, setContent] = useState("");
+
+  const handleContentChange = (reason: any) => {
+    setContent(reason);
+  };
+
+  return (
+    <div>
+      <div className="flex flex-col justify-center items-start">
+        <p className="text-4xl font-bold pt-2">Create an Email template</p>
+        <div className="flex justify-between items-center w-full pb-4">
+          <p className="text-gray-500 italic">
+            Create and save your html file here.
+          </p>
+          <div className="h-10"></div>
+        </div>
+      </div>
+      <div className="">
+        <div className="">
+          <TipTap
+            content={content}
+            onChange={(newContent: string) => handleContentChange(newContent)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/ui/Tiptap.tsx b/src/app/ui/Tiptap.tsx
index 61073bf..80cf4c9 100644
--- a/src/app/ui/Tiptap.tsx
+++ b/src/app/ui/Tiptap.tsx
@@ -11,7 +11,7 @@ import "./styles.scss";
 import Image from "@tiptap/extension-image";
 import ImageResize from "tiptap-extension-resize-image";
 import { useState } from "react";
-import { Download, Upload } from "lucide-react";
+import NextStepLink from "next/link";
 
 const htmltemplate = `
     <p>親愛的 {Name}，</p>
@@ -29,20 +29,9 @@ const htmltemplate = `
 
 const Tiptap = ({ onChange, content }: any) => {
   const [editorContent, setEditorContent] = useState(htmltemplate);
-  const [uploadResponse, setUploadResponse] = useState<null | {
-    error: string;
-  }>(null);
   const [isFocused, setIsFocused] = useState(false);
-
-  const handleSave = () => {
-    const blob = new Blob([editorContent], { type: "text/html" });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "html-generate.html";
-    a.click();
-    URL.revokeObjectURL(url);
-  };
+  const [isUploading, setIsUploading] = useState(false);
+  const [showNextStep, setShowNextStep] = useState(false);
 
   const handleUpload = async () => {
     const blob = new Blob([editorContent], { type: "text/html" });
@@ -52,17 +41,18 @@ const Tiptap = ({ onChange, content }: any) => {
     try {
       const base_url = "https://api.tpet.awseducate.systems/dev";
       const url = new URL(`${base_url}/upload-multiple-file`);
+      setIsUploading(true);
       const response = await fetch(url.toString(), {
         method: "POST",
         body: formData,
       });
-
       const result = await response.json();
+      console.log(result);
+      setIsUploading(false);
+      setShowNextStep(true);
       alert("You have uploaded the html file successfully!");
-      setUploadResponse(result);
     } catch (error) {
       console.error("Upload failed:", error);
-      setUploadResponse({ error: "Upload failed" });
     }
   };
 
@@ -98,38 +88,53 @@ const Tiptap = ({ onChange, content }: any) => {
   });
 
   return (
-    <div className="w-full px-4 pb-6">
-      <div
-        className={`bg-white p-3 px-6 border-2 border-gray-200 flex flex-col justify-between rounded-lg ${
-          isFocused ? "outline outline-2 outline-blue-500" : ""
-        }`}
-      >
-        <EditorContent
-          style={{ whiteSpace: "pre-line" }}
-          editor={editor}
-          onFocus={() => setIsFocused(true)}
-          onBlur={() => setIsFocused(false)}
-        />
-        <Toolbar editor={editor} content={content} />
+    <>
+      <div className="w-full p-4 rounded-md bg-neutral-100">
+        <div
+          className={`bg-white p-3 px-6 border-2 border-gray-200 flex flex-col justify-between rounded-lg ${
+            isFocused ? "outline outline-2 outline-blue-500" : ""
+          }`}
+        >
+          <EditorContent
+            style={{ whiteSpace: "pre-line" }}
+            editor={editor}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+          />
+          <Toolbar editor={editor} content={content} />
+        </div>
       </div>
       <div className="mt-4 flex justify-end gap-2">
         {/* <button onClick={handleSave} className="">
-          <Download className="w-5 h-5" />
-        </button> */}
-        <button
-          onClick={handleUpload}
-          className="text-sky-950 hover:text-sky-800 flex justify-center items-center border-sky-950 h-10 rounded-lg px-2 md:text-base text-xs font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 aria-disabled:cursor-not-allowed aria-disabled:opacity-50"
-        >
-          <Upload className="w-5 h-5" />
-          <p className="px-2">Save as template</p>
-        </button>
+            <Download className="w-5 h-5" />
+          </button> */}
+        {isUploading ? (
+          <button
+            onClick={handleUpload}
+            className="flex h-10 items-center rounded-lg bg-gray-500 px-4 md:text-base text-xs font-medium text-white transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-800 active:bg-sky-950"
+            disabled
+          >
+            Saving...
+          </button>
+        ) : (
+          <button
+            onClick={handleUpload}
+            className="flex h-10 items-center rounded-lg bg-sky-950 hover:bg-sky-800 px-4 md:text-base text-xs font-medium text-white transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-800 active:bg-sky-950"
+          >
+            {/* <Upload className="w-5 h-5" /> */}
+            Save as template
+          </button>
+        )}
+        {showNextStep && (
+          <NextStepLink
+            href="/sendEmail"
+            className="flex h-10 items-center rounded-lg bg-sky-800 hover:bg-sky-700 hover:text-white px-4 md:text-base text-xs font-medium text-white transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-800 active:bg-sky-950"
+          >
+            Next Step &rarr;
+          </NextStepLink>
+        )}
       </div>
-      {/* {uploadResponse && (
-        <pre className="mt-4 p-4 bg-gray-800 text-white rounded">
-          {JSON.stringify(uploadResponse, null, 2)}
-        </pre>
-      )} */}
-    </div>
+    </>
   );
 };
 
diff --git a/src/app/ui/side-nav.tsx b/src/app/ui/side-nav.tsx
index cdf22a6..ce9472c 100644
--- a/src/app/ui/side-nav.tsx
+++ b/src/app/ui/side-nav.tsx
@@ -19,36 +19,18 @@ export default function SideNav() {
         />
       </Link>
       <div className="flex grow flex-row flex-wrap justify-start gap-2 md:flex-col md:space-x-0 rounded-md">
-        {/* <Link
-          href="/listFiles"
-          className="flex flex-grow min-w-48 max-h-10 items-center justify-center rounded-md bg-sky-950 p-4 hover:bg-sky-800"
-        >
-          <p className="px-3 text-white">TPET drive</p>
-        </Link> */}
         <Link
-          href="/sendEmail"
+          href="/templateEdit"
           className="flex flex-grow min-w-48 max-h-10 items-center justify-center rounded-md bg-sky-950 p-4 hover:bg-sky-800"
         >
-          <p className="px-3 text-white">Send Email</p>
+          <p className="px-3 text-white">Create Template</p>
         </Link>
         <Link
-          href="/writeEmail"
-          className="flex flex-grow min-w-48 max-h-10 items-center justify-center rounded-md bg-sky-950 p-4 hover:bg-sky-800"
-        >
-          <p className="px-3 text-white">Write Email</p>
-        </Link>
-        {/* <Link
-          href="/htmlTemplate"
+          href="/sendEmail"
           className="flex flex-grow min-w-48 max-h-10 items-center justify-center rounded-md bg-sky-950 p-4 hover:bg-sky-800"
         >
-          <p className="px-3 text-white">HTML Template</p>
+          <p className="px-3 text-white">Send Email</p>
         </Link>
-        <Link
-          href="/htmlRichEditor"
-          className="flex flex-grow min-w-48 max-h-10 items-center justify-center rounded-md bg-sky-950 p-4 hover:bg-sky-800"
-        >
-          <p className="px-3 text-white">HTML Rich Editor</p>
-        </Link> */}
       </div>
     </div>
   );

From 3e8e2d3e42796edaeb837cbbc219a5e81e794b55 Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Mon, 15 Jul 2024 23:33:27 +0800
Subject: [PATCH 26/29] fix: fix the deploy error | SCRUM-11

---
 src/app/ui/Tiptap.tsx     |  2 +-
 src/app/ui/Toolbar.tsx    |  6 ++----
 src/app/ui/list-files.tsx | 16 ++++++++--------
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/app/ui/Tiptap.tsx b/src/app/ui/Tiptap.tsx
index 80cf4c9..41d68e2 100644
--- a/src/app/ui/Tiptap.tsx
+++ b/src/app/ui/Tiptap.tsx
@@ -14,7 +14,7 @@ import { useState } from "react";
 import NextStepLink from "next/link";
 
 const htmltemplate = `
-    <p>親愛的 {Name}，</p>
+    <p>親愛的{{Name}}，</p>
     <p>您好！恭喜您成功加入<strong class="highlight">「6th AWS Educate Taiwan 雲端校園大使證照陪跑計畫」</strong>！非常高興您決定與我們一起踏上學習的旅程，共同探索雲端技術的無限可能！</p>
     <p>為確保您能夠有效利用本計畫資源，校園大使團隊精心統整許多考照資源於在 Notion Page，並建立 Discord 社群以促進更深入的討論和即時互動，讓您可以輕鬆地提問並與大使互動問答。</p>
     <p>您可以透過以下連結訪問：<br>Notion Page：<a target="_blank" href="https://aws-educate-tw.notion.site/AWS-0824fda6e4aa470e863c4d91daf9563a">點擊這裡</a><br>Discord 社群：{Discord Link}</p>
diff --git a/src/app/ui/Toolbar.tsx b/src/app/ui/Toolbar.tsx
index 800924f..b93ffc2 100644
--- a/src/app/ui/Toolbar.tsx
+++ b/src/app/ui/Toolbar.tsx
@@ -23,11 +23,8 @@ type Props = {
 };
 
 const Toolbar = ({ editor, content }: Props) => {
-  if (!editor) {
-    return null;
-  }
-
   const setLink = useCallback(() => {
+    if (!editor) return;
     const previousUrl = editor.getAttributes("link").href;
     const url = window.prompt("URL", previousUrl);
 
@@ -63,6 +60,7 @@ const Toolbar = ({ editor, content }: Props) => {
   };
 
   const addImage = useCallback(async () => {
+    if (!editor) return;
     const fileInput = document.createElement("input");
     fileInput.type = "file";
     fileInput.accept = "image/*";
diff --git a/src/app/ui/list-files.tsx b/src/app/ui/list-files.tsx
index 00cafcf..77f66a7 100644
--- a/src/app/ui/list-files.tsx
+++ b/src/app/ui/list-files.tsx
@@ -28,14 +28,6 @@ export default function ListFiles() {
   const [showUpload, setShowUpload] = useState<boolean>(false);
   const limit = 10;
 
-  useEffect(() => {
-    if (!hasFetched.current) {
-      fetchFiles("xlsx", setXlsxFiles, setXlsxLastEvaluatedKey);
-      fetchFiles("html", setHtmlFiles, setHtmlLastEvaluatedKey);
-      hasFetched.current = true;
-    }
-  }, []);
-
   const fetchFiles = async (
     file_extension: string,
     setFiles: React.Dispatch<React.SetStateAction<fileDataType[] | null>>,
@@ -76,6 +68,14 @@ export default function ListFiles() {
     }
   };
 
+  useEffect(() => {
+    if (!hasFetched.current) {
+      fetchFiles("xlsx", setXlsxFiles, setXlsxLastEvaluatedKey);
+      fetchFiles("html", setHtmlFiles, setHtmlLastEvaluatedKey);
+      hasFetched.current = true;
+    }
+  }, [fetchFiles]);
+
   const handleOpenUpload = () => {
     setShowUpload(true);
   };

From 5dd4d957b01466a45fd55bd246b0fe2192277735 Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Tue, 16 Jul 2024 13:43:23 +0800
Subject: [PATCH 27/29] fix: fix the preview of html template | SCRUM-11

---
 src/app/ui/Tiptap.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/app/ui/Tiptap.tsx b/src/app/ui/Tiptap.tsx
index 41d68e2..d3a3afa 100644
--- a/src/app/ui/Tiptap.tsx
+++ b/src/app/ui/Tiptap.tsx
@@ -13,7 +13,7 @@ import ImageResize from "tiptap-extension-resize-image";
 import { useState } from "react";
 import NextStepLink from "next/link";
 
-const htmltemplate = `
+const htmltemplateContent = `
     <p>親愛的{{Name}}，</p>
     <p>您好！恭喜您成功加入<strong class="highlight">「6th AWS Educate Taiwan 雲端校園大使證照陪跑計畫」</strong>！非常高興您決定與我們一起踏上學習的旅程，共同探索雲端技術的無限可能！</p>
     <p>為確保您能夠有效利用本計畫資源，校園大使團隊精心統整許多考照資源於在 Notion Page，並建立 Discord 社群以促進更深入的討論和即時互動，讓您可以輕鬆地提問並與大使互動問答。</p>
@@ -28,13 +28,24 @@ const htmltemplate = `
     <p>billwu0222@gmail.com</p>`;
 
 const Tiptap = ({ onChange, content }: any) => {
-  const [editorContent, setEditorContent] = useState(htmltemplate);
+  const [editorContent, setEditorContent] = useState(htmltemplateContent);
   const [isFocused, setIsFocused] = useState(false);
   const [isUploading, setIsUploading] = useState(false);
   const [showNextStep, setShowNextStep] = useState(false);
 
   const handleUpload = async () => {
-    const blob = new Blob([editorContent], { type: "text/html" });
+    const html = `
+    <!DOCTYPE html>
+    <html lang="zh-TW">
+    <head>
+        <meta charset="UTF-8">
+        <title>加入 AWS Educate Taiwan 雲端校園大使證照陪跑計畫</title>
+    </head>
+    <body>
+        ${editorContent}
+    </body>
+    </html>`;
+    const blob = new Blob([html], { type: "text/html" });
     const formData = new FormData();
     formData.append("file", blob, "html-generate.html");
 
@@ -81,7 +92,7 @@ const Tiptap = ({ onChange, content }: any) => {
           "w-full flex-col justify-start text-black items-start w-full gap-3 pt-4 rounded-bl-md rounded-br-md outline-none",
       },
     },
-    content: htmltemplate,
+    content: htmltemplateContent,
     onUpdate: ({ editor }) => {
       handleChange(editor.getHTML());
     },

From e84bce9858e9a2e3b40f2e638a17a352731b549b Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Tue, 16 Jul 2024 15:38:31 +0800
Subject: [PATCH 28/29] feat: switch api endpoints automatically | SCRUM-79

---
 .env.development               | 1 +
 .env.production                | 1 +
 src/app/ui/Tiptap.tsx          | 2 +-
 src/app/ui/Toolbar.tsx         | 2 +-
 src/app/ui/attach-dropdown.tsx | 2 +-
 src/app/ui/file-upload.tsx     | 2 +-
 src/app/ui/select-dropdown.tsx | 2 +-
 src/lib/actions.ts             | 2 +-
 8 files changed, 8 insertions(+), 6 deletions(-)
 create mode 100644 .env.development
 create mode 100644 .env.production

diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..811f6ce
--- /dev/null
+++ b/.env.development
@@ -0,0 +1 @@
+NEXT_PUBLIC_API_ENDPOINT = https://api.tpet.awseducate.systems/dev
\ No newline at end of file
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..a00e08b
--- /dev/null
+++ b/.env.production
@@ -0,0 +1 @@
+NEXT_PUBLIC_API_ENDPOINT = https://api.tpet.awseducate.systems/prod
\ No newline at end of file
diff --git a/src/app/ui/Tiptap.tsx b/src/app/ui/Tiptap.tsx
index d3a3afa..6fa0340 100644
--- a/src/app/ui/Tiptap.tsx
+++ b/src/app/ui/Tiptap.tsx
@@ -50,7 +50,7 @@ const Tiptap = ({ onChange, content }: any) => {
     formData.append("file", blob, "html-generate.html");
 
     try {
-      const base_url = "https://api.tpet.awseducate.systems/dev";
+      const base_url = process.env.NEXT_PUBLIC_API_ENDPOINT;
       const url = new URL(`${base_url}/upload-multiple-file`);
       setIsUploading(true);
       const response = await fetch(url.toString(), {
diff --git a/src/app/ui/Toolbar.tsx b/src/app/ui/Toolbar.tsx
index b93ffc2..fc4ed36 100644
--- a/src/app/ui/Toolbar.tsx
+++ b/src/app/ui/Toolbar.tsx
@@ -43,7 +43,7 @@ const Toolbar = ({ editor, content }: Props) => {
   const uploadFile = async (file: File) => {
     const formData = new FormData();
     formData.append("file", file);
-    const base_url = "https://api.tpet.awseducate.systems/dev";
+    const base_url = process.env.NEXT_PUBLIC_API_ENDPOINT;
     const url = new URL(`${base_url}/upload-multiple-file`);
 
     const response = await fetch(url.toString(), {
diff --git a/src/app/ui/attach-dropdown.tsx b/src/app/ui/attach-dropdown.tsx
index 187db37..38edfca 100644
--- a/src/app/ui/attach-dropdown.tsx
+++ b/src/app/ui/attach-dropdown.tsx
@@ -58,7 +58,7 @@ export default function AttachDropdown({ onSelect }: AttachDropdownProps) {
   const fetchFiles = async (limit: number) => {
     try {
       setIsLoading(true);
-      const base_url = "https://api.tpet.awseducate.systems/dev";
+      const base_url = process.env.NEXT_PUBLIC_API_ENDPOINT;
       const url = new URL(`${base_url}/files`);
       url.searchParams.append("limit", limit.toString());
 
diff --git a/src/app/ui/file-upload.tsx b/src/app/ui/file-upload.tsx
index c431087..6ff9cad 100644
--- a/src/app/ui/file-upload.tsx
+++ b/src/app/ui/file-upload.tsx
@@ -43,7 +43,7 @@ export default function FileUpload({
     setIsSubmitting(true);
 
     try {
-      const base_url = "https://api.tpet.awseducate.systems/dev";
+      const base_url = process.env.NEXT_PUBLIC_API_ENDPOINT;
       const url = new URL(`${base_url}/upload-multiple-file`);
       const response = await fetch(url.toString(), {
         method: "POST",
diff --git a/src/app/ui/select-dropdown.tsx b/src/app/ui/select-dropdown.tsx
index fda945a..a7b0e0b 100644
--- a/src/app/ui/select-dropdown.tsx
+++ b/src/app/ui/select-dropdown.tsx
@@ -65,7 +65,7 @@ export default function SelectDropdown({
   const fetchFiles = async (file_extension: string, limit: number) => {
     try {
       setIsLoading(true);
-      const base_url = "https://api.tpet.awseducate.systems/dev";
+      const base_url = process.env.NEXT_PUBLIC_API_ENDPOINT;
       const url = new URL(`${base_url}/files`);
       url.searchParams.append("file_extension", file_extension);
       url.searchParams.append("limit", limit.toString());
diff --git a/src/lib/actions.ts b/src/lib/actions.ts
index eeede93..149fc33 100644
--- a/src/lib/actions.ts
+++ b/src/lib/actions.ts
@@ -28,7 +28,7 @@ export async function submitForm(data: string) {
 
   try {
     // console.log("data", validation.data);
-    const base_url = "https://api.tpet.awseducate.systems/dev";
+    const base_url = process.env.NEXT_PUBLIC_API_ENDPOINT;
     const url = new URL(`${base_url}/send-email`);
     const response = await fetch(
       url.toString(),

From d6e8c1bd71351c4a745af8755ad9ecdb167ccfc2 Mon Sep 17 00:00:00 2001
From: chungchihhan <harryup2000@gmail.com>
Date: Tue, 16 Jul 2024 19:34:51 +0800
Subject: [PATCH 29/29] refactor: change the domain

---
 .env.development | 2 +-
 .env.production  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.env.development b/.env.development
index 811f6ce..6165333 100644
--- a/.env.development
+++ b/.env.development
@@ -1 +1 @@
-NEXT_PUBLIC_API_ENDPOINT = https://api.tpet.awseducate.systems/dev
\ No newline at end of file
+NEXT_PUBLIC_API_ENDPOINT = https://api.tpet.aws-educate.tw/dev
diff --git a/.env.production b/.env.production
index a00e08b..5251382 100644
--- a/.env.production
+++ b/.env.production
@@ -1 +1 @@
-NEXT_PUBLIC_API_ENDPOINT = https://api.tpet.awseducate.systems/prod
\ No newline at end of file
+NEXT_PUBLIC_API_ENDPOINT = https://api.tpet.aws-educate.tw/prod