@pilotiq/pilotiq 0.12.0 → 0.13.0

package/src/react/fields/BuilderInput.tsx

@@ -5,6 +5,7 @@ import { Button } from '../ui/button.js'
 import { SchemaRenderer } from '../SchemaRenderer.js'
 import { FormIdContext, useFormState, useRowBinding } from '../FormStateContext.js'
 import { findFieldMeta } from '../formStateHelpers.js'
+import { RowCoordsContext } from '../RowCoordsContext.js'
 import { useIconFor } from '../icon-context.js'
 import { reorderRows, ExtraActionStrip, buildGridContainer } from './RepeaterInput.js'
 import { syncRowGates } from './syncRowGates.js'
@@ -191,11 +192,9 @@ export function BuilderInput({
   // the first event — without it, the picker dropdown choice doesn't
   // propagate until the user makes their first inner-field edit.
   const rowBinding = useRowBinding(name)
-  // Phase F.5c — mirror row identities into the form's values map so dotted
-  // row-leaf consumers (`useFieldState('${name}.${i}.data.text').textBinding`)
-  // can resolve the row's `__id` via `rowIdAtIndex(ctx.values, name, i)`.
-  // Without this stamp the F.5c per-row Y.Text path stays null on Builder
-  // and inner text fields never sync. Mirrors the same fix in RepeaterInput.
+  // Mirror row identities into the form's values map so dotted row-leaf
+  // consumers can resolve the row's `__id` via `rowIdAtIndex(ctx.values,
+  // name, i)`. Mirrors the same plumbing in RepeaterInput.
   const formStateForIds = useFormState()
   const ctxSetValue = formStateForIds?.setValue
   useEffect(() => {
@@ -870,6 +869,15 @@ function BuilderRow({
     () => row.children.map(c => prefixFieldNames(c, dataPrefix)),
     [row.children, dataPrefix],
   )
+  // Row coords for dotted-path text leaves under this row — composes
+  // fragment-key `${arrayName}.${rowId}.${fieldName}` (Phase 1 of
+  // collab-row-text-tiptap-backed.md). `parseRowFieldPath` strips the
+  // Builder-specific `data` segment, so the coords use the array name +
+  // the row's stable id without referencing the dialect.
+  const rowCoords = useMemo(
+    () => ({ arrayName: name, rowIndex: index, rowId: row.id }),
+    [name, index, row.id],
+  )
 
   const RowIcon = useIconFor(showIcons ? block?.icon : undefined)
   const blockLabel = block?.label ?? row.type ?? 'Block'
@@ -878,11 +886,13 @@ function BuilderRow({
 
   if (row.hidden) {
     return (
-      <div style={{ display: 'none' }} data-pilotiq-builder-row="hidden">
-        <input type="hidden" name={`${name}.${index}.__id`} value={row.id} readOnly />
-        <input type="hidden" name={`${name}.${index}.type`} value={row.type} readOnly />
-        <SchemaRenderer elements={namespaced} />
-      </div>
+      <RowCoordsContext.Provider value={rowCoords}>
+        <div style={{ display: 'none' }} data-pilotiq-builder-row="hidden">
+          <input type="hidden" name={`${name}.${index}.__id`} value={row.id} readOnly />
+          <input type="hidden" name={`${name}.${index}.type`} value={row.type} readOnly />
+          <SchemaRenderer elements={namespaced} />
+        </div>
+      </RowCoordsContext.Provider>
     )
   }
 
@@ -921,6 +931,7 @@ function BuilderRow({
   const innerColumns = block.columns && block.columns > 1 ? block.columns : 1
 
   return (
+    <RowCoordsContext.Provider value={rowCoords}>
     <div
       className={`rounded-md border bg-card transition-opacity ${isDragging ? 'opacity-50' : ''}`}
       data-pilotiq-builder-row=""
@@ -999,6 +1010,7 @@ function BuilderRow({
           : <SchemaRenderer elements={namespaced} />}
       </div>
     </div>
+    </RowCoordsContext.Provider>
   )
 }
 

package/src/react/fields/MarkdownInput.tsx

@@ -8,9 +8,10 @@ import {
 import { useFieldState } from '../FormStateContext.js'
 import { useCollabRoom } from '../CollabRoomContext.js'
 import { getCollabTextRenderer, type CollabTextRenderer } from '../CollabTextRendererRegistry.js'
+import { useRowCoords } from '../RowCoordsContext.js'
+import { parseRowFieldPath } from '../formStateHelpers.js'
 import { useToast } from '../Toaster.js'
 import { Button } from '../ui/button.js'
-import { computeDelta, preserveCursor } from './textDelta.js'
 
 type ToolbarButton =
   | 'bold' | 'italic' | 'strike' | 'link'
@@ -50,24 +51,37 @@ export function MarkdownInput({
   const fs = useFieldState(name)
   const room = useCollabRoom()
   const collabRenderer = getCollabTextRenderer()
-
-  // Phase B follow-up — Tiptap-backed plain-text editor for markdown source
-  // when collab is on. Same architectural fix as `TextLikeInput`'s
-  // CollabTextField: y-prosemirror's `RelativePosition` cursor anchoring
-  // replaces the broken `Y.Text` + `computeDelta` + `preserveCursor` heuristic.
+  const rowCoords = useRowCoords()
+
+  // Tiptap-backed plain-text editor for markdown source when collab is on.
+  // Same architectural fix as `TextLikeInput`'s `CollabTextField`:
+  // y-prosemirror's `RelativePosition` cursor anchoring against a
+  // `Y.XmlFragment` replaces whole-string LWW. Row leaves get the
+  // composite-key transform via `useRowCoords()` + `parseRowFieldPath`
+  // (same shape as TextLikeInput) so the fragment survives row reorders.
   //
-  // Tradeoff: the markdown toolbar + Cmd-shortcuts + paste-image upload all
-  // operate on a `<textarea>`'s DOM selection — they don't have a way to
-  // reach into the Tiptap editor's selection without exposing the editor
-  // instance, which would widen the renderer seam. For now those features
+  // Tradeoff: the markdown toolbar + Cmd-shortcuts + paste-image upload
+  // all operate on a `<textarea>`'s DOM selection — they don't have a
+  // way to reach into the Tiptap editor's selection without exposing the
+  // editor instance, which would widen the renderer seam. Those features
   // are write-mode-only on the native path; collab users type markdown
   // syntax directly (`**bold**`, `## heading`). The preview tab keeps
-  // working since it reads `value` from local state.
-  if (room && collabRenderer) {
+  // working since `MarkdownCollabInput` maintains a local mirror.
+  const fragmentKey: string | null = (() => {
+    if (!name.includes('.')) return name
+    if (!rowCoords) return null
+    const parsed = parseRowFieldPath(name)
+    if (!parsed) return null
+    if (parsed.arrayName !== rowCoords.arrayName) return null
+    if (parsed.index     !== rowCoords.rowIndex)  return null
+    return `${rowCoords.arrayName}.${rowCoords.rowId}.${parsed.fieldName}`
+  })()
+  if (room && collabRenderer && fragmentKey !== null) {
     return (
       <MarkdownCollabInput
         Renderer={collabRenderer}
-        name={name}
+        fragmentKey={fragmentKey}
+        hiddenInputName={name}
         defaultValue={defaultValue}
         disabled={disabled}
         {...(placeholder !== undefined ? { placeholder } : {})}
@@ -79,100 +93,15 @@ export function MarkdownInput({
 
   const { notify } = useToast()
   const textareaRef = useRef<HTMLTextAreaElement | null>(null)
-  // Phase F.6 — IME composition gate. Set between `compositionstart` /
-  // `compositionend`; the textarea's onChange skips `applyDelta` while
-  // composing so intermediate chars don't emit ops. Lives at the
-  // component scope so the onChange and composition handlers share it.
-  const isComposingRef = useRef<boolean>(false)
 
   const initial = useMemo(() => stringValue(defaultValue), [])
   const [localValue, setLocalValue] = useState<string>(initial)
   const [tab, setTab] = useState<'write' | 'preview'>('write')
   const [busy, setBusy] = useState(false)
 
-  // Phase F.6 — when a `<RecordCollabRoom>` is mounted and the field has
-  // a `TextBinding`, the textarea is bound to a `Y.Text` and edits emit
-  // `TextDelta`s. Mirrors the architecture in `TextLikeInput.tsx` but
-  // wired in-line because MarkdownInput has its own toolbar + Preview
-  // tab that also need to flow through the binding.
-  const binding = fs.textBinding
-  const [boundValue, setBoundValue] = useState<string>(() => binding?.read() ?? initial)
-  const boundValueRef = useRef<string>(boundValue)
-  useEffect(() => { boundValueRef.current = boundValue }, [boundValue])
-
-  // On binding swap: read current Y.Text state. If non-empty, lift it
-  // into local + form-map state. If empty (no peer has typed yet), leave
-  // the SSR-default-derived `boundValue` showing — first edit will
-  // emit a replace-from-empty delta that atomically populates Y.Text.
-  // No client-side seed: Y.Text isn't safe to seed under concurrent
-  // first-mounters (see @pilotiq-pro/collab `formCollabBinding.ts`).
-  useEffect(() => {
-    if (!binding) return
-    const next = binding.read()
-    if (next.length > 0) {
-      setBoundValue(next)
-      boundValueRef.current = next
-      fs.setValue(next)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [binding])
-
-  // Subscribe to remote changes. Local-echoes are filtered by the
-  // `next === prev` guard. Cursor preserved via the same heuristic
-  // used in `TextLikeInput.BoundTextInput`.
-  useEffect(() => {
-    if (!binding) return
-    return binding.observe((next) => {
-      const prev = boundValueRef.current
-      if (next === prev) return
-      const ta = textareaRef.current
-      const cursor = ta?.selectionStart ?? next.length
-      const restored = preserveCursor(prev, next, cursor)
-      setBoundValue(next)
-      boundValueRef.current = next
-      fs.setValue(next)
-      requestAnimationFrame(() => {
-        if (!ta) return
-        if (document.activeElement !== ta) return
-        try { ta.setSelectionRange(restored, restored) } catch { /* defensive */ }
-      })
-    })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [binding])
-
-  const value = binding
-    ? boundValue
-    : (fs.controlled ? stringValue(fs.value) : localValue)
+  const value = fs.controlled ? stringValue(fs.value) : localValue
 
   const setValue = (next: string): void => {
-    if (binding) {
-      // Compute against current Y.Text contents (not the local ref) so:
-      //  - first edit against empty Y.Text → `insert@0 <whole>` atomic
-      //    populate (no separate seed op needed);
-      //  - after a remote-applied update or server-resolve replace, the
-      //    delta reflects the actual current shared state, not stale
-      //    local bookkeeping.
-      const before = binding.read()
-      if (next !== before) {
-        const delta = computeDelta(before, next)
-        // Pre-stamp `boundValueRef.current = next` BEFORE `applyDelta`.
-        // Y.Text's `observe` fires synchronously inside `applyDelta` for
-        // our own write; without this the observer would see
-        // `prev=before, next=after` and run `preserveCursor` — designed
-        // for *remote* edits — which clobbers the user's caret on local
-        // typing (scrambled output on mid-string inserts). With
-        // `boundValueRef` already at `next`, the observer's
-        // `next === prev` short-circuit fires and the cursor is left
-        // alone for local echoes. Mirror of the same fix in
-        // `BoundTextInput.commitDelta`.
-        boundValueRef.current = next
-        if (delta) binding.applyDelta(delta)
-        setBoundValue(next)
-      }
-      fs.setValue(next)
-      fs.triggerLive(next)
-      return
-    }
     if (fs.controlled) { fs.setValue(next); fs.triggerLive(next) }
     else                { setLocalValue(next); fs.triggerLive(next) }
   }
@@ -405,24 +334,7 @@ export function MarkdownInput({
           {...(fs.controlled
             ? {
                 value,
-                onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-                  // Phase F.6 — when the binding is active and the user
-                  // is mid-IME, paint locally and hold the delta until
-                  // compositionend so we never emit ops for the
-                  // intermediate composing chars.
-                  if (binding && isComposingRef.current) {
-                    setBoundValue(e.target.value)
-                    return
-                  }
-                  setValue(e.target.value)
-                },
-                ...(binding ? {
-                  onCompositionStart: () => { isComposingRef.current = true },
-                  onCompositionEnd:   (e: React.CompositionEvent<HTMLTextAreaElement>) => {
-                    isComposingRef.current = false
-                    setValue(e.currentTarget.value)
-                  },
-                } : {}),
+                onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value),
               }
             : { defaultValue: initial, onChange: (e) => setLocalValue(e.target.value) })}
           onPaste={onPaste}
@@ -472,17 +384,18 @@ function TabButton({ active, onClick, children }: {
  * load-bearing change; markdown-syntax authors keep typing as before.
  */
 function MarkdownCollabInput({
-  Renderer, name, defaultValue, disabled, placeholder, minHeight, maxHeight,
+  Renderer, fragmentKey, hiddenInputName, defaultValue, disabled, placeholder, minHeight, maxHeight,
 }: {
-  Renderer:     CollabTextRenderer
-  name:         string
-  defaultValue: unknown
-  disabled:     boolean
-  placeholder?: string
-  minHeight?:   string
-  maxHeight?:   string
+  Renderer:        CollabTextRenderer
+  fragmentKey:     string
+  hiddenInputName: string
+  defaultValue:    unknown
+  disabled:        boolean
+  placeholder?:    string
+  minHeight?:      string
+  maxHeight?:      string
 }): React.ReactElement {
-  const fs = useFieldState(name)
+  const fs = useFieldState(hiddenInputName)
   const initial = useMemo(() => stringValue(defaultValue), [])
   const [text, setText] = useState<string>(initial)
   const [tab, setTab] = useState<'write' | 'preview'>('write')
@@ -513,9 +426,9 @@ function MarkdownCollabInput({
       </div>
       {tab === 'write' ? (
         <div style={wrapperStyle} className="overflow-auto">
-          <input type="hidden" name={name} value={text} />
+          <input type="hidden" name={hiddenInputName} value={text} />
           <Renderer
-            name={name}
+            name={fragmentKey}
             multiline={true}
             defaultValue={initial}
             {...(placeholder !== undefined ? { placeholder } : {})}
@@ -527,7 +440,7 @@ function MarkdownCollabInput({
         </div>
       ) : (
         <>
-          <input type="hidden" name={name} value={text} readOnly />
+          <input type="hidden" name={hiddenInputName} value={text} readOnly />
           <div
             className="prose prose-sm dark:prose-invert max-w-none px-3 py-2"
             style={wrapperStyle}

package/src/react/fields/RepeaterInput.tsx

@@ -5,6 +5,7 @@ import { Button } from '../ui/button.js'
 import { SchemaRenderer, dispatchHandlerAction } from '../SchemaRenderer.js'
 import { FormIdContext, useFormState, useRowBinding } from '../FormStateContext.js'
 import { findFieldMeta } from '../formStateHelpers.js'
+import { RowCoordsContext } from '../RowCoordsContext.js'
 import { useNavigate } from '../navigate.js'
 import { useToast } from '../Toaster.js'
 import type { RowButtonsMeta } from '../../fields/RowButton.js'
@@ -243,16 +244,14 @@ export function RepeaterInput({
   // it when present so peers see the same lifecycle events; absent =
   // today's local-only behaviour, unchanged.
   const rowBinding = useRowBinding(name)
-  // Phase F.5c — mirror row identities into the form's values map so dotted
-  // row-leaf consumers (`useFieldState('${name}.${i}.heading').textBinding`)
-  // can resolve the row's `__id` via `rowIdAtIndex(ctx.values, name, i)`.
-  // The renderer is the only source of truth for `(index → rowId)`; without
-  // this stamp the F.5c per-row Y.Text path stays null and row text fields
-  // never sync. Setting a `__id` key routes through `routeBindingWrite` →
-  // `parseRowFieldPath` which filters `__id` → no-op on the binding side
-  // (no Y.Text writes), so the only effect is a row in `valuesState`.
-  // `formStateForIds` mirrors `formState` below; we read via `useFormState()`
-  // here too instead of forward-referencing the later binding.
+  // Mirror row identities into the form's values map so dotted row-leaf
+  // consumers can resolve the row's `__id` via `rowIdAtIndex(ctx.values,
+  // name, i)`. Setting a `__id` key routes through `routeBindingWrite` →
+  // `parseRowFieldPath` which filters `__id` → no-op on the binding side,
+  // so the only effect is a row entry landing in `valuesState`.
+  // `formStateForIds` mirrors `formState` below; we read via
+  // `useFormState()` here too instead of forward-referencing the later
+  // binding.
   const formStateForIds = useFormState()
   const ctxSetValue = formStateForIds?.setValue
   useEffect(() => {
@@ -749,16 +748,25 @@ function RepeaterRow({
     [row.children, prefix],
   )
   const headerLabel = row.itemLabel ?? `Item ${index + 1}`
+  // Row coords for dotted-path text leaves — composes fragment-key
+  // `${arrayName}.${rowId}.${fieldName}` for the Tiptap-backed collab
+  // renderer (see collab-row-text-tiptap-backed.md Phase 1).
+  const rowCoords = useMemo(
+    () => ({ arrayName: name, rowIndex: index, rowId: row.id }),
+    [name, index, row.id],
+  )
 
   // Hidden rows: render only the inputs (and __id) inside a display:none
   // wrapper so their values round-trip through FormData on submit. No
   // chrome, no drag wiring, no labels — `itemHidden` is purely UX.
   if (row.hidden) {
     return (
-      <div style={{ display: 'none' }} data-pilotiq-repeater-row="hidden">
-        <input type="hidden" name={`${prefix}.__id`} value={row.id} readOnly />
-        <SchemaRenderer elements={namespaced} />
-      </div>
+      <RowCoordsContext.Provider value={rowCoords}>
+        <div style={{ display: 'none' }} data-pilotiq-repeater-row="hidden">
+          <input type="hidden" name={`${prefix}.__id`} value={row.id} readOnly />
+          <SchemaRenderer elements={namespaced} />
+        </div>
+      </RowCoordsContext.Provider>
     )
   }
 
@@ -795,6 +803,7 @@ function RepeaterRow({
   // wrapping in a class that hides the FieldShell's label slot.
   if (simple) {
     return (
+      <RowCoordsContext.Provider value={rowCoords}>
       <div
         className={`flex items-center gap-2 transition-opacity ${isDragging ? 'opacity-50' : ''}`}
         data-pilotiq-repeater-row="simple"
@@ -830,10 +839,12 @@ function RepeaterRow({
           />
         )}
       </div>
+      </RowCoordsContext.Provider>
     )
   }
 
   return (
+    <RowCoordsContext.Provider value={rowCoords}>
     <div
       className={`rounded-md border bg-card transition-opacity ${isDragging ? 'opacity-50' : ''}`}
       data-pilotiq-repeater-row=""
@@ -910,6 +921,7 @@ function RepeaterRow({
           : <SchemaRenderer elements={namespaced} />}
       </div>
     </div>
+    </RowCoordsContext.Provider>
   )
 }
 
@@ -1168,6 +1180,10 @@ function RepeaterTableRow({
     () => row.children.map(c => prefixFieldNames(c, prefix)),
     [row.children, prefix],
   )
+  const rowCoords = useMemo(
+    () => ({ arrayName: name, rowIndex: index, rowId: row.id }),
+    [name, index, row.id],
+  )
 
   if (row.hidden) {
     // Render the hidden envelope as a single full-span cell so column
@@ -1175,11 +1191,18 @@ function RepeaterTableRow({
     // still in the form's submit. Using `<tr style="display:none">`
     // would warn under React strict-mode in Firefox; the wrapping cell
     // keeps the markup HTML-valid.
+    //
+    // The provider wraps the cell rather than the `<tr>` because React's
+    // table-row whitelisting only accepts `<th>/<td>` children, not a
+    // context provider; the provider is a no-DOM wrapper so it sits
+    // inside the cell fine.
     return (
       <tr style={{ display: 'none' }} data-pilotiq-repeater-row="hidden">
         <td colSpan={columns.length + 1}>
-          <input type="hidden" name={`${prefix}.__id`} value={row.id} readOnly />
-          <SchemaRenderer elements={namespaced} />
+          <RowCoordsContext.Provider value={rowCoords}>
+            <input type="hidden" name={`${prefix}.__id`} value={row.id} readOnly />
+            <SchemaRenderer elements={namespaced} />
+          </RowCoordsContext.Provider>
         </td>
       </tr>
     )
@@ -1209,6 +1232,7 @@ function RepeaterTableRow({
     : {}
 
   return (
+    <RowCoordsContext.Provider value={rowCoords}>
     <tr
       className={`border-t align-top ${isDragging ? 'opacity-50' : ''}`}
       data-pilotiq-repeater-row=""
@@ -1265,6 +1289,7 @@ function RepeaterTableRow({
         </div>
       </td>
     </tr>
+    </RowCoordsContext.Provider>
   )
 }