diff --git a/packages/block-editor/src/components/observe-typing/index.js b/packages/block-editor/src/components/observe-typing/index.js index c2d86f9934717..08764f5939a13 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 08ea1e7e66fdf..24a931dc79175 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 ef3e4d2d3a318..abf9068a356a7 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( ) }