@pilotiq/pilotiq 0.11.0 → 0.13.0

package/src/react/fields/MarkdownInput.tsx

@@ -6,9 +6,12 @@ import {
   CodeIcon, PaperclipIcon, Loader2Icon,
 } from 'lucide-react'
 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'
@@ -46,92 +49,59 @@ export function MarkdownInput({
   uploadUrl:                  string | undefined
 }): React.ReactElement {
   const fs = useFieldState(name)
+  const room = useCollabRoom()
+  const collabRenderer = getCollabTextRenderer()
+  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. Those features
+  // are write-mode-only on the native path; collab users type markdown
+  // syntax directly (`**bold**`, `## heading`). The preview tab keeps
+  // 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}
+        fragmentKey={fragmentKey}
+        hiddenInputName={name}
+        defaultValue={defaultValue}
+        disabled={disabled}
+        {...(placeholder !== undefined ? { placeholder } : {})}
+        {...(minHeight !== undefined ? { minHeight } : {})}
+        {...(maxHeight !== undefined ? { maxHeight } : {})}
+      />
+    )
+  }
+
   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)
-        if (delta) binding.applyDelta(delta)
-        setBoundValue(next)
-        boundValueRef.current = next
-      }
-      fs.setValue(next)
-      fs.triggerLive(next)
-      return
-    }
     if (fs.controlled) { fs.setValue(next); fs.triggerLive(next) }
     else                { setLocalValue(next); fs.triggerLive(next) }
   }
@@ -364,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}
@@ -422,6 +375,83 @@ function TabButton({ active, onClick, children }: {
   )
 }
 
+/**
+ * Phase B follow-up — collab-aware markdown editor. Mounts the registered
+ * Tiptap-backed plain-text renderer for the Write pane and reuses the
+ * existing `marked` pipeline for Preview. No toolbar, no Cmd-shortcuts, no
+ * paste-image upload — those features depend on textarea-DOM splicing that
+ * doesn't translate to Tiptap's selection model. The cursor-bug fix is the
+ * load-bearing change; markdown-syntax authors keep typing as before.
+ */
+function MarkdownCollabInput({
+  Renderer, fragmentKey, hiddenInputName, defaultValue, disabled, placeholder, minHeight, maxHeight,
+}: {
+  Renderer:        CollabTextRenderer
+  fragmentKey:     string
+  hiddenInputName: string
+  defaultValue:    unknown
+  disabled:        boolean
+  placeholder?:    string
+  minHeight?:      string
+  maxHeight?:      string
+}): React.ReactElement {
+  const fs = useFieldState(hiddenInputName)
+  const initial = useMemo(() => stringValue(defaultValue), [])
+  const [text, setText] = useState<string>(initial)
+  const [tab, setTab] = useState<'write' | 'preview'>('write')
+  const textRef = useRef(text)
+  useEffect(() => { textRef.current = text }, [text])
+
+  const handleChange = (next: string): void => {
+    setText(next)
+    if (fs.controlled) fs.setValue(next)
+    fs.triggerLive(next)
+  }
+  const handleBlur = (): void => { /* fire-and-forget — live trigger already ran on change */ }
+
+  const previewHtml = useMemo(
+    () => tab === 'preview' ? marked.parse(text, { gfm: true, breaks: false, async: false }) as string : '',
+    [tab, text],
+  )
+
+  const wrapperStyle: React.CSSProperties = {}
+  if (minHeight) wrapperStyle.minHeight = minHeight
+  if (maxHeight) wrapperStyle.maxHeight = maxHeight
+
+  return (
+    <div className="flex flex-col rounded-md border bg-background">
+      <div className="flex items-center border-b px-2 py-1">
+        <TabButton active={tab === 'write'}   onClick={() => setTab('write')}>Write</TabButton>
+        <TabButton active={tab === 'preview'} onClick={() => setTab('preview')}>Preview</TabButton>
+      </div>
+      {tab === 'write' ? (
+        <div style={wrapperStyle} className="overflow-auto">
+          <input type="hidden" name={hiddenInputName} value={text} />
+          <Renderer
+            name={fragmentKey}
+            multiline={true}
+            defaultValue={initial}
+            {...(placeholder !== undefined ? { placeholder } : {})}
+            disabled={disabled}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            className="w-full bg-transparent px-3 py-2 text-sm font-mono leading-relaxed outline-none disabled:opacity-50 whitespace-pre-wrap break-words"
+          />
+        </div>
+      ) : (
+        <>
+          <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}
+            dangerouslySetInnerHTML={{ __html: previewHtml || '<p class="text-muted-foreground italic">Nothing to preview</p>' }}
+          />
+        </>
+      )}
+    </div>
+  )
+}
+
 function stringValue(v: unknown): string {
   if (v === undefined || v === null) return ''
   if (typeof v === 'string') return v

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>
   )
 }