useTypography

useTypography() is the text-property control composable for text editing panels.

It exposes:

• font family
• font weight
• font size
• formatting state
• missing-font status
• helpers for changing family, weight, alignment, and decorations

Usage

import { useTypography } from '@open-pencil/vue'

const typography = useTypography()

Basic example

const {
  fontFamily,
  fontWeight,
  fontSize,
  activeFormatting,
  setFamily,
  setWeight,
  setAlign,
} = useTypography()

Practical examples

Load and switch a font family

const typography = useTypography({
  loadFont: async (family, style) => {
    await myFontLoader(family, style)
  },
})

Toggle formatting

typography.toggleBold()
typography.toggleItalic()
typography.toggleDecoration('UNDERLINE')

Related APIs

• useTextEdit
• useSelectionState