fix: don't select sdt when clicking outside

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));
 
@@ -1350,22 +1354,30 @@ export class EditorInputManager {
   ): number {
     if (clickDepth !== 1) return fallbackPos;
 
-    let wrapper = target.closest(`.${DOM_CLASS_NAMES.INLINE_SDT_WRAPPER}`) as HTMLElement | null;
-    if (!wrapper) {
-      const line = target.closest(`.${DOM_CLASS_NAMES.LINE}`) as HTMLElement | null;
-      if (line) {
-        const wrappers = Array.from(line.querySelectorAll<HTMLElement>(`.${DOM_CLASS_NAMES.INLINE_SDT_WRAPPER}`));
-        for (const candidate of wrappers) {
-          const rect = candidate.getBoundingClientRect();
-          const verticallyAligned = clientY >= rect.top - 2 && clientY <= rect.bottom + 2;
-          const nearRightEdge = clientX >= rect.right - 4 && clientX <= rect.right + 12;
-          if (verticallyAligned && nearRightEdge) {
-            wrapper = candidate;
-            break;
-          }
-        }
-      }
-    }
+    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();

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;

packages/super-editor/src/editors/v1/extensions/structured-content/structured-content-select-plugin.js

@@ -111,19 +111,53 @@ export function createStructuredContentSelectPlugin(editor) {
 
       const { selection } = newState;
 
-      // Only for collapsed selections (cursor placement, not range selections)
-      if (!selection.empty) return null;
-
       // Only when selection actually changed
       if (oldState.selection.eq(newState.selection)) return null;
 
       // Only for selection-only transactions (no doc changes — filters out
       // typing, paste, etc. that also move the cursor)
       if (transactions.some((tr) => tr.docChanged)) return null;
 
-      const $pos = selection.$from;
+      if (!selection.empty) {
+        let selectedSdt = null;
+        newState.doc.descendants((node, pos) => {
+          if (node.type.name !== 'structuredContent') return true;
+
+          const contentFrom = pos + 1;
+          const contentTo = pos + node.nodeSize - 1;
+          const wrapsSelection = selection.from <= contentFrom && selection.to >= contentTo;
+          if (!wrapsSelection) return true;
+
+          selectedSdt = {
+            node,
+            pos,
+            contentFrom,
+            contentTo,
+          };
+          return false;
+        });
+
+        if (selectedSdt) {
+          const oldAtTrailingBoundary =
+            oldState.selection.empty && oldState.selection.from >= selectedSdt.pos + selectedSdt.node.nodeSize;
+          const oldAtLeadingBoundary = oldState.selection.empty && oldState.selection.from <= selectedSdt.pos;
+
+          if (oldAtTrailingBoundary) {
+            return ensureEditableSlotAtPosition(newState.tr, selectedSdt.pos + selectedSdt.node.nodeSize, 'after');
+          }
+          if (oldAtLeadingBoundary) {
+            return ensureEditableSlotAtPosition(newState.tr, selectedSdt.pos, 'before');
+          }
+        }
+        return null;
+      }
+
+      // Only for collapsed selections (cursor placement, not range selections)
+      if (!selection.empty) return null;
 
       // Walk up to find an enclosing inline structuredContent node
+      const $pos = selection.$from;
+      const old$pos = oldState.selection.$from;
       for (let d = $pos.depth; d > 0; d--) {
         const node = $pos.node(d);
         if (node.type.name !== 'structuredContent') continue;
@@ -142,7 +176,6 @@ export function createStructuredContentSelectPlugin(editor) {
 
         // If old selection was already inside this same SDT, allow normal
         // cursor placement (second click / arrow navigation within SDT)
-        const old$pos = oldState.selection.$from;
         for (let od = old$pos.depth; od > 0; od--) {
           if (old$pos.node(od).type.name === 'structuredContent' && old$pos.before(od) === sdtStart) {
             return null;