76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
import { useCallback, useEffect, 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";
|
|
import { usePlaybackSuspenderStore } from "@/stores/playback-suspender-store";
|
|
|
|
type TextParticle = Extract<Particle, { type: "text" }>;
|
|
|
|
interface TextEditOverlayProps {
|
|
particle: TextParticle;
|
|
streamPath: ParticlePath;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function TextEditOverlay({
|
|
particle,
|
|
streamPath,
|
|
onClose,
|
|
}: TextEditOverlayProps) {
|
|
useEffect(() => {
|
|
const { suspend, release } = usePlaybackSuspenderStore.getState();
|
|
suspend();
|
|
return release;
|
|
}, []);
|
|
|
|
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(
|
|
// React synthetic events bubble through the React tree (not the DOM tree),
|
|
// so clicks here would reach stream-view's click-to-navigate handler even
|
|
// though we're portaled to document.body. Stop propagation at the root.
|
|
<div className="fixed inset-0 z-[100]" onClick={(e) => e.stopPropagation()}>
|
|
<TextEditor
|
|
textContent={textContent}
|
|
onTextChange={setTextContent}
|
|
onSubmit={handleSubmit}
|
|
onCancel={onClose}
|
|
submitHint="save"
|
|
/>
|
|
</div>,
|
|
document.body,
|
|
);
|
|
}
|