+
+ {(id) => (
+
+
+
+
+
- {props.children}
-
- );
-}
-
-type UndoReplySnapshot = {
- threadId: string;
- draftId: string;
- bodyHtml: string;
- attachments: DraftFormAttachment[];
- includeSignature: boolean;
- /** Whether the quoted thread was appended in the editor at send time.
- * Restored so the quoted-text toggle matches the restored body — otherwise
- * it reads as "not appended" and appends a duplicate quote block. */
- replyAppended: boolean;
- /** Draft payload for restoring the server-side draft on undo. The
- * unscheduled message keeps the sent body (appended reply chain, injected
- * signature), so undo re-saves the draft with the pre-send content —
- * bodyHtml above, prepared at undo time, fills body_html. */
- draftRestore: ApiDraftInput;
-};
-// Set on send, persists across navigation, only consumed by undoSend.
-let undoSendSnapshot: UndoReplySnapshot | null = null;
-// Only set by undoSend for inline reply remount, consumed on mount.
-let undoReplySnapshot: UndoReplySnapshot | null = null;
-// Registered by the current BaseInput instance so stale undoSend closures
-// from a previous mount can restore state into the live component.
-let restoreUndoCallback:
- | ((snapshot: UndoReplySnapshot, draftId: string) => void)
- | null = null;
-
-type CreateConfiguredEmailMarkdownEditorOptions = {
- namespace: string;
- onChange?: (markdown: string) => void;
- onUserMention?: (mention: UserMentionRecord) => void;
- onDocumentMention?: (item: { id: string }) => void;
- onPasteFilesAndDirs?: (
- files: FileSystemFileEntry[],
- directories: FileSystemDirectoryEntry[]
- ) => void;
- scrollContainer?: Accessor
-
- {(attachment) => (
-
-
- {(attachment) => (
- handleRemoveAttachment(attachment())}
- />
- )}
-
-
- {(attachment) => (
- handleRemoveAttachment(attachment())}
- />
- )}
-
-
- {(attachment) => (
- handleRemoveAttachment(attachment())}
- />
- )}
-
-
- )}
-
-
-
-
-
-
-
-
- sendEmail()}
- />
-
-
-
-
-
- }
- >
-
-
-
- openOnFocus={false}
- class="min-w-0 bg-transparent rounded-none! [&_input]:ml-0!"
- inputRef={setToRef}
- options={ctx.recipientOptions}
- selfEmail={activeInboxEmail()}
- selectedOptions={form().recipients().to}
- setSelectedOptions={withDraftSave((v) =>
- form().setRecipients('to', v)
- )}
- triggerMode="input"
- hideBorder
- noPadding
- onChipDragStart={(option, e) =>
- handleChipDragStart('to', option, e)
- }
- onChipDragEnd={handleChipDragEnd}
- hideMenuOnEscape
- />
-
- {/* Expanded CC */}
- 0}>
-
-
- openOnFocus={false}
- class="min-w-0 bg-transparent rounded-none! [&_input]:ml-0!"
- inputRef={setCcRef}
- options={ctx.recipientOptions}
- selfEmail={activeInboxEmail()}
- selectedOptions={form().recipients().cc}
- setSelectedOptions={withDraftSave((v) =>
- form().setRecipients('cc', v)
- )}
- triggerMode="input"
- hideBorder
- noPadding
- onChipDragStart={(option, e) =>
- handleChipDragStart('cc', option, e)
- }
- onChipDragEnd={handleChipDragEnd}
- hideMenuOnEscape
- />
-
-
- {/* Expanded BCC */}
- 0}>
-
-
- openOnFocus={false}
- class="min-w-0 bg-transparent rounded-none! [&_input]:ml-0!"
- inputRef={setBccRef}
- options={ctx.recipientOptions}
- selfEmail={activeInboxEmail()}
- selectedOptions={form().recipients().bcc}
- setSelectedOptions={withDraftSave((v) =>
- form().setRecipients('bcc', v)
- )}
- triggerMode="input"
- hideBorder
- noPadding
- onChipDragStart={(option, e) =>
- handleChipDragStart('bcc', option, e)
- }
- onChipDragEnd={handleChipDragEnd}
- hideMenuOnEscape
- />
-
-
-
-
-
-
-
-
-
- From
-
-
-
-
-
-
-
-
-
-
- To
-
-
- Cc
-
-
- Bcc
-
-
-
-
- }
- >
- Subject
- {
- form().setSubject(e.currentTarget.value);
- scheduleDraftSave();
- }}
- onKeyDown={(e) => {
- if (e.key !== 'Escape') return;
- e.preventDefault();
- e.currentTarget.blur();
- }}
- placeholder="Subject"
- />
-
-
-
- openOnFocus={false}
- class={mobileRecipientSelectorClass}
- inputRef={setToRef}
- options={ctx.recipientOptions}
- selfEmail={activeInboxEmail()}
- selectedOptions={form().recipients().to}
- setSelectedOptions={withDraftSave((v) =>
- form().setRecipients('to', v)
- )}
- triggerMode="input"
- portalScope={composePortalScope()}
- hideBorder
- noPadding
- onChipDragStart={(option, e) =>
- handleChipDragStart('to', option, e)
- }
- onChipDragEnd={handleChipDragEnd}
- hideMenuOnEscape
- />
-
-
-
- 0}>
-
-
- openOnFocus={false}
- class={mobileRecipientSelectorClass}
- inputRef={setCcRef}
- options={ctx.recipientOptions}
- selfEmail={activeInboxEmail()}
- selectedOptions={form().recipients().cc}
- setSelectedOptions={withDraftSave((v) =>
- form().setRecipients('cc', v)
- )}
- triggerMode="input"
- portalScope={composePortalScope()}
- hideBorder
- noPadding
- onChipDragStart={(option, e) =>
- handleChipDragStart('cc', option, e)
- }
- onChipDragEnd={handleChipDragEnd}
- hideMenuOnEscape
- />
-
-
-
- 0}>
-
-
- openOnFocus={false}
- class={mobileRecipientSelectorClass}
- inputRef={setBccRef}
- options={ctx.recipientOptions}
- selfEmail={activeInboxEmail()}
- selectedOptions={form().recipients().bcc}
- setSelectedOptions={withDraftSave((v) =>
- form().setRecipients('bcc', v)
- )}
- triggerMode="input"
- portalScope={composePortalScope()}
- hideBorder
- noPadding
- onChipDragStart={(option, e) =>
- handleChipDragStart('bcc', option, e)
- }
- onChipDragEnd={handleChipDragEnd}
- hideMenuOnEscape
- />
-
-
-
-
-
- To:
- Cc:
- Bcc:
-
- From:
-
-
-
- {
- form().setSubject(e.currentTarget.value);
- scheduleDraftSave();
- }}
- onKeyDown={(e) => {
- if (e.key !== 'Escape') return;
- e.preventDefault();
- e.currentTarget.blur();
- }}
- placeholder="Subject:"
- />
-
-
-
-
-
-
-
- {/* Below the scroll area so quoted email content can never overlap it */}
-
- {(html) => (
- {
- // Dismissal is composer-local state worth keeping — latch
- // the seed so a draft upgrade can't remount it away.
- props.onEngaged?.();
- setIncludeSignature(false);
- }}
- />
- )}
-
- {/* No fixed height: the send button (size-7.5) is taller than the icon
- buttons, and a fixed h-9 minus the vertical padding left it 4px short
- — with items-end it bled upward over the signature bar above. */}
-
-
- {
- if (composerExpanded() || e.currentTarget.scrollTop <= 0) return;
- setComposerExpanded(true);
- // Keep the send bar pinned while the box grows
- requestAnimationFrame(() => {
- bottomBarRef?.scrollIntoView({ block: 'nearest' });
- });
- }}
- onclick={() => {
- editor()?.focus();
- }}
- use:fileFolderDrop={{
- onDragStart: (valid) => setIsDragging(valid),
- onDragEnd: () => setIsDragging(false),
- onDrop: (fileEntries, folderEntries, e) => {
- const editor_ = editor();
- if (!editor_ || !e) return;
- handleFileFolderDrop(
- fileEntries,
- folderEntries,
- createFilesReadyHandler(
- editor_,
- blockId,
- 'email',
- () => getDragDropPosition(editor_, e, true),
- (uploadedItemIds) => {
- setIsDragging(false);
- uploadedItemIds.forEach((itemId) => {
- makeAttachmentPublic(itemId);
- });
- scheduleDraftSave();
- },
- { width: 542, height: 542 }
- )
- );
- },
- }}
- >
- props.markdownDomRef?.(el)}
- onConnect={handleEditorConnect}
- />
-
-
-
-
-
- {(html) => (
- {
- // Dismissal is composer-local state worth keeping — latch
- // the seed so a draft upgrade can't remount it away.
- props.onEngaged?.();
- setIncludeSignature(false);
- }}
- />
- )}
-
-
- {/* Quoted-text controls live below the scroll area so they stay
- anchored to the composer bottom instead of scrolling with (and
- floating over) tall content. */}
-
- Drop file(s) to attach
-
-
-
-
-
-
- e.stopPropagation()}
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- sendEmail()}
- />
-
-
-
- )}
-
-
-
-
- {(lastMessage) => (
-
-
- {
- markdownDomRef = el;
- }}
- />
-
-
-
-
- {(threadId) => (
-
-
-
-
-
- {
- markdownDomRef = el;
- }}
- title={props.title}
- underScrollsBottom={!replyInputInFlow()}
- showMiddleMessages={showMiddleMessages()}
- hiddenChipFocused={context.messages.hiddenChipFocused()}
- allowRowHover={!keyboardSelecting()}
- onHiddenChipFocus={() => {
- armKeyboardPointer();
- context.messages.setFocused(undefined);
- context.messages.setHiddenChipFocused(true);
- }}
- onOpenMiddle={() => {
- leaveHiddenChip();
- setUserOpenedMiddle(true);
- }}
- />
-
- {
- if (!props.isBodyExpanded() && props.message.db_id) {
- props.setExpandedMessageBody(props.message.db_id);
- props.setFocusedMessageId(props.message.db_id);
- } else if (props.message.db_id) {
- props.setFocusedMessageId(props.message.db_id);
- }
- }}
- >
-
- );
-}
diff --git a/apps/web/src/features/block-email/component/EmailTaskButton.tsx b/apps/web/src/features/block-email/component/EmailTaskButton.tsx
new file mode 100644
index 00000000000..6c2fbe4cf13
--- /dev/null
+++ b/apps/web/src/features/block-email/component/EmailTaskButton.tsx
@@ -0,0 +1,22 @@
+import { AnimatedTaskIcon } from '@icon/wide-task';
+import { Button } from '@ui';
+import { createSignal } from 'solid-js';
+export function EmailTaskButton(props: { onClick: () => void }) {
+ const [hovering, setHovering] = createSignal(false);
+
+ return (
+
+ );
+}
diff --git a/apps/web/src/features/block-email/component/MessageContainer.tsx b/apps/web/src/features/block-email/component/MessageContainer.tsx
deleted file mode 100644
index acaa07738e9..00000000000
--- a/apps/web/src/features/block-email/component/MessageContainer.tsx
+++ /dev/null
@@ -1,368 +0,0 @@
-import { EmailAttachmentPill } from '@block-email/component/AttachmentPill';
-import { CollapsedMessage } from '@block-email/component/CollapsedMessage';
-import { useEmailContext } from '@block-email/component/EmailContext';
-import { EmailInput } from '@block-email/component/EmailInput';
-import { EmailMessageBody } from '@block-email/component/EmailMessageBody';
-import { EmailMessageTopBar } from '@block-email/component/EmailMessageTopBar';
-import { MessageCard } from '@block-email/component/MessageCard';
-import { getSenderMacroId } from '@block-email/util/emailUser';
-import { revealMessageAfterLayout } from '@block-email/util/scrollToMessage';
-import { useSplitLayout } from '@components/app/split-layout/layout';
-import { FloatingInputLoader } from '@core/component/FloatingInputLoader';
-import { ImageGalleryPreview } from '@core/component/ImageGalleryPreview';
-import { toast } from '@core/component/Toast/Toast';
-import { UserIcon, type UserIconProps } from '@core/component/UserIcon';
-import { VideoPreview } from '@core/component/VideoPreview';
-import { fileTypeToBlockName } from '@core/constant/allBlocks';
-import { isTouchDevice } from '@core/mobile/isTouchDevice';
-import { Telemetry } from '@macro-inc/observability';
-import { refetchSoupEntity } from '@queries/soup/cache';
-import { emailClient } from '@service-email/client';
-import type { ApiMessage, Attachment } from '@service-email/generated/schemas';
-import { storageServiceClient } from '@service-storage/client';
-import type { FileType } from '@service-storage/generated/schemas/fileType';
-import { createMemo, createSignal, For, Match, Show, Switch } from 'solid-js';
-import { BottomReplyButtons } from './BottomReplyButtons';
-
-interface MessageContainerProps {
- message: ApiMessage;
- isFirstMessage: boolean;
- isLastMessage: boolean;
- isSelected: boolean;
- allowHover: boolean;
- isExpanded: boolean;
- markdownDomRef?: (ref: HTMLDivElement) => void | HTMLDivElement;
-}
-
-export function MessageContainer(props: MessageContainerProps) {
- const context = useEmailContext();
- const draftChild = createMemo(() => {
- if (!props.message.db_id) return undefined;
- const draft = context.drafts.getDraftForMessage(props.message.db_id);
- if (!draft) return undefined;
- return draft;
- });
-
- const [expandedHeader, setExpandedHeader] = createSignal
-
- {/* If available, we use body_macro to render "Macro-fied" email content in static markdown with, e.g. correctly styled document mentions. */}
-
- {(bodyMacro) => {
- return (
-
-
-
- {host()}
-
-
-
-
-
-
-
-
-
-
- }
- />
-
-
- context.messages.setExpandedBodyId(id, true)
- }
- setFocusedMessageId={context.messages.setFocused}
- isFirstMessageInThread={props.isFirstMessage}
- isFocused={props.isSelected}
- />
-
- {/* Image attachments */}
-
- ({
- id: a.sfs_id!,
- }))}
- variant="small"
- attachmentIds={imageAttachmentsWithSfs().map((a) => a.db_id!)}
- />
-
-
-
- {(attachment) => (
-
- onClickAttachment(attachment, fileType)
- }
- />
- )}
-
-
-
-
- {(attachment) => (
-
-
- {(attachment) => (
-
-
-
-
-
-
-
-
-
- props.message}
- setShowReply={setShowReply}
- draft={draftChild()}
- markdownDomRef={
- props.isLastMessage ? props.markdownDomRef : undefined
- }
- unframed
- />
-
-
-
-
-
-
-
-
- ` siblings into a single `
` with
- * explicit `
` separators, matching how Gmail structures composed mail. - * Email clients apply their own margins to `
');
- });
-
- it('wraps a single line in a span', () => {
- expect(plainTextToHtml('hello')).toBe(`
joined by
= 5
s - expect(plainTextToHtml('\n\n')).toBe('
');
- });
-
- describe('html escaping', () => {
- it('escapes ampersands', () => {
- expect(plainTextToHtml('a & b')).toBe(` = (
props
) => {
- const isCompact = () => props.compact || isMobile();
+ const isCompact = () => props.compact || props.mobile;
return (
getDisplayName(emailToMacroId(props.inbox.email_address));
+ const name = () => props.inbox.displayName;
return (
<>
getDisplayName(emailToMacroId(props.inbox.email_address));
+ const name = () => props.inbox.displayName;
const label = () => name() || props.inbox.email_address;
return (
@@ -66,15 +66,16 @@ function FromInboxPill(props: { inbox: FromInbox; selectable: boolean }) {
*/
export function FromInboxSelector(props: {
links: FromInbox[];
- activeLinkId: string | undefined;
- onSelect: (linkId: string) => void;
+ activeInboxId: string | undefined;
+ onSelect: (inboxId: string) => void;
+ disabled?: boolean;
compact?: boolean;
pill?: boolean;
class?: string;
portalScope?: 'local';
}) {
const activeInbox = () =>
- props.links.find((l) => l.id === props.activeLinkId) ?? props.links[0];
+ props.links.find((l) => l.id === props.activeInboxId) ?? props.links[0];
const sortedLinks = () =>
[...props.links].sort((a, b) =>
a.email_address.localeCompare(b.email_address)
@@ -90,6 +91,7 @@ export function FromInboxSelector(props: {
>
{active().email_address}
@@ -101,7 +103,7 @@ export function FromInboxSelector(props: {
{(inbox) => (
props.onSelect(inbox.id)}>
+
@@ -130,6 +132,7 @@ export function FromInboxSelector(props: {
>
(
props.onSelect(inbox.id)}>
+
@@ -172,7 +175,10 @@ export function FromInboxSelector(props: {
}
>
-
+
{(inbox) =>
@@ -184,7 +190,7 @@ export function FromInboxSelector(props: {
{(inbox) => (
props.onSelect(inbox.id)}>
+
diff --git a/apps/web/src/features/block-email/component/MacroSignatureButton.tsx b/apps/web/src/features/email-compose/components/macro-signature-button.tsx
similarity index 63%
rename from apps/web/src/features/block-email/component/MacroSignatureButton.tsx
rename to apps/web/src/features/email-compose/components/macro-signature-button.tsx
index c80a49aabbb..8e444be2e5d 100644
--- a/apps/web/src/features/block-email/component/MacroSignatureButton.tsx
+++ b/apps/web/src/features/email-compose/components/macro-signature-button.tsx
@@ -1,20 +1,16 @@
-import { MACRO_EMAIL_SIGNATURE } from '@block-email/constants';
-import { useHasPaidAccess } from '@core/auth';
-import { PaywallKey, usePaywallState } from '@core/constant/PaywallState';
-import { useUserContext } from '@core/context/user';
+import { MACRO_EMAIL_SIGNATURE } from '@app/features/email-compose/core/constants';
import { Tooltip } from '@ui';
import { Show } from 'solid-js';
interface MacroSignatureButtonProps {
signature?: string;
+ visible: boolean;
+ onUpgrade?: () => void;
}
export const MacroSignatureButton = (props: MacroSignatureButtonProps) => {
- const paywall = usePaywallState();
- const hasPaidAccess = useHasPaidAccess();
- const { isLoading } = useUserContext();
return (
-
+
{/* Hover-only guidance; hidden on mobile where tooltips never show
(Settings still points mobile users to desktop). */}
-
+
+ getDisplayName(tryMacroId(`macro|${email}`))
+ );
+ const signatures = useFeatureFlag(enableEmailSignatures);
+ const save = useSaveDraftMutation();
+ const remove = useDeleteDraftMutation();
+ const send = useSendMessageMutation();
+ const upload = useUploadDraftAttachmentsMutation();
+ const forward = useAddForwardedAttachmentsMutation();
+ const removeAttachment = useRemoveDraftAttachmentMutation();
+ const removeForwarded = useRemoveForwardedAttachmentMutation();
+ const unschedule = useUnscheduleMessageMutation();
+ const { users } = useCombinedRecipients();
+ const notice = (options?: ComposeNoticeOptions) => ({
+ ...options,
+ actions: options?.actions?.map((action) => ({
+ ...action,
+ icon: ArrowCounterClockwise,
+ })),
+ });
+ const reportError = (error: unknown) =>
+ Telemetry.error(error instanceof Error ? error : new Error(String(error)));
+ return {
+ recipientName: (id) => getDisplayName(tryMacroId(id)),
+ recordMention: (sourceId, targetId) => {
+ void trackMention(sourceId, 'document', targetId).catch(reportError);
+ },
+ accounts: {
+ ...inboxSource,
+ primaryId: usePrimaryEmailLinkId(),
+ },
+ viewerEmail,
+ recipients: users,
+ hasPaidAccess: useHasPaidAccess(),
+ presentation: {
+ viewerLoading: user.isLoading,
+ prepareSignatureLinks: interceptMailtoLinks,
+ onUpgrade: () => paywall.showPaywall(PaywallKey.REMOVE_SIGNATURE),
+ isTouch: isTouchDevice,
+ isMobile,
+ scheduleEnabled: ENABLE_EMAIL_SCHEDULED_SEND,
+ signaturesEnabled: () => signatures().enabled,
+ },
+ editorFiles: {
+ readDroppedFiles: readDroppedEmailFiles,
+ makePublic: makeAttachmentPublic,
+ uploadEditorFiles(input) {
+ if (!input.editor) return;
+ handleFileFolderDrop(
+ input.files,
+ input.directories,
+ createFilesReadyHandler(
+ input.editor,
+ input.sourceId,
+ input.sourceId ? 'email' : undefined,
+ input.dropEvent && input.editor
+ ? () => getDragDropPosition(input.editor!, input.dropEvent!, true)
+ : undefined,
+ input.onUploaded,
+ { width: 542, height: 542 }
+ )
+ );
+ },
+ },
+ notices: {
+ feedback: {
+ success: (message, options) => toast.success(message, notice(options)),
+ failure: (message, options) => toast.failure(message, notice(options)),
+ alert: (message, options) => toast.alert(message, notice(options)),
+ dismiss: toast.dismiss,
+ },
+ reportError,
+ },
+ drafts: {
+ async saveDraft({
+ completingThread,
+ previousThreadId,
+ inboxId,
+ ...input
+ }) {
+ const result = await save.mutateAsync({
+ ...input,
+ linkId: headerId(inboxId),
+ skipSoupRefetch: completingThread,
+ });
+ try {
+ const threadId = result.draft.thread_db_id;
+ if (threadId) markThreadDraftSaved(threadId);
+ if (previousThreadId && previousThreadId !== threadId) {
+ markThreadDraftSaved(previousThreadId);
+ invalidateSoupEntity(previousThreadId);
+ void refetchSoupEntity(previousThreadId, 'emailThread').catch(
+ reportError
+ );
+ }
+ } catch (error) {
+ reportError(error);
+ }
+ return {
+ draftId: result.draft.db_id ?? undefined,
+ threadId: result.draft.thread_db_id ?? undefined,
+ inboxId: result.draft.link_id,
+ };
+ },
+ async deleteDraft({ completingThread, inboxId, ...input }) {
+ await remove.mutateAsync({
+ ...input,
+ linkId: headerId(inboxId),
+ skipSoupRefetch: completingThread,
+ });
+ try {
+ if (input.threadId) markThreadDraftSaved(input.threadId);
+ } catch (error) {
+ reportError(error);
+ }
+ },
+ async restoreDraft({ threadId, draftId, draft, html, inboxId }) {
+ if (threadId && !isFeatureEnabled(enableGraphqlSoup)) {
+ queryClient.setQueryData>(
+ emailKeys.threadMessages(threadId).queryKey,
+ (old) =>
+ old
+ ? {
+ ...old,
+ pages: old.pages.map((page) => ({
+ ...page,
+ messages: page.messages.filter(
+ (message) => message.db_id !== draftId
+ ),
+ })),
+ }
+ : old
+ );
+ markThreadDraftSaved(threadId);
+ }
+ if (draft && html !== undefined)
+ await restoreDraftBodyAfterUndo(draft, html, headerId(inboxId));
+ if (threadId && isFeatureEnabled(enableGraphqlSoup))
+ void fetchAndCacheThread(threadId);
+ },
+ },
+ delivery: {
+ async sendMessage({ completingThread, inboxId, ...input }) {
+ const result = await send.mutateAsync({
+ ...input,
+ linkId: headerId(inboxId),
+ skipSoupRefetch: completingThread,
+ });
+ try {
+ if (result.message.thread_db_id)
+ markThreadDraftSaved(result.message.thread_db_id);
+ } catch (error) {
+ reportError(error);
+ }
+ return {
+ draftId: result.message.db_id ?? undefined,
+ threadId: result.message.thread_db_id ?? undefined,
+ inboxId: result.message.link_id,
+ };
+ },
+ async unschedule({ draftId, inboxId }) {
+ await unschedule.mutateAsync({
+ draftID: draftId,
+ linkId: headerId(inboxId),
+ });
+ try {
+ invalidateSoupEntity(draftId);
+ } catch (error) {
+ reportError(error);
+ }
+ },
+ schedule: async ({ draftId, sendTime }, inboxId) => {
+ await scheduleEmailMessage(
+ { draftID: draftId, send_time: sendTime },
+ headerId(inboxId)
+ );
+ },
+ archive: async ({ threadId, value }, inboxId) => {
+ await archiveEmailThread({ id: threadId, value }, headerId(inboxId));
+ },
+ undoSend: (input) =>
+ runUndoSend({
+ draftId: input.draftId,
+ linkId: headerId(input.inboxId),
+ onUndone: async () => {
+ await input.onUndone();
+ if (input.threadId)
+ void refetchSoupEntity(input.threadId, 'emailThread');
+ },
+ }),
+ },
+ attachmentStorage: {
+ uploadAttachments: ({ draftId, inboxId, ...input }) =>
+ upload.mutateAsync({
+ ...input,
+ draftID: draftId,
+ linkId: headerId(inboxId),
+ }),
+ addForwardedAttachments: ({ draftId, attachments, inboxId }) =>
+ forward.mutateAsync({
+ draftID: draftId,
+ attachments: attachments.map(({ attachmentId }) => ({
+ attachmentID: attachmentId,
+ })),
+ linkId: headerId(inboxId),
+ }),
+ removeAttachment: ({ draftId, attachmentId, inboxId }) =>
+ removeAttachment.mutateAsync({
+ draftID: draftId,
+ attachmentID: attachmentId,
+ linkId: headerId(inboxId),
+ }),
+ removeForwardedAttachment: ({ draftId, attachmentId, inboxId }) =>
+ removeForwarded.mutateAsync({
+ draftID: draftId,
+ attachmentID: attachmentId,
+ linkId: headerId(inboxId),
+ }),
+ },
+ };
+}
diff --git a/apps/web/src/features/email-compose/compose-host-adapter.ts b/apps/web/src/features/email-compose/compose-host-adapter.ts
new file mode 100644
index 00000000000..e26249de100
--- /dev/null
+++ b/apps/web/src/features/email-compose/compose-host-adapter.ts
@@ -0,0 +1,29 @@
+import { useSplitBackInterceptor } from '@components/app/split-layout/back-interceptor';
+import { useSplitLayout } from '@components/app/split-layout/layout';
+import { useSplitPanel } from '@components/app/split-layout/layoutUtils';
+import type { EmailComposeHost } from './context/compose-capabilities';
+import { createPanelFocusSibling } from './editor-adapter';
+export function createEmailComposeHost(): EmailComposeHost {
+ const { replaceSplit } = useSplitLayout();
+ const panel = useSplitPanel();
+ return {
+ showThread: (id: string) => {
+ replaceSplit({ content: { type: 'email', id }, mergeHistory: true });
+ },
+ showDraft: (id: string) => {
+ replaceSplit({
+ content: {
+ type: 'component',
+ id: 'email-compose',
+ params: { draftID: id },
+ preserveParams: true,
+ },
+ });
+ },
+ goBack: () => panel?.handle.goBack(),
+ focusSibling: createPanelFocusSibling(),
+ registerBack: (handler: () => boolean) => {
+ useSplitBackInterceptor(handler);
+ },
+ };
+}
diff --git a/apps/web/src/features/email-compose/context/compose-capabilities.ts b/apps/web/src/features/email-compose/context/compose-capabilities.ts
new file mode 100644
index 00000000000..c7dea922129
--- /dev/null
+++ b/apps/web/src/features/email-compose/context/compose-capabilities.ts
@@ -0,0 +1,177 @@
+import type { LexicalEditor } from 'lexical';
+import type { Accessor } from 'solid-js';
+import type { EmailDraft } from '../core/email-draft';
+import type { EmailRecipient } from '../core/email-recipient';
+
+export interface EmailInbox {
+ id: string;
+ email_address: string;
+ displayName?: string;
+ photo_url?: string | null;
+ settings: {
+ signature?: string | null;
+ signature_on_replies_forwards?: boolean | null;
+ };
+}
+
+/** Identity returned by a successful save or send. Transport envelopes stay in adapters. */
+export interface PersistedEmailIdentity {
+ draftId?: string;
+ threadId?: string;
+ inboxId: string;
+}
+
+export interface SaveEmailDraft {
+ draft: EmailDraft;
+ sendTime?: Date | null;
+ previousThreadId?: string;
+ inboxId?: string;
+ completingThread?: boolean;
+}
+export interface DeleteEmailDraft {
+ draftId: string;
+ threadId?: string;
+ inboxId?: string;
+ completingThread?: boolean;
+}
+export interface SendEmailDraft {
+ message: EmailDraft;
+ inboxId?: string;
+ completingThread?: boolean;
+}
+export interface UploadEmailAttachments {
+ draftId: string;
+ attachments: File[];
+ inboxId?: string;
+ onAttachmentAdded?: (file: File, id: string) => void;
+ onAttachmentUploadFailed?: (file: File) => void;
+}
+export interface EmailAttachmentChange {
+ draftId: string;
+ attachmentId: string;
+ inboxId?: string;
+}
+
+export interface EmailDraftStorage {
+ saveDraft(input: SaveEmailDraft): Promise;
+ deleteDraft(input: DeleteEmailDraft): Promise;
+ restoreDraft(input: {
+ draftId: string;
+ threadId?: string;
+ draft?: Omit;
+ html?: string;
+ inboxId?: string;
+ }): Promise;
+}
+
+export interface EmailAttachmentStorage {
+ uploadAttachments(input: UploadEmailAttachments): Promise;
+ addForwardedAttachments(input: {
+ draftId: string;
+ attachments: { attachmentId: string }[];
+ inboxId?: string;
+ }): Promise;
+ removeAttachment(input: EmailAttachmentChange): Promise;
+ removeForwardedAttachment(input: EmailAttachmentChange): Promise;
+}
+
+export interface EmailDelivery {
+ sendMessage(input: SendEmailDraft): Promise;
+ unschedule(input: { draftId: string; inboxId?: string }): Promise;
+ schedule(
+ input: { draftId: string; sendTime: string },
+ inboxId?: string
+ ): Promise;
+ archive(
+ input: { threadId: string; value: boolean },
+ inboxId?: string
+ ): Promise;
+ undoSend(input: {
+ threadId?: string;
+ draftId: string;
+ inboxId: string | undefined;
+ onUndone: () => Promise | void;
+ }): Promise;
+}
+
+export interface EmailComposeFeedback {
+ feedback: {
+ success(
+ message: string,
+ options?: ComposeNoticeOptions
+ ): number | undefined;
+ failure(message: string, options?: ComposeNoticeOptions): void;
+ alert(message: string, options?: ComposeNoticeOptions): void;
+ dismiss(id: number): void;
+ };
+ reportError(error: unknown): void;
+}
+
+export interface EmailComposeAccounts {
+ inboxes: Accessor;
+ loading: Accessor;
+ failed: Accessor;
+ primaryId: Accessor;
+}
+
+/** View wiring; controllers do not receive these presentation capabilities. */
+export interface EmailComposePresentation {
+ viewerLoading: Accessor;
+ onUpgrade(): void;
+ prepareSignatureLinks(root: ShadowRoot): void;
+ isTouch: Accessor;
+ isMobile: Accessor;
+ scheduleEnabled: boolean;
+ signaturesEnabled: Accessor;
+}
+
+export interface EmailEditorFiles {
+ readDroppedFiles: import('./editor-capabilities').ComposeBodyActions['readDroppedFiles'];
+ makePublic(id: string): void;
+ uploadEditorFiles(input: {
+ editor: LexicalEditor | undefined;
+ sourceId?: string;
+ files: FileSystemFileEntry[];
+ directories: FileSystemDirectoryEntry[];
+ dropEvent?: DragEvent;
+ onUploaded(ids: string[]): void;
+ }): void;
+}
+
+/** Production composition groups capabilities for views to wire into their consumers. */
+export interface EmailComposeContext {
+ drafts: EmailDraftStorage;
+ attachmentStorage: EmailAttachmentStorage;
+ delivery: EmailDelivery;
+ notices: EmailComposeFeedback;
+ accounts: EmailComposeAccounts;
+ presentation: EmailComposePresentation;
+ editorFiles: EmailEditorFiles;
+ viewerEmail: Accessor;
+ recipients: Accessor;
+ recipientName(id: string): string;
+ hasPaidAccess: Accessor;
+ recordMention(sourceId: string, targetId: string): void;
+}
+
+export interface ComposeNoticeOptions {
+ subtext?: string;
+ duration?: number;
+ actions?: { label: string; onClick: () => void }[];
+}
+export interface EmailComposeHost {
+ focusSibling?: (direction: 'next' | 'prev') => boolean | void;
+ showThread?: (id: string) => void;
+ showDraft?: (id: string) => void;
+ goBack?: () => void;
+ registerBack?: (handler: () => boolean) => void;
+}
+export interface EmailUndoHandle {
+ id: string;
+ undo(callbacks?: {
+ onSuccess?: () => void;
+ onError?: (error: Error) => void;
+ onSettled?: () => void;
+ }): Promise;
+ dispose(): void;
+}
diff --git a/apps/web/src/features/email-compose/context/compose-context.ts b/apps/web/src/features/email-compose/context/compose-context.ts
new file mode 100644
index 00000000000..2a28938bfaa
--- /dev/null
+++ b/apps/web/src/features/email-compose/context/compose-context.ts
@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'solid-js';
+import type { ComposeContextValue } from '../primitives/compose-view-state';
+
+const ComposeContext = createContext();
+
+export const ComposeProvider = ComposeContext.Provider;
+
+export function useCompose(): ComposeContextValue {
+ const ctx = useContext(ComposeContext);
+ if (!ctx) {
+ throw new Error('useCompose must be used within a ComposeProvider');
+ }
+ return ctx;
+}
diff --git a/apps/web/src/features/email-compose/context/editor-capabilities.ts b/apps/web/src/features/email-compose/context/editor-capabilities.ts
new file mode 100644
index 00000000000..92f9e983051
--- /dev/null
+++ b/apps/web/src/features/email-compose/context/editor-capabilities.ts
@@ -0,0 +1,15 @@
+import type { LexicalEditor } from 'lexical';
+export interface ComposeBodyActions {
+ focusSibling?: (direction: 'next' | 'prev') => boolean | void;
+ recipientAdded(email: string): void;
+ readDroppedFiles(
+ files: FileSystemFileEntry[],
+ directories: FileSystemDirectoryEntry[],
+ onFiles: (files: File[]) => void
+ ): void;
+ pasteFiles(
+ editor: LexicalEditor,
+ files: FileSystemFileEntry[],
+ directories: FileSystemDirectoryEntry[]
+ ): void;
+}
diff --git a/apps/web/src/features/block-email/component/EmailFormContext.tsx b/apps/web/src/features/email-compose/context/email-form-context.tsx
similarity index 60%
rename from apps/web/src/features/block-email/component/EmailFormContext.tsx
rename to apps/web/src/features/email-compose/context/email-form-context.tsx
index b6085da3045..84a031008d4 100644
--- a/apps/web/src/features/block-email/component/EmailFormContext.tsx
+++ b/apps/web/src/features/email-compose/context/email-form-context.tsx
@@ -2,19 +2,18 @@ import { createContext, type ParentProps, useContext } from 'solid-js';
import {
createEmailFormState,
type EmailFormStateOptions,
-} from './createEmailFormState';
-
-type EmailFormContextValue = ReturnType;
-
-type FormAccessKey =
- | { type: 'replying_to'; messageID: string; seed?: string }
- | { type: 'draft'; messageID: string; seed?: string };
-
-// `seed` identifies the draft version the form seeds from (see EmailInput's
+} from '../primitives/email-form-state';
+import type {
+ EmailFormContextValue,
+ FormAccessKey,
+} from '../primitives/email-form-types';
+import type { EmailFormContextInputs } from './email-form-inputs';
+
+// `seed` identifies the draft version the form seeds from (see ThreadReplyInput's
// seed key), so a composer remounting on a newer draft version gets a
// freshly derived form instead of the cached one.
const stringifyKey = (key: FormAccessKey) => {
- return `${key.type}_${key.messageID}_${key.seed ?? ''}`;
+ return `${key.type}_${key.messageId}_${key.seed ?? ''}`;
};
type RegistryApi = {
@@ -24,18 +23,21 @@ type RegistryApi = {
const EmailFormRegistryCtx = createContext();
export function EmailFormContextProvider(
- props: ParentProps<{ formOptions: EmailFormStateOptions }>
+ props: ParentProps<{
+ context: EmailFormContextInputs;
+ formOptions: EmailFormStateOptions;
+ }>
) {
const map = new Map();
const getOrInit: RegistryApi['getOrInit'] = (key) => {
if (!key) {
- return createEmailFormState();
+ return createEmailFormState(props.context);
}
const stringifiedKey = stringifyKey(key);
let existing = map.get(stringifiedKey);
if (!existing) {
- existing = createEmailFormState(key, props.formOptions);
+ existing = createEmailFormState(props.context, key, props.formOptions);
map.set(stringifiedKey, existing);
}
return existing;
@@ -48,16 +50,6 @@ export function EmailFormContextProvider(
);
}
-// Use this to get lazy access to getOrInit, e.g. when you don't need to create a new email form context until some UI is interacted with
-export function getEmailFormRegistry(): RegistryApi {
- const ctx = useContext(EmailFormRegistryCtx);
- if (!ctx)
- throw new Error(
- 'useEmailFormRegistry must be used within EmailFormContextProvider'
- );
- return ctx;
-}
-
export function getOrInitEmailFormContext(
key?: FormAccessKey
): EmailFormContextValue {
diff --git a/apps/web/src/features/email-compose/context/email-form-inputs.ts b/apps/web/src/features/email-compose/context/email-form-inputs.ts
new file mode 100644
index 00000000000..bcad84d245c
--- /dev/null
+++ b/apps/web/src/features/email-compose/context/email-form-inputs.ts
@@ -0,0 +1,30 @@
+import type { Accessor } from 'solid-js';
+import type { EmailRecipient } from '../core/email-recipient';
+import type { ReplyType } from '../core/reply-type';
+
+export interface EmailFormContextInputs {
+ viewerEmail: Accessor;
+ inboxes: Accessor<{ id: string; email_address: string }[]>;
+}
+
+/** Only the reply capabilities consumed by the composer; the caller owns navigation. */
+export interface EmailReplySession {
+ thread: Accessor<
+ | {
+ db_id: string;
+ link_id: string;
+ inbox_visible: boolean;
+ provider_id?: string | null;
+ }
+ | undefined
+ >;
+ recipientOptions: Accessor;
+ isPersonalReply: Accessor;
+ onDraftRemoved(): void;
+ exitToThread(target: 'last' | 'selected'): boolean;
+ replyRequest: {
+ replyType: Accessor;
+ clear(): void;
+ };
+ getMarkDoneNavigationTargetId(): string | undefined;
+}
diff --git a/apps/web/src/features/block-email/constants.ts b/apps/web/src/features/email-compose/core/constants.ts
similarity index 83%
rename from apps/web/src/features/block-email/constants.ts
rename to apps/web/src/features/email-compose/core/constants.ts
index 30c91261f2f..e62cbb35798 100644
--- a/apps/web/src/features/block-email/constants.ts
+++ b/apps/web/src/features/email-compose/core/constants.ts
@@ -1,7 +1,3 @@
-export const URL_PARAMS = {
- messageId: 'email_message_id',
-};
-
export const MACRO_EMAIL_SIGNATURE = '-- Sent with Macro';
export const MAX_ATTACHMENTS_BYTES_SIZE = 18_000_000;
diff --git a/apps/web/src/features/block-email/util/decodeBase64.ts b/apps/web/src/features/email-compose/core/decode-base64.ts
similarity index 100%
rename from apps/web/src/features/block-email/util/decodeBase64.ts
rename to apps/web/src/features/email-compose/core/decode-base64.ts
diff --git a/apps/web/src/features/email-compose/core/email-draft.ts b/apps/web/src/features/email-compose/core/email-draft.ts
new file mode 100644
index 00000000000..3c0615f649d
--- /dev/null
+++ b/apps/web/src/features/email-compose/core/email-draft.ts
@@ -0,0 +1,18 @@
+import type { EmailContact } from '../../email-message/core/email-message';
+
+/** Feature-owned values. Transport adaptation belongs to queries. */
+export interface EmailDraft {
+ bcc?: EmailContact[] | null;
+ body_html?: string | null;
+ body_macro?: string | null;
+ body_text?: string | null;
+ cc?: EmailContact[] | null;
+ db_id?: string | null;
+ include_signature?: boolean | null;
+ provider_id?: string | null;
+ provider_thread_id?: string | null;
+ replying_to_id?: string | null;
+ subject: string;
+ thread_db_id?: string | null;
+ to?: EmailContact[] | null;
+}
diff --git a/apps/web/src/features/email-compose/core/email-recipient.ts b/apps/web/src/features/email-compose/core/email-recipient.ts
new file mode 100644
index 00000000000..7fb1f1102de
--- /dev/null
+++ b/apps/web/src/features/email-compose/core/email-recipient.ts
@@ -0,0 +1,34 @@
+import type { EmailContact } from '../../email-message/core/email-message';
+import { getFirstName } from '../../email-message/core/name';
+
+/** Address choices accepted by the composer and shared recipient controls. */
+export type EmailRecipient =
+ | {
+ kind: 'user';
+ id: string;
+ data: {
+ id: string;
+ email: string;
+ name: string;
+ photoUrl?: string;
+ lastInteraction?: Date | string;
+ };
+ }
+ | {
+ kind: 'contact';
+ id: string;
+ data: EmailContact & { id: string; type: 'extracted' };
+ }
+ | {
+ kind: 'custom';
+ id: string;
+ data: { id: string; email: string; invalid: boolean };
+ };
+
+export type RecipientFieldId = 'to' | 'cc' | 'bcc';
+export type EmailFormRecipients = Record;
+
+export function getRecipientDisplayName(item: EmailRecipient): string {
+ if (item.kind === 'custom') return item.data.email;
+ return getFirstName(item.data.name) || item.data.email;
+}
diff --git a/apps/web/src/features/block-email/util/mailto.test.ts b/apps/web/src/features/email-compose/core/mailto.test.ts
similarity index 100%
rename from apps/web/src/features/block-email/util/mailto.test.ts
rename to apps/web/src/features/email-compose/core/mailto.test.ts
diff --git a/apps/web/src/features/block-email/util/mailto.ts b/apps/web/src/features/email-compose/core/mailto.ts
similarity index 100%
rename from apps/web/src/features/block-email/util/mailto.ts
rename to apps/web/src/features/email-compose/core/mailto.ts
diff --git a/apps/web/src/features/email-compose/core/plain-text-to-html.test.ts b/apps/web/src/features/email-compose/core/plain-text-to-html.test.ts
new file mode 100644
index 00000000000..1c33232fc81
--- /dev/null
+++ b/apps/web/src/features/email-compose/core/plain-text-to-html.test.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest';
+import { plainTextToHtml } from './plain-text-to-html';
+
+function body(text: string) {
+ return new DOMParser().parseFromString(plainTextToHtml(text), 'text/html')
+ .body;
+}
+
+describe('plaintext imported into the editor', () => {
+ it.each([
+ { input: '', breaks: 1, text: '' },
+ { input: 'line1\nline2', breaks: 1, text: 'line1line2' },
+ { input: 'above\n\nbelow', breaks: 3, text: 'abovebelow' },
+ { input: '\n\n', breaks: 5, text: '' },
+ ])(
+ 'preserves the existing line spacing for $input',
+ ({ input, breaks, text }) => {
+ const result = body(input);
+ expect(result.querySelectorAll('br')).toHaveLength(breaks);
+ expect(result.textContent).toBe(text);
+ }
+ );
+
+ it('renders HTML-looking content and ampersands as literal text', () => {
+ const input = ' & 
';
+ const result = body(input);
+ expect(result.textContent).toBe(input);
+ expect(result.querySelector('script, img')).toBeNull();
+ });
+
+ it('preserves Markdown punctuation and whitespace without introducing formatting', () => {
+ const input = '**Key Points:** file_name gmail.settings_basic 3 * 5 = 15';
+ const result = body(input);
+ expect(result.textContent).toBe(input);
+ expect(result.querySelector('strong, em, code')).toBeNull();
+ expect(result.querySelector('[style]')?.getAttribute('style')).toContain(
+ 'white-space: pre-wrap'
+ );
+ });
+});
diff --git a/apps/web/src/features/block-email/util/plainTextToHtml.ts b/apps/web/src/features/email-compose/core/plain-text-to-html.ts
similarity index 100%
rename from apps/web/src/features/block-email/util/plainTextToHtml.ts
rename to apps/web/src/features/email-compose/core/plain-text-to-html.ts
diff --git a/apps/web/src/features/block-email/util/recipientConversion.ts b/apps/web/src/features/email-compose/core/recipient-conversion.ts
similarity index 53%
rename from apps/web/src/features/block-email/util/recipientConversion.ts
rename to apps/web/src/features/email-compose/core/recipient-conversion.ts
index 2f3803a5b44..6225c656647 100644
--- a/apps/web/src/features/block-email/util/recipientConversion.ts
+++ b/apps/web/src/features/email-compose/core/recipient-conversion.ts
@@ -1,18 +1,9 @@
-import {
- type ContactInfo,
- type ExtractedContactInfo,
- emailToId,
- recipientEntityMapper,
-} from '@core/user';
-import type { ApiMessage } from '@service-email/generated/schemas';
-import type { EmailRecipient } from '../component/EmailContext';
-
-const extractedContactInfo = (contact: ContactInfo): ExtractedContactInfo => ({
- ...contact,
- id: emailToId(contact.email),
- type: 'extracted',
-});
-
+import type {
+ EmailFormRecipients,
+ EmailRecipient,
+} from '@app/features/email-compose/core/email-recipient';
+import type { EmailMessage } from '@app/features/email-message/core/email-message';
+import type { EmailContact as ContactInfo } from '../../email-message/core/email-message';
export const convertEmailRecipientToContactInfo = (
item: EmailRecipient
): ContactInfo => {
@@ -29,21 +20,17 @@ export const convertEmailRecipientToContactInfo = (
export const convertContactInfoToEmailRecipient = (
contact: ContactInfo
): EmailRecipient => {
- return recipientEntityMapper('contact')(extractedContactInfo(contact));
+ const id = `macro|${contact.email}`;
+ return { kind: 'contact', id, data: { ...contact, id, type: 'extracted' } };
};
// Note: because of the logic, this works with a reference message that is either the message being replied to, or the draft.
export const getReplyAllRecipients = (
- referenceMessage: ApiMessage | undefined,
+ referenceMessage: EmailMessage | undefined,
userEmail: string
-): {
- to: EmailRecipient[];
- cc: EmailRecipient[];
- bcc: EmailRecipient[];
-} => {
+): EmailFormRecipients => {
+ if (!referenceMessage) return { to: [], cc: [], bcc: [] };
let to: EmailRecipient[] = [];
- let cc: EmailRecipient[] = [];
- if (!referenceMessage) return { to, cc, bcc: [] };
// If last message was from user - reply to the to recipients (cc is handled separately below)
if (referenceMessage?.from?.email === userEmail) {
@@ -63,42 +50,16 @@ export const getReplyAllRecipients = (
);
to = [sender, ...otherRecipients].map(convertContactInfoToEmailRecipient);
}
- if (
- referenceMessage.cc &&
- referenceMessage.cc.filter((recipient) => recipient.email !== userEmail)
- .length > 0
- ) {
- cc = referenceMessage.cc
- .filter((recipient) => recipient.email !== userEmail)
- .map(convertContactInfoToEmailRecipient);
- }
+ const cc = (referenceMessage.cc ?? [])
+ .filter((recipient) => recipient.email !== userEmail)
+ .map(convertContactInfoToEmailRecipient);
return { to, cc, bcc: [] };
};
-// Whether Reply-all is meaningfully different from Reply for this message.
-// Hidden when the user sent the message (Reply == Reply-all per
-// getReplyRecipientsFromParent), or when no recipient remains in to/cc
-// after filtering out both the user and the sender.
-export const isReplyAllEligible = (
- message: ApiMessage,
- userEmail: string
-): boolean => {
- const sender = message.from?.email;
- if (sender === userEmail) return false;
- const isOther = (email: string) => email !== userEmail && email !== sender;
- const otherTo = message.to.filter((r) => isOther(r.email));
- const otherCc = message.cc.filter((r) => isOther(r.email));
- return otherTo.length + otherCc.length > 0;
-};
-
export const getReplyRecipientsFromParent = (
- replyingTo: ApiMessage | undefined,
+ replyingTo: EmailMessage | undefined,
userEmail: string
-): {
- to: EmailRecipient[];
- cc: EmailRecipient[];
- bcc: EmailRecipient[];
-} => {
+): EmailFormRecipients => {
if (!replyingTo) return { to: [], cc: [], bcc: [] };
// If last message was from user, reply === replyAll
if (replyingTo?.from?.email === userEmail) {
diff --git a/apps/web/src/features/email-compose/core/reply-type.ts b/apps/web/src/features/email-compose/core/reply-type.ts
new file mode 100644
index 00000000000..24fbe7b8f6b
--- /dev/null
+++ b/apps/web/src/features/email-compose/core/reply-type.ts
@@ -0,0 +1 @@
+export type ReplyType = 'reply' | 'reply-all' | 'forward';
diff --git a/apps/web/src/features/block-email/util/subjectText.test.ts b/apps/web/src/features/email-compose/core/subject-text.test.ts
similarity index 88%
rename from apps/web/src/features/block-email/util/subjectText.test.ts
rename to apps/web/src/features/email-compose/core/subject-text.test.ts
index d4774879f64..2dd8e9ee9bb 100644
--- a/apps/web/src/features/block-email/util/subjectText.test.ts
+++ b/apps/web/src/features/email-compose/core/subject-text.test.ts
@@ -1,6 +1,6 @@
-import type { ApiMessage } from '@service-email/generated/schemas';
+import type { EmailMessage } from '@app/features/email-message/core/email-message';
import { describe, expect, it } from 'vitest';
-import { displaySubject, getSubjectText } from './subjectText';
+import { displaySubject, getSubjectText } from './subject-text';
describe('displaySubject', () => {
it('returns the subject as-is when there is nothing to strip', () => {
@@ -36,8 +36,8 @@ describe('displaySubject', () => {
});
describe('getSubjectText', () => {
- const messageWithSubject = (subject: string): ApiMessage =>
- ({ subject }) as ApiMessage;
+ const messageWithSubject = (subject: string): EmailMessage =>
+ ({ subject }) as EmailMessage;
it('preserves an existing reply prefix regardless of case', () => {
expect(getSubjectText(messageWithSubject('Re: Q3 contract'), 'reply')).toBe(
diff --git a/apps/web/src/features/block-email/util/subjectText.ts b/apps/web/src/features/email-compose/core/subject-text.ts
similarity index 86%
rename from apps/web/src/features/block-email/util/subjectText.ts
rename to apps/web/src/features/email-compose/core/subject-text.ts
index 57047a549a1..9f89f25894b 100644
--- a/apps/web/src/features/block-email/util/subjectText.ts
+++ b/apps/web/src/features/email-compose/core/subject-text.ts
@@ -1,5 +1,5 @@
-import type { ApiMessage } from '@service-email/generated/schemas';
-import type { ReplyType } from './replyType';
+import type { EmailMessage } from '@app/features/email-message/core/email-message';
+import type { ReplyType } from './reply-type';
const NO_SUBJECT = '[No subject]';
@@ -18,7 +18,7 @@ export const isPlaceholderSubject = (title: string): boolean =>
title === NO_SUBJECT;
export const getSubjectText = (
- replyingTo: ApiMessage | undefined,
+ replyingTo: EmailMessage | undefined,
replyType: ReplyType | undefined
) => {
if (!replyingTo) return '';
diff --git a/apps/web/src/features/email-compose/editor-adapter.ts b/apps/web/src/features/email-compose/editor-adapter.ts
new file mode 100644
index 00000000000..4d8438862e3
--- /dev/null
+++ b/apps/web/src/features/email-compose/editor-adapter.ts
@@ -0,0 +1,57 @@
+import { useSplitPanel } from '@components/app/split-layout/layoutUtils';
+import { createFilesReadyHandler } from '@core/component/LexicalMarkdown/utils/fileUploadUtils';
+import { toast } from '@core/component/Toast/Toast';
+import { handleFileFolderDrop } from '@core/util/upload';
+import { type FocusableElement, tabbable } from 'tabbable';
+import type { ComposeBodyActions } from './context/editor-capabilities';
+import { makeAttachmentPublic } from './make-attachment-public';
+
+export function createPanelFocusSibling() {
+ const panel = useSplitPanel();
+ return (direction: 'next' | 'prev') => {
+ const root = panel?.panelRef();
+ if (!root) return false;
+ const elements = tabbable(root);
+ const index = elements.indexOf(document.activeElement as FocusableElement);
+ const target =
+ index < 0
+ ? elements.at(-1)
+ : elements[index + (direction === 'next' ? 1 : -1)];
+ if (!target) return false;
+ target.focus();
+ return true;
+ };
+}
+
+export const readDroppedEmailFiles: ComposeBodyActions['readDroppedFiles'] = (
+ files,
+ directories,
+ onFiles
+) =>
+ handleFileFolderDrop(files, directories, (uploaded) =>
+ onFiles(uploaded.map((item) => item.file))
+ );
+
+export function createComposeBodyActions(): ComposeBodyActions {
+ return {
+ focusSibling: createPanelFocusSibling(),
+ recipientAdded: (email) => {
+ toast.success(`${email} added to CC`);
+ },
+ readDroppedFiles: readDroppedEmailFiles,
+ pasteFiles(editor, files, directories) {
+ handleFileFolderDrop(
+ files,
+ directories,
+ createFilesReadyHandler(
+ editor,
+ undefined,
+ undefined,
+ undefined,
+ (ids) => ids.forEach(makeAttachmentPublic),
+ { width: 542, height: 542 }
+ )
+ );
+ },
+ };
+}
diff --git a/apps/web/src/features/email-compose/email-compose.tsx b/apps/web/src/features/email-compose/email-compose.tsx
new file mode 100644
index 00000000000..da37f232072
--- /dev/null
+++ b/apps/web/src/features/email-compose/email-compose.tsx
@@ -0,0 +1,11 @@
+import type { ComponentProps } from 'solid-js';
+import { createEmailComposeContext } from './compose-adapter';
+import { createEmailComposeHost } from './compose-host-adapter';
+import { EmailComposeView } from './views/email-compose';
+export function EmailCompose(
+ props: Omit, 'context' | 'host'>
+) {
+ const composeContext = createEmailComposeContext();
+ const host = createEmailComposeHost();
+ return ) {
+ editor.dispatchCommand(TOGGLE_APPEND_EMAIL_THREAD_COMMAND, {
+ replyingTo,
+ replyType: 'reply',
+ visible: true,
+ });
+}
+
+function hideQuote(editor: ReturnType) {
+ editor.dispatchCommand(TOGGLE_APPEND_EMAIL_THREAD_COMMAND, {
+ replyingTo,
+ replyType: 'reply',
+ visible: false,
+ });
+}
+
+describe('appended reply draft round trip', () => {
+ it('keeps one removable quote before and after saving and reloading a draft', () => {
+ const editorA = makeEditor();
+ appendQuote(editorA);
+ editorA.read(() => expect($collectMacroQuotes()).toHaveLength(1));
+ hideQuote(editorA);
+ editorA.read(() => expect($collectMacroQuotes()).toHaveLength(0));
+ appendQuote(editorA);
+ const prepared = prepareEmailBody(editorA);
+ const html = decodeBase64Utf8(prepared!.bodyHtml);
+
+ // Reload path: setEditorStateFromHtml -> $generateNodesFromDOM.
+ const editorB = makeEditor();
+ editorB.update(() => {
+ const dom = new DOMParser().parseFromString(html, 'text/html');
+ const nodes = $generateNodesFromDOM(editorB, dom);
+ const root = $getRoot();
+ root.clear();
+ root.append(...nodes);
+ });
+
+ editorB.read(() => {
+ expect($collectMacroQuotes()).toHaveLength(1);
+ expect($getRoot().getTextContent()).toContain('original message text');
+ });
+ editorB.dispatchCommand(TOGGLE_APPEND_EMAIL_THREAD_COMMAND, {
+ replyingTo,
+ replyType: 'forward',
+ visible: true,
+ });
+ editorB.read(() => {
+ expect($collectMacroQuotes()).toHaveLength(1);
+ });
+ hideQuote(editorB);
+ editorB.read(() => {
+ expect($collectMacroQuotes()).toHaveLength(0);
+ expect($getRoot().getTextContent().trim()).toBe('my reply');
+ });
+ });
+});
diff --git a/apps/web/src/features/email-compose/primitives/attachment-persistence.test.ts b/apps/web/src/features/email-compose/primitives/attachment-persistence.test.ts
new file mode 100644
index 00000000000..91c09b6c746
--- /dev/null
+++ b/apps/web/src/features/email-compose/primitives/attachment-persistence.test.ts
@@ -0,0 +1,113 @@
+import { createRoot } from 'solid-js';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import type { UploadEmailAttachments } from '../context/compose-capabilities';
+import { createAttachmentPersistence } from './attachment-persistence';
+import { createEmailFormState } from './email-form-state';
+
+const disposers: (() => void)[] = [];
+afterEach(() => disposers.splice(0).forEach((dispose) => dispose()));
+
+function setup(
+ uploadAttachments: (input: UploadEmailAttachments) => Promise
+) {
+ return createRoot((dispose) => {
+ disposers.push(dispose);
+ const form = createEmailFormState({
+ viewerEmail: () => undefined,
+ inboxes: () => [],
+ });
+ const services = {
+ uploadAttachments: vi.fn(uploadAttachments),
+ removeAttachment: vi.fn(async () => {}),
+ removeForwardedAttachment: vi.fn(async () => {}),
+ };
+ const persistence = createAttachmentPersistence({
+ services,
+ attachments: form.attachments,
+ draftId: () => 'draft',
+ inboxId: () => 'secondary-inbox',
+ });
+ return { form, services, persistence };
+ });
+}
+
+describe('draft attachment persistence', () => {
+ it('waits for earlier content uploads even after their attachment IDs are assigned', async () => {
+ const { promise: uploadFinished, resolve: finish } =
+ Promise.withResolvers();
+ const file = new File(['content'], 'notes.txt');
+ const state = setup(async (input) => {
+ input.onAttachmentAdded?.(file, 'attachment');
+ await uploadFinished;
+ });
+ state.form.attachments.add({ type: 'local', file });
+ const first = state.persistence.upload('draft');
+ let secondDone = false;
+ const second = state.persistence.upload('draft').then(() => {
+ secondDone = true;
+ });
+ await Promise.resolve();
+ expect(secondDone).toBe(false);
+ expect(state.persistence.uploading()).toBe(true);
+ expect(state.services.uploadAttachments).toHaveBeenCalledOnce();
+ finish();
+ await Promise.all([first, second]);
+ expect(secondDone).toBe(true);
+ expect(state.persistence.uploading()).toBe(false);
+ expect(state.services.uploadAttachments.mock.calls[0][0].inboxId).toBe(
+ 'secondary-inbox'
+ );
+ });
+
+ it('propagates an upload failure and allows a subsequent retry', async () => {
+ const file = new File(['content'], 'notes.txt');
+ const state = setup(async (input) => {
+ input.onAttachmentUploadFailed?.(file);
+ throw new Error('Upload failed');
+ });
+ state.form.attachments.add({ type: 'local', file });
+ await expect(state.persistence.upload('draft')).rejects.toThrow(
+ 'Upload failed'
+ );
+ expect(state.persistence.uploading()).toBe(false);
+ state.services.uploadAttachments.mockImplementationOnce(async (input) => {
+ input.onAttachmentAdded?.(file, 'retry-attachment');
+ });
+ await state.persistence.upload('draft');
+ expect(state.form.attachments.list()[0].attachmentId).toBe(
+ 'retry-attachment'
+ );
+ });
+
+ it('removes local and forwarded attachments through the appropriate operation', async () => {
+ const state = setup(async () => {});
+ const local = {
+ type: 'local' as const,
+ file: new File(['x'], 'notes.txt'),
+ attachmentId: 'local',
+ };
+ const forwarded = {
+ type: 'forwarded' as const,
+ attachmentId: 'forwarded',
+ fileName: 'forward.txt',
+ mimeType: 'text/plain',
+ fileSize: 1,
+ };
+ state.form.attachments.add(local);
+ state.form.attachments.add(forwarded);
+ state.persistence.remove(local);
+ state.persistence.remove(forwarded);
+ expect(state.form.attachments.list()).toEqual([]);
+ expect(state.services.removeAttachment).toHaveBeenCalledWith({
+ draftId: 'draft',
+ attachmentId: 'local',
+ inboxId: 'secondary-inbox',
+ });
+ expect(state.services.removeForwardedAttachment).toHaveBeenCalledWith({
+ draftId: 'draft',
+ attachmentId: 'forwarded',
+ inboxId: 'secondary-inbox',
+ });
+ await Promise.resolve();
+ });
+});
diff --git a/apps/web/src/features/email-compose/primitives/attachment-persistence.ts b/apps/web/src/features/email-compose/primitives/attachment-persistence.ts
new file mode 100644
index 00000000000..8d378034ccf
--- /dev/null
+++ b/apps/web/src/features/email-compose/primitives/attachment-persistence.ts
@@ -0,0 +1,88 @@
+import { type Accessor, createSignal } from 'solid-js';
+import type { EmailAttachmentStorage } from '../context/compose-capabilities';
+import type { DraftFormAttachment } from './email-form-state';
+import type { EmailFormContextValue } from './email-form-types';
+
+type AttachmentState = Pick<
+ EmailFormContextValue['attachments'],
+ | 'list'
+ | 'assignAttachmentId'
+ | 'clearAttachmentId'
+ | 'removeByFile'
+ | 'removeById'
+ | 'removeForwarded'
+>;
+
+/** Attachment transport and completion, independent of draft/send orchestration. */
+export function createAttachmentPersistence(options: {
+ attachments: AttachmentState;
+ draftId: Accessor;
+ inboxId: Accessor;
+ services: Pick<
+ EmailAttachmentStorage,
+ 'uploadAttachments' | 'removeAttachment' | 'removeForwardedAttachment'
+ >;
+}) {
+ // An assigned ID only proves that the attachment record exists. Every save
+ // must also wait for content uploads started by earlier concurrent saves.
+ const inFlight = new Set>();
+ const [uploading, setUploading] = createSignal(false);
+
+ return {
+ uploading,
+ async upload(draftId: string, inbox = { inboxId: options.inboxId() }) {
+ const attachments = options.attachments
+ .list()
+ .filter(
+ (
+ attachment
+ ): attachment is Extract =>
+ attachment.type === 'local' && !attachment.attachmentId
+ );
+ let run: Promise | undefined;
+ if (attachments.length) {
+ run = options.services.uploadAttachments({
+ draftId: draftId,
+ attachments: attachments.map((attachment) => attachment.file),
+ inboxId: inbox.inboxId,
+ onAttachmentAdded: options.attachments.assignAttachmentId,
+ onAttachmentUploadFailed: options.attachments.clearAttachmentId,
+ });
+ const settled = run.then(
+ () => undefined,
+ () => undefined
+ );
+ inFlight.add(settled);
+ setUploading(true);
+ void settled.then(() => {
+ inFlight.delete(settled);
+ setUploading(inFlight.size > 0);
+ });
+ }
+ while (inFlight.size) await Promise.all([...inFlight]);
+ // All work has settled; rethrow this save's own upload failure.
+ if (run) await run;
+ },
+ remove(attachment: DraftFormAttachment) {
+ const state = options.attachments;
+ if (attachment.type === 'local') state.removeByFile(attachment.file);
+ else if (attachment.type === 'forwarded')
+ state.removeForwarded(attachment.attachmentId);
+ else state.removeById(attachment.attachmentId);
+
+ const draftId = options.draftId();
+ if (!draftId || !attachment.attachmentId) return;
+ const operation =
+ attachment.type === 'forwarded'
+ ? options.services.removeForwardedAttachment
+ : options.services.removeAttachment;
+ void operation({
+ draftId,
+ attachmentId: attachment.attachmentId,
+ inboxId: options.inboxId(),
+ }).catch(() => {
+ // The attachment query reports removal failures; keep optimistic removal.
+ });
+ },
+ };
+}
diff --git a/apps/web/src/features/email-compose/primitives/compose-persistence.test.ts b/apps/web/src/features/email-compose/primitives/compose-persistence.test.ts
new file mode 100644
index 00000000000..703f025baee
--- /dev/null
+++ b/apps/web/src/features/email-compose/primitives/compose-persistence.test.ts
@@ -0,0 +1,290 @@
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+import type { PersistedEmailIdentity } from '../context/compose-capabilities';
+import { decodeBase64Utf8 } from '../core/decode-base64';
+import { createComposeContext } from '../tests/capabilities';
+import { mountEmailComposer } from '../tests/composer';
+
+const response: PersistedEmailIdentity = {
+ draftId: 'saved-id',
+ threadId: 'thread',
+ inboxId: 'inbox',
+};
+beforeEach(() => vi.useFakeTimers());
+afterEach(() => vi.useRealTimers());
+
+it('flushes the latest pending body and envelope exactly once on disposal', async () => {
+ const composeContext = createComposeContext();
+ const root = mountEmailComposer(composeContext);
+ root.edit('Last-second edit', 'Launch review');
+ root.dispose();
+ await vi.advanceTimersByTimeAsync(1000);
+ expect(composeContext.drafts.saveDraft).toHaveBeenCalledOnce();
+ const { draft } = vi.mocked(composeContext.drafts.saveDraft).mock.calls[0][0];
+ expect(decodeBase64Utf8(draft.body_html ?? '')).toContain('Last-second edit');
+ expect(draft.subject).toBe('Launch review');
+ expect(draft.to).toEqual([
+ expect.objectContaining({ email: 'colleague@example.com' }),
+ ]);
+});
+it('does not save an untouched composer or repeat a settled autosave on disposal', async () => {
+ const composeContext = createComposeContext();
+ const untouched = mountEmailComposer(composeContext);
+ untouched.dispose();
+ await vi.advanceTimersByTimeAsync(1000);
+ expect(composeContext.drafts.saveDraft).not.toHaveBeenCalled();
+ const edited = mountEmailComposer(composeContext);
+ edited.edit('Saved');
+ await vi.advanceTimersByTimeAsync(600);
+ edited.dispose();
+ await vi.advanceTimersByTimeAsync(1000);
+ expect(composeContext.drafts.saveDraft).toHaveBeenCalledOnce();
+});
+it('serializes a disposal flush behind the first save and reuses its returned ID', async () => {
+ const pending = Promise.withResolvers();
+ const composeContext = createComposeContext();
+ vi.mocked(composeContext.drafts.saveDraft).mockReturnValueOnce(
+ pending.promise
+ );
+ const root = mountEmailComposer(composeContext);
+ root.edit('First');
+ await vi.advanceTimersByTimeAsync(600);
+ root.edit('Latest');
+ root.dispose();
+ await vi.advanceTimersByTimeAsync(600);
+ expect(composeContext.drafts.saveDraft).toHaveBeenCalledOnce();
+ pending.resolve(response);
+ await vi.advanceTimersByTimeAsync(1);
+ expect(composeContext.drafts.saveDraft).toHaveBeenCalledTimes(2);
+ const { draft } = vi.mocked(composeContext.drafts.saveDraft).mock.calls[1][0];
+ expect(draft.db_id).toBe('saved-id');
+ expect(decodeBase64Utf8(draft.body_html ?? '')).toContain('Latest');
+});
+it('discard cancels an unsaved debounce without creating a draft', async () => {
+ const composeContext = createComposeContext();
+ const root = mountEmailComposer(composeContext);
+ root.edit('Discard me');
+ await root.state.deleteDraftAndReset();
+ root.dispose();
+ await vi.advanceTimersByTimeAsync(1000);
+ expect(composeContext.drafts.saveDraft).not.toHaveBeenCalled();
+ expect(composeContext.drafts.deleteDraft).not.toHaveBeenCalled();
+});
+it('discard waits for an in-flight first save and deletes its returned draft', async () => {
+ const pending = Promise.withResolvers();
+ const composeContext = createComposeContext();
+ vi.mocked(composeContext.drafts.saveDraft).mockReturnValueOnce(
+ pending.promise
+ );
+ const root = mountEmailComposer(composeContext);
+ root.edit('First');
+ await vi.advanceTimersByTimeAsync(600);
+ root.edit('Discard these changes too');
+ const discard = root.state.deleteDraftAndReset();
+ root.dispose();
+ pending.resolve(response);
+ await discard;
+ await vi.advanceTimersByTimeAsync(1000);
+ expect(composeContext.drafts.saveDraft).toHaveBeenCalledOnce();
+ expect(composeContext.drafts.deleteDraft).toHaveBeenCalledWith(
+ expect.objectContaining({ draftId: 'saved-id' })
+ );
+});
+it('keeps the draft editable after failed deletion and saves later edits', async () => {
+ const composeContext = createComposeContext();
+ const root = mountEmailComposer(composeContext);
+ root.edit('Saved');
+ await vi.advanceTimersByTimeAsync(600);
+ vi.mocked(composeContext.drafts.deleteDraft).mockRejectedValueOnce(
+ new Error('offline')
+ );
+ await expect(root.state.deleteDraftAndReset()).rejects.toThrow('offline');
+ root.edit('Still here');
+ await vi.advanceTimersByTimeAsync(600);
+ root.dispose();
+ expect(composeContext.drafts.saveDraft).toHaveBeenCalledTimes(2);
+});
+it('waits for the saved draft ID, prevents duplicate sends, and does not recreate the sent draft on disposal', async () => {
+ const pending = Promise.withResolvers();
+ const composeContext = createComposeContext();
+ vi.mocked(composeContext.drafts.saveDraft).mockReturnValueOnce(
+ pending.promise
+ );
+ const root = mountEmailComposer(composeContext);
+ root.edit('Send this');
+ root.state.context.onSend();
+ root.state.context.onSend();
+ expect(root.state.context.disabled()).toBe(true);
+ await vi.advanceTimersByTimeAsync(1);
+ expect(composeContext.drafts.saveDraft).toHaveBeenCalledOnce();
+ expect(composeContext.delivery.sendMessage).not.toHaveBeenCalled();
+ pending.resolve(response);
+ await vi.advanceTimersByTimeAsync(1);
+ expect(composeContext.delivery.sendMessage).toHaveBeenCalledOnce();
+ expect(
+ vi.mocked(composeContext.delivery.sendMessage).mock.calls[0][0].message
+ .db_id
+ ).toBe('saved-id');
+ root.dispose();
+ await vi.advanceTimersByTimeAsync(1000);
+ expect(composeContext.drafts.saveDraft).toHaveBeenCalledOnce();
+});
+it('resumes autosave after a failed send', async () => {
+ const composeContext = createComposeContext();
+ vi.mocked(composeContext.delivery.sendMessage).mockRejectedValueOnce(
+ new Error('offline')
+ );
+ const root = mountEmailComposer(composeContext);
+ root.edit('Send this');
+ root.state.context.onSend();
+ await vi.advanceTimersByTimeAsync(1);
+ expect(root.state.context.disabled()).toBe(false);
+ root.edit('Retry with this');
+ root.dispose();
+ await vi.advanceTimersByTimeAsync(1000);
+ expect(composeContext.drafts.saveDraft).toHaveBeenCalledTimes(2);
+ expect(
+ composeContext.notices.feedback.failure
+ ).toHaveBeenCalledExactlyOnceWith('Failed to send email');
+});
+
+it('keeps a successful send completed when navigation fails', async () => {
+ const composeContext = createComposeContext();
+ const error = new Error('Navigation failed');
+ const root = mountEmailComposer(composeContext, {
+ showThread: () => {
+ throw error;
+ },
+ });
+ root.edit('Send this');
+ root.state.context.onSend();
+ await vi.advanceTimersByTimeAsync(1);
+ expect(composeContext.notices.reportError).toHaveBeenCalledWith(error);
+ expect(composeContext.notices.feedback.failure).not.toHaveBeenCalled();
+ root.state.context.onSend();
+ root.dispose();
+ await vi.advanceTimersByTimeAsync(1000);
+ expect(composeContext.delivery.sendMessage).toHaveBeenCalledOnce();
+ expect(composeContext.drafts.saveDraft).toHaveBeenCalledOnce();
+});
+
+it('keeps completion independent when two composers share delivery capabilities', async () => {
+ const composeContext = createComposeContext();
+ const pending = Promise.withResolvers();
+ vi.mocked(composeContext.delivery.sendMessage).mockReturnValueOnce(
+ pending.promise
+ );
+ const first = mountEmailComposer(composeContext);
+ const second = mountEmailComposer(composeContext);
+ first.edit('First');
+ second.edit('Second');
+ first.state.context.onSend();
+ await vi.advanceTimersByTimeAsync(1);
+ second.state.context.onSend();
+ await vi.advanceTimersByTimeAsync(1);
+ expect(composeContext.delivery.sendMessage).toHaveBeenCalledTimes(2);
+ expect(first.state.context.isSending()).toBe(true);
+ expect(second.state.context.isSending()).toBe(false);
+ pending.resolve(response);
+ await vi.advanceTimersByTimeAsync(1);
+ expect(first.state.context.isSending()).toBe(false);
+ first.dispose();
+ second.dispose();
+});
+it('waits for an existing attachment upload before flushing newer body edits', async () => {
+ const pending = Promise.withResolvers();
+ const composeContext = createComposeContext();
+ vi.mocked(
+ composeContext.attachmentStorage.uploadAttachments
+ ).mockReturnValueOnce(pending.promise);
+ const root = mountEmailComposer(composeContext);
+ root.edit('With attachment');
+ root.state.context.onAddAttachments([
+ {
+ type: 'local',
+ file: new File(['notes'], 'notes.txt', { type: 'text/plain' }),
+ },
+ ]);
+ await vi.advanceTimersByTimeAsync(600);
+ root.edit('Final attachment note');
+ root.dispose();
+ expect(composeContext.drafts.saveDraft).toHaveBeenCalledOnce();
+ pending.resolve();
+ await vi.advanceTimersByTimeAsync(1);
+ expect(composeContext.drafts.saveDraft).toHaveBeenCalledTimes(2);
+ expect(
+ vi.mocked(composeContext.drafts.saveDraft).mock.calls[1][0].draft.db_id
+ ).toBe('draft');
+});
+
+it('rejects sender/schedule changes and repeated discard while a deletion is pending', async () => {
+ const pending = Promise.withResolvers();
+ const composeContext = createComposeContext();
+ const root = mountEmailComposer(composeContext);
+ root.edit('Saved');
+ await vi.advanceTimersByTimeAsync(600);
+ vi.mocked(composeContext.drafts.deleteDraft).mockReturnValueOnce(
+ pending.promise
+ );
+ const discard = root.state.deleteDraftAndReset();
+ expect(await root.state.deleteDraftAndReset()).toBe(false);
+ root.state.context.onSelectInbox?.('other-inbox');
+ await root.state.context.onSendTimeChange?.(new Date('2026-12-01T12:00:00Z'));
+ expect(root.state.context.selectedInboxId?.()).toBe('inbox');
+ expect(composeContext.drafts.saveDraft).toHaveBeenCalledOnce();
+ expect(composeContext.delivery.schedule).not.toHaveBeenCalled();
+ pending.resolve();
+ expect(await discard).toBe(true);
+ root.dispose();
+});
+
+it('rejects sender and scheduling changes after send dispatch', async () => {
+ const pending = Promise.withResolvers();
+ const composeContext = createComposeContext();
+ const root = mountEmailComposer(composeContext);
+ vi.mocked(composeContext.delivery.sendMessage).mockReturnValueOnce(
+ pending.promise
+ );
+ root.edit('Send this');
+ root.state.context.onSend();
+ await vi.advanceTimersByTimeAsync(1);
+ root.state.context.onSelectInbox?.('other-inbox');
+ await root.state.context.onSendTimeChange?.(new Date('2026-12-01T12:00:00Z'));
+ expect(composeContext.drafts.saveDraft).toHaveBeenCalledOnce();
+ expect(composeContext.delivery.schedule).not.toHaveBeenCalled();
+ expect(root.state.context.selectedInboxId?.()).toBe('inbox');
+ pending.resolve(response);
+ await vi.advanceTimersByTimeAsync(1);
+ root.dispose();
+});
+
+it('uses the captured inbox for attachment upload when a sender switch queues behind a save', async () => {
+ const pending = Promise.withResolvers();
+ const composeContext = createComposeContext();
+ composeContext.accounts = {
+ ...composeContext.accounts,
+ inboxes: () => [
+ { id: 'inbox', email_address: 'me@example.com', settings: {} },
+ { id: 'other', email_address: 'other@example.com', settings: {} },
+ ],
+ };
+ vi.mocked(composeContext.drafts.saveDraft).mockReturnValueOnce(
+ pending.promise
+ );
+ const root = mountEmailComposer(composeContext);
+ root.edit('With files');
+ root.state.context.onAddAttachments([
+ { type: 'local', file: new File(['notes'], 'notes.txt') },
+ ]);
+ await vi.advanceTimersByTimeAsync(600);
+ root.state.context.onSelectInbox?.('other');
+ pending.resolve(response);
+ await vi.advanceTimersByTimeAsync(1);
+ expect(
+ vi.mocked(composeContext.attachmentStorage.uploadAttachments).mock
+ .calls[0][0].inboxId
+ ).toBe('inbox');
+ expect(
+ vi.mocked(composeContext.drafts.saveDraft).mock.calls[1][0].inboxId
+ ).toBe('other');
+ root.dispose();
+});
diff --git a/apps/web/src/features/block-email/component/compose/ComposeContext.ts b/apps/web/src/features/email-compose/primitives/compose-view-state.ts
similarity index 64%
rename from apps/web/src/features/block-email/component/compose/ComposeContext.ts
rename to apps/web/src/features/email-compose/primitives/compose-view-state.ts
index bbb7b155f2a..a02d7160a75 100644
--- a/apps/web/src/features/block-email/component/compose/ComposeContext.ts
+++ b/apps/web/src/features/email-compose/primitives/compose-view-state.ts
@@ -1,22 +1,27 @@
-import type { DraftFormAttachment } from '@block-email/component/createEmailFormState';
-import type { EmailRecipient } from '@block-email/component/EmailContext';
import type { LexicalEditor } from 'lexical';
-import { type Accessor, createContext, type JSX, useContext } from 'solid-js';
-
-export type EmailFormRecipients = {
- to: EmailRecipient[];
- cc: EmailRecipient[];
- bcc: EmailRecipient[];
-};
-
-export type RecipientFieldId = 'to' | 'cc' | 'bcc';
+import type { Accessor, JSX } from 'solid-js';
+import type { ComposeBodyActions } from '../context/editor-capabilities';
+import type {
+ EmailFormRecipients,
+ EmailRecipient,
+} from '../core/email-recipient';
+import type { DraftFormAttachment } from './email-form-state';
export type ComposeValidationError = {
type: 'no_recipient' | 'no_message' | 'no_subject' | 'no_link';
message: string;
};
-export interface ComposeContextValue {
+export interface ComposeContextValue extends ComposeState {
+ bodyActions: ComposeBodyActions;
+ isMobile: Accessor;
+ scheduleEnabled: boolean;
+ attachmentFailure(message: string, options?: { subtext?: string }): void;
+ onUpgrade?: () => void;
+ viewerLoading?: Accessor;
+}
+
+export interface ComposeState {
// Form state (read)
recipients: () => EmailFormRecipients;
subject: () => string;
@@ -37,10 +42,10 @@ export interface ComposeContextValue {
// Editor
captureEditor: (editor: LexicalEditor) => void;
+ onEditorInitialized?: (editor: LexicalEditor) => void;
// Actions
onSend: () => void;
- onSaveDraft?: () => void | Promise;
onDelete?: () => void;
onSendTimeChange?: (date: Date | null) => void;
@@ -69,29 +74,19 @@ export interface ComposeContextValue {
// From-inbox selection: the inboxes the user can send from, the active one,
// and a setter to change it.
fromInboxes?: Accessor<
- { id: string; email_address: string; photo_url?: string | null }[]
+ {
+ id: string;
+ email_address: string;
+ displayName?: string;
+ photo_url?: string | null;
+ }[]
>;
- selectedFromLinkId?: Accessor;
- onSelectFromLink?: (linkId: string) => void;
+ selectedInboxId?: Accessor;
+ onSelectInbox?: (inboxId: string) => void;
hasPaidAccess: Accessor;
- // Toolbar slot — allows orchestrators to provide a custom toolbar
- toolbar?: () => JSX.Element;
-
// Signature preview slot — rendered below the body. Provided by the new-email
// composer and the AI chat composer (ChatCompose); the reply/forward input
// renders its own preview and omits this slot.
signaturePreview?: () => JSX.Element;
}
-
-const ComposeContext = createContext();
-
-export const ComposeProvider = ComposeContext.Provider;
-
-export function useCompose(): ComposeContextValue {
- const ctx = useContext(ComposeContext);
- if (!ctx) {
- throw new Error('useCompose must be used within a ComposeProvider');
- }
- return ctx;
-}
diff --git a/apps/web/src/features/email-compose/primitives/draft-autosave.ts b/apps/web/src/features/email-compose/primitives/draft-autosave.ts
new file mode 100644
index 00000000000..1ab431f6d18
--- /dev/null
+++ b/apps/web/src/features/email-compose/primitives/draft-autosave.ts
@@ -0,0 +1,41 @@
+import { debounce } from '@solid-primitives/scheduled';
+import { onCleanup } from 'solid-js';
+
+/** Capture live editor values before queuing; each write sees the preceding draft ID. */
+export function createDraftAutosave(options: {
+ capture(): Snapshot;
+ persist(snapshot: Snapshot): Promise;
+ paused(): boolean;
+}) {
+ let pending = false;
+ let queue: Promise = Promise.resolve(undefined);
+ const cancel = () => {
+ scheduled.clear();
+ pending = false;
+ };
+ const save = (snapshot = options.capture()) => {
+ cancel();
+ const write = () => options.persist(snapshot);
+ queue = queue.then(write, write);
+ return queue;
+ };
+ const scheduled = debounce(() => {
+ if (options.paused()) return;
+ void save().catch(() => {});
+ }, 500);
+ onCleanup(() => {
+ const flush = pending && !options.paused();
+ cancel();
+ if (flush) void save().catch(() => {});
+ });
+ return {
+ save,
+ cancel,
+ settled: () => queue,
+ schedule() {
+ if (options.paused()) return;
+ pending = true;
+ scheduled();
+ },
+ };
+}
diff --git a/apps/web/src/features/email-compose/primitives/email-composer.test.ts b/apps/web/src/features/email-compose/primitives/email-composer.test.ts
new file mode 100644
index 00000000000..7e388b1e957
--- /dev/null
+++ b/apps/web/src/features/email-compose/primitives/email-composer.test.ts
@@ -0,0 +1,108 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { decodeBase64Utf8 } from '../core/decode-base64';
+import { createComposeContext } from '../tests/capabilities';
+import { mountEmailComposer } from '../tests/composer';
+
+beforeEach(() => vi.useFakeTimers());
+afterEach(() => vi.useRealTimers());
+
+// Real controller and editor, with only feature capabilities replaced.
+describe('standalone compose controller', () => {
+ it('saves a composed draft after debounce and preserves the recipients and HTML', async () => {
+ const context = createComposeContext();
+ const root = mountEmailComposer(context);
+ try {
+ root.edit('Keep this draft', 'Architecture');
+ await vi.advanceTimersByTimeAsync(600);
+ expect(context.drafts.saveDraft).toHaveBeenCalledOnce();
+ const { draft } = vi.mocked(context.drafts.saveDraft).mock.calls[0][0];
+ expect(draft.to).toEqual([
+ expect.objectContaining({ email: 'colleague@example.com' }),
+ ]);
+ expect(draft.subject).toBe('Architecture');
+ expect(decodeBase64Utf8(draft.body_html ?? '')).toContain(
+ 'Keep this draft'
+ );
+ expect(root.state.context.hasDraft()).toBe(true);
+ } finally {
+ root.dispose();
+ }
+ });
+
+ it('rejects an empty body in an otherwise ready composer and sends once content is added', async () => {
+ const context = createComposeContext();
+ const root = mountEmailComposer(context);
+ try {
+ root.state.context.setSubject('Review');
+ root.state.context.onSend();
+ await vi.advanceTimersByTimeAsync(0);
+ expect(root.state.context.validationError('no_message')).toMatchObject({
+ type: 'no_message',
+ message: 'Please enter a message',
+ });
+ expect(context.delivery.sendMessage).not.toHaveBeenCalled();
+ root.edit('Ready to send');
+ root.state.context.onSend();
+ await vi.advanceTimersByTimeAsync(0);
+ expect(context.delivery.sendMessage).toHaveBeenCalledOnce();
+ } finally {
+ root.dispose();
+ }
+ });
+
+ it('reports scheduling failure without adopting an unconfirmed time, and keeps a confirmed schedule when archive fails', async () => {
+ const context = createComposeContext();
+ const root = mountEmailComposer(context);
+ try {
+ root.edit('Schedule this reply', 'Schedule review');
+ const requested = new Date('2026-10-01T12:00:00Z');
+ vi.mocked(context.delivery.schedule).mockRejectedValueOnce(
+ new Error('offline')
+ );
+ await root.state.context.onSendTimeChange?.(requested);
+ expect(root.state.context.sendTime()).toBeFalsy();
+ expect(context.notices.feedback.failure).toHaveBeenCalledWith(
+ 'Failed to schedule message'
+ );
+ vi.mocked(context.delivery.archive).mockRejectedValueOnce(
+ new Error('archive offline')
+ );
+ await root.state.context.onSendTimeChange?.(requested);
+ expect(root.state.context.sendTime()).toEqual(requested);
+ expect(context.notices.feedback.failure).toHaveBeenCalledWith(
+ 'Email scheduled, but unable to mark thread done'
+ );
+ } finally {
+ root.dispose();
+ }
+ });
+
+ it('blocks immediate send and overlapping changes while a scheduling request is pending', async () => {
+ const pending = Promise.withResolvers();
+ const context = createComposeContext();
+ vi.mocked(context.delivery.schedule).mockReturnValue(pending.promise);
+ const root = mountEmailComposer(context);
+ try {
+ root.edit('Schedule this reply', 'Schedule review');
+ const request = root.state.context.onSendTimeChange?.(
+ new Date('2026-10-01T12:00:00Z')
+ );
+ await vi.advanceTimersByTimeAsync(0);
+ expect(context.delivery.schedule).toHaveBeenCalledOnce();
+ expect(root.state.context.disabled()).toBe(true);
+ root.state.context.onSend();
+ await root.state.context.onSendTimeChange?.(
+ new Date('2026-10-02T12:00:00Z')
+ );
+ expect(context.delivery.sendMessage).not.toHaveBeenCalled();
+ expect(context.delivery.schedule).toHaveBeenCalledOnce();
+ pending.resolve();
+ await request;
+ expect(root.state.context.disabled()).toBe(false);
+ expect(root.state.draftDirty()).toBe(true);
+ } finally {
+ pending.resolve();
+ root.dispose();
+ }
+ });
+});
diff --git a/apps/web/src/features/email-compose/primitives/email-composer.ts b/apps/web/src/features/email-compose/primitives/email-composer.ts
new file mode 100644
index 00000000000..6e9c77e2de2
--- /dev/null
+++ b/apps/web/src/features/email-compose/primitives/email-composer.ts
@@ -0,0 +1,717 @@
+import { MACRO_EMAIL_SIGNATURE } from '@app/features/email-compose/core/constants';
+import { $generateHtmlFromNodes } from '@lexical/html';
+import {
+ $appendWatermarkNodeToLast,
+ $removeAllWatermarkNodes,
+} from '@macro-inc/lexical-core';
+import * as EmailValidator from 'email-validator';
+import type { LexicalEditor } from 'lexical';
+import { type Accessor, createMemo, createSignal } from 'solid-js';
+import { unwrap } from 'solid-js/store';
+import type {
+ EmailContact,
+ EmailMessage,
+} from '../../email-message/core/email-message';
+import type {
+ EmailAttachmentStorage,
+ EmailComposeAccounts,
+ EmailComposeFeedback,
+ EmailComposeHost,
+ EmailDelivery,
+ EmailDraftStorage,
+ PersistedEmailIdentity,
+} from '../context/compose-capabilities';
+import { decodeBase64Utf8 } from '../core/decode-base64';
+import type { EmailRecipient } from '../core/email-recipient';
+import { plainTextToHtml } from '../core/plain-text-to-html';
+import { convertEmailRecipientToContactInfo } from '../core/recipient-conversion';
+import type {
+ ComposeState,
+ ComposeValidationError,
+} from '../primitives/compose-view-state';
+import type { EmailFormRecipients } from '../primitives/email-form-state';
+import {
+ createEmailFormState,
+ type DraftFormAttachment,
+} from '../primitives/email-form-state';
+import {
+ clearEmailBody,
+ hasDraftContent,
+ prepareEmailBody,
+} from '../primitives/prepare-email-body';
+import { endUndoSend } from '../primitives/undo-send-claim';
+import { createAttachmentPersistence } from './attachment-persistence';
+import { createDraftAutosave } from './draft-autosave';
+import { createEmailSendSchedule } from './email-send-schedule';
+import { createEmailUndoStore } from './undo-store';
+
+type UndoComposeSnapshot = {
+ draftId: string;
+ inboxId?: string;
+ recipients: EmailFormRecipients;
+ subject: string;
+ bodyHtml: string;
+ attachments: DraftFormAttachment[];
+ includeSignature: boolean;
+};
+
+const composeUndo = createEmailUndoStore();
+
+export type EmailComposerOptions = {
+ drafts: EmailDraftStorage;
+ attachmentStorage: EmailAttachmentStorage;
+ delivery: EmailDelivery;
+ notices: EmailComposeFeedback;
+ accounts: EmailComposeAccounts;
+ viewerEmail: Accessor;
+ hasPaidAccess: Accessor;
+ recipients: Accessor;
+ recipientName(id: string): string;
+ host?: EmailComposeHost;
+ draft?: EmailMessage;
+ /** Identity for a composer reopened from a local undo snapshot. */
+ draftId?: string;
+ recipientOptions?: Accessor;
+ onRecipientsChange?: (recipients: EmailRecipient[]) => void;
+ /** Prefill for the To field (e.g. from an intercepted mailto: link). Ignored when editing an existing draft. */
+ initialTo?: string[];
+};
+
+export function createEmailComposer(props: EmailComposerOptions) {
+ const initialDraftId = props.draft?.db_id ?? props.draftId;
+ const hasPaidAccess = props.hasPaidAccess;
+
+ const form = createEmailFormState(
+ {
+ viewerEmail: props.viewerEmail,
+ inboxes: props.accounts.inboxes,
+ },
+ initialDraftId
+ ? {
+ type: 'draft',
+ messageId: initialDraftId,
+ }
+ : undefined,
+ {
+ getMessageById: () => props.draft,
+ getDraftForMessageReply: () => undefined,
+ onRecipientsChange: props.onRecipientsChange,
+ }
+ );
+
+ const primaryInboxId = props.accounts.primaryId;
+ const link = createMemo(() => {
+ const inboxes = props.accounts.inboxes();
+ if (inboxes.length === 0) return undefined;
+ // Send from the inbox the user picked, else the inbox that owns the draft
+ // being edited, else the primary inbox — not whichever inbox sorts first.
+ const targetId =
+ form.selectedInboxId() ?? props.draft?.link_id ?? primaryInboxId();
+ return inboxes.find((inbox) => inbox.id === targetId) ?? inboxes[0];
+ });
+
+ const activeInboxId = () => link()?.id;
+
+ // The sending inbox's saved signature (empty for inboxes without one). New
+ // emails include it by default; the preview's dismiss drops it for this one
+ // message. The backend injects it on send (see include_signature below); the
+ // FE only renders the preview and signals an explicit dismiss.
+ const signature = () => link()?.settings.signature ?? undefined;
+ const [includeSignature, setIncludeSignature] = createSignal(true);
+
+ const hasInboxError = createMemo(() => {
+ if (props.accounts.loading()) return false;
+ return props.accounts.failed() || props.accounts.inboxes().length === 0;
+ });
+
+ const destinationOptions = props.recipients;
+
+ const [editor, setEditor] = createSignal();
+ const [content, setContent] = createSignal('');
+ const [currentDraftId, setCurrentDraftId] = createSignal(
+ initialDraftId
+ );
+
+ // Thread the draft currently lives under; switching the sending inbox
+ // re-homes the draft server-side, so the previous thread's soup row must
+ // be dropped after the save.
+ const [currentThreadId, setCurrentThreadId] = createSignal<
+ string | undefined
+ >(props.draft?.thread_db_id);
+
+ const attachmentPersistence = createAttachmentPersistence({
+ services: props.attachmentStorage,
+ attachments: form.attachments,
+ draftId: currentDraftId,
+ inboxId: activeInboxId,
+ });
+
+ // Restore form state from undo-send snapshot if available
+ const restoredSnapshot = initialDraftId
+ ? composeUndo.take(initialDraftId)
+ : undefined;
+
+ if (restoredSnapshot) {
+ form.setSelectedInbox(restoredSnapshot.inboxId);
+ form.setRecipients('to', restoredSnapshot.recipients.to);
+ form.setRecipients('cc', restoredSnapshot.recipients.cc);
+ form.setRecipients('bcc', restoredSnapshot.recipients.bcc);
+ form.setSubject(restoredSnapshot.subject);
+ for (const attachment of restoredSnapshot.attachments) {
+ form.attachments.add(attachment);
+ }
+ setIncludeSignature(restoredSnapshot.includeSignature);
+ }
+
+ if (!initialDraftId && props.initialTo?.length) {
+ form.setRecipients(
+ 'to',
+ props.initialTo.map((email) => ({
+ kind: 'custom' as const,
+ id: `macro|${email}`,
+ data: {
+ id: `macro|${email}`,
+ email,
+ invalid: !EmailValidator.validate(email),
+ },
+ }))
+ );
+ }
+
+ // --- Draft persistence ---
+
+ function collectDraft() {
+ $removeAllWatermarkNodes(editor());
+ const prepared = prepareEmailBody(editor());
+ if (!prepared) {
+ props.notices.reportError(
+ new Error('Unable to prepare email body for draft collection.')
+ );
+ return null;
+ }
+ if (
+ !hasDraftContent(
+ prepared.bodyText,
+ form.subject(),
+ form.attachments.list().length,
+ form.recipients().to.length +
+ form.recipients().cc.length +
+ form.recipients().bcc.length
+ )
+ ) {
+ return null;
+ }
+ return {
+ bcc: form.recipients().bcc.map(convertEmailRecipientToContactInfo),
+ body_html: prepared.bodyHtml,
+ cc: form.recipients().cc.map(convertEmailRecipientToContactInfo),
+ subject: form.subject(),
+ to: form.recipients().to.map(convertEmailRecipientToContactInfo),
+ };
+ }
+
+ async function persistDraft(
+ draftToSave: ReturnType,
+ saveInboxId: string | undefined
+ ) {
+ if (!draftToSave) {
+ const draftId = currentDraftId();
+ if (draftId) {
+ await props.drafts.deleteDraft({
+ draftId: draftId,
+ threadId: currentThreadId(),
+ inboxId: saveInboxId,
+ });
+ }
+ setCurrentDraftId(undefined);
+ return;
+ }
+
+ const previousThreadId = currentThreadId();
+ const draftResponse = await props.drafts.saveDraft({
+ draft: {
+ ...draftToSave,
+ db_id: currentDraftId(),
+ },
+ inboxId: saveInboxId,
+ previousThreadId: previousThreadId,
+ });
+
+ const newThreadId = draftResponse.threadId ?? undefined;
+ setCurrentThreadId(newThreadId);
+
+ const draftId = draftResponse.draftId;
+ if (draftId) {
+ setCurrentDraftId(draftId);
+ await attachmentPersistence.upload(draftId, { inboxId: saveInboxId });
+ return draftId;
+ }
+ }
+
+ // Edits since the composer opened; an untouched existing draft can be
+ // left without the keep-or-delete prompt.
+ const [draftDirty, setDraftDirty] = createSignal(false);
+
+ const [sendPhase, setSendPhase] = createSignal<
+ 'idle' | 'preparing' | 'sending'
+ >('idle');
+ const submitting = () => sendPhase() !== 'idle';
+ const sending = () => sendPhase() === 'sending';
+ const [discarding, setDiscarding] = createSignal(false);
+ let completed = false;
+ const persistencePaused = () => submitting() || discarding() || completed;
+
+ const autosave = createDraftAutosave({
+ capture: () => ({ draft: collectDraft(), inboxId: activeInboxId() }),
+ persist: ({ draft, inboxId }) => persistDraft(draft, inboxId),
+ paused: persistencePaused,
+ });
+ const markDirtyAndScheduleSave = () => {
+ if (persistencePaused()) return;
+ setDraftDirty(true);
+ autosave.schedule();
+ };
+
+ // --- Attachment handling ---
+
+ const handleAddAttachments = (attachments: DraftFormAttachment[]) => {
+ for (const attachment of attachments) {
+ form.attachments.add(attachment);
+ }
+ markDirtyAndScheduleSave();
+ };
+
+ const handleRemoveAttachment = (attachment: DraftFormAttachment) => {
+ setDraftDirty(true);
+ attachmentPersistence.remove(attachment);
+ };
+
+ // --- Content change ---
+
+ let firstChangeConsumed = false;
+ const onContentChange = (newContent: string) => {
+ setContent(newContent);
+ if (!firstChangeConsumed) {
+ firstChangeConsumed = true;
+ return;
+ }
+ markDirtyAndScheduleSave();
+ };
+
+ // --- Send ---
+
+ const [validationError, setValidationError] =
+ createSignal(null);
+
+ // Everything that follows a successful unschedule: scrub the new thread's
+ // cache, restore the server-side draft, and remount the compose view so it
+ // restores the form from the undo snapshot.
+ const restoreAfterUndoSend = async (
+ draftId: string,
+ threadId: string | undefined,
+ inboxId: string | undefined
+ ) => {
+ const snapshot = composeUndo.peek(draftId);
+ await props.drafts.restoreDraft({
+ draftId,
+ threadId,
+ draft: snapshot
+ ? {
+ bcc: snapshot.recipients.bcc.map(
+ convertEmailRecipientToContactInfo
+ ),
+ cc: snapshot.recipients.cc.map(convertEmailRecipientToContactInfo),
+ db_id: draftId,
+ subject: snapshot.subject,
+ to: snapshot.recipients.to.map(convertEmailRecipientToContactInfo),
+ }
+ : undefined,
+ html: snapshot?.bodyHtml,
+ inboxId,
+ });
+
+ props.host?.showDraft?.(draftId);
+ };
+
+ // Undo retains the inbox used by the send even after navigation.
+ const undoSend = (
+ draftId: string,
+ threadId: string | undefined,
+ inboxId: string | undefined
+ ) =>
+ props.delivery.undoSend({
+ threadId,
+ draftId,
+ inboxId,
+ onUndone: () => restoreAfterUndoSend(draftId, threadId, inboxId),
+ });
+
+ const afterSend = (
+ identity: PersistedEmailIdentity,
+ inboxId: string | undefined
+ ) => {
+ const draftId = identity.draftId;
+ const threadId = identity.threadId;
+ if (draftId) endUndoSend(draftId);
+ try {
+ const toastId = props.notices.feedback.success('Email sent', {
+ actions: draftId
+ ? [
+ {
+ label: 'Undo',
+ onClick: () => {
+ if (toastId != null) props.notices.feedback.dismiss(toastId);
+ void undoSend(draftId, threadId ?? undefined, inboxId).catch(
+ props.notices.reportError
+ );
+ },
+ },
+ ]
+ : undefined,
+ duration: 5_000,
+ });
+ } catch (error) {
+ props.notices.reportError(error);
+ }
+ try {
+ if (threadId) props.host?.showThread?.(threadId);
+ } catch (error) {
+ props.notices.reportError(error);
+ }
+ };
+
+ const onSubmit = async () => {
+ if (scheduling() || persistencePaused()) return;
+ setValidationError(null);
+
+ const currentEditor = editor();
+ const currentLink = link();
+ const recipients = form.recipients();
+
+ if (!recipients.to.length) {
+ setValidationError({
+ type: 'no_recipient',
+ message: 'Please select at least one recipient',
+ });
+ return;
+ }
+
+ if (!content().trim()) {
+ setValidationError({
+ type: 'no_message',
+ message: 'Please enter a message',
+ });
+ return;
+ }
+
+ if (!form.subject()?.trim()) {
+ setValidationError({
+ type: 'no_subject',
+ message: 'Please enter a subject',
+ });
+ return;
+ }
+
+ if (!currentLink) {
+ setValidationError({
+ type: 'no_link',
+ message: 'Unable to find linked email account',
+ });
+ return;
+ }
+
+ // Failsafe: don't send if a scheduled send time is set
+ if (form.sendTime()) {
+ return;
+ }
+
+ setSendPhase('preparing');
+ try {
+ // Ensure the draft is saved before sending so undo-send always has a
+ // draft id to snapshot and restore (the send reuses the draft's db_id).
+ autosave.cancel();
+ try {
+ await autosave.save();
+ } catch {
+ // Draft save is best-effort; the send still works without one.
+ }
+
+ // Scheduling may have started while the draft save was pending.
+ if (scheduling() || form.sendTime()) return;
+
+ // Snapshot editor state before watermark so undo-send can restore it
+ if (currentEditor) {
+ const snapshotHtml = currentEditor.read(() =>
+ $generateHtmlFromNodes(currentEditor)
+ );
+ const draftId = currentDraftId();
+ if (draftId) {
+ composeUndo.remember({
+ inboxId: currentLink.id,
+ draftId,
+ recipients: structuredClone(unwrap(form.recipients())),
+ subject: form.subject(),
+ bodyHtml: snapshotHtml,
+ attachments: [...form.attachments.list()],
+ includeSignature: includeSignature(),
+ });
+ }
+ }
+
+ // Append watermark after all validation passes so failed sends don't
+ // leave orphaned watermark nodes in the editor tree.
+ const cleanupWatermark = $appendWatermarkNodeToLast(
+ currentEditor,
+ !hasPaidAccess() ? MACRO_EMAIL_SIGNATURE : undefined
+ );
+
+ const prepared = prepareEmailBody(currentEditor);
+ if (!prepared) {
+ cleanupWatermark();
+ return;
+ }
+
+ const bodyMacro = content();
+
+ try {
+ setSendPhase('sending');
+ const result = await props.delivery.sendMessage({
+ message: {
+ to: convertToContactInfoArray(recipients.to),
+ cc:
+ recipients.cc.length > 0
+ ? convertToContactInfoArray(recipients.cc)
+ : [],
+ bcc:
+ recipients.bcc.length > 0
+ ? convertToContactInfoArray(recipients.bcc)
+ : [],
+ subject: form.subject(),
+ body_text: prepared.bodyText,
+ body_html: prepared.bodyHtml,
+ body_macro: bodyMacro,
+ db_id: currentDraftId(),
+ // Backend includes the signature by default for new emails; only signal
+ // an explicit dismiss. Omitting it falls through to the backend default.
+ include_signature: includeSignature() ? undefined : false,
+ },
+ inboxId: activeInboxId(),
+ });
+
+ completed = true;
+ afterSend(result, currentLink.id);
+ } finally {
+ cleanupWatermark();
+ }
+ } catch (error) {
+ props.notices.reportError(error);
+ if (!completed) props.notices.feedback.failure('Failed to send email');
+ } finally {
+ setSendPhase('idle');
+ }
+ };
+
+ // --- Schedule ---
+
+ const totalRecipientCount = () => {
+ const recipients = form.recipients();
+ return recipients.to.length + recipients.cc.length + recipients.bcc.length;
+ };
+ const schedule = createEmailSendSchedule({
+ delivery: props.delivery,
+ notices: props.notices,
+ draftId: currentDraftId,
+ saveDraft: autosave.save,
+ threadId: currentThreadId,
+ inboxId: activeInboxId,
+ sendTime: form.sendTime,
+ setSendTime: (date) => {
+ form.setSendTime(date);
+ setDraftDirty(true);
+ },
+ recipientCount: totalRecipientCount,
+ });
+ const scheduling = schedule.pending;
+ const scheduleBlocked = () => sending() || discarding() || completed;
+ const handleSendTimeChange = (date: Date | null) => {
+ if (scheduleBlocked()) return Promise.resolve();
+ return schedule.change(date);
+ };
+
+ // --- Reset / delete ---
+
+ const resetState = () => {
+ clearEmailBody(editor());
+ setContent('');
+ setCurrentDraftId(undefined);
+ form.clear();
+ };
+
+ const deleteDraftAndReset = async () => {
+ if (persistencePaused() || scheduling()) return false;
+ setDiscarding(true);
+ autosave.cancel();
+ try {
+ // A first save may still be creating the draft. Delete its returned ID
+ // after it settles so discard cannot leave an orphan behind.
+ await autosave.settled().catch(() => {});
+ const draftId = currentDraftId();
+ if (draftId) {
+ await props.drafts.deleteDraft({
+ draftId,
+ threadId: currentThreadId(),
+ inboxId: activeInboxId(),
+ });
+ }
+ resetState();
+ return true;
+ } finally {
+ setDiscarding(false);
+ }
+ };
+
+ // --- Derived state ---
+
+ const initialHtml = () => {
+ if (restoredSnapshot) {
+ return restoredSnapshot.bodyHtml;
+ }
+
+ const draft = form.draft;
+ if (!draft) return;
+
+ if (draft.body_html_sanitized) {
+ return decodeBase64Utf8(draft.body_html_sanitized);
+ }
+
+ if (draft.body_text) {
+ return plainTextToHtml(draft.body_text);
+ }
+ };
+
+ const getRecipientOptions = () => {
+ const fromDraft = props.recipientOptions?.();
+ return fromDraft ?? destinationOptions();
+ };
+
+ const previewName = createMemo(() => {
+ const recipients = form.recipients().to;
+ if (recipients.length === 0) {
+ return 'Draft email';
+ }
+
+ if (recipients.length === 1) {
+ let recipientName = recipients[0].data.email;
+
+ if (recipients[0].kind === 'user') {
+ recipientName = props.recipientName(recipients[0].data.id);
+ }
+
+ return recipientName ? `Email to ${recipientName}` : 'Draft email';
+ }
+
+ const names = recipients
+ .slice(0, 2)
+ .map((r) => {
+ if (r.kind === 'user') {
+ return props.recipientName(r.data.id);
+ }
+ return r.data.email || 'Unknown';
+ })
+ .filter(Boolean);
+
+ if (recipients.length > 2) {
+ return `Email to ${names.join(', ')}, and others`;
+ }
+
+ return `Email to ${names.join(' and ')}`;
+ });
+
+ // --- Context value ---
+
+ const ctxValue: ComposeState = {
+ // Form state (read)
+ recipients: form.recipients,
+ subject: form.subject,
+ attachments: form.attachments.list,
+ sendTime: form.sendTime,
+ initialHtml,
+
+ // Form state (write)
+ setRecipients: (field, value) => {
+ form.setRecipients(field, value);
+ markDirtyAndScheduleSave();
+ },
+ setSubject: (value) => {
+ form.setSubject(value);
+ markDirtyAndScheduleSave();
+ },
+ onContentChange,
+ onAddAttachments: handleAddAttachments,
+ onRemoveAttachment: handleRemoveAttachment,
+
+ // Editor
+ captureEditor: setEditor,
+
+ // Actions
+ onSend: () => void onSubmit(),
+ onDelete: () => void deleteDraftAndReset().catch(() => {}),
+ onSendTimeChange: handleSendTimeChange,
+
+ // Status
+ disabled: () => hasInboxError() || persistencePaused() || scheduling(),
+ isSending: submitting,
+ hasDraft: () => currentDraftId() != null,
+
+ // Validation
+ validationError: (type) => {
+ const error = validationError();
+ if (error?.type === type) return error;
+ return undefined;
+ },
+
+ // Recipients
+ recipientOptions: getRecipientOptions,
+ focusRecipientsOnMount: !hasInboxError(),
+
+ // Schedule send
+ scheduleSendDisabled: () =>
+ totalRecipientCount() === 0 || scheduling() || persistencePaused(),
+
+ // Display
+ fromAddress: () => link()?.email_address,
+ fromInboxes: () => props.accounts.inboxes() ?? [],
+ selectedInboxId: () => link()?.id,
+ // Persist immediately on a sender switch so the draft moves to the new
+ // inbox even without a text edit.
+ onSelectInbox: (inboxId) => {
+ if (persistencePaused() || scheduling()) return;
+ form.setSelectedInbox(inboxId);
+ setDraftDirty(true);
+ autosave.cancel();
+ void autosave.save().catch(() => {});
+ },
+ hasPaidAccess,
+ };
+ return {
+ context: ctxValue,
+ editor,
+ previewName,
+ hasInboxError,
+ draftDirty,
+ deleteDraftAndReset,
+ signature,
+ includeSignature,
+ setIncludeSignature,
+ };
+}
+
+function convertToContactInfoArray(
+ recipients: EmailRecipient[]
+): EmailContact[] {
+ return recipients.map((recipient) => ({
+ email: recipient.data.email,
+ name:
+ 'name' in recipient.data ? recipient.data.name || undefined : undefined,
+ }));
+}
diff --git a/apps/web/src/features/email-compose/primitives/email-editor-commands.ts b/apps/web/src/features/email-compose/primitives/email-editor-commands.ts
new file mode 100644
index 00000000000..6be719bbe34
--- /dev/null
+++ b/apps/web/src/features/email-compose/primitives/email-editor-commands.ts
@@ -0,0 +1,11 @@
+import { createCommand } from 'lexical';
+import type { EmailMessage } from '../../email-message/core/email-message';
+import type { ReplyType } from '../core/reply-type';
+export const TOGGLE_APPEND_EMAIL_THREAD_COMMAND = createCommand<{
+ replyingTo: EmailMessage | undefined;
+ replyType?: ReplyType;
+ visible: boolean;
+ /** Whether the quoted message is personal (drives theme-adapted rendering
+ * of the quoted html, matching the message view) */
+ isPersonal?: boolean;
+}>('TOGGLE_APPEND_EMAIL_THREAD_COMMAND');
diff --git a/apps/web/src/features/email-compose/primitives/email-form-state.ts b/apps/web/src/features/email-compose/primitives/email-form-state.ts
new file mode 100644
index 00000000000..83791f29478
--- /dev/null
+++ b/apps/web/src/features/email-compose/primitives/email-form-state.ts
@@ -0,0 +1,334 @@
+import type { EmailFormRecipients } from '../core/email-recipient';
+
+export type { EmailFormRecipients } from '../core/email-recipient';
+
+import type { EmailRecipient } from '@app/features/email-compose/core/email-recipient';
+import type { EmailMessage } from '@app/features/email-message/core/email-message';
+import { createSignal, type Setter } from 'solid-js';
+import { createStore, reconcile, unwrap } from 'solid-js/store';
+import { match } from 'ts-pattern';
+import type { EmailFormContextInputs } from '../context/email-form-inputs';
+import { decodeBase64Utf8 } from '../core/decode-base64';
+import {
+ convertContactInfoToEmailRecipient,
+ getReplyAllRecipients,
+ getReplyRecipientsFromParent,
+} from '../core/recipient-conversion';
+import type { ReplyType } from '../core/reply-type';
+import { getSubjectText } from '../core/subject-text';
+
+export type DraftFormAttachment =
+ | {
+ type: 'local';
+ file: File;
+ attachmentId?: string;
+ }
+ | {
+ type: 'remote';
+ url: string;
+ fileName: string;
+ contentType: string;
+ attachmentId: string;
+ fileSize: number;
+ }
+ | {
+ type: 'forwarded';
+ attachmentId: string;
+ fileName: string;
+ mimeType: string;
+ fileSize: number;
+ };
+
+export interface EmailFormStateOptions {
+ getMessageById: (id: string) => EmailMessage | undefined;
+ getDraftForMessageReply: (id: string) => EmailMessage | undefined;
+ onRecipientsChange?: (next: EmailRecipient[]) => void;
+}
+
+type EmailFormState = {
+ recipients: EmailFormRecipients;
+ replyType: ReplyType;
+ withQuotedText: boolean;
+ subject: string;
+ sendTime?: Date;
+};
+
+const EMPTY_FORM_STATE: EmailFormState = {
+ recipients: {
+ to: [],
+ cc: [],
+ bcc: [],
+ },
+ replyType: 'reply-all',
+ withQuotedText: false,
+ subject: '',
+};
+
+/**
+ * Creates a state object for the email form.
+ * @param purpose - The purpose of the form. Are we managing the state of a draft reply or just a draft message
+ * @param options - Required options for the initial state to be calculated from
+ * @returns A state object for the email form.
+ */
+export function createEmailFormState(
+ context: EmailFormContextInputs,
+ purpose?:
+ | { type: 'replying_to'; messageId: string }
+ | { type: 'draft'; messageId: string },
+
+ options?: EmailFormStateOptions
+) {
+ const userEmail = context.viewerEmail;
+
+ let replyingTo: EmailMessage | undefined;
+
+ if (purpose?.type === 'replying_to') {
+ replyingTo = options?.getMessageById(purpose.messageId);
+ }
+
+ let draft: EmailMessage | undefined;
+
+ if (purpose?.type === 'draft') {
+ draft = options?.getMessageById(purpose.messageId);
+ } else if (purpose?.type === 'replying_to') {
+ draft = options?.getDraftForMessageReply(purpose.messageId);
+ }
+
+ // The inbox this compose sends from. Defaults to the inbox that owns the
+ // thread/draft; the user can change it via the "from" selector.
+ const [selectedInboxId, setSelectedInboxId] = createSignal<
+ string | undefined
+ >((draft ?? replyingTo)?.link_id ?? undefined);
+ // Reply logic ("did I send this?") must be judged against the inbox the
+ // message is sent from, not the account's primary email — otherwise replying
+ // from a secondary or delegated inbox misclassifies the sender and picks the
+ // wrong recipients.
+ const inboxEmail = () => {
+ const inboxId = selectedInboxId() ?? (draft ?? replyingTo)?.link_id;
+ const ownerEmail = inboxId
+ ? context.inboxes().find((l) => l.id === inboxId)?.email_address
+ : undefined;
+ return ownerEmail ?? userEmail() ?? '';
+ };
+
+ const draftContainsAppendedReply = () => {
+ const encoded = draft?.body_html_sanitized;
+ if (!encoded) return false;
+ const decodedHtml = decodeBase64Utf8(encoded);
+ if (!decodedHtml) return false;
+ const parsed = new DOMParser().parseFromString(decodedHtml, 'text/html');
+
+ return parsed.body.querySelector('div.macro_quote') !== null;
+ };
+
+ const getInitialState = () => {
+ const replyType =
+ (replyingTo?.to.length ?? 0) + (replyingTo?.cc.length ?? 0) > 1
+ ? 'reply-all'
+ : 'reply';
+
+ let initialSubject = draft?.subject;
+
+ if (initialSubject == null) {
+ initialSubject = getSubjectText(replyingTo, replyType);
+ }
+
+ let initialRecipients: EmailFormRecipients = { to: [], cc: [], bcc: [] };
+
+ if (draft) {
+ initialRecipients = {
+ to: draft.to.map(convertContactInfoToEmailRecipient),
+ cc: draft.cc.map(convertContactInfoToEmailRecipient),
+ bcc: draft.bcc.map(convertContactInfoToEmailRecipient),
+ };
+ } else if (replyingTo) {
+ initialRecipients =
+ replyType === 'reply-all'
+ ? getReplyAllRecipients(replyingTo, inboxEmail())
+ : getReplyRecipientsFromParent(replyingTo, inboxEmail());
+ }
+
+ return {
+ recipients: initialRecipients,
+ replyType,
+ withQuotedText: draftContainsAppendedReply(),
+ subject: initialSubject,
+ sendTime: draft?.scheduled_send_time
+ ? new Date(draft.scheduled_send_time)
+ : undefined,
+ } satisfies EmailFormState;
+ };
+
+ const [state, setState] = createStore(getInitialState());
+
+ // Values and edit revisions may outlive a mounted composer; effects do not.
+ const [editRevision, setEditRevision] = createSignal(0);
+
+ const [attachments, setAttachments] = createSignal([
+ ...(draft?.attachments_draft.map((a) => ({
+ type: 'remote' as const,
+ attachmentId: a.id,
+ contentType: a.content_type,
+ fileName: a.file_name,
+ url: a.s3_key,
+ fileSize: a.size,
+ })) ?? []),
+ ...(draft?.attachments_forwarded.map((a) => ({
+ type: 'forwarded' as const,
+ attachmentId: a.attachment_id,
+ fileName: a.filename ?? 'attachment',
+ mimeType: a.mime_type ?? 'application/octet-stream',
+ fileSize: a.size_bytes ?? 0,
+ })) ?? []),
+ ]);
+
+ const setRecipients = (
+ field: keyof EmailFormRecipients,
+ value: EmailRecipient[]
+ ) => {
+ setState('recipients', field, value);
+ callDirty();
+ const recipients = state.recipients;
+ const all = [...recipients.to, ...recipients.cc, ...recipients.bcc];
+ options?.onRecipientsChange?.(unwrap(all));
+ };
+
+ const setSubject: Setter = (value) => {
+ const result = setState('subject', value);
+ callDirty();
+ return result;
+ };
+
+ const setReplyType = (next: ReplyType) => {
+ setState('replyType', next);
+ const msg = replyingTo;
+
+ // Clear forwarded attachments when switching away from forward
+ setAttachments((prev) => prev.filter((a) => a.type !== 'forwarded'));
+
+ if (msg) {
+ const calculated = match(next)
+ .with('reply-all', () => getReplyAllRecipients(msg, inboxEmail()))
+ .with('reply', () => getReplyRecipientsFromParent(msg, inboxEmail()))
+ .with('forward', () => ({ to: [], cc: [], bcc: [] }))
+ .exhaustive();
+
+ setRecipients('to', calculated.to);
+ setRecipients('cc', calculated.cc);
+ setRecipients('bcc', calculated.bcc);
+
+ setSubject(getSubjectText(msg, next));
+
+ if (next === 'forward') {
+ setState('withQuotedText', true);
+ // Populate forwarded attachments from original message (skip inline images)
+ const fwdAttachments: DraftFormAttachment[] = (msg.attachments ?? [])
+ .filter((a) => !a.content_id)
+ .map((a) => ({
+ type: 'forwarded' as const,
+ attachmentId: a.db_id,
+ fileName: a.filename ?? 'attachment',
+ mimeType: a.mime_type ?? 'application/octet-stream',
+ fileSize: a.size_bytes ?? 0,
+ }));
+ setAttachments((prev) => [...prev, ...fwdAttachments]);
+ }
+ }
+
+ callDirty();
+ return next;
+ };
+
+ // Change the inbox this compose sends from. For an active reply, re-derive the
+ // recipients against the newly selected inbox (the sender comparison changes).
+ const setSelectedInbox = (inboxId: string | undefined) => {
+ setSelectedInboxId(inboxId);
+ if (!replyingTo || draft || state.replyType === 'forward') return;
+ const recalculated =
+ state.replyType === 'reply-all'
+ ? getReplyAllRecipients(replyingTo, inboxEmail())
+ : getReplyRecipientsFromParent(replyingTo, inboxEmail());
+ setRecipients('to', recalculated.to);
+ setRecipients('cc', recalculated.cc);
+ setRecipients('bcc', recalculated.bcc);
+ };
+
+ const setSendTime = (date: Date | null) => {
+ setState('sendTime', date ?? undefined);
+ };
+
+ const callDirty = () => {
+ setEditRevision((revision) => revision + 1);
+ };
+
+ const reset = (next: EmailFormState) => {
+ setState(reconcile(next));
+ const recipients = state.recipients;
+
+ // Notify context of the full recipient list after reset
+ const all = [...recipients.to, ...recipients.cc, ...recipients.bcc];
+ options?.onRecipientsChange?.(unwrap(all));
+
+ setAttachments([]);
+ };
+
+ return {
+ draft,
+ replyAppended: () => state.withQuotedText,
+ setReplyAppended: (next: boolean) => setState('withQuotedText', next),
+ recipients: () => state.recipients,
+ setRecipients,
+ subject: () => state.subject,
+ setSubject,
+ replyType: () => state.replyType,
+ setReplyType,
+ selectedInboxId,
+ setSelectedInbox,
+ editRevision,
+ sendTime: () => state.sendTime,
+ setSendTime,
+ reset: () => reset(getInitialState()),
+ clear: () => reset({ ...EMPTY_FORM_STATE }),
+ attachments: {
+ list: attachments,
+ add: (attachment: DraftFormAttachment) => {
+ setAttachments((p) => [...p, attachment]);
+ },
+ assignAttachmentId: (file: File, attachmentId: string) => {
+ setAttachments((p) =>
+ p.map((a) =>
+ a.type === 'local' && a.file === file ? { ...a, attachmentId } : a
+ )
+ );
+ },
+ clearAttachmentId: (file: File) => {
+ setAttachments((p) =>
+ p.map((a) =>
+ a.type === 'local' && a.file === file
+ ? { ...a, attachmentId: undefined }
+ : a
+ )
+ );
+ },
+ removeByFile: (file: File) => {
+ setAttachments((p) =>
+ p.filter((a) => a.type !== 'local' || a.file !== file)
+ );
+ },
+ removeById: (attachmentId: string) => {
+ setAttachments((p) =>
+ p.filter(
+ (a) => a.type !== 'remote' || a.attachmentId !== attachmentId
+ )
+ );
+ },
+ removeForwarded: (attachmentId: string) => {
+ setAttachments((p) =>
+ p.filter(
+ (a) => a.type !== 'forwarded' || a.attachmentId !== attachmentId
+ )
+ );
+ },
+ },
+ };
+}
diff --git a/apps/web/src/features/email-compose/primitives/email-form-types.ts b/apps/web/src/features/email-compose/primitives/email-form-types.ts
new file mode 100644
index 00000000000..7a388bb2911
--- /dev/null
+++ b/apps/web/src/features/email-compose/primitives/email-form-types.ts
@@ -0,0 +1,6 @@
+import type { createEmailFormState } from './email-form-state';
+export type EmailFormContextValue = ReturnType;
+
+export type FormAccessKey =
+ | { type: 'replying_to'; messageId: string; seed?: string }
+ | { type: 'draft'; messageId: string; seed?: string };
diff --git a/apps/web/src/features/email-compose/primitives/email-send-schedule.ts b/apps/web/src/features/email-compose/primitives/email-send-schedule.ts
new file mode 100644
index 00000000000..b3c2f44b23d
--- /dev/null
+++ b/apps/web/src/features/email-compose/primitives/email-send-schedule.ts
@@ -0,0 +1,96 @@
+import { type Accessor, createEffect, createSignal, on } from 'solid-js';
+import type {
+ EmailComposeFeedback,
+ EmailDelivery,
+} from '../context/compose-capabilities';
+
+export function createEmailSendSchedule(options: {
+ delivery: Pick;
+ notices: EmailComposeFeedback;
+ draftId: Accessor;
+ saveDraft: () => Promise;
+ threadId: Accessor;
+ inboxId: Accessor;
+ sendTime: Accessor;
+ setSendTime: (date: Date | null) => void;
+ recipientCount: Accessor;
+}) {
+ const { delivery, notices } = options;
+ const [pending, setPending] = createSignal(false);
+
+ const change = async (date: Date | null) => {
+ if (pending()) return;
+ const inboxId = options.inboxId();
+ setPending(true);
+ try {
+ const previous = options.sendTime();
+ const currentDraft = options.draftId();
+ if (!date && previous && currentDraft) {
+ try {
+ await delivery.unschedule({
+ draftId: currentDraft,
+ inboxId,
+ });
+ } catch (error) {
+ notices.reportError(error);
+ notices.feedback.failure('Failed to unschedule email');
+ return;
+ }
+ options.setSendTime(null);
+ notices.feedback.success('Email unscheduled');
+ return;
+ }
+ if (!date) {
+ options.setSendTime(null);
+ return;
+ }
+ // Persistence owns its failure notice; a failed save is not a failed schedule request.
+ let draftId: string | undefined;
+ try {
+ draftId = await options.saveDraft();
+ } catch (error) {
+ notices.reportError(error);
+ return;
+ }
+ try {
+ if (!draftId) throw new Error('Draft required');
+ await delivery.schedule(
+ { draftId, sendTime: date.toISOString() },
+ inboxId
+ );
+ } catch (error) {
+ notices.reportError(error);
+ notices.feedback.failure('Failed to schedule message');
+ return;
+ }
+ options.setSendTime(date);
+ const threadId = options.threadId();
+ if (threadId) {
+ try {
+ await delivery.archive({ threadId, value: true }, inboxId);
+ } catch (error) {
+ notices.reportError(error);
+ notices.feedback.failure(
+ 'Email scheduled, but unable to mark thread done'
+ );
+ }
+ }
+ } catch (error) {
+ // Presentation failures do not change a successful schedule/unschedule.
+ notices.reportError(error);
+ } finally {
+ setPending(false);
+ }
+ };
+
+ createEffect(
+ on(
+ options.recipientCount,
+ (count) => {
+ if (count === 0 && options.sendTime()) void change(null);
+ },
+ { defer: true }
+ )
+ );
+ return { pending, change };
+}
diff --git a/apps/web/src/features/block-email/util/flattenConsecutiveParagraphs.test.ts b/apps/web/src/features/email-compose/primitives/flatten-consecutive-paragraphs.test.ts
similarity index 62%
rename from apps/web/src/features/block-email/util/flattenConsecutiveParagraphs.test.ts
rename to apps/web/src/features/email-compose/primitives/flatten-consecutive-paragraphs.test.ts
index 5943f7f133c..4f07c4eeda0 100644
--- a/apps/web/src/features/block-email/util/flattenConsecutiveParagraphs.test.ts
+++ b/apps/web/src/features/email-compose/primitives/flatten-consecutive-paragraphs.test.ts
@@ -1,6 +1,6 @@
// @vitest-environment jsdom
import { describe, expect, it } from 'vitest';
-import { flattenConsecutiveParagraphs } from './flattenConsecutiveParagraphs';
+import { flattenConsecutiveParagraphs } from './flatten-consecutive-paragraphs';
function flatten(html: string) {
const body = new DOMParser().parseFromString(html, 'text/html').body;
@@ -45,4 +45,27 @@ describe('flattenConsecutiveParagraphs', () => {
'
from
ctx.onSelectFromLink?.(id)}
+ activeInboxId={ctx.selectedInboxId?.()}
+ onSelect={(id) => ctx.onSelectInbox?.(id)}
/>
@@ -225,7 +226,7 @@ export function ComposeLayout(props: {
- {props.toolbar ?? ctx.toolbar?.()}
+ {props.toolbar}
);
diff --git a/apps/web/src/features/block-email/component/compose/ComposeRecipients.tsx b/apps/web/src/features/email-compose/views/compose-recipients.tsx
similarity index 90%
rename from apps/web/src/features/block-email/component/compose/ComposeRecipients.tsx
rename to apps/web/src/features/email-compose/views/compose-recipients.tsx
index 1f991333a79..2941cdd8901 100644
--- a/apps/web/src/features/block-email/component/compose/ComposeRecipients.tsx
+++ b/apps/web/src/features/email-compose/views/compose-recipients.tsx
@@ -1,11 +1,12 @@
-import type { EmailRecipient } from '@block-email/component/EmailContext';
-import { EMAIL_COMPOSE_TO_INPUT_ID } from '@block-email/constants';
+import { EMAIL_COMPOSE_TO_INPUT_ID } from '@app/features/email-compose/core/constants';
+import type { EmailRecipient } from '@app/features/email-compose/core/email-recipient';
import { RecipientSelector } from '@core/component/RecipientSelector';
-import { isMobile } from '@core/mobile/isMobile';
+
import { cn } from '@ui';
import { createSignal, type JSX, onCleanup, Show } from 'solid-js';
-import { FromInboxSelector } from '../FromInboxSelector';
-import { type RecipientFieldId, useCompose } from './ComposeContext';
+import { FromInboxSelector } from '../components/from-inbox-selector';
+import { useCompose } from '../context/compose-context';
+import type { RecipientFieldId } from '../core/email-recipient';
type DragState = {
recipient: EmailRecipient;
@@ -29,6 +30,7 @@ function ComposeFieldRow(props: {
onRowFocusIn?: () => void;
onRowFocusOut?: (e: FocusEvent) => void;
}) {
+ const ctx = useCompose();
const [isDragOver, setIsDragOver] = createSignal(false);
const handleDragOver = (e: DragEvent) => {
@@ -55,7 +57,7 @@ function ComposeFieldRow(props: {
LexicalEditor | undefined;
@@ -34,7 +32,9 @@ export function EmailComposeToolbar(props: {
const attachmentsToAddByteSize = files.reduce((sum, f) => sum + f.size, 0);
if (attachmentsToAddByteSize >= MAX_ATTACHMENTS_BYTES_SIZE) {
- toast.failure(`${plural('Attachment', files.length)} exceed 18MB`);
+ ctx.attachmentFailure(
+ `${plural('Attachment', files.length)} exceed 18MB`
+ );
return;
}
@@ -47,7 +47,7 @@ export function EmailComposeToolbar(props: {
currentAttachmentsByteSize + attachmentsToAddByteSize >=
MAX_ATTACHMENTS_BYTES_SIZE
) {
- toast.failure("Can't add more attachments", {
+ ctx.attachmentFailure("Can't add more attachments", {
subtext: 'Total attachments exceed 18MB limit',
});
return;
@@ -78,7 +78,7 @@ export function EmailComposeToolbar(props: {
-
-
-
-
+
+
& { context: EmailComposeContext };
+export function EmailComposeView(props: EmailComposeViewProps) {
+ const composeContext = props.context;
+ const state = createEmailComposer({
+ drafts: composeContext.drafts,
+ attachmentStorage: composeContext.attachmentStorage,
+ delivery: composeContext.delivery,
+ notices: composeContext.notices,
+ accounts: composeContext.accounts,
+ viewerEmail: composeContext.viewerEmail,
+ hasPaidAccess: composeContext.hasPaidAccess,
+ recipients: composeContext.recipients,
+ recipientName: composeContext.recipientName,
+ host: props.host,
+ draft: props.draft,
+ draftId: props.draftId,
+ recipientOptions: props.recipientOptions,
+ onRecipientsChange: props.onRecipientsChange,
+ initialTo: props.initialTo,
+ });
+ const {
+ editor,
+ previewName,
+ hasInboxError,
+ draftDirty,
+ deleteDraftAndReset,
+ signature,
+ includeSignature,
+ setIncludeSignature,
+ } = state;
+ const ctxValue: ComposeContextValue = {
+ ...state.context,
+ bodyActions: {
+ focusSibling: props.host?.focusSibling,
+ recipientAdded: (email) =>
+ composeContext.notices.feedback.success(`${email} added to CC`),
+ readDroppedFiles: composeContext.editorFiles.readDroppedFiles,
+ pasteFiles: (editor, files, directories) =>
+ composeContext.editorFiles.uploadEditorFiles({
+ editor,
+ files,
+ directories,
+ onUploaded: (ids) =>
+ ids.forEach(composeContext.editorFiles.makePublic),
+ }),
+ },
+ isMobile: composeContext.presentation.isMobile,
+ scheduleEnabled: composeContext.presentation.scheduleEnabled,
+ attachmentFailure: composeContext.notices.feedback.failure,
+ onUpgrade: composeContext.presentation.onUpgrade,
+ viewerLoading: composeContext.presentation.viewerLoading,
+ signaturePreview: () => (
+
+ {(html) => (
+ setIncludeSignature(false)}
+ />
+ )}
+
+ ),
+ };
+ const [draftBackMenuOpen, setDraftBackMenuOpen] = createSignal(false);
+
+ if (composeContext.presentation.isMobile()) {
+ // Backing out of a compose that has a draft asks whether to keep it.
+ props.host?.registerBack?.(() => {
+ if (!ctxValue.hasDraft() || !draftDirty()) return false;
+ setDraftBackMenuOpen(true);
+ return true;
+ });
+ }
+
+ const leaveCompose = () => {
+ setDraftBackMenuOpen(false);
+ props.host?.goBack?.();
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/web/src/features/email-compose/views/reply-envelope.tsx b/apps/web/src/features/email-compose/views/reply-envelope.tsx
new file mode 100644
index 00000000000..9156c94b9a3
--- /dev/null
+++ b/apps/web/src/features/email-compose/views/reply-envelope.tsx
@@ -0,0 +1,330 @@
+import { RecipientSelector } from '@core/component/RecipientSelector';
+import ChevronDown from '@phosphor/caret-down.svg';
+import CaretRight from '@phosphor/caret-right.svg';
+import { Button, cn } from '@ui';
+import type { Accessor } from 'solid-js';
+import { Show } from 'solid-js';
+import { FromInboxSelector } from '../components/from-inbox-selector';
+import { RecipientDropRow } from '../components/recipient-drop-row';
+import type { EmailInbox } from '../context/compose-capabilities';
+import type { EmailRecipient, RecipientFieldId } from '../core/email-recipient';
+import { getRecipientDisplayName } from '../core/email-recipient';
+import type { ReplyType } from '../core/reply-type';
+import type { EmailFormRecipients } from '../primitives/email-form-state';
+import type { createReplyRecipientFields } from '../primitives/reply-recipient-fields';
+
+type ReplyEnvelopeProps = {
+ fields: ReturnType;
+ values: Accessor;
+ options: Accessor;
+ inboxes: Accessor;
+ activeInboxId: Accessor;
+ senderEmail: Accessor;
+ onSenderChange: (id: string) => void;
+ subject: Accessor;
+ onSubjectChange: (subject: string) => void;
+ showSubject: boolean;
+ mobile: Accessor;
+ portalScope: Accessor<'local' | undefined>;
+ replyType: Accessor;
+};
+
+/** Sender, recipients and subject, sharing field behavior across both layouts. */
+export function ReplyEnvelope(props: ReplyEnvelopeProps) {
+ const {
+ showExpandedRecipients,
+ setShowExpandedRecipients,
+ setToRef,
+ ccRef,
+ setCcRef,
+ bccRef,
+ setBccRef,
+ showCc,
+ setShowCc,
+ showBcc,
+ setShowBcc,
+ recipientDragState,
+ handleChipDragStart,
+ handleChipDragEnd,
+ handleRecipientDrop,
+ mobileDrawerCcBccOpen,
+ toggleMobileDrawerCcBcc,
+ } = props.fields;
+ const summary = () => {
+ const values = props.values();
+ const recipients = [...values.to, ...values.cc, ...values.bcc];
+ const first = recipients[0];
+ const action =
+ props.replyType() === 'forward' ? 'Forwarding' : 'Replying to';
+ if (!first) return action;
+ const suffix = recipients.length > 1 ? ` + ${recipients.length - 1}` : '';
+ return `${action} ${getRecipientDisplayName(first)}${suffix}`;
+ };
+ const RecipientInput = (field: {
+ field: RecipientFieldId;
+ mobile?: boolean;
+ }) => (
+
+ disabled={props.fields.disabled()}
+ openOnFocus={false}
+ class={
+ field.mobile
+ ? 'min-w-0 flex-1 bg-transparent rounded-none! [&_input]:ml-0! [&_input]:min-w-0! [&_input]:text-[17px] [&_input]:leading-6 [&_input]:text-ink [&_input]:placeholder:text-ink-placeholder'
+ : 'min-w-0 bg-transparent rounded-none! [&_input]:ml-0!'
+ }
+ inputRef={
+ field.field === 'to'
+ ? setToRef
+ : field.field === 'cc'
+ ? setCcRef
+ : setBccRef
+ }
+ options={props.options}
+ selfEmail={props.senderEmail()}
+ selectedOptions={props.values()[field.field]}
+ setSelectedOptions={(values) =>
+ props.fields.setRecipients(field.field, values)
+ }
+ triggerMode="input"
+ portalScope={field.mobile ? props.portalScope() : undefined}
+ hideBorder
+ noPadding
+ onChipDragStart={(option, event) =>
+ handleChipDragStart(field.field, option, event)
+ }
+ onChipDragEnd={handleChipDragEnd}
+ hideMenuOnEscape
+ />
+ );
+ return (
+
+
+
+ ();
+ let composeContainerRef: HTMLDivElement | undefined;
+ let bottomBarRef: HTMLDivElement | undefined;
+ const [editor, setEditor] = createSignal();
+ const state = createReplyComposer(
+ {
+ drafts: composeContext.drafts,
+ attachmentStorage: composeContext.attachmentStorage,
+ delivery: composeContext.delivery,
+ notices: composeContext.notices,
+ accounts: composeContext.accounts,
+ viewerEmail: composeContext.viewerEmail,
+ hasPaidAccess: composeContext.hasPaidAccess,
+ recordMention: composeContext.recordMention,
+ focusAfterReplyRequest: () => !composeContext.presentation.isTouch(),
+ session: props.session,
+ sourceEntityId: props.sourceEntityId,
+ replyingTo: props.replyingTo,
+ isEditingExisting: props.isEditingExisting,
+ draft: props.draft,
+ preloadedHtml: props.preloadedHtml,
+ formSeed: props.formSeed,
+ onEngaged: props.onEngaged,
+ sideEffectOnSend: props.sideEffectOnSend,
+ onMarkDone: props.onMarkDone,
+ setShowReply: props.setShowReply,
+ },
+ editor,
+ { container: () => composeContainerRef, footer: () => bottomBarRef },
+ getOrInitEmailFormContext
+ );
+ const {
+ form,
+ activeInboxId,
+ activeInboxEmail,
+ setIncludeSignature,
+ setScrollContainer,
+ composerExpanded,
+ setComposerExpanded,
+ quoteCollapsed,
+ setQuoteCollapsed,
+ savedDraftId,
+ handleEditorConnect,
+ isSending,
+ collectDraft,
+ scheduleDraftSave,
+ persistDraftOnSenderSwitch,
+ hasPaidAccess,
+ sendEmail,
+ deleteDraftAndReset,
+ handleAddAttachments,
+ handleRemoveAttachment,
+ handleSendTimeChange,
+ sendActionDisabled,
+ scheduleSendDisabled,
+ toggleQuotedText,
+ } = state;
+ const sendActionHidden = () =>
+ composeContext.presentation.isTouch() &&
+ !state.hasBodyText() &&
+ state.replyType() !== 'forward';
+ const signatureHtml = () =>
+ composeContext.presentation.signaturesEnabled()
+ ? state.signatureHtml()
+ : undefined;
+ const isMobileDrawer = () => props.mobileDrawer !== undefined;
+ const composePortalScope = () =>
+ isMobileDrawer() ? ('local' as const) : undefined;
+ const scrollAreaSignatureHtml = () =>
+ isMobileDrawer() ? signatureHtml() : undefined;
+ const footerSignatureHtml = () =>
+ isMobileDrawer() ? undefined : signatureHtml();
+ // File sharing and editor plugin wiring belong to this view. The controller only
+ // needs to know when editor content has changed and requires another save.
+ const editorConfig = buildConfig('markdown')
+ .namespace('email-base-input-markdown')
+ .withMentions({
+ onUserMention: state.handleUserMention,
+ onDocumentMention: (item) => {
+ composeContext.editorFiles.makePublic(item.id);
+ scheduleDraftSave();
+ },
+ })
+ .withEmojis()
+ .withLinks({ floatingMenu: true, autoLinkMatchMode: 'common-tlds' })
+ .withHistory({ timeGap: 400 })
+ .withMedia()
+ .withCode()
+ .withCheckboxToTask()
+ .withRestoreFocus()
+ .withSelectionData()
+ .withFloatingFormatMenu()
+ .use(registerToggleAppendedThread)
+ .onChange(state.onContentChange)
+ .withFilePaste({
+ onPasteFilesAndDirs: (files, directories) => {
+ composeContext.editorFiles.uploadEditorFiles({
+ editor: editor(),
+ sourceId: props.sourceEntityId,
+ files,
+ directories,
+ onUploaded: (ids) => {
+ ids.forEach(composeContext.editorFiles.makePublic);
+ scheduleDraftSave();
+ },
+ });
+ },
+ });
+ if (isIOS || isNativeMobilePlatform()) {
+ editorConfig.use(
+ iosCursorScrollPlugin({ scrollContainer: state.scrollContainer })
+ );
+ }
+ const markdownHandle = editorConfig.buildHandle();
+ setEditor(markdownHandle.lexical);
+ // Set up hotkey scope for the compose message component
+ const [attachComposeHotkeys, composeHotkeyScope] =
+ useHotkeyDOMScope('compose-message');
+ useTouchOutsideToDismissKeyboard(() => composeContainerRef);
+
+ onMount(() => {
+ if (composeContainerRef) {
+ attachComposeHotkeys(composeContainerRef);
+
+ registerHotkey({
+ hotkey: 'cmd+enter',
+ scopeId: composeHotkeyScope,
+ description: 'Send email',
+ keyDownHandler: () => {
+ if (form.sendTime()) return false;
+ sendEmail();
+ return true;
+ },
+ runWithInputFocused: true,
+ hotkeyToken: TOKENS.email.send,
+ displayPriority: 9,
+ });
+
+ registerHotkey({
+ hotkey: 'shift+cmd+enter',
+ scopeId: composeHotkeyScope,
+ description: 'Send and mark done',
+ keyDownHandler: () => {
+ if (form.sendTime()) return false;
+ sendEmail(true);
+ return true;
+ },
+ runWithInputFocused: true,
+ hotkeyToken: TOKENS.email.sendAndMarkDone,
+ displayPriority: 10,
+ });
+
+ registerHotkey({
+ hotkey: 'arrowup',
+ scopeId: composeHotkeyScope,
+ description: 'Select last message',
+ runWithInputFocused: true,
+ condition: () => {
+ const ed = editor();
+ if (!ed) return false;
+ const rootEl = ed.getRootElement();
+ if (!rootEl || !rootEl.contains(document.activeElement)) return false;
+ return ed.read(() => {
+ const text = $getRoot().getTextContent();
+ return text.trim().length === 0;
+ });
+ },
+ keyDownHandler: () => {
+ return ctx.exitToThread('last');
+ },
+ hotkeyToken: TOKENS.email.previousMessage,
+ });
+
+ registerHotkey({
+ hotkey: 'escape',
+ scopeId: composeHotkeyScope,
+ description: 'Close reply',
+ keyDownHandler: () => {
+ const draft = collectDraft();
+ const isEmpty = draft === null;
+
+ if (isEmpty) {
+ // Delete draft and close reply
+ deleteDraftAndReset();
+ } else {
+ // Move focus back to the message
+ ctx.exitToThread('selected');
+ }
+ return true;
+ },
+ // Let editable fields handle Escape before closing the reply.
+ runWithInputFocused: false,
+ hotkeyToken: TOKENS.email.cancelReply,
+ displayPriority: 8,
+ });
+ }
+ });
+
+ const AttachmentsRow = (rowProps?: { class?: string }) => (
+ 0}>
+
+ );
+
+ const AttachButton = (buttonProps?: {
+ variant?: 'ghost' | 'outline';
+ class?: string;
+ }) => (
+
+ );
+
+ return (
+ {
+ composeContainerRef = el;
+ }}
+ depth={2}
+ solid
+ >
+
+
+
+
+ {
+ form.setSubject(subject);
+ scheduleDraftSave();
+ }}
+ showSubject={!!props.isEditingExisting}
+ mobile={isMobileDrawer}
+ portalScope={composePortalScope}
+ replyType={state.replyType}
+ />
+
+ );
+}
diff --git a/apps/web/src/features/email-message/attachment-action-adapter.ts b/apps/web/src/features/email-message/attachment-action-adapter.ts
new file mode 100644
index 00000000000..8d5d3011bdc
--- /dev/null
+++ b/apps/web/src/features/email-message/attachment-action-adapter.ts
@@ -0,0 +1,55 @@
+import { useSplitLayout } from '@components/app/split-layout/layout';
+import { toast } from '@core/component/Toast/Toast';
+import { fileTypeToBlockName } from '@core/constant/allBlocks';
+import { Telemetry } from '@macro-inc/observability';
+import {
+ getEmailAttachmentDocument,
+ getEmailAttachmentMetadata,
+} from '@queries/email/integration';
+import { refetchSoupEntity } from '@queries/soup/cache';
+import { FileTypeMap } from '@service-storage/fileTypeMap';
+import type { FileType } from '@service-storage/generated/schemas/fileType';
+import type { EmailAttachment } from './core/email-message';
+export function createEmailAttachmentOpener() {
+ const { openWithSplit } = useSplitLayout();
+ const openAttachment = async (attachment: EmailAttachment) => {
+ const dbId = attachment.db_id;
+ if (!dbId) return;
+ const response = await getEmailAttachmentDocument(dbId);
+ if (response.isErr()) {
+ toast.failure('Failed to get attachment. Please try again.');
+ return Telemetry.error(
+ new Error(
+ 'Failed to get or create attachment document id: ' + response.error
+ )
+ );
+ }
+ const { document_id } = response.value;
+
+ const maybeDocumentMetadata = await getEmailAttachmentMetadata(document_id);
+ if (maybeDocumentMetadata.isErr()) {
+ toast.failure('Failed to get attachment. Please try again.');
+ return Telemetry.error(
+ new Error(
+ 'Failed to get or create attachment document metadata: ' +
+ maybeDocumentMetadata.error
+ )
+ );
+ }
+
+ refetchSoupEntity(document_id, 'document');
+
+ const fileType = Object.values(FileTypeMap).findLast(
+ (type) => type.mime === attachment.mime_type
+ )?.extension;
+ const blockName = fileType
+ ? fileTypeToBlockName(fileType as FileType)
+ : 'unknown';
+ openWithSplit(
+ { type: blockName, id: document_id },
+ { preferNewSplit: true }
+ );
+ };
+
+ return openAttachment;
+}
diff --git a/apps/web/src/features/email-message/components/attachment-pill.test.tsx b/apps/web/src/features/email-message/components/attachment-pill.test.tsx
new file mode 100644
index 00000000000..be62ca062ab
--- /dev/null
+++ b/apps/web/src/features/email-message/components/attachment-pill.test.tsx
@@ -0,0 +1,42 @@
+import { render } from '@solidjs/testing-library';
+import userEvent from '@testing-library/user-event';
+import { expect, it, vi } from 'vitest';
+import { EmailAttachmentPill } from './attachment-pill';
+
+// EntityIcon imports the block registry, which initializes app services. This
+// covers the pill's keyboard behavior, not isolation of the shared icon.
+vi.mock('@core/component/EntityIcon', () => ({ EntityIcon: () => null }));
+
+it('opens attachments with Enter and Space, while removal stays a separate keyboard action', async () => {
+ const open = vi.fn();
+ const remove = vi.fn();
+ const user = userEvent.setup();
+ const view = render(() => (
+ <>
+ (
Object.values(FileTypeMap).map((value) => [value.mime, value.extension])
@@ -12,7 +13,7 @@ type EmailAttachmentPillProps = {
attachment: { fileName: string; mimeType?: string };
removable?: boolean;
onRemove?: () => void;
- onClick?: (fileType?: FileType) => void;
+ onClick?: () => void;
};
export function EmailAttachmentPill(props: EmailAttachmentPillProps) {
@@ -30,18 +31,40 @@ export function EmailAttachmentPill(props: EmailAttachmentPillProps) {
classList={{
'pl-2': props.removable,
}}
- onClick={() => props.onClick?.(fileType())}
>
-
-
- {
+ if (e.key === 'Enter' || e.key === ' ') e.stopPropagation();
+ }}
+ >
+
+
+
+ {props.attachment.fileName}
+
+
-
);
diff --git a/apps/web/src/features/block-email/component/CollapsedMessage.tsx b/apps/web/src/features/email-message/components/collapsed-message.tsx
similarity index 68%
rename from apps/web/src/features/block-email/component/CollapsedMessage.tsx
rename to apps/web/src/features/email-message/components/collapsed-message.tsx
index 9a4b8bb9333..f2cfa8da07b 100644
--- a/apps/web/src/features/block-email/component/CollapsedMessage.tsx
+++ b/apps/web/src/features/email-message/components/collapsed-message.tsx
@@ -1,31 +1,23 @@
-import { UserIcon, type UserIconProps } from '@core/component/UserIcon';
-import { useEmail } from '@core/context/user';
-import type { ApiMessage } from '@service-email/generated/schemas';
+import type { EmailMessage } from '@app/features/email-message/core/email-message';
import { Tooltip } from '@ui';
-import { createMemo, Show } from 'solid-js';
-import { getSenderDisplayName, getSenderMacroId } from '../util/emailUser';
-import { formatFullDate, formatShortDate } from '../util/formatEmailDate';
-import { EmailUserTooltip } from './EmailUserTooltip';
+import { createMemo, type JSX, Show } from 'solid-js';
+import { getSenderDisplayName } from '../core/email-user';
+import { formatFullDate, formatShortDate } from '../core/format-email-date';
+import { EmailUserTooltip } from './email-user-tooltip';
interface CollapsedMessageProps {
- message: ApiMessage;
+ message: EmailMessage;
+ avatar?: JSX.Element;
+ currentUserEmail?: string;
}
/** Collapsed thread row: sender, snippet, date. The chrome is MessageCard's. */
export function CollapsedMessage(props: CollapsedMessageProps) {
- const currentUserEmail = useEmail();
+ const currentUserEmail = () => props.currentUserEmail;
const senderDisplay = createMemo(() =>
getSenderDisplayName(props.message, currentUserEmail())
);
- const senderMacroId = createMemo(() => getSenderMacroId(props.message));
- const senderIconProps = createMemo(() => {
- const senderId = senderMacroId();
- const photoUrl = props.message.from?.photo_url ?? undefined;
- if (senderId) return { id: senderId, photoUrl };
- return { email: props.message.from?.email ?? '', photoUrl };
- });
-
const snippet = createMemo(() => {
if (props.message.body_text) {
return props.message.body_text.replace(/\s+/g, ' ').trim();
@@ -45,12 +37,7 @@ export function CollapsedMessage(props: CollapsedMessageProps) {
diff --git a/apps/web/src/features/block-email/component/EmailMessageTopBar.tsx b/apps/web/src/features/email-message/components/email-message-top-bar.tsx
similarity index 89%
rename from apps/web/src/features/block-email/component/EmailMessageTopBar.tsx
rename to apps/web/src/features/email-message/components/email-message-top-bar.tsx
index 95e698bdfcd..93b7111b5a4 100644
--- a/apps/web/src/features/block-email/component/EmailMessageTopBar.tsx
+++ b/apps/web/src/features/email-message/components/email-message-top-bar.tsx
@@ -1,7 +1,5 @@
-import { useEmail } from '@core/context/user';
-import { isTouchDevice } from '@core/mobile/isTouchDevice';
+import type { EmailMessage } from '@app/features/email-message/core/email-message';
import CaretRight from '@phosphor/caret-right.svg';
-import type { ApiMessage } from '@service-email/generated/schemas';
import { Button, cn, Tooltip } from '@ui';
import {
type Accessor,
@@ -15,22 +13,23 @@ import {
import {
getRecipientDisplayName,
getSenderDisplayName,
-} from '../util/emailUser';
-import { formatFullDate, formatShortDate } from '../util/formatEmailDate';
+} from '../core/email-user';
+import { formatFullDate, formatShortDate } from '../core/format-email-date';
-import { EmailUserTooltip } from './EmailUserTooltip';
-import { type EmailMessageAction, MessageActions } from './MessageActions';
+import { EmailUserTooltip } from './email-user-tooltip';
+import { type EmailMessageAction, MessageActions } from './message-actions';
interface EmailMessageTopBarProps {
- message: ApiMessage;
+ message: EmailMessage;
focused: boolean;
+ viewerEmail?: string;
+ isTouch: boolean;
setExpandedBodyId: (id: string, expanded: boolean) => void;
isBodyExpanded: Accessor;
expandedHeader: Accessor;
setExpandedHeader: Setter;
setFocusedMessageId: (messageId: string | undefined) => void;
- setShowReply: Setter;
- isLastMessage?: boolean;
+ onReply?: (action: EmailMessageAction) => void;
hiddenActions?: EmailMessageAction[];
avatar?: JSX.Element;
}
@@ -84,7 +83,7 @@ function DetailRow(props: {
);
}
-function ExpandedDetails(props: { message: ApiMessage }): JSX.Element {
+function ExpandedDetails(props: { message: EmailMessage }): JSX.Element {
const fromRecipients = createMemo(() =>
props.message.from ? [props.message.from] : []
);
@@ -135,10 +134,9 @@ function HeaderTopRow(props: {
showHeaderToggle: boolean;
isExpanded: boolean;
onToggle: () => void;
- message: ApiMessage;
+ message: EmailMessage;
focused: boolean;
- setShowReply: Setter;
- isLastMessage?: boolean;
+ onReply?: (action: EmailMessageAction) => void;
hiddenActions?: EmailMessageAction[];
currentUserEmail?: string;
}): JSX.Element {
@@ -196,8 +194,7 @@ function HeaderTopRow(props: {
@@ -217,14 +214,14 @@ function HeaderTopRow(props: {
export function EmailMessageTopBar(props: EmailMessageTopBarProps) {
const [isHovering, setIsHovering] = createSignal(false);
- const userEmail = useEmail();
+ const userEmail = () => props.viewerEmail;
const senderName = () => getSenderDisplayName(props.message, userEmail());
const showHeaderToggle = () =>
isHovering() ||
props.expandedHeader() ||
- (isTouchDevice() && props.isBodyExpanded());
+ (props.isTouch && props.isBodyExpanded());
const handleHeaderClick = (e: MouseEvent) => {
const id = props.message.db_id;
@@ -258,8 +255,7 @@ export function EmailMessageTopBar(props: EmailMessageTopBarProps) {
onToggle={() => props.setExpandedHeader(!props.expandedHeader())}
message={props.message}
focused={props.focused}
- setShowReply={props.setShowReply}
- isLastMessage={props.isLastMessage}
+ onReply={props.onReply}
hiddenActions={props.hiddenActions}
currentUserEmail={userEmail()}
/>
diff --git a/apps/web/src/features/block-email/component/EmailUserTooltip.tsx b/apps/web/src/features/email-message/components/email-user-tooltip.tsx
similarity index 95%
rename from apps/web/src/features/block-email/component/EmailUserTooltip.tsx
rename to apps/web/src/features/email-message/components/email-user-tooltip.tsx
index 7f741dab85e..04d3d278d42 100644
--- a/apps/web/src/features/block-email/component/EmailUserTooltip.tsx
+++ b/apps/web/src/features/email-message/components/email-user-tooltip.tsx
@@ -1,6 +1,6 @@
import { HoverCard } from '@core/component/HoverCard';
import { UserTooltip } from '@core/component/UserTooltip';
-import { emailToMacroId } from '@core/user';
+import { emailToMacroId } from '@core/user/macroId';
import { createSignal, type JSX } from 'solid-js';
interface Recipient {
diff --git a/apps/web/src/features/block-email/component/MessageActions.tsx b/apps/web/src/features/email-message/components/message-actions.tsx
similarity index 58%
rename from apps/web/src/features/block-email/component/MessageActions.tsx
rename to apps/web/src/features/email-message/components/message-actions.tsx
index 173812fe9f6..740d34eb086 100644
--- a/apps/web/src/features/block-email/component/MessageActions.tsx
+++ b/apps/web/src/features/email-message/components/message-actions.tsx
@@ -1,46 +1,26 @@
-import type { ReplyType } from '@block-email/util/replyType';
+import type { EmailMessage } from '@app/features/email-message/core/email-message';
import ArrowBendUpLeft from '@phosphor/arrow-bend-up-left.svg';
import ArrowBendUpRight from '@phosphor/arrow-bend-up-right.svg';
-import type { ApiMessage } from '@service-email/generated/schemas';
-import { createCallback } from '@solid-primitives/rootless';
import { Button } from '@ui';
-import { type Setter, Show } from 'solid-js';
-import { useEmailContext } from './EmailContext';
-import { openEmailReplyComposerForMessage } from './emailReplyActions';
+import { Show } from 'solid-js';
const EMAIL_MESSAGE_ACTIONS = ['reply', 'reply-all', 'forward'] as const;
export type EmailMessageAction = (typeof EMAIL_MESSAGE_ACTIONS)[number];
export function MessageActions(props: {
- message: ApiMessage;
+ message: EmailMessage;
showActions: boolean;
- setShowReply: Setter;
- isLastMessage?: boolean;
+ onReply?: (action: EmailMessageAction) => void;
hiddenActions?: EmailMessageAction[];
}) {
- const ctx = useEmailContext();
-
- const canShowActions = () => {
- if (!props.showActions) return false;
-
- const allActionsHidden = props.hiddenActions?.every((a) =>
- EMAIL_MESSAGE_ACTIONS.includes(a)
+ const canShowActions = () =>
+ props.showActions &&
+ !!props.onReply &&
+ !EMAIL_MESSAGE_ACTIONS.every((action) =>
+ props.hiddenActions?.includes(action)
);
-
- return !allActionsHidden;
- };
-
- const onChangeReplyType = (type: ReplyType) => {
- return createCallback(() => {
- openEmailReplyComposerForMessage({
- ctx,
- message: props.message,
- replyType: type,
- isLastMessage: props.isLastMessage,
- setShowReply: props.setShowReply,
- });
- });
- };
+ const onChangeReplyType = (action: EmailMessageAction) => () =>
+ props.onReply?.(action);
return (
` separators, matching how Gmail structures composed mail. - * Email clients apply their own margins to `
`, so relying on them renders
- * differently per client. The editor shows a paragraph break as a blank line,
- * so non-empty paragraphs are joined by two `
`s; empty paragraphs already
- * export their own `
` and need no extra separator.
- */
-export function flattenConsecutiveParagraphs(container: Element) {
- const paragraphs = container.querySelectorAll('p');
- const groups = [];
- let currentGroup: Element[] = [];
-
- for (let i = 0; i < paragraphs.length; i++) {
- if (i === 0) {
- currentGroup.push(paragraphs[i]);
- continue;
- }
-
- // Check if this paragraph immediately follows the previous one
- const prev = paragraphs[i - 1];
- if (prev.nextElementSibling === paragraphs[i]) {
- currentGroup.push(paragraphs[i]);
- } else {
- // Start a new group
- groups.push(currentGroup);
- currentGroup = [paragraphs[i]];
- }
- }
-
- // Don't forget the last group
- if (currentGroup.length > 0) {
- groups.push(currentGroup);
- }
-
- // Combine each group and replace in the DOM
- for (let i = 0; i < groups.length; i++) {
- const group = groups[i];
- const div = document.createElement('div');
-
- for (let j = 0; j < group.length; j++) {
- const p = group[j];
-
- const isEmpty =
- !p.textContent?.trim() &&
- !p.querySelector('img, video, iframe, canvas');
-
- if (p.childNodes.length) {
- div.append(...p.childNodes);
- }
-
- if (j < group.length - 1 && !isEmpty) {
- // Paragraph break = one blank line for the recipient
- div.appendChild(document.createElement('br'));
- div.appendChild(document.createElement('br'));
- }
- }
-
- // Replace the first paragraph with the combined div
- group[0]?.parentNode?.replaceChild(div, group[0]);
-
- // Remove the rest of the paragraphs in this group
- for (let j = 1; j < group.length; j++) {
- group[j].remove();
- }
- }
-}
diff --git a/apps/web/src/features/block-email/util/plainTextToHtml.test.ts b/apps/web/src/features/block-email/util/plainTextToHtml.test.ts
deleted file mode 100644
index 7741b028f07..00000000000
--- a/apps/web/src/features/block-email/util/plainTextToHtml.test.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { plainTextToHtml } from './plainTextToHtml';
-
-const span = (text: string) =>
- `${text}`;
-
-describe('plainTextToHtml', () => {
- it('returns a br for empty string', () => {
- expect(plainTextToHtml('')).toBe('
${span('hello')}
`);
- });
-
- it('splits newlines with br separators', () => {
- expect(plainTextToHtml('line1\nline2')).toBe(
- `${span('line1')}
${span('line2')}
`
- );
- });
-
- it('handles consecutive newlines as double br', () => {
- expect(plainTextToHtml('above\n\nbelow')).toBe(
- `${span('line2')}
${span('above')}
${span('below')}
`
- );
- });
-
- it('handles only newlines', () => {
- // '\n\n' splits into ['', '', ''] → ${span('below')}
joined by
= 5
s - expect(plainTextToHtml('\n\n')).toBe('
${span('a & b')}
`);
- });
-
- it('escapes angle brackets', () => {
- expect(plainTextToHtml('')).toBe(
- `${span('<script>alert("xss")</script>')}
`
- );
- });
- });
-
- describe('no markdown formatting applied', () => {
- it('preserves asterisks literally', () => {
- expect(plainTextToHtml('**Key Points:**')).toBe(
- `${span('**Key Points:**')}
`
- );
- });
-
- it('preserves underscores literally', () => {
- expect(plainTextToHtml('file_name_with_underscores')).toBe(
- `${span('file_name_with_underscores')}
`
- );
- });
-
- it('preserves scope names with dots and underscores', () => {
- expect(plainTextToHtml('gmail.settings_basic')).toBe(
- `${span('gmail.settings_basic')}
`
- );
- });
-
- it('preserves math expressions with asterisks', () => {
- expect(plainTextToHtml('3 * 5 = 15')).toBe(
- `${span('3 * 5 = 15')}
`
- );
- });
- });
-
- it('handles multiline content matching editor format', () => {
- const input = 'Hi,\n\nSome text here';
- expect(plainTextToHtml(input)).toBe(
- `${span('Hi,')}
${span('Some text here')}
`
- );
- });
-});
diff --git a/apps/web/src/features/block-email/util/prepareEmailBody.test.ts b/apps/web/src/features/block-email/util/prepareEmailBody.test.ts
deleted file mode 100644
index 3a46f9d8e37..00000000000
--- a/apps/web/src/features/block-email/util/prepareEmailBody.test.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-// @vitest-environment jsdom
-import type { ApiMessage } from '@service-email/generated/schemas';
-import { describe, expect, it } from 'vitest';
-import { prepareEmailBodyFromHtml } from './prepareEmailBody';
-
-function decodeBodyHtml(encoded: string) {
- const base64 = encoded.replace(/-/g, '+').replace(/_/g, '/');
- return decodeURIComponent(escape(atob(base64)));
-}
-
-const replyingTo = {
- from: { name: 'Ada Lovelace', email: 'ada@example.com' },
- to: [],
- cc: [],
- bcc: [],
- subject: 'Numbers',
- body_text: 'original message text',
- internal_date_ts: '2026-08-01T12:00:00Z',
- attachments: [],
-} as unknown as ApiMessage;
-
-describe('prepareEmailBodyFromHtml', () => {
- it('does not add a quote block without appendReply (undo-send restore)', () => {
- const prepared = prepareEmailBodyFromHtml('${span('Some text here')}
hi there
'); - const decoded = decodeBodyHtml(prepared.bodyHtml); - expect(decoded).toContain('hi there'); - expect(decoded).not.toContain('macro_quote'); - }); - - it('appends the replied-to message when appendReply is provided', () => { - const prepared = prepareEmailBodyFromHtml('hi there
', { - replyType: 'reply', - replyingTo, - }); - const decoded = decodeBodyHtml(prepared.bodyHtml); - const body = new DOMParser().parseFromString(decoded, 'text/html').body; - const quotes = body.querySelectorAll('.macro_quote'); - expect(quotes).toHaveLength(1); - expect(quotes[0].textContent).toContain('original message text'); - expect(quotes[0].textContent).toContain('wrote:'); - }); - - it('does not double-append when the quote is already in the body', () => { - const prepared = prepareEmailBodyFromHtml( - 'hi there
already quoted
',
- { replyType: 'reply', replyingTo }
- );
- const decoded = decodeBodyHtml(prepared.bodyHtml);
- const body = new DOMParser().parseFromString(decoded, 'text/html').body;
- const quotes = body.querySelectorAll('.macro_quote');
- expect(quotes).toHaveLength(1);
- expect(quotes[0].textContent).toContain('already quoted');
- });
-});
diff --git a/apps/web/src/features/block-email/util/replyType.ts b/apps/web/src/features/block-email/util/replyType.ts
deleted file mode 100644
index 606b25951e5..00000000000
--- a/apps/web/src/features/block-email/util/replyType.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { ApiMessage } from '@service-email/generated/schemas';
-
-export type ReplyType = 'reply' | 'reply-all' | 'forward';
-
-export const getReplyTypeFromDraft: (
- draft: ApiMessage | undefined
-) => ReplyType | undefined = (draft: ApiMessage | undefined) => {
- if (!draft) {
- return undefined;
- }
-
- if (draft.subject?.toLowerCase().startsWith('fwd: ')) {
- return 'forward';
- } else if (draft.to.length + draft.cc.length > 1) {
- return 'reply-all';
- } else {
- return 'reply';
- }
-};
diff --git a/apps/web/src/features/command/Launcher.tsx b/apps/web/src/features/command/Launcher.tsx
index 9c773bb4371..1f25c28f653 100644
--- a/apps/web/src/features/command/Launcher.tsx
+++ b/apps/web/src/features/command/Launcher.tsx
@@ -1,9 +1,9 @@
import { startPendingSession } from '@app/features/block-agent/context/pending-session';
import { AGENT_INPUT_TEXT_AREA_ID } from '@app/features/block-agent/ui/AgentInput';
+import { EMAIL_COMPOSE_TO_INPUT_ID } from '@app/features/email-compose/core/constants';
import { openStandaloneReminderComposer } from '@app/features/reminders/reminder-composer';
import { useFeatureFlag } from '@app/lib/analytics/posthog';
import { setAutomationComposerOpen } from '@block-automation/component';
-import { EMAIL_COMPOSE_TO_INPUT_ID } from '@block-email/constants';
import {
endTrackedDocumentSpan,
registerDocumentSpan,
diff --git a/apps/web/src/features/block-email/component/date-selector.tsx b/apps/web/src/features/email-compose/components/date-selector.tsx
similarity index 100%
rename from apps/web/src/features/block-email/component/date-selector.tsx
rename to apps/web/src/features/email-compose/components/date-selector.tsx
diff --git a/apps/web/src/features/block-email/component/email-date-selector.tsx b/apps/web/src/features/email-compose/components/email-date-selector.tsx
similarity index 94%
rename from apps/web/src/features/block-email/component/email-date-selector.tsx
rename to apps/web/src/features/email-compose/components/email-date-selector.tsx
index 22055c3c6b4..3b47e728e87 100644
--- a/apps/web/src/features/block-email/component/email-date-selector.tsx
+++ b/apps/web/src/features/email-compose/components/email-date-selector.tsx
@@ -1,14 +1,14 @@
-import { DateSelector } from '@block-email/component/date-selector';
-import { isMobile } from '@core/mobile/isMobile';
import ClockIcon from '@phosphor/clock.svg';
import IconX from '@phosphor/x.svg';
import { Button, Tooltip } from '@ui';
import { addYears } from 'date-fns/addYears';
import { format } from 'date-fns/format';
import { type JSX, Show, type VoidComponent } from 'solid-js';
+import { DateSelector } from './date-selector';
interface EmailDateSelectorProps {
sendTime?: Date | null;
+ mobile: boolean;
onSendTimeChange?: (date: Date | null) => void;
/** Only show the clock icon, no date text or clear button */
compact?: boolean;
@@ -24,7 +24,7 @@ interface EmailDateSelectorProps {
export const EmailDateSelector: VoidComponentone
two
'
);
});
+
+ it('preserves paragraph attributes when joining matching paragraphs', () => {
+ expect(
+ flatten(
+ 'two
one
two
' + ) + ).toBe( + 'one
two
'
+ );
+ expect(flatten('two
only
')).toBe( + 'only
'
+ );
+ });
+
+ it('keeps different paragraph alignment and blank-line spacing separate', () => {
+ expect(
+ flatten(
+ 'one
two
three
' + ) + ).toBe( + 'one
two
three
'
+ );
+ });
});
diff --git a/apps/web/src/features/email-compose/primitives/flatten-consecutive-paragraphs.ts b/apps/web/src/features/email-compose/primitives/flatten-consecutive-paragraphs.ts
new file mode 100644
index 00000000000..edddedd4de0
--- /dev/null
+++ b/apps/web/src/features/email-compose/primitives/flatten-consecutive-paragraphs.ts
@@ -0,0 +1,35 @@
+/**
+ * Flattens runs of consecutive `` siblings with matching attributes into a `
` with
+ * explicit `
` separators, matching how Gmail structures composed mail. + * Email clients apply their own margins to `;
+ footer: Accessor;
+ scrollContainer: Accessor;
+ toInput: Accessor;
+ expandRecipients: () => void;
+}) {
+ let bounceEditorFocusGrabs = false;
+ const timers = new Set>();
+ const frames = new Set();
+ onCleanup(() => {
+ for (const timer of timers) clearTimeout(timer);
+ for (const frame of frames) cancelAnimationFrame(frame);
+ });
+
+ function afterQuoteLayout(callback: () => void) {
+ const timer = setTimeout(() => {
+ timers.delete(timer);
+ callback();
+ }, 100);
+ timers.add(timer);
+ }
+
+ onMount(() => {
+ const disarm = () => {
+ bounceEditorFocusGrabs = false;
+ };
+ makeEventListener(document, 'pointerdown', disarm, true);
+ makeEventListener(
+ document,
+ 'keydown',
+ (event) => {
+ if (event.key === 'Tab' || event.key === 'Escape') disarm();
+ },
+ true
+ );
+ makeEventListener(
+ document,
+ 'focusin',
+ (event) => {
+ if (!bounceEditorFocusGrabs) return;
+ const target = event.target as Node;
+ if (!options.container()?.contains(target)) {
+ disarm();
+ } else if (options.scrollContainer()?.contains(target)) {
+ options.toInput()?.focus();
+ }
+ },
+ true
+ );
+ });
+
+ return {
+ forward() {
+ options.expandRecipients();
+ afterQuoteLayout(() => {
+ if (options.toInput()) {
+ bounceEditorFocusGrabs = true;
+ options.toInput()?.focus();
+ }
+ options.footer()?.scrollIntoView({ block: 'nearest' });
+ });
+ },
+ reply() {
+ afterQuoteLayout(() => {
+ options.editor()?.focus();
+ options.footer()?.scrollIntoView({ block: 'nearest' });
+ });
+ },
+ editor(onFocused: () => void) {
+ const editor = options.editor();
+ if (!editor) return;
+ const frame = requestAnimationFrame(() => {
+ frames.delete(frame);
+ editor.focus();
+ onFocused();
+ });
+ frames.add(frame);
+ },
+ };
+}
diff --git a/apps/web/src/features/email-compose/primitives/reply-composer.ts b/apps/web/src/features/email-compose/primitives/reply-composer.ts
new file mode 100644
index 00000000000..b467114eb0f
--- /dev/null
+++ b/apps/web/src/features/email-compose/primitives/reply-composer.ts
@@ -0,0 +1,979 @@
+import {
+ MACRO_EMAIL_SIGNATURE,
+ MAX_ATTACHMENTS_BYTES_SIZE,
+} from '@app/features/email-compose/core/constants';
+import type { EmailMessage } from '@app/features/email-message/core/email-message';
+import type { UserMentionRecord } from '@core/component/LexicalMarkdown/utils/mentionsUtils';
+import { setEditorStateFromHtml } from '@core/component/LexicalMarkdown/utils/setEditorStateFromHtml';
+import { plural } from '@core/util/string';
+import { $generateHtmlFromNodes } from '@lexical/html';
+import {
+ $appendWatermarkNodeToLast,
+ $removeAllWatermarkNodes,
+} from '@macro-inc/lexical-core';
+import type { LexicalEditor } from 'lexical';
+import { $addUpdateTag, $getRoot } from 'lexical';
+import {
+ type Accessor,
+ createEffect,
+ createMemo,
+ createSignal,
+ on,
+ onCleanup,
+ onMount,
+ type Setter,
+ untrack,
+} from 'solid-js';
+import type {
+ EmailAttachmentStorage,
+ EmailComposeAccounts,
+ EmailComposeFeedback,
+ EmailDelivery,
+ EmailDraftStorage,
+ EmailUndoHandle,
+} from '../context/compose-capabilities';
+import type { EmailReplySession } from '../context/email-form-inputs';
+import type { EmailDraft } from '../core/email-draft';
+import {
+ convertContactInfoToEmailRecipient,
+ convertEmailRecipientToContactInfo,
+} from '../core/recipient-conversion';
+import { createAttachmentPersistence } from './attachment-persistence';
+import { createDraftAutosave } from './draft-autosave';
+import type { DraftFormAttachment } from './email-form-state';
+import type { EmailFormContextValue, FormAccessKey } from './email-form-types';
+import { createEmailSendSchedule } from './email-send-schedule';
+import { addUserMentionToCc } from './mention-to-cc';
+import {
+ clearEmailBody,
+ hasDraftContent,
+ prepareEmailBody,
+ prepareMacroBody,
+ TOGGLE_APPEND_EMAIL_THREAD_COMMAND,
+} from './prepare-email-body';
+import { createReplyComposerFocus } from './reply-composer-focus';
+import { createReplyRecipientFields } from './reply-recipient-fields';
+import { endUndoSend } from './undo-send-claim';
+import { createEmailUndoStore } from './undo-store';
+
+type UndoReplySnapshot = {
+ threadId: string;
+ inboxId: string | undefined;
+ draftId: string;
+ bodyHtml: string;
+ attachments: DraftFormAttachment[];
+ includeSignature: boolean;
+ /** Whether the quoted thread was appended in the editor at send time.
+ * Restored so the quoted-text toggle matches the restored body — otherwise
+ * it reads as "not appended" and appends a duplicate quote block. */
+ replyAppended: boolean;
+ /** Draft payload for restoring the server-side draft on undo. The
+ * unscheduled message keeps the sent body (appended reply chain, injected
+ * signature), so undo re-saves the draft with the pre-send content —
+ * bodyHtml above, prepared at undo time, fills body_html. */
+ draftRestore: EmailDraft;
+};
+const replyUndo = createEmailUndoStore();
+
+export type ReplyComposerOptions = {
+ drafts: EmailDraftStorage;
+ attachmentStorage: EmailAttachmentStorage;
+ delivery: EmailDelivery;
+ notices: EmailComposeFeedback;
+ accounts: EmailComposeAccounts;
+ viewerEmail: Accessor;
+ hasPaidAccess: Accessor;
+ recordMention(sourceId: string, targetId: string): void;
+ focusAfterReplyRequest: Accessor;
+ session: EmailReplySession;
+ sourceEntityId: string;
+ replyingTo: Accessor;
+ isEditingExisting?: boolean;
+ draft?: EmailMessage;
+ preloadedHtml?: string;
+ /** Seed identity of the draft this composer mounted from — becomes part of
+ * the form-state cache key so a remount on a newer draft version gets a
+ * freshly seeded form. See ThreadReplyInput's seed key. */
+ formSeed?: string;
+ /** Reports the composer gaining local state worth keeping — a first edit
+ * or save (every modification funnels through scheduleDraftSave) or an
+ * undo-send restore. The parent latches the seed key on it so the input
+ * stops remounting on later draft versions. */
+ onEngaged?: () => void;
+ sideEffectOnSend?: (newMessageId: string | null) => void | Promise;
+ onMarkDone?: (opts?: {
+ silent?: boolean;
+ onUndoHandle?: (handle: EmailUndoHandle) => void;
+ nextEntityId?: string;
+ }) => void;
+ setShowReply?: Setter;
+};
+
+export function createReplyComposer(
+ props: ReplyComposerOptions,
+ editor: Accessor,
+ dom: {
+ container: Accessor;
+ footer: Accessor;
+ },
+ forms: (key?: FormAccessKey) => EmailFormContextValue
+) {
+ const ctx = props.session;
+ // Each keyed composer owns a target and draft version. Parent props can already
+ // point at the next target when Solid disposes this editor and flushes its save.
+ const replyTarget = props.replyingTo();
+ const draftSeed = props.draft;
+ const initialThread = ctx.thread();
+ const thread = () => {
+ const current = ctx.thread();
+ return current?.db_id === initialThread?.db_id ? current : initialThread;
+ };
+ const form = forms(
+ replyTarget?.db_id
+ ? {
+ type: 'replying_to',
+ messageId: replyTarget.db_id,
+ seed: props.formSeed,
+ }
+ : draftSeed?.db_id
+ ? {
+ type: 'draft',
+ messageId: draftSeed.db_id,
+ seed: props.formSeed,
+ }
+ : undefined
+ );
+ const sourceEntityId = props.sourceEntityId;
+ const undoKey = `${sourceEntityId}:${replyTarget?.db_id ?? draftSeed?.replying_to_id ?? draftSeed?.db_id ?? 'new'}`;
+ const userEmail = props.viewerEmail;
+
+ const primaryInboxId = props.accounts.primaryId;
+ // Capture this domain inbox ID for each asynchronous operation.
+ const activeInboxId = () =>
+ form.selectedInboxId() ??
+ thread()?.link_id ??
+ draftSeed?.link_id ??
+ primaryInboxId() ??
+ props.accounts.inboxes()[0]?.id;
+ // The address of the inbox this input sends from, for the "from" display.
+ const activeInboxEmail = () =>
+ props.accounts.inboxes().find((l) => l.id === activeInboxId())
+ ?.email_address ?? userEmail();
+
+ // The full Link object for the sending inbox (for its saved signature and the
+ // "add to replies & forwards" preference).
+ const sendingInbox = createMemo(() =>
+ props.accounts.inboxes().find((l) => l.id === activeInboxId())
+ );
+ const signature = () => sendingInbox()?.settings.signature ?? undefined;
+ // Whether this reply includes the signature. Defaults on, reset per reply,
+ // and dismissable via the preview ✕.
+ const [includeSignature, setIncludeSignature] = createSignal(true);
+ // Signature HTML for the preview (and whether to show it): only for
+ // replies/forwards, when the inbox's "add to replies & forwards" setting is on
+ // and the user hasn't dismissed it. The backend does the actual injection on
+ // send — this just mirrors when that will happen.
+ const replySignatureHtml = (): string | undefined =>
+ replyTarget &&
+ includeSignature() &&
+ sendingInbox()?.settings.signature_on_replies_forwards
+ ? signature()
+ : undefined;
+
+ const [bodyMacro, setBodyMacro] = createSignal('');
+ const [scrollContainer, setScrollContainer] = createSignal();
+ // Gmail-style sizing: the composer opens compact and grows to the full cap
+ // once the user scrolls the content
+ const [composerExpanded, setComposerExpanded] = createSignal(false);
+ // Appended quoted thread starts hidden behind a "⋯" pill (desktop). A
+ // draft reloaded with the quote already appended opens expanded instead —
+ // that's how the composer looked when the draft was saved.
+ const [quoteCollapsed, setQuoteCollapsed] = createSignal(
+ !form.replyAppended()
+ );
+ const recipients = createReplyRecipientFields({
+ values: form.recipients,
+ setValues: form.setRecipients,
+ onChange: scheduleDraftSave,
+ container: dom.container,
+ disabled: () => submitting() || pendingDeletion() || scheduling(),
+ });
+ const focus = createReplyComposerFocus({
+ editor,
+ container: dom.container,
+ footer: dom.footer,
+ scrollContainer,
+ toInput: recipients.toRef,
+ expandRecipients: () => recipients.setShowExpandedRecipients(true),
+ });
+ // A pending undo-send restore that belongs to this thread (inline reply
+ // remount case). It carries a just-undone send. Consumed below.
+ const restoredSnapshot = replyUndo.takePending(undoKey);
+
+ // Switching inboxes can move a draft out of the displayed thread. Keep its
+ // persisted identity together for subsequent saves, discard, schedule and undo.
+ const [savedDraft, setSavedDraft] = createSignal<
+ | {
+ id: string;
+ threadId: string | undefined;
+ }
+ | undefined
+ >(
+ restoredSnapshot
+ ? { id: restoredSnapshot.draftId, threadId: restoredSnapshot.threadId }
+ : draftSeed?.db_id
+ ? { id: draftSeed.db_id, threadId: draftSeed.thread_db_id }
+ : undefined
+ );
+ const savedDraftId = () => savedDraft()?.id;
+ const savedDraftThreadId = () => savedDraft()?.threadId;
+
+ // Consume the undo-send snapshot so a later composer mount doesn't restore
+ // it again. Use bodyHtml as initialHtml for the editor, restore attachments
+ // on mount.
+ const restoreEnvelope = (snapshot: UndoReplySnapshot) => {
+ form.setSelectedInbox(snapshot.inboxId);
+ form.setSubject(snapshot.draftRestore.subject);
+ for (const field of ['to', 'cc', 'bcc'] as const) {
+ form.setRecipients(
+ field,
+ (snapshot.draftRestore[field] ?? []).map(
+ convertContactInfoToEmailRecipient
+ )
+ );
+ }
+ };
+ if (restoredSnapshot) {
+ restoreEnvelope(restoredSnapshot);
+ onMount(() => {
+ // Restored content is local state worth keeping — latch the seed.
+ props.onEngaged?.();
+ for (const attachment of restoredSnapshot.attachments) {
+ form.attachments.add(attachment);
+ }
+ setIncludeSignature(restoredSnapshot.includeSignature);
+ form.setReplyAppended(restoredSnapshot.replyAppended);
+ // Reopen with the quote visible, as it was when the send was undone.
+ if (restoredSnapshot.replyAppended) setQuoteCollapsed(false);
+ });
+ }
+
+ // Register a callback so stale undoSend closures from a previous mount can
+ // restore state into this (the live) component instance.
+ const restoreMountedReply = (snapshot: UndoReplySnapshot) => {
+ const draftId = snapshot.draftId;
+ props.onEngaged?.();
+ setSavedDraft({ id: draftId, threadId: snapshot.threadId });
+ restoreEnvelope(snapshot);
+ const currentEditor = editor();
+ if (currentEditor && snapshot.bodyHtml) {
+ setEditorStateFromHtml(currentEditor, snapshot.bodyHtml);
+ }
+ for (const attachment of snapshot.attachments) {
+ form.attachments.add(attachment);
+ }
+ setIncludeSignature(snapshot.includeSignature);
+ form.setReplyAppended(snapshot.replyAppended);
+ // Reopen with the quote visible, as it was when the send was undone.
+ if (snapshot.replyAppended) setQuoteCollapsed(false);
+ };
+ let mounted = true;
+ const unregisterUndo = replyUndo.register(undoKey, restoreMountedReply);
+ onCleanup(() => {
+ mounted = false;
+ unregisterUndo();
+ });
+
+ const initialHtml = () => restoredSnapshot?.bodyHtml ?? props.preloadedHtml;
+ const [editorConnected, setEditorConnected] = createSignal(false);
+ const handleEditorConnect = () => {
+ const currentEditor = editor();
+ if (!currentEditor) return;
+ const html = initialHtml();
+ if (html) {
+ // Restore content without letting selection reconciliation grab focus
+ currentEditor.update(() => {
+ $addUpdateTag('skip-dom-selection');
+ setEditorStateFromHtml(currentEditor, html, true);
+ });
+ }
+ setEditorConnected(true);
+ };
+
+ // Everything that follows a successful unschedule: consume the send
+ // snapshot, scrub the sent message from the thread cache, restore the
+ // server-side draft and the composer.
+ const restoreAfterUndoSend = async (
+ draftId: string,
+ sentThreadId: string | undefined,
+ inboxId: string | undefined
+ ) => {
+ const snapshot = replyUndo.take(draftId);
+
+ // Reconcile the actual message thread, which can differ from the host when
+ // replying from another inbox. The host's undoKey still owns local recovery.
+ const threadId = sentThreadId ?? snapshot?.threadId;
+ await props.drafts.restoreDraft({
+ draftId,
+ threadId,
+ draft: snapshot?.draftRestore,
+ html: snapshot?.bodyHtml,
+ inboxId,
+ });
+
+ if (snapshot) {
+ // Resolve the live registration after cache updates and unmounts settle.
+ setTimeout(() => replyUndo.restore(undoKey, snapshot), 0);
+ props.setShowReply?.(true);
+ }
+ };
+
+ const attachmentPersistence = createAttachmentPersistence({
+ services: props.attachmentStorage,
+ attachments: form.attachments,
+ draftId: savedDraftId,
+ inboxId: activeInboxId,
+ });
+
+ createEffect(
+ on(form.editRevision, () => scheduleDraftSave(), { defer: true })
+ );
+
+ // The mounted composer owns focus, editor commands, and their cleanup.
+ createEffect(() => {
+ const rt = form.replyType();
+ if (!editorConnected()) return;
+ untrack(() => {
+ setComposerExpanded(false);
+ if (rt === 'forward') {
+ setQuoteCollapsed(true);
+ focus.forward();
+ const message = replyTarget;
+ const currentEditor = editor();
+ if (message && currentEditor && form.replyAppended()) {
+ // The editor's lazy command registration completes after this batch.
+ const timer = setTimeout(
+ () =>
+ currentEditor.dispatchCommand(
+ TOGGLE_APPEND_EMAIL_THREAD_COMMAND,
+ {
+ replyingTo: message,
+ replyType: rt,
+ visible: true,
+ isPersonal: ctx.isPersonalReply(),
+ }
+ ),
+ 0
+ );
+ onCleanup(() => clearTimeout(timer));
+ }
+ } else {
+ focus.reply();
+ }
+ });
+ });
+
+ const [sendPhase, setSendPhase] = createSignal<
+ 'idle' | 'preparing' | 'sending'
+ >('idle');
+ const submitting = () => sendPhase() !== 'idle';
+ const sending = () => sendPhase() === 'sending';
+ const [pendingDeletion, setPendingDeletion] = createSignal(false);
+
+ function collectDraft() {
+ $removeAllWatermarkNodes(editor());
+ const prepared = prepareEmailBody(editor());
+ if (!prepared) {
+ props.notices.reportError(
+ new Error('Unable to prepare email body for draft collection.')
+ );
+ return null;
+ }
+ if (
+ !hasDraftContent(
+ prepared.bodyText,
+ form.subject(),
+ form.attachments.list().length
+ )
+ ) {
+ return null;
+ }
+ // We attach the drafts entirely using bodyHTML (because this is how the appended reply parsing works) so we are not including bodyMacro or bodyText
+ return {
+ bcc: form.recipients().bcc.map(convertEmailRecipientToContactInfo),
+ body_html: prepared.bodyHtml,
+ cc: form.recipients().cc.map(convertEmailRecipientToContactInfo),
+ provider_id: draftSeed?.provider_id,
+ replying_to_id: replyTarget?.db_id,
+ subject: form.subject(),
+ to: form.recipients().to.map(convertEmailRecipientToContactInfo),
+ };
+ }
+
+ const captureSave = (completingThread = false) => ({
+ draft: collectDraft(),
+ thread: thread(),
+ inboxId: activeInboxId(),
+ completingThread,
+ });
+ async function persistDraft({
+ draft: draftToSave,
+ thread: currentThread,
+ inboxId,
+ completingThread,
+ }: ReturnType) {
+ if (!draftToSave) {
+ const draftId = savedDraftId();
+ if (draftId) {
+ await props.drafts.deleteDraft({
+ draftId,
+ threadId: savedDraftThreadId(),
+ inboxId,
+ completingThread,
+ });
+ }
+ setSavedDraft(undefined);
+ return;
+ }
+ if (!currentThread) {
+ props.notices.reportError(
+ new Error('Failed to save draft: thread not found')
+ );
+ return;
+ }
+
+ const draftResponse = await props.drafts.saveDraft({
+ draft: {
+ ...draftToSave,
+ db_id: savedDraftId(),
+ provider_thread_id: currentThread.provider_id,
+ thread_db_id: currentThread.db_id,
+ },
+ inboxId,
+ completingThread,
+ previousThreadId: savedDraftThreadId(),
+ });
+
+ const draftId = draftResponse.draftId;
+ if (draftId) {
+ setSavedDraft({
+ id: draftId,
+ threadId: draftResponse.threadId ?? undefined,
+ });
+ await attachmentPersistence.upload(draftId, { inboxId });
+
+ const forwarded = form.attachments
+ .list()
+ .filter((attachment) => attachment.type === 'forwarded');
+ if (forwarded.length) {
+ await props.attachmentStorage.addForwardedAttachments({
+ draftId: draftId,
+ attachments: forwarded.map((a) => ({
+ attachmentId: a.attachmentId,
+ })),
+ inboxId,
+ });
+ }
+
+ return draftId;
+ }
+ }
+
+ const autosave = createDraftAutosave({
+ capture: captureSave,
+ persist: persistDraft,
+ paused: () => submitting() || pendingDeletion(),
+ });
+ function executeSaveDraft(completingThread = false) {
+ return autosave.save(captureSave(completingThread));
+ }
+ function scheduleDraftSave() {
+ if (submitting() || pendingDeletion()) return;
+ props.onEngaged?.();
+ autosave.schedule();
+ }
+
+ // Persist the draft immediately when the user switches the sending inbox, even
+ // without a text edit, so it moves to the new inbox and the choice survives a
+ // refresh. Driven by the explicit switch (below) rather than inbox reactivity.
+ const persistDraftOnSenderSwitch = (inboxId: string) => {
+ if (submitting() || pendingDeletion() || scheduling()) return;
+ props.onEngaged?.();
+ form.setSelectedInbox(inboxId);
+ autosave.cancel();
+ void executeSaveDraft().catch(() => {});
+ };
+
+ createEffect(() => {
+ const requestReplyType = ctx.replyRequest.replyType();
+
+ if (!requestReplyType) return;
+
+ if (form.replyType() !== requestReplyType) {
+ form.setReplyType(requestReplyType);
+ } else if (requestReplyType === 'forward') {
+ // setReplyType is skipped when the type is unchanged, so land the
+ // cursor in the To field explicitly
+ focus.forward();
+ }
+ // Forwards focus the To field; focusing the editor would steal it back
+ if (requestReplyType !== 'forward') {
+ if (props.focusAfterReplyRequest()) focus.editor(() => {});
+ }
+ ctx.replyRequest.clear();
+ });
+
+ // We are consuming the first change, because it is the initial value
+ let firstChangeConsumed = false;
+ const handleChange = (value: string) => {
+ setBodyMacro(value);
+ if (!firstChangeConsumed) {
+ firstChangeConsumed = true;
+ return;
+ }
+ untrack(scheduleDraftSave);
+ };
+
+ const hasPaidAccess = props.hasPaidAccess;
+
+ const sendEmail = async (markDone = false) => {
+ if (scheduling()) return;
+ if (submitting() || pendingDeletion() || attachmentPersistence.uploading())
+ return;
+
+ const to = form.recipients().to.map(convertEmailRecipientToContactInfo);
+ const cc = form.recipients().cc.map(convertEmailRecipientToContactInfo);
+ const bcc = form.recipients().bcc.map(convertEmailRecipientToContactInfo);
+
+ if ((to?.length ?? 0) + (cc?.length ?? 0) + (bcc?.length ?? 0) === 0) {
+ props.notices.feedback.failure(
+ 'Email failed to send. No recipients provided'
+ );
+ return;
+ }
+
+ const currentThread = thread();
+ if (!currentThread) {
+ props.notices.reportError(
+ new Error("Can't send email, no email thread found")
+ );
+ props.notices.feedback.failure('Email failed to send');
+ return;
+ }
+
+ let inboxId = activeInboxId();
+ if (!inboxId) {
+ if (props.accounts.loading()) {
+ props.notices.feedback.alert('Loading email accounts...');
+ return;
+ }
+
+ if (props.accounts.failed()) {
+ props.notices.feedback.failure(
+ 'Email failed to send: Could not load email accounts'
+ );
+ props.notices.reportError('Failed to load email links');
+ return;
+ }
+
+ const inboxes = props.accounts.inboxes();
+ if (inboxes.length < 1) {
+ props.notices.feedback.failure(
+ 'Email failed to send: No email account connected'
+ );
+ props.notices.reportError('No links found');
+ return;
+ }
+ inboxId = primaryInboxId() ?? inboxes[0].id;
+ }
+
+ const currentEditor = editor();
+
+ // Sending a reply marks the thread done. Gated on inbox_visible because
+ // onMarkDone (archiveThread) toggles: an already-archived thread (e.g.
+ // replying from search or the sent view) would be unarchived.
+ const willMarkDone = markDone || currentThread.inbox_visible;
+ const nextEntityId = willMarkDone
+ ? ctx.getMarkDoneNavigationTargetId()
+ : undefined;
+
+ setSendPhase('preparing');
+ try {
+ // Ensure draft is saved before sending so undo-send always has a draft to restore
+ autosave.cancel();
+ await executeSaveDraft(willMarkDone);
+
+ // Snapshot editor state before watermark so undo-send can restore it.
+ // Remember by draft so sends in separate composers cannot replace each other.
+ if (currentEditor) {
+ const snapshotHtml = currentEditor.read(() =>
+ $generateHtmlFromNodes(currentEditor)
+ );
+ const snapshotDraftId = savedDraftId();
+ const snapshotThreadId = savedDraftThreadId();
+ if (snapshotDraftId && snapshotThreadId) {
+ replyUndo.remember({
+ threadId: snapshotThreadId,
+ inboxId,
+ draftId: snapshotDraftId,
+ bodyHtml: snapshotHtml,
+ attachments: [...form.attachments.list()],
+ includeSignature: includeSignature(),
+ replyAppended: form.replyAppended(),
+ draftRestore: {
+ bcc,
+ cc,
+ db_id: snapshotDraftId,
+ provider_id: draftSeed?.provider_id,
+ provider_thread_id: currentThread.provider_id,
+ replying_to_id: replyTarget?.db_id,
+ subject: form.subject(),
+ thread_db_id: snapshotThreadId,
+ to,
+ },
+ });
+ }
+ }
+
+ // Scheduling may have started while the draft save was pending.
+ if (scheduling() || form.sendTime()) {
+ return;
+ }
+
+ // Append watermark after all validation passes so failed sends don't
+ // leave orphaned watermark nodes in the editor tree.
+ const cleanupWatermark = $appendWatermarkNodeToLast(
+ currentEditor,
+ !hasPaidAccess() ? MACRO_EMAIL_SIGNATURE : undefined
+ );
+
+ const replyingTo = replyTarget;
+
+ const prepared = prepareEmailBody(
+ currentEditor,
+ replyingTo
+ ? {
+ replyType: form.replyType(),
+ replyingTo,
+ }
+ : undefined
+ );
+ if (!prepared) {
+ cleanupWatermark();
+ return;
+ }
+
+ const processedMacroBody = prepareMacroBody(bodyMacro());
+
+ const currentDraftId = savedDraftId();
+
+ setSendPhase('sending');
+ const pendingSend = props.delivery.sendMessage({
+ message: {
+ db_id: currentDraftId,
+ bcc,
+ body_html: prepared.bodyHtml,
+ body_macro: processedMacroBody,
+ body_text: prepared.bodyText,
+ cc,
+ provider_id: draftSeed?.provider_id,
+ provider_thread_id: currentThread.provider_id,
+ replying_to_id: replyTarget?.db_id,
+ subject: form.subject(),
+ thread_db_id: currentThread.db_id,
+ to,
+ // Replies/forwards follow the inbox's "add to replies & forwards"
+ // setting on the backend; only signal an explicit per-reply dismiss.
+ include_signature: includeSignature() ? undefined : false,
+ },
+ inboxId,
+ completingThread: willMarkDone,
+ });
+
+ // Reset immediately while this task owns completion, including after unmount.
+ try {
+ resetState();
+ clearDraftState();
+ } catch (error) {
+ props.notices.reportError(error);
+ } finally {
+ cleanupWatermark();
+ }
+ let result;
+ try {
+ result = await pendingSend;
+ } catch (error) {
+ autosave.cancel();
+ if (mounted && currentDraftId) {
+ const snapshot = replyUndo.peek(currentDraftId);
+ if (snapshot) restoreMountedReply(snapshot);
+ }
+ props.notices.reportError(error);
+ props.notices.feedback.failure('Failed to send email');
+ return;
+ }
+ autosave.cancel();
+ const draftId = result.draftId;
+ if (draftId) endUndoSend(draftId);
+ // Each undo action retains this send's inbox, thread and mark-done, even
+ // if the composer sends again or navigation disposes the view.
+ let markDoneUndoHandle: EmailUndoHandle | undefined;
+ const undoSend = (draftId: string) =>
+ props.delivery.undoSend({
+ threadId: result.threadId,
+ draftId,
+ inboxId,
+ onUndone: async () => {
+ await restoreAfterUndoSend(draftId, result.threadId, inboxId);
+ const doneHandle = markDoneUndoHandle;
+ markDoneUndoHandle = undefined;
+ await doneHandle?.undo({
+ onError: () =>
+ props.notices.feedback.failure(
+ 'Failed to restore thread to inbox'
+ ),
+ });
+ },
+ });
+ try {
+ const toastId = props.notices.feedback.success('Email sent', {
+ actions: draftId
+ ? [
+ {
+ label: 'Undo',
+ onClick: () => {
+ if (toastId != null)
+ props.notices.feedback.dismiss(toastId);
+ void undoSend(draftId).catch(props.notices.reportError);
+ },
+ },
+ ]
+ : undefined,
+ duration: 5_000,
+ });
+ } catch (error) {
+ props.notices.reportError(error);
+ }
+ for (const mention of prepared.mentions) {
+ try {
+ props.recordMention(sourceEntityId, mention.documentId);
+ } catch (error) {
+ props.notices.reportError(error);
+ }
+ }
+ if (willMarkDone) {
+ try {
+ props.onMarkDone?.({
+ silent: true,
+ onUndoHandle: (handle) => {
+ markDoneUndoHandle = handle;
+ },
+ nextEntityId,
+ });
+ } catch (error) {
+ props.notices.reportError(error);
+ props.notices.feedback.failure(
+ 'Email sent, but unable to mark thread done'
+ );
+ }
+ }
+ try {
+ // Presentation refresh must not keep a successfully sent or undone reply disabled.
+ void Promise.resolve(props.sideEffectOnSend?.(draftId ?? null)).catch(
+ props.notices.reportError
+ );
+ } catch (error) {
+ props.notices.reportError(error);
+ }
+ } catch (error) {
+ props.notices.reportError(error);
+ } finally {
+ setSendPhase('idle');
+ }
+ };
+
+ const resetState = () => {
+ clearEmailBody(editor());
+ setBodyMacro('');
+ setSavedDraft(undefined);
+ form.reset();
+ };
+
+ const clearDraftState = () => {
+ ctx.onDraftRemoved();
+ props.setShowReply?.(false);
+ };
+
+ const deleteDraftAndReset = async () => {
+ if (submitting() || pendingDeletion() || scheduling()) return;
+ // Keep Lexical's deferred reset notification from recreating a discarded draft.
+ setPendingDeletion(true);
+ autosave.cancel();
+ try {
+ await autosave.settled().catch(() => {});
+ const draftId = savedDraftId();
+ if (draftId) {
+ await props.drafts.deleteDraft({
+ draftId,
+ threadId: savedDraftThreadId(),
+ inboxId: activeInboxId(),
+ });
+ }
+ resetState();
+ form.setReplyAppended(false);
+ clearDraftState();
+ } finally {
+ // Yield past any sync/microtask save scheduling triggered by resetState,
+ // then cancel the resulting timer and re-enable autosave. Runs on both
+ // success and error paths so a failed delete doesn't leave the user
+ // unable to save further edits.
+ setTimeout(() => {
+ autosave.cancel();
+ setPendingDeletion(false);
+ }, 0);
+ }
+ };
+
+ const handleUserMention = (mention: UserMentionRecord) => {
+ if (recipients.disabled()) return;
+ addUserMentionToCc({
+ mention,
+ recipientOptions: ctx.recipientOptions(),
+ toRecipients: form.recipients().to,
+ ccRecipients: form.recipients().cc,
+ bccRecipients: form.recipients().bcc,
+ setCc: (next) => form.setRecipients('cc', next),
+ onRecipientAdded: (email) => {
+ props.notices.feedback.success(`${email} added to CC`);
+ },
+ });
+ };
+
+ const handleAddAttachments = (files: File[]) => {
+ const currentAttachments = form.attachments.list();
+
+ const attachmentsToAddByteSize = files.reduce((sum, f) => sum + f.size, 0);
+
+ if (attachmentsToAddByteSize >= MAX_ATTACHMENTS_BYTES_SIZE) {
+ props.notices.feedback.failure(
+ `${plural('Attachment', files.length)} exceed 18MB`
+ );
+ return;
+ }
+
+ const currentAttachmentsByteSize = currentAttachments.reduce(
+ (sum, a) => sum + (a.type === 'local' ? a.file.size : a.fileSize),
+ 0
+ );
+
+ if (
+ currentAttachmentsByteSize + attachmentsToAddByteSize >=
+ MAX_ATTACHMENTS_BYTES_SIZE
+ ) {
+ props.notices.feedback.failure("Can't add more attachments", {
+ subtext: 'Total attachments exceed 18MB limit',
+ });
+ return;
+ }
+
+ for (const file of files) {
+ form.attachments.add({
+ type: 'local',
+ file,
+ });
+ }
+
+ scheduleDraftSave();
+ };
+
+ const handleRemoveAttachment = attachmentPersistence.remove;
+
+ const schedule = createEmailSendSchedule({
+ delivery: props.delivery,
+ notices: props.notices,
+ draftId: savedDraftId,
+ saveDraft: executeSaveDraft,
+ threadId: savedDraftThreadId,
+ inboxId: activeInboxId,
+ sendTime: form.sendTime,
+ setSendTime: form.setSendTime,
+ recipientCount: () => {
+ const recipients = form.recipients();
+ return (
+ recipients.to.length + recipients.cc.length + recipients.bcc.length
+ );
+ },
+ });
+ const scheduling = schedule.pending;
+ const scheduleBlocked = () => pendingDeletion() || sending();
+ const handleSendTimeChange = (date: Date | null) =>
+ scheduleBlocked() ? Promise.resolve() : schedule.change(date);
+
+ const hasBodyText = () => bodyMacro().trim().length > 0;
+ const sendActionDisabled = () =>
+ pendingDeletion() ||
+ submitting() ||
+ scheduling() ||
+ attachmentPersistence.uploading() ||
+ !!form.sendTime();
+ const scheduleSendDisabled = () =>
+ scheduleBlocked() ||
+ scheduling() ||
+ (form.recipients().to.length === 0 &&
+ form.recipients().cc.length === 0 &&
+ form.recipients().bcc.length === 0);
+ const toggleQuotedText = () => {
+ const replyingTo = replyTarget;
+ if (!replyingTo) return;
+
+ const currentlyAppended = form.replyAppended();
+ form.setReplyAppended(!currentlyAppended);
+ // Explicitly showing quoted text via the toolbar reveals it uncollapsed
+ if (!currentlyAppended) setQuoteCollapsed(false);
+
+ editor()?.dispatchCommand(TOGGLE_APPEND_EMAIL_THREAD_COMMAND, {
+ replyingTo,
+ replyType: form.replyType(),
+ visible: !currentlyAppended,
+ isPersonal: ctx.isPersonalReply(),
+ });
+
+ editor()?.update(() => {
+ $getRoot().getFirstChild()?.selectStart();
+ });
+ };
+
+ return {
+ onContentChange: handleChange,
+ handleUserMention,
+ scrollContainer,
+ form,
+ activeInboxId,
+ activeInboxEmail,
+ replyType: form.replyType,
+ signatureHtml: replySignatureHtml,
+ setIncludeSignature,
+ setScrollContainer,
+ composerExpanded,
+ setComposerExpanded,
+ quoteCollapsed,
+ setQuoteCollapsed,
+ savedDraftId,
+ handleEditorConnect,
+ isSending: submitting,
+ recipients,
+ collectDraft,
+ scheduleDraftSave,
+ persistDraftOnSenderSwitch,
+ hasPaidAccess,
+ sendEmail,
+ deleteDraftAndReset,
+ handleAddAttachments,
+ handleRemoveAttachment,
+ handleSendTimeChange,
+ hasBodyText,
+ sendActionDisabled,
+ scheduleSendDisabled,
+ toggleQuotedText,
+ };
+}
diff --git a/apps/web/src/features/email-compose/primitives/reply-recipient-fields.test.ts b/apps/web/src/features/email-compose/primitives/reply-recipient-fields.test.ts
new file mode 100644
index 00000000000..14e81bfc5b2
--- /dev/null
+++ b/apps/web/src/features/email-compose/primitives/reply-recipient-fields.test.ts
@@ -0,0 +1,72 @@
+import { createRoot, createSignal } from 'solid-js';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import type {
+ EmailFormRecipients,
+ EmailRecipient,
+} from '../core/email-recipient';
+import { createReplyRecipientFields } from './reply-recipient-fields';
+
+const alice: EmailRecipient = {
+ kind: 'custom',
+ id: 'alice',
+ data: { id: 'alice', email: 'alice@example.com', invalid: false },
+};
+const disposers: (() => void)[] = [];
+afterEach(() => {
+ disposers.splice(0).forEach((dispose) => dispose());
+ document.body.replaceChildren();
+});
+
+function setup(initial: EmailFormRecipients) {
+ const container = document.createElement('div');
+ document.body.append(container);
+ return createRoot((dispose) => {
+ disposers.push(dispose);
+ const [values, setValues] = createSignal(initial);
+ const onChange = vi.fn();
+ const fields = createReplyRecipientFields({
+ values,
+ container: () => container,
+ disabled: () => false,
+ onChange,
+ setValues: (field, recipients) =>
+ setValues((prev) => ({ ...prev, [field]: recipients })),
+ });
+ return { dispose, fields, values, onChange, container };
+ });
+}
+
+describe('reply recipient fields', () => {
+ it('moves recipients without duplicating the destination and schedules the change', () => {
+ const state = setup({ to: [alice], cc: [alice], bcc: [] });
+ state.fields.handleRecipientDrop('cc', alice, 'to');
+ expect(state.values()).toEqual({ to: [], cc: [alice], bcc: [] });
+ expect(state.fields.showCc()).toBe(true);
+ expect(state.onChange).toHaveBeenCalledOnce();
+ state.fields.setRecipients('bcc', [alice]);
+ expect(state.values().bcc).toEqual([alice]);
+ expect(state.onChange).toHaveBeenCalledTimes(2);
+ });
+
+ it('keeps the panel open for recipient popovers and releases its outside listener', () => {
+ const state = setup({ to: [alice], cc: [alice], bcc: [] });
+ const otherPopover = document.createElement('div');
+ otherPopover.dataset.popperPositioner = '';
+ document.body.append(otherPopover);
+ const popover = document.createElement('div');
+ popover.dataset.popperPositioner = '';
+ document.body.append(popover);
+ state.fields.setShowExpandedRecipients(true);
+ state.container.dispatchEvent(new Event('pointerdown', { bubbles: true }));
+ popover.dispatchEvent(new Event('pointerdown', { bubbles: true }));
+ expect(state.fields.showExpandedRecipients()).toBe(true);
+ document.body.dispatchEvent(new Event('pointerdown', { bubbles: true }));
+ expect(state.fields.showExpandedRecipients()).toBe(false);
+ expect(state.fields.showCc()).toBe(true);
+ expect(state.fields.showBcc()).toBe(false);
+ state.dispose();
+ state.fields.setShowExpandedRecipients(true);
+ document.body.dispatchEvent(new Event('pointerdown', { bubbles: true }));
+ expect(state.fields.showExpandedRecipients()).toBe(true);
+ });
+});
diff --git a/apps/web/src/features/email-compose/primitives/reply-recipient-fields.ts b/apps/web/src/features/email-compose/primitives/reply-recipient-fields.ts
new file mode 100644
index 00000000000..566c86f82be
--- /dev/null
+++ b/apps/web/src/features/email-compose/primitives/reply-recipient-fields.ts
@@ -0,0 +1,122 @@
+import { makeEventListener } from '@solid-primitives/event-listener';
+import { type Accessor, createSignal, onMount } from 'solid-js';
+import type { EmailRecipient, RecipientFieldId } from '../core/email-recipient';
+import type { EmailFormRecipients } from './email-form-state';
+
+/** Recipient field interaction, independent of drafts, sending and app services. */
+export function createReplyRecipientFields(options: {
+ values: Accessor;
+ setValues: (field: RecipientFieldId, values: EmailRecipient[]) => void;
+ onChange: () => void;
+ container: Accessor;
+ disabled: Accessor;
+}) {
+ const [showExpandedRecipients, setShowExpandedRecipients] =
+ createSignal(false);
+ const [toRef, setToRef] = createSignal();
+ const [ccRef, setCcRef] = createSignal();
+ const [bccRef, setBccRef] = createSignal();
+ const [showCc, setShowCc] = createSignal();
+ const [showBcc, setShowBcc] = createSignal();
+ const [recipientDragState, setRecipientDragState] = createSignal<{
+ recipient: EmailRecipient;
+ sourceField: 'to' | 'cc' | 'bcc';
+ } | null>(null);
+ const handleChipDragStart = (
+ field: 'to' | 'cc' | 'bcc',
+ recipient: EmailRecipient,
+ e: DragEvent
+ ) => {
+ if (options.disabled()) {
+ e.preventDefault();
+ return;
+ }
+ if (!e.dataTransfer) return;
+ setRecipientDragState({ recipient, sourceField: field });
+ e.dataTransfer.effectAllowed = 'move';
+ e.dataTransfer.setData('text/plain', '');
+ };
+
+ const handleChipDragEnd = () => {
+ setRecipientDragState(null);
+ };
+
+ const handleRecipientDrop = (
+ targetField: 'to' | 'cc' | 'bcc',
+ recipient: EmailRecipient,
+ sourceField: 'to' | 'cc' | 'bcc'
+ ) => {
+ if (options.disabled()) return;
+ const sourceList = options.values()[sourceField];
+ options.setValues(
+ sourceField,
+ sourceList.filter((r) => r.id !== recipient.id)
+ );
+ const targetList = options.values()[targetField];
+ if (!targetList.some((r) => r.id === recipient.id)) {
+ options.setValues(targetField, [...targetList, recipient]);
+ }
+ if (targetField === 'cc') setShowCc(true);
+ if (targetField === 'bcc') setShowBcc(true);
+ options.onChange();
+ };
+
+ // Keep expanded recipients open while composing; collapse only when leaving
+ // the composer or selecting outside its recipient popover.
+ const expandedPointerDownHandler = (e: PointerEvent) => {
+ if (showExpandedRecipients()) {
+ const target = e.target;
+ if (!(target instanceof Element)) return;
+ if (
+ !options.container()?.contains(target) &&
+ !target.closest('div[data-popper-positioner]')
+ ) {
+ setShowExpandedRecipients(false);
+ setShowCc(options.values().cc.length > 0);
+ setShowBcc(options.values().bcc.length > 0);
+ }
+ }
+ };
+
+ onMount(() => {
+ makeEventListener(document, 'pointerdown', expandedPointerDownHandler);
+ });
+
+ const mobileDrawerCcBccOpen = () =>
+ !!showCc() ||
+ !!showBcc() ||
+ options.values().cc.length > 0 ||
+ options.values().bcc.length > 0;
+ const toggleMobileDrawerCcBcc = () => {
+ const next = !mobileDrawerCcBccOpen();
+ setShowCc(next);
+ setShowBcc(next);
+ };
+
+ return {
+ disabled: options.disabled,
+ showExpandedRecipients,
+ setShowExpandedRecipients,
+ toRef,
+ setToRef,
+ ccRef,
+ setCcRef,
+ bccRef,
+ setBccRef,
+ showCc,
+ setShowCc,
+ showBcc,
+ setShowBcc,
+ recipientDragState,
+ handleChipDragStart,
+ handleChipDragEnd,
+ handleRecipientDrop,
+ mobileDrawerCcBccOpen,
+ toggleMobileDrawerCcBcc,
+ setRecipients(field: RecipientFieldId, values: EmailRecipient[]) {
+ if (options.disabled()) return;
+ options.setValues(field, values);
+ options.onChange();
+ },
+ };
+}
diff --git a/apps/web/src/features/email-compose/primitives/send-schedule.test.ts b/apps/web/src/features/email-compose/primitives/send-schedule.test.ts
new file mode 100644
index 00000000000..10700bd28b3
--- /dev/null
+++ b/apps/web/src/features/email-compose/primitives/send-schedule.test.ts
@@ -0,0 +1,678 @@
+import { createMemo, createRoot, createSignal } from 'solid-js';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { message } from '../../email-message/tests/messages';
+import type {
+ EmailComposeContext,
+ PersistedEmailIdentity,
+} from '../context/compose-capabilities';
+import { decodeBase64Utf8 } from '../core/decode-base64';
+import { createComposeContext } from '../tests/capabilities';
+import { mountEmailComposer } from '../tests/composer';
+import { createEmailEditor, setEmailEditorText } from '../tests/editor';
+import { createEmailFormState } from './email-form-state';
+import {
+ createReplyComposer,
+ type ReplyComposerOptions,
+} from './reply-composer';
+
+function replyComposer(
+ composeContext: EmailComposeContext,
+ replyingTo = () => message('parent'),
+ callbacks: Pick = {}
+) {
+ return createRoot((dispose) => {
+ const editor = createEmailEditor('Ready to send');
+ const parent = replyingTo();
+ const form = createEmailFormState(
+ {
+ viewerEmail: composeContext.viewerEmail,
+ inboxes: composeContext.accounts.inboxes,
+ },
+ { type: 'replying_to', messageId: parent.db_id },
+ { getMessageById: () => parent, getDraftForMessageReply: () => undefined }
+ );
+ const state = createReplyComposer(
+ {
+ ...callbacks,
+ ...composeContext,
+ focusAfterReplyRequest: () => true,
+ sourceEntityId: 'thread',
+ replyingTo,
+ session: {
+ thread: () => ({
+ db_id: 'thread',
+ link_id: 'inbox',
+ inbox_visible: false,
+ }),
+ recipientOptions: () => [],
+ isPersonalReply: () => false,
+ onDraftRemoved() {},
+ exitToThread: () => false,
+ replyRequest: { replyType: () => undefined, clear() {} },
+ getMarkDoneNavigationTargetId: () => undefined,
+ },
+ },
+ () => editor,
+ { container: () => undefined, footer: () => undefined },
+ () => form
+ );
+ state.onContentChange('Ready to send');
+ return {
+ ...state,
+ sendActionDisabled: createMemo(state.sendActionDisabled),
+ dispose,
+ edit(text: string) {
+ setEmailEditorText(editor, text);
+ state.onContentChange(text);
+ },
+ };
+ });
+}
+
+function composer(
+ kind: 'standalone' | 'reply',
+ composeContext: EmailComposeContext
+) {
+ if (kind === 'reply') {
+ const state = replyComposer(composeContext);
+ return {
+ dispose: state.dispose,
+ send: () => state.sendEmail(),
+ schedule: state.handleSendTimeChange,
+ };
+ }
+ const root = mountEmailComposer(composeContext);
+ root.edit('Ready to send');
+ return {
+ dispose: root.dispose,
+ send: root.state.context.onSend,
+ schedule: root.state.context.onSendTimeChange!,
+ };
+}
+
+describe('send and schedule ordering', () => {
+ it('keeps reply recipients unchanged while a schedule is pending', async () => {
+ const context = createComposeContext();
+ const pending = Promise.withResolvers();
+ vi.mocked(context.delivery.schedule).mockReturnValueOnce(pending.promise);
+ const state = replyComposer(context);
+ const originalTo = [...state.form.recipients().to];
+ const schedule = state.handleSendTimeChange(
+ new Date('2026-12-01T12:00:00Z')
+ );
+ try {
+ await vi.advanceTimersByTimeAsync(0);
+ expect(context.delivery.schedule).toHaveBeenCalledOnce();
+ expect(state.sendActionDisabled()).toBe(true);
+ state.recipients.setRecipients('to', []);
+ state.recipients.handleRecipientDrop('cc', originalTo[0], 'to');
+ expect(state.form.recipients().to).toEqual(originalTo);
+ expect(state.form.recipients().cc).toEqual([]);
+ pending.resolve();
+ await schedule;
+ state.recipients.setRecipients('to', []);
+ await vi.advanceTimersByTimeAsync(0);
+ expect(context.delivery.unschedule).toHaveBeenCalledOnce();
+ expect(state.form.sendTime()).toBeUndefined();
+ expect(state.sendActionDisabled()).toBe(false);
+ } finally {
+ pending.resolve();
+ await schedule;
+ state.dispose();
+ }
+ });
+
+ it('undoes only the mark-done belonging to the selected send', async () => {
+ const context = createComposeContext();
+ const first = {
+ draftId: 'first-send',
+ threadId: 'thread',
+ inboxId: 'inbox',
+ };
+ const second = { ...first, draftId: 'second-send' };
+ vi.mocked(context.drafts.saveDraft)
+ .mockResolvedValueOnce(first)
+ .mockResolvedValueOnce(second);
+ vi.mocked(context.delivery.sendMessage)
+ .mockResolvedValueOnce(first)
+ .mockResolvedValueOnce(second);
+ vi.mocked(context.delivery.undoSend).mockImplementation(
+ async ({ onUndone }) => {
+ await onUndone();
+ }
+ );
+ const undoFirst = vi.fn(async () => {});
+ const undoSecond = vi.fn(async () => {});
+ const onMarkDone = vi
+ .fn()
+ .mockImplementationOnce((options) =>
+ options.onUndoHandle({ id: 'first', undo: undoFirst, dispose() {} })
+ )
+ .mockImplementationOnce((options) =>
+ options.onUndoHandle({ id: 'second', undo: undoSecond, dispose() {} })
+ );
+ const state = replyComposer(context, undefined, { onMarkDone });
+ try {
+ await state.sendEmail(true);
+ const firstNotice = vi.mocked(context.notices.feedback.success).mock
+ .lastCall;
+ state.edit('Another reply');
+ await state.sendEmail(true);
+ expect(context.delivery.sendMessage).toHaveBeenCalledTimes(2);
+ firstNotice?.[1]?.actions?.[0].onClick();
+ await vi.advanceTimersByTimeAsync(0);
+ expect(context.drafts.restoreDraft).toHaveBeenCalledWith(
+ expect.objectContaining({ draftId: first.draftId })
+ );
+ expect(undoFirst).toHaveBeenCalledOnce();
+ expect(undoSecond).not.toHaveBeenCalled();
+ } finally {
+ state.dispose();
+ }
+ });
+
+ it('undoes mark-done while the post-send refresh is still pending', async () => {
+ const composeContext = createComposeContext();
+ const { promise: refresh, resolve: finish } = Promise.withResolvers();
+ const undo = vi.fn(async () => {});
+ const onMarkDone = vi.fn((options) =>
+ options.onUndoHandle({ id: 'done', undo, dispose() {} })
+ );
+ vi.mocked(composeContext.delivery.undoSend).mockImplementation(
+ async ({ onUndone }) => {
+ await onUndone();
+ }
+ );
+ const state = replyComposer(composeContext, undefined, {
+ sideEffectOnSend: () => refresh,
+ onMarkDone,
+ });
+ try {
+ const send = state.sendEmail(true);
+ await vi.advanceTimersByTimeAsync(0);
+ const sentNotice = vi
+ .mocked(composeContext.notices.feedback.success)
+ .mock.calls.find(([text]) => text === 'Email sent');
+ expect(onMarkDone).toHaveBeenCalledOnce();
+ sentNotice?.[1]?.actions?.[0].onClick();
+ await vi.advanceTimersByTimeAsync(0);
+ expect(undo).toHaveBeenCalledOnce();
+ expect(state.isSending()).toBe(false);
+ state.edit('Restored reply edited before refresh');
+ await vi.advanceTimersByTimeAsync(600);
+ expect(
+ decodeBase64Utf8(
+ vi.mocked(composeContext.drafts.saveDraft).mock.lastCall?.[0].draft
+ .body_html ?? ''
+ )
+ ).toContain('Restored reply edited before refresh');
+ finish();
+ await send;
+ expect(onMarkDone).toHaveBeenCalledOnce();
+ } finally {
+ finish();
+ state.dispose();
+ }
+ });
+
+ it('does not add a scheduling notice after persistence already failed', async () => {
+ const composeContext = createComposeContext();
+ const failure = new Error('Draft save failed');
+ vi.mocked(composeContext.drafts.saveDraft).mockImplementationOnce(
+ async () => {
+ composeContext.notices.feedback.failure('Failed to save draft');
+ throw failure;
+ }
+ );
+ const state = replyComposer(composeContext);
+ try {
+ await state.handleSendTimeChange(new Date('2026-12-01T12:00:00Z'));
+ expect(composeContext.delivery.schedule).not.toHaveBeenCalled();
+ expect(
+ composeContext.notices.feedback.failure
+ ).toHaveBeenCalledExactlyOnceWith('Failed to save draft');
+ expect(composeContext.notices.reportError).toHaveBeenCalledWith(failure);
+ } finally {
+ state.dispose();
+ }
+ });
+
+ it('does not overwrite a newly edited reply when an older unmounted send fails', async () => {
+ const composeContext = createComposeContext();
+ const { promise: sending, reject } =
+ Promise.withResolvers();
+ vi.mocked(composeContext.delivery.sendMessage).mockReturnValueOnce(sending);
+ const first = replyComposer(composeContext);
+ first.edit('Older reply');
+ const send = first.sendEmail();
+ await vi.advanceTimersByTimeAsync(0);
+ first.dispose();
+ const newer = replyComposer(composeContext);
+ try {
+ newer.form.setSubject('New subject');
+ newer.edit('Newer reply');
+ reject(new Error('Offline'));
+ await send;
+ expect(newer.form.subject()).toBe('New subject');
+ expect(decodeBase64Utf8(newer.collectDraft()?.body_html ?? '')).toContain(
+ 'Newer reply'
+ );
+ } finally {
+ newer.dispose();
+ }
+ });
+ it('completes reply mark-done when the post-send refresh fails', async () => {
+ const composeContext = createComposeContext();
+ const failure = new Error('Refresh failed');
+ const onMarkDone = vi.fn();
+ const state = replyComposer(composeContext, undefined, {
+ sideEffectOnSend: async () => {
+ throw failure;
+ },
+ onMarkDone,
+ });
+ try {
+ await state.sendEmail(true);
+ expect(composeContext.delivery.sendMessage).toHaveBeenCalledOnce();
+ expect(onMarkDone).toHaveBeenCalledOnce();
+ expect(composeContext.notices.reportError).toHaveBeenCalledWith(failure);
+ expect(composeContext.notices.feedback.failure).not.toHaveBeenCalled();
+ expect(state.isSending()).toBe(false);
+ } finally {
+ state.dispose();
+ }
+ });
+
+ it('restores a failed reply after optimistic reset without marking it done', async () => {
+ const composeContext = createComposeContext();
+ vi.mocked(composeContext.delivery.sendMessage).mockRejectedValueOnce(
+ new Error('Offline')
+ );
+ const onMarkDone = vi.fn();
+ const state = replyComposer(composeContext, undefined, { onMarkDone });
+ try {
+ state.edit('Keep my reply');
+ await state.sendEmail(true);
+ expect(
+ composeContext.notices.feedback.failure
+ ).toHaveBeenCalledExactlyOnceWith('Failed to send email');
+ expect(onMarkDone).not.toHaveBeenCalled();
+ expect(state.savedDraftId()).toBe('draft');
+ expect(decodeBase64Utf8(state.collectDraft()?.body_html ?? '')).toContain(
+ 'Keep my reply'
+ );
+ expect(state.isSending()).toBe(false);
+ } finally {
+ state.dispose();
+ }
+ });
+ beforeEach(() => vi.useFakeTimers());
+ afterEach(() => vi.useRealTimers());
+
+ it('serializes the last reply edit on disposal and reuses the ID from its first save', async () => {
+ const { promise: saving, resolve: finish } =
+ Promise.withResolvers();
+ const composeContext = createComposeContext();
+ vi.mocked(composeContext.drafts.saveDraft).mockReturnValueOnce(saving);
+ const state = replyComposer(composeContext);
+ state.edit('First version');
+ await vi.advanceTimersByTimeAsync(500);
+ state.edit('Final version');
+ state.dispose();
+ await vi.advanceTimersByTimeAsync(1000);
+ expect(composeContext.drafts.saveDraft).toHaveBeenCalledOnce();
+ finish({ draftId: 'saved-reply', threadId: 'thread', inboxId: 'inbox' });
+ await vi.advanceTimersByTimeAsync(0);
+ expect(composeContext.drafts.saveDraft).toHaveBeenCalledTimes(2);
+ const latest = vi.mocked(composeContext.drafts.saveDraft).mock.calls[1][0]
+ .draft;
+ expect(latest.db_id).toBe('saved-reply');
+ expect(latest.replying_to_id).toBe('parent');
+ expect(decodeBase64Utf8(latest.body_html!)).toContain('Final version');
+ });
+
+ it('flushes an unmounted editor only to its original reply target', async () => {
+ const [target, setTarget] = createSignal(message('original'));
+ const composeContext = createComposeContext();
+ const state = replyComposer(composeContext, target);
+ state.edit('Belongs to the original message');
+ // Solid updates keyed parent props before disposing the previous child.
+ setTarget(message('next'));
+ state.dispose();
+ await vi.advanceTimersByTimeAsync(1000);
+ expect(composeContext.drafts.saveDraft).toHaveBeenCalledOnce();
+ expect(
+ vi.mocked(composeContext.drafts.saveDraft).mock.calls[0][0].draft
+ ).toMatchObject({
+ replying_to_id: 'original',
+ });
+ });
+
+ it('waits for attachment persistence before scheduling and retains the selected inbox', async () => {
+ const { promise: uploading, resolve: finish } =
+ Promise.withResolvers();
+ const composeContext = createComposeContext();
+ vi.mocked(
+ composeContext.attachmentStorage.uploadAttachments
+ ).mockReturnValueOnce(uploading);
+ const state = replyComposer(composeContext);
+ try {
+ state.form.setSelectedInbox('secondary');
+ state.handleAddAttachments([new File(['attachment'], 'review.txt')]);
+ await vi.advanceTimersByTimeAsync(500);
+ const scheduling = state.handleSendTimeChange(
+ new Date('2026-10-01T12:00:00Z')
+ );
+ await vi.advanceTimersByTimeAsync(0);
+ state.form.setSelectedInbox('inbox');
+ expect(composeContext.delivery.schedule).not.toHaveBeenCalled();
+ finish();
+ await scheduling;
+ expect(composeContext.delivery.schedule).toHaveBeenCalledExactlyOnceWith(
+ expect.objectContaining({ draftId: 'draft' }),
+ 'secondary'
+ );
+ } finally {
+ state.dispose();
+ }
+ });
+
+ it('discards an in-flight first reply save after an upload failure without leaving a draft', async () => {
+ const { promise: uploading, reject: fail } = Promise.withResolvers();
+ const composeContext = createComposeContext();
+ vi.mocked(
+ composeContext.attachmentStorage.uploadAttachments
+ ).mockReturnValueOnce(uploading);
+ const state = replyComposer(composeContext);
+ try {
+ state.handleAddAttachments([new File(['attachment'], 'review.txt')]);
+ await vi.advanceTimersByTimeAsync(500);
+ expect(state.savedDraftId()).toBe('draft');
+ const discarded = state.deleteDraftAndReset();
+ expect(composeContext.drafts.deleteDraft).not.toHaveBeenCalled();
+ fail(new Error('Upload failed'));
+ await discarded;
+ await vi.advanceTimersByTimeAsync(1000);
+ expect(composeContext.drafts.deleteDraft).toHaveBeenCalledExactlyOnceWith(
+ expect.objectContaining({ draftId: 'draft' })
+ );
+ expect(composeContext.drafts.saveDraft).toHaveBeenCalledOnce();
+ expect(state.savedDraftId()).toBeUndefined();
+ } finally {
+ state.dispose();
+ }
+ });
+
+ it.each(['send', 'discard'] as const)(
+ 'blocks scheduling and inbox changes during a pending reply %s',
+ async (operation) => {
+ const { promise: pending, resolve: finish } =
+ Promise.withResolvers();
+ const composeContext = createComposeContext();
+ if (operation === 'send')
+ vi.mocked(composeContext.delivery.sendMessage).mockImplementationOnce(
+ async () => {
+ await pending;
+ return { draftId: 'sent', threadId: 'thread', inboxId: 'inbox' };
+ }
+ );
+ else
+ vi.mocked(composeContext.drafts.deleteDraft).mockReturnValueOnce(
+ pending
+ );
+ const state = replyComposer(composeContext);
+ try {
+ state.edit('Ready');
+ await vi.advanceTimersByTimeAsync(500);
+ expect(state.sendActionDisabled()).toBe(false);
+ const completing =
+ operation === 'send'
+ ? state.sendEmail()
+ : state.deleteDraftAndReset();
+ await vi.advanceTimersByTimeAsync(0);
+ expect(state.sendActionDisabled()).toBe(true);
+ const saves = vi.mocked(composeContext.drafts.saveDraft).mock.calls
+ .length;
+ await state.handleSendTimeChange(new Date('2026-10-01T12:00:00Z'));
+ state.persistDraftOnSenderSwitch('secondary');
+ await vi.advanceTimersByTimeAsync(500);
+ expect(composeContext.delivery.schedule).not.toHaveBeenCalled();
+ expect(composeContext.drafts.saveDraft).toHaveBeenCalledTimes(saves);
+ expect(state.activeInboxId()).toBe('inbox');
+ finish();
+ await completing;
+ await vi.advanceTimersByTimeAsync(1000);
+ expect(state.sendActionDisabled()).toBe(false);
+ expect(composeContext.drafts.saveDraft).toHaveBeenCalledTimes(saves);
+ } finally {
+ finish();
+ state.dispose();
+ }
+ }
+ );
+
+ it('does not attach a forwarded file removed while the first draft save is pending', async () => {
+ const { promise: saving, resolve: finish } =
+ Promise.withResolvers();
+ const composeContext = createComposeContext();
+ vi.mocked(composeContext.drafts.saveDraft).mockReturnValueOnce(saving);
+ const state = replyComposer(composeContext);
+ try {
+ const attachment = {
+ type: 'forwarded' as const,
+ attachmentId: 'file',
+ fileName: 'review.txt',
+ mimeType: 'text/plain',
+ fileSize: 10,
+ };
+ state.form.attachments.add(attachment);
+ state.edit('Forwarding');
+ await vi.advanceTimersByTimeAsync(500);
+ state.handleRemoveAttachment(attachment);
+ finish({ draftId: 'draft', threadId: 'thread', inboxId: 'inbox' });
+ await vi.advanceTimersByTimeAsync(0);
+ expect(
+ composeContext.attachmentStorage.addForwardedAttachments
+ ).not.toHaveBeenCalled();
+ } finally {
+ state.dispose();
+ }
+ });
+
+ it('waits for the first save, sends its returned draft ID once, and does not recreate the sent reply', async () => {
+ const { promise: saving, resolve: finish } =
+ Promise.withResolvers();
+ const composeContext = createComposeContext();
+ vi.mocked(composeContext.drafts.saveDraft).mockReturnValueOnce(saving);
+ const state = replyComposer(composeContext);
+ try {
+ const sending = state.sendEmail();
+ await vi.advanceTimersByTimeAsync(0);
+ await state.sendEmail();
+ expect(composeContext.drafts.saveDraft).toHaveBeenCalledOnce();
+ expect(composeContext.delivery.sendMessage).not.toHaveBeenCalled();
+ finish({ draftId: 'saved-reply', threadId: 'thread', inboxId: 'inbox' });
+ await sending;
+ expect(
+ vi.mocked(composeContext.delivery.sendMessage).mock.calls[0][0].message
+ .db_id
+ ).toBe('saved-reply');
+ state.dispose();
+ await vi.advanceTimersByTimeAsync(1000);
+ expect(composeContext.delivery.sendMessage).toHaveBeenCalledOnce();
+ expect(composeContext.drafts.saveDraft).toHaveBeenCalledOnce();
+ } finally {
+ state.dispose();
+ }
+ });
+
+ it.each([false, true])(
+ 'restores a cross-inbox reply and its envelope after undo (remount: %s)',
+ async (remount) => {
+ const composeContext = createComposeContext();
+ const persisted = {
+ draftId: 'cross-inbox-draft',
+ threadId: 'secondary-thread',
+ inboxId: 'secondary',
+ };
+ vi.mocked(composeContext.drafts.saveDraft).mockResolvedValue(persisted);
+ vi.mocked(composeContext.delivery.sendMessage).mockResolvedValue(
+ persisted
+ );
+ vi.mocked(composeContext.delivery.undoSend).mockImplementation(
+ async ({ onUndone }) => {
+ await onUndone();
+ }
+ );
+ const target = () => message(`cross-inbox-${remount}`);
+ let state = replyComposer(composeContext, target);
+ try {
+ state.form.setSelectedInbox('secondary');
+ state.form.setSubject('Custom reply subject');
+ state.form.setRecipients('cc', [
+ {
+ kind: 'custom',
+ id: 'reviewer@example.com',
+ data: {
+ id: 'reviewer@example.com',
+ email: 'reviewer@example.com',
+ invalid: false,
+ },
+ },
+ ]);
+ await state.sendEmail();
+ await vi.advanceTimersByTimeAsync(0);
+ expect(composeContext.delivery.sendMessage).toHaveBeenCalledWith(
+ expect.objectContaining({ inboxId: 'secondary' })
+ );
+ const notice = vi
+ .mocked(composeContext.notices.feedback.success)
+ .mock.calls.find(([text]) => text === 'Email sent');
+ if (remount) state.dispose();
+ notice?.[1]?.actions?.[0].onClick();
+ await vi.advanceTimersByTimeAsync(0);
+ expect(composeContext.drafts.restoreDraft).toHaveBeenCalledWith(
+ expect.objectContaining({
+ inboxId: 'secondary',
+ threadId: 'secondary-thread',
+ draft: expect.objectContaining({
+ thread_db_id: 'secondary-thread',
+ }),
+ })
+ );
+ if (remount) state = replyComposer(composeContext, target);
+ await vi.advanceTimersByTimeAsync(0);
+ expect(state.activeInboxId()).toBe('secondary');
+ state.edit('Continued after undo');
+ await vi.advanceTimersByTimeAsync(500);
+ expect(composeContext.drafts.saveDraft).toHaveBeenLastCalledWith(
+ expect.objectContaining({
+ inboxId: 'secondary',
+ previousThreadId: 'secondary-thread',
+ draft: expect.objectContaining({
+ db_id: 'cross-inbox-draft',
+ subject: 'Custom reply subject',
+ cc: [expect.objectContaining({ email: 'reviewer@example.com' })],
+ }),
+ })
+ );
+ await state.deleteDraftAndReset();
+ expect(composeContext.drafts.deleteDraft).toHaveBeenLastCalledWith(
+ expect.objectContaining({
+ threadId: 'secondary-thread',
+ inboxId: 'secondary',
+ })
+ );
+ } finally {
+ state.dispose();
+ }
+ }
+ );
+
+ it('reconciles each previous persisted thread when a reply moves between inboxes', async () => {
+ const composeContext = createComposeContext();
+ const { promise: saving, resolve: finish } =
+ Promise.withResolvers();
+ vi.mocked(composeContext.drafts.saveDraft)
+ .mockResolvedValue({
+ draftId: 'draft-c',
+ threadId: 'thread-c',
+ inboxId: 'c',
+ })
+ .mockReturnValueOnce(saving)
+ .mockResolvedValueOnce({
+ draftId: 'draft-b',
+ threadId: 'thread-b',
+ inboxId: 'b',
+ })
+ .mockResolvedValueOnce({
+ draftId: 'draft-c',
+ threadId: 'thread-c',
+ inboxId: 'c',
+ });
+ const state = replyComposer(composeContext);
+ try {
+ state.edit('Moving between inboxes');
+ await vi.advanceTimersByTimeAsync(500);
+ state.persistDraftOnSenderSwitch('b');
+ state.persistDraftOnSenderSwitch('c');
+ finish({ draftId: 'draft-a', threadId: 'thread-a', inboxId: 'inbox' });
+ await vi.advanceTimersByTimeAsync(0);
+ const inputs = vi
+ .mocked(composeContext.drafts.saveDraft)
+ .mock.calls.map(([input]) => input);
+ expect(inputs.map((input) => input.previousThreadId)).toEqual([
+ undefined,
+ 'thread-a',
+ 'thread-b',
+ ]);
+ expect(inputs.map((input) => input.draft.db_id)).toEqual([
+ undefined,
+ 'draft-a',
+ 'draft-b',
+ ]);
+ await state.handleSendTimeChange(new Date('2026-10-01T12:00:00Z'));
+ expect(composeContext.delivery.archive).toHaveBeenLastCalledWith(
+ { threadId: 'thread-c', value: true },
+ 'c'
+ );
+ } finally {
+ state.dispose();
+ }
+ });
+
+ it.each(['standalone', 'reply'] as const)(
+ '%s does not dispatch when scheduling starts during the pending draft save',
+ async (kind) => {
+ const { promise: saving, resolve: finishSaving } =
+ Promise.withResolvers();
+ const { promise: scheduled, resolve: finishScheduling } =
+ Promise.withResolvers();
+ const composeContext = createComposeContext();
+ vi.mocked(composeContext.delivery.schedule).mockReturnValue(scheduled);
+ vi.mocked(composeContext.drafts.saveDraft).mockImplementationOnce(
+ () => saving
+ );
+ const state = composer(kind, composeContext);
+ try {
+ state.send();
+ await vi.advanceTimersByTimeAsync(0);
+ expect(composeContext.drafts.saveDraft).toHaveBeenCalledOnce();
+ const scheduling = state.schedule(new Date('2026-10-01T12:00:00Z'));
+ await vi.advanceTimersByTimeAsync(0);
+ finishSaving({
+ draftId: 'draft',
+ threadId: 'thread',
+ inboxId: 'inbox',
+ });
+ await vi.advanceTimersByTimeAsync(0);
+ expect(composeContext.delivery.sendMessage).not.toHaveBeenCalled();
+ expect(composeContext.delivery.schedule).toHaveBeenCalledOnce();
+ finishScheduling();
+ await scheduling;
+ } finally {
+ state.dispose();
+ }
+ }
+ );
+});
diff --git a/apps/web/src/features/email-compose/primitives/undo-send-claim.ts b/apps/web/src/features/email-compose/primitives/undo-send-claim.ts
new file mode 100644
index 00000000000..879b4649e44
--- /dev/null
+++ b/apps/web/src/features/email-compose/primitives/undo-send-claim.ts
@@ -0,0 +1,13 @@
+const claimedDraftIds = new Set();
+
+/** Claim an undo for this draft. Returns false if one is in flight or done. */
+export function tryBeginUndoSend(draftId: string): boolean {
+ if (claimedDraftIds.has(draftId)) return false;
+ claimedDraftIds.add(draftId);
+ return true;
+}
+
+/** Release a claim — after a failed undo, or when the draft is sent again. */
+export function endUndoSend(draftId: string) {
+ claimedDraftIds.delete(draftId);
+}
diff --git a/apps/web/src/features/email-compose/primitives/undo-store.test.ts b/apps/web/src/features/email-compose/primitives/undo-store.test.ts
new file mode 100644
index 00000000000..d843315cdbc
--- /dev/null
+++ b/apps/web/src/features/email-compose/primitives/undo-store.test.ts
@@ -0,0 +1,36 @@
+import { describe, expect, it, vi } from 'vitest';
+import { createEmailUndoStore } from './undo-store';
+
+describe('independent undo recovery', () => {
+ it('keeps concurrent drafts and live replies separate', () => {
+ const store = createEmailUndoStore<{ draftId: string; html: string }>();
+ const a = { draftId: 'a', html: 'First' };
+ const b = { draftId: 'b', html: 'Second' };
+ const first = vi.fn();
+ const second = vi.fn();
+ store.remember(a);
+ store.remember(b);
+ const cleanupA = store.register('thread-a:reply', first);
+ store.register('thread-b:reply', second);
+ store.restore('thread-a:reply', store.take('a')!);
+ expect(first).toHaveBeenCalledWith(a);
+ expect(second).not.toHaveBeenCalled();
+ cleanupA();
+ store.restore('thread-b:reply', store.take('b')!);
+ expect(second).toHaveBeenCalledWith(b);
+ });
+ it('queues remount recovery and does not let an older owner remove a new registration', () => {
+ const store = createEmailUndoStore<{ draftId: string }>();
+ const snapshot = { draftId: 'draft' };
+ store.restore('thread:reply', snapshot);
+ expect(store.takePending('unrelated')).toBeUndefined();
+ expect(store.takePending('thread:reply')).toBe(snapshot);
+ expect(store.takePending('thread:reply')).toBeUndefined();
+ const old = store.register('thread:reply', vi.fn());
+ const current = vi.fn();
+ store.register('thread:reply', current);
+ old();
+ store.restore('thread:reply', snapshot);
+ expect(current).toHaveBeenCalledWith(snapshot);
+ });
+});
diff --git a/apps/web/src/features/email-compose/primitives/undo-store.ts b/apps/web/src/features/email-compose/primitives/undo-store.ts
new file mode 100644
index 00000000000..0b1fed5530b
--- /dev/null
+++ b/apps/web/src/features/email-compose/primitives/undo-store.ts
@@ -0,0 +1,40 @@
+/** Draft-keyed snapshots and reply-keyed remount recovery. No reactive or application state. */
+export function createEmailUndoStore() {
+ const sent = new Map();
+ const pending = new Map();
+ const listeners = new Map void>();
+ const remember = (snapshot: Snapshot) => {
+ sent.set(snapshot.draftId, snapshot);
+ // Only the recent send toast offers Undo; keep a small bounded recovery history.
+ if (sent.size > 50) sent.delete(sent.keys().next().value!);
+ };
+ return {
+ remember,
+ peek: (draftId: string) => sent.get(draftId),
+ take(draftId: string) {
+ const snapshot = sent.get(draftId);
+ sent.delete(draftId);
+ return snapshot;
+ },
+ takePending(key: string) {
+ const snapshot = pending.get(key);
+ pending.delete(key);
+ return snapshot;
+ },
+ restore(key: string, snapshot: Snapshot) {
+ const listener = listeners.get(key);
+ if (listener) {
+ listener(snapshot);
+ return;
+ }
+ pending.set(key, snapshot);
+ if (pending.size > 50) pending.delete(pending.keys().next().value!);
+ },
+ register(key: string, listener: (snapshot: Snapshot) => void) {
+ listeners.set(key, listener);
+ return () => {
+ if (listeners.get(key) === listener) listeners.delete(key);
+ };
+ },
+ };
+}
diff --git a/apps/web/src/features/email-compose/queries/inbox-source.test.ts b/apps/web/src/features/email-compose/queries/inbox-source.test.ts
new file mode 100644
index 00000000000..be38addb1c8
--- /dev/null
+++ b/apps/web/src/features/email-compose/queries/inbox-source.test.ts
@@ -0,0 +1,82 @@
+import { batch, createRoot, createSignal } from 'solid-js';
+import { expect, it } from 'vitest';
+import { message } from '../../email-message/tests/messages';
+import { createEmailFormState } from '../primitives/email-form-state';
+import { createEmailInboxSource, type EmailInboxQuery } from './inbox-source';
+
+it.each(['pending', 'error'])(
+ 'keeps cached replies but clears inboxes when the owner changes during %s',
+ (nextStatus) =>
+ createRoot((dispose) => {
+ try {
+ const [owner, setOwner] = createSignal('me@example.com');
+ const [status, setStatus] = createSignal('success');
+ const data = {
+ links: [
+ {
+ id: 'secondary',
+ email_address: 'shared@example.com',
+ settings: { signature: ',
+ 'data' | 'isSuccess' | 'isError' | 'isPending'
+>;
+
+/** Expose available inbox metadata, including cached data after a failed refresh. */
+export function createEmailInboxSource(
+ owner: Accessor,
+ query: EmailInboxQuery,
+ displayName: (email: string) => string | undefined
+) {
+ const snapshot = createMemo<{
+ owner: string | undefined;
+ inboxes: EmailInbox[];
+ }>((previous) => {
+ const id = owner();
+ // A newly mounted source can use cached data after a failed refresh.
+ // Once mounted, failed reads may only retain the same owner's snapshot.
+ if (!query.isSuccess && (!query.isError || previous))
+ return {
+ owner: id,
+ inboxes: previous && previous.owner === id ? previous.inboxes : [],
+ };
+ const inboxes = (query.data?.links ?? []).map((inbox) => ({
+ id: inbox.id,
+ email_address: inbox.email_address,
+ photo_url: inbox.photo_url,
+ displayName: displayName(inbox.email_address),
+ settings: {
+ signature: inbox.settings.signature,
+ signature_on_replies_forwards:
+ inbox.settings.signature_on_replies_forwards,
+ },
+ }));
+ return { owner: id, inboxes };
+ });
+ return {
+ inboxes: () => snapshot().inboxes,
+ loading: () => query.isPending,
+ failed: () => query.isError,
+ };
+}
diff --git a/apps/web/src/features/email-compose/tests/capabilities.ts b/apps/web/src/features/email-compose/tests/capabilities.ts
new file mode 100644
index 00000000000..8178f24d53c
--- /dev/null
+++ b/apps/web/src/features/email-compose/tests/capabilities.ts
@@ -0,0 +1,69 @@
+import { vi } from 'vitest';
+import type { EmailComposeContext } from '../context/compose-capabilities';
+/** Fake capabilities: no production modules or app providers are needed by a controller. */
+export function createComposeContext(): EmailComposeContext {
+ return {
+ recipientName: (id) => id,
+ recordMention: vi.fn(),
+ accounts: {
+ inboxes: () => [
+ { id: 'inbox', email_address: 'me@example.com', settings: {} },
+ ],
+ loading: () => false,
+ failed: () => false,
+ primaryId: () => 'inbox',
+ },
+ viewerEmail: () => 'me@example.com',
+ recipients: () => [],
+ hasPaidAccess: () => true,
+ presentation: {
+ viewerLoading: () => false,
+ onUpgrade: vi.fn(),
+ prepareSignatureLinks: vi.fn(),
+ isTouch: () => false,
+ isMobile: () => false,
+ scheduleEnabled: true,
+ signaturesEnabled: () => false,
+ },
+ editorFiles: {
+ readDroppedFiles: vi.fn(),
+ makePublic: vi.fn(),
+ uploadEditorFiles: vi.fn(),
+ },
+ notices: {
+ feedback: {
+ success: vi.fn(),
+ failure: vi.fn(),
+ alert: vi.fn(),
+ dismiss: vi.fn(),
+ },
+ reportError: vi.fn(),
+ },
+ drafts: {
+ saveDraft: vi.fn(async () => ({
+ draftId: 'draft',
+ threadId: 'thread',
+ inboxId: 'inbox',
+ })),
+ deleteDraft: vi.fn(async () => {}),
+ restoreDraft: vi.fn(async () => {}),
+ },
+ delivery: {
+ sendMessage: vi.fn(async () => ({
+ draftId: 'sent',
+ threadId: 'thread',
+ inboxId: 'inbox',
+ })),
+ unschedule: vi.fn(async () => {}),
+ schedule: vi.fn(async () => {}),
+ archive: vi.fn(async () => {}),
+ undoSend: vi.fn(async () => {}),
+ },
+ attachmentStorage: {
+ uploadAttachments: vi.fn(async () => {}),
+ addForwardedAttachments: vi.fn(async () => {}),
+ removeAttachment: vi.fn(async () => {}),
+ removeForwardedAttachment: vi.fn(async () => {}),
+ },
+ };
+}
diff --git a/apps/web/src/features/email-compose/tests/composer.ts b/apps/web/src/features/email-compose/tests/composer.ts
new file mode 100644
index 00000000000..5dec24511fd
--- /dev/null
+++ b/apps/web/src/features/email-compose/tests/composer.ts
@@ -0,0 +1,33 @@
+import { createRoot } from 'solid-js';
+import type {
+ EmailComposeContext,
+ EmailComposeHost,
+} from '../context/compose-capabilities';
+import { createEmailComposer } from '../primitives/email-composer';
+import { createEmailEditor, setEmailEditorText } from './editor';
+
+/** A blank, addressed composer with a real editor and the normal initialization callback. */
+export function mountEmailComposer(
+ context: EmailComposeContext,
+ host?: EmailComposeHost
+) {
+ const root = createRoot((dispose) => ({
+ dispose,
+ state: createEmailComposer({
+ ...context,
+ initialTo: ['colleague@example.com'],
+ host,
+ }),
+ }));
+ const editor = createEmailEditor();
+ root.state.context.captureEditor(editor);
+ root.state.context.onContentChange('');
+ return {
+ ...root,
+ edit(text: string, subject = 'Review') {
+ setEmailEditorText(editor, text);
+ root.state.context.setSubject(subject);
+ root.state.context.onContentChange(text);
+ },
+ };
+}
diff --git a/apps/web/src/features/email-compose/tests/editor.ts b/apps/web/src/features/email-compose/tests/editor.ts
new file mode 100644
index 00000000000..d66f3295cc6
--- /dev/null
+++ b/apps/web/src/features/email-compose/tests/editor.ts
@@ -0,0 +1,30 @@
+import { SupportedNodeTypes } from '@macro-inc/lexical-core';
+import {
+ $createParagraphNode,
+ $createTextNode,
+ $getRoot,
+ createEditor,
+ type LexicalEditor,
+} from 'lexical';
+
+export function createEmailEditor(text = '') {
+ const editor = createEditor({
+ nodes: SupportedNodeTypes,
+ onError(error) {
+ throw error;
+ },
+ });
+ setEmailEditorText(editor, text);
+ return editor;
+}
+
+export function setEmailEditorText(editor: LexicalEditor, text: string) {
+ editor.update(
+ () => {
+ $getRoot()
+ .clear()
+ .append($createParagraphNode().append($createTextNode(text)));
+ },
+ { discrete: true }
+ );
+}
diff --git a/apps/web/src/features/block-email/util/undoSend.ts b/apps/web/src/features/email-compose/undo-send.ts
similarity index 83%
rename from apps/web/src/features/block-email/util/undoSend.ts
rename to apps/web/src/features/email-compose/undo-send.ts
index 12fc4f6a228..8eb2585c00c 100644
--- a/apps/web/src/features/block-email/util/undoSend.ts
+++ b/apps/web/src/features/email-compose/undo-send.ts
@@ -1,11 +1,15 @@
import { toast } from '@core/component/Toast/Toast';
import { Telemetry } from '@macro-inc/observability';
import { queryClient } from '@queries/client';
+import {
+ restoreEmailDraft,
+ unscheduleEmailMessage,
+} from '@queries/email/integration';
import { emailKeys } from '@queries/email/keys';
import { invalidateSoupEntity } from '@queries/soup/cache';
-import { emailClient } from '@service-email/client';
import type { ApiDraftInput } from '@service-email/generated/schemas';
-import { prepareEmailBodyFromHtml } from './prepareEmailBody';
+import { prepareEmailBodyFromHtml } from './primitives/prepare-email-body';
+import { endUndoSend, tryBeginUndoSend } from './primitives/undo-send-claim';
/**
* Guards undo-send against duplicate invocations. The undo toast stays
@@ -17,34 +21,17 @@ import { prepareEmailBodyFromHtml } from './prepareEmailBody';
* failed undo releases it (retry allowed), and a new send of the same draft
* releases it to open the next undo cycle.
*/
-const claimedDraftIds = new Set();
-
-/** Claim an undo for this draft. Returns false if one is in flight or done. */
-export function tryBeginUndoSend(draftId: string): boolean {
- if (claimedDraftIds.has(draftId)) return false;
- claimedDraftIds.add(draftId);
- return true;
-}
-
-/** Release a claim — after a failed undo, or when the draft is sent again. */
-export function endUndoSend(draftId: string) {
- claimedDraftIds.delete(draftId);
-}
-
/**
* Unschedule with one retry on transient failures (network errors, 5xx from a
* redeploy or proxy blip). Retrying is safe: the endpoint treats an
* already-undone send as success. 400 (already sent — the undo window passed)
* and 404 (not found) are definitive and not retried.
*/
-export async function unscheduleWithRetry(
+async function unscheduleWithRetry(
draftId: string,
linkId: string | undefined
) {
- const first = await emailClient.unscheduleMessage(
- { draftID: draftId },
- linkId
- );
+ const first = await unscheduleEmailMessage({ draftID: draftId }, linkId);
if (first.isOk()) return first;
const definitive = first.error.some(
(e) =>
@@ -53,7 +40,7 @@ export async function unscheduleWithRetry(
);
if (definitive) return first;
await new Promise((resolve) => setTimeout(resolve, 500));
- return emailClient.unscheduleMessage({ draftID: draftId }, linkId);
+ return unscheduleEmailMessage({ draftID: draftId }, linkId);
}
/**
@@ -127,7 +114,7 @@ export async function restoreDraftBodyAfterUndo(
linkId: string | undefined
): Promise {
const prepared = prepareEmailBodyFromHtml(bodyHtml);
- const saveResult = await emailClient.createDraft(
+ const saveResult = await restoreEmailDraft(
{ draft: { ...draft, body_html: prepared.bodyHtml } },
linkId
);
diff --git a/apps/web/src/features/block-email/component/compose/ComposeBody.tsx b/apps/web/src/features/email-compose/views/compose-body.tsx
similarity index 72%
rename from apps/web/src/features/block-email/component/compose/ComposeBody.tsx
rename to apps/web/src/features/email-compose/views/compose-body.tsx
index 68b0be5b2ad..7aba8e44833 100644
--- a/apps/web/src/features/block-email/component/compose/ComposeBody.tsx
+++ b/apps/web/src/features/email-compose/views/compose-body.tsx
@@ -1,15 +1,8 @@
-import { EmailAttachmentPill } from '@block-email/component/AttachmentPill';
-import type { DraftFormAttachment } from '@block-email/component/createEmailFormState';
-import { MacroSignatureButton } from '@block-email/component/MacroSignatureButton';
-import { addUserMentionToCc } from '@block-email/util/mentionToCc';
-import { useSplitPanel } from '@components/app/split-layout/layoutUtils';
+import { EmailAttachmentPill } from '@app/features/email-message/components/attachment-pill';
import { FileDropOverlay } from '@core/component/FileDropOverlay';
import { MarkdownTextarea } from '@core/component/LexicalMarkdown/component/core/MarkdownTextarea';
-import { createFilesReadyHandler } from '@core/component/LexicalMarkdown/utils/fileUploadUtils';
import { fileFolderDrop } from '@core/directive/fileFolderDrop';
-import { handleFileFolderDrop } from '@core/util/upload';
import { Telemetry } from '@macro-inc/observability';
-
import { cn, Scroll } from '@ui';
import type { LexicalEditor } from 'lexical';
import {
@@ -23,10 +16,10 @@ import {
Show,
Switch,
} from 'solid-js';
-import type { FocusableElement } from 'tabbable';
-import { tabbable } from 'tabbable';
-import { makeAttachmentPublic } from '../../util/makeAttachmentPublic';
-import { useCompose } from './ComposeContext';
+import { MacroSignatureButton } from '../components/macro-signature-button';
+import { useCompose } from '../context/compose-context';
+import type { DraftFormAttachment } from '../primitives/email-form-state';
+import { addUserMentionToCc } from '../primitives/mention-to-cc';
false && fileFolderDrop;
@@ -37,54 +30,10 @@ export function ComposeBody(props: {
onAddFiles?: (files: File[]) => void;
}) {
const ctx = useCompose();
- const panel = useSplitPanel();
const [editor, setEditor] = createSignal();
const [isDragging, setIsDragging] = createSignal();
- const focusSibling = (direction: 'next' | 'prev') => {
- const panelRef = panel?.panelRef();
- if (!panelRef) return;
- const tabbableEls = tabbable(panelRef);
- const activeEl = document.activeElement;
- const activeElIndex = tabbableEls.indexOf(activeEl as FocusableElement);
- if (activeElIndex > -1) {
- const ndx = activeElIndex + (direction === 'next' ? 1 : -1);
- if (ndx < 0 || ndx >= tabbableEls.length) return false;
- const prevEl = tabbableEls[ndx];
- if (!prevEl) return false;
- prevEl.focus();
- return true;
- }
- tabbableEls.at(-1)?.focus();
- return true;
- };
-
- const onAddFilesAndDirs = (
- files: FileSystemFileEntry[],
- directories: FileSystemDirectoryEntry[]
- ) => {
- const editor_ = editor();
- if (!editor_) return;
-
- handleFileFolderDrop(
- files,
- directories,
- createFilesReadyHandler(
- editor_,
- undefined,
- undefined,
- undefined,
- (uploadedItemIds) => {
- uploadedItemIds.forEach((itemId) => {
- makeAttachmentPublic(itemId);
- });
- },
- { width: 542, height: 542 }
- )
- );
- };
-
let bodyDiv!: HTMLDivElement;
const logComposeBody = (event: string, details?: Record) => {
@@ -149,8 +98,8 @@ export function ComposeBody(props: {
onDragStart: (valid) => setIsDragging(valid),
onDragEnd: () => setIsDragging(false),
onDrop: (files, dirs) => {
- handleFileFolderDrop(files, dirs, (u) =>
- props.onAddFiles?.(u.map((f) => f.file))
+ ctx.bodyActions.readDroppedFiles(files, dirs, (files) =>
+ props.onAddFiles?.(files)
);
},
}}
@@ -165,6 +114,7 @@ export function ComposeBody(props: {
floatingFormatMenu
domRef={props.inputRef}
captureEditor={captureEditor}
+ onInitialized={ctx.onEditorInitialized}
scrollRef={props.mobileScrollRef}
initialHtml={ctx.initialHtml()}
initialValue={ctx.initialMarkdown?.()}
@@ -172,7 +122,12 @@ export function ComposeBody(props: {
editable={() => !ctx.disabled()}
placeholder="Use `@` to reference files"
watermark={
- !ctx.hasPaidAccess() ?
diff --git a/apps/web/src/features/block-email/component/compose/ComposeLayout.tsx b/apps/web/src/features/email-compose/views/compose-layout.tsx
similarity index 92%
rename from apps/web/src/features/block-email/component/compose/ComposeLayout.tsx
rename to apps/web/src/features/email-compose/views/compose-layout.tsx
index c14d53ca40e..82d85f061cd 100644
--- a/apps/web/src/features/block-email/component/compose/ComposeLayout.tsx
+++ b/apps/web/src/features/email-compose/views/compose-layout.tsx
@@ -1,14 +1,14 @@
import { CircleSpinner } from '@core/component/CircleSpinner';
import { registerHotkey, useHotkeyDOMScope } from '@core/hotkey/hotkeys';
import { TOKENS } from '@core/hotkey/tokens';
-import { isMobile } from '@core/mobile/isMobile';
+
import { Button, cn } from '@ui';
import { createSignal, type JSX, onMount, Show, Suspense } from 'solid-js';
-import { FromInboxSelector } from '../FromInboxSelector';
-import { ComposeBody } from './ComposeBody';
-import { useCompose } from './ComposeContext';
-import { ComposeRecipients } from './ComposeRecipients';
-import { ComposeSubject } from './ComposeSubject';
+import { FromInboxSelector } from '../components/from-inbox-selector';
+import { useCompose } from '../context/compose-context';
+import { ComposeBody } from './compose-body';
+import { ComposeRecipients } from './compose-recipients';
+import { ComposeSubject } from './compose-subject';
type ComposeLayoutRefs = {
directRecipientsSelector: HTMLElement | undefined;
@@ -166,7 +166,7 @@ export function ComposeLayout(props: {
// Uncommitted text in either field also blocks the fold so it isn't
// silently discarded.
const collapseCcBccIfEmpty = () => {
- if (!isMobile()) return;
+ if (!ctx.isMobile()) return;
if (ctx.recipients().cc.length > 0 || ctx.recipients().bcc.length > 0)
return;
const hasPendingInput = [
@@ -191,7 +191,7 @@ export function ComposeLayout(props: {
` separators, matching how Gmail structures composed mail. + * Email clients apply their own margins to `
`, so relying on them renders
+ * differently per client. The editor shows a paragraph break as a blank line,
+ * so non-empty paragraphs are joined by two `
`s; empty paragraphs already
+ * export their own `
` and need no extra separator.
+ */
+export function flattenConsecutiveParagraphs(container: Element) {
+ let nextSibling: Element | null = null;
+ let div: HTMLDivElement | undefined;
+
+ for (const p of container.querySelectorAll('p')) {
+ const attributes = Array.from(p.attributes);
+ if (
+ !div ||
+ p !== nextSibling ||
+ div.attributes.length !== attributes.length ||
+ attributes.some(({ name, value }) => div?.getAttribute(name) !== value)
+ ) {
+ div = document.createElement('div');
+ for (const { name, value } of attributes) div.setAttribute(name, value);
+ p.before(div);
+ }
+ nextSibling = p.nextElementSibling;
+ const isEmpty =
+ !p.textContent?.trim() && !p.querySelector('img, video, iframe, canvas');
+ div.append(...p.childNodes);
+ if (nextSibling?.matches('p') && !isEmpty) {
+ // Retain the blank line even when the next paragraph has a different style.
+ div.append(document.createElement('br'), document.createElement('br'));
+ }
+ p.remove();
+ }
+}
diff --git a/apps/web/src/features/email-compose/primitives/mention-to-cc.test.ts b/apps/web/src/features/email-compose/primitives/mention-to-cc.test.ts
new file mode 100644
index 00000000000..75bb233e700
--- /dev/null
+++ b/apps/web/src/features/email-compose/primitives/mention-to-cc.test.ts
@@ -0,0 +1,32 @@
+import { describe, expect, it, vi } from 'vitest';
+import { convertContactInfoToEmailRecipient } from '../core/recipient-conversion';
+import { addUserMentionToCc } from './mention-to-cc';
+
+describe('mention recipients', () => {
+ it('adds a known contact once and leaves recipients in To or Bcc untouched', () => {
+ const contact = convertContactInfoToEmailRecipient({
+ email: 'person@example.com',
+ name: 'Person',
+ });
+ const setCc = vi.fn();
+ const onRecipientAdded = vi.fn();
+ const params = {
+ mention: { email: contact.data.email },
+ recipientOptions: [contact],
+ toRecipients: [],
+ ccRecipients: [],
+ bccRecipients: [],
+ setCc,
+ onRecipientAdded,
+ };
+ addUserMentionToCc(params);
+ expect(setCc).toHaveBeenCalledWith([contact]);
+ expect(onRecipientAdded).toHaveBeenCalledWith(contact.data.email);
+ setCc.mockClear();
+ onRecipientAdded.mockClear();
+ for (const field of ['toRecipients', 'ccRecipients', 'bccRecipients'])
+ addUserMentionToCc({ ...params, [field]: [contact] });
+ expect(setCc).not.toHaveBeenCalled();
+ expect(onRecipientAdded).not.toHaveBeenCalled();
+ });
+});
diff --git a/apps/web/src/features/block-email/util/mentionToCc.ts b/apps/web/src/features/email-compose/primitives/mention-to-cc.ts
similarity index 67%
rename from apps/web/src/features/block-email/util/mentionToCc.ts
rename to apps/web/src/features/email-compose/primitives/mention-to-cc.ts
index 0349615f14d..b46c3c61fd1 100644
--- a/apps/web/src/features/block-email/util/mentionToCc.ts
+++ b/apps/web/src/features/email-compose/primitives/mention-to-cc.ts
@@ -1,15 +1,15 @@
-import type { EmailRecipient } from '@block-email/component/EmailContext';
-import { convertContactInfoToEmailRecipient } from '@block-email/util/recipientConversion';
-import type { UserMentionRecord } from '@core/component/LexicalMarkdown/utils/mentionsUtils';
-import { toast } from '@core/component/Toast/Toast';
+import type { EmailRecipient } from '@app/features/email-compose/core/email-recipient';
+
+import { convertContactInfoToEmailRecipient } from '../core/recipient-conversion';
export function addUserMentionToCc(params: {
- mention: UserMentionRecord;
+ mention: { email?: string };
recipientOptions: EmailRecipient[];
toRecipients: EmailRecipient[];
ccRecipients: EmailRecipient[];
bccRecipients: EmailRecipient[];
setCc: (next: EmailRecipient[]) => void;
+ onRecipientAdded?: (email: string) => void;
}) {
const {
mention,
@@ -38,5 +38,5 @@ export function addUserMentionToCc(params: {
convertContactInfoToEmailRecipient({ email: mentionEmail });
setCc([...ccRecipients, userOption]);
- toast.success(`${mentionEmail} added to CC`);
+ params.onRecipientAdded?.(mentionEmail);
}
diff --git a/apps/web/src/features/email-compose/primitives/prepare-email-body.test.ts b/apps/web/src/features/email-compose/primitives/prepare-email-body.test.ts
new file mode 100644
index 00000000000..556d19b55b6
--- /dev/null
+++ b/apps/web/src/features/email-compose/primitives/prepare-email-body.test.ts
@@ -0,0 +1,110 @@
+// @vitest-environment jsdom
+
+import { $generateNodesFromDOM } from '@lexical/html';
+import { DocumentMentionNode } from '@macro-inc/lexical-core';
+import { $getRoot, $nodesOfType, createEditor } from 'lexical';
+import { describe, expect, it } from 'vitest';
+import { message } from '../../email-message/tests/messages';
+import { decodeBase64Utf8 } from '../core/decode-base64';
+import { prepareEmailBodyFromHtml } from './prepare-email-body';
+
+const replyingTo = message('original', {
+ from: { name: 'Ada Lovelace', email: 'ada@example.com' },
+ to: [],
+ cc: [],
+ bcc: [],
+ subject: 'Numbers',
+ body_html_sanitized: null,
+ body_text: 'original message text',
+ internal_date_ts: '2026-08-01T12:00:00Z',
+ attachments: [],
+});
+
+describe('prepareEmailBodyFromHtml', () => {
+ it.each(['reply', 'forward'] as const)(
+ 'keeps quoted Macro document links re-importable as rich mentions in a %s',
+ (replyType) => {
+ const prepared = prepareEmailBodyFromHtml('
My reply
', { + replyType, + replyingTo: { + ...replyingTo, + body_html_sanitized: + 'Read Architecture
', + }, + }); + const dom = new DOMParser().parseFromString( + decodeBase64Utf8(prepared.bodyHtml), + 'text/html' + ); + const editor = createEditor({ + nodes: [DocumentMentionNode], + onError(error) { + throw error; + }, + }); + editor.update( + () => $getRoot().append(...$generateNodesFromDOM(editor, dom)), + { discrete: true } + ); + editor.read(() => { + expect( + $nodesOfType(DocumentMentionNode).map((node) => node.exportJSON()) + ).toMatchObject([ + { + documentId: 'document-123', + documentName: 'Architecture', + blockName: 'md', + }, + ]); + }); + } + ); + it.each(['reply', 'forward'] as const)( + 'preserves original theme rules and image-map links in an outgoing %s', + (replyType) => { + const prepared = prepareEmailBodyFromHtml('My reply
', { + replyType, + replyingTo: { + ...replyingTo, + body_html_sanitized: + '', + }, + }); + const decoded = decodeBase64Utf8(prepared.bodyHtml); + expect(decoded).toContain('prefers-color-scheme'); + expect(decoded).toContain('var(--tone,black)'); + expect(decoded).toContain('href="https://example.com/accept"'); + } + ); + it('does not add a quote block without appendReply (undo-send restore)', () => { + const prepared = prepareEmailBodyFromHtml('hi there
'); + const decoded = decodeBase64Utf8(prepared.bodyHtml); + expect(decoded).toContain('hi there'); + expect(decoded).not.toContain('macro_quote'); + }); + + it('appends the replied-to message when appendReply is provided', () => { + const prepared = prepareEmailBodyFromHtml('hi there
', { + replyType: 'reply', + replyingTo, + }); + const decoded = decodeBase64Utf8(prepared.bodyHtml); + const body = new DOMParser().parseFromString(decoded, 'text/html').body; + const quotes = body.querySelectorAll('.macro_quote'); + expect(quotes).toHaveLength(1); + expect(quotes[0].textContent).toContain('original message text'); + expect(quotes[0].textContent).toContain('wrote:'); + }); + + it('does not double-append when the quote is already in the body', () => { + const prepared = prepareEmailBodyFromHtml( + 'hi there
already quoted
',
+ { replyType: 'reply', replyingTo }
+ );
+ const decoded = decodeBase64Utf8(prepared.bodyHtml);
+ const body = new DOMParser().parseFromString(decoded, 'text/html').body;
+ const quotes = body.querySelectorAll('.macro_quote');
+ expect(quotes).toHaveLength(1);
+ expect(quotes[0].textContent).toContain('already quoted');
+ });
+});
diff --git a/apps/web/src/features/block-email/util/prepareEmailBody.ts b/apps/web/src/features/email-compose/primitives/prepare-email-body.ts
similarity index 89%
rename from apps/web/src/features/block-email/util/prepareEmailBody.ts
rename to apps/web/src/features/email-compose/primitives/prepare-email-body.ts
index 9a7a122b8e2..104a90f04d4 100644
--- a/apps/web/src/features/block-email/util/prepareEmailBody.ts
+++ b/apps/web/src/features/email-compose/primitives/prepare-email-body.ts
@@ -1,9 +1,10 @@
+import type { EmailMessage } from '@app/features/email-message/core/email-message';
import { convertDocumentMentionsToLinks } from '@core/component/LexicalMarkdown/utils/convertDocumentMentionsToLinks';
-import { scrubActiveContent } from '@core/email';
import { formatEmailDate } from '@core/util/date';
import { $generateHtmlFromNodes, $generateNodesFromDOM } from '@lexical/html';
import { $createQuoteNode } from '@lexical/rich-text';
import { $dfsIterator } from '@lexical/utils';
+import { sanitizeEmailHtml } from '@macro-inc/email-renderer';
import type { DocumentMentionInfo } from '@macro-inc/lexical-core';
import {
$createClassedBlockNode,
@@ -12,7 +13,6 @@ import {
$isClassedBlockNode,
type ClassedBlockNode,
} from '@macro-inc/lexical-core';
-import type { ApiMessage } from '@service-email/generated/schemas';
import {
$addUpdateTag,
$createLineBreakNode,
@@ -22,12 +22,14 @@ import {
$isLineBreakNode,
$setSelection,
COMMAND_PRIORITY_EDITOR,
- createCommand,
type LexicalEditor,
type LexicalNode,
} from 'lexical';
-import { flattenConsecutiveParagraphs } from './flattenConsecutiveParagraphs';
-import type { ReplyType } from './replyType';
+import type { ReplyType } from '../core/reply-type';
+import { TOGGLE_APPEND_EMAIL_THREAD_COMMAND } from './email-editor-commands';
+import { flattenConsecutiveParagraphs } from './flatten-consecutive-paragraphs';
+
+export { TOGGLE_APPEND_EMAIL_THREAD_COMMAND } from './email-editor-commands';
export function clearEmailBody(editor: LexicalEditor | undefined) {
if (!editor) return;
@@ -42,21 +44,12 @@ export function clearEmailBody(editor: LexicalEditor | undefined) {
);
}
-export const TOGGLE_APPEND_EMAIL_THREAD_COMMAND = createCommand<{
- replyingTo: ApiMessage | undefined;
- replyType?: ReplyType;
- visible: boolean;
- /** Whether the quoted message is personal (drives theme-adapted rendering
- * of the quoted html, matching the message view) */
- isPersonal?: boolean;
-}>('TOGGLE_APPEND_EMAIL_THREAD_COMMAND');
-
type HeaderDescriptor =
| { kind: 'forward'; lines: string[] }
| { kind: 'reply'; text: string };
function buildHeaderDescriptor(
- replyingTo: ApiMessage,
+ replyingTo: EmailMessage,
replyType: ReplyType | undefined
): HeaderDescriptor {
const replyingToDate = replyingTo.internal_date_ts ?? replyingTo.created_at;
@@ -112,7 +105,7 @@ function buildHeaderDescriptor(
}
function $generateHeaderNodes(
- replyingTo: ApiMessage,
+ replyingTo: EmailMessage,
replyType: ReplyType | undefined
): LexicalNode[] {
const descriptor = buildHeaderDescriptor(replyingTo, replyType);
@@ -152,7 +145,7 @@ const REPLYING_TO_ID_ATTRIBUTE = 'data-replying-to-id';
const $appendPreviousEmail = (
editor: LexicalEditor,
- replyingTo: ApiMessage | undefined,
+ replyingTo: EmailMessage | undefined,
replyType: ReplyType | undefined,
isPersonal?: boolean
) => {
@@ -179,10 +172,10 @@ const $appendPreviousEmail = (
quoteNode.append(textNode);
} else {
const parser = new DOMParser();
- const dom = parser.parseFromString(replyingToBodyHTML, 'text/html');
- // The quoted body ends up in the live document (adopted nodes, or a shadow
- // root inside the html-render node), so scrub it while it is still inert.
- scrubActiveContent(dom);
+ const dom = parser.parseFromString(
+ sanitizeEmailHtml(replyingToBodyHTML),
+ 'text/html'
+ );
// Forwards always embed the original as a non-editable HTML Render Node so
// the recipient gets the exact original markup. For replies, a table is a
// good indicator of content we can't convert into editable nodes correctly.
@@ -208,13 +201,13 @@ const $appendPreviousEmail = (
return true;
};
-function* $findPreviousEmailNode(replyingToID: string | undefined) {
- if (!replyingToID) yield;
+function* $findPreviousEmailNode(replyingToId: string | undefined) {
+ if (!replyingToId) yield;
for (const { node } of $dfsIterator()) {
if (!$isClassedBlockNode(node)) continue;
- const replyingToIDAttr = node.__attributes?.[REPLYING_TO_ID_ATTRIBUTE];
- if (!replyingToIDAttr || replyingToIDAttr !== replyingToID) {
+ const replyingToIdAttr = node.__attributes?.[REPLYING_TO_ID_ATTRIBUTE];
+ if (!replyingToIdAttr || replyingToIdAttr !== replyingToId) {
// In our case, quoted text replies do not exist more than once in the
// same message so returning any classed block node with the proper class
// should be valid. This is probably fine but we might not want to do this.
@@ -232,14 +225,14 @@ function* $findPreviousEmailNode(replyingToID: string | undefined) {
function removeAppendedThread(
editor: LexicalEditor,
- replyingToID: string | undefined
+ replyingToId: string | undefined
) {
- if (!replyingToID) return;
+ if (!replyingToId) return;
editor.update(
() => {
$addUpdateTag('skip-dom-selection');
- for (const node of $findPreviousEmailNode(replyingToID)) {
+ for (const node of $findPreviousEmailNode(replyingToId)) {
if (!node) continue;
node.remove();
@@ -256,13 +249,18 @@ export function registerToggleAppendedThread(editor: LexicalEditor) {
// Programmatic content change: don't let selection reconciliation
// move DOM focus into the editor
$addUpdateTag('skip-dom-selection');
- const replyingToID = replyingTo?.replying_to_id ?? undefined;
+ const replyingToId =
+ replyingTo?.db_id ?? replyingTo?.replying_to_id ?? undefined;
if (!visible) {
- removeAppendedThread(editor, replyingToID);
+ removeAppendedThread(editor, replyingToId);
return true;
}
+ // Restoring a draft or remounting a forward may request visibility again.
+ for (const node of $findPreviousEmailNode(replyingToId)) {
+ if (node) return true;
+ }
$appendPreviousEmail(editor, replyingTo, replyType, isPersonal);
// Appending leaves a dirty selection inside the quote; any later
// update would flush it to the DOM and steal focus into the editor
@@ -329,7 +327,7 @@ async function _appendItemsAsMacroMentions(
}
function getAppendedReplyElement(
- replyingTo: ApiMessage,
+ replyingTo: EmailMessage,
replyType: ReplyType | undefined
) {
const wrapper = document.createElement('div');
@@ -358,12 +356,9 @@ function getAppendedReplyElement(
quote.textContent = replyingTo.body_text ?? '';
} else {
const innerDom = new DOMParser().parseFromString(
- replyingToBodyHTML,
+ sanitizeEmailHtml(replyingToBodyHTML),
'text/html'
);
- // These nodes are adopted into the live document below, which starts image
- // loads — scrub before that, not after.
- scrubActiveContent(innerDom);
// Extract style tags from head to preserve email styling for weirdo emails with initial style tags.
const styleTags = innerDom.head?.querySelectorAll('style');
styleTags?.forEach((style) => {
@@ -397,7 +392,7 @@ export function prepareEmailBody(
// if this argument is provided, we append the message being replied to the html email body
appendReply?: {
replyType: ReplyType | undefined;
- replyingTo: ApiMessage;
+ replyingTo: EmailMessage;
}
): {
bodyHtml: string;
@@ -421,7 +416,7 @@ export function prepareEmailBodyFromHtml(
generatedHtml: string,
appendReply?: {
replyType: ReplyType | undefined;
- replyingTo: ApiMessage;
+ replyingTo: EmailMessage;
}
): {
bodyHtml: string;
diff --git a/apps/web/src/features/email-compose/primitives/reply-composer-focus.test.ts b/apps/web/src/features/email-compose/primitives/reply-composer-focus.test.ts
new file mode 100644
index 00000000000..a9746993050
--- /dev/null
+++ b/apps/web/src/features/email-compose/primitives/reply-composer-focus.test.ts
@@ -0,0 +1,91 @@
+import { createRoot } from 'solid-js';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { createReplyComposerFocus } from './reply-composer-focus';
+
+const disposers: (() => void)[] = [];
+beforeEach(() => {
+ vi.useFakeTimers();
+ vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) =>
+ setTimeout(() => callback(0), 16)
+ );
+ vi.stubGlobal('cancelAnimationFrame', clearTimeout);
+});
+afterEach(() => {
+ disposers.splice(0).forEach((dispose) => dispose());
+ document.body.replaceChildren();
+ vi.unstubAllGlobals();
+ vi.useRealTimers();
+});
+
+function setup() {
+ const container = document.createElement('div');
+ const to = document.createElement('input');
+ const body = document.createElement('div');
+ const editorInput = document.createElement('input');
+ body.append(editorInput);
+ container.append(to, body);
+ document.body.append(container);
+ const editor = { focus: vi.fn(() => editorInput.focus()) };
+ const expandRecipients = vi.fn();
+ return createRoot((dispose) => {
+ disposers.push(dispose);
+ const focus = createReplyComposerFocus({
+ editor: () => editor,
+ container: () => container,
+ footer: () => undefined,
+ scrollContainer: () => body,
+ toInput: () => to,
+ expandRecipients,
+ });
+ return { dispose, focus, editor, to, editorInput, expandRecipients };
+ });
+}
+
+describe('reply focus lifetime', () => {
+ it('holds forward focus through editor reconciliation until deliberate interaction', () => {
+ const state = setup();
+ state.focus.forward();
+ expect(state.expandRecipients).toHaveBeenCalledOnce();
+ vi.advanceTimersByTime(100);
+ expect(document.activeElement).toBe(state.to);
+ state.editorInput.focus();
+ expect(document.activeElement).toBe(state.to);
+ document.dispatchEvent(new Event('pointerdown'));
+ state.editorInput.focus();
+ expect(document.activeElement).toBe(state.editorInput);
+ });
+
+ it('cancels queued focus and removes the forward focus guard on disposal', () => {
+ const state = setup();
+ const onFocused = vi.fn();
+ state.focus.forward();
+ vi.advanceTimersByTime(100);
+ expect(document.activeElement).toBe(state.to);
+ state.focus.forward();
+ state.focus.reply();
+ state.focus.editor(onFocused);
+ state.dispose();
+ state.editorInput.focus();
+ expect(document.activeElement).toBe(state.editorInput);
+ vi.runAllTimers();
+ expect(state.editor.focus).not.toHaveBeenCalled();
+ expect(onFocused).not.toHaveBeenCalled();
+ expect(document.activeElement).not.toBe(state.to);
+ });
+
+ it('disarms forward focus when keyboard navigation or outside focus takes over', () => {
+ const state = setup();
+ state.focus.forward();
+ vi.advanceTimersByTime(100);
+ document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
+ state.editorInput.focus();
+ expect(document.activeElement).toBe(state.editorInput);
+ state.focus.forward();
+ vi.advanceTimersByTime(100);
+ const outside = document.createElement('input');
+ document.body.append(outside);
+ outside.focus();
+ state.editorInput.focus();
+ expect(document.activeElement).toBe(state.editorInput);
+ });
+});
diff --git a/apps/web/src/features/email-compose/primitives/reply-composer-focus.ts b/apps/web/src/features/email-compose/primitives/reply-composer-focus.ts
new file mode 100644
index 00000000000..fddc1e9cffa
--- /dev/null
+++ b/apps/web/src/features/email-compose/primitives/reply-composer-focus.ts
@@ -0,0 +1,86 @@
+import { makeEventListener } from '@solid-primitives/event-listener';
+import { type Accessor, onCleanup, onMount } from 'solid-js';
+
+/** Keeps forward recipients focused through Lexical's deferred selection work. */
+export function createReplyComposerFocus(options: {
+ editor: Accessor<{ focus(): void } | undefined>;
+ container: AccessorShared signature
' }, + }, + ], + }; + const query = { + get isSuccess() { + return status() === 'success'; + }, + get isError() { + return status() === 'error'; + }, + get isPending() { + return status() === 'pending'; + }, + get data() { + if (status() === 'pending') throw new Error('suspending read'); + return data; + }, + } as unknown as EmailInboxQuery; + const source = createEmailInboxSource( + owner, + query, + () => 'Shared Inbox' + ); + setStatus('error'); + const parent = message('parent', { + link_id: 'secondary', + from: { email: 'shared@example.com' }, + to: [{ email: 'colleague@example.com' }], + }); + const form = createEmailFormState( + { viewerEmail: owner, inboxes: source.inboxes }, + { type: 'replying_to', messageId: 'parent' }, + { + getMessageById: () => parent, + getDraftForMessageReply: () => undefined, + } + ); + expect(form.selectedInboxId()).toBe('secondary'); + expect(form.recipients().to.map((item) => item.data.email)).toEqual([ + 'colleague@example.com', + ]); + expect(source.inboxes()[0].settings.signature).toContain( + 'Shared signature' + ); + const reopened = createEmailInboxSource( + owner, + query, + () => 'Shared Inbox' + ); + expect(reopened.inboxes()[0].id).toBe('secondary'); + batch(() => { + setOwner('other@example.com'); + setStatus(nextStatus); + }); + expect(source.inboxes()).toEqual([]); + setStatus('pending'); + setStatus('error'); + expect(source.inboxes()).toEqual([]); + } finally { + dispose(); + } + }) +); diff --git a/apps/web/src/features/email-compose/queries/inbox-source.ts b/apps/web/src/features/email-compose/queries/inbox-source.ts new file mode 100644 index 00000000000..1e8d7f95b91 --- /dev/null +++ b/apps/web/src/features/email-compose/queries/inbox-source.ts @@ -0,0 +1,46 @@ +import type { useEmailLinksQuery } from '@queries/email/link'; +import { type Accessor, createMemo } from 'solid-js'; +import type { EmailInbox } from '../context/compose-capabilities'; + +export type EmailInboxQuery = Pick< + ReturnType
{props.label}
@@ -146,7 +148,9 @@ export function ComposeRecipients(props: {
const inputEls: Partial> = {};
const showSummary = (field: RecipientFieldId) =>
- isMobile() && activeField() !== field && ctx.recipients()[field].length > 0;
+ ctx.isMobile() &&
+ activeField() !== field &&
+ ctx.recipients()[field].length > 0;
const summaryParts = (field: RecipientFieldId) => {
const names = ctx.recipients()[field].map(recipientName).filter(Boolean);
@@ -204,18 +208,18 @@ export function ComposeRecipients(props: {
selectedOptions={ctx.recipients()[field]}
setSelectedOptions={(next) => {
ctx.setRecipients(field, next);
- if (isMobile()) {
+ if (ctx.isMobile()) {
clearTimeout(collapseTimer);
activate(field);
}
}}
- placeholder={isMobile() ? '' : 'Macro users or email addresses'}
+ placeholder={ctx.isMobile() ? '' : 'Macro users or email addresses'}
focusOnMount={opts?.focusOnMount}
openOnFocus={false}
hideBorder
class={cn(
'bg-transparent [&_input]:ml-0!',
- isMobile() && '[&_input]:min-w-16! [&_input]:min-h-9!'
+ ctx.isMobile() && '[&_input]:min-w-16! [&_input]:min-h-9!'
)}
noPadding
disabled={ctx.disabled()}
@@ -273,7 +277,7 @@ export function ComposeRecipients(props: {
props.setShowBcc(true);
};
- const fieldLabel = (text: string) => (isMobile() ? `${text}:` : text);
+ const fieldLabel = (text: string) => (ctx.isMobile() ? `${text}:` : text);
const toRow = (handlers?: RowFocusHandlers) =>
fieldRow(
@@ -314,7 +318,7 @@ export function ComposeRecipients(props: {
return (
{toRow()}
@@ -348,9 +352,10 @@ export function ComposeRecipients(props: {
ctx.onSelectFromLink?.(id)}
+ activeInboxId={ctx.selectedInboxId?.()}
+ onSelect={(id) => ctx.onSelectInbox?.(id)}
/>
diff --git a/apps/web/src/features/block-email/component/compose/ComposeSubject.tsx b/apps/web/src/features/email-compose/views/compose-subject.tsx
similarity index 90%
rename from apps/web/src/features/block-email/component/compose/ComposeSubject.tsx
rename to apps/web/src/features/email-compose/views/compose-subject.tsx
index 3d85414e79a..579fbccdc92 100644
--- a/apps/web/src/features/block-email/component/compose/ComposeSubject.tsx
+++ b/apps/web/src/features/email-compose/views/compose-subject.tsx
@@ -1,7 +1,6 @@
-import { isMobile } from '@core/mobile/isMobile';
import { cn } from '@ui';
import { createSignal, Show } from 'solid-js';
-import { useCompose } from './ComposeContext';
+import { useCompose } from '../context/compose-context';
function autosize(el: HTMLTextAreaElement) {
el.style.height = 'auto';
@@ -19,7 +18,7 @@ export function ComposeSubject(props: {
let textareaRef: HTMLTextAreaElement | undefined;
const showSummary = () =>
- isMobile() && !editing() && ctx.subject().length > 0;
+ ctx.isMobile() && !editing() && ctx.subject().length > 0;
const blurOnEscape = (
e: KeyboardEvent & { currentTarget: HTMLInputElement }
@@ -33,20 +32,20 @@ export function ComposeSubject(props: {
From:
- {isMobile() ? 'Subject:' : 'Subject'}
+ {ctx.isMobile() ? 'Subject:' : 'Subject'}
-
-
-
-
+
+
+
+
+
+
+
+ }
+ >
+
+
+
+ {/* Expanded CC */}
+ 0}>
+
+
+
+ {/* Expanded BCC */}
+ 0}>
+
+
+
+
+
+
+
+
+
+
+ From
+
+
+
+
+
+
+
+
+
+
+ To
+
+
+ Cc
+
+
+ Bcc
+
+
+
+
+ }
+ >
+ Subject
+ {
+ props.onSubjectChange(e.currentTarget.value);
+ }}
+ onKeyDown={(e) => {
+ if (e.key !== 'Escape') return;
+ e.preventDefault();
+ e.currentTarget.blur();
+ }}
+ placeholder="Subject"
+ />
+
+
+
+
+ 0}>
+
+
+
+
+ 0}>
+
+
+
+
+
+
+ );
+}
diff --git a/apps/web/src/features/email-compose/views/reply-input.tsx b/apps/web/src/features/email-compose/views/reply-input.tsx
new file mode 100644
index 00000000000..ca9beaceca9
--- /dev/null
+++ b/apps/web/src/features/email-compose/views/reply-input.tsx
@@ -0,0 +1,598 @@
+import { EmailAttachmentPill } from '@app/features/email-message/components/attachment-pill';
+import { FileDropOverlay } from '@core/component/FileDropOverlay';
+import { buildConfig } from '@core/component/LexicalMarkdown/builder/MarkdownConfigBuilder';
+import { MarkdownShell } from '@core/component/LexicalMarkdown/builder/MarkdownShell';
+import { iosCursorScrollPlugin } from '@core/component/LexicalMarkdown/plugins/ios-cursor-scroll';
+import { fileFolderDrop } from '@core/directive/fileFolderDrop';
+import { fileSelector } from '@core/directive/fileSelector';
+import { registerHotkey, useHotkeyDOMScope } from '@core/hotkey/hotkeys';
+import { TOKENS } from '@core/hotkey/tokens';
+import { isNativeMobilePlatform } from '@core/mobile/isNativeMobilePlatform';
+import { useTouchOutsideToDismissKeyboard } from '@core/mobile/useTouchOutsideToDismissKeyboard';
+import { ToggleButton as KToggleButton } from '@kobalte/core/toggle-button';
+import DotsThree from '@phosphor/dots-three.svg';
+import Paperclip from '@phosphor/paperclip.svg';
+import Trash from '@phosphor/trash.svg';
+import { isIOS } from '@solid-primitives/platform';
+import { Button, cn, Layer, SendButton, Surface, Tooltip } from '@ui';
+import type { LexicalEditor } from 'lexical';
+import { $getRoot } from 'lexical';
+import { createSignal, For, onMount, Show } from 'solid-js';
+import { EmailDateSelector } from '../components/email-date-selector';
+import { MacroSignatureButton } from '../components/macro-signature-button';
+import { SignaturePreview } from '../components/signature-preview';
+import type { EmailComposeContext } from '../context/compose-capabilities';
+import { getOrInitEmailFormContext } from '../context/email-form-context';
+import { registerToggleAppendedThread } from '../primitives/prepare-email-body';
+import { ReplyEnvelope } from './reply-envelope';
+
+false && fileFolderDrop;
+false && fileSelector;
+
+import {
+ createReplyComposer,
+ type ReplyComposerOptions,
+} from '../primitives/reply-composer';
+
+type ReplyInputViewProps = Omit<
+ ReplyComposerOptions,
+ | 'drafts'
+ | 'attachmentStorage'
+ | 'delivery'
+ | 'notices'
+ | 'accounts'
+ | 'viewerEmail'
+ | 'hasPaidAccess'
+ | 'recordMention'
+ | 'focusAfterReplyRequest'
+> & {
+ context: EmailComposeContext;
+ markdownDomRef?: (ref: HTMLDivElement) => void | HTMLDivElement;
+ unframed?: boolean;
+ mobileDrawer?: { onClose: () => void };
+};
+export function ReplyInputView(props: ReplyInputViewProps) {
+ const composeContext = props.context;
+ const ctx = props.session;
+ const [isDragging, setIsDragging] = createSignalTo:
+ Cc:
+ Bcc:
+
+ From:
+
+
+
+ {
+ props.onSubjectChange(e.currentTarget.value);
+ }}
+ onKeyDown={(e) => {
+ if (e.key !== 'Escape') return;
+ e.preventDefault();
+ e.currentTarget.blur();
+ }}
+ placeholder="Subject:"
+ />
+
+
+
+ {(attachment) => (
+ handleRemoveAttachment(attachment)}
+ />
+ )}
+
+
+
+
+
+
+
+
+ sendEmail()}
+ />
+
+
+
+
+
+
+
+ {/* Below the scroll area so quoted email content can never overlap it */}
+
+ {(html) => (
+ {
+ // Dismissal is composer-local state worth keeping — latch
+ // the seed so a draft upgrade can't remount it away.
+ props.onEngaged?.();
+ setIncludeSignature(false);
+ }}
+ />
+ )}
+
+ {/* No fixed height: the send button (size-7.5) is taller than the icon
+ buttons, and a fixed h-9 minus the vertical padding left it 4px short
+ — with items-end it bled upward over the signature bar above. */}
+
+
+ {
+ if (composerExpanded() || e.currentTarget.scrollTop <= 0) return;
+ setComposerExpanded(true);
+ // Keep the send bar pinned while the box grows
+ requestAnimationFrame(() => {
+ bottomBarRef?.scrollIntoView({ block: 'nearest' });
+ });
+ }}
+ onclick={() => {
+ editor()?.focus();
+ }}
+ use:fileFolderDrop={{
+ onDragStart: (valid) => setIsDragging(valid),
+ onDragEnd: () => setIsDragging(false),
+ onDrop: (files, directories, event) => {
+ const currentEditor = editor();
+ if (!currentEditor || !event) return;
+ composeContext.editorFiles.uploadEditorFiles({
+ editor: currentEditor,
+ sourceId: props.sourceEntityId,
+ files,
+ directories,
+ dropEvent: event,
+ onUploaded: (ids) => {
+ setIsDragging(false);
+ ids.forEach(composeContext.editorFiles.makePublic);
+ scheduleDraftSave();
+ },
+ });
+ },
+ }}
+ >
+ props.markdownDomRef?.(el)}
+ onConnect={handleEditorConnect}
+ />
+
+
+
+
+
+ {(html) => (
+ {
+ // Dismissal is composer-local state worth keeping — latch
+ // the seed so a draft upgrade can't remount it away.
+ props.onEngaged?.();
+ setIncludeSignature(false);
+ }}
+ />
+ )}
+
+
+ {/* Quoted-text controls live below the scroll area so they stay
+ anchored to the composer bottom instead of scrolling with (and
+ floating over) tall content. */}
+
+ Drop file(s) to attach
+
+
+
+
+
+
+ e.stopPropagation()}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ sendEmail()}
+ />
+
+ {props.attachment.fileName}
+ {
+ // Keep the editor's focus. Focusing its message card can scroll
+ // this control away between pointerdown and click.
+ e.preventDefault();
+ }}
+ onMouseDown={(e) => e.preventDefault()}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') e.stopPropagation();
+ }}
onclick={(e) => {
e.preventDefault();
e.stopImmediatePropagation();
@@ -56,7 +79,7 @@ export function EmailAttachmentPill(props: EmailAttachmentPillProps) {
}}
>
+
-
void;
+ onSelect?: () => void;
+ onHover?: () => void;
+ onUnhover?: () => void;
+ onFocus?: (element: HTMLElement) => void;
children: JSX.Element;
}
@@ -34,25 +36,6 @@ interface MessageCardProps {
* since this node keeps DOM focus while its content swaps.
*/
export function MessageCard(props: MessageCardProps) {
- const context = useEmailContext();
-
- const select = () => {
- if (!props.messageId) return;
- context.messages.setFocused(props.messageId);
- };
-
- const hoverThisRow = () => {
- if (!props.messageId) return;
- context.messages.setHovered({ kind: 'message', id: props.messageId });
- };
-
- const unhoverThisRow = () => {
- const hovered = context.messages.hovered();
- if (hovered?.kind === 'message' && hovered.id === props.messageId) {
- context.messages.setHovered(undefined);
- }
- };
-
return (
@@ -66,12 +49,12 @@ export function MessageCard(props: MessageCardProps) {
style={{ '--user-icon-width': '1rem' }}
data-message-body-id={props.messageId}
tabIndex={0}
- onPointerEnter={hoverThisRow}
- onPointerLeave={unhoverThisRow}
+ onPointerEnter={props.onHover}
+ onPointerLeave={props.onUnhover}
onClick={(e) => {
// Selection is unconditional: a click that lands on a link or a
// button inside the card focuses that child, not the card.
- select();
+ props.onSelect?.();
const target = e.target;
if (target instanceof Element && target.closest('[data-button]')) {
return;
@@ -85,8 +68,8 @@ export function MessageCard(props: MessageCardProps) {
props.onActivate();
}}
onFocus={(e) => {
- scrollFocusedCardIntoView(e.currentTarget);
- select();
+ props.onFocus?.(e.currentTarget);
+ props.onSelect?.();
}}
>
{props.children}
diff --git a/apps/web/src/features/email-message/context/email-rendering-context.tsx b/apps/web/src/features/email-message/context/email-rendering-context.tsx
new file mode 100644
index 00000000000..7f190e9c41e
--- /dev/null
+++ b/apps/web/src/features/email-message/context/email-rendering-context.tsx
@@ -0,0 +1,29 @@
+import type { ImagePolicy } from '@macro-inc/email-renderer';
+import type {
+ ResourceLifetime,
+ ThemeColorParams,
+} from '@macro-inc/email-renderer/browser';
+import { type Accessor, createContext, useContext } from 'solid-js';
+import type { EmailAttachment } from '../core/email-message';
+
+/** Rendering capabilities shared by email surfaces; no thread or block state. */
+export interface EmailRenderingContextValue {
+ theme: Accessor;
+ images?: ImagePolicy;
+ prepareLinks?: (container: HTMLElement) => void;
+ resolveImages(
+ root: ShadowRoot,
+ attachments: EmailAttachment[],
+ lifetime: ResourceLifetime
+ ): Promise;
+}
+
+const EmailRenderingContext = createContext();
+export const EmailRenderingProvider = EmailRenderingContext.Provider;
+
+export function useEmailRenderingContext(): EmailRenderingContextValue {
+ const value = useContext(EmailRenderingContext);
+ if (!value)
+ throw new Error('Email rendering requires an EmailRenderingProvider');
+ return value;
+}
diff --git a/apps/web/src/features/email-message/core/email-message.ts b/apps/web/src/features/email-message/core/email-message.ts
new file mode 100644
index 00000000000..c1dda7b396d
--- /dev/null
+++ b/apps/web/src/features/email-message/core/email-message.ts
@@ -0,0 +1,63 @@
+/** Feature-owned values. Transport adaptation belongs to queries. */
+export interface EmailContact {
+ email: string;
+ name?: string | null;
+ photo_url?: string | null;
+}
+
+export interface EmailAttachment {
+ content_id?: string | null;
+ db_id: string;
+ filename?: string | null;
+ mime_type?: string | null;
+ sfs_id?: string | null;
+ size_bytes?: number | null;
+}
+
+export interface EmailDraftAttachment {
+ content_type: string;
+ file_name: string;
+ id: string;
+ s3_key: string;
+ size: number;
+}
+
+export interface EmailForwardedAttachment {
+ attachment_id: string;
+ filename?: string | null;
+ mime_type?: string | null;
+ size_bytes?: number | null;
+}
+
+export interface EmailLabel {
+ name?: string | null;
+ provider_label_id: string;
+}
+
+export interface EmailMessage {
+ attachments: EmailAttachment[];
+ attachments_draft: EmailDraftAttachment[];
+ attachments_forwarded: EmailForwardedAttachment[];
+ bcc: EmailContact[];
+ body_html_sanitized?: string | null;
+ body_macro?: string | null;
+ body_replyless?: string | null;
+ body_text?: string | null;
+ cc: EmailContact[];
+ created_at: string;
+ db_id: string;
+ from?: null | EmailContact;
+ internal_date_ts?: string | null;
+ is_draft: boolean;
+ labels: EmailLabel[];
+ link_id: string;
+ provider_id?: string | null;
+ replying_to_id?: string | null;
+ scheduled_send_time?: string | null;
+ sent_at?: string | null;
+ snippet?: string | null;
+ subject?: string | null;
+ thread_db_id: string;
+ to: EmailContact[];
+ updated_at: string;
+}
diff --git a/apps/web/src/features/block-email/util/emailUser.ts b/apps/web/src/features/email-message/core/email-user.ts
similarity index 81%
rename from apps/web/src/features/block-email/util/emailUser.ts
rename to apps/web/src/features/email-message/core/email-user.ts
index e5ae38261b4..353ffda1434 100644
--- a/apps/web/src/features/block-email/util/emailUser.ts
+++ b/apps/web/src/features/email-message/core/email-user.ts
@@ -1,12 +1,12 @@
-import { emailToMacroId } from '@core/user';
-import type { ApiMessage } from '@service-email/generated/schemas';
+import type { EmailMessage } from '@app/features/email-message/core/email-message';
+
import { getFirstName } from './name';
/**
* Check if a message is from the current user
*/
function isMessageFromCurrentUser(
- message: ApiMessage,
+ message: EmailMessage,
currentUserEmail?: string
): boolean {
if (!currentUserEmail) return false;
@@ -19,7 +19,7 @@ function isMessageFromCurrentUser(
* Get the sender display name, showing "Me" for the current user
*/
export function getSenderDisplayName(
- message: ApiMessage,
+ message: EmailMessage,
currentUserEmail?: string
): string {
if (isMessageFromCurrentUser(message, currentUserEmail)) {
@@ -36,9 +36,9 @@ export function getSenderDisplayName(
/**
* Convert the message sender email to a macro id for user tooling.
*/
-export function getSenderMacroId(message: ApiMessage): string | undefined {
+export function getSenderMacroId(message: EmailMessage): string | undefined {
const senderEmail = message.from?.email;
- return senderEmail ? emailToMacroId(senderEmail) : undefined;
+ return senderEmail?.includes('@') ? `macro|${senderEmail}` : undefined;
}
interface Recipient {
diff --git a/apps/web/src/features/block-email/util/formatEmailDate.ts b/apps/web/src/features/email-message/core/format-email-date.ts
similarity index 93%
rename from apps/web/src/features/block-email/util/formatEmailDate.ts
rename to apps/web/src/features/email-message/core/format-email-date.ts
index bac6a5d193e..eabb5f3e740 100644
--- a/apps/web/src/features/block-email/util/formatEmailDate.ts
+++ b/apps/web/src/features/email-message/core/format-email-date.ts
@@ -1,4 +1,4 @@
-import type { DateValue } from '@core/util/date';
+type DateValue = Date | string | number;
export function formatFullDate(date: DateValue): string {
return new Date(date)
diff --git a/apps/web/src/features/block-email/util/isPersonalMessage.ts b/apps/web/src/features/email-message/core/is-personal-message.ts
similarity index 84%
rename from apps/web/src/features/block-email/util/isPersonalMessage.ts
rename to apps/web/src/features/email-message/core/is-personal-message.ts
index 063ebc57b90..7b49475cdb2 100644
--- a/apps/web/src/features/block-email/util/isPersonalMessage.ts
+++ b/apps/web/src/features/email-message/core/is-personal-message.ts
@@ -1,10 +1,10 @@
-import type { ApiMessage } from '@service-email/generated/schemas';
+import type { EmailMessage } from '@app/features/email-message/core/email-message';
/** Personal messages get theme-adapted rendering (vs the forced white panel
* for table-layout marketing emails). Mirrored between the message view and
* the compose quote. */
export function isPersonalMessage(
- message: ApiMessage,
+ message: EmailMessage,
userEmail: string | undefined,
personalSenders: Set
): boolean {
diff --git a/apps/web/src/features/block-email/util/name.ts b/apps/web/src/features/email-message/core/name.ts
similarity index 100%
rename from apps/web/src/features/block-email/util/name.ts
rename to apps/web/src/features/email-message/core/name.ts
diff --git a/apps/web/src/features/email-message/image-adapter.test.ts b/apps/web/src/features/email-message/image-adapter.test.ts
new file mode 100644
index 00000000000..4b3b03e984b
--- /dev/null
+++ b/apps/web/src/features/email-message/image-adapter.test.ts
@@ -0,0 +1,77 @@
+import { SERVER_HOSTS } from '@core/constant/servers';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import type { EmailAttachment } from './core/email-message';
+import { fetchImagesViaPlatform, resolveCidImages } from './image-adapter';
+
+const { fetchImage } = vi.hoisted(() => ({ fetchImage: vi.fn() }));
+// Exercise the production adapter's native path without invoking Tauri IPC.
+// Feature logic tests inject resolveImages through EmailRenderingProvider.
+vi.mock('@core/util/platform', () => ({ isTauri: () => true }));
+vi.mock('@core/util/platformFetch', () => ({ platformFetch: fetchImage }));
+
+function imageRoot(src: string) {
+ const host = document.createElement('div');
+ const root = host.attachShadow({ mode: 'open' });
+ const img = document.createElement('img');
+ img.src = src;
+ root.append(img);
+ return { root, img };
+}
+
+describe('production image adaptation', () => {
+ afterEach(() => {
+ vi.restoreAllMocks();
+ vi.unstubAllGlobals();
+ fetchImage.mockReset();
+ });
+ it('resolves matching CID attachments and leaves unknown IDs unchanged', () => {
+ const { root, img } = imageRoot('cid:part');
+ const unknown = document.createElement('img');
+ unknown.src = 'cid:unknown';
+ root.append(unknown);
+ resolveCidImages(root, [
+ { content_id: '', sfs_id: 'file-id' } as EmailAttachment,
+ ]);
+ expect(img.src).toBe(`${SERVER_HOSTS['static-file']}/file/file-id`);
+ expect(unknown.getAttribute('src')).toBe('cid:unknown');
+ });
+ it('does not create a blob URL when disposed during the platform response body', async () => {
+ const { root, img } = imageRoot('https://files.example.com/image');
+ const { promise: blob, resolve: finish } = Promise.withResolvers();
+ fetchImage.mockResolvedValue({
+ ok: true,
+ headers: new Headers({ 'content-type': 'image/png' }),
+ blob: () => blob,
+ });
+ const create = vi.fn();
+ vi.stubGlobal('URL', { createObjectURL: create });
+ let disposed = false;
+ const pending = fetchImagesViaPlatform(root, [], () => disposed);
+ await Promise.resolve();
+ disposed = true;
+ finish(new Blob());
+ await pending;
+ expect(create).not.toHaveBeenCalled();
+ expect(img.getAttribute('src')).toBe('https://files.example.com/image');
+ });
+ it('retains successful native images for lifetime cleanup and rejects non-image responses', async () => {
+ const { root, img } = imageRoot('https://files.example.com/image');
+ fetchImage.mockResolvedValue(
+ new Response('image', { headers: { 'content-type': 'image/png' } })
+ );
+ vi.stubGlobal('URL', { createObjectURL: () => 'blob:resolved' });
+ const urls: string[] = [];
+ await fetchImagesViaPlatform(root, urls, () => false);
+ expect(img.src).toBe('blob:resolved');
+ expect(urls).toEqual(['blob:resolved']);
+ const html = imageRoot('https://files.example.com/login');
+ fetchImage.mockResolvedValue(
+ new Response('login', { headers: { 'content-type': 'text/html' } })
+ );
+ await fetchImagesViaPlatform(html.root, urls, () => false);
+ expect(html.img.getAttribute('src')).toBe(
+ 'https://files.example.com/login'
+ );
+ expect(urls).toEqual(['blob:resolved']);
+ });
+});
diff --git a/apps/web/src/features/block-email/util/resolveEmailImages.ts b/apps/web/src/features/email-message/image-adapter.ts
similarity index 96%
rename from apps/web/src/features/block-email/util/resolveEmailImages.ts
rename to apps/web/src/features/email-message/image-adapter.ts
index f56fa7f07a6..82fc6aa5c27 100644
--- a/apps/web/src/features/block-email/util/resolveEmailImages.ts
+++ b/apps/web/src/features/email-message/image-adapter.ts
@@ -1,12 +1,12 @@
+import type { EmailMessage } from '@app/features/email-message/core/email-message';
import { SERVER_HOSTS } from '@core/constant/servers';
import { isTauri } from '@core/util/platform';
import { platformFetch } from '@core/util/platformFetch';
-import type { ApiMessage } from '@service-email/generated/schemas';
/** Resolves cid: URLs in ![]()
tags to their static-file-service equivalents. */
export function resolveCidImages(
root: ShadowRoot,
- attachments: ApiMessage['attachments']
+ attachments: EmailMessage['attachments']
): void {
const contentIdToSfsId = new Map();
for (const att of attachments ?? []) {
diff --git a/apps/web/src/features/email-message/primitives/email-message-body.test.ts b/apps/web/src/features/email-message/primitives/email-message-body.test.ts
new file mode 100644
index 00000000000..e88ed18f89a
--- /dev/null
+++ b/apps/web/src/features/email-message/primitives/email-message-body.test.ts
@@ -0,0 +1,121 @@
+import type { ResourceLifetime } from '@macro-inc/email-renderer/browser';
+import { createRoot, createSignal } from 'solid-js';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { message } from '../tests/messages';
+import {
+ createEmailMessageBody,
+ type EmailMessageBodyProps,
+} from './email-message-body';
+
+const theme = {
+ inkL: 0.2,
+ inkC: 0,
+ inkH: 0,
+ panelL: 1,
+ accentL: 0.6,
+ accentC: 0.1,
+ accentH: 50,
+};
+const bodyOptions: Omit = {
+ isPersonal: true,
+ isBodyExpanded: () => true,
+ setExpandedMessageBody() {},
+ setFocusedMessageId() {},
+ isFocused: false,
+};
+describe('independent email body', () => {
+ afterEach(() => vi.unstubAllGlobals());
+ it('renders one message, rewires its DOM on source changes, and cleans image/resize resources on disposal', async () => {
+ const disconnect = vi.fn();
+ vi.stubGlobal(
+ 'ResizeObserver',
+ class {
+ observe() {}
+ disconnect = disconnect;
+ }
+ );
+ const revoke = vi.fn();
+ vi.stubGlobal('URL', { ...URL, revokeObjectURL: revoke });
+ const resolveImages = vi.fn(
+ async (_root, _attachments, lifetime: ResourceLifetime) => {
+ lifetime.onDispose(() => URL.revokeObjectURL('blob:email'));
+ }
+ );
+ const prepareLinks = vi.fn();
+ const root = createRoot((dispose) => {
+ const [value, setValue] = createSignal(
+ message('one', {
+ body_html_sanitized:
+ ';
+ setExpandedMessageBody: (id: string) => void;
+ setFocusedMessageId: (messageId: string | undefined) => void;
+ showFullContent?: boolean;
+ isFocused: boolean;
+}
+
+/** Solid only translates reactive inputs and owns the renderer's lifetime. */
+export function createEmailMessageBody(
+ props: EmailMessageBodyProps,
+ renderingContext: EmailRenderingContextValue
+) {
+ const [showFullHTML, setShowFullHTML] = createSignal(false);
+ const prepared = createMemo(() =>
+ prepareEmailBody(
+ {
+ html: props.message.body_html_sanitized,
+ replylessHtml: props.message.body_replyless,
+ text: props.message.body_text,
+ },
+ {
+ showQuotedContent: showFullHTML(),
+ showFullContent: props.showFullContent,
+ images: renderingContext.images,
+ }
+ )
+ );
+ const rendered = createMemo(() => {
+ // Preserve the app's existing Markdown paths without starting hidden HTML
+ // resources behind them. Their Lexical semantics stay at the app boundary.
+ if (
+ (!showFullHTML() && props.message.body_macro) ||
+ !props.message.body_html_sanitized
+ )
+ return;
+ const body = prepared();
+ const attachments = props.message.attachments;
+ const host = document.createElement('div');
+ const renderer = mountEmailBody(host, body, {
+ theme: renderingContext.theme(),
+ adaptColors: props.isPersonal || !body.hasTable,
+ normalizeFonts:
+ props.isPersonal &&
+ !props.message.from?.email?.toLowerCase().endsWith('@macro.com'),
+ expanded: untrack(props.isBodyExpanded),
+ prepareLinks: renderingContext.prepareLinks,
+ resolveImages: (root, lifetime) =>
+ renderingContext.resolveImages(root, attachments, lifetime),
+ });
+ onCleanup(() => renderer.dispose());
+ return { host, renderer };
+ });
+ createEffect(() => rendered()?.renderer.setExpanded(props.isBodyExpanded()));
+ return {
+ showFullHTML,
+ setShowFullHTML,
+ host: () => rendered()?.host,
+ hasHiddenReplyStructure: () => prepared().hasHiddenContent,
+ };
+}
diff --git a/apps/web/src/features/email-message/rendering-adapter.ts b/apps/web/src/features/email-message/rendering-adapter.ts
new file mode 100644
index 00000000000..34391920f17
--- /dev/null
+++ b/apps/web/src/features/email-message/rendering-adapter.ts
@@ -0,0 +1,44 @@
+import { ENABLE_PROXY_EMAIL_IMAGES } from '@core/constant/featureFlags';
+import { SERVER_HOSTS } from '@core/constant/servers';
+import { interceptMailtoLinks } from '@core/util/interceptMailtoLinks';
+import { createMemo } from 'solid-js';
+import { themeReactive } from '../theme/signals/themeReactive';
+import { themeUpdate } from '../theme/signals/themeSignals';
+import type { EmailRenderingContextValue } from './context/email-rendering-context';
+import { fetchImagesViaPlatform, resolveCidImages } from './image-adapter';
+
+export function createEmailRenderingContext(): EmailRenderingContextValue {
+ const theme = createMemo(() => {
+ themeUpdate();
+ return {
+ inkL: themeReactive.c0.l[0](),
+ inkC: themeReactive.c0.c[0](),
+ inkH: themeReactive.c0.h[0](),
+ panelL: themeReactive.b1.l[0](),
+ accentL: themeReactive.a0.l[0](),
+ accentC: themeReactive.a0.c[0](),
+ accentH: themeReactive.a0.h[0](),
+ };
+ });
+ return {
+ theme,
+ images: {
+ remote: 'allow',
+ proxyUrl: ENABLE_PROXY_EMAIL_IMAGES
+ ? `${SERVER_HOSTS['image-proxy-service']}/proxy`
+ : undefined,
+ },
+ prepareLinks: interceptMailtoLinks,
+ async resolveImages(root, attachments, lifetime) {
+ const blobUrls: string[] = [];
+ const isDisposed = () => lifetime.signal.aborted;
+ lifetime.onDispose(() => {
+ for (const url of blobUrls) URL.revokeObjectURL(url);
+ });
+ if (isDisposed()) return;
+ resolveCidImages(root, attachments);
+ if (isDisposed()) return;
+ await fetchImagesViaPlatform(root, blobUrls, isDisposed);
+ },
+ };
+}
diff --git a/apps/web/src/features/email-message/sender-icon-adapter.tsx b/apps/web/src/features/email-message/sender-icon-adapter.tsx
new file mode 100644
index 00000000000..454ea026d7a
--- /dev/null
+++ b/apps/web/src/features/email-message/sender-icon-adapter.tsx
@@ -0,0 +1,15 @@
+import { UserIcon } from '@core/component/UserIcon';
+import type { EmailMessage } from './core/email-message';
+import { getSenderMacroId } from './core/email-user';
+
+/** Profile lookup and the interactive user card belong to application composition. */
+export function EmailSenderIcon(props: { message: EmailMessage }) {
+ const sender = () => {
+ const id = getSenderMacroId(props.message);
+ const photoUrl = props.message.from?.photo_url ?? undefined;
+ return id
+ ? { id, photoUrl }
+ : { email: props.message.from?.email ?? '', photoUrl };
+ };
+ return = {}
+): EmailMessage {
+ return {
+ db_id: id,
+ thread_db_id: 'thread',
+ link_id: 'inbox',
+ created_at: '2026-09-01T10:00:00Z',
+ updated_at: '2026-09-01T10:00:00Z',
+ internal_date_ts: '2026-09-01T10:00:00Z',
+ from: { email: 'sender@example.com' },
+ to: [{ email: 'viewer@example.com' }],
+ cc: [],
+ bcc: [],
+ subject: 'Review',
+ body_html_sanitized: '();
+ const html = props.message.body_html_sanitized ?? '';
+ for (const match of html.matchAll(/src=["']cid:([^"']+)["']/gi)) {
+ const normalized = match[1].replace(/[<>]/g, '').trim();
+ if (normalized) set.add(normalized);
+ }
+ return set;
+ });
+
+ const visibleAttachments = createMemo(() => {
+ return props.message.attachments.filter((a) => {
+ if (!a.db_id) return false;
+ const contentId = a.content_id?.toString();
+ if (!contentId) return true;
+ const normalized = contentId.replace(/[<>]/g, '').trim();
+ return !inlineContentIds().has(normalized);
+ });
+ });
+
+ const imageAttachmentsWithSfs = createMemo(() => {
+ return visibleAttachments().filter(
+ (a) => a.mime_type?.startsWith('image/') && a.sfs_id
+ );
+ });
+
+ const videoAttachmentsWithSfs = createMemo(() => {
+ return visibleAttachments().filter(
+ (a) => a.mime_type?.startsWith('video/') && a.sfs_id
+ );
+ });
+
+ const otherAttachments = createMemo(() => {
+ return visibleAttachments().filter(
+ (a) =>
+ !a.sfs_id ||
+ (!a.mime_type?.startsWith('image/') &&
+ !a.mime_type?.startsWith('video/'))
+ );
+ });
+
+ return (
+
+
+ );
+}
diff --git a/apps/web/src/features/block-email/component/CopySubjectButton.tsx b/apps/web/src/features/email-thread/components/copy-subject-button.tsx
similarity index 78%
rename from apps/web/src/features/block-email/component/CopySubjectButton.tsx
rename to apps/web/src/features/email-thread/components/copy-subject-button.tsx
index adc00074473..78209860f6c 100644
--- a/apps/web/src/features/block-email/component/CopySubjectButton.tsx
+++ b/apps/web/src/features/email-thread/components/copy-subject-button.tsx
@@ -1,10 +1,9 @@
-import { toast } from '@core/component/Toast/Toast';
+import { isPlaceholderSubject } from '@app/features/email-compose/core/subject-text';
import WideCopy from '@icon/wide-copy.svg';
import IconCheck from '@phosphor/check.svg';
import { debounce } from '@solid-primitives/scheduled';
import { cn } from '@ui/utils/classname';
import { createSignal, Show } from 'solid-js';
-import { isPlaceholderSubject } from '../util/subjectText';
function copyableSubject(title: string): string | undefined {
const subject = title.trim();
@@ -12,7 +11,11 @@ function copyableSubject(title: string): string | undefined {
return subject;
}
-export function CopySubjectButton(props: { subject: string; class?: string }) {
+export function CopySubjectButton(props: {
+ subject: string;
+ class?: string;
+ onCopy?: (subject: string) => void;
+}) {
const [copied, setCopied] = createSignal(false);
const resetCopied = debounce(() => setCopied(false), 800);
@@ -20,14 +23,13 @@ export function CopySubjectButton(props: { subject: string; class?: string }) {
e.stopPropagation();
const subject = copyableSubject(props.subject);
if (!subject) return;
- navigator.clipboard.writeText(subject);
- toast.success('Subject copied');
+ props.onCopy?.(subject);
setCopied(true);
resetCopied();
}
return (
-
+
Hello Person
Quoted thread
',
+ body_replyless: 'Hello Person
', + }) + ); + const body = createEmailMessageBody( + { + get message() { + return value(); + }, + ...bodyOptions, + }, + { theme: () => theme, resolveImages, prepareLinks } + ); + return { dispose, body, setValue }; + }); + try { + await Promise.resolve(); + const host = root.body.host()!; + expect(host.shadowRoot?.textContent).toContain('Hello Person'); + root.body.setShowFullHTML(true); + await Promise.resolve(); + expect(root.body.host()!.shadowRoot?.textContent).toContain( + 'Quoted thread' + ); + const link = root.body.host()!.shadowRoot?.querySelector('a'); + expect(link?.target).toBe('_blank'); + expect(link?.rel).toBe('noopener noreferrer'); + expect(prepareLinks).toHaveBeenCalled(); + const expandedHost = root.body.host(); + root.setValue( + message('two', { + body_html_sanitized: 'Second message
', + body_replyless: 'Second message
', + }) + ); + await Promise.resolve(); + expect(root.body.host()).not.toBe(expandedHost); + expect(root.body.host()!.shadowRoot?.textContent).toContain( + 'Second message' + ); + } finally { + root.dispose(); + } + expect(resolveImages).toHaveBeenCalled(); + expect(revoke).toHaveBeenCalledWith('blob:email'); + expect(disconnect).toHaveBeenCalled(); + }); + it.each([ + { body_macro: 'A document mention' }, + { + body_html_sanitized: null, + body_text: '**Plaintext using the existing app renderer**', + }, + ])( + 'keeps the app Markdown paths free of hidden HTML resources: %j', + async (content) => { + const resolveImages = vi.fn(async () => {}); + createRoot((dispose) => { + const body = createEmailMessageBody( + { + message: message('markdown', content), + ...bodyOptions, + }, + { theme: () => theme, resolveImages } + ); + expect(body.host()).toBeUndefined(); + dispose(); + }); + await Promise.resolve(); + expect(resolveImages).not.toHaveBeenCalled(); + } + ); +}); diff --git a/apps/web/src/features/email-message/primitives/email-message-body.ts b/apps/web/src/features/email-message/primitives/email-message-body.ts new file mode 100644 index 00000000000..9d683128870 --- /dev/null +++ b/apps/web/src/features/email-message/primitives/email-message-body.ts @@ -0,0 +1,76 @@ +import { prepareEmailBody } from '@macro-inc/email-renderer'; +import { mountEmailBody } from '@macro-inc/email-renderer/browser'; +import { + type Accessor, + createEffect, + createMemo, + createSignal, + onCleanup, + untrack, +} from 'solid-js'; +import type { EmailRenderingContextValue } from '../context/email-rendering-context'; +import type { EmailMessage } from '../core/email-message'; + +export interface EmailMessageBodyProps { + message: EmailMessage; + isPersonal: boolean; + isBodyExpanded: AccessorHello
', + attachments: [], + attachments_draft: [], + attachments_forwarded: [], + labels: [], + is_draft: false, + ...overrides, + }; +} diff --git a/apps/web/src/features/email-message/views/email-message-body.tsx b/apps/web/src/features/email-message/views/email-message-body.tsx new file mode 100644 index 00000000000..fb8a74d6dd9 --- /dev/null +++ b/apps/web/src/features/email-message/views/email-message-body.tsx @@ -0,0 +1,74 @@ +import { StaticMarkdown } from '@core/component/LexicalMarkdown/component/core/StaticMarkdown'; +import { channelTheme } from '@core/component/LexicalMarkdown/theme'; +import DotsThree from '@phosphor/dots-three.svg'; +import { Button, cn } from '@ui'; +import { Match, Show, Switch } from 'solid-js'; + +import { useEmailRenderingContext } from '../context/email-rendering-context'; +import { + createEmailMessageBody, + type EmailMessageBodyProps, +} from '../primitives/email-message-body'; +export function EmailMessageBody(props: EmailMessageBodyProps) { + const { showFullHTML, setShowFullHTML, host, hasHiddenReplyStructure } = + createEmailMessageBody(props, useEmailRenderingContext()); + return ( + {
+ if (!props.isBodyExpanded() && props.message.db_id) {
+ props.setExpandedMessageBody(props.message.db_id);
+ props.setFocusedMessageId(props.message.db_id);
+ } else if (props.message.db_id) {
+ props.setFocusedMessageId(props.message.db_id);
+ }
+ }}
+ >
+
+ );
+}
diff --git a/apps/web/src/features/email-message/views/email-message.tsx b/apps/web/src/features/email-message/views/email-message.tsx
new file mode 100644
index 00000000000..37a5107c738
--- /dev/null
+++ b/apps/web/src/features/email-message/views/email-message.tsx
@@ -0,0 +1,213 @@
+import { EmailAttachmentPill } from '@app/features/email-message/components/attachment-pill';
+import { CollapsedMessage } from '@app/features/email-message/components/collapsed-message';
+import { EmailMessageTopBar } from '@app/features/email-message/components/email-message-top-bar';
+import { MessageCard } from '@app/features/email-message/components/message-card';
+import type { EmailMessage } from '@app/features/email-message/core/email-message';
+import { EmailMessageBody } from '@app/features/email-message/views/email-message-body';
+import { ImageGalleryPreview } from '@core/component/ImageGalleryPreview';
+import { VideoPreview } from '@core/component/VideoPreview';
+import type { JSX } from 'solid-js';
+import { createMemo, createSignal, For, Show } from 'solid-js';
+import type { EmailMessageAction } from '../components/message-actions';
+import type { EmailAttachment } from '../core/email-message';
+export interface EmailMessageViewProps {
+ message: EmailMessage;
+ renderAvatar?: (message: EmailMessage) => JSX.Element;
+ viewerEmail?: string;
+ isTouch: boolean;
+ isPersonal: boolean;
+ showFullContent?: boolean;
+ isSelected: boolean;
+ allowHover: boolean;
+ isExpanded: boolean;
+ onExpand?: () => void;
+ onExpandedChange?: (expanded: boolean) => void;
+ onSelect?: () => void;
+ onHover?: () => void;
+ onUnhover?: () => void;
+ onFocus?: (element: HTMLElement) => void;
+ onReply?: (action: EmailMessageAction) => void;
+ onOpenAttachment?: (attachment: EmailAttachment) => void;
+ children?: JSX.Element;
+}
+
+export function EmailMessageView(props: EmailMessageViewProps) {
+ const [expandedHeader, setExpandedHeader] = createSignal(false);
+ const isBodyExpanded = () => props.isExpanded;
+
+ // Hide attachments that are referenced in inline images
+ const inlineContentIds = createMemo(() => {
+ const set = new Set
+
+ {/* If available, we use body_macro to render "Macro-fied" email content in static markdown with, e.g. correctly styled document mentions. */}
+
+ {(bodyMacro) => {
+ return (
+
+
+
+ {host()}
+
+
+
+
+
+
+
+
+
+ props.onExpandedChange?.(expanded)
+ }
+ isBodyExpanded={isBodyExpanded}
+ expandedHeader={expandedHeader}
+ setExpandedHeader={setExpandedHeader}
+ setFocusedMessageId={() => props.onSelect?.()}
+ onReply={props.onReply}
+ isTouch={props.isTouch}
+ viewerEmail={props.viewerEmail}
+ hiddenActions={
+ props.onReply ? undefined : ['reply', 'reply-all', 'forward']
+ }
+ avatar={
+ 0}>
+
+
+ {/* Video attachments */}
+ 0}>
+
+ {(attachment) => (
+
+
+
+ {/* Other attachments (non-media or without sfs_id) */}
+ 0}>
+
+
+ {/* Draft attachments */}
+ 0 ||
+ props.message.attachments_forwarded.length > 0
+ }
+ >
+
+
+ {props.children}
+
+
+ {props.renderAvatar?.(props.message)}
+
+ }
+ />
+
+ props.onExpandedChange?.(true)}
+ setFocusedMessageId={() => props.onSelect?.()}
+ showFullContent={props.showFullContent}
+ isFocused={props.isSelected}
+ />
+
+ {/* Image attachments */}
+
+ ({
+ id: a.sfs_id!,
+ }))}
+ variant="small"
+ attachmentIds={imageAttachmentsWithSfs().map((a) => a.db_id!)}
+ />
+
+
+
+ {(attachment) => (
+ props.onOpenAttachment?.(attachment)
+ : undefined
+ }
+ />
+ )}
+
+
+
+
+ {(attachment) => (
+
+
+ {(attachment) => (
+
+
+