Safari: prevent focus capturing caused by flex display

packages/rich-text/src/component/event-listeners/index.js

@@ -13,6 +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';
 
 const allEventListeners = [
 	copyHandler,
@@ -21,6 +22,7 @@ const allEventListeners = [
 	deleteHandler,
 	inputAndSelection,
 	selectionChangeCompat,
+	preventFocusCapture,
 ];
 
 export function useEventListeners( props ) {

packages/rich-text/src/component/event-listeners/prevent-focus-capture.js

@@ -0,0 +1,35 @@
+export default () => ( element ) => {
+	const { ownerDocument } = element;
+	const { defaultView } = ownerDocument;
+
+	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;
+		}
+		if ( event.target === element ) {
+			return;
+		}
+		if ( ! event.target.contains( element ) ) {
+			return;
+		}
+		value = element.getAttribute( 'contenteditable' );
+		element.setAttribute( 'contenteditable', 'false' );
+	}
+
+	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 );
+	};
+};