mediahub-fe/FORM_EDITOR_FIX.md

Form Editor Initial Data Fix

Masalah yang Ditemukan

CustomEditor tidak menampilkan initial data yang diset melalui setValue dari react-hook-form karena:

1. Timing Issue: setValue dipanggil sebelum editor selesai di-mount
2. Tidak ada state management untuk initial data di CustomEditor
3. Tidak ada useEffect untuk watch perubahan props

Solusi yang Diterapkan

1. CustomEditor Diperbaiki ✅

• Menambahkan: useEffect untuk watch perubahan initialData prop
• Menambahkan: editorRef.current.setContent() ketika props berubah
• Mempertahankan: Pendekatan minimal yang sudah bekerja

2. FormEditor Dibuat ✅ (New)

• File baru: components/editor/form-editor.js
• Fitur: State management untuk initial data
• Fitur: Watch perubahan props dengan lebih baik
• Fitur: Editor ready state management

3. Form Diperbarui ✅

• Menggunakan: FormEditor sebagai pengganti CustomEditor
• Import: Dynamic import untuk FormEditor
• Mempertahankan: Interface yang sama

Kode yang Diperbaiki

CustomEditor (Diperbaiki):

// Watch for changes in initialData prop and update editor content
useEffect(() => {
  if (editorRef.current && props.initialData) {
    editorRef.current.setContent(props.initialData);
  }
}, [props.initialData]);

FormEditor (Baru):

const [isEditorReady, setIsEditorReady] = useState(false);
const [initialData, setInitialData] = useState(props.initialData || '');

// Watch for changes in initialData prop
useEffect(() => {
  if (props.initialData !== initialData) {
    setInitialData(props.initialData || '');
    
    // Update editor content if editor is ready
    if (isEditorReady && editorRef.current) {
      editorRef.current.setContent(props.initialData || '');
    }
  }
}, [props.initialData, initialData, isEditorReady]);

Form Update:

const CustomEditor = dynamic(
  () => {
    return import("@/components/editor/form-editor");
  },
  { ssr: false }
);

Cara Kerja Solusi

1. Timing Management:

• FormEditor menggunakan state isEditorReady untuk memastikan editor sudah siap
• useEffect hanya update content ketika editor sudah ready

2. Props Watching:

• useEffect watch perubahan props.initialData
• Ketika props berubah, update internal state dan editor content

3. State Management:

• Internal state initialData untuk tracking perubahan
• Mencegah infinite loop dengan comparison

Keunggulan FormEditor

1. Better Initial Data Handling - Menangani setValue dengan benar
2. State Management - Internal state untuk tracking
3. Ready State - Memastikan editor sudah siap sebelum update
4. Props Watching - Watch perubahan props secara efektif
5. No Cursor Jumping - Menggunakan pendekatan minimal yang sudah bekerja

Cara Menggunakan

Di Form:

<Controller
  control={control}
  name="description"
  render={({ field: { onChange, value } }) => (
    <CustomEditor onChange={onChange} initialData={value} />
  )}
/>

setValue akan bekerja:

setValue("description", details.htmlDescription);

Kesimpulan

Masalah initial data di form sudah diperbaiki dengan:

• CustomEditor yang diperbaiki dengan useEffect
• FormEditor baru yang lebih robust
• Form yang menggunakan FormEditor

Sekarang setValue akan bekerja dengan benar dan initial data akan ditampilkan di editor!