humas
/
web-humas-fe
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ckeditor static page

This commit is contained in:
Rama Priyanto 2025-02-18 20:05:08 +07:00
parent 66aaa5f0b3
commit 2faabb40eb
2 changed files with 58 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
components/form/static-page/static-page-edit-form.tsx
View File

@ -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
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}
/>
<CustomEditor onChange={onChange} initialData={value} />
)}
/>
</div>

49
components/main/static-page/static-page-main.tsx
View File

@ -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
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}
/>
// <Textarea
// 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}
// />
<CustomEditor onChange={onChange} initialData={value} />
)}
/>
</div>