WooNooW/admin-spa/src/components/ui/rich-text-editor.tsx

import React, { useEffect, useState } from 'react';
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import Placeholder from '@tiptap/extension-placeholder';
import Link from '@tiptap/extension-link';
import TextAlign from '@tiptap/extension-text-align';
import Image from '@tiptap/extension-image';
import { ButtonExtension } from './tiptap-button-extension';
import { openWPMediaImage } from '@/lib/wp-media';
import {
  Bold,
  Italic,
  List,
  ListOrdered,
  Link as LinkIcon,
  AlignLeft,
  AlignCenter,
  AlignRight,
  ImageIcon,
  MousePointer,
  Undo,
  Redo,
} from 'lucide-react';
import { Button } from './button';
import { Input } from './input';
import { Label } from './label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from './dialog';
import { __ } from '@/lib/i18n';

interface RichTextEditorProps {
  content: string;
  onChange: (content: string) => void;
  placeholder?: string;
  variables?: string[];
  onVariableInsert?: (variable: string) => void;
}

export function RichTextEditor({
  content,
  onChange,
  placeholder = __('Start typing...'),
  variables = [],
  onVariableInsert,
}: RichTextEditorProps) {
  const editor = useEditor({
    extensions: [
      StarterKit,
      Placeholder.configure({
        placeholder,
      }),
      Link.configure({
        openOnClick: false,
        HTMLAttributes: {
          class: 'text-primary underline',
        },
      }),
      TextAlign.configure({
        types: ['heading', 'paragraph'],
      }),
      Image.configure({
        inline: true,
        HTMLAttributes: {
          class: 'max-w-full h-auto rounded',
        },
      }),
      ButtonExtension,
    ],
    content,
    onUpdate: ({ editor }) => {
      onChange(editor.getHTML());
    },
    editorProps: {
      attributes: {
        class:
          'prose prose-sm max-w-none focus:outline-none min-h-[200px] px-4 py-3',
      },
    },
  });

  // Update editor content when prop changes (fix for default value not showing)
  useEffect(() => {
    if (editor && content) {
      const currentContent = editor.getHTML();
      // Only update if content is different (avoid infinite loops)
      if (content !== currentContent) {
        console.log('RichTextEditor: Updating content', { content, currentContent });
        editor.commands.setContent(content);
      }
    }
  }, [content, editor]);

  if (!editor) {
    return null;
  }

  const insertVariable = (variable: string) => {
    editor.chain().focus().insertContent(`{${variable}}`).run();
    if (onVariableInsert) {
      onVariableInsert(variable);
    }
  };

  const setLink = () => {
    const url = window.prompt(__('Enter URL:'));
    if (url) {
      editor.chain().focus().setLink({ href: url }).run();
    }
  };

  const [buttonDialogOpen, setButtonDialogOpen] = useState(false);
  const [buttonText, setButtonText] = useState('Click Here');
  const [buttonHref, setButtonHref] = useState('{order_url}');
  const [buttonStyle, setButtonStyle] = useState<'solid' | 'outline'>('solid');

  const addImage = () => {
    openWPMediaImage((file) => {
      editor.chain().focus().setImage({ 
        src: file.url,
        alt: file.alt || file.title,
        title: file.title,
      }).run();
    });
  };

  const openButtonDialog = () => {
    setButtonText('Click Here');
    setButtonHref('{order_url}');
    setButtonStyle('solid');
    setButtonDialogOpen(true);
  };

  const insertButton = () => {
    editor.chain().focus().setButton({ text: buttonText, href: buttonHref, style: buttonStyle }).run();
    setButtonDialogOpen(false);
  };

  const getActiveHeading = () => {
    if (editor.isActive('heading', { level: 1 })) return 'h1';
    if (editor.isActive('heading', { level: 2 })) return 'h2';
    if (editor.isActive('heading', { level: 3 })) return 'h3';
    if (editor.isActive('heading', { level: 4 })) return 'h4';
    return 'p';
  };

  const setHeading = (value: string) => {
    if (value === 'p') {
      editor.chain().focus().setParagraph().run();
    } else {
      const level = parseInt(value.replace('h', '')) as 1 | 2 | 3 | 4;
      editor.chain().focus().setHeading({ level }).run();
    }
  };

  return (
    <div className="border rounded-lg overflow-hidden">
      {/* Toolbar */}
      <div className="border-b bg-muted/30 p-2 flex flex-wrap gap-1">
        {/* Heading Selector */}
        <Select value={getActiveHeading()} onValueChange={setHeading}>
          <SelectTrigger className="w-24 h-8 text-xs">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="p">{__('Paragraph')}</SelectItem>
            <SelectItem value="h1">{__('Heading 1')}</SelectItem>
            <SelectItem value="h2">{__('Heading 2')}</SelectItem>
            <SelectItem value="h3">{__('Heading 3')}</SelectItem>
            <SelectItem value="h4">{__('Heading 4')}</SelectItem>
          </SelectContent>
        </Select>
        <div className="w-px h-6 bg-border mx-1" />
        <Button
          type="button"
          variant="ghost"
          size="sm"
          onClick={() => editor.chain().focus().toggleBold().run()}
          className={editor.isActive('bold') ? 'bg-accent' : ''}
        >
          <Bold className="h-4 w-4" />
        </Button>
        <Button
          type="button"
          variant="ghost"
          size="sm"
          onClick={() => editor.chain().focus().toggleItalic().run()}
          className={editor.isActive('italic') ? 'bg-accent' : ''}
        >
          <Italic className="h-4 w-4" />
        </Button>
        <div className="w-px h-6 bg-border mx-1" />
        <Button
          type="button"
          variant="ghost"
          size="sm"
          onClick={() => editor.chain().focus().toggleBulletList().run()}
          className={editor.isActive('bulletList') ? 'bg-accent' : ''}
        >
          <List className="h-4 w-4" />
        </Button>
        <Button
          type="button"
          variant="ghost"
          size="sm"
          onClick={() => editor.chain().focus().toggleOrderedList().run()}
          className={editor.isActive('orderedList') ? 'bg-accent' : ''}
        >
          <ListOrdered className="h-4 w-4" />
        </Button>
        <div className="w-px h-6 bg-border mx-1" />
        <Button
          type="button"
          variant="ghost"
          size="sm"
          onClick={setLink}
          className={editor.isActive('link') ? 'bg-accent' : ''}
        >
          <LinkIcon className="h-4 w-4" />
        </Button>
        <div className="w-px h-6 bg-border mx-1" />
        <Button
          type="button"
          variant="ghost"
          size="sm"
          onClick={() => editor.chain().focus().setTextAlign('left').run()}
          className={editor.isActive({ textAlign: 'left' }) ? 'bg-accent' : ''}
        >
          <AlignLeft className="h-4 w-4" />
        </Button>
        <Button
          type="button"
          variant="ghost"
          size="sm"
          onClick={() => editor.chain().focus().setTextAlign('center').run()}
          className={editor.isActive({ textAlign: 'center' }) ? 'bg-accent' : ''}
        >
          <AlignCenter className="h-4 w-4" />
        </Button>
        <Button
          type="button"
          variant="ghost"
          size="sm"
          onClick={() => editor.chain().focus().setTextAlign('right').run()}
          className={editor.isActive({ textAlign: 'right' }) ? 'bg-accent' : ''}
        >
          <AlignRight className="h-4 w-4" />
        </Button>
        <div className="w-px h-6 bg-border mx-1" />
        <Button
          type="button"
          variant="ghost"
          size="sm"
          onClick={addImage}
        >
          <ImageIcon className="h-4 w-4" />
        </Button>
        <Button
          type="button"
          variant="ghost"
          size="sm"
          onClick={openButtonDialog}
        >
          <MousePointer className="h-4 w-4" />
        </Button>
        <div className="w-px h-6 bg-border mx-1" />
        <Button
          type="button"
          variant="ghost"
          size="sm"
          onClick={() => editor.chain().focus().undo().run()}
          disabled={!editor.can().undo()}
        >
          <Undo className="h-4 w-4" />
        </Button>
        <Button
          type="button"
          variant="ghost"
          size="sm"
          onClick={() => editor.chain().focus().redo().run()}
          disabled={!editor.can().redo()}
        >
          <Redo className="h-4 w-4" />
        </Button>
      </div>

      {/* Editor */}
      <EditorContent editor={editor} />

      {/* Variables */}
      {variables.length > 0 && (
        <div className="border-t bg-muted/30 p-3">
          <div className="text-xs text-muted-foreground mb-2">
            {__('Available Variables:')}
          </div>
          <div className="flex flex-wrap gap-1">
            {variables.map((variable) => (
              <Button
                key={variable}
                type="button"
                variant="outline"
                size="sm"
                onClick={() => insertVariable(variable)}
                className="!font-normal !text-xs !px-2"
              >
                {`{${variable}}`}
              </Button>
            ))}
          </div>
        </div>
      )}

      {/* Button Dialog */}
      <Dialog open={buttonDialogOpen} onOpenChange={setButtonDialogOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>{__('Insert Button')}</DialogTitle>
            <DialogDescription>
              {__('Add a styled button to your content. Use variables for dynamic links.')}
            </DialogDescription>
          </DialogHeader>
          
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="btn-text">{__('Button Text')}</Label>
              <Input
                id="btn-text"
                value={buttonText}
                onChange={(e) => setButtonText(e.target.value)}
                placeholder={__('e.g., View Order')}
              />
            </div>
            
            <div className="space-y-2">
              <Label htmlFor="btn-href">{__('Button Link')}</Label>
              <Input
                id="btn-href"
                value={buttonHref}
                onChange={(e) => setButtonHref(e.target.value)}
                placeholder="{order_url}"
              />
              {variables.length > 0 && (
                <div className="flex flex-wrap gap-1 mt-2">
                  {variables.map((variable) => (
                    <code
                      key={variable}
                      className="text-xs bg-muted px-2 py-1 rounded cursor-pointer hover:bg-muted/80"
                      onClick={() => setButtonHref(buttonHref + `{${variable}}`)}
                    >
                      {`{${variable}}`}
                    </code>
                  ))}
                </div>
              )}
            </div>
            
            <div className="space-y-2">
              <Label htmlFor="btn-style">{__('Button Style')}</Label>
              <Select value={buttonStyle} onValueChange={(value: 'solid' | 'outline') => setButtonStyle(value)}>
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="solid">{__('Solid (Primary)')}</SelectItem>
                  <SelectItem value="outline">{__('Outline (Secondary)')}</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
          
          <DialogFooter>
            <Button variant="outline" onClick={() => setButtonDialogOpen(false)}>
              {__('Cancel')}
            </Button>
            <Button onClick={insertButton}>
              {__('Insert Button')}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}