Tab-stop columns (left + right-aligned tabs) wrap/position incorrectly vs Word

[jmcopeland]

Summary

Two-column layouts built with tab stops — a left tab plus a right-aligned tab — render with incorrect wrapping/column positioning compared to Word and Word Online. This is the standard Word technique for signature blocks in contracts, so it shows up frequently in real legal documents.

Version: @extend-ai/react-docx@0.8.0

Repro

Minimal .docx (isolates the structure): https://github.com/jmcopeland/react-docx/raw/repro/tab-stop-column-wrap/repros/tab-stop-column-wrap.docx

Each paragraph declares two tab stops and jumps between them with <w:tab/> runs:

<w:tabs>
  <w:tab w:val="left"  w:pos="5760"/>   <!-- 4.0" left column -->
  <w:tab w:val="right" w:pos="9240"/>   <!-- ~6.4" (right margin), RIGHT-aligned -->
</w:tabs>

The header paragraph run sequence:

"Client A" [TAB] "Company B Legal Name LLC United States " "On behalf of itself and its affiliates" [TAB] "On behalf of itself and its affiliates"

…followed by an underline-rule row ("____" [TAB] "____") and a "Name:" [TAB] "Name:" row using the same tab stops.

Steps

1. Open the .docx in Word / Word Online.
2. Open the same .docx in the extend viewer (DocxEditorViewer, read-only).
3. Compare the signature block layout.

Expected (Word)

The tab stops form two columns: the left party at the page's left margin, the right party's text in the column beginning at the 4" left tab and wrapping within that column, with the final tabbed segment right-aligned at the right tab (~right margin). The underline rule and Name: row align to the same two columns.

Actual (extend)

The tabbed content wraps/positions incorrectly — the right column's text breaks at the wrong width and the columns don't line up with Word's layout. (Observed in a real, sanitized McKinsey-form contract: Word Online renders the signature block correctly; the extend renderer wraps it wrongly. The minimal .docx above reproduces the same tab-stop structure.)

Notes

• No tables, text boxes, or multi-column sections are involved — it's purely tab-stop-driven columns, and specifically involves the w:val="right" (right-aligned) tab stop and wrapping of over-long tabbed content.
• Same layout-engine class as the hanging-indent-at-page-break issue (DocxEditorViewer: numbered-list hanging indent dropped when a list item lands at a page boundary #10 / PR Fix hanging-indent list marker overlap + lost indent on page-split paragraphs #11). Happy to help with a fix or a renderToStaticMarkup regression test if useful.

[jmcopeland]

Root-cause analysis

Traced this to the tab layout in packages/react-viewer/src/editor.tsx. Tab-stop alignment is modeled (ParagraphTabStop.alignment: "left" | "center" | "right" | ...), and there's a working right/center renderer — buildAnchoredTabZones(2|3) lays the paragraph out as a CSS grid whose columns are anchored at the tab-stop positions (right zone right-aligned, etc.).

The problem is the gate that decides whether a paragraph uses that anchored renderer, paragraphAnchoredTabLayout(...):

const hasLeft   = tabStops.some(t => t.alignment === "left");
const hasCenter = tabStops.some(t => t.alignment === "center");
const hasRight  = tabStops.some(t => t.alignment === "right");

if (hasLeft && (hasCenter || hasRight)) {
  return "none";   // <-- signature blocks hit this
}

A signature block uses a left tab and a right tab together (left/second column at the left tab, a right-aligned trailer at the right tab), so it returns "none" and falls back to the plain tab path. That path resolves every tab as left-aligned (resolveNextTabStopPx just advances the cursor to the next stop position), so the w:val="right" tab is treated as a left tab and the tabbed content wraps/positions wrong vs Word.

Minimal repro (mirrors a real contract signature block): https://github.com/jmcopeland/react-docx/raw/repro/tab-stop-column-wrap/repros/tab-stop-column-wrap.docx — one paragraph with <w:tab w:val="left" w:pos="5760"/> + <w:tab w:val="right" w:pos="9240"/> and runs A [tab] B… [tab] C.

Suggested fix

Add a "left-right" anchored mode: when hasLeft && hasRight && !hasCenter (tabCount ≥ 2), render a 3-zone grid analogous to the existing center-right block — zone 0 at the left margin, zone 1 left-aligned at the left tab, zone 2 right-aligned at the right tab. This reuses buildAnchoredTabZones(3) and the same grid-template approach; it just anchors zone 1 to the left-tab position instead of centering it.

I'm taking a run at this on my fork and will open a PR if it pans out.