introduced blocknote editor

surfsense_web/components/BlockNoteEditor.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import "@blocknote/core/fonts/inter.css";
+import "@blocknote/mantine/style.css";
+import { useCreateBlockNote } from "@blocknote/react";
+import { BlockNoteView } from "@blocknote/mantine";
+
+interface BlockNoteEditorProps {
+  initialContent?: any;
+  onChange?: (content: any) => void;
+}
+
+export default function BlockNoteEditor({
+  initialContent,
+  onChange,
+}: BlockNoteEditorProps) {
+  // Track the initial content to prevent re-initialization
+  const initialContentRef = useRef<any>(null);
+  const isInitializedRef = useRef(false);
+  
+  // Creates a new editor instance - only use initialContent on first render
+  const editor = useCreateBlockNote({
+    initialContent: initialContentRef.current === null ? (initialContent || undefined) : undefined,
+  });
+  
+  // Store initial content on first render only
+  useEffect(() => {
+    if (initialContent && initialContentRef.current === null) {
+      initialContentRef.current = initialContent;
+      isInitializedRef.current = true;
+    }
+  }, [initialContent]);
+
+  // Call onChange when document changes (but don't update from props)
+  useEffect(() => {
+    if (!onChange || !editor || !isInitializedRef.current) return;
+    
+    const handleChange = () => {
+      onChange(editor.document);
+    };
+    
+    // Subscribe to document changes
+    const unsubscribe = editor.onChange(handleChange);
+    
+    return () => {
+      unsubscribe();
+    };
+  }, [editor, onChange]);
+
+  // Renders the editor instance
+  return <BlockNoteView editor={editor} />;
+}