Address recent PR review

GoogleForCreators · May 8, 2020 · e836308 · e836308
1 parent 94c7720
commit e836308
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 47 deletions.
diff --git a/assets/src/edit-story/app/font/actions/useLoadFontFiles.js b/assets/src/edit-story/app/font/actions/useLoadFontFiles.js
@@ -54,7 +54,7 @@ function useLoadFontFiles() {
           async ({
             font: { family, service, variants },
             fontWeight,
-            isItalic,
+            fontStyle,
             content,
           }) => {
             if (!family || service !== 'fonts.google.com') {
@@ -63,7 +63,6 @@ function useLoadFontFiles() {
 
             const handle = cleanForSlug(family);
             const elementId = `${handle}-css`;
-            const fontStyle = isItalic ? 'italic' : 'normal';
             const fontFaceSet = `
               ${fontStyle || ''} ${fontWeight || ''} 0 '${family}'
             `.trim();

diff --git a/assets/src/edit-story/app/font/test/actions/useLoadFontFiles.js b/assets/src/edit-story/app/font/test/actions/useLoadFontFiles.js
@@ -30,7 +30,7 @@ const DEFAULT_FONT = {
     service: 'fonts.google.com',
   },
   fontWeight: 400,
-  isItalic: true,
+  fontStyle: 'normal',
   content: 'Fill in some text',
 };
 

diff --git a/assets/src/edit-story/components/library/text/fontPreview.js b/assets/src/edit-story/components/library/text/fontPreview.js
@@ -28,6 +28,7 @@ import { useEffect } from 'react';
 import { useFont } from '../../../app';
 import { ALLOWED_EDITOR_PAGE_WIDTHS, PAGE_WIDTH } from '../../../constants';
 import { FontPropType } from '../../../types';
+import stripHTML from '../../../utils/stripHTML';
 
 const PREVIEW_EM_SCALE = ALLOWED_EDITOR_PAGE_WIDTHS[0] / PAGE_WIDTH;
 
@@ -63,7 +64,7 @@ function FontPreview({ title, font, fontSize, fontWeight, content, onClick }) {
       {
         font,
         fontWeight,
-        content,
+        content: stripHTML(content),
       },
     ]);
   }, [font, fontWeight, content, maybeEnqueueFontStyle]);

diff --git a/assets/src/edit-story/components/panels/textStyle/font.js b/assets/src/edit-story/components/panels/textStyle/font.js
@@ -34,6 +34,7 @@ import { PAGE_HEIGHT } from '../../../constants';
 import { useFont } from '../../../app/font';
 import { getCommonValue } from '../utils';
 import objectPick from '../../../utils/objectPick';
+import stripHTML from '../../../utils/stripHTML';
 import useRichTextFormatting from './useRichTextFormatting';
 import getFontWeights from './getFontWeights';
 
@@ -66,6 +67,7 @@ function FontControls({ selectedElements, pushUpdate }) {
     getFontByName,
     fontFamily,
   ]);
