Text Editor - List

Toggle bullet, ordered, and check lists with the list commands and pressed state.

#Usage

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

Lists present items as a bullet, ordered, or check list. Three toolbar toggle buttons invoke commands.bulletList(), commands.orderedList(), and commands.checkList() and reflect pressed state with state.bulletList, state.orderedList, and state.checkList, all from useTextEditorContext().

#Commands

commands.bulletList(), commands.orderedList(), and commands.checkList() each toggle the matching list on the current block; calling a command again on an active list removes it.

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

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

<template>
    <button @click="commands.bulletList()" :aria-pressed="state.bulletList">Bullet</button>
    <button @click="commands.orderedList()" :aria-pressed="state.orderedList">Ordered</button>
    <button @click="commands.checkList()" :aria-pressed="state.checkList">Check</button>
</template>

#Example

Loading Demo...

#API

commands.bulletList(), commands.orderedList(), commands.checkList(), and the matching state flags come from useTextEditorContext(). See Slots and Contexts and API.