@novacraft-engineering/mailbox 0.4.25 → 0.4.26

package/app/mail/writing/WritingPanel.tsx

@@ -0,0 +1,259 @@
+'use client'
+
+import { useState } from 'react'
+import styles from '../page.module.css'
+import MailSelect from '../MailSelect'
+import type { WritingSettings } from './settings'
+import { normaliseShortcut, type MailTemplate } from './templates'
+
+type Tab = 'writing' | 'checks' | 'templates' | 'dictionary' | 'shortcuts'
+
+const SHORTCUTS: Array<[string, string]> = [
+  ['Tab', 'Indent, or nest a list item; jumps to the next {field} in a template'],
+  ['Tab Tab (quickly)', 'Leave the message for the next control'],
+  ['Shift Tab', 'Move a list item back out'],
+  ['⌘/Ctrl B · I · U', 'Bold · italic · underline'],
+  ['⌘/Ctrl K', 'Add or edit a link'],
+  ['⌘/Ctrl Shift 7 · 8', 'Numbered list · bullet list'],
+  ['⌘/Ctrl Shift V', 'Paste without formatting'],
+  ['⌘/Ctrl F', 'Find and replace in this message'],
+  ['⌘/Ctrl Z · Shift Z', 'Undo · redo'],
+  ['⌘/Ctrl Enter', 'Send'],
+  ['Backspace', 'Straight after an automatic change, puts back what you typed'],
+  [';shortcut then Space', 'Insert a saved template'],
+  ['- · 1. · > then Space', 'Start a bullet list · numbered list · quote'],
+]
+
+function Toggle({ label, hint, checked, onChange }: { label: string; hint?: string; checked: boolean; onChange: (next: boolean) => void }) {
+  return (
+    <label className={styles.wpRow}>
+      <span className={styles.wpText}>
+        <span className={styles.wpLabel}>{label}</span>
+        {hint && <span className={styles.wpHint}>{hint}</span>}
+      </span>
+      <input type="checkbox" className={styles.wpSwitch} checked={checked} onChange={event => onChange(event.target.checked)} />
+    </label>
+  )
+}
+
+export default function WritingPanel({
+  settings,
+  onChange,
+  templates,
+  onSaveTemplate,
+  onDeleteTemplate,
+  onInsertTemplate,
+  currentHtml,
+  companyWords,
+  onCompanyWords,
+  isAdmin,
+  grammarAvailable,
+  onClose,
+}: {
+  settings: WritingSettings
+  onChange: (next: WritingSettings) => void
+  templates: MailTemplate[]
+  onSaveTemplate?: (template: MailTemplate) => void
+  onDeleteTemplate?: (id: string) => void
+  onInsertTemplate: (template: MailTemplate) => void
+  currentHtml: string
+  companyWords: string[]
+  onCompanyWords?: (words: string[]) => void
+  isAdmin: boolean
+  grammarAvailable: boolean
+  onClose: () => void
+}) {
+  const [tab, setTab] = useState<Tab>('writing')
+  const [templateName, setTemplateName] = useState('')
+  const [templateShortcut, setTemplateShortcut] = useState('')
+  const [companyDraft, setCompanyDraft] = useState('')
+  const set = <K extends keyof WritingSettings>(key: K, value: WritingSettings[K]) => onChange({ ...settings, [key]: value })
+
+  return (
+    <div className={styles.wpPanel} role="dialog" aria-label="Writing tools">
+      <div className={styles.wpHead}>
+        <span className={styles.wpTitle}>Writing tools</span>
+        <button type="button" className={styles.wpClose} onClick={onClose} aria-label="Close">×</button>
+      </div>
+      <div className={styles.wpTabs} role="tablist">
+        {(['writing', 'checks', 'templates', 'dictionary', 'shortcuts'] as Tab[]).map(name => (
+          <button key={name} type="button" role="tab" aria-selected={tab === name} className={`${styles.wpTab} ${tab === name ? styles.wpTabOn : ''}`} onClick={() => setTab(name)}>
+            {name === 'checks' ? 'Before sending' : name[0].toUpperCase() + name.slice(1)}
+          </button>
+        ))}
+      </div>
+
+      <div className={styles.wpBody}>
+        {tab === 'writing' && (
+          <>
+            <Toggle label="Capitalise new sentences" hint="After . ? ! and at the start of a paragraph" checked={settings.autoCapitalize} onChange={value => set('autoCapitalize', value)} />
+            {settings.autoCapitalize && (
+              <div className={styles.wpIndent}>
+                <Toggle label="Add a missed space" hint="end.Next → end. Next, as you type" checked={settings.spaceAfterStop} onChange={value => set('spaceAfterStop', value)} />
+              </div>
+            )}
+            <Toggle label='Capital "I"' checked={settings.capitalizeI} onChange={value => set('capitalizeI', value)} />
+            <Toggle label="Fix common typos" hint="teh → the, dont → don't" checked={settings.autocorrect} onChange={value => set('autocorrect', value)} />
+            <Toggle label="Check spelling" hint="On for new messages; the ✓Aa button turns it off for one" checked={settings.spellcheck} onChange={value => set('spellcheck', value)} />
+            {settings.spellcheck && (
+              <div className={styles.wpIndent}>
+                <label className={styles.wpRow}>
+                  <span className={styles.wpLabel}>Dictionary</span>
+                  <MailSelect
+                    ariaLabel="Dictionary"
+                    buttonClassName={styles.wpSelect}
+                    value={settings.spellLanguage}
+                    options={[
+                      { value: 'en-GB', label: 'British English' },
+                      { value: 'en-US', label: 'American English' },
+                    ]}
+                    onChange={value => set('spellLanguage', value === 'en-US' ? 'en-US' : 'en-GB')}
+                  />
+                </label>
+                <Toggle label="Skip words in CAPITALS" hint="Acronyms and company names" checked={settings.ignoreCapitals} onChange={value => set('ignoreCapitals', value)} />
+                <Toggle label="Skip words with numbers" hint="Policy and vehicle numbers" checked={settings.ignoreWithNumbers} onChange={value => set('ignoreWithNumbers', value)} />
+                <Toggle label="Flag repeated words" hint='"the the"' checked={settings.repeatedWords} onChange={value => set('repeatedWords', value)} />
+              </div>
+            )}
+            <Toggle
+              label="Check grammar"
+              hint={grammarAvailable ? 'Checked on this company’s own server' : 'Not set up on this mailbox yet'}
+              checked={settings.grammar && grammarAvailable}
+              onChange={value => set('grammar', value)}
+            />
+            <Toggle label="Tab indents" hint="A quick second Tab leaves the message" checked={settings.tabIndent} onChange={value => set('tabIndent', value)} />
+            {settings.tabIndent && (
+              <label className={`${styles.wpRow} ${styles.wpIndent}`}>
+                <span className={styles.wpText}>
+                  <span className={styles.wpLabel}>Double-Tab speed</span>
+                  <span className={styles.wpHint}>{settings.doubleTabMs} ms between presses</span>
+                </span>
+                <input type="range" min={200} max={1000} step={50} value={settings.doubleTabMs} onChange={event => set('doubleTabMs', Number(event.target.value))} />
+              </label>
+            )}
+            <Toggle label="Template shortcuts" hint="Type ;name then Space" checked={settings.templateShortcuts} onChange={value => set('templateShortcuts', value)} />
+            <Toggle label="Clean pasted formatting" hint="Strips Word and Excel styling, keeps tables" checked={settings.cleanPaste} onChange={value => set('cleanPaste', value)} />
+            <Toggle label="Format amounts" hint="$2500 → $2,500 · USD 1500000 → USD 1,500,000 · ₦, £, €, GHS, KES…" checked={settings.amountFormat} onChange={value => set('amountFormat', value)} />
+            {settings.amountFormat && (
+              <div className={styles.wpIndent}>
+                <Toggle label="N means naira" hint="N1500000 → ₦1,500,000" checked={settings.nairaLetter} onChange={value => set('nairaLetter', value)} />
+                <Toggle label="Plain numbers too" hint="1500000 → 1,500,000 · years, phone and account numbers are left alone" checked={settings.numberFormat} onChange={value => set('numberFormat', value)} />
+              </div>
+            )}
+            <Toggle label="Word count" checked={settings.wordCount} onChange={value => set('wordCount', value)} />
+          </>
+        )}
+
+        {tab === 'checks' && (
+          <>
+            <p className={styles.wpNote}>Asked when you press Send. You can always send anyway.</p>
+            <Toggle label="Missing attachment" hint='"attached" or "enclosed" with nothing attached' checked={settings.checkAttachment} onChange={value => set('checkAttachment', value)} />
+            <Toggle label="Nothing written" hint="Only the signature or the quoted message" checked={settings.checkEmptyBody} onChange={value => set('checkEmptyBody', value)} />
+            <Toggle label="Unfilled placeholders" hint="[Name], {policy_no}, XXX" checked={settings.checkPlaceholders} onChange={value => set('checkPlaceholders', value)} />
+            <Toggle label="Greeting names someone else" hint='"Dear Mr Okafor" to a different person' checked={settings.checkGreeting} onChange={value => set('checkGreeting', value)} />
+            <Toggle label="Many outside recipients" checked={settings.checkExternal} onChange={value => set('checkExternal', value)} />
+            {settings.checkExternal && (
+              <label className={`${styles.wpRow} ${styles.wpIndent}`}>
+                <span className={styles.wpLabel}>Warn from</span>
+                <span>
+                  <input type="number" min={1} max={100} className={styles.wpNumber} value={settings.externalThreshold} onChange={event => set('externalThreshold', Math.max(1, Math.min(100, Number(event.target.value) || 1)))} /> people
+                </span>
+              </label>
+            )}
+          </>
+        )}
+
+        {tab === 'templates' && (
+          <>
+            {templates.length === 0 && <p className={styles.wpNote}>No templates yet. Write one below, then save it.</p>}
+            {templates.map(template => (
+              <div key={template.id} className={styles.wpTemplate}>
+                <button type="button" className={styles.wpTemplateName} onClick={() => onInsertTemplate(template)} title="Insert into this message">
+                  {template.name}
+                  {template.shortcut && <span className={styles.wpShortcut}>;{normaliseShortcut(template.shortcut)}</span>}
+                </button>
+                {onDeleteTemplate && (
+                  <button type="button" className={styles.wpRemove} onClick={() => onDeleteTemplate(template.id)} aria-label={`Delete ${template.name}`}>×</button>
+                )}
+              </div>
+            ))}
+            {onSaveTemplate && (
+              <div className={styles.wpSave}>
+                <span className={styles.wpLabel}>Save this message as a template</span>
+                <span className={styles.wpHint}>Write {'{first_name}'}, {'{date}'} or any {'{field}'}: known ones fill in, Tab jumps to the rest</span>
+                <input className={styles.wpInput} placeholder="Name, e.g. Renewal notice" value={templateName} onChange={event => setTemplateName(event.target.value)} />
+                <input className={styles.wpInput} placeholder="Shortcut, e.g. renewal" value={templateShortcut} onChange={event => setTemplateShortcut(event.target.value)} />
+                <button
+                  type="button"
+                  className={styles.wpButton}
+                  disabled={!templateName.trim() || !currentHtml.replace(/<[^>]+>/g, '').trim()}
+                  onClick={() => {
+                    onSaveTemplate({ id: `t${Date.now().toString(36)}`, name: templateName.trim(), shortcut: normaliseShortcut(templateShortcut), html: currentHtml })
+                    setTemplateName('')
+                    setTemplateShortcut('')
+                  }}
+                >
+                  Save template
+                </button>
+              </div>
+            )}
+          </>
+        )}
+
+        {tab === 'dictionary' && (
+          <>
+            <span className={styles.wpLabel}>Your words</span>
+            <span className={styles.wpHint}>Added from a red underline with “Add to dictionary”</span>
+            <div className={styles.wpChips}>
+              {settings.personalWords.length === 0 && <span className={styles.wpHint}>None yet</span>}
+              {settings.personalWords.map(word => (
+                <span key={word} className={styles.wpChip}>
+                  {word}
+                  <button type="button" onClick={() => set('personalWords', settings.personalWords.filter(entry => entry !== word))} aria-label={`Remove ${word}`}>×</button>
+                </span>
+              ))}
+            </div>
+            <span className={styles.wpLabel}>Company words</span>
+            <span className={styles.wpHint}>{isAdmin ? 'Everyone in the company gets these' : 'Kept by an administrator'}</span>
+            <div className={styles.wpChips}>
+              {companyWords.length === 0 && <span className={styles.wpHint}>None yet</span>}
+              {companyWords.map(word => (
+                <span key={word} className={styles.wpChip}>
+                  {word}
+                  {isAdmin && onCompanyWords && (
+                    <button type="button" onClick={() => onCompanyWords(companyWords.filter(entry => entry !== word))} aria-label={`Remove ${word}`}>×</button>
+                  )}
+                </span>
+              ))}
+            </div>
+            {isAdmin && onCompanyWords && (
+              <form
+                className={styles.wpSave}
+                onSubmit={event => {
+                  event.preventDefault()
+                  const words = companyDraft.split(/[,\s]+/).map(word => word.trim()).filter(Boolean)
+                  if (words.length) onCompanyWords([...new Set([...companyWords, ...words])])
+                  setCompanyDraft('')
+                }}
+              >
+                <input className={styles.wpInput} placeholder="Add words, separated by commas" value={companyDraft} onChange={event => setCompanyDraft(event.target.value)} />
+                <button type="submit" className={styles.wpButton}>Add</button>
+              </form>
+            )}
+          </>
+        )}
+
+        {tab === 'shortcuts' && (
+          <dl className={styles.wpKeys}>
+            {SHORTCUTS.map(([keys, what]) => (
+              <div key={keys} className={styles.wpKeyRow}>
+                <dt><kbd>{keys}</kbd></dt>
+                <dd>{what}</dd>
+              </div>
+            ))}
+          </dl>
+        )}
+      </div>
+    </div>
+  )
+}

