diff --git a/src/containers/PageBuilder/Field/Field.helpers.js b/src/containers/PageBuilder/Field/Field.helpers.js index 316e4e26ed..b11f878bcf 100644 --- 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 index 60891008b7..71d4e07a2b 100644 --- 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 index 73327ac158..8792976dde 100644 --- 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;