From 32622e9b00d9b4d9c708b88a3b1f8cde73563c35 Mon Sep 17 00:00:00 2001
From: shimotmk <shimotmk1104@gmail.com>
Date: Wed, 19 Jan 2022 14:51:58 +0900
Subject: [PATCH 1/2] =?UTF-8?q?fix=20/=20Highlighter=20:=20URLPopover?=
 =?UTF-8?q?=E3=81=8B=E3=82=89Popover=E3=81=AB=E5=A4=89=E6=9B=B4=20?=
 =?UTF-8?q?=E9=96=A2=E9=80=A3=20:=20WordPress/gutenberg#34680?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/extensions/common/highlighter/index.js | 33 +++++++++++++++-------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/extensions/common/highlighter/index.js b/src/extensions/common/highlighter/index.js
index 53f6b4a90..cf90da5cc 100644
--- a/src/extensions/common/highlighter/index.js
+++ b/src/extensions/common/highlighter/index.js
@@ -1,8 +1,8 @@
 /**
- * highlighter block type
+ * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 import {
 	registerFormatType,
 	applyFormat,
@@ -14,9 +14,12 @@ import {
 	RichTextToolbarButton,
 	RichTextShortcut,
 	ColorPalette,
-	URLPopover,
 } from '@wordpress/block-editor';
-import { Icon } from '@wordpress/components';
+import { Popover, Icon } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
 import { ReactComponent as IconSVG } from './icon.svg';
 import hex2rgba from '@vkblocks/utils/hex-to-rgba';
 
@@ -51,7 +54,7 @@ const hightliterOnApply = ({ color, value, onChange }) => {
 };
 
 const HighlighterEdit = (props) => {
-	const { value, isActive, onChange } = props;
+	const { value, isActive, onChange, contentRef } = props;
 	const shortcutType = 'primary';
 	const shortcutChar = 'h';
 
@@ -68,9 +71,18 @@ const HighlighterEdit = (props) => {
 			background: `linear-gradient(transparent 60%, ${rgbaHeightlightColor} 0)`,
 		};
 	}
-	const anchorRef = useAnchorRef({ ref: props.contentRef, value });
+	const anchorRef = useAnchorRef({ ref: contentRef, value });
 	const [isAddingColor, setIsAddingColor] = useState(false);
 
+	const enableIsAddingColor = useCallback(
+		() => setIsAddingColor(true),
+		[setIsAddingColor]
+	);
+	const disableIsAddingColor = useCallback(
+		() => setIsAddingColor(false),
+		[setIsAddingColor]
+	);
+
 	return (
 		<>
 			<RichTextShortcut
@@ -90,6 +102,7 @@ const HighlighterEdit = (props) => {
 						});
 					}
 					setIsAddingColor(true);
+					enableIsAddingColor(true);
 				}}
 				shortcutType={shortcutType}
 				shortcutCharacter={shortcutChar}
@@ -102,11 +115,11 @@ const HighlighterEdit = (props) => {
 				}
 			/>
 			{isAddingColor && (
-				<URLPopover
+				<Popover
 					value={value}
-					className="components-inline-color-popover"
+					className="components-inline-color-popover components-inline-color-popover"
 					anchorRef={anchorRef}
-					onClose={() => setIsAddingColor(false)}
+					onClose={disableIsAddingColor}
 				>
 					<ColorPalette
 						value={heightlightColor}
@@ -125,7 +138,7 @@ const HighlighterEdit = (props) => {
 							setIsAddingColor(false);
 						}}
 					/>
-				</URLPopover>
+				</Popover>
 			)}
 		</>
 	);

From fb40ea4ab039c9f26071239330de8eaf00faad7b Mon Sep 17 00:00:00 2001
From: shimotmk <shimotmk1104@gmail.com>
Date: Thu, 20 Jan 2022 09:41:46 +0900
Subject: [PATCH 2/2] =?UTF-8?q?fix=20/=20Highlighter=20:=20Popover?=
 =?UTF-8?q?=E7=8B=AC=E8=87=AA=E3=81=AE=E3=82=AF=E3=83=A9=E3=82=B9=E5=90=8D?=
 =?UTF-8?q?=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/extensions/common/highlighter/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/extensions/common/highlighter/index.js b/src/extensions/common/highlighter/index.js
index cf90da5cc..94da5520a 100644
--- a/src/extensions/common/highlighter/index.js
+++ b/src/extensions/common/highlighter/index.js
@@ -117,7 +117,7 @@ const HighlighterEdit = (props) => {
 			{isAddingColor && (
 				<Popover
 					value={value}
-					className="components-inline-color-popover components-inline-color-popover"
+					className="vk-blocks-format-popover components-inline-color-popover"
 					anchorRef={anchorRef}
 					onClose={disableIsAddingColor}
 				>