polish

WordPress · Jul 13, 2022 · 10dc96e · 10dc96e
1 parent 13014e8
commit 10dc96e
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 33 deletions.
diff --git a/packages/block-editor/src/components/observe-typing/index.js b/packages/block-editor/src/components/observe-typing/index.js
@@ -124,11 +124,7 @@ export function useTypingObserver() {
 	}, [] );
 	const { startTyping, stopTyping } = useDispatch( blockEditorStore );
 
-	const ref1 = useMouseMoveTypingReset( {
-		isTyping,
-		hasInlineToolbar,
-		stopTyping,
-	} );
+	const ref1 = useMouseMoveTypingReset();
 	const ref2 = useRefEffect(
 		( node ) => {
 			const { ownerDocument } = node;

diff --git a/packages/block-editor/src/components/rich-text/format-toolbar-container.js b/packages/block-editor/src/components/rich-text/format-toolbar-container.js
@@ -17,17 +17,11 @@ import BlockControls from '../block-controls';
 import FormatToolbar from './format-toolbar';
 import { store as blockEditorStore } from '../../store';
 
-const FormatToolbarContainer = ( { inline, anchorRef, value } ) => {
-	const hasInlineToolbar = useSelect(
-		( select ) => select( blockEditorStore ).getSettings().hasInlineToolbar,
-		[]
-	);
-	const activeFormats = getActiveFormats( value );
+function InlineSelectionToolbar( { value, anchorRef, activeFormats } ) {
 	const lastFormat = activeFormats[ activeFormats.length - 1 ];
 	const lastFormatType = lastFormat?.type;
 	const settings = useSelect(
-		( select ) =>
-			select( richTextStore ).getFormatType( lastFormatType ) || {},
+		( select ) => select( richTextStore ).getFormatType( lastFormatType ),
 		[ lastFormatType ]
 	);
 	const selectionRef = useAnchorRef( {
@@ -36,30 +30,50 @@ const FormatToolbarContainer = ( { inline, anchorRef, value } ) => {
 		settings,
 	} );
 
-	if ( hasInlineToolbar || inline ) {
-		if (
-			hasInlineToolbar &&
-			isCollapsed( value ) &&
-			! activeFormats.length
-		) {
+	return <InlineToolbar anchorRef={ selectionRef } />;
+}
+
+function InlineToolbar( { anchorRef } ) {
+	return (
+		<Popover
+			position="bottom center"
+			focusOnMount={ false }
+			anchorRef={ anchorRef }
+			className="block-editor-rich-text__inline-format-toolbar"
+			__unstableSlotName="block-toolbar"
+		>
+			<div className="block-editor-rich-text__inline-format-toolbar-group">
+				<ToolbarGroup>
+					<FormatToolbar />
+				</ToolbarGroup>
+			</div>
+		</Popover>
+	);
+}
+
+const FormatToolbarContainer = ( { inline, anchorRef, value } ) => {
+	const hasInlineToolbar = useSelect(
+		( select ) => select( blockEditorStore ).getSettings().hasInlineToolbar,
+		[]
+	);
+
+	if ( inline ) {
+		return <InlineToolbar anchorRef={ anchorRef } />;
+	}
+
+	if ( hasInlineToolbar ) {
+		const activeFormats = getActiveFormats( value );
+
+		if ( isCollapsed( value ) && ! activeFormats.length ) {
 			return null;
 		}
 
-		// Render in popover.
 		return (
-			<Popover
-				position="bottom center"
-				focusOnMount={ false }
-				anchorRef={ hasInlineToolbar ? selectionRef : anchorRef }
-				className="block-editor-rich-text__inline-format-toolbar"
-				__unstableSlotName="block-toolbar"
-			>
-				<div className="block-editor-rich-text__inline-format-toolbar-group">
-					<ToolbarGroup>
-						<FormatToolbar />
-					</ToolbarGroup>
-				</div>
-			</Popover>
+			<InlineSelectionToolbar
+				anchorRef={ anchorRef }
+				value={ value }
+				activeFormats={ activeFormats }
+			/>
 		);
 	}