Text Editor - Horizontal Rule

Insert a horizontal rule at the cursor with the insertHorizontalRule command.

#Usage

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

A horizontal rule drops a visual divider between sections. A toolbar button invokes commands.insertHorizontalRule() from useTextEditorContext() to insert a rule at the selection.

#Command

commands.insertHorizontalRule() inserts a horizontal rule at the current cursor or selection.

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

const { commands } = useTextEditorContext();
</script>

<template>
    <button @click="commands.insertHorizontalRule()">Divider</button>
</template>

#Example

Loading Demo...

#API

commands.insertHorizontalRule() has no state flag; the trigger is a plain button. See API.