export function TurnIntoDropdownMenu()

in src/Frontend/src/components/plate-ui/turn-into-dropdown-menu.tsx [79:158]
71 lines of code
8 McCabe index (conditional complexity)

export function TurnIntoDropdownMenu(props: DropdownMenuProps) {
    const t = useTranslations('text-editor')

    const value: string = useEditorSelector((editor) => {
        if (isCollapsed(editor.selection)) {
            const entry = findNode<TElement>(editor, {
                match: (n) => isBlock(editor, n),
            });

            if (entry) {
                return (
                    items.find((item) => item.value === entry[0].type)?.value ??
          ELEMENT_PARAGRAPH
                );
            }
        }

        return ELEMENT_PARAGRAPH;
    }, []);

    const editor = useEditorRef();
    const openState = useOpenState();

    const selectedItem =
    items.find((item) => item.value === value) ?? defaultItem;
    const { icon: SelectedItemIcon, label: selectedItemLabel } = selectedItem;

    return (
        <DropdownMenu modal={false} {...openState} {...props}>
            <DropdownMenuTrigger asChild>
                <ToolbarButton
                    pressed={openState.open}
                    tooltip={t('heading.size')}
                    isDropdown
                    className='lg:min-w-[130px] dark:text-white'
                >
                    <SelectedItemIcon className='size-5 lg:hidden' />
                    <span className='max-lg:hidden'>{t(selectedItemLabel)}</span>
                </ToolbarButton>
            </DropdownMenuTrigger>

            <DropdownMenuContent align='start' className='min-w-0'>
                <DropdownMenuLabel>{t('heading.size')}</DropdownMenuLabel>

                <DropdownMenuRadioGroup
                    className='flex flex-col gap-0.5'
                    value={value}
                    onValueChange={(type) => {
                        // if (type === 'ul' || type === 'ol') {
                        //   if (settingsStore.get.checkedId(KEY_LIST_STYLE_TYPE)) {
                        //     toggleIndentList(editor, {
                        //       listStyleType: type === 'ul' ? 'disc' : 'decimal',
                        //     });
                        //   } else if (settingsStore.get.checkedId('list')) {
                        //     toggleList(editor, { type });
                        //   }
                        // } else {
                        //   unwrapList(editor);
                        toggleNodeType(editor, { activeType: type });
                        // }

                        collapseSelection(editor);
                        focusEditor(editor);
                    }}
                >
                    {items.map(({ value: itemValue, label, icon: Icon }) => (
                        <DropdownMenuRadioItem
                            key={itemValue}
                            value={itemValue}
                            className='min-w-[180px]'
                        >
                            <Icon className='mr-2 size-5' />
                            {t(label)}
                        </DropdownMenuRadioItem>
                    ))}
                </DropdownMenuRadioGroup>
            </DropdownMenuContent>
        </DropdownMenu>
    );
}