PrivyDrop/frontend/components/Editor/RichTextEditor.tsx

import React, { useState, useRef, useCallback, useEffect } from 'react';
import { EditorProps, CustomClipboardEvent, DOMNodeWithStyle } from './types';
import { fontFamilies, fontSizes, colors } from './constants';
import { useEditorCommands } from './hooks/useEditorCommands';
import { useSelection } from './hooks/useSelection';
import { useStyleManagement } from './hooks/useStyleManagement';
import { BasicFormatTools } from './EditorToolbar/BasicFormatTools';
import { FontTools } from './EditorToolbar/FontTools';
import { AlignmentTools } from './EditorToolbar/AlignmentTools';
import { InsertTools } from './EditorToolbar/InsertTools';
import { Divider } from './Divider';

const RichTextEditor: React.FC<EditorProps> = ({ onChange, value = '' }) => {
  const editorRef = useRef<HTMLDivElement>(null);
  const [html, setHtml] = useState(value);
  const [isMounted, setIsMounted] = useState(false);
  const isInternalChange = useRef(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);
  // Update editor content after mounting, listen for external value changes
  useEffect(() => {
    if (isMounted && editorRef.current && !isInternalChange.current) {
      // Only update when the content is truly different
      if (editorRef.current.innerHTML !== value) {
        editorRef.current.innerHTML = value;
        setHtml(value);
      }
    }
    isInternalChange.current = false;
  }, [value, isMounted]);

  // Handle content change
  const handleChange = useCallback(() => {
    if (editorRef.current) {
      const content = (editorRef.current as HTMLDivElement).innerHTML;
      if (content !== html) {// If the content has not changed, do not trigger an update
        isInternalChange.current = true;
        setHtml(content);
        onChange(content);
      }
    }
  }, [html, onChange]);

  const {
    formatText,
    alignText,
    setFontStyle,
    insertLink,
    insertImage,
    insertCodeBlock
  } = useEditorCommands(editorRef, handleChange);

  const getSelection = useSelection();
  const { findStyleParent } = useStyleManagement(editorRef);
  // Check the style of the currently selected text
  const isStyleActive = useCallback((style: string): boolean => {
    if (typeof window === 'undefined') return false;
    const selectionInfo = getSelection();
    if (!selectionInfo || !selectionInfo.selection.toString()) return false;

    const node = selectionInfo.selection.anchorNode;
    if (!node) return false;
    
    const styleParent = findStyleParent(node as DOMNodeWithStyle, style);
    return !!styleParent;
  }, [findStyleParent, getSelection]);

  const handlePaste = useCallback((e: CustomClipboardEvent) => {
    // Handle image pasting
    if (Array.from(e.clipboardData.items).some(item => item.type.indexOf('image') !== -1)) {
      const items = Array.from(e.clipboardData.items);
      const imageItem = items.find(item => item.type.indexOf('image') !== -1);
      
      if (imageItem) {
        e.preventDefault();
        const blob = imageItem.getAsFile();
        if (!blob) return;
        
        const reader = new FileReader();
        reader.onload = (event: ProgressEvent<FileReader>) => {
          if (!event.target || !event.target.result) return;
          const img = document.createElement('img');
          img.src = event.target.result as string;
          img.style.maxWidth = '100%';
          img.style.height = 'auto';
          img.style.margin = '10px 0';
          
          const selectionInfo = getSelection();
          if (!selectionInfo) return;
          
          const { range } = selectionInfo;
          range.deleteContents();
          range.insertNode(img);
          handleChange();
        };
        reader.readAsDataURL(blob);
      }
      return;
    }
    
    // Handle plain text
    e.preventDefault();
    const text = e.clipboardData.getData('text/plain');
    if (typeof document !== 'undefined') {
      document.execCommand('insertText', false, text);
    }
  }, [getSelection, handleChange]);

  if (!isMounted) {
    return <div>Loading...</div>;
  }

  return (
    <div className="w-full space-x-2 mb-4">
      <div className="border rounded-lg shadow-sm overflow-hidden">
        {/* Toolbar - Add light gray background and bottom border */}
        <div className="flex flex-wrap gap-1 p-2 bg-gray-50 border-b">
          {/* Basic format tool group */}
          <BasicFormatTools 
            isStyleActive={isStyleActive} 
            formatText={formatText} 
          />
          <Divider />
          
          {/* Font-related selector group */}
          <FontTools 
            fontFamilies={fontFamilies}
            fontSizes={fontSizes}
            colors={colors}
            setFontStyle={setFontStyle}
          />
          <Divider />
          
          {/* Alignment tool group */}
          <AlignmentTools alignText={alignText} />
          <Divider />
      
          {/* Insert tool group */}
          <InsertTools 
            insertLink={insertLink}
            insertImage={insertImage}
            insertCodeBlock={insertCodeBlock}
          />
        </div>

      {/* Editor area - Add pure white background and inner shadow effect */}
        <div
          ref={editorRef}
          className="p-4 min-h-[200px] md:min-h-[400px] focus:outline-none bg-white shadow-inner"
          contentEditable
          onPaste={handlePaste}
          onInput={handleChange}
          suppressContentEditableWarning
        />
      </div>
    </div>
  );
};

export default RichTextEditor;