Text Editor - Undo/Redo

#Usage

import { TextEditor } from '@primeui/vue-texteditor';

<TextEditor.Root v-model="value">
    <TextEditor.Toolbar>
        <HistoryButtons />
    </TextEditor.Toolbar>
    <TextEditor.Content />
</TextEditor.Root>

Undo and redo step through the editor's history of content changes. The runtime owns the history stack; a toolbar widget reads the undo / redo commands and their availability flags from useTextEditorContext().

#Commands

commands.undo() reverts the most recent change and commands.redo() reapplies a reverted change. Gate each trigger on its availability flag — disable undo when !state.canUndo and redo when !state.canRedo — so the controls track the current position in the history stack.

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

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

<template>
    <button @click="commands.undo()" :disabled="!state.canUndo" aria-label="Undo">↶</button>
    <button @click="commands.redo()" :disabled="!state.canRedo" aria-label="Redo">↷</button>
</template>

#Example

#API

commands.undo(), commands.redo(), state.canUndo, and state.canRedo come from useTextEditorContext(). See API for the full reference.

#Related Docs

• Print
• Navigator
• Static Toolbar
• API