ToolbarOptions

ToolbarOptions controls toolbar menu data and action parameters.

interface ToolbarOptions {
  fontFamilies?: ToolbarFontFamilyOption[]
  fontSizes?: string[]
  lineHeights?: string[]
  colors?: string[]
  highlights?: string[]
  codeBlockLanguages?: ToolbarCodeBlockLanguageOption[]
  horizontalRules?: ToolbarHorizontalRuleOption[]
  tableGrid?: ToolbarTableGridOptions
  markdown?: ToolbarMarkdownOptions
  print?: ToolbarPrintOptions
}

Fonts

const toolbarOptions: ToolbarOptions = {
  fontFamilies: [
    { label: 'Default', value: '' },
    { label: 'PingFang', value: 'PingFang SC' },
    { label: 'LXGW WenKai', value: '"LXGW WenKai"' },
  ],
  fontSizes: ['', '12px', '14px', '16px', '18px', '24px', '32px'],
  lineHeights: ['', '1', '1.5', '1.75', '2'],
}

Palettes

const toolbarOptions: ToolbarOptions = {
  colors: ['#111827', '#2563eb', '#16a34a', '#dc2626'],
  highlights: ['#fef3c7', '#dcfce7', '#dbeafe'],
}

Code Block Languages

The default menu includes 17 languages: Plain Text, JavaScript, TypeScript, HTML / Vue, CSS, JSON, Python, Java, C, C++, C#, Go, Rust, Bash, SQL, YAML, and Markdown. The toolbar menu and contextual code block menu share this configuration.

Providing codeBlockLanguages replaces the default list. Each value must name a language registered in the active lowlight instance. Known languages display their matching icon; entries without a built-in icon use the generic code icon.

const toolbarOptions: ToolbarOptions = {
  codeBlockLanguages: [
    { label: 'Plain Text', value: 'plaintext' },
    { label: 'TypeScript', value: 'typescript' },
    { label: 'Python', value: 'python' },
  ],
}

Divider Styles

horizontalRules controls which styles appear in the Divider dropdown. Built-in styles are solid, thick, dashed, and dotted.

const toolbarOptions: ToolbarOptions = {
  horizontalRules: [
    { label: 'Solid', value: 'solid' },
    { label: 'Thick', value: 'thick' },
    { label: 'Dashed', value: 'dashed' },
    { label: 'Dotted', value: 'dotted' },
  ],
}

Divider styles are preserved in HTML/JSON, for example <hr data-hr-variant="dashed">. Standard Markdown has no divider style syntax, so Markdown export falls back to a plain ---.

Table, Markdown, and Print

const toolbarOptions: ToolbarOptions = {
  tableGrid: { maxRows: 12, maxCols: 12 },
  markdown: {
    importAccept: '.md,.markdown,text/markdown,text/plain',
    exportFilename: () => `doc-${Date.now()}.md`,
  },
  print: {
    title: 'Print document',
    cleanupDelay: 500,
  },
}