Add text highlight mode for text background

assets/src/edit-story/components/form/toggleButton.js

@@ -94,11 +94,12 @@ function ToggleButton({
   iconWidth,
   iconHeight,
   label,
+  className,
   ...rest
 }) {
   value = value === MULTIPLE_VALUE ? '' : value;
   return (
-    <Container>
+    <Container className={className}>
       <ContainerLabel
         disabled={disabled}
         value={value}
@@ -127,6 +128,7 @@ ToggleButton.propTypes = {
   disabled: PropTypes.bool,
   iconHeight: PropTypes.number,
   iconWidth: PropTypes.number,
+  className: PropTypes.string,
 };
 
 ToggleButton.defaultProps = {

assets/src/edit-story/components/panels/textStyle/color.js

@@ -18,6 +18,8 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { useRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -27,15 +29,81 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { Color, Label, Row } from '../../form';
-import { useCommonColorValue } from '../utils';
+import { BACKGROUND_TEXT_MODE } from '../../../constants';
+import { ReactComponent as NoneIcon } from '../../../icons/fill_none_icon.svg';
+import { ReactComponent as FilledIcon } from '../../../icons/fill_filled_icon.svg';
+import { ReactComponent as HighlightedIcon } from '../../../icons/fill_highlighted_icon.svg';
+import { Color, Label, Row, ToggleButton } from '../../form';
+import { useKeyDownEffect } from '../../keyboard';
+import { useCommonColorValue, getCommonValue } from '../utils';
+
+const FillRow = styled(Row)`
+  align-items: flex-start;
+  justify-content: flex-start;
+`;
+
+const FillLabel = styled(Label)`
+  flex-basis: 45px;
+  line-height: 32px;
+`;
+
+const FillToggleButton = styled(ToggleButton)`
+  flex: 1 1 32px;
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+
+const Space = styled.div`
+  flex: ${({ flex }) => flex};
+`;
+
+const BUTTONS = [
+  {
+    mode: BACKGROUND_TEXT_MODE.NONE,
+    label: __('None', 'web-stories'),
+    Icon: NoneIcon,
+  },
+  {
+    mode: BACKGROUND_TEXT_MODE.FILL,
+    label: __('Fill', 'web-stories'),
+    Icon: FilledIcon,
+  },
+  {
+    mode: BACKGROUND_TEXT_MODE.HIGHLIGHT,
+    label: __('Highlight', 'web-stories'),
+    Icon: HighlightedIcon,
+  },
+];
 
 function ColorControls({ selectedElements, pushUpdate }) {
   const color = useCommonColorValue(selectedElements, 'color');
   const backgroundColor = useCommonColorValue(
     selectedElements,
     'backgroundColor'
   );
+  const backgroundTextMode = getCommonValue(
+    selectedElements,
+    'backgroundTextMode'
+  );
+  const fillRow = useRef();
+
+  useKeyDownEffect(
+    fillRow,
+    ['left', 'right'],
+    ({ key }) => {
+      const current = BUTTONS.findIndex(
+        ({ mode }) => mode === backgroundTextMode
+      );
+      const next = current + (key === 'ArrowRight' ? 1 : -1);
+      if (next < 0 || next > BUTTONS.length - 1) {
+        return;
+      }
+      pushUpdate({ backgroundTextMode: BUTTONS[next].mode }, true);
+    },
+    [backgroundTextMode]
+  );
 
   return (
     <>
@@ -44,19 +112,56 @@ function ColorControls({ selectedElements, pushUpdate }) {
         <Color
           data-testid="text.color"
           value={color}
-          onChange={(value) => pushUpdate({ color: value }, true)}
-        />
-      </Row>
-      <Row>
-        <Label>{__('Textbox', 'web-stories')}</Label>
-        <Color
-          data-testid="text.backgroundColor"
-          hasGradient
-          value={backgroundColor}
-          onChange={(value) => pushUpdate({ backgroundColor: value }, true)}
-          label={__('Background color', 'web-stories')}
+          onChange={(value) =>
+            pushUpdate(
+              {
+                color: value,
+              },
+              true
+            )
+          }
         />
       </Row>
+      <FillRow ref={fillRow}>
+        <FillLabel>{__('Fill', 'web-stories')}</FillLabel>
+        {BUTTONS.map(({ mode, label, Icon }) => (
+          <FillToggleButton
+            key={mode}
+            icon={<Icon />}
+            value={backgroundTextMode === mode}
+            label={label}
+            onChange={(value) =>
+              value &&
+              pushUpdate(
+                {
+                  backgroundTextMode: mode,
+                },
+                true
+              )
+            }
+          />
+        ))}
+        <Space flex="2" />
+      </FillRow>
+      {backgroundTextMode !== BACKGROUND_TEXT_MODE.NONE && (
+        <Row>
+          <Label>{__('Textbox', 'web-stories')}</Label>
+          <Color
+            data-testid="text.backgroundColor"
+            hasGradient
+            value={backgroundColor}
+            onChange={(value) =>
+              pushUpdate(
+                {
+                  backgroundColor: value,
+                },
+                true
+              )
+            }
+            label={__('Background color', 'web-stories')}
+          />
+        </Row>
+      )}
     </>
   );
 }

assets/src/edit-story/constants.js

@@ -57,3 +57,9 @@ export const Z_INDEX_CANVAS = {
   MOVABLE: 10,
   FLOAT_PANEL: 11,
 };
+
+export const BACKGROUND_TEXT_MODE = {
+  NONE: 'NONE',
+  FILL: 'FILL',
+  HIGHLIGHT: 'HIGHLIGHT',
+};

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

@@ -33,19 +33,73 @@ import {
   elementWithTextParagraphStyle,
 } from '../shared';
 import StoryPropTypes from '../../types';
+import { BACKGROUND_TEXT_MODE } from '../../constants';
 import { useTransformHandler } from '../../components/transform';
-import { draftMarkupToContent, generateParagraphTextStyle } from './util';
-
-const Element = styled.p`
-	${elementFillContent}
-	${elementWithFont}
-	${elementWithBackgroundColor}
-	${elementWithFontColor}
-	${elementWithTextParagraphStyle}
+import {
+  draftMarkupToContent,
+  getHighlightLineheight,
+  generateParagraphTextStyle,
+} from './util';
+
+const HighlightElement = styled.p`
+  ${elementFillContent}
+  ${elementWithFont}
+  ${elementWithFontColor}
+  ${elementWithTextParagraphStyle}
+  line-height: ${({ lineHeight, verticalPadding }) =>
+    getHighlightLineheight(lineHeight, verticalPadding)};
+  margin: 0;
+  padding: 0;
+`;
+
+const HIGHLIGHT_MARGIN_BUFFER = 10;
+
+const MarginedElement = styled.span`
+  display: inline-block;
+  position: relative;
+  top: 0;
+  margin: ${({ horizontalPadding, horizontalBuffer }) =>
+    `0 ${horizontalPadding + horizontalBuffer}px`};
+  left: ${({ horizontalPadding, horizontalBuffer }) =>
+    `-${horizontalPadding + horizontalBuffer}px`};
+`;
+
+const Span = styled.span`
+  ${elementWithBackgroundColor}
+  ${elementWithTextParagraphStyle}
+
+  border-radius: 3px;
+  box-decoration-break: clone;
+  position: relative;
+`;
+
+const BackgroundSpan = styled(Span)`
+  color: transparent;
+`;
+
+const ForegroundSpan = styled(Span)`
+  background: none;
+`;
+
+const FillElement = styled.p`
+  margin: 0;
+  ${elementFillContent}
+  ${elementWithFont}
+  ${elementWithBackgroundColor}
+  ${elementWithFontColor}
+  ${elementWithTextParagraphStyle}
 `;
 
 function TextDisplay({
-  element: { id, bold, content, color, backgroundColor, ...rest },
+  element: {
+    id,
+    bold,
+    content,
+    color,
+    backgroundColor,
+    backgroundTextMode,
+    ...rest
+  },
 }) {
   const ref = useRef(null);
 
@@ -57,6 +111,9 @@ function TextDisplay({
     color,
     backgroundColor,
     ...generateParagraphTextStyle(rest, dataToEditorX, dataToEditorY),
+    horizontalPadding: dataToEditorX(rest.padding.horizontal),
+    horizontalBuffer: dataToEditorX(HIGHLIGHT_MARGIN_BUFFER),
+    verticalPadding: dataToEditorX(rest.padding.vertical),
   };
   const {
     actions: { maybeEnqueueFontStyle },
@@ -75,10 +132,39 @@ function TextDisplay({
       : '';
   });
 
+  if (backgroundTextMode === BACKGROUND_TEXT_MODE.HIGHLIGHT) {
+    return (
+      <>
+        <HighlightElement ref={ref} {...props}>
+          <MarginedElement {...props}>
+            <BackgroundSpan
+              {...props}
+              dangerouslySetInnerHTML={{
+                __html: draftMarkupToContent(content, bold),
+              }}
+            />
+          </MarginedElement>
+        </HighlightElement>
+        <HighlightElement ref={ref} {...props}>
+          <MarginedElement {...props}>
+            <ForegroundSpan
+              {...props}
+              dangerouslySetInnerHTML={{
+                __html: draftMarkupToContent(content, bold),
+              }}
+            />
+          </MarginedElement>
+        </HighlightElement>
+      </>
+    );
+  }
+
   return (
-    <Element
+    <FillElement
       ref={ref}
-      dangerouslySetInnerHTML={{ __html: draftMarkupToContent(content, bold) }}
+      dangerouslySetInnerHTML={{
+        __html: draftMarkupToContent(content, bold),
+      }}
       {...props}
     />
   );

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

@@ -41,7 +41,7 @@ const Element = styled.p`
   ${elementWithFont}
   ${elementWithTextParagraphStyle}
 
-	opacity: 0;
+  opacity: 0;
   user-select: none;
 `;
 

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

@@ -17,6 +17,7 @@
 /**
  * Internal dependencies
  */
+import { BACKGROUND_TEXT_MODE } from '../../constants';
 import { PanelTypes } from '../../components/panels';
 import { SHARED_DEFAULT_ATTRIBUTES } from '../shared';
 export { default as Display } from './display';
@@ -30,6 +31,7 @@ export { default as updateForResizeEvent } from './updateForResizeEvent';
 
 export const defaultAttributes = {
   ...SHARED_DEFAULT_ATTRIBUTES,
+  backgroundTextMode: BACKGROUND_TEXT_MODE.FILL,
   bold: false,
   fontFamily: 'Arial',
   fontFallback: ['Helvetica Neue', 'Helvetica', 'sans-serif'],