TextMenu

A block of text with a context menu: Copy for the selection inside it, and Select all. Anywhere text can be selected, a right-click should offer to copy it.

import { TextMenu } from '@adecore/ui';

import { Quote } from 'lucide-react';
import { ContextMenu, Icon, TextMenu } from '@adecore/ui';

export default function TextMenuDemo() {
    return (
        <TextMenu
            className="max-w-md rounded-lg border border-border bg-surface p-4 text-sm text-text select-text"
            items={
                <ContextMenu.Item>
                    <Icon icon={Quote} size={14} /> Quote in a reply
                </ContextMenu.Item>
            }
        >
            Select a few words and right-click them. The menu offers to copy what is selected inside this block, and to select all of it, on Cmd+A as well while
            the block has the focus.
        </TextMenu>
    );
}

Without a selection inside the block, Copy is disabled. While the block has focus, Cmd+A (Ctrl+A elsewhere) selects only its text. items adds ContextMenu.Items of your own under a separator.

Props

TextMenu renders a <div> and takes its props, plus items?: ReactNode. TextMenuProps is an exported type.