Text Editor - Complete

A complete block editor that wires together every block-mode part in a single instance.

#Usage

import { TextEditor } from '@primeui/vue-texteditor';
<TextEditor.Root v-model="blocks" mode="block">
    <TextEditor.Content />
    <TextEditor.BlockControls>
        <BlockControls />
    </TextEditor.BlockControls>
    <TextEditor.BlockMenu>
        <BlockMenu />
    </TextEditor.BlockMenu>
    <TextEditor.SlashMenu>
        <SlashMenu />
    </TextEditor.SlashMenu>
    <TextEditor.ContextToolbar>
        <ContextToolbar />
    </TextEditor.ContextToolbar>
</TextEditor.Root>

Use this complete editor as a reference for wiring every block-mode part into one instance and seeing how they interact in a realistic document. The editor runs in mode="block" with the block hover bar, drag-handle menu, slash menu, and floating context toolbar all mounted on the same root. The demo below adds the upload, mention, table, and navigator parts on top.

#Example

The editor combines every block-mode part: <TextEditor.BlockControls>, <TextEditor.BlockMenu> with <TextEditor.BlockSubmenu>, <TextEditor.ContextToolbar> with <TextEditor.ContextToolbarMore>, <TextEditor.SlashMenu>, <TextEditor.MentionMenu>, <TextEditor.ImageUpload> and <TextEditor.DocumentUpload> (each with their Dropzone and Progress sub-parts), the three table menus, and the Navigator triple.

The drag-handle menu (<TextEditor.BlockMenu>) carries the per-block actions — duplicate, copy, turn-into, color, and delete — driven by TextEditorBlockMenuCommands. Inline AI assistance runs through the ContextToolbar: select text, trigger the AI action, and the rewritten result streams back into the selection. See the AI Improve plugin for how that command is defined, and the Block Menu and Slash Commands pages for the individual surfaces this demo combines.

Loading Demo...

#API

Every part in this demo carries its own context — useBlockControlsContext(), useBlockMenuContext(), useSlashMenuContext(), useContextToolbarContext(), useMentionMenuContext(), useUploadContext(), and the table and navigator contexts — all rooted on the shared mode="block" instance. Slots and Contexts is the single map of how these outlets relate; API holds the per-context reference.