feat: re-add ckeditor, fixing error

app/[locale]/(public)/content-management/rewrite/create/[id]/page.tsx

@@ -35,7 +35,7 @@ const imageSchema = z.object({
   // tags: z.string().min(1, { message: "Judul diperlukan" }),
 });
 
-const page = (props: { states?: string }) => {
+const page = (props: any) => {
   const { states } = props;
   const MySwal = withReactContent(Swal);
   const router = useRouter();

app/[locale]/(public)/content-management/rewrite/detail/[id]/page.tsx

@@ -18,8 +18,7 @@ import { saveContentRewrite } from "@/service/content/content";
 import CustomEditor from "@/components/editor/custom-editor";
 import { Input } from "@/components/ui/input";
 
-const page = (props: any) => {
+const page = () => {
-  const { states } = props;
   const [profile, setProfile] = useState();
   const MySwal = withReactContent(Swal);
   const searchParams = useSearchParams();

app/[locale]/(public)/content-management/rewrite/page.tsx

@@ -17,7 +17,7 @@ import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { sendMediaUploadToEmail } from "@/service/media-tracking/media-tracking";
 
-const page = (props: any) => {
+const page = () => {
   const [, setProfile] = useState();
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -26,7 +26,6 @@ const page = (props: any) => {
   const title = searchParams?.get("title");
   const category = searchParams?.get("category");
   const pages = page ? page - 1 : 0;
-  const { isInstitute, instituteId } = props;
   const userId = getCookiesDecrypt("uie");
   const userRoleId = getCookiesDecrypt("urie");
   const [, setGetTotalPage] = useState();

components/form/content/audio-detail-form.tsx

@@ -56,6 +56,7 @@ import { Icon } from "@iconify/react/dist/iconify.js";
 import { error } from "@/lib/swal";
 import dynamic from "next/dynamic";
 import WavesurferPlayer from "@wavesurfer/react";
+import WaveSurfer from "wavesurfer.js";
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -141,14 +142,21 @@ export default function FormAudioDetail() {
   const [audioPlaying, setAudioPlaying] = useState<any>(null);
 
   const waveSurferRef = useRef<any>(null);
-  const [isPlaying, setIsPlaying] = useState(false);
+
+  
+  const [wavesurfer, setWavesurfer] = useState<WaveSurfer>();
+  const [isPlaying, setIsPlaying] = useState(false)
+
+
+  const onReady = (ws: any) => {
+    setWavesurfer(ws)
+    setIsPlaying(false);
+  }
 
   const onPlayPause = () => {
-    if (waveSurferRef.current) {
+    wavesurfer && wavesurfer.playPause();
-      waveSurferRef.current.playPause();
-      setIsPlaying(!isPlaying);
   }
-  };
+
 
   let fileTypeId = "4";
 
@@ -452,10 +460,12 @@ export default function FormAudioDetail() {
                     {detailThumb?.map((url: any, index: number) => (
                       <div key={url.id}>
                         <WavesurferPlayer
-                          ref={waveSurferRef}
                           height={500}
                           waveColor="red"
                           url={url}
+                          onReady={onReady}
+                          onPlay={() => setIsPlaying(true)}
+                          onPause={() => setIsPlaying(false)}
                         />
                       </div>
                     ))}

package.json

@@ -140,6 +140,7 @@
     "tus-js-client": "^4.2.3",
     "use-places-autocomplete": "^4.0.1",
     "vaul": "^0.9.1",
+    "wavesurfer.js": "^7.8.15",
     "yup": "^1.6.1",
     "zod": "^3.23.8"
   },
@@ -159,7 +160,6 @@
     "eslint": "^8",
     "eslint-config-next": "14.2.3",
     "postcss": "^8",
-    "react-wavesurfer.js": "0.0.5",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }