web-arah-negeri/components/editor/editor-example.tsx

"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<EditorExampleProps> = ({ 
  editorType = 'tinymce' 
}) => {
  const [content, setContent] = useState('<p>Hello, this is the editor content!</p>');
  const [savedContent, setSavedContent] = useState('');

  const handleContentChange = (newContent: string) => {
    setContent(newContent);
  };

  const handleSave = () => {
    setSavedContent(content);
    console.log('Content saved:', content);
  };

  const handleReset = () => {
    setContent('<p>Content has been reset!</p>');
  };

  return (
    <div className="p-6 max-w-4xl mx-auto">
      <div className="mb-6">
        <h2 className="text-2xl font-bold mb-4">Rich Text Editor Example</h2>
        <p className="text-gray-600 mb-4">
          This is an optimized editor with {editorType} - much smaller bundle size and better performance!
        </p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Editor Panel */}
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <h3 className="text-lg font-semibold">Editor</h3>
            <div className="flex gap-2">
              <button
                onClick={handleSave}
                className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
              >
                Save
              </button>
              <button
                onClick={handleReset}
                className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
              >
                Reset
              </button>
            </div>
          </div>

          <div className="border border-gray-200 rounded-lg">
            {/* Choose your editor based on migration */}
            {editorType === 'tinymce' && (
              <div className="p-4">
                <p className="text-gray-500 text-sm mb-2">
                  TinyMCE Editor (200KB bundle)
                </p>
                {/* <OptimizedEditor
                  initialData={content}
                  onChange={handleContentChange}
                  height={400}
                  placeholder="Start typing your content..."
                /> */}
                <div className="h-96 bg-gray-50 border border-gray-200 rounded flex items-center justify-center">
                  <p className="text-gray-500">TinyMCE Editor Component</p>
                </div>
              </div>
            )}

            {editorType === 'ckeditor' && (
              <div className="p-4">
                <p className="text-gray-500 text-sm mb-2">
                  CKEditor5 Classic (800KB bundle)
                </p>
                {/* <OptimizedCKEditor
                  initialData={content}
                  onChange={handleContentChange}
                  height={400}
                  placeholder="Start typing your content..."
                /> */}
                <div className="h-96 bg-gray-50 border border-gray-200 rounded flex items-center justify-center">
                  <p className="text-gray-500">CKEditor5 Classic Component</p>
                </div>
              </div>
            )}

            {editorType === 'quill' && (
              <div className="p-4">
                <p className="text-gray-500 text-sm mb-2">
                  React Quill (100KB bundle)
                </p>
                {/* <MinimalEditor
                  initialData={content}
                  onChange={handleContentChange}
                  height={400}
                  placeholder="Start typing your content..."
                /> */}
                <div className="h-96 bg-gray-50 border border-gray-200 rounded flex items-center justify-center">
                  <p className="text-gray-500">React Quill Component</p>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Preview Panel */}
        <div className="space-y-4">
          <h3 className="text-lg font-semibold">Preview</h3>
          
          <div className="border border-gray-200 rounded-lg p-4">
            <h4 className="font-medium mb-2">Current Content:</h4>
            <div 
              className="prose max-w-none"
              dangerouslySetInnerHTML={{ __html: content }}
            />
          </div>

          {savedContent && (
            <div className="border border-gray-200 rounded-lg p-4">
              <h4 className="font-medium mb-2">Saved Content:</h4>
              <div 
                className="prose max-w-none"
                dangerouslySetInnerHTML={{ __html: savedContent }}
              />
            </div>
          )}

          <div className="border border-gray-200 rounded-lg p-4">
            <h4 className="font-medium mb-2">Raw HTML:</h4>
            <pre className="text-xs bg-gray-100 p-2 rounded overflow-auto max-h-32">
              {content}
            </pre>
          </div>
        </div>
      </div>

      {/* Performance Info */}
      <div className="mt-8 p-4 bg-blue-50 rounded-lg">
        <h4 className="font-medium text-blue-900 mb-2">Performance Benefits:</h4>
        <ul className="text-sm text-blue-800 space-y-1">
          <li>• 90% smaller bundle size compared to custom CKEditor5</li>
          <li>• Faster initial load time</li>
          <li>• Better mobile performance</li>
          <li>• Reduced memory usage</li>
          <li>• Improved Lighthouse score</li>
        </ul>
      </div>
    </div>
  );
};

export default EditorExample;