Compare commits

...

1 Commits

Author SHA1 Message Date
Viktor Renkema 538aea26ac Check ancestorBlocks for tables before applying text alignment 2025-06-24 11:39:00 +02:00
4 changed files with 19 additions and 7 deletions
@@ -9,7 +9,7 @@ import { getBlockTextStyle } from './spacing';
import { getTextAlignment } from './utils'; import { getTextAlignment } from './utils';
export function Heading(props: BlockProps<DocumentBlockHeading>) { export function Heading(props: BlockProps<DocumentBlockHeading>) {
const { block, style, context, ...rest } = props; const { block, style, context, ancestorBlocks, ...rest } = props;
const textStyle = getBlockTextStyle(block); const textStyle = getBlockTextStyle(block);
@@ -43,7 +43,7 @@ export function Heading(props: BlockProps<DocumentBlockHeading>) {
'grid-area-1-1', 'grid-area-1-1',
'z-[1]', 'z-[1]',
'justify-self-start', 'justify-self-start',
getTextAlignment(block.data.align), getTextAlignment(block.data.align, ancestorBlocks),
textStyle.lineHeight, textStyle.lineHeight,
textStyle.marginTop textStyle.marginTop
)} )}
@@ -7,10 +7,10 @@ import { Inlines } from './Inlines';
import { getTextAlignment } from './utils'; import { getTextAlignment } from './utils';
export function Paragraph(props: BlockProps<DocumentBlockParagraph>) { export function Paragraph(props: BlockProps<DocumentBlockParagraph>) {
const { block, style, ...contextProps } = props; const { block, style, ancestorBlocks, ...contextProps } = props;
return ( return (
<p className={tcls(style, getTextAlignment(block.data?.align))}> <p className={tcls(style, getTextAlignment(block.data?.align, ancestorBlocks))}>
<Inlines {...contextProps} nodes={block.nodes} ancestorInlines={[]} /> <Inlines {...contextProps} nodes={block.nodes} ancestorInlines={[]} />
</p> </p>
); );
@@ -128,7 +128,7 @@ export async function RecordColumnValue<Tag extends React.ElementType = 'div'>(
<Blocks <Blocks
tag={Tag} tag={Tag}
document={document} document={document}
ancestorBlocks={[]} ancestorBlocks={[...props.ancestorBlocks, block]}
nodes={fragment.nodes} nodes={fragment.nodes}
style={[ style={[
'blocks', 'blocks',
@@ -1,11 +1,23 @@
import type { ClassValue } from '@/lib/tailwind'; import type { ClassValue } from '@/lib/tailwind';
import { nullIfNever } from '@/lib/typescript'; import { nullIfNever } from '@/lib/typescript';
import { TextAlignment } from '@gitbook/api'; import { type DocumentBlock, TextAlignment } from '@gitbook/api';
/** /**
* Get the tailwind class for a text alignment. * Get the tailwind class for a text alignment.
*/ */
export function getTextAlignment(textAlignment: TextAlignment | undefined): ClassValue { export function getTextAlignment(
textAlignment: TextAlignment | undefined,
ancestorBlocks: DocumentBlock[]
): ClassValue {
// Text nodes within a table will have their alignment governed by columns instead.)
for (let i = ancestorBlocks.length - 1; i >= 0; i--) {
const ancestor = ancestorBlocks[i];
if (ancestor.type === 'table') {
return null;
}
}
// If not inside a table, use the normal alignment logic
switch (textAlignment) { switch (textAlignment) {
case undefined: case undefined:
case TextAlignment.Start: case TextAlignment.Start: