Text Editor - Slash Commands

Type "/" to open a filterable command menu for inserting headings, lists, images, and more.

#Usage

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

Use slash commands to open a filterable command palette on / in block mode for inserting headings, lists, images, and more. Mounting the part enables slash detection in the runtime. Widgets inside it read the filtered commands from useSlashMenuContext().

Its single prop, placeholder, sets the text shown inside the focused block while the menu is open.

The part owns its filtering loop. As the user types after /, items whose textContent doesn't include the filter text are hidden via [hidden], and the popover collapses when nothing remains visible. The slash popover is an ARIA combobox: its container is a role="listbox", so render command entries as <button role="option"> (a plain <button> also works) — the popover picks them up and wires arrow-key navigation and aria-activedescendant.

<TextEditor.SlashMenu placeholder="Type to search">
    <SlashMenu />
</TextEditor.SlashMenu>

useSlashMenuContext() exposes commands (typed TextEditorSlashMenuCommands), state, filterText, position, and dismiss().

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

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

<template>
    <button
        role="option"
        @click="
            commands.heading(1);
            dismiss();
        "
    >
        Heading 1
    </button>
    <button
        role="option"
        @click="
            commands.bulletList();
            dismiss();
        "
    >
        Bullet list
    </button>
    <button
        role="option"
        @click="
            commands.uploadImages();
            dismiss();
        "
    >
        Image
    </button>
</template>

#Alternative: inline with slot props

The same surface is also available on the default slot as { commands, state, filterText, position, dismiss }.

<TextEditor.SlashMenu placeholder="Type to search" v-slot="{ commands, dismiss }">
    <button role="option" @click="commands.heading(1); dismiss()">Heading 1</button>
    <button role="option" @click="commands.bulletList(); dismiss()">Bullet list</button>
</TextEditor.SlashMenu>

#Example

Common block types wired through the slash palette.

Loading Demo...

#API

useSlashMenuContext() exposes commands (TextEditorSlashMenuCommands), state, filterText, position, and dismiss. Slots and Contexts places the slash outlet among the block surfaces; API lists the command set.