fixed wrong toolbar dropdown rendering

This commit is contained in:
Nikita 2024-12-23 19:02:59 +03:00
parent 8db40cc15c
commit 1255f566b2

View file

@ -13,7 +13,7 @@ import { BlockControls } from '@wordpress/block-editor';
import { createHigherOrderComponent } from '@wordpress/compose';
import { useDispatch } from '@wordpress/data';
import {
ToolbarGroup,
ToolbarDropdownMenu,
DropdownMenu,
MenuGroup,
MenuItem,
@ -78,206 +78,194 @@ function Toolbar() {
}
return (
<ToolbarGroup>
<DropdownMenu
icon={<MindLogoIcon />}
label={__('Mind', '@@text_domain')}
className="mind-toolbar-toggle"
popoverProps={{ className: 'mind-toolbar-dropdown' }}
>
{() => {
return (
<>
<MenuGroup>
<MenuItem
icon={<AIMessage />}
iconPosition="left"
onClick={() => {
openModal();
}}
>
{__('Ask AI', 'mind')}
</MenuItem>
<MenuItem
icon={<AIImproveIcon />}
iconPosition="left"
onClick={() => {
openModal(
__(
'Improve writing language',
'mind'
)
);
}}
>
{__('Improve', 'mind')}
</MenuItem>
<MenuItem
icon={<AIFixSpellingIcon />}
iconPosition="left"
onClick={() => {
openModal(
__(
'Fix spelling and grammar',
'mind'
)
);
}}
>
{__('Fix Spelling & Grammar', 'mind')}
</MenuItem>
<MenuItem
icon={<AIShorterIcon />}
iconPosition="left"
onClick={() => {
openModal(__('Make shorter', 'mind'));
}}
>
{__('Make Shorter', 'mind')}
</MenuItem>
<MenuItem
icon={<AILongerIcon />}
iconPosition="left"
onClick={() => {
openModal(__('Make longer', 'mind'));
}}
>
{__('Make Longer', 'mind')}
</MenuItem>
<MenuItem
icon={<AISummarizeIcon />}
iconPosition="left"
onClick={() => {
openModal(__('Summarize', 'mind'));
}}
>
{__('Summarize', 'mind')}
</MenuItem>
<MenuItem
icon={<AIParaphraseIcon />}
iconPosition="left"
onClick={() => {
openModal(__('Paraphrase', 'mind'));
}}
>
{__('Paraphrase', 'mind')}
</MenuItem>
</MenuGroup>
<MenuGroup>
<DropdownMenu
icon={<AIToneIcon />}
iconPosition="left"
toggleProps={{
children: (
<>
{__('Adjust Tone', 'mind')}
<ArrowRightIcon />
</>
),
}}
popoverProps={{
placement: 'right-end',
className: 'mind-toolbar-dropdown',
}}
className="mind-toolbar-dropdown-toggle"
>
{() => {
return (
<>
<MenuGroup
label={__(
'Select Tone',
'@@text_domain'
)}
>
{TONE.map((data) => (
<MenuItem
key={data[0]}
onClick={() => {
openModal(
sprintf(
// translators: %s - tone.
__(
'Change tone to %s',
'mind'
),
data[0]
)
);
}}
>
<RawHTML>
{wrapEmoji(
data[1]
)}
</RawHTML>
</MenuItem>
))}
</MenuGroup>
</>
);
}}
</DropdownMenu>
<DropdownMenu
icon={<AITranslateIcon />}
iconPosition="left"
toggleProps={{
children: (
<>
{__('Translate', 'mind')}
<ArrowRightIcon />
</>
),
}}
popoverProps={{
placement: 'right-end',
className: 'mind-toolbar-dropdown',
}}
className="mind-toolbar-dropdown-toggle"
>
{() => {
return (
<>
<MenuGroup
label={__(
'Select Language',
'@@text_domain'
)}
>
{LANGUAGE.map((data) => (
<MenuItem
key={data[0]}
onClick={() => {
openModal(
sprintf(
// translators: %s - tone.
__(
'Translate to %s',
'mind'
),
data[0]
)
);
}}
>
<RawHTML>
{wrapEmoji(
data[1]
)}
</RawHTML>
</MenuItem>
))}
</MenuGroup>
</>
);
}}
</DropdownMenu>
</MenuGroup>
</>
);
}}
</DropdownMenu>
</ToolbarGroup>
<ToolbarDropdownMenu
icon={<MindLogoIcon />}
label={__('Mind', '@@text_domain')}
className="mind-toolbar-toggle"
popoverProps={{ className: 'mind-toolbar-dropdown' }}
>
{() => {
return (
<>
<MenuGroup>
<MenuItem
icon={<AIMessage />}
iconPosition="left"
onClick={() => {
openModal();
}}
>
{__('Ask AI', 'mind')}
</MenuItem>
<MenuItem
icon={<AIImproveIcon />}
iconPosition="left"
onClick={() => {
openModal(
__('Improve writing language', 'mind')
);
}}
>
{__('Improve', 'mind')}
</MenuItem>
<MenuItem
icon={<AIFixSpellingIcon />}
iconPosition="left"
onClick={() => {
openModal(
__('Fix spelling and grammar', 'mind')
);
}}
>
{__('Fix Spelling & Grammar', 'mind')}
</MenuItem>
<MenuItem
icon={<AIShorterIcon />}
iconPosition="left"
onClick={() => {
openModal(__('Make shorter', 'mind'));
}}
>
{__('Make Shorter', 'mind')}
</MenuItem>
<MenuItem
icon={<AILongerIcon />}
iconPosition="left"
onClick={() => {
openModal(__('Make longer', 'mind'));
}}
>
{__('Make Longer', 'mind')}
</MenuItem>
<MenuItem
icon={<AISummarizeIcon />}
iconPosition="left"
onClick={() => {
openModal(__('Summarize', 'mind'));
}}
>
{__('Summarize', 'mind')}
</MenuItem>
<MenuItem
icon={<AIParaphraseIcon />}
iconPosition="left"
onClick={() => {
openModal(__('Paraphrase', 'mind'));
}}
>
{__('Paraphrase', 'mind')}
</MenuItem>
</MenuGroup>
<MenuGroup>
<DropdownMenu
icon={<AIToneIcon />}
iconPosition="left"
toggleProps={{
children: (
<>
{__('Adjust Tone', 'mind')}
<ArrowRightIcon />
</>
),
}}
popoverProps={{
placement: 'right-end',
className: 'mind-toolbar-dropdown',
}}
className="mind-toolbar-dropdown-toggle"
>
{() => {
return (
<>
<MenuGroup
label={__(
'Select Tone',
'@@text_domain'
)}
>
{TONE.map((data) => (
<MenuItem
key={data[0]}
onClick={() => {
openModal(
sprintf(
// translators: %s - tone.
__(
'Change tone to %s',
'mind'
),
data[0]
)
);
}}
>
<RawHTML>
{wrapEmoji(data[1])}
</RawHTML>
</MenuItem>
))}
</MenuGroup>
</>
);
}}
</DropdownMenu>
<DropdownMenu
icon={<AITranslateIcon />}
iconPosition="left"
toggleProps={{
children: (
<>
{__('Translate', 'mind')}
<ArrowRightIcon />
</>
),
}}
popoverProps={{
placement: 'right-end',
className: 'mind-toolbar-dropdown',
}}
className="mind-toolbar-dropdown-toggle"
>
{() => {
return (
<>
<MenuGroup
label={__(
'Select Language',
'@@text_domain'
)}
>
{LANGUAGE.map((data) => (
<MenuItem
key={data[0]}
onClick={() => {
openModal(
sprintf(
// translators: %s - tone.
__(
'Translate to %s',
'mind'
),
data[0]
)
);
}}
>
<RawHTML>
{wrapEmoji(data[1])}
</RawHTML>
</MenuItem>
))}
</MenuGroup>
</>
);
}}
</DropdownMenu>
</MenuGroup>
</>
);
}}
</ToolbarDropdownMenu>
);
}