@remit/web-client 0.0.311 → 0.0.313

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.311",
+  "version": "0.0.313",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/compose/ComposeForm.tsx

@@ -30,8 +30,8 @@ import {
 	sanitizeQuotedHtml,
 	unwrapLanguage,
 } from "@remit/ui";
-import type { ComposeBodyMode } from "@remit/ui/rich-text";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import type { ComposeBodyMode, ComposeInsertion } from "@remit/ui/rich-text";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import type { RefObject } from "react";
 import {
 	lazy,
@@ -46,10 +46,12 @@ import {
 	type DraftForAttachment,
 	useComposeAttachments,
 } from "../../hooks/useComposeAttachments";
+import { useInlineImages } from "../../hooks/useInlineImages";
 import { useMessageBodyContent } from "../../hooks/useMessageBodyContent";
 import { useSaveDraft } from "../../hooks/useSaveDraft";
 import { useSignature } from "../../hooks/useSignature.js";
 import { isNotFound, softErrorMeta } from "../../lib/error-classifier";
+import type { ComposeSeed } from "../../lib/mail-search";
 import { accountIsMissingSmtp } from "../settings/account-form-helpers.js";
 import { useErrorBanners } from "../ui/ErrorBannerProvider.js";
 import {
@@ -94,6 +96,8 @@ interface ComposeFormProps {
 	 * shared would open on the last draft any other composer touched.
 	 */
 	outboxMessageId?: string;
+	seed?: ComposeSeed;
+	insertion?: ComposeInsertion;
 	/** The draft the first autosave created, for the owner to record. */
 	onDraftCreated: (outboxMessageId: string) => void;
 	onClose: () => void;
@@ -118,10 +122,19 @@ const buildInitialHtml = (signaturePlainText: string): string => {
  */
 const freshDocument = (
 	signaturePlainText: string,
-): { html: string; text: string } => ({
-	html: buildInitialHtml(signaturePlainText),
-	text: signaturePlainText,
-});
+	seed?: ComposeSeed,
+): { html: string; text: string } => {
+	if (!seed) {
+		return {
+			html: buildInitialHtml(signaturePlainText),
+			text: signaturePlainText,
+		};
+	}
+	return {
+		html: `${textToHtml(seed.body)}${buildInitialHtml(signaturePlainText)}`,
+		text: [seed.body, signaturePlainText].filter(Boolean).join("\n\n"),
+	};
+};
 
 const buildReplySubject = (subject?: string): string => {
 	if (!subject) return "Re: ";
@@ -396,6 +409,8 @@ export const ComposeForm = ({
 	account,
 	sourceMessage,
 	outboxMessageId,
+	seed,
+	insertion,
 	onDraftCreated,
 	onClose,
 	onAccountChange,
@@ -448,9 +463,7 @@ export const ComposeForm = ({
 	 * failure to `draft` (#933), so opening a Failed message and pressing Escape
 	 * would take it out of the Outbox with the reader having changed nothing. The
 	 * first run after a load records what was loaded; only a payload that differs
-	 * from it is an edit. Nothing updates it afterwards — once the reader has
-	 * touched the document, every later run saves as it always did, retries of a
-	 * failed write included.
+	 * from it is an edit.
 	 */
 	const loadedPayloadRef = useRef<string | undefined>(undefined);
 	const captureLoadedPayloadRef = useRef(false);
@@ -546,7 +559,7 @@ export const ComposeForm = ({
 		// the signature, the same document a fresh mount would have started on.
 		const opening = outboxMessageId
 			? { html: "", text: "" }
-			: freshDocument(signatureRef.current);
+			: freshDocument(signatureRef.current, seedRef.current);
 		setToAddresses([]);
 		setCcAddresses([]);
 		setBccAddresses([]);
@@ -571,15 +584,19 @@ export const ComposeForm = ({
 	// not a reason to reopen the document somebody is typing in.
 	const signatureRef = useRef(signature.plainText);
 	signatureRef.current = signature.plainText;
+	const seedRef = useRef(seed);
+	seedRef.current = seed;
 	// The editor reads its document once, so this is the document it opens on,
 	// not the live value, and it is remounted when the generation changes. Only
 	// loading a different document bumps that — remounting mid-compose would take
 	// the caret, the focus and the undo history with it.
 	const [documentGeneration, setDocumentGeneration] = useState(0);
 	const [initialHtml, setInitialHtml] = useState(
-		() => freshDocument(signature.plainText).html,
+		() => freshDocument(signature.plainText, seed).html,
+	);
+	const [initialText, setInitialText] = useState(
+		() => freshDocument(signature.plainText, seed).text,
 	);
-	const [initialText, setInitialText] = useState(signature.plainText);
 	const [bodyMode, setBodyMode] = useState<ComposeBodyMode>("rich");
 	// What the body is tagged with on the way out. The composer owns the value —
 	// it is the surface that has the text detection reads — and reports it here,
@@ -587,9 +604,18 @@ export const ComposeForm = ({
 	const [composeLanguage, setComposeLanguage] = useState("en");
 	const [draftLanguage, setDraftLanguage] = useState<string | undefined>();
 	const [body, setBody] = useState<RichTextValue>(() => ({
-		...freshDocument(signature.plainText),
+		...freshDocument(signature.plainText, seed),
 		formatting: [],
 	}));
+	const [insertedVersion, setInsertedVersion] = useState(
+		() => insertion?.version ?? 0,
+	);
+	const pendingInsertion =
+		insertion &&
+		insertion.version > insertedVersion &&
+		(outboxMessageId === undefined || draftLoaded)
+			? insertion
+			: undefined;
 
 	const { data: draftData, error: draftError } = useQuery({
 		...outboxDetailOperationsGetOutboxMessageOptions({
@@ -850,11 +876,41 @@ export const ComposeForm = ({
 		remove: removeAttachment,
 		load: loadAttachments,
 		reset: resetAttachments,
+		owns: ownsAttachment,
+		isLoaded: attachmentsLoaded,
+		refreshLinks: refreshAttachmentLinks,
+		storedContent,
+		onRemoved: onAttachmentRemoved,
 		blockingReason: attachmentBlockingReason,
 	} = useComposeAttachments({
 		ensureDraft: ensureDraftForAttachment,
 	});
 
+	const queryClient = useQueryClient();
+	const inlineImages = useInlineImages({
+		attach,
+		owns: ownsAttachment,
+		isLoaded: attachmentsLoaded,
+		storedContent,
+		refreshLinks: () => {
+			if (!outboxMessageId) return Promise.resolve();
+			return queryClient
+				.fetchQuery({
+					...outboxDetailOperationsGetOutboxMessageOptions({
+						path: { outboxMessageId },
+					}),
+					staleTime: 0,
+				})
+				.then((draft) => refreshAttachmentLinks(draft.attachments));
+		},
+		onRemoved: onAttachmentRemoved,
+		draftAttachments:
+			draftData && draftData.outboxMessageId === outboxMessageId
+				? draftData.attachments
+				: [],
+		pushError,
+	});
+
 	const attachmentDocumentRef = useRef(outboxMessageId);
 	useEffect(() => {
 		const previous = attachmentDocumentRef.current;
@@ -1059,6 +1115,7 @@ export const ComposeForm = ({
 			return;
 		}
 		if (loadedPayloadRef.current === fingerprint) return;
+		loadedPayloadRef.current = undefined;
 
 		saveDraft(payload);
 	}, [
@@ -1256,6 +1313,9 @@ export const ComposeForm = ({
 	return (
 		<ComposeFormShell
 			layout={layout}
+			onDropFiles={(files) => {
+				void attach(files);
+			}}
 			banner={
 				<>
 					{selectedAccount && selectedAccountMissingSmtp ? (
@@ -1352,6 +1412,9 @@ export const ComposeForm = ({
 					initialLanguage={draftLanguage}
 					onLanguageChange={setComposeLanguage}
 					spellcheck={spellcheck}
+					insertion={pendingInsertion}
+					onInserted={setInsertedVersion}
+					inlineImages={inlineImages}
 				/>
 			</Suspense>
 		</ComposeFormShell>

package/src/components/compose/ComposeProvider.tsx

@@ -9,6 +9,7 @@ import {
 	useContext,
 	useEffect,
 	useMemo,
+	useRef,
 	useState,
 } from "react";
 import { isNotFound, softErrorStatuses } from "@/lib/error-classifier";
@@ -30,8 +31,15 @@ export type ComposeMode = ReplyMode | "new";
  * the address's answers — `useComposeDraftId` and `useIsComposing`. A second
  * copy here is what let a reply's draft turn up in the next new message.
  */
+type InsertIntoReply = (text: string) => void;
+
 interface ComposeContextValue {
 	startSendPolling: (outboxMessageId: string) => void;
+	insertIntoOpenReply: (sourceMessageId: string, text: string) => boolean;
+	registerOpenReply: (
+		sourceMessageId: string,
+		insert: InsertIntoReply,
+	) => () => void;
 }
 
 const ComposeContext = createContext<ComposeContextValue | undefined>(
@@ -124,7 +132,33 @@ export const ComposeProvider = ({
 		setPollingMessageId(outboxMessageId);
 	}, []);
 
-	const value = useMemo(() => ({ startSendPolling }), [startSendPolling]);
+	const openReplies = useRef(new Map<string, InsertIntoReply>());
+
+	const insertIntoOpenReply = useCallback(
+		(sourceMessageId: string, text: string): boolean => {
+			const insert = openReplies.current.get(sourceMessageId);
+			if (!insert) return false;
+			insert(text);
+			return true;
+		},
+		[],
+	);
+
+	const registerOpenReply = useCallback(
+		(sourceMessageId: string, insert: InsertIntoReply) => {
+			openReplies.current.set(sourceMessageId, insert);
+			return () => {
+				if (openReplies.current.get(sourceMessageId) === insert)
+					openReplies.current.delete(sourceMessageId);
+			};
+		},
+		[],
+	);
+
+	const value = useMemo(
+		() => ({ startSendPolling, insertIntoOpenReply, registerOpenReply }),
+		[startSendPolling, insertIntoOpenReply, registerOpenReply],
+	);
 
 	return (
 		<ComposeContext.Provider value={value}>{children}</ComposeContext.Provider>

package/src/components/compose/ConversationCompose.tsx

@@ -2,7 +2,9 @@ import {
 	configOperationsGetConfigOptions,
 	messageOperationsDescribeMessageOptions,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { ComposeInsertion } from "@remit/ui/rich-text";
 import { useQuery } from "@tanstack/react-query";
+import { useCallback, useEffect, useState } from "react";
 import { useMailboxAccount } from "@/hooks/useMailboxAccount";
 import {
 	type ReplyAddress,
@@ -10,6 +12,7 @@ import {
 	useCloseReply,
 } from "@/routing";
 import { ComposeForm } from "./ComposeForm";
+import { useCompose } from "./ComposeProvider";
 
 /**
  * The answer to a message, as the top block of the conversation it answers.
@@ -27,6 +30,19 @@ import { ComposeForm } from "./ComposeForm";
 export const ConversationCompose = ({ surface }: { surface: ReplyAddress }) => {
 	const adoptCreatedDraft = useAdoptReplyDraft();
 	const closeReply = useCloseReply();
+	const { registerOpenReply } = useCompose();
+	const [insertion, setInsertion] = useState<ComposeInsertion>();
+	const insert = useCallback(
+		(text: string) =>
+			setInsertion((prev) => ({ version: (prev?.version ?? 0) + 1, text })),
+		[],
+	);
+	const answering = surface.sourceMessageId;
+
+	useEffect(
+		() => registerOpenReply(answering, insert),
+		[answering, insert, registerOpenReply],
+	);
 
 	const { data: sourceMessage } = useQuery({
 		...messageOperationsDescribeMessageOptions({
@@ -56,11 +72,14 @@ export const ConversationCompose = ({ surface }: { surface: ReplyAddress }) => {
 			    the address, and remounting the form on that would take the caret out
 			    of the sentence being typed. */}
 			<ComposeForm
+				key={surface.sourceMessageId}
 				layout="flow"
 				mode={surface.mode}
 				account={account}
 				sourceMessage={sourceMessage}
 				outboxMessageId={surface.outboxMessageId}
+				seed={surface.seed}
+				insertion={insertion}
 				onDraftCreated={adoptCreatedDraft}
 				onClose={closeReply}
 			/>