diff --git a/assets/src/edit-story/elements/text/display.js b/assets/src/edit-story/elements/text/display.js
index ae961463220f..7cb93b24731f 100644
--- a/assets/src/edit-story/elements/text/display.js
+++ b/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}
     />
diff --git a/assets/src/edit-story/elements/text/output.js b/assets/src/edit-story/elements/text/output.js
index e64dddef0ff8..9e3b6297b503 100644
--- a/assets/src/edit-story/elements/text/output.js
+++ b/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 }}
     />
   );
 }
diff --git a/assets/src/edit-story/utils/getValidHTML.js b/assets/src/edit-story/utils/getValidHTML.js
index a766f0d5374f..92f7d975ab9c 100644
--- a/assets/src/edit-story/utils/getValidHTML.js
+++ b/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;
 }
diff --git a/assets/src/edit-story/utils/removeInlineStyle.js b/assets/src/edit-story/utils/removeInlineStyle.js
deleted file mode 100644
index e967c9ef133e..000000000000
--- a/assets/src/edit-story/utils/removeInlineStyle.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
- * Copyright 2020 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export default function removeInlineStyle(node, style) {
-  // if it's not an element nor fragment, skip
-  if (!node || ![1, 11].includes(node.nodeType)) {
-    return;
-  }
-
-  if (node.style) {
-    node.style[style] = '';
-  }
-
-  Array.from(node.childNodes).forEach((childNode) =>
-    removeInlineStyle(childNode, style)
-  );
-}