TextMenu

A block of text with the context menu that belongs to it: Copy for what is selected inside it, and Select all for the whole of it. Anywhere text can be selected, a right-click should offer to copy it, and an app that draws every menu itself offers nothing without one of these.

import { TextMenu } from '@basmilius/react-ui';

import { Quote } from 'lucide-react';
import { ContextMenu, Icon, TextMenu } from '@basmilius/react-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>
    );
}

The selection is read when the menu opens, and only a selection inside the block counts. Cmd+A (Ctrl+A elsewhere) selects the block's text while the block has the focus, instead of the whole page. items adds rows of your own under a separator; they are ContextMenu.Items.

Props

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