web-mikul-news/components/editor/tinymce-editor.tsx

"use client";

import React, { useRef, useState, useEffect } from "react";
import { Editor } from "@tinymce/tinymce-react";

interface TinyMCEEditorProps {
  initialData?: string;
  onChange?: (data: string) => void;
  onReady?: (editor: any) => void;
  height?: number;
  placeholder?: string;
  disabled?: boolean;
  readOnly?: boolean;
  features?: "basic" | "standard" | "full";
  toolbar?: string;
  language?: string;
  uploadUrl?: string;
  uploadHeaders?: Record<string, string>;
  className?: string;
  autoSave?: boolean;
  autoSaveInterval?: number;
}

const TinyMCEEditor: React.FC<TinyMCEEditorProps> = ({
  initialData = "",
  onChange,
  onReady,
  height = 400,
  placeholder = "Start typing...",
  disabled = false,
  readOnly = false,
  features = "standard",
  toolbar,
  language = "en",
  uploadUrl,
  uploadHeaders,
  className = "",
  autoSave = true,
  autoSaveInterval = 30000,
}) => {
  const editorRef = useRef<any>(null);
  const [isEditorLoaded, setIsEditorLoaded] = useState(false);
  const [lastSaved, setLastSaved] = useState<Date | null>(null);
  const [wordCount, setWordCount] = useState(0);

  // Feature-based configurations
  const getFeatureConfig = (featureLevel: string) => {
    const configs = {
      basic: {
        plugins: ["lists", "link", "autolink", "wordcount"],
        toolbar: "bold italic | bullist numlist | link",
        menubar: false,
      },
      standard: {
        plugins: [
          "advlist",
          "autolink",
          "lists",
          "link",
          "image",
          "charmap",
          "preview",
          "anchor",
          "searchreplace",
          "visualblocks",
          "code",
          "fullscreen",
          "insertdatetime",
          "media",
          "table",
          "help",
          "wordcount",
        ],
        toolbar:
          "undo redo | blocks | " +
          "bold italic forecolor | alignleft aligncenter " +
          "alignright alignjustify | bullist numlist outdent indent | " +
          "removeformat | table | code | help",
        menubar: false,
      },
      full: {
        plugins: [
          "advlist",
          "autolink",
          "lists",
          "link",
          "image",
          "charmap",
          "preview",
          "anchor",
          "searchreplace",
          "visualblocks",
          "code",
          "fullscreen",
          "insertdatetime",
          "media",
          "table",
          "help",
          "wordcount",
          "emoticons",
          "paste",
          "textcolor",
          "colorpicker",
          "hr",
          "pagebreak",
          "nonbreaking",
          "toc",
          "imagetools",
          "textpattern",
          "codesample",
        ],
        toolbar:
          "undo redo | formatselect | bold italic backcolor | " +
          "alignleft aligncenter alignright alignjustify | " +
          "bullist numlist outdent indent | removeformat | help",
        menubar: "file edit view insert format tools table help",
      },
    };
    return configs[featureLevel as keyof typeof configs] || configs.standard;
  };

  const handleEditorChange = (content: string) => {
    if (onChange) {
      onChange(content);
    }
  };

  const handleEditorInit = (evt: any, editor: any) => {
    editorRef.current = editor;
    setIsEditorLoaded(true);

    if (onReady) {
      onReady(editor);
    }

    // Set up word count tracking
    editor.on("keyup", () => {
      const count = editor.plugins.wordcount.body.getCharacterCount();
      setWordCount(count);
    });

    // Set up auto-save
    if (autoSave && !readOnly) {
      setInterval(() => {
        const content = editor.getContent();
        localStorage.setItem("tinymce-autosave", content);
        setLastSaved(new Date());
      }, autoSaveInterval);
    }

    // Fix cursor jumping issues
    editor.on("keyup", (e: any) => {
      // Prevent cursor jumping on content changes
      e.stopPropagation();
    });

    editor.on("input", (e: any) => {
      // Prevent unnecessary re-renders
      e.stopPropagation();
    });

    // Handle paste events properly
    editor.on("paste", (e: any) => {
      // Allow default paste behavior
      return true;
    });
  };

  const handleImageUpload = (blobInfo: any, progress: any) => {
    return new Promise((resolve, reject) => {
      if (!uploadUrl) {
        reject("No upload URL configured");
        return;
      }

      const formData = new FormData();
      formData.append("file", blobInfo.blob(), blobInfo.filename());

      fetch(uploadUrl, {
        method: "POST",
        headers: uploadHeaders || {},
        body: formData,
      })
        .then((response) => response.json())
        .then((result) => {
          resolve(result.url);
        })
        .catch((error) => {
          reject(error);
        });
    });
  };

  const featureConfig = getFeatureConfig(features);

  const editorConfig = {
    height,
    language,
    placeholder,
    branding: false,
    elementpath: false,
    resize: false,
    statusbar: !readOnly,
    // Performance optimizations
    cache_suffix: "?v=1.0",
    browser_spellcheck: false,
    gecko_spellcheck: false,
    content_style: `
    body { 
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
      font-size: 14px; 
      line-height: 1.6; 
      color: #333; 
      margin: 0;
      padding: 16px;
    }
    .mce-content-body { 
      min-height: ${height - 32}px; 
    }
    .mce-content-body:focus {
      outline: none;
    }
  `,
    images_upload_handler: uploadUrl ? handleImageUpload : undefined,
    automatic_uploads: !!uploadUrl,
    file_picker_types: "image",
    mobile: {
      theme: "silver",
      plugins: ["lists", "autolink", "link", "image", "table"],
      toolbar: "bold italic | bullist numlist | link image",
    },
    paste_as_text: false,
    paste_enable_default_filters: true,
    paste_word_valid_elements: "b,strong,i,em,h1,h2,h3,h4,h5,h6",
    paste_retain_style_properties:
      "color background-color font-size font-weight",
    table_default_styles: { width: "100%" },
    table_default_attributes: { border: "1" },
    codesample_languages: [
      { text: "HTML/XML", value: "markup" },
      { text: "JavaScript", value: "javascript" },
      { text: "CSS", value: "css" },
      { text: "PHP", value: "php" },
      { text: "Python", value: "python" },
      { text: "Java", value: "java" },
      { text: "C", value: "c" },
      { text: "C++", value: "cpp" },
    ],
    ...featureConfig,
    ...(toolbar && { toolbar }),
    setup: (editor: any) => {
      // ⬅️ Set readOnly di sini
      editor.on("init", () => {
        if (readOnly) {
          editor.mode.set("readonly");
        }
      });
    },
  };

  return (
    <div className={`tinymce-editor-container ${className}`}>
      <Editor
        onInit={handleEditorInit}
        initialValue={initialData}
        onEditorChange={handleEditorChange}
        disabled={disabled}
        apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
        init={editorConfig}
      />

      {/* Status bar */}
      {isEditorLoaded && (
        <div className="text-xs text-gray-500 mt-2 flex items-center justify-between">
          <div className="flex items-center space-x-4">
            <span>
              {autoSave && !readOnly ? "Auto-save enabled" : "Read-only mode"}
            </span>
            {lastSaved && autoSave && !readOnly && (
              <span>• Last saved: {lastSaved.toLocaleTimeString()}</span>
            )}
            <span>• {wordCount} characters</span>
          </div>
          <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
            {features} mode
          </span>
        </div>
      )}

      {/* Performance indicator */}
      <div className="text-xs text-gray-400 mt-1">
        Bundle size:{" "}
        {features === "basic"
          ? "~150KB"
          : features === "standard"
          ? "~200KB"
          : "~300KB"}
      </div>
    </div>
  );
};

export default TinyMCEEditor;