@pilotiq/pilotiq 0.11.0 → 0.12.0

package/src/react/fields/TextLikeInput.tsx

@@ -2,6 +2,8 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { ElementMeta } from '../../schema/Element.js'
 import type { TextBinding } from '../FormCollabBindingRegistry.js'
 import { useFieldState } from '../FormStateContext.js'
+import { useCollabRoom } from '../CollabRoomContext.js'
+import { getCollabTextRenderer, type CollabTextRenderer } from '../CollabTextRendererRegistry.js'
 import { Input } from '../ui/input.js'
 import { Textarea } from '../ui/textarea.js'
 import { computeDelta, preserveCursor } from './textDelta.js'
@@ -38,6 +40,8 @@ export function TextLikeInput({
   applyMask?: (value: string) => string
 }): React.ReactElement {
   const fs = useFieldState(name)
+  const room = useCollabRoom()
+  const collabRenderer = getCollabTextRenderer()
   const liveCfg = el['live']
   const liveOpts = (typeof liveCfg === 'object' && liveCfg !== null
     ? liveCfg as { onBlur?: boolean; debounce?: number }
@@ -52,6 +56,40 @@ export function TextLikeInput({
   // `useCallback`-wrapped fn that's *always* defined (identity when no
   // mask), so its truthiness can't gate the branch.
   const hasMask = typeof el['mask'] === 'string'
+
+  // Phase B — Tiptap-backed plain-text editor for collab text fields.
+  // When a `<RecordCollabRoom>` is mounted up-tree AND `@pilotiq/tiptap`'s
+  // `registerTiptap()` registered a collab text renderer, take the new path:
+  // the editor anchors selections to Yjs `RelativePosition` (via y-prosemirror)
+  // instead of integer string offsets, fixing the cursor-jump + two-peer
+  // concurrent-insert races that the legacy `Y.Text` + `computeDelta` path
+  // can't resolve. Dotted-path row leaves (Repeater / Builder) stay on the
+  // legacy `fs.textBinding` path — per-row collab editor support is a
+  // separate follow-up.
+  const fieldCollab = el['collab'] as boolean | undefined
+  if (
+    room &&
+    collabRenderer &&
+    fieldCollab !== false &&
+    !hasMask &&
+    !name.includes('.')
+  ) {
+    return (
+      <CollabTextField
+        Renderer={collabRenderer}
+        name={name}
+        multiline={multiline}
+        defaultValue={stringValue(common['defaultValue'])}
+        {...(common['placeholder'] !== undefined ? { placeholder: String(common['placeholder']) } : {})}
+        disabled={Boolean(common['disabled'])}
+        triggerLive={fs.triggerLive}
+        setValue={fs.setValue}
+        controlled={fs.controlled}
+        onBlurMode={onBlurMode}
+      />
+    )
+  }
+
   if (fs.textBinding && !hasMask) {
     return (
       <BoundTextInput
@@ -217,13 +255,18 @@ function BoundTextInput({
     if (after === before) return
     const delta = computeDelta(before, after)
     if (!delta) return
+    // Pre-stamp `valueRef.current = after` BEFORE `applyDelta`. Y.Text's
+    // observe fires synchronously inside `applyDelta` for our own write,
+    // so without this the observer would see `prev=before, next=after`
+    // and run `preserveCursor` — which is designed for *remote* edits
+    // and clobbers the user's caret on local typing (typed '1' at pos 0
+    // would jump cursor forward by delta-length and the next keystroke
+    // would insert at the wrong index, producing scrambled output).
+    // With `valueRef` already at `after`, the observer's `next === prev`
+    // short-circuit fires and the cursor is left alone for local echoes.
+    valueRef.current = after
     binding.applyDelta(delta)
-    // Eager local + form-map update so the controlled input doesn't
-    // wait on the observer echo to render the new keystroke. Observer
-    // will fire with the same string and short-circuit via the equality
-    // check above.
     setValueLocal(after)
-    valueRef.current = after
     mirrorRef.current(after)
     if (!onBlurMode) triggerLive(after)
   }, [binding, onBlurMode, triggerLive])
@@ -267,6 +310,87 @@ function BoundTextInput({
   return <Input {...(props as React.ComponentProps<typeof Input>)} type={type} />
 }
 
+/**
+ * Phase B — wrapper around the registered Tiptap-backed collab editor.
+ * Owns the local text mirror so the hidden `<input>` always carries the
+ * editor's current value for FormData submission. When `FormStateProvider`
+ * is mounted up-tree, also mirrors every update into the values map via
+ * `fs.setValue` so `$get/$set` computations and any Y.Map LWW path (kept
+ * for non-text consumers) stay in sync.
+ *
+ * No IME / cursor-preservation gymnastics in here — the underlying Tiptap
+ * editor handles composition natively and y-prosemirror anchors selections
+ * to `Yjs.RelativePosition`, so the cursor survives concurrent + mid-word
+ * remote edits without any client-side bookkeeping.
+ */
+function CollabTextField({
+  Renderer, name, multiline, defaultValue, placeholder, disabled,
+  triggerLive, setValue, controlled, onBlurMode,
+}: {
+  Renderer:     CollabTextRenderer
+  name:         string
+  multiline:    boolean
+  defaultValue: string
+  placeholder?: string
+  disabled:     boolean
+  triggerLive:  (valueOverride?: unknown) => void
+  setValue:     (v: unknown) => void
+  controlled:   boolean
+  onBlurMode:   boolean
+}): React.ReactElement {
+  const [text, setText] = useState<string>(defaultValue)
+  const textRef = useRef(text)
+  useEffect(() => { textRef.current = text }, [text])
+
+  const handleChange = useCallback((next: string): void => {
+    setText(next)
+    if (controlled) setValue(next)
+    if (!onBlurMode) triggerLive(next)
+  }, [controlled, onBlurMode, setValue, triggerLive])
+
+  const handleBlur = useCallback((): void => {
+    if (onBlurMode) triggerLive(textRef.current)
+  }, [onBlurMode, triggerLive])
+
+  // Match the visual chrome of `<Input>` / `<Textarea>` so the editor reads
+  // as a drop-in replacement. The adapter forwards this class to its
+  // contenteditable wrapper; `whitespace-nowrap` on the single-line variant
+  // keeps the editor from wrapping into a second line if a stray paragraph
+  // split somehow makes it through.
+  //
+  // `overflow-x-clip` (not `auto`) on the single-line variant matters for
+  // `CollaborationCaret` presence labels: per the CSS overflow spec, setting
+  // either axis to a non-visible / non-clip value (`auto` / `scroll` /
+  // `hidden`) forces the other axis to compute as `auto` too — so
+  // `overflow-x-auto` would clip the caret's user-name label, which renders
+  // `-1.4em` above the line. `clip` is the one non-visible value that does
+  // NOT force the other axis, so `overflow-y` stays `visible` and the label
+  // escapes the chrome upward as designed. Trade-off: long text gets clipped
+  // on the right rather than horizontally scrollable (native `<input>`
+  // semantics) — acceptable for plain-text fields, where typing past the
+  // visible width is rare and the caret presence label is the higher-value
+  // affordance.
+  const className = multiline
+    ? 'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm whitespace-pre-wrap break-words'
+    : 'flex h-9 w-full items-center rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm whitespace-nowrap overflow-x-clip'
+
+  return (
+    <>
+      <input type="hidden" name={name} value={text} />
+      <Renderer
+        name={name}
+        multiline={multiline}
+        defaultValue={defaultValue}
+        {...(placeholder !== undefined ? { placeholder } : {})}
+        disabled={disabled}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        className={className}
+      />
+    </>
+  )
+}
+
 function identity(v: string): string { return v }
 
 function stringValue(v: unknown): string {

package/src/react/index.ts

@@ -43,6 +43,12 @@ export {
   type CollabExtensionFactory,
   type CollabExtensionFactoryArgs,
 } from './CollabExtensionFactoryRegistry.js'
+export {
+  registerCollabTextRenderer,
+  getCollabTextRenderer,
+  type CollabTextRenderer,
+  type CollabTextRendererProps,
+} from './CollabTextRendererRegistry.js'
 export {
   registerFormCollabBinding,
   getFormCollabBinding,
@@ -139,6 +145,12 @@ export {
   type UseResizableWidthApi,
 } from './useResizableWidth.js'
 
+export {
+  CurrentUserProvider,
+  useCurrentUser,
+  type CurrentUser,
+} from './CurrentUserContext.js'
+
 export { ThemeProvider, useTheme } from './ThemeProvider.js'
 export { ThemeToggle } from './ThemeToggle.js'
 export { ThemeSettingsPage } from './ThemeSettingsPage.js'