diff --git a/packages/layout-engine/contracts/src/index.ts b/packages/layout-engine/contracts/src/index.ts index e7a7d1b2f3..cb0b9661f9 100644 --- a/packages/layout-engine/contracts/src/index.ts +++ b/packages/layout-engine/contracts/src/index.ts @@ -1168,6 +1168,7 @@ export type ParagraphBorders = { bottom?: ParagraphBorder; left?: ParagraphBorder; between?: ParagraphBorder; + bar?: ParagraphBorder; }; export type ParagraphShading = { diff --git a/packages/layout-engine/painters/dom/src/features/paragraph-borders/border-layer.ts b/packages/layout-engine/painters/dom/src/features/paragraph-borders/border-layer.ts index 67549b624a..8dea45783a 100644 --- a/packages/layout-engine/painters/dom/src/features/paragraph-borders/border-layer.ts +++ b/packages/layout-engine/painters/dom/src/features/paragraph-borders/border-layer.ts @@ -214,6 +214,11 @@ export const applyParagraphBorderStyles = ( if (showBetweenBorder && borders.between) { setBorderSideStyle(element, 'bottom', borders.between); } + + // Bar border: decorative vertical line on the left edge of the paragraph (OOXML ยง17.3.1.4) + if (borders.bar && borders.bar.style !== 'none') { + setBorderSideStyle(element, 'left', borders.bar); + } }; const setBorderSideStyle = (element: HTMLElement, side: CssBorderSide, border: ParagraphBorder): void => { diff --git a/packages/layout-engine/painters/dom/src/paragraph-hash-utils.ts b/packages/layout-engine/painters/dom/src/paragraph-hash-utils.ts index 55870ed7e9..204d71cc34 100644 --- a/packages/layout-engine/painters/dom/src/paragraph-hash-utils.ts +++ b/packages/layout-engine/painters/dom/src/paragraph-hash-utils.ts @@ -30,6 +30,7 @@ export const hashParagraphBorders = (borders: ParagraphBorders): string => { if (borders.bottom) parts.push(`b:[${hashParagraphBorder(borders.bottom)}]`); if (borders.left) parts.push(`l:[${hashParagraphBorder(borders.left)}]`); if (borders.between) parts.push(`bw:[${hashParagraphBorder(borders.between)}]`); + if (borders.bar) parts.push(`bar:[${hashParagraphBorder(borders.bar)}]`); return parts.join(';'); }; diff --git a/packages/layout-engine/pm-adapter/src/attributes/borders.ts b/packages/layout-engine/pm-adapter/src/attributes/borders.ts index c1a78ba32f..7e0d85b128 100644 --- a/packages/layout-engine/pm-adapter/src/attributes/borders.ts +++ b/packages/layout-engine/pm-adapter/src/attributes/borders.ts @@ -324,7 +324,14 @@ export function extractCellPadding(cellAttrs: Record): BoxSpaci export const normalizeParagraphBorders = (value: unknown): ParagraphAttrs['borders'] | undefined => { if (!value || typeof value !== 'object') return undefined; const source = value as Record; - const sides: Array<'top' | 'right' | 'bottom' | 'left' | 'between'> = ['top', 'right', 'bottom', 'left', 'between']; + const sides: Array<'top' | 'right' | 'bottom' | 'left' | 'between' | 'bar'> = [ + 'top', + 'right', + 'bottom', + 'left', + 'between', + 'bar', + ]; const borders: ParagraphAttrs['borders'] = {}; sides.forEach((side) => {