diff --git a/packages/block-editor/src/components/observe-typing/index.js b/packages/block-editor/src/components/observe-typing/index.js
index c2d86f99347177..08764f5939a13f 100644
--- a/packages/block-editor/src/components/observe-typing/index.js
+++ b/packages/block-editor/src/components/observe-typing/index.js
@@ -115,9 +115,13 @@ export function useMouseMoveTypingReset() {
* field, presses ESC or TAB, or moves the mouse in the document.
*/
export function useTypingObserver() {
- const isTyping = useSelect( ( select ) =>
- select( blockEditorStore ).isTyping()
- );
+ const { isTyping, hasInlineToolbar } = useSelect( ( select ) => {
+ const { isTyping: _isTyping, getSettings } = select( blockEditorStore );
+ return {
+ isTyping: _isTyping(),
+ hasInlineToolbar: getSettings().hasInlineToolbar,
+ };
+ }, [] );
const { startTyping, stopTyping } = useDispatch( blockEditorStore );
const ref1 = useMouseMoveTypingReset();
@@ -125,6 +129,7 @@ export function useTypingObserver() {
( node ) => {
const { ownerDocument } = node;
const { defaultView } = ownerDocument;
+ const selection = defaultView.getSelection();
// Listeners to stop typing should only be added when typing.
// Listeners to start typing should only be added when not typing.
@@ -170,22 +175,20 @@ export function useTypingObserver() {
* uncollapsed (shift) selection.
*/
function stopTypingOnSelectionUncollapse() {
- const selection = defaultView.getSelection();
- const isCollapsed =
- selection.rangeCount > 0 &&
- selection.getRangeAt( 0 ).collapsed;
-
- if ( ! isCollapsed ) {
+ if ( ! selection.isCollapsed ) {
stopTyping();
}
}
node.addEventListener( 'focus', stopTypingOnNonTextField );
node.addEventListener( 'keydown', stopTypingOnEscapeKey );
- ownerDocument.addEventListener(
- 'selectionchange',
- stopTypingOnSelectionUncollapse
- );
+
+ if ( ! hasInlineToolbar ) {
+ ownerDocument.addEventListener(
+ 'selectionchange',
+ stopTypingOnSelectionUncollapse
+ );
+ }
return () => {
defaultView.clearTimeout( timerId );
@@ -242,7 +245,7 @@ export function useTypingObserver() {
node.removeEventListener( 'keydown', startTypingInTextField );
};
},
- [ isTyping, startTyping, stopTyping ]
+ [ isTyping, hasInlineToolbar, startTyping, stopTyping ]
);
return useMergeRefs( [ ref1, ref2 ] );
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
index 08ea1e7e66fdfb..24a931dc791754 100644
--- a/packages/block-editor/src/components/rich-text/format-toolbar-container.js
+++ b/packages/block-editor/src/components/rich-text/format-toolbar-container.js
@@ -2,32 +2,81 @@
* WordPress dependencies
*/
import { Popover, ToolbarGroup } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import {
+ isCollapsed,
+ getActiveFormats,
+ useAnchorRef,
+ store as richTextStore,
+} from '@wordpress/rich-text';
/**
* Internal dependencies
*/
import BlockControls from '../block-controls';
import FormatToolbar from './format-toolbar';
+import { store as blockEditorStore } from '../../store';
+
+function InlineSelectionToolbar( { value, anchorRef, activeFormats } ) {
+ const lastFormat = activeFormats[ activeFormats.length - 1 ];
+ const lastFormatType = lastFormat?.type;
+ const settings = useSelect(
+ ( select ) => select( richTextStore ).getFormatType( lastFormatType ),
+ [ lastFormatType ]
+ );
+ const selectionRef = useAnchorRef( {
+ ref: anchorRef,
+ value,
+ settings,
+ } );
+
+ return ;
+}
+
+function InlineToolbar( { anchorRef } ) {
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+const FormatToolbarContainer = ( { inline, anchorRef, value } ) => {
+ const hasInlineToolbar = useSelect(
+ ( select ) => select( blockEditorStore ).getSettings().hasInlineToolbar,
+ []
+ );
-const FormatToolbarContainer = ( { inline, anchorRef } ) => {
if ( inline ) {
- // Render in popover.
+ return ;
+ }
+
+ if ( hasInlineToolbar ) {
+ const activeFormats = getActiveFormats( value );
+
+ if ( isCollapsed( value ) && ! activeFormats.length ) {
+ return null;
+ }
+
return (
-
-
-
-
-
-
-
+ value={ value }
+ activeFormats={ activeFormats }
+ />
);
}
+
// Render regular toolbar.
return (
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
index ef3e4d2d3a318d..abf9068a356a7f 100644
--- a/packages/block-editor/src/components/rich-text/index.js
+++ b/packages/block-editor/src/components/rich-text/index.js
@@ -344,6 +344,7 @@ function RichTextWrapper(
) }