feat: extract text editor and allow editing (#150)

js/src/features/particles/text-edit-overlay.tsx

@@ -0,0 +1,65 @@
+import { useCallback, useState } from "react";
+import { createPortal } from "react-dom";
+import { toast } from "sonner";
+import type { Particle } from "@/api/types";
+import {
+  particlePath,
+  parseParticlePath,
+  toFirestoreDocPath,
+  type ParticlePath,
+} from "@/lib/particle-path";
+import { editTextParticleContent } from "@/lib/firestore-particles";
+import { TextEditor } from "@/features/compose/text-editor";
+
+type TextParticle = Extract<Particle, { type: "text" }>;
+
+interface TextEditOverlayProps {
+  particle: TextParticle;
+  streamPath: ParticlePath;
+  onClose: () => void;
+}
+
+export function TextEditOverlay({
+  particle,
+  streamPath,
+  onClose,
+}: TextEditOverlayProps) {
+  const [textContent, setTextContent] = useState(particle.properties.content);
+  const [saving, setSaving] = useState(false);
+
+  const handleSubmit = useCallback(async () => {
+    if (saving) return;
+    const trimmed = textContent.trim();
+    if (!trimmed) return;
+    if (trimmed === particle.properties.content) {
+      onClose();
+      return;
+    }
+
+    setSaving(true);
+    try {
+      const { networkId, segments } = parseParticlePath(streamPath);
+      const docPath = toFirestoreDocPath(
+        particlePath(networkId, [...segments, particle.id]),
+      );
+      await editTextParticleContent(docPath, trimmed);
+      onClose();
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Failed to save");
+      setSaving(false);
+    }
+  }, [saving, textContent, particle.properties.content, particle.id, streamPath, onClose]);
+
+  return createPortal(
+    <div className="fixed inset-0 z-[100]">
+      <TextEditor
+        textContent={textContent}
+        onTextChange={setTextContent}
+        onSubmit={handleSubmit}
+        onCancel={onClose}
+        submitHint="save"
+      />
+    </div>,
+    document.body,
+  );
+}