Text Editor - Slots and Contexts
Reference for the editor parts and their Vue context accessors.
#Import
import { TextEditor, useTextEditorContext, useBlockMenuContext, useMentionMenuContext, useTableControlsContext } from '@primeui/vue-texteditor';#Parts
The host mounts the visible UI; each part renders an empty surface and exposes its commands, state, and request data through a matching context accessor. A part turns on its feature when it is present in the tree.
| Part | Surface |
|---|---|
TextEditor.Root | Editor container; owns document, commands, and state |
TextEditor.Toolbar | Static toolbar surface |
TextEditor.Content | The editable region |
TextEditor.ContextToolbar | Selection-anchored floating toolbar |
TextEditor.ContextToolbarMore | Overflow panel of the context toolbar |
TextEditor.BlockControls | Block-mode hover bar with add and drag handles |
TextEditor.BlockMenu / TextEditor.BlockSubmenu | Per-block options menu and its nested submenu |
TextEditor.SlashMenu | Slash-command popover |
TextEditor.MentionMenu | @-mention popover |
TextEditor.ImageUpload / TextEditor.DocumentUpload | Upload overlay, with Dropzone and Progress slots |
TextEditor.TableControls | Floating table add-row and add-column controls |
TextEditor.TableColumnMenu / RowMenu / CellMenu | Column, row, and cell action menus and their submenus |
TextEditor.Navigator | Heading-outline minimap, with Trigger and Menu parts |
#Context Hooks
Call a context hook inside a widget rendered under the matching part. The hook returns the part's context object and throws if it runs outside that part, so a misplaced widget fails on mount rather than rendering silently broken.
| Hook | Render inside | Main fields |
|---|---|---|
useTextEditorContext() | TextEditor.Root (and its toolbars) | commands, state, pluginCommands, headings, disabled, readonly, the value formats (getHTML, getJSON, getBlocks, getText, setValue) |
useContextToolbarContext() | TextEditor.ContextToolbar | commands, state, moreActive, toggleMore, setMoreTrigger, moreTrigger, dismiss |
useBlockControlsContext() | TextEditor.BlockControls | index, blockType, addBlock, onDragStart, onDragEnd, onDragHandleClick |
useBlockMenuContext() | TextEditor.BlockMenu | blockIndex, blockType, commands, state, submenu, dismiss |
useSlashMenuContext() | TextEditor.SlashMenu | commands, state, filterText, position, dismiss |
useMentionMenuContext<T>() | TextEditor.MentionMenu | items, commands, filterText, position, dismiss |
useUploadContext() | TextEditor.ImageUpload or TextEditor.DocumentUpload | kind, uploads, selectFiles, onDrop, dismiss |
useTableControlsContext() | TextEditor.TableControls | position, commands (addRow, addColumn) |
useTableColumnMenuContext() | TextEditor.TableColumnMenu | colIndex, colCount, commands, submenu, dismiss |
useTableRowMenuContext() | TextEditor.TableRowMenu | rowIndex, rowCount, commands, submenu, dismiss |
useTableCellMenuContext() | TextEditor.TableCellMenu | isMultiCellSelected, isCellMerged, commands, submenu, dismiss |
useNavigatorContext() | TextEditor.Navigator | headings, activeIndex, menuOpen, openMenu, closeMenu, scrollTo |
The useMentionMenuContext<T>() hook is generic over the item type. Pass the candidate shape so items and commands.select(item) come back typed.
#Reading Context Values
A context object groups its reactive fields as Vue Refs alongside plain methods. Read a reactive field through .value; call a method directly.
<!-- BlockOptions.vue -->
<script setup lang="ts">
import { useBlockMenuContext } from '@primeui/vue-texteditor';
const { blockType, commands, dismiss } = useBlockMenuContext();
</script>
<template>
<button
@click="
commands.duplicate();
dismiss();
"
>
Duplicate {{ blockType }}
</button>
</template>In script logic, the same fields are read through .value:
import { computed } from 'vue';
import { useBlockMenuContext } from '@primeui/vue-texteditor';
const { blockType } = useBlockMenuContext();
const isHeading = computed(() => blockType.value.startsWith('heading'));#Slot Props or Context
Both patterns reach the same data. Use slot props when the widget is local to the page:
<TextEditor.BlockMenu v-slot="{ commands, dismiss }">
<button @click="commands.duplicate(); dismiss()">Duplicate</button>
</TextEditor.BlockMenu>Use a context hook when the widget is a reusable component, so the authored tree stays short:
<TextEditor.BlockMenu>
<BlockOptions />
</TextEditor.BlockMenu>