diff --git a/packages/rich-text/src/component/event-listeners/index.js b/packages/rich-text/src/component/event-listeners/index.js index 54963800a26151..d4f760abdc735a 100644 --- a/packages/rich-text/src/component/event-listeners/index.js +++ b/packages/rich-text/src/component/event-listeners/index.js @@ -13,7 +13,7 @@ import formatBoundaries from './format-boundaries'; import deleteHandler from './delete'; import inputAndSelection from './input-and-selection'; import selectionChangeCompat from './selection-change-compat'; -import preventFocusCapture from './prevent-focus-capture'; +import { preventFocusCapture } from './prevent-focus-capture'; const allEventListeners = [ copyHandler, diff --git a/packages/rich-text/src/component/event-listeners/prevent-focus-capture.js b/packages/rich-text/src/component/event-listeners/prevent-focus-capture.js index e194c00e92b637..8f829111925912 100644 --- a/packages/rich-text/src/component/event-listeners/prevent-focus-capture.js +++ b/packages/rich-text/src/component/event-listeners/prevent-focus-capture.js @@ -1,36 +1,38 @@ -export default () => ( element ) => { - const { ownerDocument } = element; - const { defaultView } = ownerDocument; +export function preventFocusCapture() { + return ( element ) => { + const { ownerDocument } = element; + const { defaultView } = ownerDocument; - let value = null; + let value = null; - function onPointerDown( event ) { - // Abort if the event is default prevented, we will not get a pointer up event. - if ( event.defaultPrevented ) { - return; + function onPointerDown( event ) { + // Abort if the event is default prevented, we will not get a pointer up event. + if ( event.defaultPrevented ) { + return; + } + if ( event.target === element ) { + return; + } + if ( ! event.target.contains( element ) ) { + return; + } + value = element.getAttribute( 'contenteditable' ); + element.setAttribute( 'contenteditable', 'false' ); + defaultView.getSelection().removeAllRanges(); } - if ( event.target === element ) { - return; - } - if ( ! event.target.contains( element ) ) { - return; - } - value = element.getAttribute( 'contenteditable' ); - element.setAttribute( 'contenteditable', 'false' ); - defaultView.getSelection().removeAllRanges(); - } - function onPointerUp() { - if ( value !== null ) { - element.setAttribute( 'contenteditable', value ); - value = null; + function onPointerUp() { + if ( value !== null ) { + element.setAttribute( 'contenteditable', value ); + value = null; + } } - } - defaultView.addEventListener( 'pointerdown', onPointerDown ); - defaultView.addEventListener( 'pointerup', onPointerUp ); - return () => { - defaultView.removeEventListener( 'pointerdown', onPointerDown ); - defaultView.removeEventListener( 'pointerup', onPointerUp ); + defaultView.addEventListener( 'pointerdown', onPointerDown ); + defaultView.addEventListener( 'pointerup', onPointerUp ); + return () => { + defaultView.removeEventListener( 'pointerdown', onPointerDown ); + defaultView.removeEventListener( 'pointerup', onPointerUp ); + }; }; -}; +}