On Monday, Bob wrote:
');
const ORIGINAL = 'Original message
Earlier reply'; @@ -168,3 +168,49 @@ describe('reply quote visibility', () => { expect(toggle()).toHaveAttribute('aria-expanded', 'false'); }); }); + +// compose-p2-3: a click under the folded quote used to put the caret on the +// empty last line, below the hidden original, where the text went unseen. +describe('a click in a reply with a folded quote', () => { + const click = (e: Editor, pos: number) => { + let handled = false; + e.view.someProp('handleClick', (handler) => { handled = handler(e.view, pos, new MouseEvent('click')) || handled; return handled; }); + return handled; + }; + const lastPos = (e: Editor) => e.state.doc.content.size - 1; + + it('puts the caret at the end of the text above the quote', () => { + const e = mount(); + expect(e.state.doc.lastChild?.type.name).toBe('paragraph'); + expect(click(e, lastPos(e))).toBe(true); + expect(e.state.selection.from).toBe(1 + 'My response'.length); + expect(toggle()).toHaveAttribute('aria-expanded', 'false'); + }); + + it('keeps the click where it was once the quote is shown', () => { + const e = mount(); + toggle().click(); + expect(click(e, lastPos(e))).toBe(false); + }); + + it('keeps a click on a line the user can see below the quote', () => { + const e = mount(`
My response
${HEADER}${QUOTE}Postscript
`); + expect(click(e, lastPos(e) - 2)).toBe(false); + }); + + it('keeps a click in the text above the quote', () => { + const e = mount(); + expect(click(e, 3)).toBe(false); + }); + + it.each(['above', 'below'])('ends the text before a signature %s the quote', (position) => { + const signature = buildSignatureBlock('My signature'); + const e = mount(`My response
${position === 'above' ? signature : ''}${HEADER}${QUOTE}${position === 'below' ? signature : ''}`); + expect(userTextEnd(e.state)).toBe(1 + 'My response'.length); + }); + + it('has no end of text in a body with neither quote nor signature', () => { + const e = mount('Just text
'); + expect(userTextEnd(e.state)).toBeNull(); + }); +}); diff --git a/components/email/__tests__/rich-text-editor-link-dialog.test.tsx b/components/email/__tests__/rich-text-editor-link-dialog.test.tsx index c15a51ce4..23d7ac5a2 100644 --- a/components/email/__tests__/rich-text-editor-link-dialog.test.tsx +++ b/components/email/__tests__/rich-text-editor-link-dialog.test.tsx @@ -29,11 +29,50 @@ describe('Insert link', () => { fireEvent.click(screen.getByTitle('link')); expect(prompt).not.toHaveBeenCalled(); - const dialog = screen.getByRole('dialog', { name: 'insert_link' }); - fireEvent.change(dialog.querySelector('input')!, { target: { value: 'example.com/docs' } }); + screen.getByRole('dialog', { name: 'insert_link' }); + expect(screen.getByRole('textbox', { name: 'link_text' })).toHaveValue('docs'); + fireEvent.change(screen.getByRole('textbox', { name: 'link' }), { target: { value: 'example.com/docs' } }); fireEvent.click(screen.getByRole('button', { name: 'save' })); - expect(editor.getHTML()).toContain('href="https://example.com/docs"'); + expect(editor.getHTML()).toContain('docs here'); + }); + + // compose-p2-7: with nothing selected Save used to add nothing. + it('inserts the text as a link when nothing is selected', async () => { + const editor = await setup('See it
'); + act(() => { editor.commands.setTextSelection(4); }); + + fireEvent.click(screen.getByTitle('link')); + expect(screen.getByRole('textbox', { name: 'link_text' })).toHaveValue(''); + fireEvent.change(screen.getByRole('textbox', { name: 'link_text' }), { target: { value: 'our docs' } }); + fireEvent.change(screen.getByRole('textbox', { name: 'link' }), { target: { value: 'example.com/docs' } }); + fireEvent.click(screen.getByRole('button', { name: 'save' })); + + expect(editor.getHTML()).toMatch(/See]*href="https:\/\/example\.com\/docs"[^>]*>our docs<\/a> it/); + }); + + it('shows the address as the link when the text is left empty', async () => { + const editor = await setup('See it
'); + act(() => { editor.commands.setTextSelection(4); }); + + fireEvent.click(screen.getByTitle('link')); + fireEvent.change(screen.getByRole('textbox', { name: 'link' }), { target: { value: 'https://example.com' } }); + fireEvent.click(screen.getByRole('button', { name: 'save' })); + + expect(editor.getHTML()).toMatch(/See]*href="https:\/\/example\.com"[^>]*>https:\/\/example\.com<\/a> it/); + }); + + it('edits the text of a link the caret is in', async () => { + const editor = await setup('docs here
'); + act(() => { editor.commands.setTextSelection(2); }); + + fireEvent.click(screen.getByTitle('link')); + expect(screen.getByRole('textbox', { name: 'link_text' })).toHaveValue('docs'); + expect(screen.getByRole('textbox', { name: 'link' })).toHaveValue('https://example.com'); + fireEvent.change(screen.getByRole('textbox', { name: 'link_text' }), { target: { value: 'the docs' } }); + fireEvent.click(screen.getByRole('button', { name: 'save' })); + + expect(editor.getHTML()).toMatch(/]*href="https:\/\/example\.com"[^>]*>the docs<\/a> here/); }); it('opens on Ctrl+K in the text, as in Gmail, Outlook and Word', async () => { diff --git a/components/email/__tests__/thread-conversation-drafts.test.tsx b/components/email/__tests__/thread-conversation-drafts.test.tsx new file mode 100644 index 000000000..80bc7f7ed --- /dev/null +++ b/components/email/__tests__/thread-conversation-drafts.test.tsx @@ -0,0 +1,54 @@ +// compose-p2-6: on a phone the conversation listed a reply draft as an +// ordinary message, expanded at the top with Reply, Reply all and Forward. +// It is marked Draft and offers Edit and Discard instead. +import { describe, expect, it, vi } from 'vitest'; +import { fireEvent, render, screen } from '@testing-library/react'; + +vi.mock('@/hooks/use-wopi-status', () => ({ useWopiStatus: () => ({ enabled: false }), canWopiOpen: () => false })); +vi.mock('@/hooks/use-own-domain-address', () => ({ useOwnDomainAddress: () => () => false })); +vi.stubGlobal('ResizeObserver', class { observe() {} unobserve() {} disconnect() {} }); + +const { ThreadConversationView } = await import('@/components/email/thread-conversation-view'); + +const base = { + threadId: 't1', mailboxIds: { inbox: true }, to: [{ email: 'me@example.org' }], + subject: 's', size: 1, hasAttachment: false, htmlBody: [], textBody: [], attachments: [], bodyValues: {}, +}; +const received = { ...base, id: 'e1', keywords: { $seen: true }, from: [{ name: 'Ann', email: 'ann@t.example' }], receivedAt: '2026-11-01T10:00:00Z', preview: 'question' }; +const draft = { ...base, id: 'd1', keywords: { $seen: true, $draft: true }, from: [{ name: 'Me', email: 'me@example.org' }], receivedAt: '2026-11-02T10:00:00Z', preview: 'my answer' }; + +function renderView(handlers: Record
+
{wantsPluginDraft && (
{attachmentsForDisplay(attachments).map(({ att, index }) => {
@@ -6156,7 +6219,8 @@ export function EmailComposer({
setShowScheduleDialog(false)}
- onSchedule={(delayedUntil) => handleSend({ delayedUntil })}
+ // Checked before the dialog opened (openScheduleDialog).
+ onSchedule={(delayedUntil) => handleSend({ delayedUntil, warningsConfirmed: true })}
supported={!!composerClient?.hasDelayedSend()}
maxDelayedSend={composerClient?.getMaxDelayedSend() ?? 0}
disabled={!canSend || isSending || isSavingAndClosing}
@@ -6167,6 +6231,7 @@ export function EmailComposer({
{
const first = sendWarnings?.items[0];
setSendWarnings(null);
@@ -6184,7 +6249,7 @@ export function EmailComposer({
}}
onSendAnyway={(dontAskAgain) => {
if (!sendWarnings) return;
- const { items, delayedUntil } = sendWarnings;
+ const { items, delayedUntil, schedule } = sendWarnings;
for (const warning of items) {
if (warning.kind === 'subject') {
emptySubjectConfirmedRef.current = true;
@@ -6199,7 +6264,8 @@ export function EmailComposer({
}
}
setSendWarnings(null);
- handleSend({ warningsConfirmed: true, delayedUntil });
+ if (schedule) setShowScheduleDialog(true);
+ else handleSend({ warningsConfirmed: true, delayedUntil });
}}
/>
@@ -6215,7 +6281,7 @@ export function EmailComposer({
-
)}
+ {/* The reply already started on this message, as Gmail shows it. */}
+ {showReplyDraft && replyDraft && (
+
+
+ )}
+
{/* Quick Reply Section - hidden for drafts and while loading a new email */}
- {showQuickReply && (
+
+
+
+ {showQuickReply && (
void;
+ /** `text` is what the link shows; empty means the address itself. */
+ onSubmit: (link: { text: string; href: string }) => void;
+ /** The selected text, or the link's own text when editing one. */
+ defaultText: string;
+ defaultHref: string;
+ /** Offers "Remove link" when editing a link. */
+ onRemove?: () => void;
+}
+
+/**
+ * Insert link (compose-p2-7): "Text" and "Link", as Gmail and Outlook ask. The
+ * selection fills Text; with nothing selected the text (or the address) goes
+ * in as a new link.
+ */
+export function LinkDialog({ isOpen, onClose, onSubmit, defaultText, defaultHref, onRemove }: LinkDialogProps) {
+ const t = useTranslations("email_composer.toolbar");
+ const tCommon = useTranslations("common");
+ const id = useId();
+ const [text, setText] = useState(defaultText);
+ const [href, setHref] = useState(defaultHref);
+ const textRef = useRef(null);
+ const hrefRef = useRef(null);
+ // With text already there, the address is what is left to give.
+ const firstField = defaultText ? hrefRef : textRef;
+
+ useEffect(() => {
+ if (!isOpen) return;
+ setText(defaultText);
+ setHref(defaultHref);
+ }, [isOpen, defaultText, defaultHref]);
+
+ const address = href.trim();
+ const error = /\s/.test(address) ? t("link_invalid") : null;
+ const canSubmit = address.length > 0 && !error;
+ const errorId = `${id}-error`;
+
+ const submit = (event?: React.FormEvent) => {
+ event?.preventDefault();
+ if (!canSubmit) return;
+ try {
+ onSubmit({ text, href: address });
+ } finally {
+ onClose();
+ }
+ };
+
+ return (
+
+ );
+}
diff --git a/components/email/reply-quote-collapse.ts b/components/email/reply-quote-collapse.ts
index 5dbd658f2..b97485888 100644
--- a/components/email/reply-quote-collapse.ts
+++ b/components/email/reply-quote-collapse.ts
@@ -2,7 +2,7 @@
import { Extension } from '@tiptap/core';
import type { Node as PMNode } from '@tiptap/pm/model';
-import { Plugin, PluginKey, Selection } from '@tiptap/pm/state';
+import { Plugin, PluginKey, Selection, TextSelection, type EditorState } from '@tiptap/pm/state';
import { Decoration, DecorationSet } from '@tiptap/pm/view';
export const REPLY_QUOTE_START_ATTRIBUTE = 'data-reply-quote-start';
@@ -59,6 +59,55 @@ function quoteRanges(doc: PMNode): QuoteRange[] {
return ranges;
}
+const isSignature = (node: PMNode) => node.type.name === 'signatureBlock' || Boolean(node.attrs['data-signature-block']);
+
+function collapsedRanges(state: EditorState): QuoteRange[] {
+ const expanded = quoteKey.getState(state)?.expanded ?? new Set();
+ return quoteRanges(state.doc).filter((range) => !expanded.has(range.from));
+}
+
+/**
+ * Where the user's own text ends: the end of the last paragraph above the
+ * folded quote or the signature, whichever comes first. Null when the body
+ * has neither, so the end of the body is the end of the text.
+ */
+export function userTextEnd(state: EditorState): number | null {
+ const ranges = quoteRanges(state.doc);
+ let boundary: number | null = collapsedRanges(state)[0]?.from ?? null;
+ state.doc.forEach((node, pos) => {
+ if (isSignature(node) && (boundary === null || pos < boundary)) boundary = pos;
+ });
+ if (boundary === null) return null;
+ let end: number | null = null;
+ state.doc.forEach((node, pos) => {
+ if (pos + node.nodeSize > boundary! || !node.isTextblock || isSignature(node)) return;
+ if (ranges.some((range) => pos >= range.from && pos < range.to)) return;
+ end = pos + node.nodeSize - 1;
+ });
+ return end;
+}
+
+/**
+ * A click that lands under a folded quote (on the empty line the editor keeps
+ * at the end) would write below the hidden original, where the user can't see
+ * it. It goes to the end of their own text above the quote instead
+ * (compose-p2-3). Lines the user can see below the quote keep their click.
+ */
+function clickBelowCollapsedQuote(state: EditorState, pos: number): boolean {
+ const ranges = collapsedRanges(state);
+ const first = ranges[0];
+ if (!first || pos < first.from) return false;
+ const $pos = state.doc.resolve(pos);
+ const topPos = $pos.depth > 0 ? $pos.before(1) : pos;
+ let hiddenOrEmpty = true;
+ state.doc.forEach((node, nodePos) => {
+ if (nodePos < first.from || nodePos > topPos) return;
+ if (ranges.some((range) => nodePos >= range.from && nodePos < range.to)) return;
+ if (!node.isTextblock || isSignature(node) || node.content.size > 0) hiddenOrEmpty = false;
+ });
+ return hiddenOrEmpty;
+}
+
/** Visibility is a view decoration, never a document edit or an undo step. */
export const ReplyQuoteCollapse = Extension.create<{ show: string; hide: string }>({
name: 'replyQuoteCollapse',
@@ -107,6 +156,13 @@ export const ReplyQuoteCollapse = Extension.create<{ show: string; hide: string
},
},
props: {
+ handleClick(view, pos) {
+ if (!clickBelowCollapsedQuote(view.state, pos)) return false;
+ const end = userTextEnd(view.state);
+ if (end === null) return false;
+ view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, end)));
+ return true;
+ },
decorations(state) {
const expanded = quoteKey.getState(state)?.expanded ?? new Set();
const decorations: Decoration[] = [];
diff --git a/components/email/rich-text-editor.tsx b/components/email/rich-text-editor.tsx
index 952a9da30..e0a9720a3 100644
--- a/components/email/rich-text-editor.tsx
+++ b/components/email/rich-text-editor.tsx
@@ -32,7 +32,8 @@ import { RecipientMention, RecipientMentionList, type RecipientMentionListHandle
import { MentionChipCard, setMentionRecipients } from "@/components/email/mention-chip";
import { mentionSuggestions, type MentionCandidate, type MentionContact } from "@/lib/recipient-mentions";
import { cn } from "@/lib/utils";
-import { PromptDialog } from "@/components/ui/prompt-dialog";
+import { getMarkRange } from "@tiptap/core";
+import { LinkDialog } from "@/components/email/link-dialog";
import { ImageAltDialog } from "@/components/email/image-alt-dialog";
/** A typed address without a scheme ("example.com") becomes a web link. */
@@ -741,26 +742,43 @@ export function RichTextEditor({
if (editor) setMentionRecipients(editor, mentionCandidates ? mentionCandidates.map((c) => c.email) : null);
}, [editor, mentionCandidates]);
- // Insert link asks for the address in the app's own dialog; on a link it
- // starts from the current address and offers "Remove link".
- // The selection is kept from when the dialog opened: the dialog takes the
- // focus, and with it the editor's selection.
- const [linkDialog, setLinkDialog] = useState<{ href: string; from: number; to: number } | null>(null);
+ // Insert link asks for the text and the address in the app's own dialog
+ // (compose-p2-7); on a link it starts from the link's text and address and
+ // offers "Remove link". The range is kept from when the dialog opened: the
+ // dialog takes the focus, and with it the editor's selection.
+ const [linkDialog, setLinkDialog] = useState<{ href: string; text: string; from: number; to: number } | null>(null);
const addLink = useCallback(() => {
if (!editor) return;
const previousUrl = editor.getAttributes("link").href as string | undefined;
- const { from, to } = editor.state.selection;
- setLinkDialog({ href: previousUrl ?? "", from, to });
+ let { from, to } = editor.state.selection;
+ // The caret in a link edits the whole link.
+ const linkType = editor.schema.marks.link;
+ if (previousUrl && from === to && linkType) {
+ const range = getMarkRange(editor.state.doc.resolve(from), linkType);
+ if (range) ({ from, to } = range);
+ }
+ const text = editor.state.doc.textBetween(from, to, " ");
+ setLinkDialog({ href: previousUrl ?? "", text, from, to });
}, [editor]);
addLinkRef.current = addLink;
- const applyLink = useCallback((url: string) => {
+ const applyLink = useCallback(({ text, href }: { text: string; href: string }) => {
if (!editor || !linkDialog) return;
- editor
- .chain()
- .focus()
- .setTextSelection({ from: linkDialog.from, to: linkDialog.to })
+ const label = text.trim() ? text : href;
+ const { from, to } = linkDialog;
+ const chain = editor.chain().focus();
+ if (from === to || label !== linkDialog.text) {
+ // Nothing selected, or the text changed: the text goes in as the link.
+ chain
+ .insertContentAt({ from, to }, { type: "text", text: label, marks: [{ type: "link", attrs: { href } }] })
+ .setTextSelection(from + label.length)
+ .unsetMark("link")
+ .run();
+ return;
+ }
+ chain
+ .setTextSelection({ from, to })
.extendMarkRange("link")
- .setLink({ href: url })
+ .setLink({ href })
.run();
}, [editor, linkDialog]);
const removeLink = useCallback(() => {
@@ -776,7 +794,6 @@ export function RichTextEditor({
const tToolbar = useTranslations("email_composer.toolbar");
const tWindows = useTranslations("compose_windows");
- const tCommon = useTranslations("common");
const [tableMenuOpen, setTableMenuOpen] = useState(false);
const tableWrapperRef = useRef(null);
const [colorMenuOpen, setColorMenuOpen] = useState(false);
@@ -1465,16 +1482,13 @@ export function RichTextEditor({
document.body
)}
- setLinkDialog(null)}
- title={linkDialog?.href ? tToolbar("edit_link") : tToolbar("insert_link")}
- placeholder={tToolbar("link_address")}
- defaultValue={linkDialog?.href ?? ""}
- confirmText={tCommon("save")}
- validate={(value) => (/\s/.test(value) ? tToolbar("link_invalid") : null)}
- onSubmit={(value) => applyLink(withLinkScheme(value))}
- extraAction={linkDialog?.href ? { label: tToolbar("remove_link"), onClick: removeLink } : undefined}
+ defaultText={linkDialog?.text ?? ""}
+ defaultHref={linkDialog?.href ?? ""}
+ onSubmit={({ text, href }) => applyLink({ text, href: withLinkScheme(href) })}
+ onRemove={linkDialog?.href ? removeLink : undefined}
/>
void;
/** "Send anyway". `dontAskAgain`: the box under a single warning that has a setting. */
onSendAnyway: (dontAskAgain: boolean) => void;
+ /** Asked before Schedule send: the button says "Schedule anyway". */
+ scheduling?: boolean;
}
/** The warnings that can be switched off in Settings (subject and placeholders). */
@@ -30,7 +32,7 @@ const HAS_SETTING = new Set(["subject", "placeholders"]);
* own title and text, several are listed in one dialog with one "Send anyway"
* (two dialogs in a row asked about each in turn).
*/
-export function SendWarningsDialog({ warnings, onBack, onSendAnyway }: SendWarningsDialogProps) {
+export function SendWarningsDialog({ warnings, onBack, onSendAnyway, scheduling = false }: SendWarningsDialogProps) {
const t = useTranslations("email_composer");
const tSend = useTranslations("compose_send");
const tProofreading = useTranslations("proofreading");
@@ -89,7 +91,7 @@ export function SendWarningsDialog({ warnings, onBack, onSendAnyway }: SendWarni
backLabel = tProofreading("send_warning.review");
sendLabel = tProofreading("send_warning.send");
} else {
- title = tSend("warnings_title");
+ title = tSend(scheduling ? "schedule_warnings_title" : "warnings_title");
body = (
@@ -349,6 +362,9 @@ interface EmailCardProps {
onReply?: () => void;
onReplyAll?: () => void;
onForward?: () => void;
+ isDraft?: boolean;
+ onEditDraft?: () => void;
+ onDiscardDraft?: () => void;
onDownloadAttachment?: ConversationAttachmentHandler;
/** Routing captured when this conversation was opened. */
blobSource?: EmailBlobContext;
@@ -387,6 +403,9 @@ function EmailCard({
onReply,
onReplyAll,
onForward,
+ isDraft = false,
+ onEditDraft,
+ onDiscardDraft,
onDownloadAttachment,
blobSource,
onMarkAsRead,
@@ -442,6 +461,11 @@ function EmailCard({
-
{items.map((w) => (
@@ -113,6 +115,9 @@ export function SendWarningsDialog({ warnings, onBack, onSendAnyway }: SendWarni
);
}
+ // Nothing goes out now: the message is scheduled (compose-p2-14).
+ if (scheduling) sendLabel = tSend("schedule_anyway");
+
return (
+ {onEditDraft && (
+
+ )}
+ {onDiscardDraft && (
+
+ )}
{onReply && (