feat: add report content update endpoint and integrate Platejs editor for markdown editing

surfsense_web/components/ui/toggle-node.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import * as React from 'react';
+
+import { useToggleButton, useToggleButtonState } from '@platejs/toggle/react';
+import { ChevronRightIcon } from 'lucide-react';
+import { type PlateElementProps, PlateElement } from 'platejs/react';
+
+import { cn } from '@/lib/utils';
+
+export function ToggleElement({
+  children,
+  ...props
+}: PlateElementProps) {
+  const element = props.element;
+  const state = useToggleButtonState(element.id as string);
+  const { buttonProps, open } = useToggleButton(state);
+
+  return (
+    <PlateElement {...props} className="relative py-1 pl-6">
+      <button
+        className={cn(
+          'absolute top-1.5 left-0 flex size-6 cursor-pointer select-none items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground',
+        )}
+        contentEditable={false}
+        type="button"
+        {...buttonProps}
+      >
+        <ChevronRightIcon
+          className={cn(
+            'size-4 transition-transform duration-200',
+            open && 'rotate-90'
+          )}
+        />
+      </button>
+      <div>{children}</div>
+    </PlateElement>
+  );
+}