Untitled

"use client";
import { useRef } from "react";
import { Editor } from "@tinymce/tinymce-react";

interface WysiwygProps {
  onContentChange: (text: string, cleanedText: string) => void;
  initialValue?: string;
}

const Wysiwyg: React.FC<WysiwygProps> = ({ onContentChange }) => {
  const editorRef = useRef<any>(null);

  const handleEditorInit = (editor: any) => {
    editorRef.current = editor;
  };

  const handleEditorChange = (content: string) => {
    const cleanedText = content
      .replace(/style=".*?"/g, "")
      .replace(/\s*<\s*span\s*>\s*/g, "")
      .replace(/\s*<\s*\/\s*span\s*>\s*/g, "");

    onContentChange(content, cleanedText);
  };

  return (
    <div>
      <Editor
        onInit={handleEditorInit}
        apiKey="rkhc3vrewrubakia2w6rucqx4eg50zme8rnp6ob9nilsv63f" // TinyMCE API key
        init={{
          height: 400,
          menubar: true,
          plugins: [
            "advlist",
            "lists",
            "link",
            "image",
            "charmap",
            "print",
            "preview",
            "anchor",
            "searchplace",
            "visualblocks",
            "code",
            "fullscreen",
            "insertdatetime",
            "media",
            "table",
            "paste",
            "code",
            "help",
            "wordcount",
            "imagetools",
            "codesample",
            "emoticons",
            "hr",
          ],
          toolbar:
            "undo redo | blocks | " +
            "bold italic forecolor backcolor | fontsize | fontfamily | alignleft aligncenter alignright alignjustify | " +
            "bullist numlist outdent indent | removeformat | custom-button custom-menu-item | codesample emoticons | lineheight",
        }}
        onEditorChange={handleEditorChange}
      />
    </div>
  );
};

export default Wysiwyg;