WenPai-org/wpmind
WenPai-org/wpmind
3
0
Fork 0
mirror of https://github.com/WenPai-org/wpmind.git synced 2025-08-03 11:11:27 +08:00
Code Issues Projects Releases 1 Packages Wiki Activity Actions

fixed wrong toolbar dropdown rendering

Browse source
This commit is contained in:
Nikita 2024-12-23 19:02:59 +03:00
parent 8db40cc15c
commit 1255f566b2
1 changed files with 189 additions and 201 deletions
Download patch file Download diff file Expand all files Collapse all files

390
src/editor/extensions/block-toolbar/index.js
View file

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