"use client"; import React, { useEffect } from "react"; import { useEditor, EditorContent } from "@tiptap/react"; import StarterKit from "@tiptap/starter-kit"; import Link from "@tiptap/extension-link"; import Image from "@tiptap/extension-image"; import Placeholder from "@tiptap/extension-placeholder"; import { Plugin } from "prosemirror-state"; // ✅ import Plugin from prosemirror-state import { Button, Stack } from "react-bootstrap"; // Extension to clean pasted

 blocks
const CleanPaste = StarterKit.configure({
  codeBlock: false, // turn off built-in code block
  link: false, // 👈 remove default Link
}).extend({
  addProseMirrorPlugins() {
    return [
      new Plugin({
        props: {
          transformPastedHTML(html: string) {
            // Remove  blocks
            return html.replace(
              /]*>]*>[\s\S]*?<\/code><\/pre>/gi,
              ""
            );
          },
        },
      }),
    ];
  },
});

type HtmlEditorProps = {
  value: string;
  onChange: (html: string) => void;
};

export default function HtmlEditor({ value, onChange }: HtmlEditorProps) {
  const editor = useEditor({
    extensions: [
      CleanPaste,
      Link.configure({ openOnClick: false }),
      Image,
      Placeholder.configure({
        placeholder: "Write your content here...",
      }),
    ],
    content: value || "",
    immediatelyRender: false,
    onUpdate: ({ editor }) => {
      onChange(editor.getHTML());
    },
  });

  // Force default paragraph when empty
  useEffect(() => {
    if (editor && !editor.isActive("paragraph")) {
      editor.chain().focus().setParagraph().run();
    }
  }, [editor]);

  // Sync external changes
  useEffect(() => {
    if (editor && value !== editor.getHTML()) {
      editor.commands.setContent(value || "");
    }
  }, [value, editor]);

  if (!editor) return null;

  return (
    
      {/* Sticky toolbar */}
      
        

        

        

        

        
      

      
    
  );
}