From 35b2ce95cd5863e9ed6da0e7447b928870d8c09e Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 30 Aug 2022 16:39:49 +0200
Subject: [PATCH] useAnchorRef: return a VirtualElement instead of a range

---
 packages/rich-text/README.md                  |  6 +++---
 .../rich-text/src/component/use-anchor-ref.js | 21 ++++++++++++++-----
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/rich-text/README.md b/packages/rich-text/README.md
index 006f0b8b095cd5..5fb9538a9cf987 100644
--- a/packages/rich-text/README.md
+++ b/packages/rich-text/README.md
@@ -477,9 +477,9 @@ _Returns_
 ### useAnchorRef
 
 This hook, to be used in a format type's Edit component, returns the active
-element that is formatted, or the selection range if no format is active.
-The returned value is meant to be used for positioning UI, e.g. by passing it
-to the `Popover` component.
+element that is formatted, or a virtual element for the selection range if
+no format is active. The returned value is meant to be used for positioning
+UI, e.g. by passing it to the `Popover` component.
 
 _Parameters_
 
diff --git a/packages/rich-text/src/component/use-anchor-ref.js b/packages/rich-text/src/component/use-anchor-ref.js
index 4be4fdd93096a7..7b50ed9246785e 100644
--- a/packages/rich-text/src/component/use-anchor-ref.js
+++ b/packages/rich-text/src/component/use-anchor-ref.js
@@ -12,11 +12,17 @@ import { getActiveFormat } from '../get-active-format';
 /** @typedef {import('../register-format-type').RichTextFormatType} RichTextFormatType */
 /** @typedef {import('../create').RichTextValue} RichTextValue */
 
+/**
+ * @typedef {Object} VirtualAnchorElement
+ * @property {Function} getBoundingClientRect A function returning a DOMRect
+ * @property {Document} ownerDocument         The element's ownerDocument
+ */
+
 /**
  * This hook, to be used in a format type's Edit component, returns the active
- * element that is formatted, or the selection range if no format is active.
- * The returned value is meant to be used for positioning UI, e.g. by passing it
- * to the `Popover` component.
+ * element that is formatted, or a virtual element for the selection range if
+ * no format is active. The returned value is meant to be used for positioning
+ * UI, e.g. by passing it to the `Popover` component.
  *
  * @param {Object}                 $1          Named parameters.
  * @param {RefObject<HTMLElement>} $1.ref      React ref of the element
@@ -24,7 +30,7 @@ import { getActiveFormat } from '../get-active-format';
  * @param {RichTextValue}          $1.value    Value to check for selection.
  * @param {RichTextFormatType}     $1.settings The format type's settings.
  *
- * @return {Element|Range} The active element or selection range.
+ * @return {Element|VirtualAnchorElement|null|undefined} The active element or selection range.
  */
 export function useAnchorRef( { ref, value, settings = {} } ) {
 	const { tagName, className, name } = settings;
@@ -44,7 +50,12 @@ export function useAnchorRef( { ref, value, settings = {} } ) {
 		const range = selection.getRangeAt( 0 );
 
 		if ( ! activeFormat ) {
-			return range;
+			return {
+				ownerDocument: range.startContainer.ownerDocument,
+				getBoundingClientRect() {
+					return range.getBoundingClientRect();
+				},
+			};
 		}
 
 		let element = range.startContainer;