Text Editor - Block Menu

Floating menu for commonly used block operations like duplicate, copy and delete.

#Usage

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

Use the block menu to attach per-block actions such as duplicate, copy, and delete to the drag handle in block mode. The menu opens from the BlockControls drag handle. Widgets inside it read the active block and its actions from useBlockMenuContext().

Pair the menu with <TextEditor.BlockSubmenu> for nested actions such as Turn Into and Color. Both popovers share one submenu controller through the parent context, so opening a submenu key in the parent menu drives the sibling submenu open.

<TextEditor.BlockMenu>
    <BlockMenu />
    <TextEditor.BlockSubmenu>
        <BlockSubmenu />
    </TextEditor.BlockSubmenu>
</TextEditor.BlockMenu>

useBlockMenuContext() exposes blockIndex, blockType, commands (typed TextEditorBlockMenuCommands), state, the shared submenu controller, and dismiss().

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

const { commands, submenu, dismiss } = useBlockMenuContext();
</script>

<template>
    <button
        role="menuitem"
        @click="
            commands.duplicate();
            dismiss();
        "
    >
        Duplicate
    </button>
    <button
        role="menuitem"
        @click="
            commands.copyToClipboard();
            dismiss();
        "
    >
        Copy
    </button>
    <button role="menuitem" @click="submenu.open('turnInto')">Turn into…</button>
    <button
        role="menuitem"
        @click="
            commands.deleteBlock();
            dismiss();
        "
    >
        Delete
    </button>
</template>

<!-- BlockSubmenu.vue — same context, branches on submenu.active -->
<script setup lang="ts">
import { useBlockMenuContext } from '@primeui/vue-texteditor';

const { submenu } = useBlockMenuContext();
</script>

<template>
    <BlockTurnIntoSubmenu v-if="submenu.active === 'turnInto'" />
    <BlockColorSubmenu v-if="submenu.active === 'color'" />
</template>

#Alternative: inline with slot props

<TextEditor.BlockSubmenu> also exposes { activeSubmenu } (and the rest of the block-menu context) on its default slot.

<TextEditor.BlockMenu>
    <BlockMenu />
    <TextEditor.BlockSubmenu v-slot="{ activeSubmenu }">
        <BlockTurnIntoSubmenu v-if="activeSubmenu === 'turnInto'" />
        <BlockColorSubmenu v-if="activeSubmenu === 'color'" />
    </TextEditor.BlockSubmenu>
</TextEditor.BlockMenu>

#Example

Copy, duplicate, and delete, plus submenu support for changing block type and color.

Loading Demo...

#API

useBlockMenuContext() exposes commands (TextEditorBlockMenuCommands), state, the shared submenu controller, and dismiss. Slots and Contexts shows how the menu and submenu outlets pair; API details the command set.