Text Editor - Heading

Apply heading levels 1-6 with the heading command and convert back with the paragraph command.

#Usage

import { TextEditor } from '@primeui/vue-texteditor';
<TextEditor.Root v-model="value">
    <TextEditor.Toolbar>
        <HeadingSelect />
    </TextEditor.Toolbar>
    <TextEditor.Content />
</TextEditor.Root>

Headings break a document into sections and establish hierarchy. A toolbar select drives the level with commands.heading(level) and commands.paragraph(), and reflects the active level from state.heading (a number | null), all from useTextEditorContext().

#Commands

commands.heading(level) applies the matching heading for a level from 1 to 6; calling it again with the active level toggles back to a paragraph. commands.paragraph() converts the block to a normal paragraph.

<!-- HeadingSelect.vue -->
<script setup lang="ts">
import { useTextEditorContext } from '@primeui/vue-texteditor';

const { commands, state } = useTextEditorContext();

function onChange(event: Event) {
    const value = (event.target as HTMLSelectElement).value;
    if (value) {
        commands.heading(Number(value));
    } else {
        commands.paragraph();
    }
}
</script>

<template>
    <select :value="state.heading ?? ''" @change="onChange">
        <option value="">Paragraph</option>
        <option value="1">Heading 1</option>
        <option value="2">Heading 2</option>
        <option value="3">Heading 3</option>
        <option value="4">Heading 4</option>
        <option value="5">Heading 5</option>
        <option value="6">Heading 6</option>
    </select>
</template>

#Example

Loading Demo...

#API

commands.heading(level), commands.paragraph(), and state.heading come from useTextEditorContext(). See Slots and Contexts and API.