useSelectionTextStyle
Returns the text style of the current selection and the functions for changing it: the data source for a text style toolbar. See Building a PDF application for a toolbar built with it.
const { isApplicable, fontSize, textColor, fontFamily, isBold, isItalic, ... } =
useSelectionTextStyle()isApplicable is true when the selection holds text that can be styled: a text range or caret inside a paragraph, or whole selected paragraphs; hide the toolbar otherwise. Every other field is a selection prop: a { value, set } pair where value holds the common value across the selection (undefined when the selected pieces disagree) and set applies a new value to the entire selection.
| Prop | Value | Notes |
|---|---|---|
fontSize | number, text space units | Setting it also sets a proportional line height when the whole paragraph text is selected. |
textColor | ColorString | set accepts common CSS color formats and normalizes them. |
fontFamily | font family id | Also carries options: the available families, regular (always available) and extracted (from the document, possibly missing characters unused in it). |
isBold | boolean | |
isItalic | boolean | |
scriptType | 'super', 'sub', or null | set takes ScriptProps (below), or null to return the text to the normal baseline. |
textAlign | 'left', 'center', or 'right' | Applies to the whole paragraph. |
lineHeight | number, text space units | Applies to the whole paragraph. |
letterSpacing | number, text space units | Setting 0 restores the default spacing. |
textIndent | { canIncrease, canDecrease, add } | add(delta) shifts the indent of the selected paragraphs. |
Text space is the paragraph's own coordinate system; for a paragraph that isn't scaled, its units equal user-space units (see useSetParagraphProps). To set paragraph properties by id rather than through the selection, use that hook too.
ScriptProps is { type, fontSizeFraction?, verticalAlignFraction? }:
| Field | Meaning |
|---|---|
type | 'super' for superscript or 'sub' for subscript. |
fontSizeFraction | The script font size as a fraction of the surrounding font size, such as 0.6. Defaults by type when omitted. |
verticalAlignFraction | The baseline shift as a fraction of the surrounding font size: positive raises the text, negative lowers it. Defaults by type when omitted. |
Example
import { useSelectionTextStyle } from '@sdk-pdf/react'
function FontSizeInput() {
const { isApplicable, fontSize } = useSelectionTextStyle()
if (!isApplicable) return null
return (
<input
type="number"
// An empty value means the selection mixes different font sizes.
value={fontSize.value ?? ''}
onChange={(event) => fontSize.set(Number(event.currentTarget.value))}
/>
)
}After acting on the selection from a toolbar, return the focus with useFocusSelection.