Triage the whole queue from the keyboard, and never type an n
The last of the UX review's item 8. Ctrl+. and Ctrl+, step through the underlines from anywhere in the text; the card that opens takes focus and answers Tab / Shift+Tab / Enter / Del / ? / Esc itself. Answering a card advances to the next by itself, and the last one closes and puts the caret back in the prose — so a document is triaged in five presses of Enter. The item asked for bare Tab or n/p. Neither can exist in a text editor: an unmodified letter is a letter. They work fine once a card holds focus, which is where the item wanted them; getting there needs a chord that is safe to press mid-sentence, and mid-composition, so the entry keys are IME-guarded like every other binding. The queue is the underlines read off the decoration DOM in document order, not the suggestion list: a stop she cannot see is worse than one she never visits, and it guarantees the card can anchor itself. Escape is stopped at the card. Unhandled it would also have left distraction-free mode, restoring the sidebar and — via the rail-follows-the- mode fix — pulling the rail out from under her mid-triage. The legend is bilingual and leads with the pair language, unlike the card's English buttons: those name what she is learning, this is an instruction for operating Petal, like the status bar. Key names are as printed on her keyboard (Entrée, Suppr, Intro, Supr). The es pack's own punctuation test caught the "?" and is right in general; the key cap is one named exemption. Verified in a real browser at 1517x810 on a fresh database with no model, over CDP — a keystroke feature deserves real keystrokes. Both layouts, wrap in both directions, the accept/dismiss/advance loop, Ask Petal and back, the full triage-to-empty criterion, and Accept-all clicked from a keyboard card. The wiring has no unit test for the reason items 6, 7 and 8 recorded: jsdom has no layout. triage.ts is pure and tested; browser-verified is written down as browser-verified. Claude-Session: https://claude.ai/code/session_01GJHNvirh7Hzhc9RL3HAvz7
This commit is contained in:
prosolis
@@ -32,9 +32,11 @@ import { Typography } from './Typography'
|
||||
import { Composition } from './Composition'
|
||||
import { RewritePreview, type RewriteStatus } from './RewritePreview'
|
||||
import { planBatch } from './acceptBatch'
|
||||
import { entryId, idAfterRemoval, stepId, type Direction, type Span } from './triage'
|
||||
import { api, type Suggestion, type SuggestionType, type WordInfo } from '../../api/client'
|
||||
import { speak, speechSupported } from '../../audio/speech'
|
||||
import type { SpellChecker } from '../../hooks/useSpellChecker'
|
||||
import { fromIME } from '../../lib/ime'
|
||||
import type { Segmenter } from '../../lib/segment'
|
||||
import { hanziWordAt, hanziToWordInfo, hanziPinyin } from './hanziWord'
|
||||
import { usePack } from '../../i18n'
|
||||
@@ -204,6 +206,9 @@ interface HoverState {
|
||||
suggestion: Suggestion
|
||||
top: number
|
||||
left: number
|
||||
// Opened by a keystroke rather than a pointer: the card takes focus and
|
||||
// answers the triage keys itself (item 8).
|
||||
keyboard?: boolean
|
||||
}
|
||||
|
||||
// The inline hover gloss: the word under the resting pointer, its Chinese
|
||||
@@ -646,7 +651,7 @@ export function EditorCore({
|
||||
}, [])
|
||||
|
||||
const openCardFor = useCallback(
|
||||
(id: string, el: HTMLElement) => {
|
||||
(id: string, el: HTMLElement, keyboard = false) => {
|
||||
const wrapper = wrapperRef.current
|
||||
if (!wrapper) return
|
||||
const suggestion = suggestions.find((s) => s.id === id)
|
||||
@@ -664,7 +669,7 @@ export function EditorCore({
|
||||
setHover((prev) => {
|
||||
// Moving to a different highlight resets any Ask Petal pin.
|
||||
if (prev && prev.suggestion.id !== suggestion.id) setPinned(false)
|
||||
return { suggestion, top, left }
|
||||
return { suggestion, top, left, keyboard }
|
||||
})
|
||||
},
|
||||
[suggestions],
|
||||
@@ -721,6 +726,140 @@ export function EditorCore({
|
||||
|
||||
const keepOpen = useCallback(() => clearTimeout(closeTimer.current), [])
|
||||
|
||||
// ——— Keyboard triage (item 8) ———
|
||||
//
|
||||
// The whole queue can be walked, answered and left without a pointer:
|
||||
// Ctrl/Cmd+. and Ctrl/Cmd+, step through the underlines from anywhere in the
|
||||
// editor, and the card that opens takes focus and answers Tab / Enter / Del /
|
||||
// Esc itself (SuggestionCard). It is the *anchored* card in both layouts,
|
||||
// rail or no rail — item 7's finding, that the popover at the word is the
|
||||
// primary surface, is what lets one keyboard flow cover both.
|
||||
//
|
||||
// Why a chord and not the item's bare Tab or n/p: this is a text editor, and
|
||||
// an unmodified letter is a letter. Tab is available only once the card holds
|
||||
// focus, which is exactly where the item asks for it, and getting there needs
|
||||
// a key that is safe to press mid-sentence — in the middle of a Chinese
|
||||
// composition, even, which is why the IME guard is here too.
|
||||
|
||||
// Where triage lands once the open card is answered. Recorded before the
|
||||
// action, because the queue has to be read while the answered card is still in
|
||||
// it; consumed when the new suggestion list arrives. A `null` id means the
|
||||
// queue is empty and triage is over.
|
||||
const triageNextRef = useRef<{ id: string | null } | null>(null)
|
||||
|
||||
// Every underline on screen, in document order, with its document position.
|
||||
// The queue is the decorations rather than the suggestion list: a suggestion
|
||||
// the editor couldn't anchor has no underline, and a triage stop she cannot
|
||||
// see is worse than one she never visits.
|
||||
const orderedSpans = useCallback((): Span[] => {
|
||||
const wrapper = wrapperRef.current
|
||||
if (!wrapper || !editor) return []
|
||||
const spans: Span[] = []
|
||||
const seen = new Set<string>()
|
||||
wrapper.querySelectorAll<HTMLElement>('.petal-suggestion[data-suggestion-id]').forEach((el) => {
|
||||
const id = el.getAttribute('data-suggestion-id')
|
||||
if (!id || seen.has(id)) return
|
||||
seen.add(id)
|
||||
let pos = 0
|
||||
try {
|
||||
pos = editor.view.posAtDOM(el, 0)
|
||||
} catch {
|
||||
// A node the view no longer owns. Only the caret-relative entry point
|
||||
// reads `pos`; document order is what walking uses, and that still holds.
|
||||
}
|
||||
spans.push({ id, pos })
|
||||
})
|
||||
return spans
|
||||
}, [editor])
|
||||
|
||||
// Open a suggestion as a triage stop: scrolled to, emphasized, and focused.
|
||||
// False means its underline is gone, which is triage's cue to stop.
|
||||
const openTriageAt = useCallback(
|
||||
(id: string): boolean => {
|
||||
const el = wrapperRef.current?.querySelector(
|
||||
`.petal-suggestion[data-suggestion-id="${CSS.escape(id)}"]`,
|
||||
) as HTMLElement | null
|
||||
if (!el) return false
|
||||
openCardFor(id, el, true)
|
||||
setActiveId(id)
|
||||
// The anchored card carries everything the rail card does, so expanding a
|
||||
// second copy of it in the margin would be the redundancy item 7 refused.
|
||||
setRailExpandedId(null)
|
||||
el.scrollIntoView({ block: 'center', behavior: 'smooth' })
|
||||
return true
|
||||
},
|
||||
[openCardFor],
|
||||
)
|
||||
|
||||
// Leave triage and hand the keyboard back to the text, with the caret just
|
||||
// past the span she was reading about — so the next thing she types continues
|
||||
// the sentence she was looking at rather than wherever she last clicked.
|
||||
const exitTriage = useCallback(() => {
|
||||
const open = hover
|
||||
closeCard()
|
||||
setActiveId(null)
|
||||
if (!editor) return
|
||||
const range = open ? findRange(editor.state.doc, open.suggestion.original) : null
|
||||
if (range) editor.chain().focus().setTextSelection(range.to).run()
|
||||
else editor.commands.focus()
|
||||
}, [editor, hover, closeCard])
|
||||
|
||||
const stepTriage = useCallback(
|
||||
(dir: Direction) => {
|
||||
const spans = orderedSpans()
|
||||
if (spans.length === 0) return
|
||||
const next = hover
|
||||
? stepId(
|
||||
spans.map((s) => s.id),
|
||||
hover.suggestion.id,
|
||||
dir,
|
||||
)
|
||||
: entryId(spans, editor?.state.selection.from ?? 0, dir)
|
||||
if (next) openTriageAt(next)
|
||||
},
|
||||
[orderedSpans, openTriageAt, hover, editor],
|
||||
)
|
||||
|
||||
// Note the stop after the one being answered, while its underline is still in
|
||||
// the queue. `answered[0]` is the card she is on; an Accept-all settles a whole
|
||||
// category at once, and triage resumes after *her* card, not after whichever
|
||||
// of the batch happened to be last.
|
||||
const queueTriageAfter = useCallback(
|
||||
(answered: string[]) => {
|
||||
const gone = new Set(answered)
|
||||
const remaining = new Set(suggestions.filter((s) => !gone.has(s.id)).map((s) => s.id))
|
||||
triageNextRef.current = {
|
||||
id: idAfterRemoval(
|
||||
orderedSpans().map((s) => s.id),
|
||||
answered[0],
|
||||
remaining,
|
||||
),
|
||||
}
|
||||
},
|
||||
[orderedSpans, suggestions],
|
||||
)
|
||||
|
||||
// Open the next stop once the answered suggestion has actually left the list
|
||||
// and the decorations have repainted around the edit. An empty queue ends
|
||||
// triage the same way Escape does, which is the point at which the document is
|
||||
// fully triaged and she is back in her text.
|
||||
useEffect(() => {
|
||||
const pending = triageNextRef.current
|
||||
if (!pending) return
|
||||
triageNextRef.current = null
|
||||
const { id } = pending
|
||||
if (!id) {
|
||||
exitTriage()
|
||||
return
|
||||
}
|
||||
requestAnimationFrame(() => {
|
||||
if (!openTriageAt(id)) exitTriage()
|
||||
})
|
||||
// Driven by the suggestion list alone: the callbacks are rebuilt in the same
|
||||
// render, so this closure is never the stale one.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [suggestions])
|
||||
|
||||
// Accept applies the replacement to the document, plays a little confetti
|
||||
// burst over the flagged text, then notifies the parent. The confetti is
|
||||
// anchored to the highlight itself (captured before the replacement removes it),
|
||||
@@ -748,6 +887,7 @@ export function EditorCore({
|
||||
const handleAccept = useCallback(
|
||||
(s: Suggestion) => {
|
||||
let burst = burstAt(s.id)
|
||||
if (hover?.keyboard) queueTriageAfter([s.id])
|
||||
if (editor && s.replacement.trim() !== '') {
|
||||
const range = findRange(editor.state.doc, s.original)
|
||||
if (range) {
|
||||
@@ -761,7 +901,7 @@ export function EditorCore({
|
||||
setRailExpandedId(null)
|
||||
onAccept(s)
|
||||
},
|
||||
[editor, onAccept, closeCard, hover, burstAt, showConfetti],
|
||||
[editor, onAccept, closeCard, hover, burstAt, showConfetti, queueTriageAfter],
|
||||
)
|
||||
|
||||
// How many pending cards of each type could be accepted in one go. A card
|
||||
@@ -794,6 +934,14 @@ export function EditorCore({
|
||||
const first = plan.steps[plan.steps.length - 1]
|
||||
const burst = first ? burstAt(first.suggestion.id) : null
|
||||
|
||||
// Resume after the card she pressed it on, not after the batch's last
|
||||
// member — the queue she is walking is in document order, and the rest of
|
||||
// the category may sit anywhere in it.
|
||||
if (hover?.keyboard) {
|
||||
const answered = settled.map((s) => s.id)
|
||||
queueTriageAfter([hover.suggestion.id, ...answered.filter((id) => id !== hover.suggestion.id)])
|
||||
}
|
||||
|
||||
if (plan.steps.length > 0) {
|
||||
let chain = editor.chain().focus()
|
||||
for (const step of plan.steps) {
|
||||
@@ -806,15 +954,16 @@ export function EditorCore({
|
||||
setRailExpandedId(null)
|
||||
onAcceptMany(settled)
|
||||
},
|
||||
[editor, suggestions, onAcceptMany, closeCard, burstAt, showConfetti],
|
||||
[editor, suggestions, onAcceptMany, closeCard, burstAt, showConfetti, hover, queueTriageAfter],
|
||||
)
|
||||
|
||||
const handleDismiss = useCallback(
|
||||
(s: Suggestion) => {
|
||||
if (hover?.keyboard) queueTriageAfter([s.id])
|
||||
closeCard()
|
||||
onDismiss(s)
|
||||
},
|
||||
[onDismiss, closeCard],
|
||||
[onDismiss, closeCard, hover, queueTriageAfter],
|
||||
)
|
||||
|
||||
// openMisspellAt resolves the word at a document position and, if the checker
|
||||
@@ -1265,11 +1414,21 @@ export function EditorCore({
|
||||
// into the editor's content anyway)
|
||||
// Ctrl/Cmd+D — look up the word at the caret (the keyboard "right-click")
|
||||
// Ctrl/Cmd+J — rewrite the current selection more naturally (✨更自然)
|
||||
// Ctrl/Cmd+. — walk to the next suggestion (Ctrl/Cmd+, for the previous),
|
||||
// which is how keyboard triage is entered from the text
|
||||
useEffect(() => {
|
||||
if (!editor) return
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (!(e.ctrlKey || e.metaKey) || e.altKey) return
|
||||
const k = e.key.toLowerCase()
|
||||
if (k === '.' || k === ',') {
|
||||
// Chinese IMEs use , and . to page their candidate window. While one is
|
||||
// open the keystroke belongs to the composition, not to Petal.
|
||||
if (fromIME(e)) return
|
||||
e.preventDefault()
|
||||
stepTriage(k === '.' ? 1 : -1)
|
||||
return
|
||||
}
|
||||
if (k === 'f') {
|
||||
e.preventDefault()
|
||||
setFindOpen(true)
|
||||
@@ -1285,7 +1444,7 @@ export function EditorCore({
|
||||
}
|
||||
window.addEventListener('keydown', onKey)
|
||||
return () => window.removeEventListener('keydown', onKey)
|
||||
}, [editor, openWordLookup, handleRewrite])
|
||||
}, [editor, openWordLookup, handleRewrite, stepTriage])
|
||||
|
||||
useEffect(() => () => {
|
||||
clearTimeout(closeTimer.current)
|
||||
@@ -1422,6 +1581,9 @@ export function EditorCore({
|
||||
onPointerLeave={scheduleClose}
|
||||
onExpandChange={setPinned}
|
||||
onExtent={setCardExtent}
|
||||
keyboard={hover.keyboard}
|
||||
onStep={stepTriage}
|
||||
onExit={exitTriage}
|
||||
/>
|
||||
)}
|
||||
{railEnabled && railItems.length > 0 && (
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import type { Suggestion, SuggestionType } from '../../api/client'
|
||||
import { usePack } from '../../i18n'
|
||||
import { fromIME } from '../../lib/ime'
|
||||
import { AskPetal } from './AskPetal'
|
||||
import { TYPE_META, batchLabel, typeLabel } from './suggestionMeta'
|
||||
import type { Direction } from './triage'
|
||||
|
||||
interface Props {
|
||||
suggestion: Suggestion
|
||||
@@ -25,6 +27,13 @@ interface Props {
|
||||
// under it and its Accept button simply can't be reached. 0 means "nothing to
|
||||
// cover", which is what an unmounted card reports on its way out.
|
||||
onExtent?: (bottom: number) => void
|
||||
// Keyboard triage (item 8). The card was opened by a keystroke rather than a
|
||||
// pointer, so it takes focus and answers the keys itself: the writer is
|
||||
// walking the underlines and never touches the mouse.
|
||||
keyboard?: boolean
|
||||
// Move to the next/previous underline, and leave triage entirely.
|
||||
onStep?: (dir: Direction) => void
|
||||
onExit?: () => void
|
||||
}
|
||||
|
||||
// SuggestionCard is the hover panel for a single suggestion: a colored type tag,
|
||||
@@ -42,6 +51,9 @@ export function SuggestionCard({
|
||||
onPointerLeave,
|
||||
onExpandChange,
|
||||
onExtent,
|
||||
keyboard = false,
|
||||
onStep,
|
||||
onExit,
|
||||
}: Props) {
|
||||
const pack = usePack()
|
||||
const meta = TYPE_META[suggestion.type]
|
||||
@@ -67,6 +79,60 @@ export function SuggestionCard({
|
||||
}
|
||||
}, [onExtent])
|
||||
|
||||
// In triage the card is where the keys land, so it has to hold focus — and it
|
||||
// has to re-take it on every step, because stepping keeps this same component
|
||||
// mounted and only swaps the suggestion inside it. `preventScroll` for the
|
||||
// reason AskPetal's input gives: the card is an absolutely-positioned overlay,
|
||||
// and letting the browser "reveal" it would jump the document out from under
|
||||
// the sentence she is reading. The span is scrolled to deliberately elsewhere.
|
||||
useEffect(() => {
|
||||
if (keyboard) cardRef.current?.focus({ preventScroll: true })
|
||||
}, [keyboard, suggestion.id])
|
||||
|
||||
// The triage keys. Only bound in keyboard mode: a card opened by the pointer
|
||||
// never holds focus, and stealing Tab from one that somehow did would break
|
||||
// ordinary focus movement for no gain.
|
||||
function handleKeyDown(e: React.KeyboardEvent) {
|
||||
if (!keyboard || fromIME(e)) return
|
||||
const target = e.target as HTMLElement
|
||||
// Ask Petal's question field is a text input inside this card. While it has
|
||||
// focus it owns every key it can use — Tab, Enter and the letters are hers
|
||||
// to type — and only Escape is taken, to step back out to the card.
|
||||
const typing = target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement
|
||||
|
||||
if (e.key === 'Escape') {
|
||||
e.preventDefault()
|
||||
// Escape also leaves distraction-free mode (App's window listener), which
|
||||
// would restore the sidebar and pull the rail out from under her mid-
|
||||
// triage. In triage this key means "this card", or "triage" — never "the
|
||||
// writing mode".
|
||||
e.stopPropagation()
|
||||
if (typing) cardRef.current?.focus({ preventScroll: true })
|
||||
else onExit?.()
|
||||
return
|
||||
}
|
||||
if (typing) return
|
||||
|
||||
if (e.key === 'Tab') {
|
||||
e.preventDefault()
|
||||
onStep?.(e.shiftKey ? -1 : 1)
|
||||
} else if (e.key === 'Enter') {
|
||||
// An awareness-only card has nothing to accept; Enter on it does nothing
|
||||
// rather than quietly meaning something else.
|
||||
if (!hasReplacement) return
|
||||
e.preventDefault()
|
||||
onAccept(suggestion)
|
||||
} else if (e.key === 'Delete' || e.key === 'Backspace') {
|
||||
e.preventDefault()
|
||||
onDismiss(suggestion)
|
||||
} else if (e.key === '?') {
|
||||
e.preventDefault()
|
||||
// Opening hands focus to the panel's own input; Escape there comes back
|
||||
// here, and ? then closes it again.
|
||||
toggleAsking()
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAsking() {
|
||||
setAsking((prev) => {
|
||||
const next = !prev
|
||||
@@ -80,13 +146,18 @@ export function SuggestionCard({
|
||||
ref={cardRef}
|
||||
role="dialog"
|
||||
aria-label={`${label} suggestion`}
|
||||
tabIndex={keyboard ? -1 : undefined}
|
||||
onKeyDown={handleKeyDown}
|
||||
onMouseEnter={onPointerEnter}
|
||||
onMouseLeave={onPointerLeave}
|
||||
className="petal-suggestion-card absolute z-20 p-3.5 text-sm"
|
||||
className="petal-suggestion-card absolute z-20 p-3.5 text-sm focus:outline-none"
|
||||
style={{
|
||||
width: asking ? 340 : 300,
|
||||
background: 'var(--color-surface)',
|
||||
border: '1px solid var(--color-border)',
|
||||
// In triage the card is the only thing holding focus, and the writer has
|
||||
// no pointer under it to say so. The accent border is that answer — the
|
||||
// browser's own focus ring on a 300px panel reads as an error state.
|
||||
border: `1px solid ${keyboard ? 'var(--color-accent)' : 'var(--color-border)'}`,
|
||||
borderRadius: 'var(--radius-card)',
|
||||
boxShadow: 'var(--shadow-soft)',
|
||||
...style,
|
||||
@@ -161,6 +232,16 @@ export function SuggestionCard({
|
||||
{batchLabel(suggestion.type, batchCount)}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{keyboard && (
|
||||
<div
|
||||
className="mt-2.5 border-t pt-2 text-[0.65rem] leading-tight"
|
||||
style={{ borderColor: 'var(--color-border)', color: 'var(--color-muted)' }}
|
||||
>
|
||||
<div>{pack.editor.triageHint.native}</div>
|
||||
<div>{pack.editor.triageHint.en}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { entryId, idAfterRemoval, stepId, type Span } from './triage'
|
||||
|
||||
const spans = (...pairs: [string, number][]): Span[] => pairs.map(([id, pos]) => ({ id, pos }))
|
||||
|
||||
describe('stepId — walking the queue', () => {
|
||||
const order = ['a', 'b', 'c']
|
||||
|
||||
it('moves forward and backward', () => {
|
||||
expect(stepId(order, 'a', 1)).toBe('b')
|
||||
expect(stepId(order, 'c', -1)).toBe('b')
|
||||
})
|
||||
|
||||
it('wraps at both ends, so the queue is a ring and never a dead end', () => {
|
||||
expect(stepId(order, 'c', 1)).toBe('a')
|
||||
expect(stepId(order, 'a', -1)).toBe('c')
|
||||
})
|
||||
|
||||
it('enters at the near end when there is no current card', () => {
|
||||
expect(stepId(order, null, 1)).toBe('a')
|
||||
expect(stepId(order, null, -1)).toBe('c')
|
||||
})
|
||||
|
||||
it('treats a card that has left the queue as no card at all', () => {
|
||||
// She accepted from the rail while a triage card was open, or an edit
|
||||
// dissolved the span. Stepping should still land somewhere real.
|
||||
expect(stepId(order, 'gone', 1)).toBe('a')
|
||||
})
|
||||
|
||||
it('has nowhere to go in an empty queue', () => {
|
||||
expect(stepId([], null, 1)).toBeNull()
|
||||
expect(stepId([], 'a', -1)).toBeNull()
|
||||
})
|
||||
|
||||
it('stays put on a queue of one', () => {
|
||||
expect(stepId(['only'], 'only', 1)).toBe('only')
|
||||
expect(stepId(['only'], 'only', -1)).toBe('only')
|
||||
})
|
||||
})
|
||||
|
||||
describe('entryId — where triage starts from the caret', () => {
|
||||
const order = spans(['a', 10], ['b', 40], ['c', 90])
|
||||
|
||||
it('goes forward to the first underline at or after the caret', () => {
|
||||
expect(entryId(order, 0, 1)).toBe('a')
|
||||
expect(entryId(order, 11, 1)).toBe('b')
|
||||
expect(entryId(order, 40, 1)).toBe('b') // caret sitting on the span itself
|
||||
})
|
||||
|
||||
it('goes back to the last underline at or before the caret', () => {
|
||||
expect(entryId(order, 100, -1)).toBe('c')
|
||||
expect(entryId(order, 39, -1)).toBe('a')
|
||||
expect(entryId(order, 40, -1)).toBe('b')
|
||||
})
|
||||
|
||||
it('wraps rather than refusing when the caret is past every span', () => {
|
||||
expect(entryId(order, 500, 1)).toBe('a')
|
||||
expect(entryId(order, 0, -1)).toBe('c')
|
||||
})
|
||||
|
||||
it('has nowhere to enter in an empty document', () => {
|
||||
expect(entryId([], 0, 1)).toBeNull()
|
||||
})
|
||||
})
|
||||
|
||||
describe('idAfterRemoval — where the answered card hands over to', () => {
|
||||
const order = ['a', 'b', 'c', 'd']
|
||||
|
||||
it('carries on with the next one still standing', () => {
|
||||
expect(idAfterRemoval(order, 'b', new Set(['a', 'c', 'd']))).toBe('c')
|
||||
})
|
||||
|
||||
it('skips everything an Accept-all took with it', () => {
|
||||
// Accept all of a category: b, c and d go together, so triage resumes at
|
||||
// the only survivor rather than at a card that no longer exists.
|
||||
expect(idAfterRemoval(order, 'b', new Set(['a']))).toBe('a')
|
||||
})
|
||||
|
||||
it('wraps to the front when the answered card was last', () => {
|
||||
expect(idAfterRemoval(order, 'd', new Set(['a', 'b', 'c']))).toBe('a')
|
||||
})
|
||||
|
||||
it('ends triage when nothing is left', () => {
|
||||
expect(idAfterRemoval(order, 'b', new Set())).toBeNull()
|
||||
})
|
||||
|
||||
it('never hands back the card that was just answered', () => {
|
||||
// The server may still be reporting it for a moment; the writer has already
|
||||
// said what she thinks of it.
|
||||
expect(idAfterRemoval(order, 'b', new Set(['b']))).toBeNull()
|
||||
})
|
||||
|
||||
it('falls back to the whole queue when the answered card was never in it', () => {
|
||||
// A provisional rule-pack card can be answered before its underline has been
|
||||
// painted (item 3b's 250ms pass). There is still a queue to carry on with.
|
||||
expect(idAfterRemoval(order, 'unlisted', new Set(['c', 'd']))).toBe('c')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,62 @@
|
||||
// Keyboard triage: walking the underlines without a mouse.
|
||||
//
|
||||
// The queue is the underlines themselves, in document order — not the
|
||||
// suggestion list. A suggestion whose span the editor couldn't anchor has no
|
||||
// underline, and a triage stop she cannot see is worse than one she never
|
||||
// visits. Reading the order off the decoration DOM also means the queue is
|
||||
// exactly what is on screen, which is the thing she is being asked to walk.
|
||||
//
|
||||
// Everything here is pure and takes the order as an argument, so the arithmetic
|
||||
// (wrap-around, entry from the caret, where to land after a card is answered)
|
||||
// can be tested without a ProseMirror document or a layout.
|
||||
|
||||
export type Direction = 1 | -1
|
||||
|
||||
// A span in the queue: its suggestion id and where it sits in the document.
|
||||
export interface Span {
|
||||
id: string
|
||||
pos: number
|
||||
}
|
||||
|
||||
// The next stop from `current`, wrapping at both ends. A `current` that is no
|
||||
// longer in the queue (or absent) enters at whichever end the direction implies,
|
||||
// so the first press of "next" lands on the first underline and "previous" on
|
||||
// the last.
|
||||
export function stepId(order: readonly string[], current: string | null, dir: Direction): string | null {
|
||||
if (order.length === 0) return null
|
||||
const at = current === null ? -1 : order.indexOf(current)
|
||||
if (at === -1) return dir === 1 ? order[0] : order[order.length - 1]
|
||||
return order[(at + dir + order.length) % order.length]
|
||||
}
|
||||
|
||||
// Where triage starts when it is entered from the editor rather than continued:
|
||||
// the nearest underline in the direction she asked for, measured from the caret,
|
||||
// so she picks up from where she is reading rather than being thrown to the top
|
||||
// of a document she has scrolled halfway down. Wraps around when the caret is
|
||||
// past them all, which is the same wrap `stepId` gives once she is walking.
|
||||
export function entryId(order: readonly Span[], caret: number, dir: Direction): string | null {
|
||||
if (order.length === 0) return null
|
||||
if (dir === 1) {
|
||||
for (const span of order) if (span.pos >= caret) return span.id
|
||||
return order[0].id
|
||||
}
|
||||
for (let i = order.length - 1; i >= 0; i--) if (order[i].pos <= caret) return order[i].id
|
||||
return order[order.length - 1].id
|
||||
}
|
||||
|
||||
// Where to land after the card she was on is answered (accepted, dismissed, or
|
||||
// swept up by an Accept-all). The order is the one read *before* the action, so
|
||||
// "the next one" means the next in the queue she was walking; `remaining` is
|
||||
// what actually survived. Falls back to scanning forward and then round to the
|
||||
// front, and returns null when nothing is left — which is triage finishing, not
|
||||
// an error.
|
||||
export function idAfterRemoval(
|
||||
order: readonly string[],
|
||||
answered: string,
|
||||
remaining: ReadonlySet<string>,
|
||||
): string | null {
|
||||
const at = order.indexOf(answered)
|
||||
const rest = at === -1 ? order : [...order.slice(at + 1), ...order.slice(0, at)]
|
||||
for (const id of rest) if (id !== answered && remaining.has(id)) return id
|
||||
return null
|
||||
}
|
||||
@@ -203,6 +203,22 @@ describe('the zh pack', () => {
|
||||
expect(p.status.petalsToPolish(2).en).toContain('petals to polish')
|
||||
})
|
||||
|
||||
// The triage legend is the only place a Petal binding is written down, so a
|
||||
// pack that drops a key drops the feature for that pair: nothing else on
|
||||
// screen says Tab moves to the next underline. The key caps themselves stay
|
||||
// as they are printed on the keyboard, which is why the English half is not
|
||||
// the interesting one — a pack may well translate "Entrée" and be right to.
|
||||
it.each(PACKS)('names every triage key in both halves ($code)', (p) => {
|
||||
const { native, en } = p.editor.triageHint
|
||||
expect(native, `${p.code} has no pair-language triage legend`).toBeTruthy()
|
||||
expect(en, `${p.code} has no English triage legend`).toBeTruthy()
|
||||
expect(en).toBe('Tab next · Enter accept · Del dismiss · ? Ask Petal · Esc exit')
|
||||
// Five bindings, five entries — in whatever the pack calls the keys.
|
||||
expect(native.split('·'), `${p.code} lists the wrong number of keys`).toHaveLength(5)
|
||||
expect(native, `${p.code} loses the Tab key`).toContain('Tab')
|
||||
expect(native, `${p.code} loses the Ask Petal key`).toContain('?')
|
||||
})
|
||||
|
||||
it.each(PACKS)('labels every companion, tone and style ($code)', async (p) => {
|
||||
const { COMPANIONS } = await import('../components/Companion/companions')
|
||||
for (const c of COMPANIONS) {
|
||||
@@ -414,7 +430,12 @@ describe('the es pack', () => {
|
||||
}
|
||||
walk(es, '')
|
||||
expect(lines.length).toBeGreaterThan(40)
|
||||
// The one exemption, and it is not a question: `triageHint` is a legend of
|
||||
// key caps, and its "?" is the key she presses to ask Petal — the same
|
||||
// literal printed on the keyboard, no more Spanish punctuation than "Esc".
|
||||
const keyCaps = new Set(['editor.triageHint'])
|
||||
for (const { native, where } of lines) {
|
||||
if (keyCaps.has(where)) continue
|
||||
if (native.includes('?')) expect(native, `${where} closes ? without ¿`).toContain('¿')
|
||||
if (native.includes('!')) expect(native, `${where} closes ! without ¡`).toContain('¡')
|
||||
}
|
||||
|
||||
@@ -374,6 +374,11 @@ export const es: Pack = {
|
||||
replace: 'Reemplazar',
|
||||
replaceAll: 'Todo',
|
||||
translateLabel: 'Traducción · Translate',
|
||||
// Intro, Supr, Esc — as they are printed on a Spanish keyboard.
|
||||
triageHint: {
|
||||
native: 'Tab siguiente · Intro aceptar · Supr descartar · ? preguntar a Petal · Esc salir',
|
||||
en: 'Tab next · Enter accept · Del dismiss · ? Ask Petal · Esc exit',
|
||||
},
|
||||
spelling: 'Ortografía · Spelling',
|
||||
noSuggestions: 'Sin sugerencias · No suggestions',
|
||||
addToDictionary: 'Agregar al diccionario · Add to dictionary',
|
||||
|
||||
@@ -316,6 +316,13 @@ export const fr: Pack = {
|
||||
replace: 'Remplacer',
|
||||
replaceAll: 'Tout',
|
||||
translateLabel: 'Traduction · Translate',
|
||||
// The key names are the ones printed on a French keyboard — Entrée, Suppr,
|
||||
// Échap — not their English equivalents. A legend she has to translate back
|
||||
// to find the key is not a legend.
|
||||
triageHint: {
|
||||
native: 'Tab suivant · Entrée accepter · Suppr ignorer · ? demander à Petal · Échap quitter',
|
||||
en: 'Tab next · Enter accept · Del dismiss · ? Ask Petal · Esc exit',
|
||||
},
|
||||
spelling: 'Orthographe · Spelling',
|
||||
noSuggestions: 'Aucune suggestion · No suggestions',
|
||||
addToDictionary: 'Ajouter au dictionnaire · Add to dictionary',
|
||||
|
||||
@@ -294,6 +294,10 @@ export const ptPT: Pack = {
|
||||
replace: 'Substituir',
|
||||
replaceAll: 'Tudo',
|
||||
translateLabel: 'Tradução · Translate',
|
||||
triageHint: {
|
||||
native: 'Tab seguinte · Enter aceitar · Del ignorar · ? perguntar à Petal · Esc sair',
|
||||
en: 'Tab next · Enter accept · Del dismiss · ? Ask Petal · Esc exit',
|
||||
},
|
||||
spelling: 'Ortografia · Spelling',
|
||||
noSuggestions: 'Sem sugestões · No suggestions',
|
||||
addToDictionary: 'Adicionar ao dicionário · Add to dictionary',
|
||||
|
||||
@@ -205,6 +205,10 @@ export const zh: Pack = {
|
||||
replace: '替换',
|
||||
replaceAll: '全部',
|
||||
translateLabel: '翻译 · Translate',
|
||||
triageHint: {
|
||||
native: 'Tab 下一处 · Enter 采纳 · Del 忽略 · ? 问问 Petal · Esc 退出',
|
||||
en: 'Tab next · Enter accept · Del dismiss · ? Ask Petal · Esc exit',
|
||||
},
|
||||
spelling: '拼写 · Spelling',
|
||||
noSuggestions: '没有建议 · No suggestions',
|
||||
addToDictionary: '添加到词典 · Add to dictionary',
|
||||
|
||||
@@ -195,6 +195,13 @@ export interface Pack {
|
||||
// opposite case — its whole subject is her own language — so it says so in
|
||||
// her language first. The pack holds the rendered string, separator and all.
|
||||
translateLabel: string
|
||||
// The key map shown along the bottom of a card opened by keyboard triage.
|
||||
// Unlike the card's buttons — Accept, Dismiss, Ask Petal, which stay English
|
||||
// because they name the thing she is learning to talk about — this is an
|
||||
// instruction for using Petal, so it is bilingual like the status bar. The
|
||||
// key names themselves (Tab, Enter, Esc) are what is printed on her
|
||||
// keyboard, so they don't translate.
|
||||
triageHint: Line
|
||||
spelling: string
|
||||
noSuggestions: string
|
||||
addToDictionary: string
|
||||
|
||||
Reference in New Issue
Block a user