Text Editor - Context Toolbar | PrimeUI Pro

#Usage

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

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

Use the context toolbar for a floating surface that opens over the caret on text selection for inline formatting. TextEditor.ContextToolbar opens on selection and positions itself; the host supplies the widget inside it. That widget reads commands and state from useContextToolbarContext().

Under the hood the toolbar opens on context-toolbar-request from the runtime and owns click-outside dismissal.

The "More" overflow surface is its own sub-part, <TextEditor.ContextToolbarMore>, rather than a named slot. Mount it inside the parent slot, and it anchors itself to the host's "More" button by reading moreTrigger from context. The widget rendering that button publishes its DOM ref via setMoreTrigger(el) from the same context.

<TextEditor.ContextToolbar>
    <ContextToolbar />
    <TextEditor.ContextToolbarMore>
        <ContextToolbarMore />
    </TextEditor.ContextToolbarMore>
</TextEditor.ContextToolbar>

Widgets inside <TextEditor.ContextToolbar> and <TextEditor.ContextToolbarMore> share the same context. useContextToolbarContext() exposes commands, state, moreActive, toggleMore(), setMoreTrigger(el), moreTrigger, and dismiss(). Plugin commands are reachable via useTextEditorContext().pluginCommands.

<!-- ContextToolbar.vue -->
<script setup lang="ts">
import { onMounted, useTemplateRef } from 'vue';
import { useContextToolbarContext } from '@primeui/vue-texteditor';

const { commands, state, moreActive, toggleMore, setMoreTrigger } = useContextToolbarContext();
const moreRef = useTemplateRef<HTMLButtonElement>('moreRef');

onMounted(() => setMoreTrigger(moreRef.value));
</script>

<template>
    <button @click="commands.bold()" :aria-pressed="state.bold">B</button>
    <button @click="commands.italic()" :aria-pressed="state.italic">I</button>
    <button ref="moreRef" @click="toggleMore" :aria-pressed="moreActive">⋯</button>
</template>

#Alternative: inline with slot props

<TextEditor.ContextToolbar> also exposes { commands, state, plugins, moreActive, toggleMore, setMoreTrigger, dismiss } on its default slot.

<TextEditor.ContextToolbar v-slot="{ commands, state, toggleMore, setMoreTrigger }">
    <button @click="commands.bold()" :aria-pressed="state.bold">B</button>
    <button :ref="setMoreTrigger" @click="toggleMore">⋯</button>
</TextEditor.ContextToolbar>

Text Editor - Context Toolbar

#Usage

#Alternative: inline with slot props

#Example

#Basic

#Advanced

#Complete

#API