diff --git a/app/[locale]/(authenticated)/translate/[code]/[verseId]/TranslateWord.tsx b/app/[locale]/(authenticated)/translate/[code]/[verseId]/TranslateWord.tsx index 196f936..72c01b5 100644 --- a/app/[locale]/(authenticated)/translate/[code]/[verseId]/TranslateWord.tsx +++ b/app/[locale]/(authenticated)/translate/[code]/[verseId]/TranslateWord.tsx @@ -194,155 +194,158 @@ export default function TranslateWord({ word, phrase, isHebrew, language, phrase {editable && ( <> -
-
- {status !== 'approved' && ( - - )} - {status === 'approved' && ( - - )} -
-
- ( -
+
+ {status !== 'approved' && ( +
+ + )} - name="gloss" - value={glossValue} - state={status === 'approved' ? 'success' : undefined} - aria-describedby={`word-help-${word.id}`} - aria-labelledby={`word-${word.id}`} - onChange={(value) => { - console.log('blur') - autosaveQueued.current = true - setTimeout(() => { - console.log('autosave') - if (autosaveQueued.current && value !== phrase.gloss?.text) { + {status === 'approved' && ( + + )} +
+
+ ( +
+ {item} + {i === word.suggestions.length ? ( + + ) : undefined} +
+ )} + name="gloss" + value={glossValue} + state={status === 'approved' ? 'success' : undefined} + aria-describedby={`word-help-${word.id}`} + aria-labelledby={`word-${word.id}`} + onChange={(value) => { + console.log('blur') + autosaveQueued.current = true + setTimeout(() => { + console.log('autosave') + if (autosaveQueued.current && value !== phrase.gloss?.text) { + saveGloss('UNAPPROVED') + } + }, 200) + }} + onSelect={() => { + console.log('select') + saveGloss('APPROVED') - const nextRoot = root.current?.nextElementSibling; - const next = - nextRoot?.querySelector('input:not([type])') ?? - nextRoot?.querySelector('button'); - if (next && next instanceof HTMLElement) { - next.focus(); - } - }} - onKeyDown={(e) => { - if (e.metaKey || e.altKey) return; - switch (e.key) { - case 'Enter': { - e.preventDefault(); - if (e.shiftKey) { - const prev = root.current?.previousElementSibling; - prev?.querySelector('input')?.focus(); - } else if (e.ctrlKey) { - if (!isMultiWord) { - onSelect?.(); - } - } else { - setTimeout(() => { - console.log('enter') - saveGloss('APPROVED') - }) + const nextRoot = root.current?.nextElementSibling; + const next = + nextRoot?.querySelector('input:not([type])') ?? + nextRoot?.querySelector('button'); + if (next && next instanceof HTMLElement) { + next.focus(); + } + }} + onKeyDown={(e) => { + if (e.metaKey || e.altKey) return; + switch (e.key) { + case 'Enter': { + e.preventDefault(); + if (e.shiftKey) { + const prev = root.current?.previousElementSibling; + prev?.querySelector('input')?.focus(); + } else if (e.ctrlKey) { + if (!isMultiWord) { + onSelect?.(); + } + } else { + setTimeout(() => { + console.log('enter') + saveGloss('APPROVED') + }) - const nextRoot = root.current?.nextElementSibling; - const next = - nextRoot?.querySelector('input:not([type])') ?? - nextRoot?.querySelector('button'); - if (next && next instanceof HTMLElement) { - next.focus(); + const nextRoot = root.current?.nextElementSibling; + const next = + nextRoot?.querySelector('input:not([type])') ?? + nextRoot?.querySelector('button'); + if (next && next instanceof HTMLElement) { + next.focus(); + } } + break; } - break; - } - case 'Escape': { - if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) - return; + case 'Escape': { + if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) + return; - saveGloss('UNAPPROVED') - break; + saveGloss('UNAPPROVED') + break; + } } + }} + onFocus={() => onFocus?.()} + suggestions={ + word.machineSuggestion + ? [...word.suggestions, word.machineSuggestion] + : word.suggestions } - }} - onFocus={() => onFocus?.()} - suggestions={ - word.machineSuggestion - ? [...word.suggestions, word.machineSuggestion] - : word.suggestions - } - ref={input} - /> - {hasMachineSuggestion && ( - - )} + {hasMachineSuggestion && ( + + )} +
-
+ }