Adjustments after #1323 merge. Revert content as parameter to load font (To address #923).

Author: obetomuniz

assets/src/edit-story/app/font/actions/useLoadFontFiles.js

@@ -55,6 +55,7 @@ function useLoadFontFiles() {
             font: { family, service, variants },
             fontWeight,
             isItalic,
+            content,
           }) => {
             if (!family || service !== 'fonts.google.com') {
               return null;
@@ -89,8 +90,8 @@ function useLoadFontFiles() {
 
             const ensureFontLoaded = async () => {
               if (document?.fonts) {
-                await document.fonts.load(fontFaceSet);
-                return document.fonts.check(fontFaceSet);
+                await document.fonts.load(fontFaceSet, content || '');
+                return document.fonts.check(fontFaceSet, content || '');
               } else {
                 return null;
               }

assets/src/edit-story/app/font/test/actions/useLoadFontFiles.js

@@ -30,7 +30,8 @@ const DEFAULT_FONT = {
     service: 'fonts.google.com',
   },
   fontWeight: 400,
-  fontStyle: 'normal',
+  isItalic: true,
+  content: 'Fill in some text',
 };
 
 describe('useLoadFontFiles', () => {

assets/src/edit-story/components/library/text/fontPreview.js

@@ -53,14 +53,7 @@ const Text = styled.span`
   color: ${({ theme }) => theme.colors.fg.v1};
 `;
 
-function FontPreview({
-  title,
-  font,
-  fontSize,
-  fontWeight,
-  fontStyle,
-  onClick,
-}) {
+function FontPreview({ title, font, fontSize, fontWeight, content, onClick }) {
   const {
     actions: { maybeEnqueueFontStyle },
   } = useFont();
@@ -70,10 +63,10 @@ function FontPreview({
       {
         font,
         fontWeight,
-        fontStyle,
+        content,
       },
     ]);
-  }, [font, fontWeight, fontStyle, maybeEnqueueFontStyle]);
+  }, [font, fontWeight, content, maybeEnqueueFontStyle]);
 
   return (
     <Preview onClick={onClick}>
@@ -93,7 +86,7 @@ FontPreview.propTypes = {
   font: FontPropType,
   fontSize: PropTypes.number,
   fontWeight: PropTypes.number,
-  fontStyle: PropTypes.string,
+  content: PropTypes.string,
   onClick: PropTypes.func,
 };
 

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

@@ -90,10 +90,11 @@ function FontControls({ selectedElements, pushUpdate }) {
               };
 
               await maybeEnqueueFontStyle(
-                selectedElements.map(() => ({
+                selectedElements.map(({ content }) => ({
                   font: newFont,
                   isItalic,
                   fontWeight,
+                  content,
                 }))
               );
 
@@ -118,10 +119,11 @@ function FontControls({ selectedElements, pushUpdate }) {
               value={fontWeight}
               onChange={async (value) => {
                 await maybeEnqueueFontStyle(
-                  selectedElements.map(({ font }) => ({
+                  selectedElements.map(({ font, content }) => ({
                     font,
                     isItalic,
                     fontWeight: parseInt(value),
+                    content,
                   }))
                 );
                 handleSelectFontWeight(value);

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

@@ -143,10 +143,11 @@ function StylePanel({ selectedElements, pushUpdate }) {
           iconHeight={10}
           onChange={async (value) => {
             await maybeEnqueueFontStyle(
-              selectedElements.map(({ font }) => ({
+              selectedElements.map(({ font, content }) => ({
                 font,
                 isItalic: value,
                 fontWeight,
+                content,
               }))
             );
             handleClickItalic(value);

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

@@ -125,9 +125,10 @@ function TextDisplay({
         font,
         fontWeight,
         isItalic,
+        content,
       },
     ]);
-  }, [font, fontWeight, isItalic, maybeEnqueueFontStyle]);
+  }, [font, fontWeight, isItalic, content, maybeEnqueueFontStyle]);
 
   useTransformHandler(id, (transform) => {
     const target = ref.current;

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

@@ -214,9 +214,10 @@ function TextEdit({
         font,
         fontWeight,
         isItalic,
+        content,
       },
     ]);
-  }, [font, fontWeight, isItalic, maybeEnqueueFontStyle]);
+  }, [font, fontWeight, isItalic, content, maybeEnqueueFontStyle]);
 
   return (
     <Wrapper ref={wrapperRef} onClick={onClick}>