@estiva-app/ui 0.73.0-inline-text.1 → 0.73.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.73.0-inline-text.1",
+  "version": "0.73.0",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",

package/registry.json

@@ -4,7 +4,7 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.73.0-inline-text.1",
+    "packageVersion": "0.73.0",
     "exports": 178,
     "typeExports": 164,
     "files": null

package/src/InlineText.test.tsx

@@ -168,6 +168,27 @@ describe('InlineText: a refused save, and a change from elsewhere', () => {
     expect(field().textContent).toBe('Item one two')
   })
 
+  it('Enter and the leave that follows it save once while the save is still in flight', async () => {
+    let answer: (saved: boolean) => void = () => {}
+    const onCommit = vi.fn(() => new Promise<boolean>((resolve) => (answer = resolve)))
+    draw({ onCommit, onEnter: () => field().blur() })
+    await enter()
+    await type(' two')
+    await userEvent.keyboard('{Enter}')
+    await act(async () => answer(true))
+    expect(onCommit).toHaveBeenCalledTimes(1)
+  })
+
+  it('a change from elsewhere made while you are in it, and you change nothing, is loaded when you leave', async () => {
+    const { rerender, onCommit } = draw()
+    await enter()
+    rerender({ value: 'Item three' })
+    expect(field().textContent).toBe('Item one')
+    await act(async () => field().blur())
+    expect(field().textContent).toBe('Item three')
+    expect(onCommit).not.toHaveBeenCalled()
+  })
+
   it('a change from elsewhere is loaded while you are not in it', async () => {
     const { rerender } = draw()
     rerender({ value: 'Item three' })

package/src/InlineText.tsx

@@ -98,14 +98,22 @@ export function InlineText({ value, placeholder, label, onCommit, onText, onEnte
   const [empty, setEmpty] = useState(!value)
   // Read at key time: the editor's handlers are built once, and a prop they
   // closed over would be the first render's.
-  const latest = useRef({ onEnter, onText, onCommit, clearable })
-  latest.current = { onEnter, onText, onCommit, clearable }
+  const latest = useRef({ onEnter, onText, onCommit, clearable, value })
+  latest.current = { onEnter, onText, onCommit, clearable, value }
+  // The text being saved right now: Enter moves on, and the leave that follows
+  // must not send the same save a second time while the first is in flight.
+  const pending = useRef<string | null>(null)
 
   const save = useCallback(async (text: string) => {
     const next = oneLine(text)
-    if (next === saved.current) return
+    if (next === saved.current || next === pending.current) return
     if (!next && !latest.current.clearable) return
-    if (await latest.current.onCommit(next)) saved.current = next
+    pending.current = next
+    try {
+      if (await latest.current.onCommit(next)) saved.current = next
+    } finally {
+      if (pending.current === next) pending.current = null
+    }
   }, [])
 
   const editor = useEditor({
@@ -156,6 +164,15 @@ export function InlineText({ value, placeholder, label, onCommit, onText, onEnte
         setEmpty(false)
         return
       }
+      // Left unchanged while someone else changed it: their text comes in now,
+      // as it would have had you not been in it.
+      const { value: current } = latest.current
+      if (oneLine(e.getText()) === saved.current && current !== saved.current && pending.current === null) {
+        e.commands.setContent(doc(current), { emitUpdate: false })
+        saved.current = current
+        setEmpty(!current)
+        return
+      }
       void save(e.getText())
     },
   }, [readOnly])