mediahub-fe/EDITOR_OPTIMIZATION_SUMMARY.md

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:

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:

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:

import CustomEditor from './components/editor/custom-editor';

<CustomEditor
  initialData={content}
  onChange={setContent}
/>

2. Untuk Editor Read-Only:

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.