Changed highlight to use existing style manipulation

Reverted changes to `getValidHTML` and reused the existing HTML manipulation functions.

Author: Morten Barklund

assets/src/edit-story/elements/text/display.js

@@ -18,7 +18,7 @@
  * External dependencies
  */
 import styled from 'styled-components';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useMemo } from 'react';
 
 /**
  * Internal dependencies
@@ -34,8 +34,8 @@ import {
 import StoryPropTypes from '../../types';
 import { BACKGROUND_TEXT_MODE } from '../../constants';
 import { useTransformHandler } from '../../components/transform';
-import removeInlineStyle from '../../utils/removeInlineStyle';
-import getValidHTML from '../../utils/getValidHTML';
+import { getHTMLFormatters } from '../../components/richText/htmlManipulation';
+import createSolid from '../../utils/createSolid';
 import { getHighlightLineheight, generateParagraphTextStyle } from './util';
 
 const HighlightWrapperElement = styled.div`
@@ -128,9 +128,12 @@ function TextDisplay({
   });
 
   if (backgroundTextMode === BACKGROUND_TEXT_MODE.HIGHLIGHT) {
-    const foregroundContent = getValidHTML(content);
-    const backgroundContent = getValidHTML(content, (node) =>
-      removeInlineStyle(node, 'color')
+    const foregroundContent = content;
+    // Setting the text color of the entire block to black essentially removes all inline
+    // color styling allowing us to apply transparent to all of them.
+    const backgroundContent = useMemo(
+      () => getHTMLFormatters().setColor(content, createSolid(0, 0, 0)),
+      [content]
     );
     return (
       <HighlightWrapperElement ref={ref} {...props}>
@@ -162,7 +165,7 @@ function TextDisplay({
     <FillElement
       ref={ref}
       dangerouslySetInnerHTML={{
-        __html: getValidHTML(content),
+        __html: content,
       }}
       {...props}
     />

assets/src/edit-story/elements/text/output.js

@@ -18,14 +18,15 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
+import { useMemo } from 'react';
 
 /**
  * Internal dependencies
  */
 import StoryPropTypes from '../../types';
-import removeInlineStyle from '../../utils/removeInlineStyle';
 import generatePatternStyles from '../../utils/generatePatternStyles';
-import getValidHTML from '../../utils/getValidHTML';
+import { getHTMLFormatters } from '../../components/richText/htmlManipulation';
+import createSolid from '../../utils/createSolid';
 import { dataToEditorX, dataToEditorY } from '../../units';
 import { BACKGROUND_TEXT_MODE } from '../../constants';
 import { generateParagraphTextStyle, getHighlightLineheight } from './util';
@@ -129,9 +130,12 @@ export function TextOutputWithUnits({
   };
 
   if (backgroundTextMode === BACKGROUND_TEXT_MODE.HIGHLIGHT) {
-    const foregroundContent = getValidHTML(content);
-    const backgroundContent = getValidHTML(content, (node) =>
-      removeInlineStyle(node, 'color')
+    const foregroundContent = content;
+    // Setting the text color of the entire block to black essentially removes all inline
+    // color styling allowing us to apply transparent to all of them.
+    const backgroundContent = useMemo(
+      () => getHTMLFormatters().setColor(content, createSolid(0, 0, 0)),
+      [content]
     );
     return (
       <>
@@ -163,7 +167,7 @@ export function TextOutputWithUnits({
     <p
       className={className}
       style={fillStyle}
-      dangerouslySetInnerHTML={{ __html: getValidHTML(content) }}
+      dangerouslySetInnerHTML={{ __html: content }}
     />
   );
 }

assets/src/edit-story/utils/getValidHTML.js

@@ -14,12 +14,9 @@
  * limitations under the License.
  */
 
-const contentBuffer = document.createElement('div');
+const contentBuffer = document.createElement('template');
 
-export default function getValidHTML(string, callback = null) {
+export default function getValidHTML(string) {
   contentBuffer.innerHTML = string;
-  if (callback) {
-    callback(contentBuffer);
-  }
   return contentBuffer.innerHTML;
 }