116 lines
3.4 KiB
Markdown
116 lines
3.4 KiB
Markdown
# 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):
|
|
```javascript
|
|
// 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):
|
|
```javascript
|
|
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:
|
|
```javascript
|
|
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:
|
|
```javascript
|
|
<Controller
|
|
control={control}
|
|
name="description"
|
|
render={({ field: { onChange, value } }) => (
|
|
<CustomEditor onChange={onChange} initialData={value} />
|
|
)}
|
|
/>
|
|
```
|
|
|
|
### setValue akan bekerja:
|
|
```javascript
|
|
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! |