Text Editor - Bold

Toggle bold formatting on the current selection with the bold command and pressed state.

#Usage

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

Bold emphasizes a word or phrase. A toolbar button toggles the mark on the selection with commands.bold() and reflects pressed state with state.bold, both from useTextEditorContext().

#Command

commands.bold() toggles the mark on the selected text. With a collapsed selection it sets the typing mark, so the next characters typed come out bold.

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

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

<template>
    <button @click="commands.bold()" :aria-pressed="state.bold">B</button>
</template>

#Example

Loading Demo...

#API

commands.bold() and state.bold come from useTextEditorContext(). The same mark is reachable from the context toolbar and the block menu. See Slots and Contexts.