From 1255f566b228e41fd09d7a85e7e0f57787d533cc Mon Sep 17 00:00:00 2001
From: Nikita <nkdevinfo@gmail.com>
Date: Mon, 23 Dec 2024 19:02:59 +0300
Subject: [PATCH] fixed wrong toolbar dropdown rendering

---
 src/editor/extensions/block-toolbar/index.js | 390 +++++++++----------
 1 file changed, 189 insertions(+), 201 deletions(-)

diff --git a/src/editor/extensions/block-toolbar/index.js b/src/editor/extensions/block-toolbar/index.js
index 2aacafc..2c381fc 100644
--- a/src/editor/extensions/block-toolbar/index.js
+++ b/src/editor/extensions/block-toolbar/index.js
@@ -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>
 	);
 }