+  const fontStyle = isItalic ? 'italic' : 'normal';
 
   return (
     <>
@@ -90,12 +92,14 @@ function FontControls({ selectedElements, pushUpdate }) {
               };
 
               await maybeEnqueueFontStyle(
-                selectedElements.map(({ content }) => ({
-                  font: newFont,
-                  isItalic,
-                  fontWeight,
-                  content,
-                }))
+                selectedElements.map(({ content }) => {
+                  return {
+                    font: newFont,
+                    fontStyle,
+                    fontWeight,
+                    content: stripHTML(content),
+                  };
+                })
               );
 
               pushUpdate(
@@ -119,12 +123,14 @@ function FontControls({ selectedElements, pushUpdate }) {
               value={fontWeight}
               onChange={async (value) => {
                 await maybeEnqueueFontStyle(
-                  selectedElements.map(({ font, content }) => ({
-                    font,
-                    isItalic,
-                    fontWeight: parseInt(value),
-                    content,
-                  }))
+                  selectedElements.map(({ font, content }) => {
+                    return {
+                      font,
+                      fontStyle,
+                      fontWeight: parseInt(value),
+                      content: stripHTML(content),
+                    };
+                  })
                 );
                 handleSelectFontWeight(value);
               }}

diff --git a/assets/src/edit-story/components/panels/textStyle/textStyle.js b/assets/src/edit-story/components/panels/textStyle/textStyle.js
@@ -41,6 +41,7 @@ import { ReactComponent as ItalicIcon } from '../../../icons/italic_icon.svg';
 import { ReactComponent as UnderlineIcon } from '../../../icons/underline_icon.svg';
 import { getCommonValue } from '../utils';
 import { useFont } from '../../../app/font';
+import stripHTML from '../../../utils/stripHTML';
 import useRichTextFormatting from './useRichTextFormatting';
 
 const BoxedNumeric = styled(Numeric)`
@@ -143,12 +144,14 @@ function StylePanel({ selectedElements, pushUpdate }) {
           iconHeight={10}
           onChange={async (value) => {
             await maybeEnqueueFontStyle(
-              selectedElements.map(({ font, content }) => ({
-                font,
-                isItalic: value,
-                fontWeight,
-                content,
-              }))
+              selectedElements.map(({ font, content }) => {
+                return {
+                  font,
+                  fontStyle: value ? 'italic' : 'normal',
+                  fontWeight,
+                  content: stripHTML(content),
+                };
+              })
             );
             handleClickItalic(value);
           }}

diff --git a/assets/src/edit-story/elements/text/display.js b/assets/src/edit-story/elements/text/display.js
@@ -39,6 +39,7 @@ import {
   getHTMLInfo,
 } from '../../components/richText/htmlManipulation';
 import createSolid from '../../utils/createSolid';
+import stripHTML from '../../utils/stripHTML';
 import { getHighlightLineheight, generateParagraphTextStyle } from './util';
 
 const HighlightWrapperElement = styled.div`
@@ -103,8 +104,14 @@ function TextDisplay({
   } = useUnits();
 
   const { font } = rest;
-  const isItalic = useMemo(() => getHTMLInfo(content).isItalic, [content]);
-  const fontWeight = useMemo(() => getHTMLInfo(content).fontWeight, [content]);
+  const fontFaceSetConfigs = useMemo(
+    () => ({
+      fontStyle: getHTMLInfo(content).isItalic ? 'italic' : 'normal',
+      fontWeight: getHTMLInfo(content).fontWeight,
+      content: stripHTML(content),
+    }),
+    [content]
+  );
 
   const props = {
     font,
@@ -120,15 +127,8 @@ function TextDisplay({
     actions: { maybeEnqueueFontStyle },
   } = useFont();
   useEffect(() => {
-    maybeEnqueueFontStyle([
-      {
-        font,
-        fontWeight,
-        isItalic,
-        content,
-      },
-    ]);
-  }, [font, fontWeight, isItalic, content, maybeEnqueueFontStyle]);
+    maybeEnqueueFontStyle([{ ...fontFaceSetConfigs, font }]);
+  }, [font, fontFaceSetConfigs, maybeEnqueueFontStyle]);
 
   useTransformHandler(id, (transform) => {
     const target = ref.current;

diff --git a/assets/src/edit-story/elements/text/edit.js b/assets/src/edit-story/elements/text/edit.js
@@ -43,6 +43,7 @@ import StoryPropTypes from '../../types';
 import { BACKGROUND_TEXT_MODE } from '../../constants';
 import useUnmount from '../../utils/useUnmount';
 import createSolid from '../../utils/createSolid';
+import stripHTML from '../../utils/stripHTML';
 import calcRotatedResizeOffset from '../../utils/calcRotatedResizeOffset';
 import { generateParagraphTextStyle, getHighlightLineheight } from './util';
 
@@ -92,9 +93,15 @@ function TextEdit({
   },
   box: { x, y, height, rotationAngle },
 }) {
-  const { font, fontSize } = rest;
-  const isItalic = useMemo(() => getHTMLInfo(content).isItalic, [content]);
-  const fontWeight = useMemo(() => getHTMLInfo(content).fontWeight, [content]);
+  const { font } = rest;
+  const fontFaceSetConfigs = useMemo(
+    () => ({
+      fontStyle: getHTMLInfo(content).isItalic ? 'italic' : 'normal',
+      fontWeight: getHTMLInfo(content).fontWeight,
+      content: stripHTML(content),
+    }),
+    [content]
+  );
 
   const {
     actions: { dataToEditorX, dataToEditorY, editorToDataX, editorToDataY },
@@ -200,24 +207,16 @@ function TextEdit({
     [handleResize]
   );
   // Also invoke if the raw element height ever changes
-  useEffect(handleResize, [
-    elementHeight,
-    font,
-    fontWeight,
-    isItalic,
-    fontSize,
-  ]);
+  useEffect(handleResize, [elementHeight]);
 
   useEffect(() => {
     maybeEnqueueFontStyle([
       {
+        ...fontFaceSetConfigs,
         font,
-        fontWeight,
-        isItalic,
-        content,
       },
     ]);
-  }, [font, fontWeight, isItalic, content, maybeEnqueueFontStyle]);
+  }, [font, fontFaceSetConfigs, maybeEnqueueFontStyle]);
 
   return (
     <Wrapper ref={wrapperRef} onClick={onClick}>