fix forum

deskripsi:
- text editor di create & edit
- load pada beranda

src/app_modules/_global/component/input_countdown.tsx

@@ -12,9 +12,14 @@ export default function ComponentGlobal_InputCountDown({
 }) {
   return (
     <>
-      <Text fz={"xs"} fs={"italic"} color="gray">
-        {maxInput - lengthInput < 0 ? 0 : maxInput - lengthInput} /{" "}
-        <Text span inherit c={maxInput - lengthInput < 0 ? "red" : ""} style={{transition: "0.5s"}}>
+      <Text fz={"sm"} fs={"italic"} color="gray">
+        {maxInput - lengthInput} /
+        <Text
+          span
+          inherit
+          c={maxInput - lengthInput < 0 ? "red" : ""}
+          style={{ transition: " all0.5s" }}
+        >
           {maxInput}
         </Text>
       </Text>

src/app_modules/_global/component/new/new_text_editor.tsx

@@ -0,0 +1,69 @@
+import { useState } from "react";
+import "react-quill/dist/quill.snow.css";
+import dynamic from "next/dynamic";
+import { useShallowEffect } from "@mantine/hooks";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import { Paper, ScrollArea } from "@mantine/core";
+import { MainColor } from "../../color";
+import { maxInputLength } from "../../lib/maximal_setting";
+const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
+
+
+export function ComponentTextEditor({
+  data,
+  onSetData,
+//   lengthData,
+  onSetLengthData,
+}: {
+  data: string;
+  onSetData: (value: string) => void;
+//   lengthData: number;
+  onSetLengthData: (value: number) => void;
+}) {
+  const [isReady, setIsReady] = useState<boolean>(false);
+
+  useShallowEffect(() => {
+    setIsReady(true); // Set ready on client-side mount
+  }, []);
+
+  const handleChange = (input: string) => {
+    const text = input.replace(/<[^>]+>/g, "").trim(); // Remove HTML tags and trim
+    // if (text.length <= maxInputLength) {
+    // }
+    onSetData(input);
+    onSetLengthData(text.length);
+    // Input diabaikan jika panjang > maxLength
+  };
+
+  return (
+    <>
+      {isReady ? (
+        <Paper p="sm" withBorder shadow="lg" mah={300} bg={MainColor.white} >
+          <ScrollArea h={280}>
+            <ReactQuill
+              placeholder="Apa yang sedang ingin dibahas ?"
+              style={{
+                color: "black",
+                backgroundColor: MainColor.white,
+                border: "none",
+              }}
+              modules={{
+                toolbar: [
+                  [{ header: [1, 2, 3, 4, 5, 6, false] }],
+                  ["bold", "italic", "underline", "link"],
+                  [{ list: "ordered" }, { list: "bullet" }],
+                  ["clean"],
+                ],
+              }}
+              theme="snow"
+              value={data}
+              onChange={handleChange}
+            />
+          </ScrollArea>
+        </Paper>
+      ) : (
+        <CustomSkeleton height={200} />
+      )}
+    </>
+  );
+}

src/app_modules/_global/fun/fun_replace_html.ts

@@ -0,0 +1,3 @@
+export function funReplaceHtml({html}:{ html: string }) {
+  return html.replace(/<[^>]+>/g, "");
+}

src/app_modules/_global/fun/upload/fun_validasi_upload_created_file.ts

@@ -1,6 +1,6 @@
 import { clientLogger } from "@/util/clientLogger";
 import { MAX_SIZE } from "../../lib";
-import { PemberitahuanMaksimalFile } from "../../lib/max_size";
+import { PemberitahuanMaksimalFile } from "../../lib/maximal_setting";
 import { ComponentGlobal_NotifikasiPeringatan } from "../../notif_global";
 import { funDeteleteFileById } from "../delete/fun_delete_file_by_id";
 import { funUploadFileToStorage } from "./fun_upload_to_storage";

src/app_modules/_global/lib/index.ts

@@ -1,5 +1,5 @@
 import { globalStatusApp } from "./master_list_app";
-import { MAX_SIZE } from "./max_size";
+import { MAX_SIZE } from "./maximal_setting";
 
 export { MAX_SIZE };
 export { globalStatusApp };

src/app_modules/_global/lib/maximal_setting.ts

@@ -1,3 +1,8 @@
 // Maksimal ukuran file dalam byte (3 MB)
 export const MAX_SIZE = 3 * 1024 * 1024; // 3 MB
-export const PemberitahuanMaksimalFile = "Ukuran file terlalu besar. Maksimal 3 MB.";
+export const PemberitahuanMaksimalFile = "Ukuran file terlalu besar. Maksimal 3 MB.";
+
+/**
+ * Maksimal panjang input 1000 karakter
+ */
+export const maxInputLength = 1000;