Merging upstream version 6.5+dfsg1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 818 insertions, 779 deletions

diff --git a/wp-includes/js/dist/rich-text.js b/wp-includes/js/dist/rich-text.js
index 966b5f0..e0aa83e 100644
--- a/wp-includes/js/dist/rich-text.js
+++ b/wp-includes/js/dist/rich-text.js
@@ -1,48 +1,48 @@
-/******/ (function() { // webpackBootstrap
+/******/ (() => { // webpackBootstrap
 /******/ 	"use strict";
 /******/ 	// The require scope
 /******/ 	var __webpack_require__ = {};
 /******/ 	
 /************************************************************************/
 /******/ 	/* webpack/runtime/compat get default export */
-/******/ 	!function() {
+/******/ 	(() => {
 /******/ 		// getDefaultExport function for compatibility with non-harmony modules
-/******/ 		__webpack_require__.n = function(module) {
+/******/ 		__webpack_require__.n = (module) => {
 /******/ 			var getter = module && module.__esModule ?
-/******/ 				function() { return module['default']; } :
-/******/ 				function() { return module; };
+/******/ 				() => (module['default']) :
+/******/ 				() => (module);
 /******/ 			__webpack_require__.d(getter, { a: getter });
 /******/ 			return getter;
 /******/ 		};
-/******/ 	}();
+/******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/define property getters */
-/******/ 	!function() {
+/******/ 	(() => {
 /******/ 		// define getter functions for harmony exports
-/******/ 		__webpack_require__.d = function(exports, definition) {
+/******/ 		__webpack_require__.d = (exports, definition) => {
 /******/ 			for(var key in definition) {
 /******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
 /******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
 /******/ 				}
 /******/ 			}
 /******/ 		};
-/******/ 	}();
+/******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
-/******/ 	!function() {
-/******/ 		__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
-/******/ 	}();
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/make namespace object */
-/******/ 	!function() {
+/******/ 	(() => {
 /******/ 		// define __esModule on exports
-/******/ 		__webpack_require__.r = function(exports) {
+/******/ 		__webpack_require__.r = (exports) => {
 /******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 /******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 /******/ 			}
 /******/ 			Object.defineProperty(exports, '__esModule', { value: true });
 /******/ 		};
-/******/ 	}();
+/******/ 	})();
 /******/ 	
 /************************************************************************/
 var __webpack_exports__ = {};
@@ -51,57 +51,57 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  __experimentalRichText: function() { return /* reexport */ __experimentalRichText; },
-  __unstableCreateElement: function() { return /* reexport */ createElement; },
-  __unstableFormatEdit: function() { return /* reexport */ FormatEdit; },
-  __unstableToDom: function() { return /* reexport */ toDom; },
-  __unstableUseRichText: function() { return /* reexport */ useRichText; },
-  applyFormat: function() { return /* reexport */ applyFormat; },
-  concat: function() { return /* reexport */ concat; },
-  create: function() { return /* reexport */ create; },
-  getActiveFormat: function() { return /* reexport */ getActiveFormat; },
-  getActiveFormats: function() { return /* reexport */ getActiveFormats; },
-  getActiveObject: function() { return /* reexport */ getActiveObject; },
-  getTextContent: function() { return /* reexport */ getTextContent; },
-  insert: function() { return /* reexport */ insert; },
-  insertObject: function() { return /* reexport */ insertObject; },
-  isCollapsed: function() { return /* reexport */ isCollapsed; },
-  isEmpty: function() { return /* reexport */ isEmpty; },
-  join: function() { return /* reexport */ join; },
-  registerFormatType: function() { return /* reexport */ registerFormatType; },
-  remove: function() { return /* reexport */ remove; },
-  removeFormat: function() { return /* reexport */ removeFormat; },
-  replace: function() { return /* reexport */ replace_replace; },
-  slice: function() { return /* reexport */ slice; },
-  split: function() { return /* reexport */ split; },
-  store: function() { return /* reexport */ store; },
-  toHTMLString: function() { return /* reexport */ toHTMLString; },
-  toggleFormat: function() { return /* reexport */ toggleFormat; },
-  unregisterFormatType: function() { return /* reexport */ unregisterFormatType; },
-  useAnchor: function() { return /* reexport */ useAnchor; },
-  useAnchorRef: function() { return /* reexport */ useAnchorRef; }
+  RichTextData: () => (/* reexport */ RichTextData),
+  __experimentalRichText: () => (/* reexport */ __experimentalRichText),
+  __unstableCreateElement: () => (/* reexport */ createElement),
+  __unstableToDom: () => (/* reexport */ toDom),
+  __unstableUseRichText: () => (/* reexport */ useRichText),
+  applyFormat: () => (/* reexport */ applyFormat),
+  concat: () => (/* reexport */ concat),
+  create: () => (/* reexport */ create),
+  getActiveFormat: () => (/* reexport */ getActiveFormat),
+  getActiveFormats: () => (/* reexport */ getActiveFormats),
+  getActiveObject: () => (/* reexport */ getActiveObject),
+  getTextContent: () => (/* reexport */ getTextContent),
+  insert: () => (/* reexport */ insert),
+  insertObject: () => (/* reexport */ insertObject),
+  isCollapsed: () => (/* reexport */ isCollapsed),
+  isEmpty: () => (/* reexport */ isEmpty),
+  join: () => (/* reexport */ join),
+  registerFormatType: () => (/* reexport */ registerFormatType),
+  remove: () => (/* reexport */ remove_remove),
+  removeFormat: () => (/* reexport */ removeFormat),
+  replace: () => (/* reexport */ replace_replace),
+  slice: () => (/* reexport */ slice),
+  split: () => (/* reexport */ split),
+  store: () => (/* reexport */ store),
+  toHTMLString: () => (/* reexport */ toHTMLString),
+  toggleFormat: () => (/* reexport */ toggleFormat),
+  unregisterFormatType: () => (/* reexport */ unregisterFormatType),
+  useAnchor: () => (/* reexport */ useAnchor),
+  useAnchorRef: () => (/* reexport */ useAnchorRef)
 });
 
 // NAMESPACE OBJECT: ./node_modules/@wordpress/rich-text/build-module/store/selectors.js
 var selectors_namespaceObject = {};
 __webpack_require__.r(selectors_namespaceObject);
 __webpack_require__.d(selectors_namespaceObject, {
-  getFormatType: function() { return getFormatType; },
-  getFormatTypeForBareElement: function() { return getFormatTypeForBareElement; },
-  getFormatTypeForClassName: function() { return getFormatTypeForClassName; },
-  getFormatTypes: function() { return getFormatTypes; }
+  getFormatType: () => (getFormatType),
+  getFormatTypeForBareElement: () => (getFormatTypeForBareElement),
+  getFormatTypeForClassName: () => (getFormatTypeForClassName),
+  getFormatTypes: () => (getFormatTypes)
 });
 
 // NAMESPACE OBJECT: ./node_modules/@wordpress/rich-text/build-module/store/actions.js
 var actions_namespaceObject = {};
 __webpack_require__.r(actions_namespaceObject);
 __webpack_require__.d(actions_namespaceObject, {
-  addFormatTypes: function() { return addFormatTypes; },
-  removeFormatTypes: function() { return removeFormatTypes; }
+  addFormatTypes: () => (addFormatTypes),
+  removeFormatTypes: () => (removeFormatTypes)
 });
 
 ;// CONCATENATED MODULE: external ["wp","data"]
-var external_wp_data_namespaceObject = window["wp"]["data"];
+const external_wp_data_namespaceObject = window["wp"]["data"];
 ;// CONCATENATED MODULE: ./node_modules/@wordpress/rich-text/build-module/store/reducer.js
 /**
  * WordPress dependencies
@@ -132,7 +132,7 @@ function formatTypes(state = {}, action) {
   }
   return state;
 }
-/* harmony default export */ var reducer = ((0,external_wp_data_namespaceObject.combineReducers)({
+/* harmony default export */ const reducer = ((0,external_wp_data_namespaceObject.combineReducers)({
   formatTypes
 }));
 
@@ -879,6 +879,524 @@ const OBJECT_REPLACEMENT_CHARACTER = '\ufffc';
  */
 const ZWNBSP = '\ufeff';
 
+;// CONCATENATED MODULE: external ["wp","escapeHtml"]
+const external_wp_escapeHtml_namespaceObject = window["wp"]["escapeHtml"];
+;// CONCATENATED MODULE: ./node_modules/@wordpress/rich-text/build-module/get-active-formats.js
+/** @typedef {import('./types').RichTextValue} RichTextValue */
+/** @typedef {import('./types').RichTextFormatList} RichTextFormatList */
+
+/**
+ * Internal dependencies
+ */
+
+
+/**
+ * Gets the all format objects at the start of the selection.
+ *
+ * @param {RichTextValue} value                Value to inspect.
+ * @param {Array}         EMPTY_ACTIVE_FORMATS Array to return if there are no
+ *                                             active formats.
+ *
+ * @return {RichTextFormatList} Active format objects.
+ */
+function getActiveFormats(value, EMPTY_ACTIVE_FORMATS = []) {
+  const {
+    formats,
+    start,
+    end,
+    activeFormats
+  } = value;
+  if (start === undefined) {
+    return EMPTY_ACTIVE_FORMATS;
+  }
+  if (start === end) {
+    // For a collapsed caret, it is possible to override the active formats.
+    if (activeFormats) {
+      return activeFormats;
+    }
+    const formatsBefore = formats[start - 1] || EMPTY_ACTIVE_FORMATS;
+    const formatsAfter = formats[start] || EMPTY_ACTIVE_FORMATS;
+
+    // By default, select the lowest amount of formats possible (which means
+    // the caret is positioned outside the format boundary). The user can
+    // then use arrow keys to define `activeFormats`.
+    if (formatsBefore.length < formatsAfter.length) {
+      return formatsBefore;
+    }
+    return formatsAfter;
+  }
+
+  // If there's no formats at the start index, there are not active formats.
+  if (!formats[start]) {
+    return EMPTY_ACTIVE_FORMATS;
+  }
+  const selectedFormats = formats.slice(start, end);
+
+  // Clone the formats so we're not mutating the live value.
+  const _activeFormats = [...selectedFormats[0]];
+  let i = selectedFormats.length;
+
+  // For performance reasons, start from the end where it's much quicker to
+  // realise that there are no active formats.
+  while (i--) {
+    const formatsAtIndex = selectedFormats[i];
+
+    // If we run into any index without formats, we're sure that there's no
+    // active formats.
+    if (!formatsAtIndex) {
+      return EMPTY_ACTIVE_FORMATS;
+    }
+    let ii = _activeFormats.length;
+
+    // Loop over the active formats and remove any that are not present at
+    // the current index.
+    while (ii--) {
+      const format = _activeFormats[ii];
+      if (!formatsAtIndex.find(_format => isFormatEqual(format, _format))) {
+        _activeFormats.splice(ii, 1);
+      }
+    }
+
+    // If there are no active formats, we can stop.
+    if (_activeFormats.length === 0) {
+      return EMPTY_ACTIVE_FORMATS;
+    }
+  }
+  return _activeFormats || EMPTY_ACTIVE_FORMATS;
+}
+
+;// CONCATENATED MODULE: ./node_modules/@wordpress/rich-text/build-module/get-format-type.js
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+
+/** @typedef {import('./register-format-type').RichTextFormatType} RichTextFormatType */
+
+/**
+ * Returns a registered format type.
+ *
+ * @param {string} name Format name.
+ *
+ * @return {RichTextFormatType|undefined} Format type.
+ */
+function get_format_type_getFormatType(name) {
+  return (0,external_wp_data_namespaceObject.select)(store).getFormatType(name);
+}
+
+;// CONCATENATED MODULE: ./node_modules/@wordpress/rich-text/build-module/to-tree.js
+/**
+ * Internal dependencies
+ */
+
+
+
+
+function restoreOnAttributes(attributes, isEditableTree) {
+  if (isEditableTree) {
+    return attributes;
+  }
+  const newAttributes = {};
+  for (const key in attributes) {
+    let newKey = key;
+    if (key.startsWith('data-disable-rich-text-')) {
+      newKey = key.slice('data-disable-rich-text-'.length);
+    }
+    newAttributes[newKey] = attributes[key];
+  }
+  return newAttributes;
+}
+
+/**
+ * Converts a format object to information that can be used to create an element
+ * from (type, attributes and object).
+ *
+ * @param {Object}  $1                        Named parameters.
+ * @param {string}  $1.type                   The format type.
+ * @param {string}  $1.tagName                The tag name.
+ * @param {Object}  $1.attributes             The format attributes.
+ * @param {Object}  $1.unregisteredAttributes The unregistered format
+ *                                            attributes.
+ * @param {boolean} $1.object                 Whether or not it is an object
+ *                                            format.
+ * @param {boolean} $1.boundaryClass          Whether or not to apply a boundary
+ *                                            class.
+ * @param {boolean} $1.isEditableTree
+ *
+ * @return {Object} Information to be used for element creation.
+ */
+function fromFormat({
+  type,
+  tagName,
+  attributes,
+  unregisteredAttributes,
+  object,
+  boundaryClass,
+  isEditableTree
+}) {
+  const formatType = get_format_type_getFormatType(type);
+  let elementAttributes = {};
+  if (boundaryClass && isEditableTree) {
+    elementAttributes['data-rich-text-format-boundary'] = 'true';
+  }
+  if (!formatType) {
+    if (attributes) {
+      elementAttributes = {
+        ...attributes,
+        ...elementAttributes
+      };
+    }
+    return {
+      type,
+      attributes: restoreOnAttributes(elementAttributes, isEditableTree),
+      object
+    };
+  }
+  elementAttributes = {
+    ...unregisteredAttributes,
+    ...elementAttributes
+  };
+  for (const name in attributes) {
+    const key = formatType.attributes ? formatType.attributes[name] : false;
+    if (key) {
+      elementAttributes[key] = attributes[name];
+    } else {
+      elementAttributes[name] = attributes[name];
+    }
+  }
+  if (formatType.className) {
+    if (elementAttributes.class) {
+      elementAttributes.class = `${formatType.className} ${elementAttributes.class}`;
+    } else {
+      elementAttributes.class = formatType.className;
+    }
+  }
+
+  // When a format is declared as non editable, make it non editable in the
+  // editor.
+  if (isEditableTree && formatType.contentEditable === false) {
+    elementAttributes.contenteditable = 'false';
+  }
+  return {
+    type: tagName || formatType.tagName,
+    object: formatType.object,
+    attributes: restoreOnAttributes(elementAttributes, isEditableTree)
+  };
+}
+
+/**
+ * Checks if both arrays of formats up until a certain index are equal.
+ *
+ * @param {Array}  a     Array of formats to compare.
+ * @param {Array}  b     Array of formats to compare.
+ * @param {number} index Index to check until.
+ */
+function isEqualUntil(a, b, index) {
+  do {
+    if (a[index] !== b[index]) {
+      return false;
+    }
+  } while (index--);
+  return true;
+}
+function toTree({
+  value,
+  preserveWhiteSpace,
+  createEmpty,
+  append,
+  getLastChild,
+  getParent,
+  isText,
+  getText,
+  remove,
+  appendText,
+  onStartIndex,
+  onEndIndex,
+  isEditableTree,
+  placeholder
+}) {
+  const {
+    formats,
+    replacements,
+    text,
+    start,
+    end
+  } = value;
+  const formatsLength = formats.length + 1;
+  const tree = createEmpty();
+  const activeFormats = getActiveFormats(value);
+  const deepestActiveFormat = activeFormats[activeFormats.length - 1];
+  let lastCharacterFormats;
+  let lastCharacter;
+  append(tree, '');
+  for (let i = 0; i < formatsLength; i++) {
+    const character = text.charAt(i);
+    const shouldInsertPadding = isEditableTree && (
+    // Pad the line if the line is empty.
+    !lastCharacter ||
+    // Pad the line if the previous character is a line break, otherwise
+    // the line break won't be visible.
+    lastCharacter === '\n');
+    const characterFormats = formats[i];
+    let pointer = getLastChild(tree);
+    if (characterFormats) {
+      characterFormats.forEach((format, formatIndex) => {
+        if (pointer && lastCharacterFormats &&
+        // Reuse the last element if all formats remain the same.
+        isEqualUntil(characterFormats, lastCharacterFormats, formatIndex)) {
+          pointer = getLastChild(pointer);
+          return;
+        }
+        const {
+          type,
+          tagName,
+          attributes,
+          unregisteredAttributes
+        } = format;
+        const boundaryClass = isEditableTree && format === deepestActiveFormat;
+        const parent = getParent(pointer);
+        const newNode = append(parent, fromFormat({
+          type,
+          tagName,
+          attributes,
+          unregisteredAttributes,
+          boundaryClass,
+          isEditableTree
+        }));
+        if (isText(pointer) && getText(pointer).length === 0) {
+          remove(pointer);
+        }
+        pointer = append(newNode, '');
+      });
+    }
+
+    // If there is selection at 0, handle it before characters are inserted.
+    if (i === 0) {
+      if (onStartIndex && start === 0) {
+        onStartIndex(tree, pointer);
+      }
+      if (onEndIndex && end === 0) {
+        onEndIndex(tree, pointer);
+      }
+    }
+    if (character === OBJECT_REPLACEMENT_CHARACTER) {
+      const replacement = replacements[i];
+      if (!replacement) continue;
+      const {
+        type,
+        attributes,
+        innerHTML
+      } = replacement;
+      const formatType = get_format_type_getFormatType(type);
+      if (!isEditableTree && type === 'script') {
+        pointer = append(getParent(pointer), fromFormat({
+          type: 'script',
+          isEditableTree
+        }));
+        append(pointer, {
+          html: decodeURIComponent(attributes['data-rich-text-script'])
+        });
+      } else if (formatType?.contentEditable === false) {
+        // For non editable formats, render the stored inner HTML.
+        pointer = append(getParent(pointer), fromFormat({
+          ...replacement,
+          isEditableTree,
+          boundaryClass: start === i && end === i + 1
+        }));
+        if (innerHTML) {
+          append(pointer, {
+            html: innerHTML
+          });
+        }
+      } else {
+        pointer = append(getParent(pointer), fromFormat({
+          ...replacement,
+          object: true,
+          isEditableTree
+        }));
+      }
+      // Ensure pointer is text node.
+      pointer = append(getParent(pointer), '');
+    } else if (!preserveWhiteSpace && character === '\n') {
+      pointer = append(getParent(pointer), {
+        type: 'br',
+        attributes: isEditableTree ? {
+          'data-rich-text-line-break': 'true'
+        } : undefined,
+        object: true
+      });
+      // Ensure pointer is text node.
+      pointer = append(getParent(pointer), '');
+    } else if (!isText(pointer)) {
+      pointer = append(getParent(pointer), character);
+    } else {
+      appendText(pointer, character);
+    }
+    if (onStartIndex && start === i + 1) {
+      onStartIndex(tree, pointer);
+    }
+    if (onEndIndex && end === i + 1) {
+      onEndIndex(tree, pointer);
+    }
+    if (shouldInsertPadding && i === text.length) {
+      append(getParent(pointer), ZWNBSP);
+      if (placeholder && text.length === 0) {
+        append(getParent(pointer), {
+          type: 'span',
+          attributes: {
+            'data-rich-text-placeholder': placeholder,
+            // Necessary to prevent the placeholder from catching
+            // selection and being editable.
+            style: 'pointer-events:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;'
+          }
+        });
+      }
+    }
+    lastCharacterFormats = characterFormats;
+    lastCharacter = character;
+  }
+  return tree;
+}
+
+;// CONCATENATED MODULE: ./node_modules/@wordpress/rich-text/build-module/to-html-string.js
+/**
+ * WordPress dependencies
+ */
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+/** @typedef {import('./types').RichTextValue} RichTextValue */
+
+/**
+ * Create an HTML string from a Rich Text value.
+ *
+ * @param {Object}        $1                      Named argements.
+ * @param {RichTextValue} $1.value                Rich text value.
+ * @param {boolean}       [$1.preserveWhiteSpace] Preserves newlines if true.
+ *
+ * @return {string} HTML string.
+ */
+function toHTMLString({
+  value,
+  preserveWhiteSpace
+}) {
+  const tree = toTree({
+    value,
+    preserveWhiteSpace,
+    createEmpty,
+    append,
+    getLastChild,
+    getParent,
+    isText,
+    getText,
+    remove,
+    appendText
+  });
+  return createChildrenHTML(tree.children);
+}
+function createEmpty() {
+  return {};
+}
+function getLastChild({
+  children
+}) {
+  return children && children[children.length - 1];
+}
+function append(parent, object) {
+  if (typeof object === 'string') {
+    object = {
+      text: object
+    };
+  }
+  object.parent = parent;
+  parent.children = parent.children || [];
+  parent.children.push(object);
+  return object;
+}
+function appendText(object, text) {
+  object.text += text;
+}
+function getParent({
+  parent
+}) {
+  return parent;
+}
+function isText({
+  text
+}) {
+  return typeof text === 'string';
+}
+function getText({
+  text
+}) {
+  return text;
+}
+function remove(object) {
+  const index = object.parent.children.indexOf(object);
+  if (index !== -1) {
+    object.parent.children.splice(index, 1);
+  }
+  return object;
+}
+function createElementHTML({
+  type,
+  attributes,
+  object,
+  children
+}) {
+  let attributeString = '';
+  for (const key in attributes) {
+    if (!(0,external_wp_escapeHtml_namespaceObject.isValidAttributeName)(key)) {
+      continue;
+    }
+    attributeString += ` ${key}="${(0,external_wp_escapeHtml_namespaceObject.escapeAttribute)(attributes[key])}"`;
+  }
+  if (object) {
+    return `<${type}${attributeString}>`;
+  }
+  return `<${type}${attributeString}>${createChildrenHTML(children)}</${type}>`;
+}
+function createChildrenHTML(children = []) {
+  return children.map(child => {
+    if (child.html !== undefined) {
+      return child.html;
+    }
+    return child.text === undefined ? createElementHTML(child) : (0,external_wp_escapeHtml_namespaceObject.escapeEditableHTML)(child.text);
+  }).join('');
+}
+
+;// CONCATENATED MODULE: ./node_modules/@wordpress/rich-text/build-module/get-text-content.js
+/**
+ * Internal dependencies
+ */
+
+
+/** @typedef {import('./types').RichTextValue} RichTextValue */
+
+/**
+ * Get the textual content of a Rich Text value. This is similar to
+ * `Element.textContent`.
+ *
+ * @param {RichTextValue} value Value to use.
+ *
+ * @return {string} The text content.
+ */
+function getTextContent({
+  text
+}) {
+  return text.replace(OBJECT_REPLACEMENT_CHARACTER, '');
+}
+
 ;// CONCATENATED MODULE: ./node_modules/@wordpress/rich-text/build-module/create.js
 /**
  * WordPress dependencies
@@ -893,6 +1411,8 @@ const ZWNBSP = '\ufeff';
 
 
 
+
+
 /** @typedef {import('./types').RichTextValue} RichTextValue */
 
 function createEmptyValue() {
@@ -946,9 +1466,6 @@ function toFormat({
   for (const key in formatType.attributes) {
     const name = formatType.attributes[key];
     registeredAttributes[key] = _attributes[name];
-    if (formatType.__unstableFilterAttributeValue) {
-      registeredAttributes[key] = formatType.__unstableFilterAttributeValue(key, registeredAttributes[key]);
-    }
 
     // delete the attribute and what's left is considered
     // to be unregistered.
@@ -973,6 +1490,99 @@ function toFormat({
 }
 
 /**
+ * The RichTextData class is used to instantiate a wrapper around rich text
+ * values, with methods that can be used to transform or manipulate the data.
+ *
+ * - Create an empty instance: `new RichTextData()`.
+ * - Create one from an HTML string: `RichTextData.fromHTMLString(
+ *   '<em>hello</em>' )`.
+ * - Create one from a wrapper HTMLElement: `RichTextData.fromHTMLElement(
+ *   document.querySelector( 'p' ) )`.
+ * - Create one from plain text: `RichTextData.fromPlainText( '1\n2' )`.
+ * - Create one from a rich text value: `new RichTextData( { text: '...',
+ *   formats: [ ... ] } )`.
+ *
+ * @todo Add methods to manipulate the data, such as applyFormat, slice etc.
+ */
+class RichTextData {
+  #value;
+  static empty() {
+    return new RichTextData();
+  }
+  static fromPlainText(text) {
+    return new RichTextData(create({
+      text
+    }));
+  }
+  static fromHTMLString(html) {
+    return new RichTextData(create({
+      html
+    }));
+  }
+  static fromHTMLElement(htmlElement, options = {}) {
+    const {
+      preserveWhiteSpace = false
+    } = options;
+    const element = preserveWhiteSpace ? htmlElement : collapseWhiteSpace(htmlElement);
+    const richTextData = new RichTextData(create({
+      element
+    }));
+    Object.defineProperty(richTextData, 'originalHTML', {
+      value: htmlElement.innerHTML
+    });
+    return richTextData;
+  }
+  constructor(init = createEmptyValue()) {
+    this.#value = init;
+  }
+  toPlainText() {
+    return getTextContent(this.#value);
+  }
+  // We could expose `toHTMLElement` at some point as well, but we'd only use
+  // it internally.
+  toHTMLString({
+    preserveWhiteSpace
+  } = {}) {
+    return this.originalHTML || toHTMLString({
+      value: this.#value,
+      preserveWhiteSpace
+    });
+  }
+  valueOf() {
+    return this.toHTMLString();
+  }
+  toString() {
+    return this.toHTMLString();
+  }
+  toJSON() {
+    return this.toHTMLString();
+  }
+  get length() {
+    return this.text.length;
+  }
+  get formats() {
+    return this.#value.formats;
+  }
+  get replacements() {
+    return this.#value.replacements;
+  }
+  get text() {
+    return this.#value.text;
+  }
+}
+for (const name of Object.getOwnPropertyNames(String.prototype)) {
+  if (RichTextData.prototype.hasOwnProperty(name)) {
+    continue;
+  }
+  Object.defineProperty(RichTextData.prototype, name, {
+    value(...args) {
+      // Should we convert back to RichTextData?
+      return this.toHTMLString()[name](...args);
+    }
+  });
+}
+
+/**
  * Create a RichText value from an `Element` tree (DOM), an HTML string or a
  * plain text string, with optionally a `Range` object to set the selection. If
  * called without any input, an empty value will be created. The optional
@@ -1003,10 +1613,7 @@ function toFormat({
  * @param {string}  [$1.text]                     Text to create value from.
  * @param {string}  [$1.html]                     HTML to create value from.
  * @param {Range}   [$1.range]                    Range to create value from.
- * @param {boolean} [$1.preserveWhiteSpace]       Whether or not to collapse
- *                                                white space characters.
  * @param {boolean} [$1.__unstableIsEditableTree]
- *
  * @return {RichTextValue} A rich text value.
  */
 function create({
@@ -1014,9 +1621,15 @@ function create({
   text,
   html,
   range,
-  __unstableIsEditableTree: isEditableTree,
-  preserveWhiteSpace
+  __unstableIsEditableTree: isEditableTree
 } = {}) {
+  if (html instanceof RichTextData) {
+    return {
+      text: html.text,
+      formats: html.formats,
+      replacements: html.replacements
+    };
+  }
   if (typeof text === 'string' && text.length > 0) {
     return {
       formats: Array(text.length),
@@ -1035,8 +1648,7 @@ function create({
   return createFromElement({
     element,
     range,
-    isEditableTree,
-    preserveWhiteSpace
+    isEditableTree
   });
 }
 
@@ -1138,30 +1750,69 @@ function filterRange(node, range, filter) {
  * Collapse any whitespace used for HTML formatting to one space character,
  * because it will also be displayed as such by the browser.
  *
- * @param {string} string
+ * We need to strip it from the content because we use white-space: pre-wrap for
+ * displaying editable rich text. Without using white-space: pre-wrap, the
+ * browser will litter the content with non breaking spaces, among other issues.
+ * See packages/rich-text/src/component/use-default-style.js.
+ *
+ * @see
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/white-space-collapse#collapsing_of_white_space
+ *
+ * @param {HTMLElement} element
+ * @param {boolean}     isRoot
+ *
+ * @return {HTMLElement} New element with collapsed whitespace.
  */
-function collapseWhiteSpace(string) {
-  return string.replace(/[\n\r\t]+/g, ' ');
+function collapseWhiteSpace(element, isRoot = true) {
+  const clone = element.cloneNode(true);
+  clone.normalize();
+  Array.from(clone.childNodes).forEach((node, i, nodes) => {
+    if (node.nodeType === node.TEXT_NODE) {
+      let newNodeValue = node.nodeValue;
+      if (/[\n\t\r\f]/.test(newNodeValue)) {
+        newNodeValue = newNodeValue.replace(/[\n\t\r\f]+/g, ' ');
+      }
+      if (newNodeValue.indexOf('  ') !== -1) {
+        newNodeValue = newNodeValue.replace(/ {2,}/g, ' ');
+      }
+      if (i === 0 && newNodeValue.startsWith(' ')) {
+        newNodeValue = newNodeValue.slice(1);
+      } else if (isRoot && i === nodes.length - 1 && newNodeValue.endsWith(' ')) {
+        newNodeValue = newNodeValue.slice(0, -1);
+      }
+      node.nodeValue = newNodeValue;
+    } else if (node.nodeType === node.ELEMENT_NODE) {
+      collapseWhiteSpace(node, false);
+    }
+  });
+  return clone;
 }
 
 /**
- * Removes reserved characters used by rich-text (zero width non breaking spaces added by `toTree` and object replacement characters).
+ * We need to normalise line breaks to `\n` so they are consistent across
+ * platforms and serialised properly. Not removing \r would cause it to
+ * linger and result in double line breaks when whitespace is preserved.
+ */
+const CARRIAGE_RETURN = '\r';
+
+/**
+ * Removes reserved characters used by rich-text (zero width non breaking spaces
+ * added by `toTree` and object replacement characters).
  *
  * @param {string} string
  */
 function removeReservedCharacters(string) {
-  // with the global flag, note that we should create a new regex each time OR reset lastIndex state.
-  return string.replace(new RegExp(`[${ZWNBSP}${OBJECT_REPLACEMENT_CHARACTER}]`, 'gu'), '');
+  // with the global flag, note that we should create a new regex each time OR
+  // reset lastIndex state.
+  return string.replace(new RegExp(`[${ZWNBSP}${OBJECT_REPLACEMENT_CHARACTER}${CARRIAGE_RETURN}]`, 'gu'), '');
 }
 
 /**
  * Creates a Rich Text value from a DOM element and range.
  *
- * @param {Object}  $1                      Named argements.
- * @param {Element} [$1.element]            Element to create value from.
- * @param {Range}   [$1.range]              Range to create value from.
- * @param {boolean} [$1.preserveWhiteSpace] Whether or not to collapse white
- *                                          space characters.
+ * @param {Object}  $1                  Named argements.
+ * @param {Element} [$1.element]        Element to create value from.
+ * @param {Range}   [$1.range]          Range to create value from.
  * @param {boolean} [$1.isEditableTree]
  *
  * @return {RichTextValue} A rich text value.
@@ -1169,8 +1820,7 @@ function removeReservedCharacters(string) {
 function createFromElement({
   element,
   range,
-  isEditableTree,
-  preserveWhiteSpace
+  isEditableTree
 }) {
   const accumulator = createEmptyValue();
   if (!element) {
@@ -1187,12 +1837,8 @@ function createFromElement({
     const node = element.childNodes[index];
     const tagName = node.nodeName.toLowerCase();
     if (node.nodeType === node.TEXT_NODE) {
-      let filter = removeReservedCharacters;
-      if (!preserveWhiteSpace) {
-        filter = string => removeReservedCharacters(collapseWhiteSpace(string));
-      }
-      const text = filter(node.nodeValue);
-      range = filterRange(node, range, filter);
+      const text = removeReservedCharacters(node.nodeValue);
+      range = filterRange(node, range, removeReservedCharacters);
       accumulateSelection(accumulator, node, range, {
         text
       });
@@ -1206,11 +1852,9 @@ function createFromElement({
     if (node.nodeType !== node.ELEMENT_NODE) {
       continue;
     }
-    if (isEditableTree && (
-    // Ignore any placeholders.
-    node.getAttribute('data-rich-text-placeholder') ||
+    if (isEditableTree &&
     // Ignore any line breaks that are not inserted by us.
-    tagName === 'br' && !node.getAttribute('data-rich-text-line-break'))) {
+    tagName === 'br' && !node.getAttribute('data-rich-text-line-break')) {
       accumulateSelection(accumulator, node, range, createEmptyValue());
       continue;
     }
@@ -1262,11 +1906,13 @@ function createFromElement({
     const value = createFromElement({
       element: node,
       range,
-      isEditableTree,
-      preserveWhiteSpace
+      isEditableTree
     });
     accumulateSelection(accumulator, node, range, value);
-    if (!format) {
+
+    // Ignore any placeholders, but keep their content since the browser
+    // might insert text inside them when the editable element is flex.
+    if (!format || node.getAttribute('data-rich-text-placeholder')) {
       mergePair(accumulator, value);
     } else if (value.text.length === 0) {
       if (format.attributes) {
@@ -1373,90 +2019,6 @@ function concat(...values) {
   return normaliseFormats(values.reduce(mergePair, create()));
 }
 
-;// CONCATENATED MODULE: ./node_modules/@wordpress/rich-text/build-module/get-active-formats.js
-/** @typedef {import('./types').RichTextValue} RichTextValue */
-/** @typedef {import('./types').RichTextFormatList} RichTextFormatList */
-
-/**
- * Internal dependencies
- */
-
-
-/**
- * Gets the all format objects at the start of the selection.
- *
- * @param {RichTextValue} value                Value to inspect.
- * @param {Array}         EMPTY_ACTIVE_FORMATS Array to return if there are no
- *                                             active formats.
- *
- * @return {RichTextFormatList} Active format objects.
- */
-function getActiveFormats(value, EMPTY_ACTIVE_FORMATS = []) {
-  const {
-    formats,
-    start,
-    end,
-    activeFormats
-  } = value;
-  if (start === undefined) {
-    return EMPTY_ACTIVE_FORMATS;
-  }
-  if (start === end) {
-    // For a collapsed caret, it is possible to override the active formats.
-    if (activeFormats) {
-      return activeFormats;
-    }
-    const formatsBefore = formats[start - 1] || EMPTY_ACTIVE_FORMATS;
-    const formatsAfter = formats[start] || EMPTY_ACTIVE_FORMATS;
-
-    // By default, select the lowest amount of formats possible (which means
-    // the caret is positioned outside the format boundary). The user can
-    // then use arrow keys to define `activeFormats`.
-    if (formatsBefore.length < formatsAfter.length) {
-      return formatsBefore;
-    }
-    return formatsAfter;
-  }
-
-  // If there's no formats at the start index, there are not active formats.
-  if (!formats[start]) {
-    return EMPTY_ACTIVE_FORMATS;
-  }
-  const selectedFormats = formats.slice(start, end);
-
-  // Clone the formats so we're not mutating the live value.
-  const _activeFormats = [...selectedFormats[0]];
-  let i = selectedFormats.length;
-
-  // For performance reasons, start from the end where it's much quicker to
-  // realise that there are no active formats.
-  while (i--) {
-    const formatsAtIndex = selectedFormats[i];
-
-    // If we run into any index without formats, we're sure that there's no
-    // active formats.
-    if (!formatsAtIndex) {
-      return EMPTY_ACTIVE_FORMATS;
-    }
-    let ii = _activeFormats.length;
-
-    // Loop over the active formats and remove any that are not present at
-    // the current index.
-    while (ii--) {
-      const format = _activeFormats[ii];
-      if (!formatsAtIndex.find(_format => isFormatEqual(format, _format))) {
-        _activeFormats.splice(ii, 1);
-      }
-    }
-
-    // If there are no active formats, we can stop.
-    if (_activeFormats.length === 0) {
-      return EMPTY_ACTIVE_FORMATS;
-    }
-  }
-  return _activeFormats || EMPTY_ACTIVE_FORMATS;
-}
-
 ;// CONCATENATED MODULE: ./node_modules/@wordpress/rich-text/build-module/get-active-format.js
 /**
  * Internal dependencies
@@ -1513,28 +2075,6 @@ function getActiveObject({
   return replacements[start];
 }
 
-;// CONCATENATED MODULE: ./node_modules/@wordpress/rich-text/build-module/get-text-content.js
-/**
- * Internal dependencies
- */
-
-
-/** @typedef {import('./types').RichTextValue} RichTextValue */
-
-/**
- * Get the textual content of a Rich Text value. This is similar to
- * `Element.textContent`.
- *
- * @param {RichTextValue} value Value to use.
- *
- * @return {string} The text content.
- */
-function getTextContent({
-  text
-}) {
-  return text.replace(OBJECT_REPLACEMENT_CHARACTER, '');
-}
-
 ;// CONCATENATED MODULE: ./node_modules/@wordpress/rich-text/build-module/is-collapsed.js
 /**
  * Internal dependencies
@@ -1673,8 +2213,8 @@ function registerFormatType(name, settings) {
     window.console.error('Format class names must be a string, or null to handle bare elements.');
     return;
   }
-  if (!/^[_a-zA-Z]+[a-zA-Z0-9-]*$/.test(settings.className)) {
-    window.console.error('A class name must begin with a letter, followed by any number of hyphens, letters, or numbers.');
+  if (!/^[_a-zA-Z]+[a-zA-Z0-9_-]*$/.test(settings.className)) {
+    window.console.error('A class name must begin with a letter, followed by any number of hyphens, underscores, letters, or numbers.');
     return;
   }
   if (settings.className === null) {
@@ -1841,7 +2381,7 @@ function insert(value, valueToInsert, startIndex = value.start, endIndex = value
  *
  * @return {RichTextValue} A new value with the content removed.
  */
-function remove(value, startIndex, endIndex) {
+function remove_remove(value, startIndex, endIndex) {
   return insert(value, create(), startIndex, endIndex);
 }
 
@@ -2052,303 +2592,6 @@ function splitAtSelection({
   return [before, after];
 }
 
-;// CONCATENATED MODULE: ./node_modules/@wordpress/rich-text/build-module/get-format-type.js
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-
-/** @typedef {import('./register-format-type').RichTextFormatType} RichTextFormatType */
-
-/**
- * Returns a registered format type.
- *
- * @param {string} name Format name.
- *
- * @return {RichTextFormatType|undefined} Format type.
- */
-function get_format_type_getFormatType(name) {
-  return (0,external_wp_data_namespaceObject.select)(store).getFormatType(name);
-}
-
-;// CONCATENATED MODULE: ./node_modules/@wordpress/rich-text/build-module/to-tree.js
-/**
- * Internal dependencies
- */
-
-
-
-
-function restoreOnAttributes(attributes, isEditableTree) {
-  if (isEditableTree) {
-    return attributes;
-  }
-  const newAttributes = {};
-  for (const key in attributes) {
-    let newKey = key;
-    if (key.startsWith('data-disable-rich-text-')) {
-      newKey = key.slice('data-disable-rich-text-'.length);
-    }
-    newAttributes[newKey] = attributes[key];
-  }
-  return newAttributes;
-}
-
-/**
- * Converts a format object to information that can be used to create an element
- * from (type, attributes and object).
- *
- * @param {Object}  $1                        Named parameters.
- * @param {string}  $1.type                   The format type.
- * @param {string}  $1.tagName                The tag name.
- * @param {Object}  $1.attributes             The format attributes.
- * @param {Object}  $1.unregisteredAttributes The unregistered format
- *                                            attributes.
- * @param {boolean} $1.object                 Whether or not it is an object
- *                                            format.
- * @param {boolean} $1.boundaryClass          Whether or not to apply a boundary
- *                                            class.
- * @param {boolean} $1.isEditableTree
- *
- * @return {Object} Information to be used for element creation.
- */
-function fromFormat({
-  type,
-  tagName,
-  attributes,
-  unregisteredAttributes,
-  object,
-  boundaryClass,
-  isEditableTree
-}) {
-  const formatType = get_format_type_getFormatType(type);
-  let elementAttributes = {};
-  if (boundaryClass && isEditableTree) {
-    elementAttributes['data-rich-text-format-boundary'] = 'true';
-  }
-  if (!formatType) {
-    if (attributes) {
-      elementAttributes = {
-        ...attributes,
-        ...elementAttributes
-      };
-    }
-    return {
-      type,
-      attributes: restoreOnAttributes(elementAttributes, isEditableTree),
-      object
-    };
-  }
-  elementAttributes = {
-    ...unregisteredAttributes,
-    ...elementAttributes
-  };
-  for (const name in attributes) {
-    const key = formatType.attributes ? formatType.attributes[name] : false;
-    if (key) {
-      elementAttributes[key] = attributes[name];
-    } else {
-      elementAttributes[name] = attributes[name];
-    }
-  }
-  if (formatType.className) {
-    if (elementAttributes.class) {
-      elementAttributes.class = `${formatType.className} ${elementAttributes.class}`;
-    } else {
-      elementAttributes.class = formatType.className;
-    }
-  }
-
-  // When a format is declared as non editable, make it non editable in the
-  // editor.
-  if (isEditableTree && formatType.contentEditable === false) {
-    elementAttributes.contenteditable = 'false';
-  }
-  return {
-    type: tagName || formatType.tagName,
-    object: formatType.object,
-    attributes: restoreOnAttributes(elementAttributes, isEditableTree)
-  };
-}
-
-/**
- * Checks if both arrays of formats up until a certain index are equal.
- *
- * @param {Array}  a     Array of formats to compare.
- * @param {Array}  b     Array of formats to compare.
- * @param {number} index Index to check until.
- */
-function isEqualUntil(a, b, index) {
-  do {
-    if (a[index] !== b[index]) {
-      return false;
-    }
-  } while (index--);
-  return true;
-}
-function toTree({
-  value,
-  preserveWhiteSpace,
-  createEmpty,
-  append,
-  getLastChild,
-  getParent,
-  isText,
-  getText,
-  remove,
-  appendText,
-  onStartIndex,
-  onEndIndex,
-  isEditableTree,
-  placeholder
-}) {
-  const {
-    formats,
-    replacements,
-    text,
-    start,
-    end
-  } = value;
-  const formatsLength = formats.length + 1;
-  const tree = createEmpty();
-  const activeFormats = getActiveFormats(value);
-  const deepestActiveFormat = activeFormats[activeFormats.length - 1];
-  let lastCharacterFormats;
-  let lastCharacter;
-  append(tree, '');
-  for (let i = 0; i < formatsLength; i++) {
-    const character = text.charAt(i);
-    const shouldInsertPadding = isEditableTree && (
-    // Pad the line if the line is empty.
-    !lastCharacter ||
-    // Pad the line if the previous character is a line break, otherwise
-    // the line break won't be visible.
-    lastCharacter === '\n');
-    const characterFormats = formats[i];
-    let pointer = getLastChild(tree);
-    if (characterFormats) {
-      characterFormats.forEach((format, formatIndex) => {
-        if (pointer && lastCharacterFormats &&
-        // Reuse the last element if all formats remain the same.
-        isEqualUntil(characterFormats, lastCharacterFormats, formatIndex)) {
-          pointer = getLastChild(pointer);
-          return;
-        }
-        const {
-          type,
-          tagName,
-          attributes,
-          unregisteredAttributes
-        } = format;
-        const boundaryClass = isEditableTree && format === deepestActiveFormat;
-        const parent = getParent(pointer);
-        const newNode = append(parent, fromFormat({
-          type,
-          tagName,
-          attributes,
-          unregisteredAttributes,
-          boundaryClass,
-          isEditableTree
-        }));
-        if (isText(pointer) && getText(pointer).length === 0) {
-          remove(pointer);
-        }
-        pointer = append(newNode, '');
-      });
-    }
-
-    // If there is selection at 0, handle it before characters are inserted.
-    if (i === 0) {
-      if (onStartIndex && start === 0) {
-        onStartIndex(tree, pointer);
-      }
-      if (onEndIndex && end === 0) {
-        onEndIndex(tree, pointer);
-      }
-    }
-    if (character === OBJECT_REPLACEMENT_CHARACTER) {
-      const replacement = replacements[i];
-      if (!replacement) continue;
-      const {
-        type,
-        attributes,
-        innerHTML
-      } = replacement;
-      const formatType = get_format_type_getFormatType(type);
-      if (!isEditableTree && type === 'script') {
-        pointer = append(getParent(pointer), fromFormat({
-          type: 'script',
-          isEditableTree
-        }));
-        append(pointer, {
-          html: decodeURIComponent(attributes['data-rich-text-script'])
-        });
-      } else if (formatType?.contentEditable === false) {
-        // For non editable formats, render the stored inner HTML.
-        pointer = append(getParent(pointer), fromFormat({
-          ...replacement,
-          isEditableTree,
-          boundaryClass: start === i && end === i + 1
-        }));
-        if (innerHTML) {
-          append(pointer, {
-            html: innerHTML
-          });
-        }
-      } else {
-        pointer = append(getParent(pointer), fromFormat({
-          ...replacement,
-          object: true,
-          isEditableTree
-        }));
-      }
-      // Ensure pointer is text node.
-      pointer = append(getParent(pointer), '');
-    } else if (!preserveWhiteSpace && character === '\n') {
-      pointer = append(getParent(pointer), {
-        type: 'br',
-        attributes: isEditableTree ? {
-          'data-rich-text-line-break': 'true'
-        } : undefined,
-        object: true
-      });
-      // Ensure pointer is text node.
-      pointer = append(getParent(pointer), '');
-    } else if (!isText(pointer)) {
-      pointer = append(getParent(pointer), character);
-    } else {
-      appendText(pointer, character);
-    }
-    if (onStartIndex && start === i + 1) {
-      onStartIndex(tree, pointer);
-    }
-    if (onEndIndex && end === i + 1) {
-      onEndIndex(tree, pointer);
-    }
-    if (shouldInsertPadding && i === text.length) {
-      append(getParent(pointer), ZWNBSP);
-      if (placeholder && text.length === 0) {
-        append(getParent(pointer), {
-          type: 'span',
-          attributes: {
-            'data-rich-text-placeholder': placeholder,
-            // Necessary to prevent the placeholder from catching
-            // selection and being editable.
-            style: 'pointer-events:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;'
-          }
-        });
-      }
-    }
-    lastCharacterFormats = characterFormats;
-    lastCharacter = character;
-  }
-  return tree;
-}
-
 ;// CONCATENATED MODULE: ./node_modules/@wordpress/rich-text/build-module/is-range-equal.js
 /**
  * Returns true if two ranges are equal, or false otherwise. Ranges are
@@ -2416,7 +2659,7 @@ function getNodeByPath(node, path) {
     offset: path[0]
   };
 }
-function append(element, child) {
+function to_dom_append(element, child) {
   if (child.html !== undefined) {
     return element.innerHTML += child.html;
   }
@@ -2435,23 +2678,23 @@ function append(element, child) {
   }
   return element.appendChild(child);
 }
-function appendText(node, text) {
+function to_dom_appendText(node, text) {
   node.appendData(text);
 }
-function getLastChild({
+function to_dom_getLastChild({
   lastChild
 }) {
   return lastChild;
 }
-function getParent({
+function to_dom_getParent({
   parentNode
 }) {
   return parentNode;
 }
-function isText(node) {
+function to_dom_isText(node) {
   return node.nodeType === node.TEXT_NODE;
 }
-function getText({
+function to_dom_getText({
   nodeValue
 }) {
   return nodeValue;
@@ -2489,13 +2732,13 @@ function toDom({
   const tree = toTree({
     value,
     createEmpty,
-    append,
-    getLastChild,
-    getParent,
-    isText,
-    getText,
+    append: to_dom_append,
+    getLastChild: to_dom_getLastChild,
+    getParent: to_dom_getParent,
+    isText: to_dom_isText,
+    getText: to_dom_getText,
     remove: to_dom_remove,
-    appendText,
+    appendText: to_dom_appendText,
     onStartIndex(body, pointer) {
       startPath = createPathToNode(pointer, body, [pointer.nodeValue.length]);
     },
@@ -2647,126 +2890,10 @@ function applySelection({
   }
 }
 
-;// CONCATENATED MODULE: external ["wp","escapeHtml"]
-var external_wp_escapeHtml_namespaceObject = window["wp"]["escapeHtml"];
-;// CONCATENATED MODULE: ./node_modules/@wordpress/rich-text/build-module/to-html-string.js
-/**
- * WordPress dependencies
- */
-
-
-
-/**
- * Internal dependencies
- */
-
-
-
-/** @typedef {import('./types').RichTextValue} RichTextValue */
-
-/**
- * Create an HTML string from a Rich Text value.
- *
- * @param {Object}        $1                      Named argements.
- * @param {RichTextValue} $1.value                Rich text value.
- * @param {boolean}       [$1.preserveWhiteSpace] Whether or not to use newline
- *                                                characters for line breaks.
- *
- * @return {string} HTML string.
- */
-function toHTMLString({
-  value,
-  preserveWhiteSpace
-}) {
-  const tree = toTree({
-    value,
-    preserveWhiteSpace,
-    createEmpty,
-    append: to_html_string_append,
-    getLastChild: to_html_string_getLastChild,
-    getParent: to_html_string_getParent,
-    isText: to_html_string_isText,
-    getText: to_html_string_getText,
-    remove: to_html_string_remove,
-    appendText: to_html_string_appendText
-  });
-  return createChildrenHTML(tree.children);
-}
-function createEmpty() {
-  return {};
-}
-function to_html_string_getLastChild({
-  children
-}) {
-  return children && children[children.length - 1];
-}
-function to_html_string_append(parent, object) {
-  if (typeof object === 'string') {
-    object = {
-      text: object
-    };
-  }
-  object.parent = parent;
-  parent.children = parent.children || [];
-  parent.children.push(object);
-  return object;
-}
-function to_html_string_appendText(object, text) {
-  object.text += text;
-}
-function to_html_string_getParent({
-  parent
-}) {
-  return parent;
-}
-function to_html_string_isText({
-  text
-}) {
-  return typeof text === 'string';
-}
-function to_html_string_getText({
-  text
-}) {
-  return text;
-}
-function to_html_string_remove(object) {
-  const index = object.parent.children.indexOf(object);
-  if (index !== -1) {
-    object.parent.children.splice(index, 1);
-  }
-  return object;
-}
-function createElementHTML({
-  type,
-  attributes,
-  object,
-  children
-}) {
-  let attributeString = '';
-  for (const key in attributes) {
-    if (!(0,external_wp_escapeHtml_namespaceObject.isValidAttributeName)(key)) {
-      continue;
-    }
-    attributeString += ` ${key}="${(0,external_wp_escapeHtml_namespaceObject.escapeAttribute)(attributes[key])}"`;
-  }
-  if (object) {
-    return `<${type}${attributeString}>`;
-  }
-  return `<${type}${attributeString}>${createChildrenHTML(children)}</${type}>`;
-}
-function createChildrenHTML(children = []) {
-  return children.map(child => {
-    if (child.html !== undefined) {
-      return child.html;
-    }
-    return child.text === undefined ? createElementHTML(child) : (0,external_wp_escapeHtml_namespaceObject.escapeEditableHTML)(child.text);
-  }).join('');
-}
-
 ;// CONCATENATED MODULE: external ["wp","a11y"]
-var external_wp_a11y_namespaceObject = window["wp"]["a11y"];
+const external_wp_a11y_namespaceObject = window["wp"]["a11y"];
 ;// CONCATENATED MODULE: external ["wp","i18n"]
-var external_wp_i18n_namespaceObject = window["wp"]["i18n"];
+const external_wp_i18n_namespaceObject = window["wp"]["i18n"];
 ;// CONCATENATED MODULE: ./node_modules/@wordpress/rich-text/build-module/toggle-format.js
 /**
  * WordPress dependencies
@@ -2844,9 +2971,9 @@ function unregisterFormatType(name) {
 }
 
 ;// CONCATENATED MODULE: external ["wp","element"]
-var external_wp_element_namespaceObject = window["wp"]["element"];
+const external_wp_element_namespaceObject = window["wp"]["element"];
 ;// CONCATENATED MODULE: external ["wp","deprecated"]
-var external_wp_deprecated_namespaceObject = window["wp"]["deprecated"];
+const external_wp_deprecated_namespaceObject = window["wp"]["deprecated"];
 var external_wp_deprecated_default = /*#__PURE__*/__webpack_require__.n(external_wp_deprecated_namespaceObject);
 ;// CONCATENATED MODULE: ./node_modules/@wordpress/rich-text/build-module/component/use-anchor-ref.js
 /**
@@ -2922,12 +3049,15 @@ function useAnchorRef({
   }, [activeFormat, value.start, value.end, tagName, className]);
 }
 
+;// CONCATENATED MODULE: external ["wp","compose"]
+const external_wp_compose_namespaceObject = window["wp"]["compose"];
 ;// CONCATENATED MODULE: ./node_modules/@wordpress/rich-text/build-module/component/use-anchor.js
 /**
  * WordPress dependencies
  */
 
 
+
 /** @typedef {import('../register-format-type').WPFormat} WPFormat */
 /** @typedef {import('../types').RichTextValue} RichTextValue */
 
@@ -3048,14 +3178,13 @@ function useAnchor({
 }) {
   const {
     tagName,
-    className
+    className,
+    isActive
   } = settings;
   const [anchor, setAnchor] = (0,external_wp_element_namespaceObject.useState)(() => getAnchor(editableContentElement, tagName, className));
+  const wasActive = (0,external_wp_compose_namespaceObject.usePrevious)(isActive);
   (0,external_wp_element_namespaceObject.useLayoutEffect)(() => {
     if (!editableContentElement) return;
-    const {
-      ownerDocument
-    } = editableContentElement;
     function callback() {
       setAnchor(getAnchor(editableContentElement, tagName, className));
     }
@@ -3065,18 +3194,30 @@ function useAnchor({
     function detach() {
       ownerDocument.removeEventListener('selectionchange', callback);
     }
-    if (editableContentElement === ownerDocument.activeElement) {
+    const {
+      ownerDocument
+    } = editableContentElement;
+    if (editableContentElement === ownerDocument.activeElement ||
+    // When a link is created, we need to attach the popover to the newly created anchor.
+    !wasActive && isActive ||
+    // Sometimes we're _removing_ an active anchor, such as the inline color popover.
+    // When we add the color, it switches from a virtual anchor to a `<mark>` element.
+    // When we _remove_ the color, it switches from a `<mark>` element to a virtual anchor.
+    wasActive && !isActive) {
+      setAnchor(getAnchor(editableContentElement, tagName, className));
       attach();
     }
     editableContentElement.addEventListener('focusin', attach);
     editableContentElement.addEventListener('focusout', detach);
-    return detach;
-  }, [editableContentElement, tagName, className]);
+    return () => {
+      detach();
+      editableContentElement.removeEventListener('focusin', attach);
+      editableContentElement.removeEventListener('focusout', detach);
+    };
+  }, [editableContentElement, tagName, className, isActive, wasActive]);
   return anchor;
 }
 
-;// CONCATENATED MODULE: external ["wp","compose"]
-var external_wp_compose_namespaceObject = window["wp"]["compose"];
 ;// CONCATENATED MODULE: ./node_modules/@wordpress/rich-text/build-module/component/use-default-style.js
 /**
  * WordPress dependencies
@@ -3194,8 +3335,7 @@ function useCopyHandler(props) {
   return (0,external_wp_compose_namespaceObject.useRefEffect)(element => {
     function onCopy(event) {
       const {
-        record,
-        preserveWhiteSpace
+        record
       } = propsRef.current;
       const {
         ownerDocument
@@ -3206,8 +3346,7 @@ function useCopyHandler(props) {
       const selectedRecord = slice(record.current);
       const plainText = getTextContent(selectedRecord);
       const html = toHTMLString({
-        value: selectedRecord,
-        preserveWhiteSpace
+        value: selectedRecord
       });
       event.clipboardData.setData('text/plain', plainText);
       event.clipboardData.setData('text/html', html);
@@ -3227,7 +3366,7 @@ function useCopyHandler(props) {
 }
 
 ;// CONCATENATED MODULE: external ["wp","keycodes"]
-var external_wp_keycodes_namespaceObject = window["wp"]["keycodes"];
+const external_wp_keycodes_namespaceObject = window["wp"]["keycodes"];
 ;// CONCATENATED MODULE: ./node_modules/@wordpress/rich-text/build-module/component/use-format-boundaries.js
 /**
  * WordPress dependencies
@@ -3562,49 +3701,11 @@ function useInputAndSelection(props) {
         return;
       }
 
-      // If the selection changes where the active element is a parent of
-      // the rich text instance (writing flow), call `onSelectionChange`
-      // for the rich text instance that contains the start or end of the
-      // selection.
+      // Ensure the active element is the rich text element.
       if (ownerDocument.activeElement !== element) {
-        // Only process if the active elment is contentEditable, either
-        // this rich text instance or the writing flow parent. Fixes a
-        // bug in Firefox where it strangely selects the closest
-        // contentEditable element, even though the click was outside
-        // any contentEditable element.
-        if (ownerDocument.activeElement.contentEditable !== 'true') {
-          return;
-        }
-        if (!ownerDocument.activeElement.contains(element)) {
-          return;
-        }
-        const selection = defaultView.getSelection();
-        const {
-          anchorNode,
-          focusNode
-        } = selection;
-        if (element.contains(anchorNode) && element !== anchorNode && element.contains(focusNode) && element !== focusNode) {
-          const {
-            start,
-            end
-          } = createRecord();
-          record.current.activeFormats = use_input_and_selection_EMPTY_ACTIVE_FORMATS;
-          onSelectionChange(start, end);
-        } else if (element.contains(anchorNode) && element !== anchorNode) {
-          const {
-            start,
-            end: offset = start
-          } = createRecord();
-          record.current.activeFormats = use_input_and_selection_EMPTY_ACTIVE_FORMATS;
-          onSelectionChange(offset);
-        } else if (element.contains(focusNode)) {
-          const {
-            start,
-            end: offset = start
-          } = createRecord();
-          record.current.activeFormats = use_input_and_selection_EMPTY_ACTIVE_FORMATS;
-          onSelectionChange(undefined, offset);
-        }
+        // If it is not, we can stop listening for selection changes.
+        // We resume listening when the element is focused.
+        ownerDocument.removeEventListener('selectionchange', handleSelectionChange);
         return;
       }
 
@@ -3705,21 +3806,22 @@ function useInputAndSelection(props) {
           activeFormats: use_input_and_selection_EMPTY_ACTIVE_FORMATS
         };
       } else {
-        applyRecord(record.current);
-        onSelectionChange(record.current.start, record.current.end);
+        applyRecord(record.current, {
+          domOnly: true
+        });
       }
+      onSelectionChange(record.current.start, record.current.end);
+      ownerDocument.addEventListener('selectionchange', handleSelectionChange);
     }
     element.addEventListener('input', onInput);
     element.addEventListener('compositionstart', onCompositionStart);
     element.addEventListener('compositionend', onCompositionEnd);
     element.addEventListener('focus', onFocus);
-    ownerDocument.addEventListener('selectionchange', handleSelectionChange);
     return () => {
       element.removeEventListener('input', onInput);
       element.removeEventListener('compositionstart', onCompositionStart);
       element.removeEventListener('compositionend', onCompositionEnd);
       element.removeEventListener('focus', onFocus);
-      ownerDocument.removeEventListener('selectionchange', handleSelectionChange);
     };
   }, []);
 }
@@ -3822,7 +3924,7 @@ function useDelete(props) {
 
       // Always handle full content deletion ourselves.
       if (start === 0 && end !== 0 && end === text.length) {
-        handleChange(remove(currentValue));
+        handleChange(remove_remove(currentValue));
         event.preventDefault();
       }
     }
@@ -3860,8 +3962,8 @@ function useRichText({
   selectionStart,
   selectionEnd,
   placeholder,
-  preserveWhiteSpace,
   onSelectionChange,
+  preserveWhiteSpace,
   onChange,
   __unstableDisableFormats: disableFormats,
   __unstableIsSelected: isSelected,
@@ -3884,8 +3986,7 @@ function useRichText({
     return create({
       element: ref.current,
       range,
-      __unstableIsEditableTree: true,
-      preserveWhiteSpace
+      __unstableIsEditableTree: true
     });
   }
   function applyRecord(newRecord, {
@@ -3905,10 +4006,18 @@ function useRichText({
   const record = (0,external_wp_element_namespaceObject.useRef)();
   function setRecordFromProps() {
     _value.current = value;
-    record.current = create({
-      html: value,
-      preserveWhiteSpace
-    });
+    record.current = value;
+    if (!(value instanceof RichTextData)) {
+      record.current = value ? RichTextData.fromHTMLString(value, {
+        preserveWhiteSpace
+      }) : RichTextData.empty();
+    }
+    // To do: make rich text internally work with RichTextData.
+    record.current = {
+      text: record.current.text,
+      formats: record.current.formats,
+      replacements: record.current.replacements
+    };
     if (disableFormats) {
       record.current.formats = Array(value.length);
       record.current.replacements = Array(value.length);
@@ -3923,19 +4032,6 @@ function useRichText({
   if (!record.current) {
     hadSelectionUpdate.current = isSelected;
     setRecordFromProps();
-    // Sometimes formats are added programmatically and we need to make
-    // sure it's persisted to the block store / markup. If these formats
-    // are not applied, they could cause inconsistencies between the data
-    // in the visual editor and the frontend. Right now, it's only relevant
-    // to the `core/text-color` format, which is applied at runtime in
-    // certain circunstances. See the `__unstableFilterAttributeValue`
-    // function in `packages/format-library/src/text-color/index.js`.
-    // @todo find a less-hacky way of solving this.
-
-    const hasRelevantInitFormat = record.current?.formats[0]?.[0]?.type === 'core/text-color';
-    if (hasRelevantInitFormat) {
-      handleChangesUponInit(record.current);
-    }
   } else if (selectionStart !== record.current.start || selectionEnd !== record.current.end) {
     hadSelectionUpdate.current = isSelected;
     record.current = {
@@ -3958,20 +4054,26 @@ function useRichText({
     if (disableFormats) {
       _value.current = newRecord.text;
     } else {
-      _value.current = toHTMLString({
-        value: __unstableBeforeSerialize ? {
-          ...newRecord,
-          formats: __unstableBeforeSerialize(newRecord)
-        } : newRecord,
-        preserveWhiteSpace
-      });
+      const newFormats = __unstableBeforeSerialize ? __unstableBeforeSerialize(newRecord) : newRecord.formats;
+      newRecord = {
+        ...newRecord,
+        formats: newFormats
+      };
+      if (typeof value === 'string') {
+        _value.current = toHTMLString({
+          value: newRecord,
+          preserveWhiteSpace
+        });
+      } else {
+        _value.current = new RichTextData(newRecord);
+      }
     }
     const {
       start,
       end,
       formats,
       text
-    } = newRecord;
+    } = record.current;
 
     // Selection must be updated first, so it is recorded in history when
     // the content change happens.
@@ -3985,27 +4087,6 @@ function useRichText({
     });
     forceRender();
   }
-  function handleChangesUponInit(newRecord) {
-    record.current = newRecord;
-    _value.current = toHTMLString({
-      value: __unstableBeforeSerialize ? {
-        ...newRecord,
-        formats: __unstableBeforeSerialize(newRecord)
-      } : newRecord,
-      preserveWhiteSpace
-    });
-    const {
-      formats,
-      text
-    } = newRecord;
-    registry.batch(() => {
-      onChange(_value.current, {
-        __unstableFormats: formats,
-        __unstableText: text
-      });
-    });
-    forceRender();
-  }
   function applyFromProps() {
     setRecordFromProps();
     applyRecord(record.current);
@@ -4034,8 +4115,7 @@ function useRichText({
   const mergedRefs = (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, useDefaultStyle(), useBoundaryStyle({
     record
   }), useCopyHandler({
-    record,
-    preserveWhiteSpace
+    record
   }), useSelectObject(), useFormatBoundaries({
     record,
     applyRecord
@@ -4067,46 +4147,6 @@ function useRichText({
 }
 function __experimentalRichText() {}
 
-;// CONCATENATED MODULE: ./node_modules/@wordpress/rich-text/build-module/component/format-edit.js
-
-/**
- * Internal dependencies
- */
-
-
-function FormatEdit({
-  formatTypes,
-  onChange,
-  onFocus,
-  value,
-  forwardedRef
-}) {
-  return formatTypes.map(settings => {
-    const {
-      name,
-      edit: Edit
-    } = settings;
-    if (!Edit) {
-      return null;
-    }
-    const activeFormat = getActiveFormat(value, name);
-    const isActive = activeFormat !== undefined;
-    const activeObject = getActiveObject(value);
-    const isObjectActive = activeObject !== undefined && activeObject.type === name;
-    return (0,external_wp_element_namespaceObject.createElement)(Edit, {
-      key: name,
-      isActive: isActive,
-      activeAttributes: isActive ? activeFormat.attributes || {} : {},
-      isObjectActive: isObjectActive,
-      activeObjectAttributes: isObjectActive ? activeObject.attributes || {} : {},
-      value: value,
-      onChange: onChange,
-      onFocus: onFocus,
-      contentRef: forwardedRef
-    });
-  });
-}
-
 ;// CONCATENATED MODULE: ./node_modules/@wordpress/rich-text/build-module/index.js
 
 
@@ -4136,7 +4176,6 @@ function FormatEdit({
 
 
 
-
 /**
  * An object which represents a formatted string. See main `@wordpress/rich-text`
  * documentation for more information.