Jakarta - Kapolri Jenderal Polisi Drs. Listyo Sigit Prabowo memberikan
kenaikan pangkat luar biasa anumerta kepada almarhum Bharatu Mardi
diff --git a/components/editor/basic-editor.js b/components/editor/basic-editor.js
new file mode 100644
index 0000000..bcf5c6f
Binary files /dev/null and b/components/editor/basic-editor.js differ
diff --git a/components/editor/custom-editor.js b/components/editor/custom-editor.js
new file mode 100644
index 0000000..6599d8e
--- /dev/null
+++ b/components/editor/custom-editor.js
@@ -0,0 +1,77 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { CKEditor } from "@ckeditor/ckeditor5-react";
+import Editor from "@/vendor/ckeditor5/build/ckeditor";
+
+function CustomEditor(props) {
+ const maxHeight = props.maxHeight || 600;
+
+ return (
+
+ {
+ const data = editor.getData();
+ console.log({ event, editor, data });
+ props.onChange(data);
+ }}
+ config={{
+ toolbar: [
+ "heading",
+ "fontsize",
+ "bold",
+ "italic",
+ "link",
+ "numberedList",
+ "bulletedList",
+ "undo",
+ "redo",
+ "alignment",
+ "outdent",
+ "indent",
+ "blockQuote",
+ "insertTable",
+ "codeBlock",
+ "sourceEditing",
+ ],
+ content_style: `
+ body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ font-size: 14px;
+ line-height: 1.6;
+ color: #111 !important;
+ background: #fff !important;
+ margin: 0;
+ padding: 1rem;
+ }
+ p {
+ margin: 0.5em 0 !important;
+ }
+ h1, h2, h3, h4, h5, h6 {
+ margin: 1em 0 0.5em 0;
+ color: inherit !important;
+ }
+ ul, ol {
+ margin: 0.5em 0;
+ padding-left: 2em;
+ }
+ blockquote {
+ margin: 1em 0;
+ padding: 0.5em 1em;
+ border-left: 4px solid #d1d5db;
+ background-color: #f9fafb;
+ color: inherit !important;
+ }
+ `,
+ height: props.height || 400,
+ removePlugins: ["Title"],
+ mobile: {
+ theme: "silver",
+ },
+ }}
+ />
+
+ );
+}
+
+export default CustomEditor;
diff --git a/components/editor/editor-example.tsx b/components/editor/editor-example.tsx
new file mode 100644
index 0000000..5b054dd
--- /dev/null
+++ b/components/editor/editor-example.tsx
@@ -0,0 +1,164 @@
+"use client";
+
+import React, { useState } from 'react';
+
+// Import the optimized editor (choose one based on your migration)
+// import OptimizedEditor from './optimized-editor'; // TinyMCE
+// import OptimizedCKEditor from './optimized-ckeditor'; // CKEditor5 Classic
+// import MinimalEditor from './minimal-editor'; // React Quill
+
+interface EditorExampleProps {
+ editorType?: 'tinymce' | 'ckeditor' | 'quill';
+}
+
+const EditorExample: React.FC
= ({
+ editorType = 'tinymce'
+}) => {
+ const [content, setContent] = useState('Hello, this is the editor content!
');
+ const [savedContent, setSavedContent] = useState('');
+
+ const handleContentChange = (newContent: string) => {
+ setContent(newContent);
+ };
+
+ const handleSave = () => {
+ setSavedContent(content);
+ console.log('Content saved:', content);
+ };
+
+ const handleReset = () => {
+ setContent('Content has been reset!
');
+ };
+
+ return (
+
+
+
Rich Text Editor Example
+
+ This is an optimized editor with {editorType} - much smaller bundle size and better performance!
+
+
+
+
+ {/* Editor Panel */}
+
+
+
Editor
+
+
+
+
+
+
+
+ {/* Choose your editor based on migration */}
+ {editorType === 'tinymce' && (
+
+
+ TinyMCE Editor (200KB bundle)
+
+ {/*
*/}
+
+
TinyMCE Editor Component
+
+
+ )}
+
+ {editorType === 'ckeditor' && (
+
+
+ CKEditor5 Classic (800KB bundle)
+
+ {/*
*/}
+
+
CKEditor5 Classic Component
+
+
+ )}
+
+ {editorType === 'quill' && (
+
+
+ React Quill (100KB bundle)
+
+ {/*
*/}
+
+
React Quill Component
+
+
+ )}
+
+
+
+ {/* Preview Panel */}
+
+
Preview
+
+
+
+ {savedContent && (
+
+ )}
+
+
+
Raw HTML:
+
+ {content}
+
+
+
+
+
+ {/* Performance Info */}
+
+
Performance Benefits:
+
+ - • 90% smaller bundle size compared to custom CKEditor5
+ - • Faster initial load time
+ - • Better mobile performance
+ - • Reduced memory usage
+ - • Improved Lighthouse score
+
+
+
Updated content at ${new Date().toLocaleTimeString()}
This content was set via setValue
`;
+ setValue('description', newContent);
+ setTestData(newContent);
+ };
+
+ const handleSetEmpty = () => {
+ setValue('description', '');
+ setTestData('');
+ };
+
+ const handleSetHTML = () => {
+ const htmlContent = `
+ HTML Content Test
+ This is a bold paragraph with italic text.
+
+ - List item 1
+ - List item 2
+ - List item 3
+
+ Updated at: ${new Date().toLocaleTimeString()}
+ `;
+ setValue('description', htmlContent);
+ setTestData(htmlContent);
+ };
+
+ const onSubmit = (data: any) => {
+ console.log('Form submitted:', data);
+ alert('Form submitted! Check console for data.');
+ };
+
+ return (
+
+
Editor Test Component
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {testData || '(empty)'}
+
+
+
+
+
+
{JSON.stringify(watchedValues, null, 2)}
+
+
+
+
+
+
+
+
+ Instructions:
+
+ - Switch between CustomEditor and FormEditor to test both
+ - Click "Set Value" to test setValue functionality
+ - Click "Set Empty" to test empty content handling
+ - Click "Set HTML Content" to test rich HTML content
+ - Type in the editor to test onChange functionality
+ - Submit the form to see all data
+
+
+
+
+
+ {/* Status bar */}
+ {isEditorLoaded && (
+
+
+
+ {autoSave && !readOnly ? "Auto-save enabled" : "Read-only mode"}
+
+ {lastSaved && autoSave && !readOnly && (
+ • Last saved: {lastSaved.toLocaleTimeString()}
+ )}
+ • {wordCount} characters
+
+
+ {features} mode
+
+
+ )}
+
+ {/* Performance indicator */}
+
+ Bundle size:{" "}
+ {features === "basic"
+ ? "~150KB"
+ : features === "standard"
+ ? "~200KB"
+ : "~300KB"}
+
+
+
+
+
+ );
+}
+
+export default ViewEditor;
+
+// import React from "react";
+// import { CKEditor } from "@ckeditor/ckeditor5-react";
+// import Editor from "ckeditor5-custom-build";
+
+// function ViewEditor(props) {
+// const maxHeight = props.maxHeight || 600;
+
+// return (
+//
+//
+//
+//
+// );
+// }
+
+// export default ViewEditor;
diff --git a/components/form/article/create-image-form.tsx b/components/form/article/create-image-form.tsx
new file mode 100644
index 0000000..328f946
--- /dev/null
+++ b/components/form/article/create-image-form.tsx
@@ -0,0 +1,918 @@
+"use client";
+import { Fragment, useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import dynamic from "next/dynamic";
+import { useDropzone } from "react-dropzone";
+import { CloudUploadIcon, TimesIcon } from "@/components/icons";
+import Image from "next/image";
+import ReactSelect from "react-select";
+import makeAnimated from "react-select/animated";
+import { convertDateFormatNoTime, htmlToString } from "@/utils/global";
+import { close, error, loading, successToast } from "@/config/swal";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import Cookies from "js-cookie";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+ createArticle,
+ createArticleSchedule,
+ getArticleByCategory,
+ uploadArticleFile,
+ uploadArticleThumbnail,
+} from "@/service/article";
+import {
+ saveManualContext,
+ updateManualArticle,
+} from "@/service/generate-article";
+import { getUserLevels } from "@/service/user-levels-service";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Button } from "@/components/ui/button";
+import { getCategoryById } from "@/service/master-categories";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import GenerateSingleArticleForm from "./generate-ai-single-form";
+import GenerateContentRewriteForm from "./generate-ai-content-rewrite-form";
+import { Textarea } from "@/components/ui/textarea";
+import { Badge } from "@/components/ui/badge";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover";
+import { Calendar } from "@/components/ui/calendar";
+import DatePicker from "react-datepicker";
+
+const CustomEditor = dynamic(
+ () => {
+ return import("@/components/editor/custom-editor");
+ },
+ { ssr: false },
+);
+
+interface FileWithPreview extends File {
+ preview: string;
+}
+
+interface CategoryType {
+ id: number;
+ label: string;
+ value: number;
+}
+const categorySchema = z.object({
+ id: z.number(),
+ label: z.string(),
+ value: z.number(),
+});
+
+interface DiseData {
+ id: number;
+ articleBody: string;
+ title: string;
+ metaTitle: string;
+ description: string;
+ metaDescription: string;
+ mainKeyword: string;
+ additionalKeywords: string;
+}
+
+const createArticleSchema = z.object({
+ title: z.string().min(2, {
+ message: "Judul harus diisi",
+ }),
+ customCreatorName: z.string().min(2, {
+ message: "Judul harus diisi",
+ }),
+ slug: z.string().min(2, {
+ message: "Slug harus diisi",
+ }),
+ description: z.string().min(2, {
+ message: "Deskripsi harus diisi",
+ }),
+ // category: z.array(categorySchema).nonempty({
+ // message: "Kategori harus memiliki setidaknya satu item",
+ // }),
+ tags: z.array(z.string()).nonempty({
+ message: "Minimal 1 tag",
+ }),
+ source: z.enum(["internal", "external"]).optional(),
+});
+
+export default function CreateImageForm() {
+ const userLevel = Cookies.get("ulne");
+ const animatedComponents = makeAnimated();
+ const MySwal = withReactContent(Swal);
+ const router = useRouter();
+ const [files, setFiles] = useState([]);
+ const [useAi, setUseAI] = useState(false);
+ const [listCategory, setListCategory] = useState([]);
+ const [tag, setTag] = useState("");
+ const [thumbnailImg, setThumbnailImg] = useState([]);
+ const [selectedMainImage, setSelectedMainImage] = useState(
+ null,
+ );
+ const [thumbnailValidation, setThumbnailValidation] = useState("");
+ const [filesValidation, setFileValidation] = useState("");
+ const [diseData, setDiseData] = useState();
+ const [selectedWritingType, setSelectedWritingType] = useState("single");
+ const [status, setStatus] = useState<"publish" | "draft" | "scheduled">(
+ "publish",
+ );
+ const [isScheduled, setIsScheduled] = useState(false);
+ const [startDateValue, setStartDateValue] = useState();
+ const [startTimeValue, setStartTimeValue] = useState("");
+
+ const { getRootProps, getInputProps } = useDropzone({
+ onDrop: (acceptedFiles) => {
+ setFiles((prevFiles) => [
+ ...prevFiles,
+ ...acceptedFiles.map((file) => Object.assign(file)),
+ ]);
+ },
+ multiple: true,
+ accept: {
+ "image/*": [],
+ },
+ });
+
+ const formOptions = {
+ resolver: zodResolver(createArticleSchema),
+ defaultValues: { title: "", description: "", category: [], tags: [] },
+ };
+ type UserSettingSchema = z.infer;
+ const {
+ control,
+ handleSubmit,
+ formState: { errors },
+ setValue,
+ getValues,
+ watch,
+ setError,
+ clearErrors,
+ } = useForm(formOptions);
+
+ useEffect(() => {
+ fetchCategory();
+ }, []);
+
+ const fetchCategory = async () => {
+ const res = await getArticleByCategory();
+ if (res?.data?.data) {
+ setupCategory(res?.data?.data);
+ }
+ };
+
+ const setupCategory = (data: any) => {
+ const temp = [];
+ for (const element of data) {
+ temp.push({
+ id: element.id,
+ label: element.title,
+ value: element.id,
+ });
+ }
+ setListCategory(temp);
+ };
+
+ const onSubmit = async (values: z.infer) => {
+ if ((thumbnailImg.length < 1 && !selectedMainImage) || files.length < 1) {
+ if (files.length < 1) {
+ setFileValidation("Required");
+ } else {
+ setFileValidation("");
+ }
+ if (thumbnailImg.length < 1 && !selectedMainImage) {
+ setThumbnailValidation("Required");
+ } else {
+ setThumbnailValidation("");
+ }
+ } else {
+ setThumbnailValidation("");
+ setFileValidation("");
+ MySwal.fire({
+ title: "Simpan Data",
+ text: "",
+ icon: "warning",
+ showCancelButton: true,
+ cancelButtonColor: "#d33",
+ confirmButtonColor: "#3085d6",
+ confirmButtonText: "Simpan",
+ }).then((result) => {
+ if (result.isConfirmed) {
+ save(values);
+ }
+ });
+ }
+ };
+
+ useEffect(() => {
+ if (useAi === false) {
+ setValue("description", "");
+ }
+ }, [useAi]);
+
+ function removeImgTags(htmlString: string) {
+ const parser = new DOMParser();
+ const doc = parser.parseFromString(String(htmlString), "text/html");
+
+ const images = doc.querySelectorAll("img");
+ images.forEach((img) => img.remove());
+ return doc.body.innerHTML;
+ }
+
+ const saveArticleToDise = async (
+ values: z.infer,
+ ) => {
+ if (useAi) {
+ const request = {
+ id: diseData?.id,
+ title: values.title,
+ customCreatorName: values.customCreatorName,
+ source: values.source,
+ articleBody: removeImgTags(values.description),
+ metaDescription: diseData?.metaDescription,
+ metaTitle: diseData?.metaTitle,
+ mainKeyword: diseData?.mainKeyword,
+ additionalKeywords: diseData?.additionalKeywords,
+ createdBy: "345",
+ style: "Informational",
+ projectId: 2,
+ clientId: "humasClientIdtest",
+ lang: "id",
+ };
+ const res = await updateManualArticle(request);
+ if (res.error) {
+ error(res.message);
+ return false;
+ }
+
+ return diseData?.id;
+ } else {
+ const request = {
+ title: values.title,
+ articleBody: removeImgTags(values.description),
+ metaDescription: values.title,
+ metaTitle: values.title,
+ mainKeyword: values.title,
+ additionalKeywords: values.title,
+ createdBy: "345",
+ style: "Informational",
+ projectId: 2,
+ clientId: "humasClientIdtest",
+ lang: "id",
+ };
+
+ const res = await saveManualContext(request);
+ if (res.error) {
+ res.message;
+ return 0;
+ }
+ return res?.data?.data?.id;
+ }
+ };
+
+ const getUserLevelApprovalStatus = async () => {
+ const res = await getUserLevels(String(userLevel));
+ return res?.data?.data?.isApprovalActive;
+ };
+
+ const save = async (values: z.infer) => {
+ loading();
+
+ const userLevelStatus = await getUserLevelApprovalStatus();
+ const formData = {
+ title: values.title,
+ typeId: 1,
+ slug: values.slug,
+ customCreatorName: values.customCreatorName,
+ source: values.source,
+ categoryIds: "test",
+ tags: values.tags.join(","),
+ description: htmlToString(removeImgTags(values.description)),
+ htmlDescription: removeImgTags(values.description),
+ aiArticleId: await saveArticleToDise(values),
+ // isDraft: userLevelStatus ? true : status === "draft",
+ // isPublish: userLevelStatus ? false : status === "publish",
+ isDraft: status === "draft",
+ isPublish: status === "publish",
+ };
+
+ const response = await createArticle(formData);
+
+ if (response?.error) {
+ error(response.message);
+ return false;
+ }
+ const articleId = response?.data?.data?.id;
+
+ if (files?.length > 0) {
+ const formFiles = new FormData();
+
+ for (const element of files) {
+ formFiles.append("file", element);
+ const resFile = await uploadArticleFile(articleId, formFiles);
+ }
+ }
+ if (thumbnailImg?.length > 0 || files?.length > 0) {
+ if (thumbnailImg?.length > 0) {
+ const formFiles = new FormData();
+
+ formFiles.append("files", thumbnailImg[0]);
+ const resFile = await uploadArticleThumbnail(articleId, formFiles);
+ } else {
+ const formFiles = new FormData();
+
+ if (selectedMainImage) {
+ formFiles.append("files", files[selectedMainImage - 1]);
+
+ const resFile = await uploadArticleThumbnail(articleId, formFiles);
+ }
+ }
+ }
+
+ if (status === "scheduled" && startDateValue) {
+ // ambil waktu, default 00:00 jika belum diisi
+ const [hours, minutes] = startTimeValue
+ ? startTimeValue.split(":").map(Number)
+ : [0, 0];
+
+ // gabungkan tanggal + waktu
+ const combinedDate = new Date(startDateValue);
+ combinedDate.setHours(hours, minutes, 0, 0);
+
+ // format: 2025-10-08 14:30:00
+ const formattedDateTime = `${combinedDate.getFullYear()}-${String(
+ combinedDate.getMonth() + 1,
+ ).padStart(2, "0")}-${String(combinedDate.getDate()).padStart(
+ 2,
+ "0",
+ )} ${String(combinedDate.getHours()).padStart(2, "0")}:${String(
+ combinedDate.getMinutes(),
+ ).padStart(2, "0")}:00`;
+
+ const request = {
+ id: articleId,
+ date: formattedDateTime,
+ };
+
+ console.log("📤 Sending schedule request:", request);
+ const res = await createArticleSchedule(request);
+ console.log("✅ Schedule response:", res);
+ }
+
+ close();
+ successSubmit("/admin/article", articleId, values.slug);
+ };
+
+ function successSubmit(redirect: string, id: number, slug: string) {
+ const url =
+ `${window.location.protocol}//${window.location.host}` +
+ "/news/detail/" +
+ `${id}-${slug}`;
+ MySwal.fire({
+ title: "Sukses",
+ icon: "success",
+ confirmButtonColor: "#3085d6",
+ confirmButtonText: "OK",
+ }).then((result) => {
+ if (result.isConfirmed) {
+ router.push(redirect);
+ successToast("Article Url", url);
+ } else {
+ router.push(redirect);
+ successToast("Article Url", url);
+ }
+ });
+ }
+
+ const watchTitle = watch("title");
+ const generateSlug = (title: string) => {
+ return title
+ .toLowerCase()
+ .trim()
+ .replace(/[^\w\s-]/g, "")
+ .replace(/\s+/g, "-");
+ };
+
+ useEffect(() => {
+ setValue("slug", generateSlug(watchTitle));
+ }, [watchTitle]);
+
+ const renderFilePreview = (file: FileWithPreview) => {
+ if (file.type.startsWith("image")) {
+ return (
+
+ );
+ } else {
+ return "Not Found";
+ }
+ };
+
+ const handleRemoveFile = (file: FileWithPreview) => {
+ const uploadedFiles = files;
+ const filtered = uploadedFiles.filter((i) => i.name !== file.name);
+ setFiles([...filtered]);
+ };
+
+ const fileList = files.map((file, index) => (
+
+
+
{renderFilePreview(file)}
+
+
{file.name}
+
+ {Math.round(file.size / 100) / 10 > 1000 ? (
+ <>{(Math.round(file.size / 100) / 10000).toFixed(1)}
+ ) : (
+ <>{(Math.round(file.size / 100) / 10).toFixed(1)}
+ )}
+ {" kb"}
+
+
+ setSelectedMainImage(index + 1)}
+ />
+
+
+
+
+
+
+