ckeditor static page

components/form/static-page/static-page-edit-form.tsx

@@ -15,6 +15,14 @@ import { close, error, loading } from "@/config/swal";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
 import { useParams, useRouter } from "next/navigation";
+import dynamic from "next/dynamic";
+
+const CustomEditor = dynamic(
+  () => {
+    return import("@/components/editor/custom-editor");
+  },
+  { ssr: false }
+);
 
 const formSchema = z.object({
   slug: z.string().min(2, {
@@ -60,15 +68,30 @@ export default function StaticPageBuilderEdit() {
     setValue("title", data?.title);
     setValue("slug", data?.slug);
     setValue("description", data?.description);
-    setValue("htmlBody", data?.htmlBody);
+    setValue("htmlBody", addPreCode(data?.htmlBody));
+    console.log("asdasd", addPreCode(data?.htmlBody));
+  };
+
+  const addPreCode = (htmlString: string): string => {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(htmlString, "text/html");
+
+    const bodyContent = doc.body.innerHTML.trim();
+
+    return `<pre><code class="language-html">${bodyContent
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")}</code></pre>`;
   };
 
   const content = watch("htmlBody");
   const generatedPage = useCallback(() => {
-    const sanitizedContent = DOMPurify.sanitize(getValues("htmlBody"));
+    const sanitizedContent = DOMPurify.sanitize(content);
+    const textArea = document.createElement("textarea");
+    textArea.innerHTML = sanitizedContent;
+
     return (
       <Card className="rounded-md border p-4">
-        <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
+        <div dangerouslySetInnerHTML={{ __html: textArea.value }} />
       </Card>
     );
   }, [content]);
@@ -188,22 +211,7 @@ export default function StaticPageBuilderEdit() {
             control={control}
             name="htmlBody"
             render={({ field: { onChange, value } }) => (
-              <Textarea
+              <CustomEditor onChange={onChange} initialData={value} />
-                variant="bordered"
-                label=""
-                labelPlacement="outside"
-                placeholder=""
-                className="max-h-[80vh]"
-                classNames={{
-                  mainWrapper: "h-[80vh] overflow-hidden",
-                  innerWrapper: "h-[80vh] overflow-hidden",
-                  input: "min-h-full",
-                  inputWrapper: "h-full",
-                }}
-                value={value}
-                onChange={onChange}
-                disableAutosize={false}
-              />
             )}
           />
         </div>

components/main/static-page/static-page-main.tsx

@@ -11,6 +11,14 @@ import { close, error, loading } from "@/config/swal";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
 import { useRouter } from "next/navigation";
+import dynamic from "next/dynamic";
+
+const CustomEditor = dynamic(
+  () => {
+    return import("@/components/editor/custom-editor");
+  },
+  { ssr: false }
+);
 
 const formSchema = z.object({
   slug: z.string().min(2, {
@@ -47,10 +55,14 @@ export default function StaticPageBuilder() {
 
   const content = watch("htmlBody");
   const generatedPage = useCallback(() => {
-    const sanitizedContent = DOMPurify.sanitize(getValues("htmlBody"));
+    const sanitizedContent = DOMPurify.sanitize(content);
+    const textArea = document.createElement("textarea");
+    textArea.innerHTML = sanitizedContent;
     return (
       <Card className="rounded-md border p-4">
-        <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} />
+        {/* <div dangerouslySetInnerHTML={{ __html: sanitizedContent }} /> */}
+        <div dangerouslySetInnerHTML={{ __html: textArea.value }} />
+        {/* {sanitizedContent} */}
       </Card>
     );
   }, [content]);
@@ -169,22 +181,23 @@ export default function StaticPageBuilder() {
             control={control}
             name="htmlBody"
             render={({ field: { onChange, value } }) => (
-              <Textarea
+              // <Textarea
-                variant="bordered"
+              //   variant="bordered"
-                label=""
+              //   label=""
-                labelPlacement="outside"
+              //   labelPlacement="outside"
-                placeholder=""
+              //   placeholder=""
-                className="max-h-[80vh]"
+              //   className="max-h-[80vh]"
-                classNames={{
+              //   classNames={{
-                  mainWrapper: "h-[80vh] overflow-hidden",
+              //     mainWrapper: "h-[80vh] overflow-hidden",
-                  innerWrapper: "h-[80vh] overflow-hidden",
+              //     innerWrapper: "h-[80vh] overflow-hidden",
-                  input: "min-h-full",
+              //     input: "min-h-full",
-                  inputWrapper: "h-full",
+              //     inputWrapper: "h-full",
-                }}
+              //   }}
-                value={value}
+              //   value={value}
-                onChange={onChange}
+              //   onChange={onChange}
-                disableAutosize={false}
+              //   disableAutosize={false}
-              />
+              // />
+              <CustomEditor onChange={onChange} initialData={value} />
             )}
           />
         </div>