Heading / Text Blocks

This is the Heading extension. It allows you to change text into different heading levels (H1-H5), paragraphs, and other text block formats.

Default Usage

Default usage of the text blocks extension showing all available heading levels, paragraph, div, and pre options.

Vue

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlTextBlocks :editor="editor" />
    </template>
    <template #footer>
      <div>Footer</div>
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import {
    AllExtensions,
    Editor,
    HLTextEditor,
    RTEControlTextBlocks,
    Heading,
  } from '@platform-ui/rte'

  const content = ref()
  const HTML = ref()

  const editor = new Editor({
    content: 'Select text and change the text block format',
    extensions: [Heading, AllExtensions.configure({})],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Custom Options

You can provide custom options to limit which text block formats are available in the dropdown.

Vue

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlTextBlocks :editor="editor" :options="customOptions" />
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import {
    AllExtensions,
    Editor,
    HLTextEditor,
    RTEControlTextBlocks,
    Heading,
  } from '@platform-ui/rte'

  const customOptions = ['Heading1', 'Heading2', 'Heading3', 'Paragraph']

  const editor = new Editor({
    content: 'Select text and choose from custom heading options',
    extensions: [Heading, AllExtensions.configure({})],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

All Heading Levels

Example showing all five heading levels and a paragraph.

Vue

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlTextBlocks :editor="editor" />
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import {
    AllExtensions,
    Editor,
    HLTextEditor,
    RTEControlTextBlocks,
    Heading,
  } from '@platform-ui/rte'

  const editor = new Editor({
    content: `
      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
      <h5>Heading 5</h5>
      <p>Regular Paragraph</p>
    `,
    extensions: [Heading, AllExtensions.configure({})],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Commands

// Toggle heading
editor?.chain().focus().toggleHeading({ level: 1 }).run()

// Set paragraph
editor?.chain().focus().setCustomParagraph().run()

// Set div tag (Body content)
editor?.chain().focus().setDivTag().run()

// Set pre tag (Code block)
editor?.chain().focus().setPreTag().run()

// Unset font size (useful when switching to headings)
editor?.chain().focus().unsetFontSize().run()

Imports

import {
  AllExtensions,
  Editor,
  HLTextEditor,
  RTEControlTextBlocks,
  Heading,
} from '@platform-ui/rte'

Props

Prop	Type	Default	Description
editor *	Editor	-	The editor instance
options	string[]	[]	Array of text block options to display (see below)
language	Language	'en-US'	The language for localization
to	string | HTMLElement	undefined	Target element for dropdown portal
ariaLabel	string	null	Accessibility label

Available Options

The options prop accepts an array with any of the following values:

• 'Heading1' - Heading level 1
• 'Heading2' - Heading level 2
• 'Heading3' - Heading level 3
• 'Heading4' - Heading level 4
• 'Heading5' - Heading level 5
• 'Paragraph' - Regular paragraph
• 'Div' - Div tag (Body content)
• 'Pre' - Pre tag (Code block)

If no options are provided, all text block types will be available.

Slots

Slot	Description	Default
icon	The icon to display	FormatSizeFillIcon