README.md

Formatting options

Paragraph formatting

Paragraph styles may be applied via different ways;

// As a prop:
<Paragraph alignment="center" />

// As a style:
const style = api.styles.add({
	type: 'paragraph',
	paragraphProperties: {
		alignment: 'center',
	},
});
<Paragraph style={style} />;

Every style property, and every property of every style property, is optional;

{
	alignment?: 'left' | 'right' | 'center' | 'both';
	style?: string;
	spacing?: {
		before?: TwentiethPoint;
		after?: TwentiethPoint;
		line?: TwentiethPoint;
		lineRule?: 'atLeast' | 'exactly' | 'auto';
		afterAutoSpacing?: boolean;
		beforeAutoSpacing?: boolean;
	};
	indentation?: {
		left?: TwentiethPoint;
		leftChars?: number;
		right?: TwentiethPoint;
		rightChars?: number;
		hanging?: TwentiethPoint;
		hangingChars?: number;
		firstLine?: TwentiethPoint;
		firstLineChars?: number;
	};
}

Text formatting

// As a prop:
<Text isBold />

Every style property is optional again:

{
	verticalAlign?: 'baseline' | 'subscript' | 'superscript';
	isBold?: boolean;
	isItalic?: boolean;
	isSmallCaps?: boolean;
	language?: string;
	fontSize?: HalfPoint;
}

Paragraph formatting options may be merged with text formatting options. When used directly on a component (ie. not via a style) the formatting only applies to the paragraph pilcrow ("¶") sign. In MS Word, the text styling options merged into a paragraph style definition do apply to the paragraph text -- but may still be overriden with dedicated text formatting options.

<Paragraph isBold>Text not shown as bold, but the paragraph's pilcrow is.</Paragraph>

// As a style:
const style = api.styles.add({
	type: 'paragraph',
	textProperties: {
		isItalic: true,
	},
	paragraphProperties: {
		isBold: true,
	},
});
<Paragraph style={style}>Text is shown as bold and italic</Paragraph>;