export function InsertDropdownMenu()

in src/Frontend/src/components/plate-ui/insert-dropdown-menu.tsx [129:222]


export function InsertDropdownMenu(props: DropdownMenuProps) {
    const editor = useEditorRef();
    const openState = useOpenState();

    return (
        <DropdownMenu modal={false} {...openState} {...props}>
            <DropdownMenuTrigger asChild>
                <ToolbarButton pressed={openState.open} tooltip='Insert' isDropdown>
                    <Icons.add />
                </ToolbarButton>
            </DropdownMenuTrigger>

            <DropdownMenuContent
                align='start'
                className='flex max-h-[500px] min-w-0 flex-col gap-0.5 overflow-y-auto'
            >
                {items.map(({ items: nestedItems, label }, index) => (
                    <React.Fragment key={label}>
                        {index !== 0 && <DropdownMenuSeparator />}

                        <DropdownMenuLabel>{label}</DropdownMenuLabel>
                        {nestedItems.map(
                            ({ value: type, label: itemLabel, icon: Icon }) => (
                                <DropdownMenuItem
                                    key={type}
                                    className='min-w-[180px]'
                                    onSelect={async () => {
                                        switch (type) {
                                            // case ELEMENT_CODE_BLOCK: {
                                            //   insertEmptyCodeBlock(editor);
                                            //
                                            //   break;
                                            // }
                                            // case ELEMENT_IMAGE: {
                                            //   await insertMedia(editor, { type: ELEMENT_IMAGE });
                                            //
                                            //   break;
                                            // }
                                            // case ELEMENT_MEDIA_EMBED: {
                                            //   await insertMedia(editor, {
                                            //     type: ELEMENT_MEDIA_EMBED,
                                            //   });
                                            //
                                            //   break;
                                            // }
                                            // case 'ul':
                                            // case 'ol': {
                                            //   insertEmptyElement(editor, ELEMENT_PARAGRAPH, {
                                            //     select: true,
                                            //     nextBlock: true,
                                            //   });
                                            //
                                            //   if (settingsStore.get.checkedId(KEY_LIST_STYLE_TYPE)) {
                                            //     toggleIndentList(editor, {
                                            //       listStyleType: type === 'ul' ? 'disc' : 'decimal',
                                            //     });
                                            //   } else if (settingsStore.get.checkedId('list')) {
                                            //     toggleList(editor, { type });
                                            //   }
                                            //
                                            //   break;
                                            // }
                                            // case ELEMENT_TABLE: {
                                            //   insertTable(editor);
                                            //
                                            //   break;
                                            // }
                                            // case ELEMENT_LINK: {
                                            //   triggerFloatingLink(editor, { focused: true });
                                            //
                                            //   break;
                                            // }
                                            default: {
                                                insertEmptyElement(editor, type, {
                                                    select: true,
                                                    nextBlock: true,
                                                });
                                            }
                                        }

                                        focusEditor(editor);
                                    }}
                                >
                                    <Icon className='mr-2 size-5' />
                                    {itemLabel}
                                </DropdownMenuItem>
                            )
                        )}
                    </React.Fragment>
                ))}
            </DropdownMenuContent>
        </DropdownMenu>
    );
}