139 lines
3.5 KiB
Markdown
139 lines
3.5 KiB
Markdown
# Editor Optimization Summary
|
|
|
|
## Masalah yang Dipecahkan
|
|
Masalah cursor jumping di TinyMCE editor telah berhasil diatasi dengan menggunakan pendekatan minimal yang konsisten.
|
|
|
|
## Editor yang Dioptimalkan
|
|
|
|
### 1. Minimal Editor ✅ (Working Well)
|
|
**File:** `components/editor/minimal-editor.js`
|
|
- **Status:** Berfungsi sangat baik
|
|
- **Pendekatan:** Minimal, tanpa state management kompleks
|
|
- **Event Handling:** Hanya menggunakan event 'change'
|
|
|
|
### 2. Custom Editor ✅ (Updated)
|
|
**File:** `components/editor/custom-editor.js`
|
|
- **Status:** Diperbarui menggunakan pendekatan Minimal Editor
|
|
- **Perubahan:**
|
|
- Menghapus state management kompleks
|
|
- Menghapus debouncing dan recursive updates
|
|
- Menggunakan event 'change' sederhana
|
|
- Menghapus `onEditorChange` prop
|
|
|
|
### 3. View Editor ✅ (Updated)
|
|
**File:** `components/editor/view-editor.js`
|
|
- **Status:** Diperbarui menggunakan pendekatan Minimal Editor
|
|
- **Perubahan:**
|
|
- Menghapus `initialValue` dan `disabled` props
|
|
- Menggunakan `setContent()` untuk set initial data
|
|
- Menambahkan pengaturan yang sama dengan Minimal Editor
|
|
- Tetap mempertahankan mode read-only
|
|
|
|
## Pendekatan yang Berhasil
|
|
|
|
### Kunci Sukses:
|
|
1. **Tidak menggunakan React state** untuk content management
|
|
2. **Hanya menggunakan event 'change'** untuk onChange
|
|
3. **Menggunakan `setContent()`** untuk set initial data
|
|
4. **Pengaturan TinyMCE yang minimal** dan stabil
|
|
5. **Tidak ada debouncing atau complex logic**
|
|
|
|
### Pengaturan TinyMCE yang Kritis:
|
|
```javascript
|
|
init={{
|
|
// Mencegah cursor jumping
|
|
auto_focus: false,
|
|
forced_root_block: 'p',
|
|
entity_encoding: 'raw',
|
|
|
|
// Menonaktifkan fitur bermasalah
|
|
verify_html: false,
|
|
cleanup: false,
|
|
cleanup_on_startup: false,
|
|
auto_resize: false,
|
|
|
|
// Content handling sederhana
|
|
paste_as_text: false,
|
|
paste_enable_default_filters: true
|
|
}}
|
|
```
|
|
|
|
## Struktur Kode yang Konsisten
|
|
|
|
### Template untuk Editor Baru:
|
|
```javascript
|
|
import React, { useRef } from "react";
|
|
import { Editor } from "@tinymce/tinymce-react";
|
|
|
|
function MyEditor(props) {
|
|
const editorRef = useRef(null);
|
|
|
|
const handleInit = (evt, editor) => {
|
|
editorRef.current = editor;
|
|
|
|
// Set initial content if provided
|
|
if (props.initialData) {
|
|
editor.setContent(props.initialData);
|
|
}
|
|
|
|
// Simple onChange handler
|
|
editor.on('change', () => {
|
|
if (props.onChange) {
|
|
props.onChange(editor.getContent());
|
|
}
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Editor
|
|
onInit={handleInit}
|
|
apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
|
|
init={{
|
|
// ... pengaturan TinyMCE
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Cara Menggunakan
|
|
|
|
### 1. Untuk Editor yang Dapat Diedit:
|
|
```javascript
|
|
import CustomEditor from './components/editor/custom-editor';
|
|
|
|
<CustomEditor
|
|
initialData={content}
|
|
onChange={setContent}
|
|
/>
|
|
```
|
|
|
|
### 2. Untuk Editor Read-Only:
|
|
```javascript
|
|
import ViewEditor from './components/editor/view-editor';
|
|
|
|
<ViewEditor
|
|
initialData={content}
|
|
/>
|
|
```
|
|
|
|
## Test Component
|
|
|
|
Gunakan `components/editor/editor-test.tsx` untuk menguji semua versi editor:
|
|
- Static Editor
|
|
- Minimal Editor (Working Well)
|
|
- Simple Editor
|
|
- Custom Editor (Updated)
|
|
- Advanced Editor
|
|
|
|
## Kesimpulan
|
|
|
|
Semua editor sekarang menggunakan pendekatan yang konsisten dan minimal, yang telah terbukti mengatasi masalah cursor jumping. Pendekatan ini:
|
|
|
|
- ✅ Mengatasi cursor jumping
|
|
- ✅ Konsisten di semua editor
|
|
- ✅ Mudah dimaintain
|
|
- ✅ Performa yang baik
|
|
- ✅ Tidak ada re-render yang tidak perlu
|
|
|
|
**Rekomendasi:** Gunakan Custom Editor untuk editing dan View Editor untuk read-only mode. |