Omit invalid props warning from field types: headings, paragraph, mar…

…kdown Removing content input results as empty string in the saved asset.
sharetribe · Feb 7, 2023 · 3f771f3 · 3f771f3
1 parent 9c6bad3
commit 3f771f3
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 9 deletions.
diff --git a/src/containers/PageBuilder/Field/Field.helpers.js b/src/containers/PageBuilder/Field/Field.helpers.js
@@ -4,7 +4,7 @@ import { sanitizeUrl } from '../../../util/sanitize';
 // Pickers for valid props //
 /////////////////////////////
 
-const hasContent = data => typeof data?.content === 'string' && data?.content.length > 0;
+export const hasContent = data => typeof data?.content === 'string' && data?.content.length > 0;
 
 /**
  * Exposes "content" prop as children property, if "content" has type of string.

diff --git a/src/containers/PageBuilder/Field/Field.helpers.test.js b/src/containers/PageBuilder/Field/Field.helpers.test.js
@@ -1,4 +1,5 @@
 import {
+  hasContent,
   exposeContentAsChildren,
   exposeContentString,
   exposeLinkProps,
@@ -8,6 +9,18 @@ import {
 } from './Field.helpers';
 
 describe('Field helpers', () => {
+  describe('hasContent(data)', () => {
+    it('should return true if data has "content"', () => {
+      expect(hasContent({ content: 'Hello world!' })).toEqual(true);
+      expect(hasContent({ content: 'Hello world!', blaa: 'blaa' })).toEqual(true);
+    });
+
+    it('should return false if "content" is not included or if it is empty string', () => {
+      expect(hasContent({ foo: 'bar' })).toEqual(false);
+      expect(hasContent({ content: '' })).toEqual(false);
+    });
+  });
+
   describe('exposeContentAsChildren(data)', () => {
     it('should return only "children" prop containing the string from passed-in "content"', () => {
       expect(exposeContentAsChildren({ content: 'Hello world!' })).toEqual({

diff --git a/src/containers/PageBuilder/Field/Field.js b/src/containers/PageBuilder/Field/Field.js
@@ -17,6 +17,7 @@ import { YoutubeEmbed } from '../Primitives/YoutubeEmbed';
 import renderMarkdown from '../markdownProcessor';
 
 import {
+  hasContent,
   exposeContentAsChildren,
   exposeContentString,
   exposeLinkProps,
@@ -48,14 +49,22 @@ const MarkdownField = ({ content, components }) => renderMarkdown(content, compo
 // Mapping of field types and components //
 ///////////////////////////////////////////
 
+// For text content (headings, paragraph, markdown), we don't print warning about empty string
+// as that's expected result after removing previously entered string.
+const omitInvalidPropsWarning = data => !hasContent(data);
+
 const defaultFieldComponents = {
-  heading1: { component: H1, pickValidProps: exposeContentAsChildren },
-  heading2: { component: H2, pickValidProps: exposeContentAsChildren },
-  heading3: { component: H3, pickValidProps: exposeContentAsChildren },
-  heading4: { component: H4, pickValidProps: exposeContentAsChildren },
-  heading5: { component: H5, pickValidProps: exposeContentAsChildren },
-  heading6: { component: H6, pickValidProps: exposeContentAsChildren },
-  paragraph: { component: Ingress, pickValidProps: exposeContentAsChildren },
+  heading1: { component: H1, pickValidProps: exposeContentAsChildren, omitInvalidPropsWarning },
+  heading2: { component: H2, pickValidProps: exposeContentAsChildren, omitInvalidPropsWarning },
+  heading3: { component: H3, pickValidProps: exposeContentAsChildren, omitInvalidPropsWarning },
+  heading4: { component: H4, pickValidProps: exposeContentAsChildren, omitInvalidPropsWarning },
+  heading5: { component: H5, pickValidProps: exposeContentAsChildren, omitInvalidPropsWarning },
+  heading6: { component: H6, pickValidProps: exposeContentAsChildren, omitInvalidPropsWarning },
+  paragraph: {
+    component: Ingress,
+    pickValidProps: exposeContentAsChildren,
+    omitInvalidPropsWarning,
+  },
   externalButtonLink: { component: Link, pickValidProps: exposeLinkProps },
   internalButtonLink: { component: Link, pickValidProps: exposeLinkProps },
   image: { component: FieldImage, pickValidProps: exposeImageProps },
@@ -122,10 +131,11 @@ export const validProps = (data, options) => {
   const pickValidProps = config?.pickValidProps;
   if (data && pickValidProps) {
     const validProps = pickValidProps(data);
+    const omitWarning = config?.omitInvalidPropsWarning && config?.omitInvalidPropsWarning(data);
 
     // If picker returns an empty object, data was invalid.
     // Field will render null, but we should warn the dev that data was not valid.
-    if (Object.keys(validProps).length === 0) {
+    if (Object.keys(validProps).length === 0 && !omitWarning) {
       console.warn(`Invalid props detected. Data: ${JSON.stringify(data)}`);
     }
     return validProps;