package/app/mail/writing/assist.ts

@@ -0,0 +1,139 @@
+import { Extension } from '@tiptap/react'
+import { Plugin, PluginKey, TextSelection } from '@tiptap/pm/state'
+import type { EditorView } from '@tiptap/pm/view'
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
+import { correctWord, formatAmount, startsSentence } from './text'
+import { TEMPLATE_FIELD, fillTemplate, normaliseShortcut } from './templates'
+import { live } from './live'
+
+type Revert = { doc: ProseMirrorNode; from: number; to: number; original: string }
+
+/** What a word after a full stop turns out to be when the stop belonged to an address or a file name. */
+const ADDRESS_ENDINGS = new Set([
+  'com', 'ng', 'org', 'net', 'io', 'co', 'uk', 'africa', 'info', 'gov', 'edu', 'biz', 'me', 'app', 'dev', 'us', 'za', 'gh', 'ke',
+  'pdf', 'doc', 'docx', 'xls', 'xlsx', 'csv', 'ppt', 'pptx', 'jpg', 'jpeg', 'png', 'gif', 'zip', 'txt', 'html', 'eml', 'msg',
+])
+
+const BOUNDARY = /^[\s.,!?;:)\]"'”’]$/
+
+function inCode(view: EditorView, pos: number): boolean {
+  const $pos = view.state.doc.resolve(pos)
+  if ($pos.parent.type.name === 'codeBlock') return true
+  return $pos.marks().some(mark => mark.type.name === 'code')
+}
+
+/** The next {field} after the caret, or the first one in the message. */
+export function nextField(doc: ProseMirrorNode, after: number): { from: number; to: number } | null {
+  let first: { from: number; to: number } | null = null
+  let next: { from: number; to: number } | null = null
+  doc.descendants((node, pos) => {
+    if (next || !node.isText || !node.text) return !next
+    for (const match of node.text.matchAll(TEMPLATE_FIELD)) {
+      const range = { from: pos + (match.index ?? 0), to: pos + (match.index ?? 0) + match[0].length }
+      if (!first) first = range
+      if (range.from >= after && !next) next = range
+    }
+    return !next
+  })
+  return next ?? first
+}
+
+/**
+ * The small corrections made while typing: a capital to start a sentence, "I" on its own,
+ * common typos, naira amounts, and template shortcuts. Each is one Backspace from undone.
+ */
+export const WritingAssist = Extension.create<Record<string, never>, { revert: Revert | null; spaced: number | null }>({
+  name: 'writingAssist',
+  addStorage() {
+    return { revert: null, spaced: null }
+  },
+  addKeyboardShortcuts() {
+    return {
+      Backspace: () => {
+        const revert = this.storage.revert
+        this.storage.revert = null
+        if (!revert || revert.doc !== this.editor.state.doc) return false
+        this.editor.view.dispatch(this.editor.state.tr.insertText(revert.original, revert.from, revert.to))
+        return true
+      },
+    }
+  },
+  addProseMirrorPlugins() {
+    const storage = this.storage
+    const editor = this.editor
+    const remember = (view: EditorView, from: number, to: number, original: string) => {
+      storage.revert = { doc: view.state.doc, from, to, original }
+    }
+    return [
+      new Plugin({
+        key: new PluginKey('writingAssist'),
+        props: {
+          handleTextInput: (view, from, to, text) => {
+            storage.revert = null
+            if (from !== to || text.length !== 1 || inCode(view, from)) return false
+            const state = live(editor)
+            if (!state.tools) return false
+            const settings = state.settings
+            const $from = view.state.doc.resolve(from)
+            const before = $from.parent.textBetween(0, $from.parentOffset, undefined, '')
+
+            // A letter straight after the stop: the space was missed, so it goes in with the capital.
+            if (settings.autoCapitalize && settings.spaceAfterStop && /[A-Za-z]/.test(text) && /[A-Za-z]{2}[.!?]$/.test(before) && startsSentence(`${before} `)) {
+              view.dispatch(view.state.tr.insertText(` ${text.toUpperCase()}`, from, to))
+              remember(view, from, from + 2, text)
+              storage.spaced = before.endsWith('.') ? from : null
+              return true
+            }
+
+            if (settings.autoCapitalize && /[a-z]/.test(text) && startsSentence(before)) {
+              view.dispatch(view.state.tr.insertText(text.toUpperCase(), from, to))
+              remember(view, from, from + 1, text)
+              return true
+            }
+
+            if (!BOUNDARY.test(text)) return false
+            const word = before.match(/([^\s]+)$/)?.[1]
+            const spaced = storage.spaced
+            storage.spaced = null
+            if (!word) return false
+            const start = from - word.length
+
+            // "metroperil. Com" was an address after all: take the space and the capital back out.
+            if (spaced !== null && start === spaced + 1 && ADDRESS_ENDINGS.has(word.toLowerCase())) {
+              view.dispatch(view.state.tr.insertText(word.toLowerCase() + text, spaced, to))
+              return true
+            }
+
+            if (settings.templateShortcuts && word.startsWith(';') && text === ' ') {
+              const shortcut = normaliseShortcut(word)
+              const template = state.templates.find(entry => normaliseShortcut(entry.shortcut) === shortcut)
+              if (template) {
+                editor.chain().focus().deleteRange({ from: start, to }).insertContent(fillTemplate(template.html, state.context)).run()
+                const field = nextField(editor.state.doc, start)
+                if (field) editor.view.dispatch(editor.state.tr.setSelection(TextSelection.create(editor.state.doc, field.from, field.to)))
+                return true
+              }
+            }
+
+            const bare = word.replace(/^["'“‘(\[]+/, '')
+            const offset = word.length - bare.length
+            let replacement: string | null = null
+            if (settings.capitalizeI && bare === 'i') replacement = 'I'
+            else if (settings.autocorrect) replacement = correctWord(bare)
+            if (!replacement && settings.amountFormat) {
+              const previous = before.slice(0, start).match(/(\S+)\s+$/)?.[1] ?? ''
+              replacement = formatAmount(bare, { nairaLetter: settings.nairaLetter, plainNumbers: settings.numberFormat }, previous)
+            }
+            if (!replacement) return false
+
+            const wordFrom = start + offset
+            const tr = view.state.tr.insertText(replacement + text, wordFrom, to)
+            view.dispatch(tr)
+            remember(view, wordFrom, wordFrom + replacement.length, bare)
+            return true
+          },
+        },
+      }),
+    ]
+  },
+})

package/app/mail/writing/checks.test.ts

@@ -0,0 +1,48 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+import { sendIssues } from './checks.ts'
+import { WRITING_DEFAULTS } from './settings.ts'
+
+const base: { recipients: Array<{ email: string; name?: string }>; attachmentCount: number; ownDomains: string[] } = {
+  recipients: [{ email: 'eric.samuel@coronation.ng', name: 'Eric Samuel' }],
+  attachmentCount: 0,
+  ownDomains: ['metroperilinsbrokers.com'],
+}
+const kinds = (body: string, extra: Partial<typeof base> = {}, settings = WRITING_DEFAULTS) =>
+  sendIssues({ ...base, ...extra, body }, settings).map(issue => issue.kind)
+
+test('a promised attachment with none attached is caught', () => {
+  assert.deepEqual(kinds('Dear Eric,\nPlease find attached the schedule.'), ['attachment'])
+  assert.deepEqual(kinds('Dear Eric,\nPlease find attached the schedule.', { attachmentCount: 1 }), [])
+  assert.deepEqual(kinds('Dear Eric,\nThe documents are enclosed.'), ['attachment'])
+  assert.deepEqual(kinds('Dear Eric,\nPlease find below the details.'), [])
+})
+
+test('empty body and leftover placeholders', () => {
+  assert.deepEqual(kinds('   '), ['empty'])
+  assert.deepEqual(kinds('Dear {first_name}, your renewal is due.'), ['placeholder'])
+  assert.deepEqual(kinds('Dear Eric, premium is N[amount].'), ['placeholder'])
+  assert.deepEqual(kinds('Dear Eric, see [cid:image001.png] below.'), [], 'an inline image marker is not a placeholder')
+})
+
+test('the greeting has to match a recipient', () => {
+  assert.deepEqual(kinds('Dear Mr. Okafor,\nThanks.'), ['greeting'])
+  assert.deepEqual(kinds('Dear Mr. Samuel,\nThanks.'), [])
+  assert.deepEqual(kinds('Hi Eric,\nThanks.'), [])
+  assert.deepEqual(kinds('Dear Sir,\nThanks.'), [])
+  assert.deepEqual(kinds('Good morning all,\nThanks.'), [])
+  assert.deepEqual(kinds('Hello, the schedule is below.'), [], 'an ordinary word after the greeting is not a name')
+  assert.deepEqual(kinds('Hi there, thanks.'), [])
+})
+
+test('many outside recipients are flagged, colleagues are not counted', () => {
+  const outsiders = Array.from({ length: 5 }, (_, index) => ({ email: `p${index}@insurer.com` }))
+  assert.deepEqual(kinds('Hello all, thanks.', { recipients: outsiders }), ['external'])
+  const colleagues = outsiders.map(entry => ({ email: entry.email.replace('insurer.com', 'metroperilinsbrokers.com') }))
+  assert.deepEqual(kinds('Hello all, thanks.', { recipients: colleagues }), [])
+})
+
+test('every check can be switched off', () => {
+  const off = { ...WRITING_DEFAULTS, checkAttachment: false, checkEmptyBody: false, checkPlaceholders: false, checkGreeting: false, checkExternal: false }
+  assert.deepEqual(kinds('Dear {x} Okafor, attached', {}, off), [])
+})

package/app/mail/writing/checks.ts

@@ -0,0 +1,58 @@
+import type { WritingSettings } from './settings'
+
+export type SendCheckInput = {
+  /** What the sender wrote: no signature, no quoted message. */
+  body: string
+  recipients: Array<{ email: string; name?: string | null }>
+  attachmentCount: number
+  ownDomains: string[]
+}
+
+export type SendIssue = { kind: 'attachment' | 'empty' | 'placeholder' | 'greeting' | 'external'; message: string }
+
+const PROMISES_ATTACHMENT =
+  /\b(attached|attachments?|enclosed|enclosing|herewith|I(?:'ve| have) (?:also )?(?:included|added) the (?:file|document|schedule|form|quote|policy|invoice))\b/i
+const PLACEHOLDER = /\[(?![Cc]id:)[^\]\n]{1,40}\]|\{[A-Za-z_ ]{1,30}\}|<<[^>\n]{1,40}>>|\bX{3,}\b|\bTBD\b|\bTODO\b/
+const GREETING = /^\s*(?:dear|hi|hello|hey|good (?:morning|afternoon|evening))[ ,]+(?:(?:mr|mrs|ms|miss|dr|prof|engr|chief|sir|madam|barr|alh(?:aji)?|hajia)\.?\s+)?([A-Za-z][A-Za-z'-]{1,30})/i
+const GENERIC = new Set(['sir', 'madam', 'sirs', 'all', 'team', 'everyone', 'colleague', 'colleagues', 'gentlemen', 'there', 'friend', 'client', 'customer', 'valued', 'concerned', 'whom', 'both', 'you'])
+
+const domainOf = (email: string) => email.trim().toLowerCase().split('@')[1] ?? ''
+
+/** What looks wrong with a message before it goes, each on its own switch. */
+export function sendIssues(input: SendCheckInput, settings: WritingSettings): SendIssue[] {
+  const issues: SendIssue[] = []
+  const body = input.body.trim()
+
+  if (settings.checkEmptyBody && !body) {
+    issues.push({ kind: 'empty', message: 'The message has no text of your own — only the signature or the quoted message.' })
+  }
+  if (settings.checkAttachment && input.attachmentCount === 0) {
+    const promise = body.match(PROMISES_ATTACHMENT)
+    if (promise) issues.push({ kind: 'attachment', message: `It says “${promise[0]}”, but nothing is attached.` })
+  }
+  if (settings.checkPlaceholders) {
+    const left = body.match(PLACEHOLDER)
+    if (left) issues.push({ kind: 'placeholder', message: `“${left[0]}” looks like a placeholder that was never filled in.` })
+  }
+  if (settings.checkGreeting) {
+    const greeted = body.split('\n').find(line => line.trim())?.match(GREETING)?.[1]
+    if (greeted && /^[A-Z]/.test(greeted) && !GENERIC.has(greeted.toLowerCase())) {
+      const target = greeted.toLowerCase()
+      const matches = input.recipients.some(recipient => {
+        const haystack = `${recipient.name ?? ''} ${recipient.email.split('@')[0]}`.toLowerCase()
+        return haystack.includes(target) || (target.length >= 4 && haystack.includes(target.slice(0, 4)))
+      })
+      if (!matches && input.recipients.length) {
+        issues.push({ kind: 'greeting', message: `The greeting names “${greeted}”, but no recipient looks like ${greeted}.` })
+      }
+    }
+  }
+  if (settings.checkExternal) {
+    const own = new Set(input.ownDomains.map(domain => domain.toLowerCase()))
+    const outside = input.recipients.filter(recipient => !own.has(domainOf(recipient.email)))
+    if (outside.length >= settings.externalThreshold) {
+      issues.push({ kind: 'external', message: `It goes to ${outside.length} people outside the company.` })
+    }
+  }
+  return issues
+}

package/app/mail/writing/find.ts

@@ -0,0 +1,52 @@
+import { Extension } from '@tiptap/react'
+import { Plugin, PluginKey, type EditorState } from '@tiptap/pm/state'
+import { Decoration, DecorationSet } from '@tiptap/pm/view'
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
+
+export type FindState = { query: string; index: number }
+export const findKey = new PluginKey<FindState>('find')
+
+export function findMatches(doc: ProseMirrorNode, query: string): Array<{ from: number; to: number }> {
+  const needle = query.toLowerCase()
+  if (!needle) return []
+  const out: Array<{ from: number; to: number }> = []
+  doc.descendants((node, pos) => {
+    if (!node.isText || !node.text) return true
+    const haystack = node.text.toLowerCase()
+    for (let at = haystack.indexOf(needle); at !== -1; at = haystack.indexOf(needle, at + needle.length)) {
+      out.push({ from: pos + at, to: pos + at + needle.length })
+    }
+    return false
+  })
+  return out
+}
+
+export const findState = (state: EditorState): FindState => findKey.getState(state) ?? { query: '', index: 0 }
+
+/** Highlights every match of the find bar's query, the current one more strongly. */
+export const FindReplace = Extension.create({
+  name: 'findReplace',
+  addProseMirrorPlugins() {
+    return [
+      new Plugin<FindState>({
+        key: findKey,
+        state: {
+          init: () => ({ query: '', index: 0 }),
+          apply: (tr, value) => (tr.getMeta(findKey) as FindState | undefined) ?? value,
+        },
+        props: {
+          decorations: state => {
+            const { query, index } = findState(state)
+            const matches = findMatches(state.doc, query)
+            if (!matches.length) return DecorationSet.empty
+            const current = ((index % matches.length) + matches.length) % matches.length
+            return DecorationSet.create(
+              state.doc,
+              matches.map((match, position) => Decoration.inline(match.from, match.to, { class: position === current ? 'rteFindCurrent' : 'rteFind' })),
+            )
+          },
+        },
+      }),
+    ]
+  },
+})

package/app/mail/writing/grammar.ts

@@ -0,0 +1,100 @@
+import { Extension } from '@tiptap/react'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { Decoration, DecorationSet, type EditorView } from '@tiptap/pm/view'
+import { live } from './live'
+
+type GrammarState = { set: DecorationSet; version: number }
+export const grammarKey = new PluginKey<GrammarState>('grammar')
+
+type Match = { offset: number; length: number; message: string; replacements: string[] }
+
+/** Blue underlines from the company's own grammar server, fetched when typing pauses. */
+export const grammarIgnoreKey = (text: string, message: string) => `${text.toLowerCase()}|${message}`
+
+export const Grammar = Extension.create<Record<string, never>, { ignored: Set<string> }>({
+  name: 'grammar',
+  addStorage() {
+    return { ignored: new Set<string>() }
+  },
+  addProseMirrorPlugins() {
+    const editor = this.editor
+    const ignored = this.storage.ignored
+    let timer: ReturnType<typeof setTimeout> | null = null
+    let asked = 0
+
+    const run = async (view: EditorView) => {
+      const current = live(editor)
+      if (!current.tools || !current.grammarOn) {
+        view.dispatch(view.state.tr.setMeta(grammarKey, DecorationSet.empty))
+        return
+      }
+      const blocks: Array<{ start: number; text: string; at: number }> = []
+      let text = ''
+      view.state.doc.descendants((node, pos) => {
+        if (!node.isTextblock) return true
+        if (node.type.name === 'codeBlock') return false
+        const content = node.textBetween(0, node.content.size, undefined, '')
+        if (content.trim()) {
+          blocks.push({ start: pos + 1, text: content, at: text.length })
+          text += `${content}\n\n`
+        }
+        return false
+      })
+      if (!text.trim()) return view.dispatch(view.state.tr.setMeta(grammarKey, DecorationSet.empty))
+      const ticket = ++asked
+      const doc = view.state.doc
+      const response = await fetch('/api/mail/grammar', {
+        method: 'POST',
+        headers: { ...Object.fromEntries(new Headers(current.headers()).entries()), 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text: text.slice(0, 20000), language: current.settings.spellLanguage }),
+      }).catch(() => null)
+      const data = response?.ok ? ((await response.json().catch(() => null)) as { matches?: Match[] } | null) : null
+      if (ticket !== asked || view.isDestroyed || !view.state.doc.eq(doc)) return
+      const decorations = (data?.matches ?? []).flatMap(match => {
+        const block = blocks.find(entry => match.offset >= entry.at && match.offset + match.length <= entry.at + entry.text.length)
+        if (!block) return []
+        const from = block.start + (match.offset - block.at)
+        if (ignored.has(grammarIgnoreKey(view.state.doc.textBetween(from, from + match.length), match.message))) return []
+        return [
+          Decoration.inline(from, from + match.length, {
+            class: 'rteGrammar',
+            'data-kind': 'grammar',
+            'data-message': match.message,
+            'data-replacements': JSON.stringify(match.replacements.slice(0, 5)),
+          }),
+        ]
+      })
+      view.dispatch(view.state.tr.setMeta(grammarKey, DecorationSet.create(view.state.doc, decorations)))
+    }
+
+    return [
+      new Plugin<GrammarState>({
+        key: grammarKey,
+        state: {
+          init: () => ({ set: DecorationSet.empty, version: 0 }),
+          apply(tr, value) {
+            const meta = tr.getMeta(grammarKey) as DecorationSet | 'refresh' | undefined
+            if (meta instanceof DecorationSet) return { set: meta, version: value.version }
+            if (meta === 'refresh') return { set: value.set, version: value.version + 1 }
+            return { set: value.set.map(tr.mapping, tr.doc), version: value.version }
+          },
+        },
+        props: { decorations: state => grammarKey.getState(state)?.set },
+        view: view => {
+          timer = setTimeout(() => void run(view), 800)
+          return {
+            update: (next, previous) => {
+              const refreshed = grammarKey.getState(next.state)?.version !== grammarKey.getState(previous)?.version
+              if (!refreshed && next.state.doc.eq(previous.doc)) return
+              if (timer) clearTimeout(timer)
+              timer = setTimeout(() => void run(next), refreshed ? 0 : 1500)
+            },
+            destroy: () => {
+              if (timer) clearTimeout(timer)
+            },
+          }
+        },
+      }),
+    ]
+  },
+})