Text Editor - Uppercase Plugin

The minimal plugin, a single command that uppercases the selection.

#Usage

import { TextEditor } from '@primeui/vue-texteditor';
import { uppercasePlugin } from './uppercase-plugin';
<TextEditor.Root v-model="value" :plugins="[uppercasePlugin]">
    <TextEditor.Toolbar v-slot="{ plugins }">
        <button @click="plugins.uppercase?.toUpperCase()">Uppercase</button>
    </TextEditor.Toolbar>
    <TextEditor.Content />
</TextEditor.Root>

The Uppercase plugin is the smallest possible plugin: a single command that uppercases the current selection. It uses only the high-level context helpers (getSelectedText, replaceSelection) with no ProseMirror or schema access, which makes it a useful starting point for a new plugin.

#Commands

CommandSignatureDescription
toUpperCase() => voidUppercase the current selection

#Plugin Definition

The whole plugin:

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

export const uppercasePlugin = defineTextEditorPlugin('uppercase', ({ getSelectedText, replaceSelection }) => ({
    commands: {
        toUpperCase: () => {
            const text = getSelectedText();

            if (text) {
                replaceSelection(text.toUpperCase());
            }
        }
    }
}));

#Example

Select some text and click Uppercase.

Loading Demo...