@wordpress/block-editor 16.0.0 → 16.1.0

package/build-module/components/url-input/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/url-input/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport { Component, createRef } from '@wordpress/element';\nimport { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes';\nimport {\n\tBaseControl,\n\tButton,\n\t__experimentalInputControl as InputControl,\n\tSpinner,\n\twithSpokenMessages,\n\tPopover,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport {\n\tcompose,\n\tdebounce,\n\twithInstanceId,\n\twithSafeTimeout,\n} from '@wordpress/compose';\nimport { withSelect } from '@wordpress/data';\nimport { isURL } from '@wordpress/url';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nconst { ValidatedInputControl } = unlock( componentsPrivateApis );\n\n/**\n * Whether the argument is a function.\n *\n * @param {*} maybeFunc The argument to check.\n * @return {boolean} True if the argument is a function, false otherwise.\n */\nfunction isFunction( maybeFunc ) {\n\treturn typeof maybeFunc === 'function';\n}\n\nclass URLInput extends Component {\n\tconstructor( props ) {\n\t\tsuper( props );\n\n\t\tthis.onChange = this.onChange.bind( this );\n\t\tthis.onFocus = this.onFocus.bind( this );\n\t\tthis.onKeyDown = this.onKeyDown.bind( this );\n\t\tthis.selectLink = this.selectLink.bind( this );\n\t\tthis.handleOnClick = this.handleOnClick.bind( this );\n\t\tthis.bindSuggestionNode = this.bindSuggestionNode.bind( this );\n\t\tthis.autocompleteRef = props.autocompleteRef || createRef();\n\t\tthis.inputRef = props.inputRef || createRef();\n\t\tthis.hasRenderedValidation = { current: false };\n\t\tthis.updateSuggestions = debounce(\n\t\t\tthis.updateSuggestions.bind( this ),\n\t\t\t200\n\t\t);\n\n\t\tthis.suggestionNodes = [];\n\n\t\tthis.suggestionsRequest = null;\n\n\t\tthis.state = {\n\t\t\tsuggestions: [],\n\t\t\tshowSuggestions: false,\n\t\t\tsuggestionsValue: null,\n\t\t\tselectedSuggestion: null,\n\t\t\tsuggestionsListboxId: '',\n\t\t\tsuggestionOptionIdPrefix: '',\n\t\t};\n\t}\n\n\tcomponentDidUpdate( prevProps ) {\n\t\tconst { showSuggestions, selectedSuggestion } = this.state;\n\t\tconst { value, __experimentalShowInitialSuggestions = false } =\n\t\t\tthis.props;\n\n\t\t// Only have to worry about scrolling selected suggestion into view\n\t\t// when already expanded.\n\t\tif (\n\t\t\tshowSuggestions &&\n\t\t\tselectedSuggestion !== null &&\n\t\t\tthis.suggestionNodes[ selectedSuggestion ]\n\t\t) {\n\t\t\tthis.suggestionNodes[ selectedSuggestion ].scrollIntoView( {\n\t\t\t\tbehavior: 'instant',\n\t\t\t\tblock: 'nearest',\n\t\t\t\tinline: 'nearest',\n\t\t\t} );\n\t\t}\n\n\t\t// Update suggestions when the value changes.\n\t\tif ( prevProps.value !== value && ! this.props.disableSuggestions ) {\n\t\t\tif ( value?.length ) {\n\t\t\t\t// If the new value is not empty we need to update with suggestions for it.\n\t\t\t\tthis.updateSuggestions( value );\n\t\t\t} else if ( __experimentalShowInitialSuggestions ) {\n\t\t\t\t// If the new value is empty and we can show initial suggestions, then show initial suggestions.\n\t\t\t\tthis.updateSuggestions();\n\t\t\t}\n\t\t}\n\t}\n\n\tcomponentDidMount() {\n\t\tif ( this.shouldShowInitialSuggestions() ) {\n\t\t\tthis.updateSuggestions();\n\t\t}\n\t}\n\n\tcomponentWillUnmount() {\n\t\tthis.suggestionsRequest?.cancel?.();\n\t\tthis.suggestionsRequest = null;\n\t}\n\n\tbindSuggestionNode( index ) {\n\t\treturn ( ref ) => {\n\t\t\tthis.suggestionNodes[ index ] = ref;\n\t\t};\n\t}\n\n\tshouldShowInitialSuggestions() {\n\t\tconst { __experimentalShowInitialSuggestions = false, value } =\n\t\t\tthis.props;\n\t\treturn (\n\t\t\t__experimentalShowInitialSuggestions && ! ( value && value.length )\n\t\t);\n\t}\n\n\tupdateSuggestions( value = '' ) {\n\t\tconst {\n\t\t\t__experimentalFetchLinkSuggestions: fetchLinkSuggestions,\n\t\t\t__experimentalHandleURLSuggestions: handleURLSuggestions,\n\t\t} = this.props;\n\n\t\tif ( ! fetchLinkSuggestions ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Initial suggestions may only show if there is no value\n\t\t// (note: this includes whitespace).\n\t\tconst isInitialSuggestions = ! value?.length;\n\n\t\t// Trim only now we've determined whether or not it originally had a \"length\"\n\t\t// (even if that value was all whitespace).\n\t\tvalue = value.trim();\n\n\t\t// Allow a suggestions request if:\n\t\t// - there are at least 2 characters in the search input (except manual searches where\n\t\t//   search input length is not required to trigger a fetch)\n\t\t// - this is a direct entry (eg: a URL)\n\t\tif (\n\t\t\t! isInitialSuggestions &&\n\t\t\t( value.length < 2 || ( ! handleURLSuggestions && isURL( value ) ) )\n\t\t) {\n\t\t\tthis.suggestionsRequest?.cancel?.();\n\t\t\tthis.suggestionsRequest = null;\n\n\t\t\tthis.setState( {\n\t\t\t\tsuggestions: [],\n\t\t\t\tshowSuggestions: false,\n\t\t\t\tsuggestionsValue: value,\n\t\t\t\tselectedSuggestion: null,\n\t\t\t\tloading: false,\n\t\t\t} );\n\n\t\t\treturn;\n\t\t}\n\n\t\tthis.setState( {\n\t\t\tselectedSuggestion: null,\n\t\t\tloading: true,\n\t\t} );\n\n\t\tconst request = fetchLinkSuggestions( value, {\n\t\t\tisInitialSuggestions,\n\t\t} );\n\n\t\trequest\n\t\t\t.then( ( suggestions ) => {\n\t\t\t\t// A fetch Promise doesn't have an abort option. It's mimicked by\n\t\t\t\t// comparing the request reference in on the instance, which is\n\t\t\t\t// reset or deleted on subsequent requests or unmounting.\n\t\t\t\tif ( this.suggestionsRequest !== request ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tthis.setState( {\n\t\t\t\t\tsuggestions,\n\t\t\t\t\tsuggestionsValue: value,\n\t\t\t\t\tloading: false,\n\t\t\t\t\tshowSuggestions: !! suggestions.length,\n\t\t\t\t} );\n\n\t\t\t\tif ( !! suggestions.length ) {\n\t\t\t\t\tthis.props.debouncedSpeak(\n\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t/* translators: %d: number of results. */\n\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\tsuggestions.length\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tsuggestions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\t'assertive'\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\tthis.props.debouncedSpeak(\n\t\t\t\t\t\t__( 'No results.' ),\n\t\t\t\t\t\t'assertive'\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} )\n\t\t\t.catch( () => {\n\t\t\t\tif ( this.suggestionsRequest !== request ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tthis.setState( {\n\t\t\t\t\tloading: false,\n\t\t\t\t} );\n\t\t\t} )\n\t\t\t.finally( () => {\n\t\t\t\t// If this is the current promise then reset the reference\n\t\t\t\t// to allow for checking if a new request is made.\n\t\t\t\tif ( this.suggestionsRequest === request ) {\n\t\t\t\t\tthis.suggestionsRequest = null;\n\t\t\t\t}\n\t\t\t} );\n\n\t\t// Note that this assignment is handled *before* the async search request\n\t\t// as a Promise always resolves on the next tick of the event loop.\n\t\tthis.suggestionsRequest = request;\n\t}\n\n\tonChange( newValue ) {\n\t\tthis.props.onChange( newValue );\n\t}\n\n\tonFocus() {\n\t\tconst { suggestions } = this.state;\n\t\tconst { disableSuggestions, value } = this.props;\n\n\t\t// When opening the link editor, if there's a value present, we want to load the suggestions pane with the results for this input search value\n\t\t// Don't re-run the suggestions on focus if there are already suggestions present (prevents searching again when tabbing between the input and buttons)\n\t\t// or there is already a request in progress.\n\t\tif (\n\t\t\tvalue &&\n\t\t\t! disableSuggestions &&\n\t\t\t! ( suggestions && suggestions.length ) &&\n\t\t\tthis.suggestionsRequest === null\n\t\t) {\n\t\t\t// Ensure the suggestions are updated with the current input value.\n\t\t\tthis.updateSuggestions( value );\n\t\t}\n\t}\n\n\tonKeyDown( event ) {\n\t\tthis.props.onKeyDown?.( event );\n\t\tconst { showSuggestions, selectedSuggestion, suggestions, loading } =\n\t\t\tthis.state;\n\n\t\t// If the suggestions are not shown or loading, we shouldn't handle the arrow keys\n\t\t// We shouldn't preventDefault to allow block arrow keys navigation.\n\t\tif ( ! showSuggestions || ! suggestions.length || loading ) {\n\t\t\t// In the Windows version of Firefox the up and down arrows don't move the caret\n\t\t\t// within an input field like they do for Mac Firefox/Chrome/Safari. This causes\n\t\t\t// a form of focus trapping that is disruptive to the user experience. This disruption\n\t\t\t// only happens if the caret is not in the first or last position in the text input.\n\t\t\t// See: https://github.com/WordPress/gutenberg/issues/5693#issuecomment-436684747\n\t\t\tswitch ( event.keyCode ) {\n\t\t\t\t// When UP is pressed, if the caret is at the start of the text, move it to the 0\n\t\t\t\t// position.\n\t\t\t\tcase UP: {\n\t\t\t\t\tif ( 0 !== event.target.selectionStart ) {\n\t\t\t\t\t\tevent.preventDefault();\n\n\t\t\t\t\t\t// Set the input caret to position 0.\n\t\t\t\t\t\tevent.target.setSelectionRange( 0, 0 );\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t\t// When DOWN is pressed, if the caret is not at the end of the text, move it to the\n\t\t\t\t// last position.\n\t\t\t\tcase DOWN: {\n\t\t\t\t\tif (\n\t\t\t\t\t\tthis.props.value.length !== event.target.selectionStart\n\t\t\t\t\t) {\n\t\t\t\t\t\tevent.preventDefault();\n\n\t\t\t\t\t\t// Set the input caret to the last position.\n\t\t\t\t\t\tevent.target.setSelectionRange(\n\t\t\t\t\t\t\tthis.props.value.length,\n\t\t\t\t\t\t\tthis.props.value.length\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\t// Submitting while loading should trigger onSubmit.\n\t\t\t\tcase ENTER: {\n\t\t\t\t\tif ( this.props.onSubmit ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tthis.props.onSubmit( null, event );\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\tconst suggestion =\n\t\t\tthis.state.suggestions[ this.state.selectedSuggestion ];\n\n\t\tswitch ( event.keyCode ) {\n\t\t\tcase UP: {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tconst previousIndex = ! selectedSuggestion\n\t\t\t\t\t? suggestions.length - 1\n\t\t\t\t\t: selectedSuggestion - 1;\n\t\t\t\tthis.setState( {\n\t\t\t\t\tselectedSuggestion: previousIndex,\n\t\t\t\t} );\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase DOWN: {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tconst nextIndex =\n\t\t\t\t\tselectedSuggestion === null ||\n\t\t\t\t\tselectedSuggestion === suggestions.length - 1\n\t\t\t\t\t\t? 0\n\t\t\t\t\t\t: selectedSuggestion + 1;\n\t\t\t\tthis.setState( {\n\t\t\t\t\tselectedSuggestion: nextIndex,\n\t\t\t\t} );\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase TAB: {\n\t\t\t\tif ( this.state.selectedSuggestion !== null ) {\n\t\t\t\t\tthis.selectLink( suggestion );\n\t\t\t\t\t// Announce a link has been selected when tabbing away from the input field.\n\t\t\t\t\tthis.props.speak( __( 'Link selected.' ) );\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase ENTER: {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif ( this.state.selectedSuggestion !== null ) {\n\t\t\t\t\tthis.selectLink( suggestion );\n\n\t\t\t\t\tif ( this.props.onSubmit ) {\n\t\t\t\t\t\tthis.props.onSubmit( suggestion, event );\n\t\t\t\t\t}\n\t\t\t\t} else if ( this.props.onSubmit ) {\n\t\t\t\t\tthis.props.onSubmit( null, event );\n\t\t\t\t}\n\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\tselectLink( suggestion ) {\n\t\tthis.props.onChange( suggestion.url, suggestion );\n\t\tthis.setState( {\n\t\t\tselectedSuggestion: null,\n\t\t\tshowSuggestions: false,\n\t\t} );\n\t}\n\n\thandleOnClick( suggestion ) {\n\t\tthis.selectLink( suggestion );\n\t\t// Move focus to the input field when a link suggestion is clicked.\n\t\tthis.inputRef.current.focus();\n\t}\n\n\tstatic getDerivedStateFromProps(\n\t\t{\n\t\t\tvalue,\n\t\t\tinstanceId,\n\t\t\tdisableSuggestions,\n\t\t\t__experimentalShowInitialSuggestions = false,\n\t\t},\n\t\t{ showSuggestions }\n\t) {\n\t\tlet shouldShowSuggestions = showSuggestions;\n\n\t\tconst hasValue = value && value.length;\n\n\t\tif ( ! __experimentalShowInitialSuggestions && ! hasValue ) {\n\t\t\tshouldShowSuggestions = false;\n\t\t}\n\n\t\tif ( disableSuggestions === true ) {\n\t\t\tshouldShowSuggestions = false;\n\t\t}\n\n\t\treturn {\n\t\t\tshowSuggestions: shouldShowSuggestions,\n\t\t\tsuggestionsListboxId: `block-editor-url-input-suggestions-${ instanceId }`,\n\t\t\tsuggestionOptionIdPrefix: `block-editor-url-input-suggestion-${ instanceId }`,\n\t\t};\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ this.renderControl() }\n\t\t\t\t{ this.renderSuggestions() }\n\t\t\t</>\n\t\t);\n\t}\n\n\trenderControl() {\n\t\tconst {\n\t\t\tlabel = null,\n\t\t\tclassName,\n\t\t\tisFullWidth,\n\t\t\tinstanceId,\n\t\t\tplaceholder = __( 'Paste URL or type to search' ),\n\t\t\t__experimentalRenderControl: renderControl,\n\t\t\tvalue = '',\n\t\t\thideLabelFromVision = false,\n\t\t\thelp = null,\n\t\t\tdisabled = false,\n\t\t\tcustomValidity,\n\t\t\tmarkWhenOptional,\n\t\t} = this.props;\n\n\t\tconst {\n\t\t\tloading,\n\t\t\tshowSuggestions,\n\t\t\tselectedSuggestion,\n\t\t\tsuggestionsListboxId,\n\t\t\tsuggestionOptionIdPrefix,\n\t\t} = this.state;\n\n\t\tconst inputId = `url-input-control-${ instanceId }`;\n\n\t\tconst controlProps = {\n\t\t\tid: inputId, // Passes attribute to label for the for attribute\n\t\t\tlabel,\n\t\t\tclassName: clsx( 'block-editor-url-input', className, {\n\t\t\t\t'is-full-width': isFullWidth,\n\t\t\t} ),\n\t\t\thideLabelFromVision,\n\t\t};\n\n\t\tconst inputProps = {\n\t\t\tid: inputId,\n\t\t\tvalue,\n\t\t\trequired: this.props.required ?? true,\n\t\t\ttype: 'text',\n\t\t\tname: inputId,\n\t\t\tautoComplete: 'off',\n\t\t\tonChange: disabled ? () => {} : this.onChange, // Disable onChange when disabled\n\t\t\tonFocus: disabled ? () => {} : this.onFocus, // Disable onFocus when disabled\n\t\t\tplaceholder,\n\t\t\tonKeyDown: disabled ? () => {} : this.onKeyDown, // Disable onKeyDown when disabled\n\t\t\trole: 'combobox',\n\t\t\t'aria-label': label ? undefined : __( 'URL' ), // Ensure input always has an accessible label\n\t\t\t'aria-expanded': showSuggestions,\n\t\t\t'aria-autocomplete': 'list',\n\t\t\t'aria-owns': suggestionsListboxId,\n\t\t\t'aria-activedescendant':\n\t\t\t\tselectedSuggestion !== null\n\t\t\t\t\t? `${ suggestionOptionIdPrefix }-${ selectedSuggestion }`\n\t\t\t\t\t: undefined,\n\t\t\tref: this.inputRef,\n\t\t\tdisabled,\n\t\t\tsuffix: this.props.suffix,\n\t\t\thelp,\n\t\t};\n\n\t\tconst validationProps = {\n\t\t\tcustomValidity,\n\t\t\t// Suppress the \"(Required)\" indicator in the label.\n\t\t\t// The field is still required for validation, but the indicator\n\t\t\t// can be hidden when markWhenOptional is set to true.\n\t\t\t...( markWhenOptional !== undefined && {\n\t\t\t\tmarkWhenOptional,\n\t\t\t} ),\n\t\t};\n\n\t\tif ( renderControl ) {\n\t\t\treturn renderControl( controlProps, inputProps, loading );\n\t\t}\n\n\t\t// Use ValidatedInputControl if customValidity has ever had a non-undefined value.\n\t\tif ( customValidity !== undefined ) {\n\t\t\tthis.hasRenderedValidation.current = true;\n\t\t}\n\n\t\tconst MaybeValidatedInputControl = this.hasRenderedValidation.current\n\t\t\t? ValidatedInputControl\n\t\t\t: InputControl;\n\n\t\treturn (\n\t\t\t<BaseControl { ...controlProps }>\n\t\t\t\t<MaybeValidatedInputControl\n\t\t\t\t\t{ ...inputProps }\n\t\t\t\t\t{ ...( this.hasRenderedValidation.current\n\t\t\t\t\t\t? validationProps\n\t\t\t\t\t\t: {} ) }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t/>\n\t\t\t\t{ loading && <Spinner /> }\n\t\t\t</BaseControl>\n\t\t);\n\t}\n\n\trenderSuggestions() {\n\t\tconst {\n\t\t\tclassName,\n\t\t\t__experimentalRenderSuggestions: renderSuggestions,\n\t\t} = this.props;\n\n\t\tconst {\n\t\t\tshowSuggestions,\n\t\t\tsuggestions,\n\t\t\tsuggestionsValue,\n\t\t\tselectedSuggestion,\n\t\t\tsuggestionsListboxId,\n\t\t\tsuggestionOptionIdPrefix,\n\t\t\tloading,\n\t\t} = this.state;\n\n\t\tif ( ! showSuggestions || suggestions.length === 0 ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst suggestionsListProps = {\n\t\t\tid: suggestionsListboxId,\n\t\t\tref: this.autocompleteRef,\n\t\t\trole: 'listbox',\n\t\t};\n\n\t\tconst buildSuggestionItemProps = ( suggestion, index ) => {\n\t\t\treturn {\n\t\t\t\trole: 'option',\n\t\t\t\ttabIndex: '-1',\n\t\t\t\tid: `${ suggestionOptionIdPrefix }-${ index }`,\n\t\t\t\tref: this.bindSuggestionNode( index ),\n\t\t\t\t'aria-selected':\n\t\t\t\t\tindex === selectedSuggestion ? true : undefined,\n\t\t\t};\n\t\t};\n\n\t\tif ( isFunction( renderSuggestions ) ) {\n\t\t\treturn renderSuggestions( {\n\t\t\t\tsuggestions,\n\t\t\t\tselectedSuggestion,\n\t\t\t\tsuggestionsListProps,\n\t\t\t\tbuildSuggestionItemProps,\n\t\t\t\tisLoading: loading,\n\t\t\t\thandleSuggestionClick: this.handleOnClick,\n\t\t\t\tisInitialSuggestions: ! suggestionsValue?.length,\n\t\t\t\tcurrentInputValue: suggestionsValue,\n\t\t\t} );\n\t\t}\n\n\t\treturn (\n\t\t\t<Popover placement=\"bottom\" focusOnMount={ false }>\n\t\t\t\t<div\n\t\t\t\t\t{ ...suggestionsListProps }\n\t\t\t\t\tclassName={ clsx( 'block-editor-url-input__suggestions', {\n\t\t\t\t\t\t[ `${ className }__suggestions` ]: className,\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t{ suggestions.map( ( suggestion, index ) => (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t{ ...buildSuggestionItemProps( suggestion, index ) }\n\t\t\t\t\t\t\tkey={ suggestion.id }\n\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t'block-editor-url-input__suggestion',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t'is-selected': index === selectedSuggestion,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonClick={ () => this.handleOnClick( suggestion ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ suggestion.title }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) ) }\n\t\t\t\t</div>\n\t\t\t</Popover>\n\t\t);\n\t}\n}\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/url-input/README.md\n */\nexport default compose(\n\twithSafeTimeout,\n\twithSpokenMessages,\n\twithInstanceId,\n\twithSelect( ( select, props ) => {\n\t\t// If a link suggestions handler is already provided then\n\t\t// bail.\n\t\tif ( isFunction( props.__experimentalFetchLinkSuggestions ) ) {\n\t\t\treturn;\n\t\t}\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\treturn {\n\t\t\t__experimentalFetchLinkSuggestions:\n\t\t\t\tgetSettings().__experimentalFetchLinkSuggestions,\n\t\t};\n\t} )\n)( URLInput );\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { UP, DOWN, ENTER, TAB } from '@wordpress/keycodes';\nimport {\n\tBaseControl,\n\tButton,\n\t__experimentalInputControl as InputControl,\n\tSpinner,\n\tPopover,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useDebounce, useEvent, useInstanceId } from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\nimport { isURL } from '@wordpress/url';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nconst { ValidatedInputControl } = unlock( componentsPrivateApis );\n\nconst noop = () => {};\n\n/**\n * Whether the argument is a function.\n *\n * @param {*} maybeFunc The argument to check.\n * @return {boolean} True if the argument is a function, false otherwise.\n */\nfunction isFunction( maybeFunc ) {\n\treturn typeof maybeFunc === 'function';\n}\n\n/**\n * Text field for entering a URL, with an autocomplete list of matching posts,\n * pages and other link suggestions.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/url-input/README.md\n *\n * @param {Object} props Component props.\n */\nexport default function URLInput( props ) {\n\tconst {\n\t\t__experimentalFetchLinkSuggestions: fetchLinkSuggestionsProp,\n\t\t__experimentalHandleURLSuggestions: handleURLSuggestions,\n\t\t__experimentalRenderControl: renderControl,\n\t\t__experimentalRenderSuggestions: renderSuggestions,\n\t\t__experimentalShowInitialSuggestions: showInitialSuggestions = false,\n\t\tautocompleteRef,\n\t\tclassName,\n\t\tcustomValidity,\n\t\tdisableSuggestions,\n\t\tdisabled = false,\n\t\thelp = null,\n\t\thideLabelFromVision = false,\n\t\tinputRef,\n\t\tisFullWidth,\n\t\tlabel = null,\n\t\tmarkWhenOptional,\n\t\tonChange,\n\t\tonKeyDown,\n\t\tonSubmit,\n\t\tplaceholder = __( 'Paste URL or type to search' ),\n\t\trequired = true,\n\t\tsuffix,\n\t\tvalue = '',\n\t} = props;\n\n\tconst instanceId = useInstanceId( URLInput );\n\tconst { getSettings } = useSelect( blockEditorStore );\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\n\tconst [ suggestions, setSuggestions ] = useState( [] );\n\tconst [ suggestionsValue, setSuggestionsValue ] = useState( null );\n\tconst [ selectedSuggestion, setSelectedSuggestion ] = useState( null );\n\tconst [ isSuggestionsListOpen, setIsSuggestionsListOpen ] =\n\t\tuseState( false );\n\tconst [ isLoading, setIsLoading ] = useState( false );\n\n\tconst fallbackInputRef = useRef();\n\tconst suggestionNodesRef = useRef( [] );\n\t// A fetch Promise can't be aborted. It's mimicked by holding on to the\n\t// pending request so that responses of superseded requests can be ignored.\n\tconst suggestionsRequestRef = useRef( null );\n\n\tconst controlInputRef = inputRef ?? fallbackInputRef;\n\n\tconst inputId = `url-input-control-${ instanceId }`;\n\tconst suggestionsListboxId = `block-editor-url-input-suggestions-${ instanceId }`;\n\tconst suggestionOptionIdPrefix = `block-editor-url-input-suggestion-${ instanceId }`;\n\n\t// The suggestions are hidden rather than discarded, so that returning focus\n\t// to a field that already has results doesn't trigger a new search.\n\tconst showSuggestions =\n\t\tisSuggestionsListOpen &&\n\t\tdisableSuggestions !== true &&\n\t\t( showInitialSuggestions || !! value.length );\n\n\tconst updateSuggestions = useEvent( ( searchValue = '' ) => {\n\t\tconst fetchLinkSuggestions = isFunction( fetchLinkSuggestionsProp )\n\t\t\t? fetchLinkSuggestionsProp\n\t\t\t: getSettings().__experimentalFetchLinkSuggestions;\n\n\t\tif ( ! fetchLinkSuggestions ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Initial suggestions may only show if there is no value\n\t\t// (note: this includes whitespace).\n\t\tconst isInitialSuggestions = ! searchValue?.length;\n\n\t\t// Trim only now we've determined whether or not it originally had a \"length\"\n\t\t// (even if that value was all whitespace).\n\t\tconst search = searchValue.trim();\n\n\t\t// Allow a suggestions request if:\n\t\t// - there are at least 2 characters in the search input (except manual searches where\n\t\t//   search input length is not required to trigger a fetch)\n\t\t// - this is a direct entry (eg: a URL)\n\t\tif (\n\t\t\t! isInitialSuggestions &&\n\t\t\t( search.length < 2 ||\n\t\t\t\t( ! handleURLSuggestions && isURL( search ) ) )\n\t\t) {\n\t\t\tsuggestionsRequestRef.current?.cancel?.();\n\t\t\tsuggestionsRequestRef.current = null;\n\n\t\t\tsetSuggestions( [] );\n\t\t\tsetIsSuggestionsListOpen( false );\n\t\t\tsetSuggestionsValue( search );\n\t\t\tsetSelectedSuggestion( null );\n\t\t\tsetIsLoading( false );\n\n\t\t\treturn;\n\t\t}\n\n\t\tsetSelectedSuggestion( null );\n\t\tsetIsLoading( true );\n\n\t\tconst request = fetchLinkSuggestions( search, {\n\t\t\tisInitialSuggestions,\n\t\t} );\n\t\tsuggestionsRequestRef.current = request;\n\n\t\trequest\n\t\t\t.then( ( nextSuggestions ) => {\n\t\t\t\tif ( suggestionsRequestRef.current !== request ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tsetSuggestions( nextSuggestions );\n\t\t\t\tsetSuggestionsValue( search );\n\t\t\t\tsetIsLoading( false );\n\t\t\t\tsetIsSuggestionsListOpen( !! nextSuggestions.length );\n\n\t\t\t\tif ( nextSuggestions.length ) {\n\t\t\t\t\tdebouncedSpeak(\n\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t/* translators: %d: number of results. */\n\t\t\t\t\t\t\t_n(\n\t\t\t\t\t\t\t\t'%d result found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\t'%d results found, use up and down arrow keys to navigate.',\n\t\t\t\t\t\t\t\tnextSuggestions.length\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tnextSuggestions.length\n\t\t\t\t\t\t),\n\t\t\t\t\t\t'assertive'\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\tdebouncedSpeak( __( 'No results.' ), 'assertive' );\n\t\t\t\t}\n\t\t\t} )\n\t\t\t.catch( () => {\n\t\t\t\tif ( suggestionsRequestRef.current !== request ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tsetIsLoading( false );\n\t\t\t} )\n\t\t\t.finally( () => {\n\t\t\t\tif ( suggestionsRequestRef.current === request ) {\n\t\t\t\t\tsuggestionsRequestRef.current = null;\n\t\t\t\t}\n\t\t\t} );\n\t} );\n\n\tconst debouncedUpdateSuggestions = useDebounce( updateSuggestions, 200 );\n\n\t// Keep the suggestions in sync with the value being searched for. An empty\n\t// value requests the initial suggestions, when those are enabled.\n\tuseEffect( () => {\n\t\tif (\n\t\t\t! disableSuggestions &&\n\t\t\t( value.length || showInitialSuggestions )\n\t\t) {\n\t\t\tdebouncedUpdateSuggestions( value );\n\t\t}\n\t}, [\n\t\tvalue,\n\t\tdisableSuggestions,\n\t\tshowInitialSuggestions,\n\t\tdebouncedUpdateSuggestions,\n\t] );\n\n\t// Persist the hidden state, so that the list can't reappear with stale\n\t// results once the value or the props allow suggestions again.\n\tuseEffect( () => {\n\t\tif ( ! showSuggestions ) {\n\t\t\tsetIsSuggestionsListOpen( false );\n\t\t}\n\t}, [ showSuggestions ] );\n\n\tuseEffect( () => {\n\t\tif ( showSuggestions && selectedSuggestion !== null ) {\n\t\t\tsuggestionNodesRef.current[ selectedSuggestion ]?.scrollIntoView( {\n\t\t\t\tbehavior: 'instant',\n\t\t\t\tblock: 'nearest',\n\t\t\t\tinline: 'nearest',\n\t\t\t} );\n\t\t}\n\t}, [ showSuggestions, selectedSuggestion ] );\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tsuggestionsRequestRef.current?.cancel?.();\n\t\t\tsuggestionsRequestRef.current = null;\n\t\t};\n\t}, [] );\n\n\tfunction selectLink( suggestion ) {\n\t\tonChange( suggestion.url, suggestion );\n\t\tsetSelectedSuggestion( null );\n\t\tsetIsSuggestionsListOpen( false );\n\t}\n\n\tfunction handleSuggestionClick( suggestion ) {\n\t\tselectLink( suggestion );\n\t\t// Move focus to the input field when a link suggestion is clicked.\n\t\tcontrolInputRef.current.focus();\n\t}\n\n\tfunction handleChange( newValue ) {\n\t\t// `InputControl` passes an `{ event }` object as its second argument,\n\t\t// which callers would mistake for a selected suggestion.\n\t\tonChange( newValue );\n\t}\n\n\tfunction handleFocus() {\n\t\t// When opening the link editor, if there's a value present, we want to load the suggestions pane with the results for this input search value\n\t\t// Don't re-run the suggestions on focus if there are already suggestions present (prevents searching again when tabbing between the input and buttons)\n\t\t// or there is already a request in progress.\n\t\tif (\n\t\t\tvalue &&\n\t\t\t! disableSuggestions &&\n\t\t\t! suggestions.length &&\n\t\t\tsuggestionsRequestRef.current === null\n\t\t) {\n\t\t\tdebouncedUpdateSuggestions( value );\n\t\t}\n\t}\n\n\tfunction handleKeyDown( event ) {\n\t\tonKeyDown?.( event );\n\n\t\t// If the suggestions are not shown or loading, we shouldn't handle the arrow keys\n\t\t// We shouldn't preventDefault to allow block arrow keys navigation.\n\t\tif ( ! showSuggestions || ! suggestions.length || isLoading ) {\n\t\t\t// In the Windows version of Firefox the up and down arrows don't move the caret\n\t\t\t// within an input field like they do for Mac Firefox/Chrome/Safari. This causes\n\t\t\t// a form of focus trapping that is disruptive to the user experience. This disruption\n\t\t\t// only happens if the caret is not in the first or last position in the text input.\n\t\t\t// See: https://github.com/WordPress/gutenberg/issues/5693#issuecomment-436684747\n\t\t\tswitch ( event.keyCode ) {\n\t\t\t\t// When UP is pressed, if the caret is at the start of the text, move it to the 0\n\t\t\t\t// position.\n\t\t\t\tcase UP: {\n\t\t\t\t\tif ( 0 !== event.target.selectionStart ) {\n\t\t\t\t\t\tevent.preventDefault();\n\n\t\t\t\t\t\t// Set the input caret to position 0.\n\t\t\t\t\t\tevent.target.setSelectionRange( 0, 0 );\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t\t// When DOWN is pressed, if the caret is not at the end of the text, move it to the\n\t\t\t\t// last position.\n\t\t\t\tcase DOWN: {\n\t\t\t\t\tif ( value.length !== event.target.selectionStart ) {\n\t\t\t\t\t\tevent.preventDefault();\n\n\t\t\t\t\t\t// Set the input caret to the last position.\n\t\t\t\t\t\tevent.target.setSelectionRange(\n\t\t\t\t\t\t\tvalue.length,\n\t\t\t\t\t\t\tvalue.length\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\t// Submitting while loading should trigger onSubmit.\n\t\t\t\tcase ENTER: {\n\t\t\t\t\tif ( onSubmit ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tonSubmit( null, event );\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\tconst suggestion = suggestions[ selectedSuggestion ];\n\n\t\tswitch ( event.keyCode ) {\n\t\t\tcase UP: {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tsetSelectedSuggestion(\n\t\t\t\t\t! selectedSuggestion\n\t\t\t\t\t\t? suggestions.length - 1\n\t\t\t\t\t\t: selectedSuggestion - 1\n\t\t\t\t);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase DOWN: {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tsetSelectedSuggestion(\n\t\t\t\t\tselectedSuggestion === null ||\n\t\t\t\t\t\tselectedSuggestion === suggestions.length - 1\n\t\t\t\t\t\t? 0\n\t\t\t\t\t\t: selectedSuggestion + 1\n\t\t\t\t);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase TAB: {\n\t\t\t\tif ( selectedSuggestion !== null ) {\n\t\t\t\t\tselectLink( suggestion );\n\t\t\t\t\t// Announce a link has been selected when tabbing away from the input field.\n\t\t\t\t\tspeak( __( 'Link selected.' ) );\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase ENTER: {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif ( selectedSuggestion !== null ) {\n\t\t\t\t\tselectLink( suggestion );\n\n\t\t\t\t\tif ( onSubmit ) {\n\t\t\t\t\t\tonSubmit( suggestion, event );\n\t\t\t\t\t}\n\t\t\t\t} else if ( onSubmit ) {\n\t\t\t\t\tonSubmit( null, event );\n\t\t\t\t}\n\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\tconst controlProps = {\n\t\tid: inputId, // Passes attribute to label for the for attribute\n\t\tlabel,\n\t\tclassName: clsx( 'block-editor-url-input', className, {\n\t\t\t'is-full-width': isFullWidth,\n\t\t} ),\n\t\thideLabelFromVision,\n\t};\n\n\tconst inputProps = {\n\t\tid: inputId,\n\t\tvalue,\n\t\trequired,\n\t\ttype: 'text',\n\t\tname: inputId,\n\t\tautoComplete: 'off',\n\t\tonChange: disabled ? noop : handleChange,\n\t\tonFocus: disabled ? noop : handleFocus,\n\t\tonKeyDown: disabled ? noop : handleKeyDown,\n\t\tplaceholder,\n\t\trole: 'combobox',\n\t\t'aria-label': label ? undefined : __( 'URL' ), // Ensure input always has an accessible label\n\t\t'aria-expanded': showSuggestions,\n\t\t'aria-autocomplete': 'list',\n\t\t'aria-owns': suggestionsListboxId,\n\t\t'aria-activedescendant':\n\t\t\tselectedSuggestion !== null\n\t\t\t\t? `${ suggestionOptionIdPrefix }-${ selectedSuggestion }`\n\t\t\t\t: undefined,\n\t\tref: controlInputRef,\n\t\tdisabled,\n\t\tsuffix,\n\t\thelp,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<Control\n\t\t\t\tcontrolProps={ controlProps }\n\t\t\t\tinputProps={ inputProps }\n\t\t\t\tisLoading={ isLoading }\n\t\t\t\tcustomValidity={ customValidity }\n\t\t\t\tmarkWhenOptional={ markWhenOptional }\n\t\t\t\trenderControl={ renderControl }\n\t\t\t/>\n\t\t\t{ showSuggestions && suggestions.length > 0 && (\n\t\t\t\t<Suggestions\n\t\t\t\t\tautocompleteRef={ autocompleteRef }\n\t\t\t\t\tclassName={ className }\n\t\t\t\t\thandleSuggestionClick={ handleSuggestionClick }\n\t\t\t\t\tisLoading={ isLoading }\n\t\t\t\t\trenderSuggestions={ renderSuggestions }\n\t\t\t\t\tselectedSuggestion={ selectedSuggestion }\n\t\t\t\t\tsuggestionNodesRef={ suggestionNodesRef }\n\t\t\t\t\tsuggestionOptionIdPrefix={ suggestionOptionIdPrefix }\n\t\t\t\t\tsuggestions={ suggestions }\n\t\t\t\t\tsuggestionsListboxId={ suggestionsListboxId }\n\t\t\t\t\tsuggestionsValue={ suggestionsValue }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction Control( {\n\tcontrolProps,\n\tinputProps,\n\tisLoading,\n\tcustomValidity,\n\tmarkWhenOptional,\n\trenderControl,\n} ) {\n\t// Once a validity has been reported, keep using the validated control, so\n\t// that clearing the validity doesn't remount (and blur) the input.\n\tconst [ isValidated, setIsValidated ] = useState(\n\t\tcustomValidity !== undefined\n\t);\n\n\tif ( customValidity !== undefined && ! isValidated ) {\n\t\tsetIsValidated( true );\n\t}\n\n\tif ( renderControl ) {\n\t\treturn renderControl( controlProps, inputProps, isLoading );\n\t}\n\n\tconst MaybeValidatedInputControl = isValidated\n\t\t? ValidatedInputControl\n\t\t: InputControl;\n\n\treturn (\n\t\t<BaseControl { ...controlProps }>\n\t\t\t<MaybeValidatedInputControl\n\t\t\t\t{ ...inputProps }\n\t\t\t\t{ ...( isValidated && {\n\t\t\t\t\tcustomValidity,\n\t\t\t\t\t// Suppress the \"(Required)\" indicator in the label.\n\t\t\t\t\t// The field is still required for validation, but the indicator\n\t\t\t\t\t// can be hidden when markWhenOptional is set to true.\n\t\t\t\t\t...( markWhenOptional !== undefined && {\n\t\t\t\t\t\tmarkWhenOptional,\n\t\t\t\t\t} ),\n\t\t\t\t} ) }\n\t\t\t/>\n\t\t\t{ isLoading && <Spinner /> }\n\t\t</BaseControl>\n\t);\n}\n\nfunction Suggestions( {\n\tautocompleteRef,\n\tclassName,\n\thandleSuggestionClick,\n\tisLoading,\n\trenderSuggestions,\n\tselectedSuggestion,\n\tsuggestionNodesRef,\n\tsuggestionOptionIdPrefix,\n\tsuggestions,\n\tsuggestionsListboxId,\n\tsuggestionsValue,\n} ) {\n\tconst suggestionsListProps = {\n\t\tid: suggestionsListboxId,\n\t\tref: autocompleteRef,\n\t\trole: 'listbox',\n\t};\n\n\tconst buildSuggestionItemProps = ( suggestion, index ) => {\n\t\treturn {\n\t\t\trole: 'option',\n\t\t\ttabIndex: '-1',\n\t\t\tid: `${ suggestionOptionIdPrefix }-${ index }`,\n\t\t\tref: ( node ) => {\n\t\t\t\tsuggestionNodesRef.current[ index ] = node;\n\t\t\t},\n\t\t\t'aria-selected': index === selectedSuggestion ? true : undefined,\n\t\t};\n\t};\n\n\tif ( isFunction( renderSuggestions ) ) {\n\t\treturn renderSuggestions( {\n\t\t\tsuggestions,\n\t\t\tselectedSuggestion,\n\t\t\tsuggestionsListProps,\n\t\t\tbuildSuggestionItemProps,\n\t\t\tisLoading,\n\t\t\thandleSuggestionClick,\n\t\t\tisInitialSuggestions: ! suggestionsValue?.length,\n\t\t\tcurrentInputValue: suggestionsValue,\n\t\t} );\n\t}\n\n\treturn (\n\t\t<Popover placement=\"bottom\" focusOnMount={ false }>\n\t\t\t<div\n\t\t\t\t{ ...suggestionsListProps }\n\t\t\t\tclassName={ clsx( 'block-editor-url-input__suggestions', {\n\t\t\t\t\t[ `${ className }__suggestions` ]: className,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ suggestions.map( ( suggestion, index ) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t{ ...buildSuggestionItemProps( suggestion, index ) }\n\t\t\t\t\t\tkey={ suggestion.id }\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'block-editor-url-input__suggestion',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-selected': index === selectedSuggestion,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonClick={ () => handleSuggestionClick( suggestion ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ suggestion.title }\n\t\t\t\t\t</Button>\n\t\t\t\t) ) }\n\t\t\t</div>\n\t\t</Popover>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/writing-flow/index.mjs

@@ -13,6 +13,7 @@ import { usePreviewModeNav } from "./use-preview-mode-nav.mjs";
 import useSelectAll from "./use-select-all.mjs";
 import useDragSelection from "./use-drag-selection.mjs";
 import useSelectionObserver from "./use-selection-observer.mjs";
+import useEditableRootEventHandlers from "./use-editable-root-event-handlers.mjs";
 import useClickSelection from "./use-click-selection.mjs";
 import useInput from "./use-input.mjs";
 import useClipboardHandler from "./use-clipboard-handler.mjs";
@@ -28,6 +29,7 @@ function useWritingFlow() {
     before,
     useMergeRefs([
       ref,
+      useEditableRootEventHandlers(),
       useClipboardHandler(),
       useInput(),
       useEditableRoot(),

package/build-module/components/writing-flow/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/writing-flow/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { useMergeRefs, useRefEffect } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useEditableRoot from './use-editable-root';\nimport useHomeEnd from './use-home-end';\nimport useMultiSelection from './use-multi-selection';\nimport useTabNav from './use-tab-nav';\nimport useArrowNav from './use-arrow-nav';\nimport { usePreviewModeNav } from './use-preview-mode-nav';\nimport useSelectAll from './use-select-all';\nimport useDragSelection from './use-drag-selection';\nimport useSelectionObserver from './use-selection-observer';\nimport useClickSelection from './use-click-selection';\nimport useInput from './use-input';\nimport useClipboardHandler from './use-clipboard-handler';\nimport { store as blockEditorStore } from '../../store';\n\nexport function useWritingFlow() {\n\tconst [ before, ref, after ] = useTabNav();\n\tconst hasMultiSelection = useSelect(\n\t\t( select ) => select( blockEditorStore ).hasMultiSelection(),\n\t\t[]\n\t);\n\n\treturn [\n\t\tbefore,\n\t\tuseMergeRefs( [\n\t\t\tref,\n\t\t\tuseClipboardHandler(),\n\t\t\tuseInput(),\n\t\t\tuseEditableRoot(),\n\t\t\tuseHomeEnd(),\n\t\t\tuseDragSelection(),\n\t\t\tuseSelectionObserver(),\n\t\t\tuseClickSelection(),\n\t\t\tuseMultiSelection(),\n\t\t\tuseSelectAll(),\n\t\t\tuseArrowNav(),\n\t\t\tusePreviewModeNav(),\n\t\t\tuseRefEffect(\n\t\t\t\t( node ) => {\n\t\t\t\t\tnode.tabIndex = 0;\n\t\t\t\t\tnode.dataset.hasMultiSelection = hasMultiSelection;\n\n\t\t\t\t\tif ( ! hasMultiSelection ) {\n\t\t\t\t\t\treturn () => {\n\t\t\t\t\t\t\tdelete node.dataset.hasMultiSelection;\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\n\t\t\t\t\tnode.setAttribute(\n\t\t\t\t\t\t'aria-label',\n\t\t\t\t\t\t__( 'Multiple selected blocks' )\n\t\t\t\t\t);\n\n\t\t\t\t\treturn () => {\n\t\t\t\t\t\tdelete node.dataset.hasMultiSelection;\n\t\t\t\t\t\t// The wrapper may remain the editing host (the\n\t\t\t\t\t\t// collapsed block supports `editableRoot`): keep it\n\t\t\t\t\t\t// named, as the textbox role requires.\n\t\t\t\t\t\tif ( node.contentEditable === 'true' ) {\n\t\t\t\t\t\t\tnode.setAttribute(\n\t\t\t\t\t\t\t\t'aria-label',\n\t\t\t\t\t\t\t\t__( 'Editor canvas' )\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnode.removeAttribute( 'aria-label' );\n\t\t\t\t\t\t}\n\t\t\t\t\t};\n\t\t\t\t},\n\t\t\t\t[ hasMultiSelection ]\n\t\t\t),\n\t\t] ),\n\t\tafter,\n\t];\n}\n\nfunction WritingFlow( { children, ...props }, forwardedRef ) {\n\tconst [ before, ref, after ] = useWritingFlow();\n\treturn (\n\t\t<>\n\t\t\t{ before }\n\t\t\t<div\n\t\t\t\t{ ...props }\n\t\t\t\tref={ useMergeRefs( [ ref, forwardedRef ] ) }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\tprops.className,\n\t\t\t\t\t'block-editor-writing-flow'\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t\t{ after }\n\t\t</>\n\t);\n}\n\n/**\n * Handles selection and navigation across blocks. This component should be\n * wrapped around BlockList.\n *\n * @param {Object}  props          Component properties.\n * @param {Element} props.children Children to be rendered.\n */\nexport default forwardRef( WritingFlow );\n"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,iBAAiB;AAC1B,SAAS,UAAU;AACnB,SAAS,cAAc,oBAAoB;AAC3C,SAAS,kBAAkB;AAK3B,OAAO,qBAAqB;AAC5B,OAAO,gBAAgB;AACvB,OAAO,uBAAuB;AAC9B,OAAO,eAAe;AACtB,OAAO,iBAAiB;AACxB,SAAS,yBAAyB;AAClC,OAAO,kBAAkB;AACzB,OAAO,sBAAsB;AAC7B,OAAO,0BAA0B;AACjC,OAAO,uBAAuB;AAC9B,OAAO,cAAc;AACrB,OAAO,yBAAyB;AAChC,SAAS,SAAS,wBAAwB;AAiExC,mBAEC,KAFD;AA/DK,SAAS,iBAAiB;AAChC,QAAM,CAAE,QAAQ,KAAK,KAAM,IAAI,UAAU;AACzC,QAAM,oBAAoB;AAAA,IACzB,CAAE,WAAY,OAAQ,gBAAiB,EAAE,kBAAkB;AAAA,IAC3D,CAAC;AAAA,EACF;AAEA,SAAO;AAAA,IACN;AAAA,IACA,aAAc;AAAA,MACb;AAAA,MACA,oBAAoB;AAAA,MACpB,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,qBAAqB;AAAA,MACrB,kBAAkB;AAAA,MAClB,kBAAkB;AAAA,MAClB,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,kBAAkB;AAAA,MAClB;AAAA,QACC,CAAE,SAAU;AACX,eAAK,WAAW;AAChB,eAAK,QAAQ,oBAAoB;AAEjC,cAAK,CAAE,mBAAoB;AAC1B,mBAAO,MAAM;AACZ,qBAAO,KAAK,QAAQ;AAAA,YACrB;AAAA,UACD;AAEA,eAAK;AAAA,YACJ;AAAA,YACA,GAAI,0BAA2B;AAAA,UAChC;AAEA,iBAAO,MAAM;AACZ,mBAAO,KAAK,QAAQ;AAIpB,gBAAK,KAAK,oBAAoB,QAAS;AACtC,mBAAK;AAAA,gBACJ;AAAA,gBACA,GAAI,eAAgB;AAAA,cACrB;AAAA,YACD,OAAO;AACN,mBAAK,gBAAiB,YAAa;AAAA,YACpC;AAAA,UACD;AAAA,QACD;AAAA,QACA,CAAE,iBAAkB;AAAA,MACrB;AAAA,IACD,CAAE;AAAA,IACF;AAAA,EACD;AACD;AAEA,SAAS,YAAa,EAAE,UAAU,GAAG,MAAM,GAAG,cAAe;AAC5D,QAAM,CAAE,QAAQ,KAAK,KAAM,IAAI,eAAe;AAC9C,SACC,iCACG;AAAA;AAAA,IACF;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACL,KAAM,aAAc,CAAE,KAAK,YAAa,CAAE;AAAA,QAC1C,WAAY;AAAA,UACX,MAAM;AAAA,UACN;AAAA,QACD;AAAA,QAEE;AAAA;AAAA,IACH;AAAA,IACE;AAAA,KACH;AAEF;AASA,IAAO,uBAAQ,WAAY,WAAY;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { useMergeRefs, useRefEffect } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useEditableRoot from './use-editable-root';\nimport useHomeEnd from './use-home-end';\nimport useMultiSelection from './use-multi-selection';\nimport useTabNav from './use-tab-nav';\nimport useArrowNav from './use-arrow-nav';\nimport { usePreviewModeNav } from './use-preview-mode-nav';\nimport useSelectAll from './use-select-all';\nimport useDragSelection from './use-drag-selection';\nimport useSelectionObserver from './use-selection-observer';\nimport useEditableRootEventHandlers from './use-editable-root-event-handlers';\nimport useClickSelection from './use-click-selection';\nimport useInput from './use-input';\nimport useClipboardHandler from './use-clipboard-handler';\nimport { store as blockEditorStore } from '../../store';\n\nexport function useWritingFlow() {\n\tconst [ before, ref, after ] = useTabNav();\n\tconst hasMultiSelection = useSelect(\n\t\t( select ) => select( blockEditorStore ).hasMultiSelection(),\n\t\t[]\n\t);\n\n\treturn [\n\t\tbefore,\n\t\tuseMergeRefs( [\n\t\t\tref,\n\t\t\tuseEditableRootEventHandlers(),\n\t\t\tuseClipboardHandler(),\n\t\t\tuseInput(),\n\t\t\tuseEditableRoot(),\n\t\t\tuseHomeEnd(),\n\t\t\tuseDragSelection(),\n\t\t\tuseSelectionObserver(),\n\t\t\tuseClickSelection(),\n\t\t\tuseMultiSelection(),\n\t\t\tuseSelectAll(),\n\t\t\tuseArrowNav(),\n\t\t\tusePreviewModeNav(),\n\t\t\tuseRefEffect(\n\t\t\t\t( node ) => {\n\t\t\t\t\tnode.tabIndex = 0;\n\t\t\t\t\tnode.dataset.hasMultiSelection = hasMultiSelection;\n\n\t\t\t\t\tif ( ! hasMultiSelection ) {\n\t\t\t\t\t\treturn () => {\n\t\t\t\t\t\t\tdelete node.dataset.hasMultiSelection;\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\n\t\t\t\t\tnode.setAttribute(\n\t\t\t\t\t\t'aria-label',\n\t\t\t\t\t\t__( 'Multiple selected blocks' )\n\t\t\t\t\t);\n\n\t\t\t\t\treturn () => {\n\t\t\t\t\t\tdelete node.dataset.hasMultiSelection;\n\t\t\t\t\t\t// The wrapper may remain the editing host (the\n\t\t\t\t\t\t// collapsed block supports `editableRoot`): keep it\n\t\t\t\t\t\t// named, as the textbox role requires.\n\t\t\t\t\t\tif ( node.contentEditable === 'true' ) {\n\t\t\t\t\t\t\tnode.setAttribute(\n\t\t\t\t\t\t\t\t'aria-label',\n\t\t\t\t\t\t\t\t__( 'Editor canvas' )\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tnode.removeAttribute( 'aria-label' );\n\t\t\t\t\t\t}\n\t\t\t\t\t};\n\t\t\t\t},\n\t\t\t\t[ hasMultiSelection ]\n\t\t\t),\n\t\t] ),\n\t\tafter,\n\t];\n}\n\nfunction WritingFlow( { children, ...props }, forwardedRef ) {\n\tconst [ before, ref, after ] = useWritingFlow();\n\treturn (\n\t\t<>\n\t\t\t{ before }\n\t\t\t<div\n\t\t\t\t{ ...props }\n\t\t\t\tref={ useMergeRefs( [ ref, forwardedRef ] ) }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\tprops.className,\n\t\t\t\t\t'block-editor-writing-flow'\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t\t{ after }\n\t\t</>\n\t);\n}\n\n/**\n * Handles selection and navigation across blocks. This component should be\n * wrapped around BlockList.\n *\n * @param {Object}  props          Component properties.\n * @param {Element} props.children Children to be rendered.\n */\nexport default forwardRef( WritingFlow );\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,iBAAiB;AAC1B,SAAS,UAAU;AACnB,SAAS,cAAc,oBAAoB;AAC3C,SAAS,kBAAkB;AAK3B,OAAO,qBAAqB;AAC5B,OAAO,gBAAgB;AACvB,OAAO,uBAAuB;AAC9B,OAAO,eAAe;AACtB,OAAO,iBAAiB;AACxB,SAAS,yBAAyB;AAClC,OAAO,kBAAkB;AACzB,OAAO,sBAAsB;AAC7B,OAAO,0BAA0B;AACjC,OAAO,kCAAkC;AACzC,OAAO,uBAAuB;AAC9B,OAAO,cAAc;AACrB,OAAO,yBAAyB;AAChC,SAAS,SAAS,wBAAwB;AAkExC,mBAEC,KAFD;AAhEK,SAAS,iBAAiB;AAChC,QAAM,CAAE,QAAQ,KAAK,KAAM,IAAI,UAAU;AACzC,QAAM,oBAAoB;AAAA,IACzB,CAAE,WAAY,OAAQ,gBAAiB,EAAE,kBAAkB;AAAA,IAC3D,CAAC;AAAA,EACF;AAEA,SAAO;AAAA,IACN;AAAA,IACA,aAAc;AAAA,MACb;AAAA,MACA,6BAA6B;AAAA,MAC7B,oBAAoB;AAAA,MACpB,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,qBAAqB;AAAA,MACrB,kBAAkB;AAAA,MAClB,kBAAkB;AAAA,MAClB,aAAa;AAAA,MACb,YAAY;AAAA,MACZ,kBAAkB;AAAA,MAClB;AAAA,QACC,CAAE,SAAU;AACX,eAAK,WAAW;AAChB,eAAK,QAAQ,oBAAoB;AAEjC,cAAK,CAAE,mBAAoB;AAC1B,mBAAO,MAAM;AACZ,qBAAO,KAAK,QAAQ;AAAA,YACrB;AAAA,UACD;AAEA,eAAK;AAAA,YACJ;AAAA,YACA,GAAI,0BAA2B;AAAA,UAChC;AAEA,iBAAO,MAAM;AACZ,mBAAO,KAAK,QAAQ;AAIpB,gBAAK,KAAK,oBAAoB,QAAS;AACtC,mBAAK;AAAA,gBACJ;AAAA,gBACA,GAAI,eAAgB;AAAA,cACrB;AAAA,YACD,OAAO;AACN,mBAAK,gBAAiB,YAAa;AAAA,YACpC;AAAA,UACD;AAAA,QACD;AAAA,QACA,CAAE,iBAAkB;AAAA,MACrB;AAAA,IACD,CAAE;AAAA,IACF;AAAA,EACD;AACD;AAEA,SAAS,YAAa,EAAE,UAAU,GAAG,MAAM,GAAG,cAAe;AAC5D,QAAM,CAAE,QAAQ,KAAK,KAAM,IAAI,eAAe;AAC9C,SACC,iCACG;AAAA;AAAA,IACF;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACL,KAAM,aAAc,CAAE,KAAK,YAAa,CAAE;AAAA,QAC1C,WAAY;AAAA,UACX,MAAM;AAAA,UACN;AAAA,QACD;AAAA,QAEE;AAAA;AAAA,IACH;AAAA,IACE;AAAA,KACH;AAEF;AASA,IAAO,uBAAQ,WAAY,WAAY;",
   "names": []
 }

package/build-module/components/writing-flow/use-arrow-nav.mjs

@@ -86,11 +86,15 @@ function useArrowNav() {
   const {
     getMultiSelectedBlocksStartClientId,
     getMultiSelectedBlocksEndClientId,
+    getNextBlockClientId,
+    getPreviousBlockClientId,
+    getSelectedBlockClientId,
+    getSelectionStart,
     getSettings,
     hasMultiSelection,
     __unstableIsFullySelected
   } = useSelect(blockEditorStore);
-  const { selectBlock } = useDispatch(blockEditorStore);
+  const { selectBlock, multiSelect } = useDispatch(blockEditorStore);
   return useRefEffect((node) => {
     let verticalRect;
     function onMouseDown() {
@@ -133,6 +137,16 @@ function useArrowNav() {
       }
       if (hasMultiSelection()) {
         if (shiftKey) {
+          const selection = defaultView.getSelection();
+          if (__unstableIsFullySelected() && (!selection.rangeCount || selection.isCollapsed)) {
+            const anchorClientId = getMultiSelectedBlocksStartClientId();
+            const focusClientId = getMultiSelectedBlocksEndClientId();
+            const nextClientId = isReverse ? getPreviousBlockClientId(focusClientId) : getNextBlockClientId(focusClientId);
+            if (nextClientId) {
+              multiSelect(anchorClientId, nextClientId);
+              event.preventDefault();
+            }
+          }
           return;
         }
         if (!__unstableIsFullySelected()) {
@@ -146,6 +160,15 @@ function useArrowNav() {
         }
         return;
       }
+      if (shiftKey && getSelectedBlockClientId() && !getSelectionStart().attributeKey) {
+        const selectedClientId = getSelectedBlockClientId();
+        const nextClientId = isReverse ? getPreviousBlockClientId(selectedClientId) : getNextBlockClientId(selectedClientId);
+        if (nextClientId) {
+          multiSelect(selectedClientId, nextClientId);
+          event.preventDefault();
+        }
+        return;
+      }
       if (!isNavigationCandidate(target, keyCode, hasModifier)) {
         return;
       }

package/build-module/components/writing-flow/use-arrow-nav.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/writing-flow/use-arrow-nav.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tcomputeCaretRect,\n\tfocus,\n\tisHorizontalEdge,\n\tisVerticalEdge,\n\tplaceCaretAtHorizontalEdge,\n\tplaceCaretAtVerticalEdge,\n\tisRTL,\n\tisFormElement,\n} from '@wordpress/dom';\nimport { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { useRefEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { getBlockClientId, getSelectionEditableElement } from '../../utils/dom';\nimport { store as blockEditorStore } from '../../store';\nimport { setContentEditableWrapper } from './utils';\n\n/**\n * Returns true if the element should consider edge navigation upon a keyboard\n * event of the given directional key code, or false otherwise.\n *\n * @param {Element} element     HTML element to test.\n * @param {number}  keyCode     KeyboardEvent keyCode to test.\n * @param {boolean} hasModifier Whether a modifier is pressed.\n *\n * @return {boolean} Whether element should consider edge navigation.\n */\nexport function isNavigationCandidate( element, keyCode, hasModifier ) {\n\tconst isVertical = keyCode === UP || keyCode === DOWN;\n\tconst { tagName } = element;\n\tconst elementType = element.getAttribute( 'type' );\n\n\t// Native inputs should not navigate vertically, unless they are simple types that don't need up/down arrow keys.\n\tif ( isVertical && ! hasModifier ) {\n\t\tif ( tagName === 'INPUT' ) {\n\t\t\tconst verticalInputTypes = [\n\t\t\t\t'date',\n\t\t\t\t'datetime-local',\n\t\t\t\t'month',\n\t\t\t\t'number',\n\t\t\t\t'range',\n\t\t\t\t'time',\n\t\t\t\t'week',\n\t\t\t];\n\t\t\treturn ! verticalInputTypes.includes( elementType );\n\t\t}\n\t\treturn true;\n\t}\n\n\t// Native inputs should not navigate horizontally, unless they are simple types that don't need left/right arrow keys.\n\tif ( tagName === 'INPUT' ) {\n\t\tconst simpleInputTypes = [\n\t\t\t'button',\n\t\t\t'checkbox',\n\t\t\t'number',\n\t\t\t'color',\n\t\t\t'file',\n\t\t\t'image',\n\t\t\t'radio',\n\t\t\t'reset',\n\t\t\t'submit',\n\t\t];\n\t\treturn simpleInputTypes.includes( elementType );\n\t}\n\n\t// Native textareas should not navigate horizontally.\n\treturn tagName !== 'TEXTAREA';\n}\n\n/**\n * Returns the optimal tab target from the given focused element in the desired\n * direction. A preference is made toward text fields, falling back to the block\n * focus stop if no other candidates exist for the block.\n *\n * @param {Element} target           Currently focused text field.\n * @param {boolean} isReverse        True if considering as the first field.\n * @param {Element} containerElement Element containing all blocks.\n * @param {boolean} onlyVertical     Whether to only consider tabbable elements\n *                                   that are visually above or under the\n *                                   target.\n *\n * @return {?Element} Optimal tab target, if one exists.\n */\nexport function getClosestTabbable(\n\ttarget,\n\tisReverse,\n\tcontainerElement,\n\tonlyVertical\n) {\n\t// Since the current focus target is not guaranteed to be a text field, find\n\t// all focusables. Tabbability is considered later.\n\tlet focusableNodes = focus.focusable.find( containerElement );\n\n\tif ( isReverse ) {\n\t\tfocusableNodes.reverse();\n\t}\n\n\t// Consider as candidates those focusables after the current target. It's\n\t// assumed this can only be reached if the target is focusable (on its\n\t// keydown event), so no need to verify it exists in the set.\n\tfocusableNodes = focusableNodes.slice(\n\t\tfocusableNodes.indexOf( target ) + 1\n\t);\n\n\tlet targetRect;\n\n\tif ( onlyVertical ) {\n\t\ttargetRect = target.getBoundingClientRect();\n\t}\n\n\tfunction isTabCandidate( node ) {\n\t\t// If it's a block wrapper (not itself a contenteditable editing surface)\n\t\t// and there are nested focusable nodes, skip because there are better\n\t\t// candidates. We must not skip contenteditable nodes that happen to\n\t\t// contain links or other focusable inline elements, since those are the\n\t\t// correct navigation targets.\n\t\t//\n\t\t// See https://github.com/WordPress/gutenberg/pull/77474\n\t\t// TODO: Consider fixing focus.tabbable\n\t\tif (\n\t\t\tnode.contentEditable !== 'true' &&\n\t\t\tgetBlockClientId( node ) &&\n\t\t\tfocus.focusable\n\t\t\t\t.find( node )\n\t\t\t\t// Exclude form elements for now because primary+a cannot be\n\t\t\t\t// used to select the parent element.\n\t\t\t\t.filter( ( element ) => ! isFormElement( element ) ).length !==\n\t\t\t\t0\n\t\t) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Not a candidate if the node is not tabbable.\n\t\tif ( ! focus.tabbable.isTabbableIndex( node ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Skip focusable elements such as links within content editable\n\t\t// nodes: nodes whose closest editable host is an editable element\n\t\t// within a block. When an editable root (e.g. the canvas wrapper)\n\t\t// is the editing host, everything within it is content editable,\n\t\t// but focusables like block wrappers are not text content.\n\t\tif (\n\t\t\tnode.isContentEditable &&\n\t\t\tnode.contentEditable !== 'true' &&\n\t\t\tgetBlockClientId( node.closest( '[contenteditable=\"true\"]' ) )\n\t\t) {\n\t\t\treturn false;\n\t\t}\n\n\t\tif ( onlyVertical ) {\n\t\t\tconst nodeRect = node.getBoundingClientRect();\n\n\t\t\tif (\n\t\t\t\tnodeRect.left >= targetRect.right ||\n\t\t\t\tnodeRect.right <= targetRect.left\n\t\t\t) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t}\n\n\t\treturn true;\n\t}\n\n\treturn focusableNodes.find( isTabCandidate );\n}\n\nexport default function useArrowNav() {\n\tconst {\n\t\tgetMultiSelectedBlocksStartClientId,\n\t\tgetMultiSelectedBlocksEndClientId,\n\t\tgetSettings,\n\t\thasMultiSelection,\n\t\t__unstableIsFullySelected,\n\t} = useSelect( blockEditorStore );\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\treturn useRefEffect( ( node ) => {\n\t\t// Here a DOMRect is stored while moving the caret vertically so\n\t\t// vertical position of the start position can be restored. This is to\n\t\t// recreate browser behaviour across blocks.\n\t\tlet verticalRect;\n\n\t\tfunction onMouseDown() {\n\t\t\tverticalRect = null;\n\t\t}\n\n\t\tfunction isClosestTabbableABlock( target, isReverse ) {\n\t\t\tconst closestTabbable = getClosestTabbable(\n\t\t\t\ttarget,\n\t\t\t\tisReverse,\n\t\t\t\tnode\n\t\t\t);\n\t\t\treturn closestTabbable && getBlockClientId( closestTabbable );\n\t\t}\n\n\t\tfunction onKeyDown( event ) {\n\t\t\t// Abort if navigation has already been handled (e.g. RichText\n\t\t\t// inline boundaries).\n\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst { keyCode, shiftKey, ctrlKey, altKey, metaKey } = event;\n\t\t\t// When the wrapper is contentEditable and holds focus (the\n\t\t\t// selected block supports `editableRoot`), the event targets the\n\t\t\t// wrapper; resolve the editable element containing the selection.\n\t\t\tconst target =\n\t\t\t\t( event.target === node &&\n\t\t\t\t\tgetSelectionEditableElement(\n\t\t\t\t\t\tnode.ownerDocument.defaultView.getSelection(),\n\t\t\t\t\t\tnode\n\t\t\t\t\t) ) ||\n\t\t\t\tevent.target;\n\t\t\tconst isUp = keyCode === UP;\n\t\t\tconst isDown = keyCode === DOWN;\n\t\t\tconst isLeft = keyCode === LEFT;\n\t\t\tconst isRight = keyCode === RIGHT;\n\t\t\tconst isReverse = isUp || isLeft;\n\t\t\tconst isHorizontal = isLeft || isRight;\n\t\t\tconst isVertical = isUp || isDown;\n\t\t\tconst isNav = isHorizontal || isVertical;\n\t\t\tconst hasModifier = shiftKey || ctrlKey || altKey || metaKey;\n\t\t\tconst isNavEdge = isVertical ? isVerticalEdge : isHorizontalEdge;\n\t\t\tconst { ownerDocument } = node;\n\t\t\tconst { defaultView } = ownerDocument;\n\n\t\t\tif ( ! isNav ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// In preview mode, navigation is handled by useSelectableBlocksNav.\n\t\t\tif ( getSettings().isPreviewMode ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// If there is a multi-selection, the arrow keys should collapse the\n\t\t\t// selection to the start or end of the selection.\n\t\t\tif ( hasMultiSelection() ) {\n\t\t\t\tif ( shiftKey ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Only handle if we have a full selection (not a native partial\n\t\t\t\t// selection).\n\t\t\t\tif ( ! __unstableIsFullySelected() ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\tif ( isReverse ) {\n\t\t\t\t\tselectBlock( getMultiSelectedBlocksStartClientId() );\n\t\t\t\t} else {\n\t\t\t\t\tselectBlock( getMultiSelectedBlocksEndClientId(), -1 );\n\t\t\t\t}\n\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Abort if our current target is not a candidate for navigation\n\t\t\t// (e.g. preserve native input behaviors).\n\t\t\tif ( ! isNavigationCandidate( target, keyCode, hasModifier ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// When presing any key other than up or down, the initial vertical\n\t\t\t// position must ALWAYS be reset. The vertical position is saved so\n\t\t\t// it can be restored as well as possible on sebsequent vertical\n\t\t\t// arrow key presses. It may not always be possible to restore the\n\t\t\t// exact same position (such as at an empty line), so it wouldn't be\n\t\t\t// good to compute the position right before any vertical arrow key\n\t\t\t// press.\n\t\t\tif ( ! isVertical ) {\n\t\t\t\tverticalRect = null;\n\t\t\t} else if ( ! verticalRect ) {\n\t\t\t\tverticalRect = computeCaretRect( defaultView );\n\t\t\t}\n\n\t\t\t// In the case of RTL scripts, right means previous and left means\n\t\t\t// next, which is the exact reverse of LTR.\n\t\t\tconst isReverseDir = isRTL( target ) ? ! isReverse : isReverse;\n\t\t\tconst { keepCaretInsideBlock } = getSettings();\n\n\t\t\tif ( shiftKey ) {\n\t\t\t\tif ( isNavEdge( target, isReverse ) ) {\n\t\t\t\t\tif ( isClosestTabbableABlock( target, isReverse ) ) {\n\t\t\t\t\t\tsetContentEditableWrapper( node, true );\n\t\t\t\t\t} else if ( node.contentEditable === 'true' ) {\n\t\t\t\t\t\t// There is no block to extend the selection into.\n\t\t\t\t\t\t// Within an editable wrapper the selection could\n\t\t\t\t\t\t// natively escape into surrounding editable elements\n\t\t\t\t\t\t// (e.g. the post title), so keep it inside the block\n\t\t\t\t\t\t// by extending it to the block's edge.\n\t\t\t\t\t\tconst selection = defaultView.getSelection();\n\t\t\t\t\t\tselection.extend(\n\t\t\t\t\t\t\ttarget,\n\t\t\t\t\t\t\tisReverse ? 0 : target.childNodes.length\n\t\t\t\t\t\t);\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (\n\t\t\t\tisVertical &&\n\t\t\t\tisVerticalEdge( target, isReverse ) &&\n\t\t\t\t// When Alt is pressed, only intercept if the caret is also at\n\t\t\t\t// the horizontal edge.\n\t\t\t\t( altKey ? isHorizontalEdge( target, isReverseDir ) : true ) &&\n\t\t\t\t! keepCaretInsideBlock\n\t\t\t) {\n\t\t\t\tconst closestTabbable = getClosestTabbable(\n\t\t\t\t\ttarget,\n\t\t\t\t\tisReverse,\n\t\t\t\t\tnode,\n\t\t\t\t\ttrue\n\t\t\t\t);\n\n\t\t\t\tif ( closestTabbable ) {\n\t\t\t\t\tplaceCaretAtVerticalEdge(\n\t\t\t\t\t\tclosestTabbable,\n\t\t\t\t\t\t// When Alt is pressed, place the caret at the furthest\n\t\t\t\t\t\t// horizontal edge and the furthest vertical edge.\n\t\t\t\t\t\taltKey ? ! isReverse : isReverse,\n\t\t\t\t\t\taltKey ? undefined : verticalRect\n\t\t\t\t\t);\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t} else if (\n\t\t\t\tisHorizontal &&\n\t\t\t\tdefaultView.getSelection().isCollapsed &&\n\t\t\t\tisHorizontalEdge( target, isReverseDir ) &&\n\t\t\t\t! keepCaretInsideBlock\n\t\t\t) {\n\t\t\t\tconst closestTabbable = getClosestTabbable(\n\t\t\t\t\ttarget,\n\t\t\t\t\tisReverseDir,\n\t\t\t\t\tnode\n\t\t\t\t);\n\t\t\t\tplaceCaretAtHorizontalEdge( closestTabbable, isReverse );\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t}\n\n\t\tnode.addEventListener( 'mousedown', onMouseDown );\n\t\tnode.addEventListener( 'keydown', onKeyDown );\n\t\treturn () => {\n\t\t\tnode.removeEventListener( 'mousedown', onMouseDown );\n\t\t\tnode.removeEventListener( 'keydown', onKeyDown );\n\t\t};\n\t}, [] );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tcomputeCaretRect,\n\tfocus,\n\tisHorizontalEdge,\n\tisVerticalEdge,\n\tplaceCaretAtHorizontalEdge,\n\tplaceCaretAtVerticalEdge,\n\tisRTL,\n\tisFormElement,\n} from '@wordpress/dom';\nimport { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { useRefEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { getBlockClientId, getSelectionEditableElement } from '../../utils/dom';\nimport { store as blockEditorStore } from '../../store';\nimport { setContentEditableWrapper } from './utils';\n\n/**\n * Returns true if the element should consider edge navigation upon a keyboard\n * event of the given directional key code, or false otherwise.\n *\n * @param {Element} element     HTML element to test.\n * @param {number}  keyCode     KeyboardEvent keyCode to test.\n * @param {boolean} hasModifier Whether a modifier is pressed.\n *\n * @return {boolean} Whether element should consider edge navigation.\n */\nexport function isNavigationCandidate( element, keyCode, hasModifier ) {\n\tconst isVertical = keyCode === UP || keyCode === DOWN;\n\tconst { tagName } = element;\n\tconst elementType = element.getAttribute( 'type' );\n\n\t// Native inputs should not navigate vertically, unless they are simple types that don't need up/down arrow keys.\n\tif ( isVertical && ! hasModifier ) {\n\t\tif ( tagName === 'INPUT' ) {\n\t\t\tconst verticalInputTypes = [\n\t\t\t\t'date',\n\t\t\t\t'datetime-local',\n\t\t\t\t'month',\n\t\t\t\t'number',\n\t\t\t\t'range',\n\t\t\t\t'time',\n\t\t\t\t'week',\n\t\t\t];\n\t\t\treturn ! verticalInputTypes.includes( elementType );\n\t\t}\n\t\treturn true;\n\t}\n\n\t// Native inputs should not navigate horizontally, unless they are simple types that don't need left/right arrow keys.\n\tif ( tagName === 'INPUT' ) {\n\t\tconst simpleInputTypes = [\n\t\t\t'button',\n\t\t\t'checkbox',\n\t\t\t'number',\n\t\t\t'color',\n\t\t\t'file',\n\t\t\t'image',\n\t\t\t'radio',\n\t\t\t'reset',\n\t\t\t'submit',\n\t\t];\n\t\treturn simpleInputTypes.includes( elementType );\n\t}\n\n\t// Native textareas should not navigate horizontally.\n\treturn tagName !== 'TEXTAREA';\n}\n\n/**\n * Returns the optimal tab target from the given focused element in the desired\n * direction. A preference is made toward text fields, falling back to the block\n * focus stop if no other candidates exist for the block.\n *\n * @param {Element} target           Currently focused text field.\n * @param {boolean} isReverse        True if considering as the first field.\n * @param {Element} containerElement Element containing all blocks.\n * @param {boolean} onlyVertical     Whether to only consider tabbable elements\n *                                   that are visually above or under the\n *                                   target.\n *\n * @return {?Element} Optimal tab target, if one exists.\n */\nexport function getClosestTabbable(\n\ttarget,\n\tisReverse,\n\tcontainerElement,\n\tonlyVertical\n) {\n\t// Since the current focus target is not guaranteed to be a text field, find\n\t// all focusables. Tabbability is considered later.\n\tlet focusableNodes = focus.focusable.find( containerElement );\n\n\tif ( isReverse ) {\n\t\tfocusableNodes.reverse();\n\t}\n\n\t// Consider as candidates those focusables after the current target. It's\n\t// assumed this can only be reached if the target is focusable (on its\n\t// keydown event), so no need to verify it exists in the set.\n\tfocusableNodes = focusableNodes.slice(\n\t\tfocusableNodes.indexOf( target ) + 1\n\t);\n\n\tlet targetRect;\n\n\tif ( onlyVertical ) {\n\t\ttargetRect = target.getBoundingClientRect();\n\t}\n\n\tfunction isTabCandidate( node ) {\n\t\t// If it's a block wrapper (not itself a contenteditable editing surface)\n\t\t// and there are nested focusable nodes, skip because there are better\n\t\t// candidates. We must not skip contenteditable nodes that happen to\n\t\t// contain links or other focusable inline elements, since those are the\n\t\t// correct navigation targets.\n\t\t//\n\t\t// See https://github.com/WordPress/gutenberg/pull/77474\n\t\t// TODO: Consider fixing focus.tabbable\n\t\tif (\n\t\t\tnode.contentEditable !== 'true' &&\n\t\t\tgetBlockClientId( node ) &&\n\t\t\tfocus.focusable\n\t\t\t\t.find( node )\n\t\t\t\t// Exclude form elements for now because primary+a cannot be\n\t\t\t\t// used to select the parent element.\n\t\t\t\t.filter( ( element ) => ! isFormElement( element ) ).length !==\n\t\t\t\t0\n\t\t) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Not a candidate if the node is not tabbable.\n\t\tif ( ! focus.tabbable.isTabbableIndex( node ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Skip focusable elements such as links within content editable\n\t\t// nodes: nodes whose closest editable host is an editable element\n\t\t// within a block. When an editable root (e.g. the canvas wrapper)\n\t\t// is the editing host, everything within it is content editable,\n\t\t// but focusables like block wrappers are not text content.\n\t\tif (\n\t\t\tnode.isContentEditable &&\n\t\t\tnode.contentEditable !== 'true' &&\n\t\t\tgetBlockClientId( node.closest( '[contenteditable=\"true\"]' ) )\n\t\t) {\n\t\t\treturn false;\n\t\t}\n\n\t\tif ( onlyVertical ) {\n\t\t\tconst nodeRect = node.getBoundingClientRect();\n\n\t\t\tif (\n\t\t\t\tnodeRect.left >= targetRect.right ||\n\t\t\t\tnodeRect.right <= targetRect.left\n\t\t\t) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t}\n\n\t\treturn true;\n\t}\n\n\treturn focusableNodes.find( isTabCandidate );\n}\n\nexport default function useArrowNav() {\n\tconst {\n\t\tgetMultiSelectedBlocksStartClientId,\n\t\tgetMultiSelectedBlocksEndClientId,\n\t\tgetNextBlockClientId,\n\t\tgetPreviousBlockClientId,\n\t\tgetSelectedBlockClientId,\n\t\tgetSelectionStart,\n\t\tgetSettings,\n\t\thasMultiSelection,\n\t\t__unstableIsFullySelected,\n\t} = useSelect( blockEditorStore );\n\tconst { selectBlock, multiSelect } = useDispatch( blockEditorStore );\n\treturn useRefEffect( ( node ) => {\n\t\t// Here a DOMRect is stored while moving the caret vertically so\n\t\t// vertical position of the start position can be restored. This is to\n\t\t// recreate browser behaviour across blocks.\n\t\tlet verticalRect;\n\n\t\tfunction onMouseDown() {\n\t\t\tverticalRect = null;\n\t\t}\n\n\t\tfunction isClosestTabbableABlock( target, isReverse ) {\n\t\t\tconst closestTabbable = getClosestTabbable(\n\t\t\t\ttarget,\n\t\t\t\tisReverse,\n\t\t\t\tnode\n\t\t\t);\n\t\t\treturn closestTabbable && getBlockClientId( closestTabbable );\n\t\t}\n\n\t\tfunction onKeyDown( event ) {\n\t\t\t// Abort if navigation has already been handled (e.g. RichText\n\t\t\t// inline boundaries).\n\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst { keyCode, shiftKey, ctrlKey, altKey, metaKey } = event;\n\t\t\t// When the wrapper is contentEditable and holds focus (the\n\t\t\t// selected block supports `editableRoot`), the event targets the\n\t\t\t// wrapper; resolve the editable element containing the selection.\n\t\t\tconst target =\n\t\t\t\t( event.target === node &&\n\t\t\t\t\tgetSelectionEditableElement(\n\t\t\t\t\t\tnode.ownerDocument.defaultView.getSelection(),\n\t\t\t\t\t\tnode\n\t\t\t\t\t) ) ||\n\t\t\t\tevent.target;\n\t\t\tconst isUp = keyCode === UP;\n\t\t\tconst isDown = keyCode === DOWN;\n\t\t\tconst isLeft = keyCode === LEFT;\n\t\t\tconst isRight = keyCode === RIGHT;\n\t\t\tconst isReverse = isUp || isLeft;\n\t\t\tconst isHorizontal = isLeft || isRight;\n\t\t\tconst isVertical = isUp || isDown;\n\t\t\tconst isNav = isHorizontal || isVertical;\n\t\t\tconst hasModifier = shiftKey || ctrlKey || altKey || metaKey;\n\t\t\tconst isNavEdge = isVertical ? isVerticalEdge : isHorizontalEdge;\n\t\t\tconst { ownerDocument } = node;\n\t\t\tconst { defaultView } = ownerDocument;\n\n\t\t\tif ( ! isNav ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// In preview mode, navigation is handled by useSelectableBlocksNav.\n\t\t\tif ( getSettings().isPreviewMode ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// If there is a multi-selection, the arrow keys should collapse the\n\t\t\t// selection to the start or end of the selection.\n\t\t\tif ( hasMultiSelection() ) {\n\t\t\t\tif ( shiftKey ) {\n\t\t\t\t\t// A fully selected multi-selection has no native\n\t\t\t\t\t// selection to extend (use-multi-selection cleared it),\n\t\t\t\t\t// so grow or shrink it by one block at the focus end.\n\t\t\t\t\t// Only without a usable native selection: a selection\n\t\t\t\t\t// that is fully selected because it resolves to a\n\t\t\t\t\t// nesting ancestor keeps its native selection, which\n\t\t\t\t\t// the browser extends natively (and the observer\n\t\t\t\t\t// promotes to the common level).\n\t\t\t\t\tconst selection = defaultView.getSelection();\n\t\t\t\t\tif (\n\t\t\t\t\t\t__unstableIsFullySelected() &&\n\t\t\t\t\t\t( ! selection.rangeCount || selection.isCollapsed )\n\t\t\t\t\t) {\n\t\t\t\t\t\tconst anchorClientId =\n\t\t\t\t\t\t\tgetMultiSelectedBlocksStartClientId();\n\t\t\t\t\t\tconst focusClientId =\n\t\t\t\t\t\t\tgetMultiSelectedBlocksEndClientId();\n\t\t\t\t\t\tconst nextClientId = isReverse\n\t\t\t\t\t\t\t? getPreviousBlockClientId( focusClientId )\n\t\t\t\t\t\t\t: getNextBlockClientId( focusClientId );\n\n\t\t\t\t\t\tif ( nextClientId ) {\n\t\t\t\t\t\t\tmultiSelect( anchorClientId, nextClientId );\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Only handle if we have a full selection (not a native partial\n\t\t\t\t// selection).\n\t\t\t\tif ( ! __unstableIsFullySelected() ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\tif ( isReverse ) {\n\t\t\t\t\tselectBlock( getMultiSelectedBlocksStartClientId() );\n\t\t\t\t} else {\n\t\t\t\t\tselectBlock( getMultiSelectedBlocksEndClientId(), -1 );\n\t\t\t\t}\n\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// A block selected without a text selection within it (e.g. an\n\t\t\t// image or spacer) has no native selection to extend: start a\n\t\t\t// block multi-selection with the adjacent block.\n\t\t\tif (\n\t\t\t\tshiftKey &&\n\t\t\t\tgetSelectedBlockClientId() &&\n\t\t\t\t! getSelectionStart().attributeKey\n\t\t\t) {\n\t\t\t\tconst selectedClientId = getSelectedBlockClientId();\n\t\t\t\tconst nextClientId = isReverse\n\t\t\t\t\t? getPreviousBlockClientId( selectedClientId )\n\t\t\t\t\t: getNextBlockClientId( selectedClientId );\n\n\t\t\t\tif ( nextClientId ) {\n\t\t\t\t\tmultiSelect( selectedClientId, nextClientId );\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Abort if our current target is not a candidate for navigation\n\t\t\t// (e.g. preserve native input behaviors).\n\t\t\tif ( ! isNavigationCandidate( target, keyCode, hasModifier ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// When presing any key other than up or down, the initial vertical\n\t\t\t// position must ALWAYS be reset. The vertical position is saved so\n\t\t\t// it can be restored as well as possible on sebsequent vertical\n\t\t\t// arrow key presses. It may not always be possible to restore the\n\t\t\t// exact same position (such as at an empty line), so it wouldn't be\n\t\t\t// good to compute the position right before any vertical arrow key\n\t\t\t// press.\n\t\t\tif ( ! isVertical ) {\n\t\t\t\tverticalRect = null;\n\t\t\t} else if ( ! verticalRect ) {\n\t\t\t\tverticalRect = computeCaretRect( defaultView );\n\t\t\t}\n\n\t\t\t// In the case of RTL scripts, right means previous and left means\n\t\t\t// next, which is the exact reverse of LTR.\n\t\t\tconst isReverseDir = isRTL( target ) ? ! isReverse : isReverse;\n\t\t\tconst { keepCaretInsideBlock } = getSettings();\n\n\t\t\tif ( shiftKey ) {\n\t\t\t\tif ( isNavEdge( target, isReverse ) ) {\n\t\t\t\t\tif ( isClosestTabbableABlock( target, isReverse ) ) {\n\t\t\t\t\t\tsetContentEditableWrapper( node, true );\n\t\t\t\t\t} else if ( node.contentEditable === 'true' ) {\n\t\t\t\t\t\t// There is no block to extend the selection into.\n\t\t\t\t\t\t// Within an editable wrapper the selection could\n\t\t\t\t\t\t// natively escape into surrounding editable elements\n\t\t\t\t\t\t// (e.g. the post title), so keep it inside the block\n\t\t\t\t\t\t// by extending it to the block's edge.\n\t\t\t\t\t\tconst selection = defaultView.getSelection();\n\t\t\t\t\t\tselection.extend(\n\t\t\t\t\t\t\ttarget,\n\t\t\t\t\t\t\tisReverse ? 0 : target.childNodes.length\n\t\t\t\t\t\t);\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (\n\t\t\t\tisVertical &&\n\t\t\t\tisVerticalEdge( target, isReverse ) &&\n\t\t\t\t// When Alt is pressed, only intercept if the caret is also at\n\t\t\t\t// the horizontal edge.\n\t\t\t\t( altKey ? isHorizontalEdge( target, isReverseDir ) : true ) &&\n\t\t\t\t! keepCaretInsideBlock\n\t\t\t) {\n\t\t\t\tconst closestTabbable = getClosestTabbable(\n\t\t\t\t\ttarget,\n\t\t\t\t\tisReverse,\n\t\t\t\t\tnode,\n\t\t\t\t\ttrue\n\t\t\t\t);\n\n\t\t\t\tif ( closestTabbable ) {\n\t\t\t\t\tplaceCaretAtVerticalEdge(\n\t\t\t\t\t\tclosestTabbable,\n\t\t\t\t\t\t// When Alt is pressed, place the caret at the furthest\n\t\t\t\t\t\t// horizontal edge and the furthest vertical edge.\n\t\t\t\t\t\taltKey ? ! isReverse : isReverse,\n\t\t\t\t\t\taltKey ? undefined : verticalRect\n\t\t\t\t\t);\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\n\t\t\t} else if (\n\t\t\t\tisHorizontal &&\n\t\t\t\tdefaultView.getSelection().isCollapsed &&\n\t\t\t\tisHorizontalEdge( target, isReverseDir ) &&\n\t\t\t\t! keepCaretInsideBlock\n\t\t\t) {\n\t\t\t\tconst closestTabbable = getClosestTabbable(\n\t\t\t\t\ttarget,\n\t\t\t\t\tisReverseDir,\n\t\t\t\t\tnode\n\t\t\t\t);\n\t\t\t\tplaceCaretAtHorizontalEdge( closestTabbable, isReverse );\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\t\t}\n\n\t\tnode.addEventListener( 'mousedown', onMouseDown );\n\t\tnode.addEventListener( 'keydown', onKeyDown );\n\t\treturn () => {\n\t\t\tnode.removeEventListener( 'mousedown', onMouseDown );\n\t\t\tnode.removeEventListener( 'keydown', onKeyDown );\n\t\t};\n\t}, [] );\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/writing-flow/use-click-selection.mjs

@@ -6,7 +6,12 @@ import { setContentEditableWrapper } from "./utils.mjs";
 import { getBlockClientId } from "../../utils/dom.mjs";
 function useClickSelection() {
   const { selectBlock } = useDispatch(blockEditorStore);
-  const { isSelectionEnabled, getBlockSelectionStart, hasMultiSelection } = useSelect(blockEditorStore);
+  const {
+    isSelectionEnabled,
+    getBlockSelectionStart,
+    getSelectionStart,
+    hasMultiSelection
+  } = useSelect(blockEditorStore);
   return useRefEffect(
     (node) => {
       function onMouseDown(event) {
@@ -17,7 +22,27 @@ function useClickSelection() {
         const clickedClientId = getBlockClientId(event.target);
         if (event.shiftKey) {
           if (startClientId && startClientId !== clickedClientId) {
-            setContentEditableWrapper(node, true);
+            const { clientId, attributeKey } = getSelectionStart();
+            setContentEditableWrapper(node, true, {
+              focus: !!attributeKey
+            });
+            const { ownerDocument } = node;
+            const selection = ownerDocument.defaultView.getSelection();
+            const blockElement = !attributeKey && ownerDocument.getElementById(
+              `block-${clientId}`
+            );
+            if (blockElement && !(selection.anchorNode && blockElement.contains(selection.anchorNode))) {
+              const isForward = (
+                // eslint-disable-next-line no-bitwise
+                blockElement.compareDocumentPosition(
+                  event.target
+                ) & node.DOCUMENT_POSITION_FOLLOWING
+              );
+              selection.setPosition(
+                blockElement,
+                isForward ? 0 : blockElement.childNodes.length
+              );
+            }
           }
         } else if (hasMultiSelection()) {
           selectBlock(clickedClientId);
@@ -32,6 +57,7 @@ function useClickSelection() {
       selectBlock,
       isSelectionEnabled,
       getBlockSelectionStart,
+      getSelectionStart,
       hasMultiSelection
     ]
   );

package/build-module/components/writing-flow/use-click-selection.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/writing-flow/use-click-selection.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useRefEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { setContentEditableWrapper } from './utils';\nimport { getBlockClientId } from '../../utils/dom';\n\nexport default function useClickSelection() {\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\tconst { isSelectionEnabled, getBlockSelectionStart, hasMultiSelection } =\n\t\tuseSelect( blockEditorStore );\n\treturn useRefEffect(\n\t\t( node ) => {\n\t\t\tfunction onMouseDown( event ) {\n\t\t\t\t// The main button.\n\t\t\t\t// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button\n\t\t\t\tif ( ! isSelectionEnabled() || event.button !== 0 ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst startClientId = getBlockSelectionStart();\n\t\t\t\tconst clickedClientId = getBlockClientId( event.target );\n\n\t\t\t\tif ( event.shiftKey ) {\n\t\t\t\t\t// When selecting a single block in a document by holding the shift key,\n\t\t\t\t\t// don't mark this action as multiselection.\n\t\t\t\t\tif ( startClientId && startClientId !== clickedClientId ) {\n\t\t\t\t\t\tsetContentEditableWrapper( node, true );\n\t\t\t\t\t}\n\t\t\t\t} else if ( hasMultiSelection() ) {\n\t\t\t\t\t// Allow user to escape out of a multi-selection to a\n\t\t\t\t\t// singular selection of a block via click. This is handled\n\t\t\t\t\t// here since focus handling excludes blocks when there is\n\t\t\t\t\t// multiselection, as focus can be incurred by starting a\n\t\t\t\t\t// multiselection (focus moved to first block's multi-\n\t\t\t\t\t// controls).\n\t\t\t\t\tselectBlock( clickedClientId );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tnode.addEventListener( 'mousedown', onMouseDown );\n\n\t\t\treturn () => {\n\t\t\t\tnode.removeEventListener( 'mousedown', onMouseDown );\n\t\t\t};\n\t\t},\n\t\t[\n\t\t\tselectBlock,\n\t\t\tisSelectionEnabled,\n\t\t\tgetBlockSelectionStart,\n\t\t\thasMultiSelection,\n\t\t]\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,WAAW,mBAAmB;AACvC,SAAS,oBAAoB;AAK7B,SAAS,SAAS,wBAAwB;AAC1C,SAAS,iCAAiC;AAC1C,SAAS,wBAAwB;AAElB,SAAR,oBAAqC;AAC3C,QAAM,EAAE,YAAY,IAAI,YAAa,gBAAiB;AACtD,QAAM,EAAE,oBAAoB,wBAAwB,kBAAkB,IACrE,UAAW,gBAAiB;AAC7B,SAAO;AAAA,IACN,CAAE,SAAU;AACX,eAAS,YAAa,OAAQ;AAG7B,YAAK,CAAE,mBAAmB,KAAK,MAAM,WAAW,GAAI;AACnD;AAAA,QACD;AAEA,cAAM,gBAAgB,uBAAuB;AAC7C,cAAM,kBAAkB,iBAAkB,MAAM,MAAO;AAEvD,YAAK,MAAM,UAAW;AAGrB,cAAK,iBAAiB,kBAAkB,iBAAkB;AACzD,sCAA2B,MAAM,IAAK;AAAA,UACvC;AAAA,QACD,WAAY,kBAAkB,GAAI;AAOjC,sBAAa,eAAgB;AAAA,QAC9B;AAAA,MACD;AAEA,WAAK,iBAAkB,aAAa,WAAY;AAEhD,aAAO,MAAM;AACZ,aAAK,oBAAqB,aAAa,WAAY;AAAA,MACpD;AAAA,IACD;AAAA,IACA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACD;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useRefEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { setContentEditableWrapper } from './utils';\nimport { getBlockClientId } from '../../utils/dom';\n\nexport default function useClickSelection() {\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\tconst {\n\t\tisSelectionEnabled,\n\t\tgetBlockSelectionStart,\n\t\tgetSelectionStart,\n\t\thasMultiSelection,\n\t} = useSelect( blockEditorStore );\n\treturn useRefEffect(\n\t\t( node ) => {\n\t\t\tfunction onMouseDown( event ) {\n\t\t\t\t// The main button.\n\t\t\t\t// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button\n\t\t\t\tif ( ! isSelectionEnabled() || event.button !== 0 ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst startClientId = getBlockSelectionStart();\n\t\t\t\tconst clickedClientId = getBlockClientId( event.target );\n\n\t\t\t\tif ( event.shiftKey ) {\n\t\t\t\t\t// When selecting a single block in a document by holding the shift key,\n\t\t\t\t\t// don't mark this action as multiselection.\n\t\t\t\t\tif ( startClientId && startClientId !== clickedClientId ) {\n\t\t\t\t\t\t// When the selected block has no text selection\n\t\t\t\t\t\t// within it (e.g. an image or spacer), there is no\n\t\t\t\t\t\t// native selection for the wrapper to adopt when it\n\t\t\t\t\t\t// is focused, so Safari inserts a caret at the start\n\t\t\t\t\t\t// of the wrapper and asynchronously reveals it,\n\t\t\t\t\t\t// scrolling a scrolled-down viewport back up, which\n\t\t\t\t\t\t// `preventScroll` does not cover. Leave focus alone\n\t\t\t\t\t\t// in that case: the click moves it.\n\t\t\t\t\t\tconst { clientId, attributeKey } = getSelectionStart();\n\t\t\t\t\t\tsetContentEditableWrapper( node, true, {\n\t\t\t\t\t\t\tfocus: !! attributeKey,\n\t\t\t\t\t\t} );\n\n\t\t\t\t\t\t// The browser extends the selection from the native\n\t\t\t\t\t\t// anchor. When a block is selected without a text\n\t\t\t\t\t\t// selection within it, there is no native anchor,\n\t\t\t\t\t\t// and browsers synthesize one at the nearest text\n\t\t\t\t\t\t// instead, excluding the block itself. Give the\n\t\t\t\t\t\t// browser the right anchor before it acts on the\n\t\t\t\t\t\t// click: the near edge of the selected block, so the\n\t\t\t\t\t\t// whole block ends up within the extended selection.\n\t\t\t\t\t\tconst { ownerDocument } = node;\n\t\t\t\t\t\tconst selection =\n\t\t\t\t\t\t\townerDocument.defaultView.getSelection();\n\t\t\t\t\t\tconst blockElement =\n\t\t\t\t\t\t\t! attributeKey &&\n\t\t\t\t\t\t\townerDocument.getElementById(\n\t\t\t\t\t\t\t\t`block-${ clientId }`\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\tblockElement &&\n\t\t\t\t\t\t\t! (\n\t\t\t\t\t\t\t\tselection.anchorNode &&\n\t\t\t\t\t\t\t\tblockElement.contains( selection.anchorNode )\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tconst isForward =\n\t\t\t\t\t\t\t\t// eslint-disable-next-line no-bitwise\n\t\t\t\t\t\t\t\tblockElement.compareDocumentPosition(\n\t\t\t\t\t\t\t\t\tevent.target\n\t\t\t\t\t\t\t\t) & node.DOCUMENT_POSITION_FOLLOWING;\n\t\t\t\t\t\t\tselection.setPosition(\n\t\t\t\t\t\t\t\tblockElement,\n\t\t\t\t\t\t\t\tisForward ? 0 : blockElement.childNodes.length\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t} else if ( hasMultiSelection() ) {\n\t\t\t\t\t// Allow user to escape out of a multi-selection to a\n\t\t\t\t\t// singular selection of a block via click. This is handled\n\t\t\t\t\t// here since focus handling excludes blocks when there is\n\t\t\t\t\t// multiselection, as focus can be incurred by starting a\n\t\t\t\t\t// multiselection (focus moved to first block's multi-\n\t\t\t\t\t// controls).\n\t\t\t\t\tselectBlock( clickedClientId );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tnode.addEventListener( 'mousedown', onMouseDown );\n\n\t\t\treturn () => {\n\t\t\t\tnode.removeEventListener( 'mousedown', onMouseDown );\n\t\t\t};\n\t\t},\n\t\t[\n\t\t\tselectBlock,\n\t\t\tisSelectionEnabled,\n\t\t\tgetBlockSelectionStart,\n\t\t\tgetSelectionStart,\n\t\t\thasMultiSelection,\n\t\t]\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,WAAW,mBAAmB;AACvC,SAAS,oBAAoB;AAK7B,SAAS,SAAS,wBAAwB;AAC1C,SAAS,iCAAiC;AAC1C,SAAS,wBAAwB;AAElB,SAAR,oBAAqC;AAC3C,QAAM,EAAE,YAAY,IAAI,YAAa,gBAAiB;AACtD,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,UAAW,gBAAiB;AAChC,SAAO;AAAA,IACN,CAAE,SAAU;AACX,eAAS,YAAa,OAAQ;AAG7B,YAAK,CAAE,mBAAmB,KAAK,MAAM,WAAW,GAAI;AACnD;AAAA,QACD;AAEA,cAAM,gBAAgB,uBAAuB;AAC7C,cAAM,kBAAkB,iBAAkB,MAAM,MAAO;AAEvD,YAAK,MAAM,UAAW;AAGrB,cAAK,iBAAiB,kBAAkB,iBAAkB;AASzD,kBAAM,EAAE,UAAU,aAAa,IAAI,kBAAkB;AACrD,sCAA2B,MAAM,MAAM;AAAA,cACtC,OAAO,CAAC,CAAE;AAAA,YACX,CAAE;AAUF,kBAAM,EAAE,cAAc,IAAI;AAC1B,kBAAM,YACL,cAAc,YAAY,aAAa;AACxC,kBAAM,eACL,CAAE,gBACF,cAAc;AAAA,cACb,SAAU,QAAS;AAAA,YACpB;AAED,gBACC,gBACA,EACC,UAAU,cACV,aAAa,SAAU,UAAU,UAAW,IAE5C;AACD,oBAAM;AAAA;AAAA,gBAEL,aAAa;AAAA,kBACZ,MAAM;AAAA,gBACP,IAAI,KAAK;AAAA;AACV,wBAAU;AAAA,gBACT;AAAA,gBACA,YAAY,IAAI,aAAa,WAAW;AAAA,cACzC;AAAA,YACD;AAAA,UACD;AAAA,QACD,WAAY,kBAAkB,GAAI;AAOjC,sBAAa,eAAgB;AAAA,QAC9B;AAAA,MACD;AAEA,WAAK,iBAAkB,aAAa,WAAY;AAEhD,aAAO,MAAM;AACZ,aAAK,oBAAqB,aAAa,WAAY;AAAA,MACpD;AAAA,IACD;AAAA,IACA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACD;",
   "names": []
 }

package/build-module/components/writing-flow/use-editable-root-event-handlers.mjs

@@ -0,0 +1,154 @@
+// packages/block-editor/src/components/writing-flow/use-editable-root-event-handlers.js
+import { useSelect } from "@wordpress/data";
+import { useRefEffect } from "@wordpress/compose";
+import { useContext } from "@wordpress/element";
+import { store as blockEditorStore } from "../../store/index.mjs";
+import { getBlockClientId, getSelectionEditableElement } from "../../utils/dom.mjs";
+import { BlockRefs } from "../provider/block-refs-provider.mjs";
+var SUPPORTED_EVENTS = {
+  onKeyDown: "keydown",
+  onKeyUp: "keyup",
+  onBeforeInput: "beforeinput",
+  onInput: "input",
+  onCompositionStart: "compositionstart",
+  onCompositionUpdate: "compositionupdate",
+  onCompositionEnd: "compositionend"
+};
+var EVENT_TYPES = Object.values(SUPPORTED_EVENTS);
+function getEventHandlers(props) {
+  let handlers;
+  for (const name in SUPPORTED_EVENTS) {
+    if (typeof props[name] === "function") {
+      handlers = handlers || {};
+      handlers[SUPPORTED_EVENTS[name]] = props[name];
+    }
+  }
+  return handlers;
+}
+var EVENT_INTERFACE = [
+  "eventPhase",
+  "bubbles",
+  "cancelable",
+  "timeStamp",
+  "defaultPrevented",
+  "isTrusted"
+];
+var KEYBOARD_EVENT_INTERFACE = [
+  ...EVENT_INTERFACE,
+  "view",
+  "detail",
+  "key",
+  "code",
+  "location",
+  "ctrlKey",
+  "shiftKey",
+  "altKey",
+  "metaKey",
+  "repeat",
+  "locale",
+  "getModifierState",
+  "charCode",
+  "keyCode",
+  "which"
+];
+var INPUT_EVENT_INTERFACE = [...EVENT_INTERFACE, "data"];
+var EVENT_INTERFACES = {
+  keydown: KEYBOARD_EVENT_INTERFACE,
+  keyup: KEYBOARD_EVENT_INTERFACE,
+  beforeinput: INPUT_EVENT_INTERFACE,
+  input: INPUT_EVENT_INTERFACE,
+  compositionstart: INPUT_EVENT_INTERFACE,
+  compositionupdate: INPUT_EVENT_INTERFACE,
+  compositionend: INPUT_EVENT_INTERFACE
+};
+function createBlockSyntheticEvent(nativeEvent, target) {
+  let propagationStopped = false;
+  const syntheticEvent = {
+    nativeEvent,
+    type: nativeEvent.type,
+    target,
+    currentTarget: null,
+    preventDefault() {
+      nativeEvent.preventDefault();
+      syntheticEvent.defaultPrevented = true;
+    },
+    isDefaultPrevented() {
+      return syntheticEvent.defaultPrevented;
+    },
+    stopPropagation() {
+      nativeEvent.stopPropagation();
+      propagationStopped = true;
+    },
+    isPropagationStopped() {
+      return propagationStopped;
+    },
+    // The modern event system doesn't pool, so persistence is a no-op.
+    persist() {
+    },
+    isPersistent() {
+      return true;
+    }
+  };
+  for (const property of EVENT_INTERFACES[nativeEvent.type]) {
+    const value = nativeEvent[property];
+    syntheticEvent[property] = typeof value === "function" ? value.bind(nativeEvent) : value;
+  }
+  return syntheticEvent;
+}
+function useEditableRootEventHandlers() {
+  const { hasMultiSelection, getBlockParents } = useSelect(blockEditorStore);
+  const { refsMap, eventHandlers } = useContext(BlockRefs);
+  return useRefEffect(
+    (node) => {
+      function onEvent(event) {
+        if (!eventHandlers.size || event.target !== node || !event.isTrusted || node.contentEditable !== "true" || hasMultiSelection()) {
+          return;
+        }
+        const selection = node.ownerDocument.defaultView.getSelection();
+        if (!selection.rangeCount) {
+          return;
+        }
+        const editable = getSelectionEditableElement(selection, node);
+        const clientId = getBlockClientId(editable);
+        if (!clientId) {
+          return;
+        }
+        const clientIds = [
+          clientId,
+          ...getBlockParents(clientId, true)
+        ];
+        let syntheticEvent;
+        for (const ancestorClientId of clientIds) {
+          const handler = eventHandlers.get(ancestorClientId)?.current?.[event.type];
+          const element = handler && refsMap.get(ancestorClientId);
+          if (!element) {
+            continue;
+          }
+          if (!syntheticEvent) {
+            syntheticEvent = createBlockSyntheticEvent(
+              event,
+              editable
+            );
+          }
+          syntheticEvent.currentTarget = element;
+          handler(syntheticEvent);
+          if (syntheticEvent.isPropagationStopped()) {
+            break;
+          }
+        }
+      }
+      const root = node.ownerDocument.documentElement;
+      const unsubscribers = EVENT_TYPES.map((type) => {
+        root.addEventListener(type, onEvent);
+        return () => root.removeEventListener(type, onEvent);
+      });
+      return () => unsubscribers.forEach((unsubscribe) => unsubscribe());
+    },
+    [hasMultiSelection, getBlockParents, refsMap, eventHandlers]
+  );
+}
+export {
+  useEditableRootEventHandlers as default,
+  getEventHandlers
+};
+//# sourceMappingURL=use-editable-root-event-handlers.mjs.map

package/build-module/components/writing-flow/use-editable-root-event-handlers.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/writing-flow/use-editable-root-event-handlers.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { useRefEffect } from '@wordpress/compose';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { getBlockClientId, getSelectionEditableElement } from '../../utils/dom';\nimport { BlockRefs } from '../provider/block-refs-provider';\n\n// The React `on*` props the host bridges, mapped to their DOM event type. Only\n// editing events are redirected under `editableRoot` (the wrapper becomes the\n// editing host, so keyboard, input and composition events target it instead of\n// the block); pointer and other events still reach the block and need no\n// bridging. React prop names don't map to DOM types by lowercasing in general\n// (onChange is `input`, onDoubleClick is `dblclick`), so the mapping is\n// explicit, which also locks the bridged surface to events React actually fires.\nconst SUPPORTED_EVENTS = {\n\tonKeyDown: 'keydown',\n\tonKeyUp: 'keyup',\n\tonBeforeInput: 'beforeinput',\n\tonInput: 'input',\n\tonCompositionStart: 'compositionstart',\n\tonCompositionUpdate: 'compositionupdate',\n\tonCompositionEnd: 'compositionend',\n};\n\n// The DOM event types the host listens for. Fixed, so the host attaches these\n// listeners once rather than tracking which types are in use.\nconst EVENT_TYPES = Object.values( SUPPORTED_EVENTS );\n\n/**\n * Collects the supported `on*` event handlers from a set of props, e.g. a\n * block's merged `wrapperProps`, keyed by DOM event type. Used by the block to\n * register them (see `useRegisterBlockEventHandlers`).\n *\n * @param {Object} props Props to read handlers from.\n *\n * @return {Object|undefined} The handlers by event type, or undefined when\n *                            there are none.\n */\nexport function getEventHandlers( props ) {\n\tlet handlers;\n\n\tfor ( const name in SUPPORTED_EVENTS ) {\n\t\tif ( typeof props[ name ] === 'function' ) {\n\t\t\thandlers = handlers || {};\n\t\t\thandlers[ SUPPORTED_EVENTS[ name ] ] = props[ name ];\n\t\t}\n\t}\n\n\treturn handlers;\n}\n\n// The native properties React copies onto its SyntheticEvent for each event\n// type (the *EventInterface tables in react-dom), so the wrapper exposes exactly\n// what a React handler would see and nothing more. Values are copied straight\n// from the native event; React's normalizers only paper over browsers we don't\n// support, and anything omitted stays reachable through `nativeEvent`, as in\n// React (e.g. `getTargetRanges` on a `beforeinput`).\nconst EVENT_INTERFACE = [\n\t'eventPhase',\n\t'bubbles',\n\t'cancelable',\n\t'timeStamp',\n\t'defaultPrevented',\n\t'isTrusted',\n];\nconst KEYBOARD_EVENT_INTERFACE = [\n\t...EVENT_INTERFACE,\n\t'view',\n\t'detail',\n\t'key',\n\t'code',\n\t'location',\n\t'ctrlKey',\n\t'shiftKey',\n\t'altKey',\n\t'metaKey',\n\t'repeat',\n\t'locale',\n\t'getModifierState',\n\t'charCode',\n\t'keyCode',\n\t'which',\n];\nconst INPUT_EVENT_INTERFACE = [ ...EVENT_INTERFACE, 'data' ];\nconst EVENT_INTERFACES = {\n\tkeydown: KEYBOARD_EVENT_INTERFACE,\n\tkeyup: KEYBOARD_EVENT_INTERFACE,\n\tbeforeinput: INPUT_EVENT_INTERFACE,\n\tinput: INPUT_EVENT_INTERFACE,\n\tcompositionstart: INPUT_EVENT_INTERFACE,\n\tcompositionupdate: INPUT_EVENT_INTERFACE,\n\tcompositionend: INPUT_EVENT_INTERFACE,\n};\n\n/**\n * Builds a React `SyntheticEvent`-like object for an extension handler, which\n * expects one. It mirrors what react-dom does: a plain object wrapping the real\n * native event, eagerly copying the same interface properties React exposes for\n * the event type, so a handler sees exactly React's surface and nothing more.\n *\n * `preventDefault` and `stopPropagation` forward to the native event, so they\n * behave as through React; `stopPropagation` also flags the walk through block\n * ancestors to stop. `target` is the editable inside the block rather than the\n * real target (the editing host above it), and `currentTarget` is reassigned as\n * the event bubbles from block to block.\n *\n * @param {Event}       nativeEvent The event to wrap.\n * @param {HTMLElement} target      The element to report as the target.\n *\n * @return {Object} The synthetic event.\n */\nfunction createBlockSyntheticEvent( nativeEvent, target ) {\n\tlet propagationStopped = false;\n\n\tconst syntheticEvent = {\n\t\tnativeEvent,\n\t\ttype: nativeEvent.type,\n\t\ttarget,\n\t\tcurrentTarget: null,\n\t\tpreventDefault() {\n\t\t\tnativeEvent.preventDefault();\n\t\t\tsyntheticEvent.defaultPrevented = true;\n\t\t},\n\t\tisDefaultPrevented() {\n\t\t\treturn syntheticEvent.defaultPrevented;\n\t\t},\n\t\tstopPropagation() {\n\t\t\tnativeEvent.stopPropagation();\n\t\t\tpropagationStopped = true;\n\t\t},\n\t\tisPropagationStopped() {\n\t\t\treturn propagationStopped;\n\t\t},\n\t\t// The modern event system doesn't pool, so persistence is a no-op.\n\t\tpersist() {},\n\t\tisPersistent() {\n\t\t\treturn true;\n\t\t},\n\t};\n\n\tfor ( const property of EVENT_INTERFACES[ nativeEvent.type ] ) {\n\t\tconst value = nativeEvent[ property ];\n\t\tsyntheticEvent[ property ] =\n\t\t\ttypeof value === 'function' ? value.bind( nativeEvent ) : value;\n\t}\n\n\treturn syntheticEvent;\n}\n\n/**\n * Backwards compatibility for block event handlers under `editableRoot`.\n *\n * When a block supports `editableRoot`, the writing flow wrapper is the\n * contentEditable editing host, so keyboard, input and composition events\n * target the wrapper instead of the block. React `on*` handlers a third party\n * added to a block through `wrapperProps` (e.g. via an `editor.BlockListBlock`\n * filter) are on the block element, below the target, so they stop firing.\n *\n * The block registers those handlers (see `useBlockProps`), and this hook\n * calls them from the host: it resolves the block that owns the selection and\n * every block ancestor, and invokes each registered handler with a synthetic\n * event, innermost first, like a bubbling event. The listeners are attached\n * where React attaches its own (the portal container, the iframe's document\n * element), so a block's handler runs and its `preventDefault` /\n * `stopPropagation` behave as they would through React, without editableRoot.\n *\n * This does not cover handlers a filter puts on its own wrapping element rather\n * than the block's `wrapperProps`; the block element is the supported event\n * surface. It can be removed once input handling is lifted to the host.\n */\nexport default function useEditableRootEventHandlers() {\n\tconst { hasMultiSelection, getBlockParents } =\n\t\tuseSelect( blockEditorStore );\n\tconst { refsMap, eventHandlers } = useContext( BlockRefs );\n\treturn useRefEffect(\n\t\t( node ) => {\n\t\t\tfunction onEvent( event ) {\n\t\t\t\t// Only act on real events targeting the host itself, while it\n\t\t\t\t// is the editing host for a single block and some block has a\n\t\t\t\t// handler to call.\n\t\t\t\tif (\n\t\t\t\t\t! eventHandlers.size ||\n\t\t\t\t\tevent.target !== node ||\n\t\t\t\t\t! event.isTrusted ||\n\t\t\t\t\tnode.contentEditable !== 'true' ||\n\t\t\t\t\thasMultiSelection()\n\t\t\t\t) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst selection = node.ownerDocument.defaultView.getSelection();\n\n\t\t\t\tif ( ! selection.rangeCount ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst editable = getSelectionEditableElement( selection, node );\n\t\t\t\tconst clientId = getBlockClientId( editable );\n\n\t\t\t\tif ( ! clientId ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Call the handler on the block that owns the selection and each\n\t\t\t\t// of its block ancestors, innermost first, like a bubbling\n\t\t\t\t// event. The hierarchy comes from the store rather than the DOM,\n\t\t\t\t// and one synthetic event, wrapping the real event, is reused\n\t\t\t\t// for the whole chain, its currentTarget moved from block to\n\t\t\t\t// block. The element is only resolved for blocks with a handler.\n\t\t\t\tconst clientIds = [\n\t\t\t\t\tclientId,\n\t\t\t\t\t...getBlockParents( clientId, true ),\n\t\t\t\t];\n\n\t\t\t\tlet syntheticEvent;\n\t\t\t\tfor ( const ancestorClientId of clientIds ) {\n\t\t\t\t\tconst handler =\n\t\t\t\t\t\teventHandlers.get( ancestorClientId )?.current?.[\n\t\t\t\t\t\t\tevent.type\n\t\t\t\t\t\t];\n\t\t\t\t\tconst element = handler && refsMap.get( ancestorClientId );\n\n\t\t\t\t\tif ( ! element ) {\n\t\t\t\t\t\tcontinue;\n\t\t\t\t\t}\n\n\t\t\t\t\tif ( ! syntheticEvent ) {\n\t\t\t\t\t\tsyntheticEvent = createBlockSyntheticEvent(\n\t\t\t\t\t\t\tevent,\n\t\t\t\t\t\t\teditable\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\tsyntheticEvent.currentTarget = element;\n\t\t\t\t\thandler( syntheticEvent );\n\n\t\t\t\t\tif ( syntheticEvent.isPropagationStopped() ) {\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Attach where React attaches its own event system: the portal\n\t\t\t// container, which for the iframed canvas is the document element\n\t\t\t// (see `preparePortalMount` in react-dom). Listening at the same\n\t\t\t// node, non-capture, means a block's handler runs in the bubbling\n\t\t\t// phase after core, and its stopPropagation stops at the same point\n\t\t\t// React's would, as its `on*` handler would without editableRoot.\n\t\t\tconst root = node.ownerDocument.documentElement;\n\t\t\tconst unsubscribers = EVENT_TYPES.map( ( type ) => {\n\t\t\t\troot.addEventListener( type, onEvent );\n\t\t\t\treturn () => root.removeEventListener( type, onEvent );\n\t\t\t} );\n\t\t\treturn () =>\n\t\t\t\tunsubscribers.forEach( ( unsubscribe ) => unsubscribe() );\n\t\t},\n\t\t[ hasMultiSelection, getBlockParents, refsMap, eventHandlers ]\n\t);\n}\n"],
+  "mappings": "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",
+  "names": []
+}