fix: allow putting cursor after inline sdt field

Author: VladaHarbour

packages/super-editor/src/editors/v1/core/presentation-editor/pointer-events/EditorInputManager.ts

@@ -62,6 +62,10 @@ const COMMENT_THREAD_HIT_SAMPLE_OFFSETS: ReadonlyArray<readonly [number, number]
   [0, -COMMENT_THREAD_HIT_TOLERANCE_PX],
   [0, COMMENT_THREAD_HIT_TOLERANCE_PX],
 ];
+// Boundary clicks are intentionally forgiving so near-edge clicks can place the
+// caret before/after an inline SDT instead of selecting it.
+const INLINE_SDT_BOUNDARY_OUTSIDE_SLOP_PX = 12;
+const INLINE_SDT_BOUNDARY_INSIDE_SLOP_PX = 4;
 
 const clamp = (value: number, min: number, max: number): number => Math.max(min, Math.min(max, value));
 
@@ -1217,10 +1221,18 @@ export class EditorInputManager {
 
     // Track click depth for multi-click
     const clickDepth = this.#registerPointerClick(event);
+    const hitPos = this.#normalizeInlineSdtBoundaryHitPosition(
+      target,
+      event.clientX,
+      event.clientY,
+      doc,
+      hit.pos,
+      clickDepth,
+    );
 
     // Set up drag selection state
     if (clickDepth === 1) {
-      this.#dragAnchor = hit.pos;
+      this.#dragAnchor = hitPos;
       this.#dragAnchorPageIndex = hit.pageIndex;
       this.#pendingMarginClick = this.#callbacks.computePendingMarginClick?.(event.pointerId, x, y) ?? null;
 
@@ -1290,17 +1302,35 @@ export class EditorInputManager {
     if (!handledByDepth) {
       try {
         // SD-1584: clicking inside a block SDT selects the node (NodeSelection).
-        const sdtBlock = clickDepth === 1 ? this.#findStructuredContentBlockAtPos(doc, hit.pos) : null;
+        const sdtBlock = clickDepth === 1 ? this.#findStructuredContentBlockAtPos(doc, hitPos) : null;
         let nextSelection: Selection;
+        let inlineSdtBoundaryPos: number | null = null;
+        let inlineSdtBoundaryDirection: 'before' | 'after' | null = null;
         if (sdtBlock) {
           nextSelection = NodeSelection.create(doc, sdtBlock.pos);
         } else {
-          nextSelection = TextSelection.create(doc, hit.pos);
+          const inlineSdt = clickDepth === 1 ? this.#findStructuredContentInlineAtPos(doc, hitPos) : null;
+          if (inlineSdt && hitPos >= inlineSdt.end) {
+            const afterInlineSdt = inlineSdt.pos + inlineSdt.node.nodeSize;
+            inlineSdtBoundaryPos = afterInlineSdt;
+            inlineSdtBoundaryDirection = 'after';
+            nextSelection = TextSelection.create(doc, afterInlineSdt);
+          } else if (inlineSdt && hitPos <= inlineSdt.start) {
+            inlineSdtBoundaryPos = inlineSdt.pos;
+            inlineSdtBoundaryDirection = 'before';
+            nextSelection = TextSelection.create(doc, inlineSdt.pos);
+          } else {
+            nextSelection = TextSelection.create(doc, hitPos);
+          }
           if (!nextSelection.$from.parent.inlineContent) {
-            nextSelection = Selection.near(doc.resolve(hit.pos), 1);
+            nextSelection = Selection.near(doc.resolve(hitPos), 1);
           }
         }
-        const tr = editor.state.tr.setSelection(nextSelection);
+        let tr = editor.state.tr.setSelection(nextSelection);
+        if (inlineSdtBoundaryPos != null && inlineSdtBoundaryDirection) {
+          tr = this.#ensureEditableSlotAtInlineSdtBoundary(tr, inlineSdtBoundaryPos, inlineSdtBoundaryDirection);
+          nextSelection = tr.selection;
+        }
         // Preserve stored marks (e.g., formatting selected from toolbar before clicking)
         if (nextSelection instanceof TextSelection && nextSelection.empty && editor.state.storedMarks) {
           tr.setStoredMarks(editor.state.storedMarks);
@@ -1314,6 +1344,98 @@ export class EditorInputManager {
     this.#callbacks.scheduleSelectionUpdate?.();
   }
 
+  #normalizeInlineSdtBoundaryHitPosition(
+    target: HTMLElement,
+    clientX: number,
+    clientY: number,
+    doc: ProseMirrorNode,
+    fallbackPos: number,
+    clickDepth: number,
+  ): number {
+    if (clickDepth !== 1) return fallbackPos;
+
+    const line =
+      target.closest(`.${DOM_CLASS_NAMES.LINE}`) ??
+      (typeof document.elementsFromPoint === 'function'
+        ? (document
+            .elementsFromPoint(clientX, clientY)
+            .find((element) => element instanceof HTMLElement && element.closest(`.${DOM_CLASS_NAMES.LINE}`))
+            ?.closest(`.${DOM_CLASS_NAMES.LINE}`) as HTMLElement | null)
+        : null);
+    if (!line) return fallbackPos;
+
+    const wrappers = Array.from(line.querySelectorAll<HTMLElement>(`.${DOM_CLASS_NAMES.INLINE_SDT_WRAPPER}`));
+    const wrapper = wrappers.find((candidate) => {
+      const rect = candidate.getBoundingClientRect();
+      const verticallyAligned = clientY >= rect.top - 2 && clientY <= rect.bottom + 2;
+      if (!verticallyAligned) return false;
+
+      const nearLeftEdge =
+        clientX >= rect.left - INLINE_SDT_BOUNDARY_OUTSIDE_SLOP_PX &&
+        clientX <= rect.left + INLINE_SDT_BOUNDARY_INSIDE_SLOP_PX;
+      const nearRightEdge =
+        clientX >= rect.right - INLINE_SDT_BOUNDARY_INSIDE_SLOP_PX &&
+        clientX <= rect.right + INLINE_SDT_BOUNDARY_OUTSIDE_SLOP_PX;
+      return nearLeftEdge || nearRightEdge;
+    });
+    if (!wrapper) return fallbackPos;
+
+    const rect = wrapper.getBoundingClientRect();
+    // Treat clicks near left edge as "before SDT", and right half as "after SDT" intent.
+    const leftSideThreshold = rect.left + rect.width * 0.2;
+    const rightSideThreshold = rect.left + rect.width * 0.5;
+    if (clientX <= leftSideThreshold) {
+      const pmStartRaw = wrapper.dataset.pmStart;
+      const pmStart = pmStartRaw != null ? Number(pmStartRaw) : NaN;
+      if (!Number.isFinite(pmStart)) return fallbackPos;
+      return Math.max(0, Math.min(pmStart, doc.content.size));
+    }
+    if (clientX < rightSideThreshold) return fallbackPos;
+
+    const pmEndRaw = wrapper.dataset.pmEnd;
+    const pmEnd = pmEndRaw != null ? Number(pmEndRaw) : NaN;
+    if (!Number.isFinite(pmEnd)) return fallbackPos;
+    return Math.max(0, Math.min(pmEnd + 1, doc.content.size));
+  }
+
+  #ensureEditableSlotAtInlineSdtBoundary<
+    T extends {
+      doc: ProseMirrorNode;
+      insertText: (text: string, from?: number, to?: number) => unknown;
+      setSelection: (selection: Selection) => unknown;
+      selection: Selection;
+    },
+  >(tr: T, pos: number, direction: 'before' | 'after'): T {
+    const clampedPos = Math.max(0, Math.min(pos, tr.doc.content.size));
+    const needsEditableSlot = (node: ProseMirrorNode | null | undefined, side: 'before' | 'after') =>
+      !node ||
+      node.type?.name === 'hardBreak' ||
+      node.type?.name === 'lineBreak' ||
+      node.type?.name === 'structuredContent' ||
+      (node.type?.name === 'run' && !(side === 'before' ? node.lastChild?.isText : node.firstChild?.isText));
+
+    if (direction === 'before') {
+      const $pos = tr.doc.resolve(clampedPos);
+      const nodeBefore = $pos.nodeBefore;
+      const shouldInsertBefore = needsEditableSlot(nodeBefore, 'before');
+
+      if (!shouldInsertBefore) return tr;
+
+      tr.insertText('\u200B', clampedPos);
+      tr.setSelection(TextSelection.create(tr.doc, clampedPos + 1));
+      return tr;
+    }
+
+    const nodeAfter = tr.doc.nodeAt(clampedPos);
+    const shouldInsertAfter = needsEditableSlot(nodeAfter, 'after');
+
+    if (!shouldInsertAfter) return tr;
+
+    tr.insertText('\u200B', clampedPos);
+    tr.setSelection(TextSelection.create(tr.doc, clampedPos + 1));
+    return tr;
+  }
+
   #handlePointerMove(event: PointerEvent): void {
     if (!this.#deps) return;
 

packages/super-editor/src/editors/v1/dom-observer/DomPointerMapping.test.ts

@@ -274,7 +274,54 @@ describe('DomPointerMapping', () => {
 
       expect(result).not.toBeNull();
       expect(result).toBeGreaterThanOrEqual(0);
-      expect(result).toBeLessThanOrEqual(20);
+      expect(result).toBeLessThanOrEqual(21);
+    });
+
+    it('returns the position after a terminal inline SDT when clicking to its visual right', () => {
+      container.innerHTML = `
+        <div class="superdoc-page" data-page-index="0">
+          <div class="superdoc-fragment" data-block-id="block1">
+            <div class="superdoc-line" data-pm-start="2" data-pm-end="25">
+              <span data-pm-start="2" data-pm-end="8">Date: </span>
+              <span class="superdoc-structured-content-inline" data-pm-start="11" data-pm-end="25">
+                <span class="superdoc-structured-content-inline__label">Agreement Date</span>
+                <span data-pm-start="11" data-pm-end="25">Agreement Date</span>
+              </span>
+            </div>
+          </div>
+        </div>
+      `;
+
+      const lineRect = container.querySelector('.superdoc-line')!.getBoundingClientRect();
+      const textSpan = container.querySelector(
+        '.superdoc-structured-content-inline span[data-pm-start]',
+      ) as HTMLElement;
+      const spanRect = textSpan.getBoundingClientRect();
+
+      expect(clickToPositionDom(container, spanRect.right + 10, lineRect.top + 5)).toBe(26);
+    });
+
+    it('returns the position before a leading inline SDT when clicking to its visual left', () => {
+      container.innerHTML = `
+        <div class="superdoc-page" data-page-index="0">
+          <div class="superdoc-fragment" data-block-id="block1">
+            <div class="superdoc-line" data-pm-start="11" data-pm-end="25">
+              <span class="superdoc-structured-content-inline" data-pm-start="11" data-pm-end="25">
+                <span class="superdoc-structured-content-inline__label">Agreement Date</span>
+                <span data-pm-start="11" data-pm-end="25">Agreement Date</span>
+              </span>
+            </div>
+          </div>
+        </div>
+      `;
+
+      const lineRect = container.querySelector('.superdoc-line')!.getBoundingClientRect();
+      const textSpan = container.querySelector(
+        '.superdoc-structured-content-inline span[data-pm-start]',
+      ) as HTMLElement;
+      const spanRect = textSpan.getBoundingClientRect();
+
+      expect(clickToPositionDom(container, spanRect.left - 10, lineRect.top + 5)).toBe(10);
     });
   });
 

packages/super-editor/src/editors/v1/dom-observer/DomPointerMapping.ts

@@ -97,6 +97,21 @@ function readPmRange(el: HTMLElement): { start: number; end: number } {
   };
 }
 
+function getInlineSdtWrapperBoundaryPos(
+  spanEl: HTMLElement | null | undefined,
+  side: 'before' | 'after',
+): number | null {
+  if (!(spanEl instanceof HTMLElement)) return null;
+
+  const wrapper = spanEl.closest(`.${CLASS.inlineSdtWrapper}`) as HTMLElement | null;
+  if (!wrapper) return null;
+
+  const { start, end } = readPmRange(wrapper);
+  if (!Number.isFinite(start) || !Number.isFinite(end)) return null;
+
+  return side === 'before' ? start - 1 : end + 1;
+}
+
 /**
  * Collects clickable span/anchor elements inside a line.
  *
@@ -331,8 +346,16 @@ function resolvePositionInLine(
   const visualRight = Math.max(...boundsRects.map((r) => r.right));
 
   // Boundary snapping: click outside all spans → return line start/end (RTL-aware)
-  if (viewX <= visualLeft) return rtl ? lineEnd : lineStart;
-  if (viewX >= visualRight) return rtl ? lineStart : lineEnd;
+  if (viewX <= visualLeft) {
+    const edgeSpan = rtl ? spanEls[spanEls.length - 1] : spanEls[0];
+    const inlineBoundary = getInlineSdtWrapperBoundaryPos(edgeSpan, rtl ? 'after' : 'before');
+    return inlineBoundary ?? (rtl ? lineEnd : lineStart);
+  }
+  if (viewX >= visualRight) {
+    const edgeSpan = rtl ? spanEls[0] : spanEls[spanEls.length - 1];
+    const inlineBoundary = getInlineSdtWrapperBoundaryPos(edgeSpan, rtl ? 'before' : 'after');
+    return inlineBoundary ?? (rtl ? lineStart : lineEnd);
+  }
 
   const targetEl = findSpanAtX(spanEls, viewX);
   if (!targetEl) return lineStart;