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 && (
+
+ )}
+
-
+ }