feat: rtl mixed bidi

Author: Artem Nistuley

packages/layout-engine/painters/dom/src/renderer.ts

@@ -5597,9 +5597,13 @@ export class DomPainter {
 
     // Pass isLink flag to skip applying inline color/decoration styles for links
     applyRunStyles(elem as HTMLElement, run, isActiveLink);
+    const usePerRunRtlDir = shouldAssignPerRunRtlDir({
+      runText: textRun.text,
+      effectiveText,
+    });
     // SD-3098 Word-parity: rtl-tagged runs get dir="rtl" so per-run bidi is isolated;
     // non-rtl date-like runs in RTL context get dir="ltr" to prevent separator drift.
-    if (textRun.bidi?.rtl === true) {
+    if (textRun.bidi?.rtl === true && usePerRunRtlDir) {
       elem.setAttribute('dir', 'rtl');
     } else if (typeof textRun.text === 'string' && RTL_DATE_LIKE_TOKEN_RE.test(textRun.text)) {
       elem.setAttribute('dir', 'ltr');
@@ -8296,6 +8300,8 @@ const resolveRunText = (run: Run, context: FragmentRenderContext): string => {
 };
 
 const RTL_DATE_LIKE_TOKEN_RE = /^-?\d+(?:[./-]\d+)+$/;
+const STRONG_RTL_CHAR_RE = /[\u0590-\u08FF]/;
+const LATIN_DIGIT_NEUTRAL_ONLY_RE = /^[\s0-9A-Za-z./\-_:,+()]+$/;
 const RLM = '\u200F';
 
 // AIDEV-NOTE: SD-3098 Word-parity workaround for RTL date-like tokens. We inject
@@ -8309,3 +8315,20 @@ const normalizeRtlDateTokenForWordParity = (text: string): string => {
   }
   return text.replace(/[./-]/g, (separator) => `${RLM}${separator}${RLM}`);
 };
+
+const shouldAssignPerRunRtlDir = (opts: { runText: string | undefined; effectiveText: string }): boolean => {
+  const sample = (opts.runText ?? opts.effectiveText).trim();
+  if (!sample) {
+    return true;
+  }
+  if (RTL_DATE_LIKE_TOKEN_RE.test(sample)) {
+    return true;
+  }
+  if (STRONG_RTL_CHAR_RE.test(sample)) {
+    return true;
+  }
+  if (LATIN_DIGIT_NEUTRAL_ONLY_RE.test(sample)) {
+    return false;
+  }
+  return true;
+};

packages/layout-engine/painters/dom/src/rtl-date-parity.test.ts

@@ -68,9 +68,10 @@ describe('RTL date parity', () => {
     expect(span?.textContent).toBe(runText);
   });
 
-  // SD-3098: mixed runs on the same line - the bidiCompatible merge guard keeps
-  // them as separate spans, so each can carry its own dir attribute.
-  it('paints mixed rtl + ltr runs on the same line as separate spans with distinct dir attrs', () => {
+  // Mixed runs remain separate spans. In RTL paragraphs we now avoid forcing
+  // per-run dir="rtl" for plain Latin/digit tokens, so numeric rtl-tagged runs
+  // can inherit paragraph direction without isolated run reordering.
+  it('paints mixed rtl + ltr runs on the same line as separate spans with date-only ltr override', () => {
     const blockId = 'mixed';
     const ltrText = '-03-23';
     const rtlText = '2026';
@@ -110,13 +111,13 @@ describe('RTL date parity', () => {
     expect(spans.length).toBe(2);
     expect(spans[0].getAttribute('dir')).toBe('ltr');
     expect(spans[0].textContent).toBe(ltrText);
-    expect(spans[1].getAttribute('dir')).toBe('rtl');
+    expect(spans[1].getAttribute('dir')).toBeNull();
     expect(spans[1].textContent).toBe(rtlText);
   });
 
-  // SD-3098: rtl-tagged runs that are NOT date-like keep dir="rtl" but get no
-  // RLM injection. Plain integers (`2026`) don't match the date regex.
-  it('does not inject RLM into rtl runs whose text is not date-like', () => {
+  // Rtl-tagged numeric runs in RTL paragraphs do not force dir="rtl" anymore.
+  // This avoids undesired token inversion in mixed header/footer runs like "copy 2".
+  it('does not force per-run rtl dir for non-date numeric runs in RTL paragraphs', () => {
     const blockId = 'rtl-numeric';
     const runText = '2026';
     const block: FlowBlock = {
@@ -133,7 +134,7 @@ describe('RTL date parity', () => {
     painter.paint(makeLayout(blockId), mount);
 
     const span = mount.querySelector('.superdoc-line span');
-    expect(span?.getAttribute('dir')).toBe('rtl');
+    expect(span?.getAttribute('dir')).toBeNull();
     expect(span?.textContent).toBe(runText);
     expect(span?.textContent).not.toContain('\u200F');
   });

packages/super-editor/src/editors/v1/core/presentation-editor/selection/CaretGeometry.ts

@@ -123,6 +123,7 @@ export function computeCaretLayoutRectGeometry(
   includeDomFallback = true,
 ): CaretLayoutRect | null {
   if (!layout) return null;
+  const originalPos = pos;
 
   // Geometry-based calculation from layout engine
   let effectivePos = pos;
@@ -214,30 +215,116 @@ export function computeCaretLayoutRectGeometry(
   const pageEl = getPageElementByIndex(painterHost ?? null, hit.pageIndex);
   const pageRect = pageEl?.getBoundingClientRect();
 
-  // Find span containing this pos and measure actual DOM position
+  if (includeDomFallback && pageRect) {
+    const selection = pageEl?.ownerDocument?.getSelection();
+    if (selection?.rangeCount && selection.isCollapsed) {
+      const nativeRange = selection.getRangeAt(0);
+      if (typeof nativeRange.getBoundingClientRect === 'function') {
+        const nativeRect = nativeRange.getBoundingClientRect();
+        const inPageBounds =
+          Number.isFinite(nativeRect.left) &&
+          Number.isFinite(nativeRect.top) &&
+          Number.isFinite(nativeRect.height) &&
+          nativeRect.height > 0 &&
+          nativeRect.left >= pageRect.left - 2 &&
+          nativeRect.left <= pageRect.right + 2 &&
+          nativeRect.top >= pageRect.top - 2 &&
+          nativeRect.top <= pageRect.bottom + 2;
+        const nativeX = (nativeRect.left - pageRect.left) / zoom;
+        const nativeY = (nativeRect.top - pageRect.top) / zoom;
+        const withinGeometrySanity = Math.abs(nativeX - result.x) <= 80;
+        if (inPageBounds && withinGeometrySanity) {
+          return {
+            pageIndex: hit.pageIndex,
+            x: nativeX,
+            y: nativeY,
+            height: line.lineHeight,
+          };
+        }
+      }
+    }
+  }
+
+  // Find span containing this pos and measure actual DOM position.
+  // Prefer a local line-scoped lookup first (fast path), then fall back to a
+  // bounded page-level probe near the target PM position.
   let domCaretX: number | null = null;
   let domCaretY: number | null = null;
-  const spanEls = pageEl?.querySelectorAll('span[data-pm-start][data-pm-end]');
-  for (const spanEl of Array.from(spanEls ?? [])) {
-    const pmStart = Number((spanEl as HTMLElement).dataset.pmStart);
-    const pmEnd = Number((spanEl as HTMLElement).dataset.pmEnd);
-    if (effectivePos >= pmStart && effectivePos <= pmEnd && spanEl.firstChild?.nodeType === Node.TEXT_NODE) {
-      const textNode = spanEl.firstChild as Text;
-      const charIndex = Math.min(effectivePos - pmStart, textNode.length);
-      const rangeObj = document.createRange();
-      rangeObj.setStart(textNode, charIndex);
-      rangeObj.setEnd(textNode, charIndex);
-      if (typeof rangeObj.getBoundingClientRect !== 'function') {
-        break;
-      }
-      const rangeRect = rangeObj.getBoundingClientRect();
-      if (pageRect) {
-        domCaretX = (rangeRect.left - pageRect.left) / zoom;
-        domCaretY = (rangeRect.top - pageRect.top) / zoom;
+  const spanCandidates: HTMLElement[] = [];
+  const pushUnique = (el: HTMLElement) => {
+    if (!spanCandidates.includes(el)) spanCandidates.push(el);
+  };
+  const collectSpans = (root: ParentNode | null | undefined) => {
+    if (!root) return;
+    const spans = root.querySelectorAll('span[data-pm-start][data-pm-end]');
+    for (const span of Array.from(spans)) {
+      if (span instanceof HTMLElement) {
+        pushUnique(span);
       }
+    }
+  };
+
+  const lineEls = pageEl?.querySelectorAll('.superdoc-line[data-pm-start][data-pm-end]');
+  let localLineEl: HTMLElement | null = null;
+  for (const lineEl of Array.from(lineEls ?? [])) {
+    if (!(lineEl instanceof HTMLElement)) continue;
+    const lineStart = Number(lineEl.dataset.pmStart);
+    const lineEnd = Number(lineEl.dataset.pmEnd);
+    if (!Number.isFinite(lineStart) || !Number.isFinite(lineEnd)) continue;
+    if (effectivePos >= lineStart && effectivePos <= lineEnd) {
+      localLineEl = lineEl;
       break;
     }
   }
+  collectSpans(localLineEl);
+
+  if (spanCandidates.length === 0) {
+    const MAX_PM_DISTANCE = 8;
+    const pageSpans = pageEl?.querySelectorAll('span[data-pm-start][data-pm-end]');
+    for (const span of Array.from(pageSpans ?? [])) {
+      if (!(span instanceof HTMLElement)) continue;
+      const pmStart = Number(span.dataset.pmStart);
+      const pmEnd = Number(span.dataset.pmEnd);
+      if (!Number.isFinite(pmStart) || !Number.isFinite(pmEnd)) continue;
+      if (effectivePos >= pmStart && effectivePos <= pmEnd) {
+        pushUnique(span);
+        continue;
+      }
+      if (Math.abs(pmStart - effectivePos) <= MAX_PM_DISTANCE || Math.abs(pmEnd - effectivePos) <= MAX_PM_DISTANCE) {
+        pushUnique(span);
+      }
+    }
+  }
+
+  const domProbePositions = Array.from(new Set([originalPos, effectivePos, originalPos - 1, originalPos + 1])).filter(
+    (candidate) => candidate >= 0,
+  );
+
+  let resolved = false;
+  for (const probePos of domProbePositions) {
+    for (const spanEl of spanCandidates) {
+      const pmStart = Number((spanEl as HTMLElement).dataset.pmStart);
+      const pmEnd = Number((spanEl as HTMLElement).dataset.pmEnd);
+      if (probePos >= pmStart && probePos <= pmEnd && spanEl.firstChild?.nodeType === Node.TEXT_NODE) {
+        const textNode = spanEl.firstChild as Text;
+        const charIndex = Math.min(probePos - pmStart, textNode.length);
+        const rangeObj = document.createRange();
+        rangeObj.setStart(textNode, charIndex);
+        rangeObj.setEnd(textNode, charIndex);
+        if (typeof rangeObj.getBoundingClientRect !== 'function') {
+          continue;
+        }
+        const rangeRect = rangeObj.getBoundingClientRect();
+        if (pageRect) {
+          domCaretX = (rangeRect.left - pageRect.left) / zoom;
+          domCaretY = (rangeRect.top - pageRect.top) / zoom;
+          resolved = true;
+          break;
+        }
+      }
+    }
+    if (resolved) break;
+  }
 
   // If we found a DOM caret position, prefer it to avoid residual drift
   if (includeDomFallback && domCaretX != null && domCaretY != null) {