From 4aea79e85a2e5439c5ed194fb6758a7d8069e39c Mon Sep 17 00:00:00 2001 From: yavorsk Date: Thu, 11 Apr 2024 18:06:54 +0300 Subject: [PATCH 01/21] render field metadata for Text field component; introduce field metadata component - wip --- .../src/components/FieldMetadataComponent.tsx | 49 +++++++++++++++++++ .../src/components/Text.test.tsx | 24 +++++++++ .../src/components/Text.tsx | 27 ++++++++++ 3 files changed, 100 insertions(+) create mode 100644 packages/sitecore-jss-react/src/components/FieldMetadataComponent.tsx diff --git a/packages/sitecore-jss-react/src/components/FieldMetadataComponent.tsx b/packages/sitecore-jss-react/src/components/FieldMetadataComponent.tsx new file mode 100644 index 0000000000..1e23018932 --- /dev/null +++ b/packages/sitecore-jss-react/src/components/FieldMetadataComponent.tsx @@ -0,0 +1,49 @@ +import React, { FunctionComponent } from 'react'; + +export interface FieldMetadata { + contextItem?: FieldMetadataContextItem; + fieldId?: string; + fieldType?: string; + rawValue?: string; +} + +export interface FieldMetadataContextItem { + id?: string; + language?: string; + revision?: string; + version?: number; +} + +export interface FieldMetadataComponentProps { + htmlAttributes?: { + type: string; + chrometype: string; + className: string; + }; + data: string; +} + +const defaultAttributes = { + type: 'text/sitecore', + chrometype: 'field', + className: 'scpm', +}; + +export const FieldMetadataComponent: FunctionComponent = ( + props: React.PropsWithChildren +) => { + const attributes = { + ...defaultAttributes, + ...props.htmlAttributes, + }; + + return ( + + + {props.data} + + {props.children} + + + ); +}; diff --git a/packages/sitecore-jss-react/src/components/Text.test.tsx b/packages/sitecore-jss-react/src/components/Text.test.tsx index 788b2f3bbc..714211d2b8 100644 --- a/packages/sitecore-jss-react/src/components/Text.test.tsx +++ b/packages/sitecore-jss-react/src/components/Text.test.tsx @@ -179,4 +179,28 @@ describe('', () => { expect(rendered.html()).to.contain('

'); expect(rendered.html()).to.contain('value'); }); + + it('should render metadata', () => { + const testMetadata = { + contextItem: { + id: '{09A07660-6834-476C-B93B-584248D3003B}', + language: 'en', + revision: 'a0b36ce0a7db49418edf90eb9621e145', + version: 1, + }, + fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}', + fieldType: 'single-line', + rawValue: 'Test1', + }; + const field = { + editable: eeTextData, + }; + const rendered = mount( + +
test
+ + ); + + console.log(rendered.html()); + }); }); diff --git a/packages/sitecore-jss-react/src/components/Text.tsx b/packages/sitecore-jss-react/src/components/Text.tsx index a45d86b0a1..95dd176fbe 100644 --- a/packages/sitecore-jss-react/src/components/Text.tsx +++ b/packages/sitecore-jss-react/src/components/Text.tsx @@ -1,4 +1,9 @@ import React, { ReactElement, FunctionComponent } from 'react'; +import { + FieldMetadata, + FieldMetadataComponent, + FieldMetadataComponentProps, +} from './FieldMetadataComponent'; import PropTypes from 'prop-types'; export interface TextField { @@ -24,11 +29,14 @@ export interface TextProps { * If false, HTML-encoding of the field value is disabled and the value is rendered as-is. */ encode?: boolean; + + metadata?: FieldMetadata; } export const Text: FunctionComponent = ({ field, tag, + metadata, editable, encode, ...otherProps @@ -37,6 +45,14 @@ export const Text: FunctionComponent = ({ return null; } + if (metadata) { + const props: FieldMetadataComponentProps = { + data: JSON.stringify(metadata), + }; + + return {otherProps.children}; + } + // can't use editable value if we want to output unencoded if (!encode) { // eslint-disable-next-line no-param-reassign @@ -103,6 +119,17 @@ Text.propTypes = { editable: PropTypes.string, }), tag: PropTypes.string, + metadata: PropTypes.shape({ + contextItem: PropTypes.shape({ + id: PropTypes.string, + language: PropTypes.string, + revision: PropTypes.string, + version: PropTypes.number, + }), + fieldId: PropTypes.string, + fieldType: PropTypes.string, + rawValue: PropTypes.string, + }), editable: PropTypes.bool, encode: PropTypes.bool, }; From 5c4d4f962824df756f5600ea802f144f07bf3d18 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Fri, 12 Apr 2024 11:39:38 +0300 Subject: [PATCH 02/21] rename FieldMetadata module, add unit test for Text component, add comments --- .../{FieldMetadataComponent.tsx => FieldMetadata.tsx} | 2 ++ packages/sitecore-jss-react/src/components/Text.test.tsx | 8 ++++++-- packages/sitecore-jss-react/src/components/Text.tsx | 7 +++++-- 3 files changed, 13 insertions(+), 4 deletions(-) rename packages/sitecore-jss-react/src/components/{FieldMetadataComponent.tsx => FieldMetadata.tsx} (93%) diff --git a/packages/sitecore-jss-react/src/components/FieldMetadataComponent.tsx b/packages/sitecore-jss-react/src/components/FieldMetadata.tsx similarity index 93% rename from packages/sitecore-jss-react/src/components/FieldMetadataComponent.tsx rename to packages/sitecore-jss-react/src/components/FieldMetadata.tsx index 1e23018932..c88eaf1379 100644 --- a/packages/sitecore-jss-react/src/components/FieldMetadataComponent.tsx +++ b/packages/sitecore-jss-react/src/components/FieldMetadata.tsx @@ -1,5 +1,6 @@ import React, { FunctionComponent } from 'react'; +/** The field metadata */ export interface FieldMetadata { contextItem?: FieldMetadataContextItem; fieldId?: string; @@ -7,6 +8,7 @@ export interface FieldMetadata { rawValue?: string; } +/** The field's context item metadata */ export interface FieldMetadataContextItem { id?: string; language?: string; diff --git a/packages/sitecore-jss-react/src/components/Text.test.tsx b/packages/sitecore-jss-react/src/components/Text.test.tsx index 714211d2b8..7f5810c3a1 100644 --- a/packages/sitecore-jss-react/src/components/Text.test.tsx +++ b/packages/sitecore-jss-react/src/components/Text.test.tsx @@ -180,7 +180,7 @@ describe('', () => { expect(rendered.html()).to.contain('value'); }); - it('should render metadata', () => { + it('should render field metadata component when metadata property is present', () => { const testMetadata = { contextItem: { id: '{09A07660-6834-476C-B93B-584248D3003B}', @@ -192,15 +192,19 @@ describe('', () => { fieldType: 'single-line', rawValue: 'Test1', }; + const field = { editable: eeTextData, }; + const rendered = mount(
test
 ); - console.log(rendered.html()); + expect(rendered.find('code')).to.have.length(2); + expect(rendered.html()).to.contain('kind="open"'); + expect(rendered.html()).to.contain('kind="close"'); }); }); diff --git a/packages/sitecore-jss-react/src/components/Text.tsx b/packages/sitecore-jss-react/src/components/Text.tsx index 95dd176fbe..c5f66d7e62 100644 --- a/packages/sitecore-jss-react/src/components/Text.tsx +++ b/packages/sitecore-jss-react/src/components/Text.tsx @@ -3,7 +3,7 @@ import { FieldMetadata, FieldMetadataComponent, FieldMetadataComponentProps, -} from './FieldMetadataComponent'; +} from './FieldMetadata'; import PropTypes from 'prop-types'; export interface TextField { @@ -29,7 +29,9 @@ export interface TextProps { * If false, HTML-encoding of the field value is disabled and the value is rendered as-is. */ encode?: boolean; - + /** + * The field metadata; when present it should be exposed for chrome hydration process when rendering in Pages + */ metadata?: FieldMetadata; } @@ -45,6 +47,7 @@ export const Text: FunctionComponent = ({ return null; } + // when metadata is present, render it to be used for chrome hydration if (metadata) { const props: FieldMetadataComponentProps = { data: JSON.stringify(metadata), From b23334a09ca1bd002594c11410ae454dd0809b76 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Fri, 12 Apr 2024 13:12:30 +0300 Subject: [PATCH 03/21] add field metadata component to Date, Image and File field components; include unit tests --- .../src/components/Date.test.tsx | 24 ++++++++++++++ .../src/components/Date.tsx | 30 ++++++++++++++++++ .../src/components/File.test.tsx | 25 +++++++++++++++ .../src/components/File.tsx | 31 ++++++++++++++++++- .../src/components/Image.test.tsx | 26 ++++++++++++++++ .../src/components/Image.tsx | 31 +++++++++++++++++++ 6 files changed, 166 insertions(+), 1 deletion(-) diff --git a/packages/sitecore-jss-react/src/components/Date.test.tsx b/packages/sitecore-jss-react/src/components/Date.test.tsx index 98b0b4d00b..85af02168c 100644 --- a/packages/sitecore-jss-react/src/components/Date.test.tsx +++ b/packages/sitecore-jss-react/src/components/Date.test.tsx @@ -81,4 +81,28 @@ describe('', () => { expect(c.html()).equal('

11-23-2001

'); }); + + it('should render field metadata component when metadata property is present', () => { + const props = { + field: { + value: '23-11-2001', + }, + metadata: { + contextItem: { + id: '{09A07660-6834-476C-B93B-584248D3003B}', + language: 'en', + revision: 'a0b36ce0a7db49418edf90eb9621e145', + version: 1, + }, + fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}', + fieldType: 'date', + rawValue: 'Test1', + }, + }; + + const rendered = shallow(); + + expect(rendered.html()).to.contain('kind="open"'); + expect(rendered.html()).to.contain('kind="close"'); + }); }); diff --git a/packages/sitecore-jss-react/src/components/Date.tsx b/packages/sitecore-jss-react/src/components/Date.tsx index 3ec447496a..2f554fe193 100644 --- a/packages/sitecore-jss-react/src/components/Date.tsx +++ b/packages/sitecore-jss-react/src/components/Date.tsx @@ -1,5 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { + FieldMetadata, + FieldMetadataComponent, + FieldMetadataComponentProps, +} from './FieldMetadata'; export interface DateFieldProps { /** The date field data. */ @@ -19,11 +24,16 @@ export interface DateFieldProps { */ editable?: boolean; render?: (date: Date | null) => React.ReactNode; + /** + * The field metadata; when present it should be exposed for chrome hydration process when rendering in Pages + */ + metadata?: FieldMetadata; } export const DateField: React.FC = ({ field, tag, + metadata, editable, render, ...otherProps @@ -32,6 +42,15 @@ export const DateField: React.FC = ({ return null; } + // when metadata is present, render it to be used for chrome hydration + if (metadata) { + const props: FieldMetadataComponentProps = { + data: JSON.stringify(metadata), + }; + + return {otherProps.children}; + } + let children: React.ReactNode; const htmlProps: { @@ -64,6 +83,17 @@ DateField.propTypes = { editable: PropTypes.string, }).isRequired, tag: PropTypes.string, + metadata: PropTypes.shape({ + contextItem: PropTypes.shape({ + id: PropTypes.string, + language: PropTypes.string, + revision: PropTypes.string, + version: PropTypes.number, + }), + fieldId: PropTypes.string, + fieldType: PropTypes.string, + rawValue: PropTypes.string, + }), editable: PropTypes.bool, render: PropTypes.func, }; diff --git a/packages/sitecore-jss-react/src/components/File.test.tsx b/packages/sitecore-jss-react/src/components/File.test.tsx index 4585efe89c..2f8c649487 100644 --- a/packages/sitecore-jss-react/src/components/File.test.tsx +++ b/packages/sitecore-jss-react/src/components/File.test.tsx @@ -50,4 +50,29 @@ describe('', () => { expect(rendered.html()).to.contain('id="my-file"'); expect(rendered.html()).to.contain('class="my-css"'); }); + + it('should render field metadata component when metadata property is present', () => { + const testMetadata = { + contextItem: { + id: '{09A07660-6834-476C-B93B-584248D3003B}', + language: 'en', + revision: 'a0b36ce0a7db49418edf90eb9621e145', + version: 1, + }, + fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}', + fieldType: 'file', + rawValue: 'Test1', + }; + + const field = { + src: '/lorem', + title: 'ipsum', + }; + + const rendered = mount(); + + expect(rendered.find('code')).to.have.length(2); + expect(rendered.html()).to.contain('kind="open"'); + expect(rendered.html()).to.contain('kind="close"'); + }); }); diff --git a/packages/sitecore-jss-react/src/components/File.tsx b/packages/sitecore-jss-react/src/components/File.tsx index 510688b6b2..6b30a94279 100644 --- a/packages/sitecore-jss-react/src/components/File.tsx +++ b/packages/sitecore-jss-react/src/components/File.tsx @@ -1,5 +1,10 @@ import PropTypes from 'prop-types'; import React from 'react'; +import { + FieldMetadata, + FieldMetadataComponent, + FieldMetadataComponentProps, +} from './FieldMetadata'; export interface FileFieldValue { [propName: string]: unknown; @@ -18,9 +23,13 @@ export interface FileProps { field: FileFieldValue | FileField; /** HTML attributes that will be appended to the rendered tag. */ children?: React.ReactNode; + /** + * The field metadata; when present it should be exposed for chrome hydration process when rendering in Pages + */ + metadata?: FieldMetadata; } -export const File: React.FC = ({ field, children, ...otherProps }) => { +export const File: React.FC = ({ field, children, metadata, ...otherProps }) => { /* File fields cannot be managed via the EE. We never output "editable." */ @@ -31,6 +40,15 @@ export const File: React.FC = ({ field, children, ...otherProps }) => return null; } + // when metadata is present, render it to be used for chrome hydration + if (metadata) { + const props: FieldMetadataComponentProps = { + data: JSON.stringify(metadata), + }; + + return {otherProps.children}; + } + // handle link directly on field for forgetful devs const file = ((dynamicField as FileFieldValue).src ? field @@ -55,6 +73,17 @@ File.propTypes = { value: PropTypes.object, }), ]).isRequired, + metadata: PropTypes.shape({ + contextItem: PropTypes.shape({ + id: PropTypes.string, + language: PropTypes.string, + revision: PropTypes.string, + version: PropTypes.number, + }), + fieldId: PropTypes.string, + fieldType: PropTypes.string, + rawValue: PropTypes.string, + }), }; File.displayName = 'File'; diff --git a/packages/sitecore-jss-react/src/components/Image.test.tsx b/packages/sitecore-jss-react/src/components/Image.test.tsx index e9598c073e..7cfb584da9 100644 --- a/packages/sitecore-jss-react/src/components/Image.test.tsx +++ b/packages/sitecore-jss-react/src/components/Image.test.tsx @@ -293,4 +293,30 @@ describe('', () => { const rendered = mount(); expect(rendered.find('img')).to.have.length(1); }); + + it('should render field metadata component when metadata property is present', () => { + const testMetadata = { + contextItem: { + id: '{09A07660-6834-476C-B93B-584248D3003B}', + language: 'en', + revision: 'a0b36ce0a7db49418edf90eb9621e145', + version: 1, + }, + fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}', + fieldType: 'image', + rawValue: 'Test1', + }; + + const imgField = { + src: '/assets/img/test0.png', + width: 8, + height: 10, + }; + const rendered = mount(); + + expect(rendered.find('code')).to.have.length(2); + expect(rendered.find('img')).to.have.length(0); + expect(rendered.html()).to.contain('kind="open"'); + expect(rendered.html()).to.contain('kind="close"'); + }); }); diff --git a/packages/sitecore-jss-react/src/components/Image.tsx b/packages/sitecore-jss-react/src/components/Image.tsx index 62f697f247..ac88b4af78 100644 --- a/packages/sitecore-jss-react/src/components/Image.tsx +++ b/packages/sitecore-jss-react/src/components/Image.tsx @@ -3,6 +3,11 @@ import PropTypes from 'prop-types'; import React from 'react'; import { addClassName, convertAttributesToReactProps } from '../utils'; import { getAttributesString } from '../utils'; +import { + FieldMetadata, + FieldMetadataComponent, + FieldMetadataComponentProps, +} from './FieldMetadata'; export interface ImageFieldValue { [attributeName: string]: unknown; @@ -51,6 +56,11 @@ export interface ImageProps { */ editable?: boolean; + /** + * The field metadata; when present it should be exposed for chrome hydration process when rendering in Pages + */ + metadata?: FieldMetadata; + /** * Parameters that will be attached to Sitecore media URLs */ @@ -151,6 +161,7 @@ export const getEEMarkup = ( export const Image: React.FC = ({ media, editable, + metadata, imageParams, field, mediaUrlPrefix, @@ -170,6 +181,15 @@ export const Image: React.FC = ({ return null; } + // when metadata is present, render it to be used for chrome hydration + if (metadata) { + const props: FieldMetadataComponentProps = { + data: JSON.stringify(metadata), + }; + + return {otherProps.children}; + } + const imageField = dynamicMedia as ImageField; if (editable && imageField.editable) { @@ -211,6 +231,17 @@ Image.propTypes = { editable: PropTypes.string, }), ]), + metadata: PropTypes.shape({ + contextItem: PropTypes.shape({ + id: PropTypes.string, + language: PropTypes.string, + revision: PropTypes.string, + version: PropTypes.number, + }), + fieldId: PropTypes.string, + fieldType: PropTypes.string, + rawValue: PropTypes.string, + }), editable: PropTypes.bool, mediaUrlPrefix: PropTypes.instanceOf(RegExp), imageParams: PropTypes.objectOf( From 889b81e7e26cb9ae982aae945a0cad5eac994940 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Fri, 12 Apr 2024 13:26:09 +0300 Subject: [PATCH 04/21] add field metadata component to link and richtext field components, include unit tests --- .../src/components/Link.test.tsx | 24 ++++++++++++++ .../src/components/Link.tsx | 31 ++++++++++++++++++- .../src/components/RichText.test.tsx | 24 ++++++++++++++ .../src/components/RichText.tsx | 29 +++++++++++++++++ 4 files changed, 107 insertions(+), 1 deletion(-) diff --git a/packages/sitecore-jss-react/src/components/Link.test.tsx b/packages/sitecore-jss-react/src/components/Link.test.tsx index 1b3737c82b..7e8cac5c76 100644 --- a/packages/sitecore-jss-react/src/components/Link.test.tsx +++ b/packages/sitecore-jss-react/src/components/Link.test.tsx @@ -126,4 +126,28 @@ describe('', () => { const link = c.find('a'); expect(ref.current?.id).to.equal(link.props().id); }); + + it('should render field metadata component when metadata property is present', () => { + const testMetadata = { + contextItem: { + id: '{09A07660-6834-476C-B93B-584248D3003B}', + language: 'en', + revision: 'a0b36ce0a7db49418edf90eb9621e145', + version: 1, + }, + fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}', + fieldType: 'single-line', + rawValue: 'Test1', + }; + + const field = { + href: '/lorem', + text: 'ipsum', + }; + const rendered = mount(); + + expect(rendered.find('code')).to.have.length(2); + expect(rendered.html()).to.contain('kind="open"'); + expect(rendered.html()).to.contain('kind="close"'); + }); }); diff --git a/packages/sitecore-jss-react/src/components/Link.tsx b/packages/sitecore-jss-react/src/components/Link.tsx index a4906694a6..2cd7eefc9b 100644 --- a/packages/sitecore-jss-react/src/components/Link.tsx +++ b/packages/sitecore-jss-react/src/components/Link.tsx @@ -1,5 +1,10 @@ import React, { ReactElement, forwardRef } from 'react'; import PropTypes from 'prop-types'; +import { + FieldMetadata, + FieldMetadataComponent, + FieldMetadataComponentProps, +} from './FieldMetadata'; export interface LinkFieldValue { [attributeName: string]: unknown; @@ -38,10 +43,14 @@ export type LinkProps = React.DetailedHTMLProps< * NOTE: when in Sitecore Experience Editor, this setting is ignored due to technical limitations, and the description is always rendered. */ showLinkTextWithChildrenPresent?: boolean; + /** + * The field metadata; when present it should be exposed for chrome hydration process when rendering in Pages + */ + metadata?: FieldMetadata; }; export const Link = forwardRef( - ({ field, editable, showLinkTextWithChildrenPresent, ...otherProps }, ref) => { + ({ field, editable, metadata, showLinkTextWithChildrenPresent, ...otherProps }, ref) => { const children = otherProps.children as React.ReactNode; const dynamicField: LinkField | LinkFieldValue = field; @@ -54,6 +63,15 @@ export const Link = forwardRef( return null; } + // when metadata is present, render it to be used for chrome hydration + if (metadata) { + const props: FieldMetadataComponentProps = { + data: JSON.stringify(metadata), + }; + + return {otherProps.children}; + } + const resultTags: ReactElement[] = []; // EXPERIENCE EDITOR RENDERING @@ -137,6 +155,17 @@ export const LinkPropTypes = { editableLastPart: PropTypes.string, }), ]).isRequired, + metadata: PropTypes.shape({ + contextItem: PropTypes.shape({ + id: PropTypes.string, + language: PropTypes.string, + revision: PropTypes.string, + version: PropTypes.number, + }), + fieldId: PropTypes.string, + fieldType: PropTypes.string, + rawValue: PropTypes.string, + }), editable: PropTypes.bool, showLinkTextWithChildrenPresent: PropTypes.bool, }; diff --git a/packages/sitecore-jss-react/src/components/RichText.test.tsx b/packages/sitecore-jss-react/src/components/RichText.test.tsx index 3aebdd0e45..dddf20a31b 100644 --- a/packages/sitecore-jss-react/src/components/RichText.test.tsx +++ b/packages/sitecore-jss-react/src/components/RichText.test.tsx @@ -94,4 +94,28 @@ describe('', () => { expect(rendered.html()).to.contain('

'); expect(rendered.html()).to.contain('value'); }); + + it('should render field metadata component when metadata property is present', () => { + const field = { + value: 'value', + }; + + const testMetadata = { + contextItem: { + id: '{09A07660-6834-476C-B93B-584248D3003B}', + language: 'en', + revision: 'a0b36ce0a7db49418edf90eb9621e145', + version: 1, + }, + fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}', + fieldType: 'single-line', + rawValue: 'Test1', + }; + + const rendered = mount(); + + expect(rendered.find('code')).to.have.length(2); + expect(rendered.html()).to.contain('kind="open"'); + expect(rendered.html()).to.contain('kind="close"'); + }); }); diff --git a/packages/sitecore-jss-react/src/components/RichText.tsx b/packages/sitecore-jss-react/src/components/RichText.tsx index 6192998a7e..331cf4c0c0 100644 --- a/packages/sitecore-jss-react/src/components/RichText.tsx +++ b/packages/sitecore-jss-react/src/components/RichText.tsx @@ -1,5 +1,10 @@ import React, { forwardRef } from 'react'; import PropTypes from 'prop-types'; +import { + FieldMetadata, + FieldMetadataComponent, + FieldMetadataComponentProps, +} from './FieldMetadata'; export interface RichTextField { value?: string; @@ -21,6 +26,10 @@ export interface RichTextProps { * @default true */ editable?: boolean; + /** + * The field metadata; when present it should be exposed for chrome hydration process when rendering in Pages + */ + metadata?: FieldMetadata; } export const RichText: React.FC = forwardRef( @@ -29,6 +38,15 @@ export const RichText: React.FC = forwardRef( return null; } + // when metadata is present, render it to be used for chrome hydration + if (otherProps.metadata) { + const props: FieldMetadataComponentProps = { + data: JSON.stringify(otherProps.metadata), + }; + + return {otherProps.children}; + } + const htmlProps = { dangerouslySetInnerHTML: { __html: field.editable && editable ? field.editable : field.value, @@ -48,6 +66,17 @@ export const RichTextPropTypes = { }), tag: PropTypes.string, editable: PropTypes.bool, + metadata: PropTypes.shape({ + contextItem: PropTypes.shape({ + id: PropTypes.string, + language: PropTypes.string, + revision: PropTypes.string, + version: PropTypes.number, + }), + fieldId: PropTypes.string, + fieldType: PropTypes.string, + rawValue: PropTypes.string, + }), }; RichText.propTypes = RichTextPropTypes; From a8591e9721cc82318371c96829198a55006c7eab Mon Sep 17 00:00:00 2001 From: yavorsk Date: Fri, 12 Apr 2024 15:57:01 +0300 Subject: [PATCH 05/21] update FieldMetadata interfaces to prevent build errors in sitecore-jss-nextjs; component update --- .../src/components/FieldMetadata.tsx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/sitecore-jss-react/src/components/FieldMetadata.tsx b/packages/sitecore-jss-react/src/components/FieldMetadata.tsx index c88eaf1379..7c46f0d649 100644 --- a/packages/sitecore-jss-react/src/components/FieldMetadata.tsx +++ b/packages/sitecore-jss-react/src/components/FieldMetadata.tsx @@ -2,18 +2,18 @@ import React, { FunctionComponent } from 'react'; /** The field metadata */ export interface FieldMetadata { - contextItem?: FieldMetadataContextItem; - fieldId?: string; - fieldType?: string; - rawValue?: string; + contextItem?: FieldMetadataContextItem | null | undefined; + fieldId?: string | null | undefined; + fieldType?: string | null | undefined; + rawValue?: string | null | undefined; } /** The field's context item metadata */ export interface FieldMetadataContextItem { - id?: string; - language?: string; - revision?: string; - version?: number; + id?: string | null | undefined; + language?: string | null | undefined; + revision?: string | null | undefined; + version?: number | null | undefined; } export interface FieldMetadataComponentProps { @@ -38,14 +38,14 @@ export const FieldMetadataComponent: FunctionComponent - - {props.data} - + {props.data} {props.children} - + ); }; From f5641e4ea70e32e8ab1cd180a75ca5c8ad7f7581 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Fri, 12 Apr 2024 15:58:07 +0300 Subject: [PATCH 06/21] export fieldmetadata component and interfaces from sitecore-jss-react --- packages/sitecore-jss-react/src/index.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/sitecore-jss-react/src/index.ts b/packages/sitecore-jss-react/src/index.ts index f9ed101cef..6296534fa7 100644 --- a/packages/sitecore-jss-react/src/index.ts +++ b/packages/sitecore-jss-react/src/index.ts @@ -100,3 +100,8 @@ export { withPlaceholder } from './enhancers/withPlaceholder'; export { withDatasourceCheck } from './enhancers/withDatasourceCheck'; export { EditFrameProps, EditFrame } from './components/EditFrame'; export { ComponentBuilder, ComponentBuilderConfig } from './ComponentBuilder'; +export { + FieldMetadata, + FieldMetadataComponent, + FieldMetadataComponentProps, +} from './components/FieldMetadata'; From 5d1605463eb354a3ac71b663113521c2e033f96b Mon Sep 17 00:00:00 2001 From: yavorsk Date: Fri, 12 Apr 2024 16:07:10 +0300 Subject: [PATCH 07/21] add metadata component for nextjs link field component; include unit test --- .../src/components/Link.test.tsx | 35 +++++++++++++++++++ .../src/components/Link.tsx | 14 ++++++++ 2 files changed, 49 insertions(+) diff --git a/packages/sitecore-jss-nextjs/src/components/Link.test.tsx b/packages/sitecore-jss-nextjs/src/components/Link.test.tsx index 6a4acea4f4..5de9a9887c 100644 --- a/packages/sitecore-jss-nextjs/src/components/Link.test.tsx +++ b/packages/sitecore-jss-nextjs/src/components/Link.test.tsx @@ -360,4 +360,39 @@ describe('', () => { const rendered = mount().children(); expect(rendered).to.have.length(0); }); + + it('should render field metadata component when metadata property is present', () => { + const field = { + value: { + href: '/lorem', + text: 'ipsum', + class: 'my-link', + }, + }; + + const testMetadata = { + contextItem: { + id: '{09A07660-6834-476C-B93B-584248D3003B}', + language: 'en', + revision: 'a0b36ce0a7db49418edf90eb9621e145', + version: 1, + }, + fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}', + fieldType: 'single-line', + rawValue: 'Test1', + }; + + const rendered = mount( + + + + ); + + expect(rendered.find('code')).to.have.length(2); + expect(rendered.html()).to.contain('kind="open"'); + expect(rendered.html()).to.contain('kind="close"'); + expect(rendered.html()).to.not.contain(`href="${field.value.href}"`); + expect(rendered.find(NextLink).length).to.equal(0); + expect(rendered.find(ReactLink).length).to.equal(0); + }); }); diff --git a/packages/sitecore-jss-nextjs/src/components/Link.tsx b/packages/sitecore-jss-nextjs/src/components/Link.tsx index 4d8a1eb3c6..96854ebafb 100644 --- a/packages/sitecore-jss-nextjs/src/components/Link.tsx +++ b/packages/sitecore-jss-nextjs/src/components/Link.tsx @@ -8,6 +8,10 @@ import { LinkProps as ReactLinkProps, LinkPropTypes, } from '@sitecore-jss/sitecore-jss-react'; +import { + FieldMetadataComponent, + FieldMetadataComponentProps, +} from '@sitecore-jss/sitecore-jss-react'; export type LinkProps = ReactLinkProps & { /** @@ -22,6 +26,7 @@ export const Link = forwardRef( const { field, editable, + metadata, children, internalLinkMatcher = /^\//g, showLinkTextWithChildrenPresent, @@ -35,6 +40,15 @@ export const Link = forwardRef( return null; } + // when metadata is present, render it to be used for chrome hydration + if (metadata) { + const props: FieldMetadataComponentProps = { + data: JSON.stringify(metadata), + }; + + return {children}; + } + const value = ((field as LinkFieldValue).href ? field : (field as LinkField).value) as LinkFieldValue; From f8cfc3d47d0ce175d7d6c68a98e9fc7529d43863 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Fri, 12 Apr 2024 17:27:11 +0300 Subject: [PATCH 08/21] add field metadata component to nextimage component; small fix in link field component --- .../src/components/Link.tsx | 2 -- .../src/components/NextImage.test.tsx | 23 +++++++++++++++++++ .../src/components/NextImage.tsx | 13 ++++++++++- 3 files changed, 35 insertions(+), 3 deletions(-) diff --git a/packages/sitecore-jss-nextjs/src/components/Link.tsx b/packages/sitecore-jss-nextjs/src/components/Link.tsx index 96854ebafb..f466642719 100644 --- a/packages/sitecore-jss-nextjs/src/components/Link.tsx +++ b/packages/sitecore-jss-nextjs/src/components/Link.tsx @@ -7,8 +7,6 @@ import { LinkField, LinkProps as ReactLinkProps, LinkPropTypes, -} from '@sitecore-jss/sitecore-jss-react'; -import { FieldMetadataComponent, FieldMetadataComponentProps, } from '@sitecore-jss/sitecore-jss-react'; diff --git a/packages/sitecore-jss-nextjs/src/components/NextImage.test.tsx b/packages/sitecore-jss-nextjs/src/components/NextImage.test.tsx index e3c4107916..050e09b823 100644 --- a/packages/sitecore-jss-nextjs/src/components/NextImage.test.tsx +++ b/packages/sitecore-jss-nextjs/src/components/NextImage.test.tsx @@ -283,4 +283,27 @@ describe('', () => { ); }); }); + + it('should render field metadata component when metadata property is present', () => { + const testMetadata = { + contextItem: { + id: '{09A07660-6834-476C-B93B-584248D3003B}', + language: 'en', + revision: 'a0b36ce0a7db49418edf90eb9621e145', + version: 1, + }, + fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}', + fieldType: 'image', + rawValue: 'Test1', + }; + + const field = { value: { src: '/assets/img/test0.png', alt: 'my image' } }; + + const rendered = mount(); + + expect(rendered.find('code')).to.have.length(2); + expect(rendered.find('img')).to.have.length(0); + expect(rendered.html()).to.contain('kind="open"'); + expect(rendered.html()).to.contain('kind="close"'); + }); }); diff --git a/packages/sitecore-jss-nextjs/src/components/NextImage.tsx b/packages/sitecore-jss-nextjs/src/components/NextImage.tsx index 2d1e8d8ad9..e584eec24a 100644 --- a/packages/sitecore-jss-nextjs/src/components/NextImage.tsx +++ b/packages/sitecore-jss-nextjs/src/components/NextImage.tsx @@ -1,12 +1,13 @@ import { mediaApi } from '@sitecore-jss/sitecore-jss/media'; import PropTypes from 'prop-types'; import React from 'react'; - import { getEEMarkup, ImageProps, ImageField, ImageFieldValue, + FieldMetadataComponent, + FieldMetadataComponentProps, } from '@sitecore-jss/sitecore-jss-react'; import Image, { ImageProps as NextImageProperties } from 'next/image'; @@ -16,6 +17,7 @@ export const NextImage: React.FC = ({ editable, imageParams, field, + metadata, mediaUrlPrefix, fill, priority, @@ -36,6 +38,15 @@ export const NextImage: React.FC = ({ return null; } + // when metadata is present, render it to be used for chrome hydration + if (metadata) { + const props: FieldMetadataComponentProps = { + data: JSON.stringify(metadata), + }; + + return {otherProps.children}; + } + const imageField = dynamicMedia as ImageField; // we likely have an experience editor value, should be a string From dcab12fd296f5e06732f710879fce2b29fdc2895 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Fri, 12 Apr 2024 18:01:17 +0300 Subject: [PATCH 09/21] unit tests for FieldMetadata --- .../src/components/FieldMetadata.test.tsx | 84 +++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 packages/sitecore-jss-react/src/components/FieldMetadata.test.tsx diff --git a/packages/sitecore-jss-react/src/components/FieldMetadata.test.tsx b/packages/sitecore-jss-react/src/components/FieldMetadata.test.tsx new file mode 100644 index 0000000000..8420fe72b7 --- /dev/null +++ b/packages/sitecore-jss-react/src/components/FieldMetadata.test.tsx @@ -0,0 +1,84 @@ +/* eslint-disable no-unused-expressions */ +import React from 'react'; +import { expect } from 'chai'; +import { mount, render } from 'enzyme'; + +import { FieldMetadataComponent, FieldMetadataComponentProps } from './FieldMetadata'; +import { describe } from 'node:test'; + +describe('', () => { + const testMetadata = { + contextItem: { + id: '{09A07660-6834-476C-B93B-584248D3003B}', + language: 'en', + revision: 'a0b36ce0a7db49418edf90eb9621e145', + version: 1, + }, + fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}', + fieldType: 'single-line', + rawValue: 'Test1', + }; + const stringifiedData = JSON.stringify(testMetadata); + + it('Should render provided metadata', () => { + const props: FieldMetadataComponentProps = { + data: stringifiedData, + }; + + const rendered = mount(); + + expect(rendered.find('code')).to.have.length(2); + expect(rendered.html()).to.contain('kind="open"'); + expect(rendered.html()).to.contain('kind="close"'); + expect(rendered.html()).to.include(stringifiedData); + }); + + it('Should render with provided children', () => { + const props: FieldMetadataComponentProps = { + data: stringifiedData, + }; + + const rendered = mount( + +
nested
+ + ); + + expect(rendered.find('code')).to.have.length(2); + expect(rendered.find('div')).to.have.length(1); + expect(rendered.html()).to.include('nested'); + }); + + it('Should render with default attributes', () => { + const props: FieldMetadataComponentProps = { + data: stringifiedData, + }; + + const rendered = mount(); + + expect(rendered.html()).to.contain('kind="open"'); + expect(rendered.html()).to.contain('kind="close"'); + expect(rendered.html()).to.contain('type="text/sitecore"'); + expect(rendered.html()).to.contain('chrometype="field"'); + expect(rendered.html()).to.contain('class="scpm"'); + }); + + it('Should render with provided attributes', () => { + const props: FieldMetadataComponentProps = { + data: stringifiedData, + htmlAttributes: { + chrometype: 'foo', + type: 'bar', + className: 'far', + }, + }; + + const rendered = mount(); + + expect(rendered.html()).to.contain('kind="open"'); + expect(rendered.html()).to.contain('kind="close"'); + expect(rendered.html()).to.contain('type="bar"'); + expect(rendered.html()).to.contain('chrometype="foo"'); + expect(rendered.html()).to.contain('class="far"'); + }); +}); From 64431fb42ab64ae6d00d02b55988ce5012329c18 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Fri, 12 Apr 2024 18:03:43 +0300 Subject: [PATCH 10/21] update unit test --- packages/sitecore-jss-react/src/components/Date.test.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/sitecore-jss-react/src/components/Date.test.tsx b/packages/sitecore-jss-react/src/components/Date.test.tsx index 85af02168c..724d398801 100644 --- a/packages/sitecore-jss-react/src/components/Date.test.tsx +++ b/packages/sitecore-jss-react/src/components/Date.test.tsx @@ -1,6 +1,6 @@ /* eslint-disable no-unused-expressions */ import { expect } from 'chai'; -import { shallow } from 'enzyme'; +import { mount, shallow } from 'enzyme'; import React from 'react'; import { DateField } from './Date'; @@ -100,8 +100,9 @@ describe('', () => { }, }; - const rendered = shallow(); + const rendered = mount(); + expect(rendered.find('code')).to.have.length(2); expect(rendered.html()).to.contain('kind="open"'); expect(rendered.html()).to.contain('kind="close"'); }); From 6a050257f1f5f3c739b3c0b936757498dc46b200 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Mon, 15 Apr 2024 10:03:05 +0300 Subject: [PATCH 11/21] introduce getFieldMetadataMarkup function and used in the field components; add unit test --- .../src/components/Link.tsx | 9 ++---- .../src/components/NextImage.tsx | 9 ++---- .../src/components/Date.tsx | 12 ++----- .../src/components/FieldMetadata.test.tsx | 32 ++++++++++++++++++- .../src/components/FieldMetadata.tsx | 8 +++++ .../src/components/File.tsx | 12 ++----- .../src/components/Image.tsx | 12 ++----- .../src/components/Link.tsx | 12 ++----- .../src/components/RichText.tsx | 12 ++----- .../src/components/Text.tsx | 12 ++----- packages/sitecore-jss-react/src/index.ts | 1 + 11 files changed, 56 insertions(+), 75 deletions(-) diff --git a/packages/sitecore-jss-nextjs/src/components/Link.tsx b/packages/sitecore-jss-nextjs/src/components/Link.tsx index f466642719..83e52c4be9 100644 --- a/packages/sitecore-jss-nextjs/src/components/Link.tsx +++ b/packages/sitecore-jss-nextjs/src/components/Link.tsx @@ -7,8 +7,7 @@ import { LinkField, LinkProps as ReactLinkProps, LinkPropTypes, - FieldMetadataComponent, - FieldMetadataComponentProps, + getFieldMetadataMarkup, } from '@sitecore-jss/sitecore-jss-react'; export type LinkProps = ReactLinkProps & { @@ -40,11 +39,7 @@ export const Link = forwardRef( // when metadata is present, render it to be used for chrome hydration if (metadata) { - const props: FieldMetadataComponentProps = { - data: JSON.stringify(metadata), - }; - - return {children}; + return getFieldMetadataMarkup(metadata, children); } const value = ((field as LinkFieldValue).href diff --git a/packages/sitecore-jss-nextjs/src/components/NextImage.tsx b/packages/sitecore-jss-nextjs/src/components/NextImage.tsx index e584eec24a..87436461a3 100644 --- a/packages/sitecore-jss-nextjs/src/components/NextImage.tsx +++ b/packages/sitecore-jss-nextjs/src/components/NextImage.tsx @@ -6,8 +6,7 @@ import { ImageProps, ImageField, ImageFieldValue, - FieldMetadataComponent, - FieldMetadataComponentProps, + getFieldMetadataMarkup, } from '@sitecore-jss/sitecore-jss-react'; import Image, { ImageProps as NextImageProperties } from 'next/image'; @@ -40,11 +39,7 @@ export const NextImage: React.FC = ({ // when metadata is present, render it to be used for chrome hydration if (metadata) { - const props: FieldMetadataComponentProps = { - data: JSON.stringify(metadata), - }; - - return {otherProps.children}; + return getFieldMetadataMarkup(metadata, otherProps.children); } const imageField = dynamicMedia as ImageField; diff --git a/packages/sitecore-jss-react/src/components/Date.tsx b/packages/sitecore-jss-react/src/components/Date.tsx index 2f554fe193..ce8fb9d3f5 100644 --- a/packages/sitecore-jss-react/src/components/Date.tsx +++ b/packages/sitecore-jss-react/src/components/Date.tsx @@ -1,10 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { - FieldMetadata, - FieldMetadataComponent, - FieldMetadataComponentProps, -} from './FieldMetadata'; +import { FieldMetadata, getFieldMetadataMarkup } from './FieldMetadata'; export interface DateFieldProps { /** The date field data. */ @@ -44,11 +40,7 @@ export const DateField: React.FC = ({ // when metadata is present, render it to be used for chrome hydration if (metadata) { - const props: FieldMetadataComponentProps = { - data: JSON.stringify(metadata), - }; - - return {otherProps.children}; + return getFieldMetadataMarkup(metadata, otherProps.children); } let children: React.ReactNode; diff --git a/packages/sitecore-jss-react/src/components/FieldMetadata.test.tsx b/packages/sitecore-jss-react/src/components/FieldMetadata.test.tsx index 8420fe72b7..915a35e961 100644 --- a/packages/sitecore-jss-react/src/components/FieldMetadata.test.tsx +++ b/packages/sitecore-jss-react/src/components/FieldMetadata.test.tsx @@ -3,8 +3,13 @@ import React from 'react'; import { expect } from 'chai'; import { mount, render } from 'enzyme'; -import { FieldMetadataComponent, FieldMetadataComponentProps } from './FieldMetadata'; +import { + FieldMetadataComponent, + FieldMetadataComponentProps, + getFieldMetadataMarkup, +} from './FieldMetadata'; import { describe } from 'node:test'; +import { json } from 'stream/consumers'; describe('', () => { const testMetadata = { @@ -82,3 +87,28 @@ describe('', () => { expect(rendered.html()).to.contain('class="far"'); }); }); + +describe('getFieldMetadataMarkup', () => { + it('Should render component with provided metadata and children ', () => { + const testMetadata = { + contextItem: { + id: '{09A07660-6834-476C-B93B-584248D3003B}', + language: 'en', + revision: 'a0b36ce0a7db49418edf90eb9621e145', + version: 1, + }, + fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}', + fieldType: 'single-line', + rawValue: 'Test1', + }; + + const div =
nested
; + + const rendered = mount(getFieldMetadataMarkup(testMetadata, div)); + expect(rendered.find('code')).to.have.length(2); + expect(rendered.html()).to.contain('kind="open"'); + expect(rendered.html()).to.contain('kind="close"'); + expect(rendered.html()).to.include(JSON.stringify(testMetadata)); + expect(rendered.html()).to.include('
nested
'); + }); +}); diff --git a/packages/sitecore-jss-react/src/components/FieldMetadata.tsx b/packages/sitecore-jss-react/src/components/FieldMetadata.tsx index 7c46f0d649..da5d168aed 100644 --- a/packages/sitecore-jss-react/src/components/FieldMetadata.tsx +++ b/packages/sitecore-jss-react/src/components/FieldMetadata.tsx @@ -49,3 +49,11 @@ export const FieldMetadataComponent: FunctionComponent ); }; + +export const getFieldMetadataMarkup = (metadata: FieldMetadata, children: any) => { + const props: FieldMetadataComponentProps = { + data: JSON.stringify(metadata), + }; + + return {children}; +}; diff --git a/packages/sitecore-jss-react/src/components/File.tsx b/packages/sitecore-jss-react/src/components/File.tsx index 6b30a94279..afedc99202 100644 --- a/packages/sitecore-jss-react/src/components/File.tsx +++ b/packages/sitecore-jss-react/src/components/File.tsx @@ -1,10 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; -import { - FieldMetadata, - FieldMetadataComponent, - FieldMetadataComponentProps, -} from './FieldMetadata'; +import { FieldMetadata, getFieldMetadataMarkup } from './FieldMetadata'; export interface FileFieldValue { [propName: string]: unknown; @@ -42,11 +38,7 @@ export const File: React.FC = ({ field, children, metadata, ...otherP // when metadata is present, render it to be used for chrome hydration if (metadata) { - const props: FieldMetadataComponentProps = { - data: JSON.stringify(metadata), - }; - - return {otherProps.children}; + return getFieldMetadataMarkup(metadata, otherProps.children); } // handle link directly on field for forgetful devs diff --git a/packages/sitecore-jss-react/src/components/Image.tsx b/packages/sitecore-jss-react/src/components/Image.tsx index ac88b4af78..7fd0620fd6 100644 --- a/packages/sitecore-jss-react/src/components/Image.tsx +++ b/packages/sitecore-jss-react/src/components/Image.tsx @@ -3,11 +3,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { addClassName, convertAttributesToReactProps } from '../utils'; import { getAttributesString } from '../utils'; -import { - FieldMetadata, - FieldMetadataComponent, - FieldMetadataComponentProps, -} from './FieldMetadata'; +import { FieldMetadata, getFieldMetadataMarkup } from './FieldMetadata'; export interface ImageFieldValue { [attributeName: string]: unknown; @@ -183,11 +179,7 @@ export const Image: React.FC = ({ // when metadata is present, render it to be used for chrome hydration if (metadata) { - const props: FieldMetadataComponentProps = { - data: JSON.stringify(metadata), - }; - - return {otherProps.children}; + return getFieldMetadataMarkup(metadata, otherProps.children); } const imageField = dynamicMedia as ImageField; diff --git a/packages/sitecore-jss-react/src/components/Link.tsx b/packages/sitecore-jss-react/src/components/Link.tsx index 2cd7eefc9b..a651864b9c 100644 --- a/packages/sitecore-jss-react/src/components/Link.tsx +++ b/packages/sitecore-jss-react/src/components/Link.tsx @@ -1,10 +1,6 @@ import React, { ReactElement, forwardRef } from 'react'; import PropTypes from 'prop-types'; -import { - FieldMetadata, - FieldMetadataComponent, - FieldMetadataComponentProps, -} from './FieldMetadata'; +import { FieldMetadata, getFieldMetadataMarkup } from './FieldMetadata'; export interface LinkFieldValue { [attributeName: string]: unknown; @@ -65,11 +61,7 @@ export const Link = forwardRef( // when metadata is present, render it to be used for chrome hydration if (metadata) { - const props: FieldMetadataComponentProps = { - data: JSON.stringify(metadata), - }; - - return {otherProps.children}; + return getFieldMetadataMarkup(metadata, children); } const resultTags: ReactElement[] = []; diff --git a/packages/sitecore-jss-react/src/components/RichText.tsx b/packages/sitecore-jss-react/src/components/RichText.tsx index 331cf4c0c0..f722883a87 100644 --- a/packages/sitecore-jss-react/src/components/RichText.tsx +++ b/packages/sitecore-jss-react/src/components/RichText.tsx @@ -1,10 +1,6 @@ import React, { forwardRef } from 'react'; import PropTypes from 'prop-types'; -import { - FieldMetadata, - FieldMetadataComponent, - FieldMetadataComponentProps, -} from './FieldMetadata'; +import { FieldMetadata, getFieldMetadataMarkup } from './FieldMetadata'; export interface RichTextField { value?: string; @@ -40,11 +36,7 @@ export const RichText: React.FC = forwardRef( // when metadata is present, render it to be used for chrome hydration if (otherProps.metadata) { - const props: FieldMetadataComponentProps = { - data: JSON.stringify(otherProps.metadata), - }; - - return {otherProps.children}; + return getFieldMetadataMarkup(otherProps.metadata, otherProps.children); } const htmlProps = { diff --git a/packages/sitecore-jss-react/src/components/Text.tsx b/packages/sitecore-jss-react/src/components/Text.tsx index c5f66d7e62..e7d5f9e783 100644 --- a/packages/sitecore-jss-react/src/components/Text.tsx +++ b/packages/sitecore-jss-react/src/components/Text.tsx @@ -1,9 +1,5 @@ import React, { ReactElement, FunctionComponent } from 'react'; -import { - FieldMetadata, - FieldMetadataComponent, - FieldMetadataComponentProps, -} from './FieldMetadata'; +import { FieldMetadata, getFieldMetadataMarkup } from './FieldMetadata'; import PropTypes from 'prop-types'; export interface TextField { @@ -49,11 +45,7 @@ export const Text: FunctionComponent = ({ // when metadata is present, render it to be used for chrome hydration if (metadata) { - const props: FieldMetadataComponentProps = { - data: JSON.stringify(metadata), - }; - - return {otherProps.children}; + return getFieldMetadataMarkup(metadata, otherProps.children); } // can't use editable value if we want to output unencoded diff --git a/packages/sitecore-jss-react/src/index.ts b/packages/sitecore-jss-react/src/index.ts index 6296534fa7..ac97c6fcaf 100644 --- a/packages/sitecore-jss-react/src/index.ts +++ b/packages/sitecore-jss-react/src/index.ts @@ -104,4 +104,5 @@ export { FieldMetadata, FieldMetadataComponent, FieldMetadataComponentProps, + getFieldMetadataMarkup, } from './components/FieldMetadata'; From 2e3362ca71ec6527350ff1b9f12b55cad39da050 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Mon, 15 Apr 2024 12:28:54 +0300 Subject: [PATCH 12/21] update changelog --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2ea8fa8f23..8c9b2a6ce3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,9 @@ Our versioning strategy is as follows: ## Unreleased +### 🎉 New Features & Improvements +* `[sitecore-jss-react]` `[sitecore-jss-nextjs]` Introduce FieldMetadata component and functionality to render it when metadata field property is provided in the field's layout data. In such case FieldMetadaComponent should be rendered instead of the actual field component to enable chrome's hydration when editing in pages. Ability to render metadata has been added to the field rendering components for react and nextjs. ([#1773](https://github.com/Sitecore/jss/pull/1773)) + ## 21.7.1 ### 🐛 Bug Fixes From 11416904b800398534a50c4333148d1c6ca3cb95 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Tue, 16 Apr 2024 14:14:36 +0300 Subject: [PATCH 13/21] react - use higher order component to wrap metadata around field components --- .../src/components/Date.test.tsx | 20 +- .../src/components/Date.tsx | 93 ++++----- .../src/components/FieldMetadata.tsx | 71 ++++--- .../src/components/File.test.tsx | 5 +- .../src/components/File.tsx | 74 ++++--- .../src/components/Image.test.tsx | 3 +- .../src/components/Image.tsx | 115 +++++------ .../src/components/Link.test.tsx | 3 +- .../src/components/Link.tsx | 181 +++++++++--------- .../src/components/RichText.test.tsx | 12 +- .../src/components/RichText.tsx | 41 ++-- .../src/components/Text.test.tsx | 4 +- .../src/components/Text.tsx | 142 +++++++------- packages/sitecore-jss-react/src/index.ts | 7 +- 14 files changed, 361 insertions(+), 410 deletions(-) diff --git a/packages/sitecore-jss-react/src/components/Date.test.tsx b/packages/sitecore-jss-react/src/components/Date.test.tsx index 724d398801..4a9095bf75 100644 --- a/packages/sitecore-jss-react/src/components/Date.test.tsx +++ b/packages/sitecore-jss-react/src/components/Date.test.tsx @@ -86,17 +86,17 @@ describe('', () => { const props = { field: { value: '23-11-2001', - }, - metadata: { - contextItem: { - id: '{09A07660-6834-476C-B93B-584248D3003B}', - language: 'en', - revision: 'a0b36ce0a7db49418edf90eb9621e145', - version: 1, + metadata: { + contextItem: { + id: '{09A07660-6834-476C-B93B-584248D3003B}', + language: 'en', + revision: 'a0b36ce0a7db49418edf90eb9621e145', + version: 1, + }, + fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}', + fieldType: 'date', + rawValue: 'Test1', }, - fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}', - fieldType: 'date', - rawValue: 'Test1', }, }; diff --git a/packages/sitecore-jss-react/src/components/Date.tsx b/packages/sitecore-jss-react/src/components/Date.tsx index ce8fb9d3f5..8e74f7f422 100644 --- a/packages/sitecore-jss-react/src/components/Date.tsx +++ b/packages/sitecore-jss-react/src/components/Date.tsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { FieldMetadata, getFieldMetadataMarkup } from './FieldMetadata'; +import { FieldMetadata, withFieldMetadataWrapper } from './FieldMetadata'; export interface DateFieldProps { /** The date field data. */ @@ -8,6 +8,7 @@ export interface DateFieldProps { field: { value?: string; editable?: string; + metadata?: FieldMetadata; }; /** * The HTML element that will wrap the contents of the field. @@ -20,72 +21,58 @@ export interface DateFieldProps { */ editable?: boolean; render?: (date: Date | null) => React.ReactNode; - /** - * The field metadata; when present it should be exposed for chrome hydration process when rendering in Pages - */ - metadata?: FieldMetadata; } -export const DateField: React.FC = ({ - field, - tag, - metadata, - editable, - render, - ...otherProps -}) => { - if (!field || (!field.editable && !field.value)) { - return null; - } - - // when metadata is present, render it to be used for chrome hydration - if (metadata) { - return getFieldMetadataMarkup(metadata, otherProps.children); - } - - let children: React.ReactNode; +export const DateField: React.FC = withFieldMetadataWrapper( + ({ field, tag, editable, render, ...otherProps }) => { + if (!field || (!field.editable && !field.value)) { + return null; + } - const htmlProps: { - [htmlAttr: string]: unknown; - children?: React.ReactNode; - } = { - ...otherProps, - }; + let children: React.ReactNode; - if (field.editable && editable) { - htmlProps.dangerouslySetInnerHTML = { - __html: field.editable, + const htmlProps: { + [htmlAttr: string]: unknown; + children?: React.ReactNode; + } = { + ...otherProps, }; - } else if (render) { - children = render(field.value ? new Date(field.value) : null); - } else { - children = field.value; - } - if (tag || (field.editable && editable)) { - return React.createElement(tag || 'span', htmlProps, children); - } else { - return {children}; + if (field.editable && editable) { + htmlProps.dangerouslySetInnerHTML = { + __html: field.editable, + }; + } else if (render) { + children = render(field.value ? new Date(field.value) : null); + } else { + children = field.value; + } + + if (tag || (field.editable && editable)) { + return React.createElement(tag || 'span', htmlProps, children); + } else { + return {children}; + } } -}; +); DateField.propTypes = { field: PropTypes.shape({ value: PropTypes.string, editable: PropTypes.string, + metadata: PropTypes.shape({ + contextItem: PropTypes.shape({ + id: PropTypes.string, + language: PropTypes.string, + revision: PropTypes.string, + version: PropTypes.number, + }), + fieldId: PropTypes.string, + fieldType: PropTypes.string, + rawValue: PropTypes.string, + }), }).isRequired, tag: PropTypes.string, - metadata: PropTypes.shape({ - contextItem: PropTypes.shape({ - id: PropTypes.string, - language: PropTypes.string, - revision: PropTypes.string, - version: PropTypes.number, - }), - fieldId: PropTypes.string, - fieldType: PropTypes.string, - rawValue: PropTypes.string, - }), editable: PropTypes.bool, render: PropTypes.func, }; diff --git a/packages/sitecore-jss-react/src/components/FieldMetadata.tsx b/packages/sitecore-jss-react/src/components/FieldMetadata.tsx index da5d168aed..d00953fb6f 100644 --- a/packages/sitecore-jss-react/src/components/FieldMetadata.tsx +++ b/packages/sitecore-jss-react/src/components/FieldMetadata.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent } from 'react'; +import React, { ComponentType, forwardRef } from 'react'; /** The field metadata */ export interface FieldMetadata { @@ -16,44 +16,53 @@ export interface FieldMetadataContextItem { version?: number | null | undefined; } -export interface FieldMetadataComponentProps { - htmlAttributes?: { - type: string; - chrometype: string; - className: string; - }; - data: string; +export interface FieldMetadataWrapperProps { + metadata: any; + children: React.ReactNode; } -const defaultAttributes = { - type: 'text/sitecore', - chrometype: 'field', - className: 'scpm', -}; - -export const FieldMetadataComponent: FunctionComponent = ( - props: React.PropsWithChildren -) => { - const attributes = { - ...defaultAttributes, - ...props.htmlAttributes, +export const FieldMetadataWrapper = (props: FieldMetadataWrapperProps): JSX.Element => { + const data = JSON.stringify(props.metadata); + const defaultAttributes = { + type: 'text/sitecore', + chrometype: 'field', + className: 'scpm', }; - const codeOpenAttributes = { ...attributes, kind: 'open' }; - const codeCloseAttributes = { ...attributes, kind: 'close' }; + const codeOpenAttributes = { ...defaultAttributes, kind: 'open' }; + const codeCloseAttributes = { ...defaultAttributes, kind: 'close' }; return ( - - {props.data} + <> + {data} {props.children} - + ); }; -export const getFieldMetadataMarkup = (metadata: FieldMetadata, children: any) => { - const props: FieldMetadataComponentProps = { - data: JSON.stringify(metadata), - }; +/** + * Wraps the field component with metadata markup intended to be used for chromes hydartion + * @param {ComponentType} FieldComponent the field component + */ +export function withFieldMetadataWrapper>( + FieldComponent: ComponentType +) { + // eslint-disable-next-line react/display-name + return forwardRef(({ ...props }: FieldComponentProps, ref: any) => { + const metadata = (props as any)?.field?.metadata; - return {children}; -}; + if (!props?.field) { + return null; + } + + if (!metadata || !props.editable) { + return ; + } + + return ( + + + + ); + }); +} diff --git a/packages/sitecore-jss-react/src/components/File.test.tsx b/packages/sitecore-jss-react/src/components/File.test.tsx index 2f8c649487..6247e00c86 100644 --- a/packages/sitecore-jss-react/src/components/File.test.tsx +++ b/packages/sitecore-jss-react/src/components/File.test.tsx @@ -67,10 +67,11 @@ describe('', () => { const field = { src: '/lorem', title: 'ipsum', + metadata: testMetadata, }; - const rendered = mount(); - + const rendered = mount(); + console.log(rendered.html()); expect(rendered.find('code')).to.have.length(2); expect(rendered.html()).to.contain('kind="open"'); expect(rendered.html()).to.contain('kind="close"'); diff --git a/packages/sitecore-jss-react/src/components/File.tsx b/packages/sitecore-jss-react/src/components/File.tsx index afedc99202..ff4e8815ff 100644 --- a/packages/sitecore-jss-react/src/components/File.tsx +++ b/packages/sitecore-jss-react/src/components/File.tsx @@ -1,12 +1,13 @@ import PropTypes from 'prop-types'; import React from 'react'; -import { FieldMetadata, getFieldMetadataMarkup } from './FieldMetadata'; +import { FieldMetadata, withFieldMetadataWrapper } from './FieldMetadata'; export interface FileFieldValue { [propName: string]: unknown; src?: string; title?: string; displayName?: string; + metadata?: FieldMetadata; } export interface FileField { @@ -19,42 +20,35 @@ export interface FileProps { field: FileFieldValue | FileField; /** HTML attributes that will be appended to the rendered tag. */ children?: React.ReactNode; - /** - * The field metadata; when present it should be exposed for chrome hydration process when rendering in Pages - */ - metadata?: FieldMetadata; } -export const File: React.FC = ({ field, children, metadata, ...otherProps }) => { - /* +export const File: React.FC = withFieldMetadataWrapper( + ({ field, children, ...otherProps }) => { + /* File fields cannot be managed via the EE. We never output "editable." - */ + */ - const dynamicField: FileField | FileFieldValue = field; + const dynamicField: FileField | FileFieldValue = field; - if (!field || (!dynamicField.value && !(dynamicField as FileFieldValue).src)) { - return null; - } + if (!field || (!dynamicField.value && !(dynamicField as FileFieldValue).src)) { + return null; + } - // when metadata is present, render it to be used for chrome hydration - if (metadata) { - return getFieldMetadataMarkup(metadata, otherProps.children); - } + // handle link directly on field for forgetful devs + const file = ((dynamicField as FileFieldValue).src + ? field + : dynamicField.value) as FileFieldValue; + if (!file) { + return null; + } - // handle link directly on field for forgetful devs - const file = ((dynamicField as FileFieldValue).src - ? field - : dynamicField.value) as FileFieldValue; - if (!file) { - return null; + const linkText = !children ? file.title || file.displayName : null; + const anchorAttrs = { + href: file.src, + }; + return React.createElement('a', { ...anchorAttrs, ...otherProps }, linkText, children); } - - const linkText = !children ? file.title || file.displayName : null; - const anchorAttrs = { - href: file.src, - }; - return React.createElement('a', { ...anchorAttrs, ...otherProps }, linkText, children); -}; +); File.propTypes = { field: PropTypes.oneOfType([ @@ -63,19 +57,19 @@ File.propTypes = { }), PropTypes.shape({ value: PropTypes.object, + metadata: PropTypes.shape({ + contextItem: PropTypes.shape({ + id: PropTypes.string, + language: PropTypes.string, + revision: PropTypes.string, + version: PropTypes.number, + }), + fieldId: PropTypes.string, + fieldType: PropTypes.string, + rawValue: PropTypes.string, + }), }), ]).isRequired, - metadata: PropTypes.shape({ - contextItem: PropTypes.shape({ - id: PropTypes.string, - language: PropTypes.string, - revision: PropTypes.string, - version: PropTypes.number, - }), - fieldId: PropTypes.string, - fieldType: PropTypes.string, - rawValue: PropTypes.string, - }), }; File.displayName = 'File'; diff --git a/packages/sitecore-jss-react/src/components/Image.test.tsx b/packages/sitecore-jss-react/src/components/Image.test.tsx index 7cfb584da9..6a31c5322d 100644 --- a/packages/sitecore-jss-react/src/components/Image.test.tsx +++ b/packages/sitecore-jss-react/src/components/Image.test.tsx @@ -311,8 +311,9 @@ describe('', () => { src: '/assets/img/test0.png', width: 8, height: 10, + metadata: testMetadata, }; - const rendered = mount(); + const rendered = mount(); expect(rendered.find('code')).to.have.length(2); expect(rendered.find('img')).to.have.length(0); diff --git a/packages/sitecore-jss-react/src/components/Image.tsx b/packages/sitecore-jss-react/src/components/Image.tsx index 7fd0620fd6..8d7ac47bd0 100644 --- a/packages/sitecore-jss-react/src/components/Image.tsx +++ b/packages/sitecore-jss-react/src/components/Image.tsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { addClassName, convertAttributesToReactProps } from '../utils'; import { getAttributesString } from '../utils'; -import { FieldMetadata, getFieldMetadataMarkup } from './FieldMetadata'; +import { FieldMetadata, withFieldMetadataWrapper } from './FieldMetadata'; export interface ImageFieldValue { [attributeName: string]: unknown; @@ -14,6 +14,7 @@ export interface ImageFieldValue { export interface ImageField { value?: ImageFieldValue; editable?: string; + metadata?: FieldMetadata; } export interface ImageSizeParameters { @@ -52,11 +53,6 @@ export interface ImageProps { */ editable?: boolean; - /** - * The field metadata; when present it should be exposed for chrome hydration process when rendering in Pages - */ - metadata?: FieldMetadata; - /** * Parameters that will be attached to Sitecore media URLs */ @@ -154,55 +150,44 @@ export const getEEMarkup = ( return getEditableWrapper(editableMarkup); }; -export const Image: React.FC = ({ - media, - editable, - metadata, - imageParams, - field, - mediaUrlPrefix, - ...otherProps -}) => { - // allows the mistake of using 'field' prop instead of 'media' (consistent with other helpers) - if (field && !media) { - media = field; - } - - const dynamicMedia = media as ImageField | ImageFieldValue; - - if ( - !media || - (!dynamicMedia.editable && !dynamicMedia.value && !(dynamicMedia as ImageFieldValue).src) - ) { - return null; - } - - // when metadata is present, render it to be used for chrome hydration - if (metadata) { - return getFieldMetadataMarkup(metadata, otherProps.children); +export const Image: React.FC = withFieldMetadataWrapper( + ({ media, editable, imageParams, field, mediaUrlPrefix, ...otherProps }) => { + // allows the mistake of using 'field' prop instead of 'media' (consistent with other helpers) + if (field && !media) { + media = field; + } + + const dynamicMedia = media as ImageField | ImageFieldValue; + + if ( + !media || + (!dynamicMedia.editable && !dynamicMedia.value && !(dynamicMedia as ImageFieldValue).src) + ) { + return null; + } + + const imageField = dynamicMedia as ImageField; + + if (editable && imageField.editable) { + return getEEMarkup(imageField, imageParams, mediaUrlPrefix, otherProps); + } + + // some wise-guy/gal is passing in a 'raw' image object value + const img = (dynamicMedia as ImageFieldValue).src + ? media + : (dynamicMedia.value as ImageFieldValue); + if (!img) { + return null; + } + + const attrs = getImageAttrs({ ...img, ...otherProps }, imageParams, mediaUrlPrefix); + if (attrs) { + return ; + } + + return null; // we can't handle the truth } - - const imageField = dynamicMedia as ImageField; - - if (editable && imageField.editable) { - return getEEMarkup(imageField, imageParams, mediaUrlPrefix, otherProps); - } - - // some wise-guy/gal is passing in a 'raw' image object value - const img = (dynamicMedia as ImageFieldValue).src - ? media - : (dynamicMedia.value as ImageFieldValue); - if (!img) { - return null; - } - - const attrs = getImageAttrs({ ...img, ...otherProps }, imageParams, mediaUrlPrefix); - if (attrs) { - return ; - } - - return null; // we can't handle the truth -}; +); Image.propTypes = { media: PropTypes.oneOfType([ @@ -212,6 +197,17 @@ Image.propTypes = { PropTypes.shape({ value: PropTypes.object, editable: PropTypes.string, + metadata: PropTypes.shape({ + contextItem: PropTypes.shape({ + id: PropTypes.string, + language: PropTypes.string, + revision: PropTypes.string, + version: PropTypes.number, + }), + fieldId: PropTypes.string, + fieldType: PropTypes.string, + rawValue: PropTypes.string, + }), }), ]), field: PropTypes.oneOfType([ @@ -223,17 +219,6 @@ Image.propTypes = { editable: PropTypes.string, }), ]), - metadata: PropTypes.shape({ - contextItem: PropTypes.shape({ - id: PropTypes.string, - language: PropTypes.string, - revision: PropTypes.string, - version: PropTypes.number, - }), - fieldId: PropTypes.string, - fieldType: PropTypes.string, - rawValue: PropTypes.string, - }), editable: PropTypes.bool, mediaUrlPrefix: PropTypes.instanceOf(RegExp), imageParams: PropTypes.objectOf( diff --git a/packages/sitecore-jss-react/src/components/Link.test.tsx b/packages/sitecore-jss-react/src/components/Link.test.tsx index 7e8cac5c76..437b96158e 100644 --- a/packages/sitecore-jss-react/src/components/Link.test.tsx +++ b/packages/sitecore-jss-react/src/components/Link.test.tsx @@ -143,8 +143,9 @@ describe('', () => { const field = { href: '/lorem', text: 'ipsum', + metadata: testMetadata, }; - const rendered = mount(); + const rendered = mount(); expect(rendered.find('code')).to.have.length(2); expect(rendered.html()).to.contain('kind="open"'); diff --git a/packages/sitecore-jss-react/src/components/Link.tsx b/packages/sitecore-jss-react/src/components/Link.tsx index a651864b9c..bb9ede8629 100644 --- a/packages/sitecore-jss-react/src/components/Link.tsx +++ b/packages/sitecore-jss-react/src/components/Link.tsx @@ -1,6 +1,6 @@ import React, { ReactElement, forwardRef } from 'react'; import PropTypes from 'prop-types'; -import { FieldMetadata, getFieldMetadataMarkup } from './FieldMetadata'; +import { FieldMetadata, withFieldMetadataWrapper } from './FieldMetadata'; export interface LinkFieldValue { [attributeName: string]: unknown; @@ -19,6 +19,7 @@ export interface LinkField { value: LinkFieldValue; editableFirstPart?: string; editableLastPart?: string; + metadata?: FieldMetadata; } export type LinkProps = React.DetailedHTMLProps< @@ -39,101 +40,95 @@ export type LinkProps = React.DetailedHTMLProps< * NOTE: when in Sitecore Experience Editor, this setting is ignored due to technical limitations, and the description is always rendered. */ showLinkTextWithChildrenPresent?: boolean; - /** - * The field metadata; when present it should be exposed for chrome hydration process when rendering in Pages - */ - metadata?: FieldMetadata; }; -export const Link = forwardRef( - ({ field, editable, metadata, showLinkTextWithChildrenPresent, ...otherProps }, ref) => { - const children = otherProps.children as React.ReactNode; - const dynamicField: LinkField | LinkFieldValue = field; - - if ( - !field || - (!dynamicField.editableFirstPart && - !dynamicField.value && - !(dynamicField as LinkFieldValue).href) - ) { - return null; - } +export const Link = withFieldMetadataWrapper( + // eslint-disable-next-line react/display-name + forwardRef( + ({ field, editable, showLinkTextWithChildrenPresent, ...otherProps }, ref) => { + const children = otherProps.children as React.ReactNode; + const dynamicField: LinkField | LinkFieldValue = field; + + if ( + !field || + (!dynamicField.editableFirstPart && + !dynamicField.value && + !(dynamicField as LinkFieldValue).href) + ) { + return null; + } - // when metadata is present, render it to be used for chrome hydration - if (metadata) { - return getFieldMetadataMarkup(metadata, children); - } + const resultTags: ReactElement[] = []; + + // EXPERIENCE EDITOR RENDERING + if (editable && dynamicField.editableFirstPart) { + const markup = (dynamicField.editableFirstPart as string) + dynamicField.editableLastPart; + + // in an ideal world, we'd pre-render React children here and inject them between editableFirstPart and editableLastPart. + // However, we cannot combine arbitrary unparsed HTML (innerHTML) based components with actual vDOM components (the children) + // because the innerHTML is not parsed - it'd make a discontinuous vDOM. So, we'll go for the next best compromise of rendering the link field and children separately + // as siblings. Should be "good enough" for most cases - and write your own helper if it isn't. Or bring xEditor out of 2006. + + const htmlProps = { + className: 'sc-link-wrapper', + dangerouslySetInnerHTML: { + __html: markup, + }, + ...otherProps, + key: 'editable', + }; + + // Exclude children, since 'dangerouslySetInnerHTML' and 'children' can't be set together + // and children will be added as a sibling + delete htmlProps.children; + + resultTags.push(); + + // don't render normal link tag when editing, if no children exist + // this preserves normal-ish behavior if not using a link body (no hacks required) + if (!children) { + return resultTags[0]; + } + } - const resultTags: ReactElement[] = []; + // handle link directly on field for forgetful devs + const link = (dynamicField as LinkFieldValue).href + ? (field as LinkFieldValue) + : (dynamicField as LinkField).value; - // EXPERIENCE EDITOR RENDERING - if (editable && dynamicField.editableFirstPart) { - const markup = (dynamicField.editableFirstPart as string) + dynamicField.editableLastPart; + if (!link) { + return null; + } - // in an ideal world, we'd pre-render React children here and inject them between editableFirstPart and editableLastPart. - // However, we cannot combine arbitrary unparsed HTML (innerHTML) based components with actual vDOM components (the children) - // because the innerHTML is not parsed - it'd make a discontinuous vDOM. So, we'll go for the next best compromise of rendering the link field and children separately - // as siblings. Should be "good enough" for most cases - and write your own helper if it isn't. Or bring xEditor out of 2006. + const anchor = link.linktype !== 'anchor' && link.anchor ? `#${link.anchor}` : ''; + const querystring = link.querystring ? `?${link.querystring}` : ''; - const htmlProps = { - className: 'sc-link-wrapper', - dangerouslySetInnerHTML: { - __html: markup, - }, - ...otherProps, - key: 'editable', + const anchorAttrs: { [attr: string]: unknown } = { + href: `${link.href}${querystring}${anchor}`, + className: link.class, + title: link.title, + target: link.target, }; - // Exclude children, since 'dangerouslySetInnerHTML' and 'children' can't be set together - // and children will be added as a sibling - delete htmlProps.children; - - resultTags.push(); - - // don't render normal link tag when editing, if no children exist - // this preserves normal-ish behavior if not using a link body (no hacks required) - if (!children) { - return resultTags[0]; + if (anchorAttrs.target === '_blank' && !anchorAttrs.rel) { + // information disclosure attack prevention keeps target blank site from getting ref to window.opener + anchorAttrs.rel = 'noopener noreferrer'; } - } - - // handle link directly on field for forgetful devs - const link = (dynamicField as LinkFieldValue).href - ? (field as LinkFieldValue) - : (dynamicField as LinkField).value; - - if (!link) { - return null; - } - const anchor = link.linktype !== 'anchor' && link.anchor ? `#${link.anchor}` : ''; - const querystring = link.querystring ? `?${link.querystring}` : ''; + const linkText = showLinkTextWithChildrenPresent || !children ? link.text || link.href : null; - const anchorAttrs: { [attr: string]: unknown } = { - href: `${link.href}${querystring}${anchor}`, - className: link.class, - title: link.title, - target: link.target, - }; + resultTags.push( + React.createElement( + 'a', + { ...anchorAttrs, ...otherProps, key: 'link', ref }, + linkText, + children + ) + ); - if (anchorAttrs.target === '_blank' && !anchorAttrs.rel) { - // information disclosure attack prevention keeps target blank site from getting ref to window.opener - anchorAttrs.rel = 'noopener noreferrer'; + return {resultTags}; } - - const linkText = showLinkTextWithChildrenPresent || !children ? link.text || link.href : null; - - resultTags.push( - React.createElement( - 'a', - { ...anchorAttrs, ...otherProps, key: 'link', ref }, - linkText, - children - ) - ); - - return {resultTags}; - } + ) ); export const LinkPropTypes = { @@ -145,19 +140,19 @@ export const LinkPropTypes = { value: PropTypes.object, editableFirstPart: PropTypes.string, editableLastPart: PropTypes.string, + metadata: PropTypes.shape({ + contextItem: PropTypes.shape({ + id: PropTypes.string, + language: PropTypes.string, + revision: PropTypes.string, + version: PropTypes.number, + }), + fieldId: PropTypes.string, + fieldType: PropTypes.string, + rawValue: PropTypes.string, + }), }), ]).isRequired, - metadata: PropTypes.shape({ - contextItem: PropTypes.shape({ - id: PropTypes.string, - language: PropTypes.string, - revision: PropTypes.string, - version: PropTypes.number, - }), - fieldId: PropTypes.string, - fieldType: PropTypes.string, - rawValue: PropTypes.string, - }), editable: PropTypes.bool, showLinkTextWithChildrenPresent: PropTypes.bool, }; diff --git a/packages/sitecore-jss-react/src/components/RichText.test.tsx b/packages/sitecore-jss-react/src/components/RichText.test.tsx index dddf20a31b..42d64ba2ef 100644 --- a/packages/sitecore-jss-react/src/components/RichText.test.tsx +++ b/packages/sitecore-jss-react/src/components/RichText.test.tsx @@ -96,10 +96,6 @@ describe('', () => { }); it('should render field metadata component when metadata property is present', () => { - const field = { - value: 'value', - }; - const testMetadata = { contextItem: { id: '{09A07660-6834-476C-B93B-584248D3003B}', @@ -112,10 +108,16 @@ describe('', () => { rawValue: 'Test1', }; - const rendered = mount(); + const field = { + value: 'value', + metadata: testMetadata, + }; + + const rendered = mount(); expect(rendered.find('code')).to.have.length(2); expect(rendered.html()).to.contain('kind="open"'); expect(rendered.html()).to.contain('kind="close"'); + expect(rendered.html()).to.contain(JSON.stringify(testMetadata)); }); }); diff --git a/packages/sitecore-jss-react/src/components/RichText.tsx b/packages/sitecore-jss-react/src/components/RichText.tsx index f722883a87..8ed6c3cdd4 100644 --- a/packages/sitecore-jss-react/src/components/RichText.tsx +++ b/packages/sitecore-jss-react/src/components/RichText.tsx @@ -1,10 +1,11 @@ import React, { forwardRef } from 'react'; import PropTypes from 'prop-types'; -import { FieldMetadata, getFieldMetadataMarkup } from './FieldMetadata'; +import { FieldMetadata, withFieldMetadataWrapper } from './FieldMetadata'; export interface RichTextField { value?: string; editable?: string; + metadata?: FieldMetadata; } export interface RichTextProps { @@ -22,23 +23,15 @@ export interface RichTextProps { * @default true */ editable?: boolean; - /** - * The field metadata; when present it should be exposed for chrome hydration process when rendering in Pages - */ - metadata?: FieldMetadata; } -export const RichText: React.FC = forwardRef( - ({ field, tag, editable, ...otherProps }, ref) => { +export const RichText: React.FC = withFieldMetadataWrapper( + // eslint-disable-next-line react/display-name + forwardRef(({ field, tag, editable, ...otherProps }, ref) => { if (!field || (!field.editable && !field.value)) { return null; } - // when metadata is present, render it to be used for chrome hydration - if (otherProps.metadata) { - return getFieldMetadataMarkup(otherProps.metadata, otherProps.children); - } - const htmlProps = { dangerouslySetInnerHTML: { __html: field.editable && editable ? field.editable : field.value, @@ -48,27 +41,27 @@ export const RichText: React.FC = forwardRef( }; return React.createElement(tag || 'div', htmlProps); - } + }) ); export const RichTextPropTypes = { field: PropTypes.shape({ value: PropTypes.string, editable: PropTypes.string, + metadata: PropTypes.shape({ + contextItem: PropTypes.shape({ + id: PropTypes.string, + language: PropTypes.string, + revision: PropTypes.string, + version: PropTypes.number, + }), + fieldId: PropTypes.string, + fieldType: PropTypes.string, + rawValue: PropTypes.string, + }), }), tag: PropTypes.string, editable: PropTypes.bool, - metadata: PropTypes.shape({ - contextItem: PropTypes.shape({ - id: PropTypes.string, - language: PropTypes.string, - revision: PropTypes.string, - version: PropTypes.number, - }), - fieldId: PropTypes.string, - fieldType: PropTypes.string, - rawValue: PropTypes.string, - }), }; RichText.propTypes = RichTextPropTypes; diff --git a/packages/sitecore-jss-react/src/components/Text.test.tsx b/packages/sitecore-jss-react/src/components/Text.test.tsx index 7f5810c3a1..653aaecdc0 100644 --- a/packages/sitecore-jss-react/src/components/Text.test.tsx +++ b/packages/sitecore-jss-react/src/components/Text.test.tsx @@ -195,10 +195,11 @@ describe('', () => { const field = { editable: eeTextData, + metadata: testMetadata, }; const rendered = mount( - +
test
 ); @@ -206,5 +207,6 @@ describe('', () => { expect(rendered.find('code')).to.have.length(2); expect(rendered.html()).to.contain('kind="open"'); expect(rendered.html()).to.contain('kind="close"'); + expect(rendered.html()).to.contain(JSON.stringify(testMetadata)); }); }); diff --git a/packages/sitecore-jss-react/src/components/Text.tsx b/packages/sitecore-jss-react/src/components/Text.tsx index e7d5f9e783..25cb55256f 100644 --- a/packages/sitecore-jss-react/src/components/Text.tsx +++ b/packages/sitecore-jss-react/src/components/Text.tsx @@ -1,10 +1,11 @@ import React, { ReactElement, FunctionComponent } from 'react'; -import { FieldMetadata, getFieldMetadataMarkup } from './FieldMetadata'; +import { FieldMetadata, withFieldMetadataWrapper } from './FieldMetadata'; import PropTypes from 'prop-types'; export interface TextField { value?: string | number; editable?: string; + metadata?: FieldMetadata; } export interface TextProps { @@ -25,110 +26,95 @@ export interface TextProps { * If false, HTML-encoding of the field value is disabled and the value is rendered as-is. */ encode?: boolean; - /** - * The field metadata; when present it should be exposed for chrome hydration process when rendering in Pages - */ - metadata?: FieldMetadata; } -export const Text: FunctionComponent = ({ - field, - tag, - metadata, - editable, - encode, - ...otherProps -}) => { - if (!field || (!field.editable && (field.value === undefined || field.value === ''))) { - return null; - } - - // when metadata is present, render it to be used for chrome hydration - if (metadata) { - return getFieldMetadataMarkup(metadata, otherProps.children); - } +export const Text: FunctionComponent = withFieldMetadataWrapper( + ({ field, tag, editable, encode, ...otherProps }) => { + if (!field || (!field.editable && (field.value === undefined || field.value === ''))) { + return null; + } - // can't use editable value if we want to output unencoded - if (!encode) { - // eslint-disable-next-line no-param-reassign - editable = false; - } + // can't use editable value if we want to output unencoded + if (!encode) { + // eslint-disable-next-line no-param-reassign + editable = false; + } - const isEditable = field.editable && editable; + const isEditable = field.editable && editable; - let output: string | number | (ReactElement | string)[] = isEditable - ? field.editable || '' - : field.value === undefined - ? '' - : field.value; + let output: string | number | (ReactElement | string)[] = isEditable + ? field.editable || '' + : field.value === undefined + ? '' + : field.value; - // when string value isn't formatted, we should format line breaks - if (!field.editable && typeof output === 'string') { - const splitted = String(output).split('\n'); + // when string value isn't formatted, we should format line breaks + if (!field.editable && typeof output === 'string') { + const splitted = String(output).split('\n'); - if (splitted.length) { - const formatted: (ReactElement | string)[] = []; + if (splitted.length) { + const formatted: (ReactElement | string)[] = []; - splitted.forEach((str, i) => { - const isLast = i === splitted.length - 1; + splitted.forEach((str, i) => { + const isLast = i === splitted.length - 1; - formatted.push(str); + formatted.push(str); - if (!isLast) { - formatted.push(
); - } - }); + if (!isLast) { + formatted.push(
); + } + }); - output = formatted; + output = formatted; + } } - } - const setDangerously = isEditable || !encode; + const setDangerously = isEditable || !encode; - let children = null; - const htmlProps: { - [htmlAttributes: string]: unknown; - children?: React.ReactNode; - } = { - ...otherProps, - }; - - if (setDangerously) { - htmlProps.dangerouslySetInnerHTML = { - __html: output, + let children = null; + const htmlProps: { + [htmlAttributes: string]: unknown; + children?: React.ReactNode; + } = { + ...otherProps, }; - } else { - children = output; - } - if (tag || setDangerously) { - return React.createElement(tag || 'span', htmlProps, children); - } else { - return {children}; + if (setDangerously) { + htmlProps.dangerouslySetInnerHTML = { + __html: output, + }; + } else { + children = output; + } + + if (tag || setDangerously) { + return React.createElement(tag || 'span', htmlProps, children); + } else { + return {children}; + } } -}; +); Text.propTypes = { field: PropTypes.shape({ value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), editable: PropTypes.string, - }), - tag: PropTypes.string, - metadata: PropTypes.shape({ - contextItem: PropTypes.shape({ - id: PropTypes.string, - language: PropTypes.string, - revision: PropTypes.string, - version: PropTypes.number, + metadata: PropTypes.shape({ + contextItem: PropTypes.shape({ + id: PropTypes.string, + language: PropTypes.string, + revision: PropTypes.string, + version: PropTypes.number, + }), + fieldId: PropTypes.string, + fieldType: PropTypes.string, + rawValue: PropTypes.string, }), - fieldId: PropTypes.string, - fieldType: PropTypes.string, - rawValue: PropTypes.string, }), + tag: PropTypes.string, editable: PropTypes.bool, encode: PropTypes.bool, }; - Text.defaultProps = { editable: true, encode: true, diff --git a/packages/sitecore-jss-react/src/index.ts b/packages/sitecore-jss-react/src/index.ts index ac97c6fcaf..d834c1b68a 100644 --- a/packages/sitecore-jss-react/src/index.ts +++ b/packages/sitecore-jss-react/src/index.ts @@ -100,9 +100,4 @@ export { withPlaceholder } from './enhancers/withPlaceholder'; export { withDatasourceCheck } from './enhancers/withDatasourceCheck'; export { EditFrameProps, EditFrame } from './components/EditFrame'; export { ComponentBuilder, ComponentBuilderConfig } from './ComponentBuilder'; -export { - FieldMetadata, - FieldMetadataComponent, - FieldMetadataComponentProps, - getFieldMetadataMarkup, -} from './components/FieldMetadata'; +export { FieldMetadata, withFieldMetadataWrapper } from './components/FieldMetadata'; From 08df912705555934c256b2c87316f1998db20a63 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Tue, 16 Apr 2024 15:33:50 +0300 Subject: [PATCH 14/21] update nextjs components to use metadata wrapper hoc; aadjust unit tests --- .../src/components/Link.test.tsx | 30 ++-- .../src/components/Link.tsx | 17 +- .../src/components/NextImage.test.tsx | 15 +- .../src/components/NextImage.tsx | 150 ++++++++---------- 4 files changed, 102 insertions(+), 110 deletions(-) diff --git a/packages/sitecore-jss-nextjs/src/components/Link.test.tsx b/packages/sitecore-jss-nextjs/src/components/Link.test.tsx index 5de9a9887c..ded92731f6 100644 --- a/packages/sitecore-jss-nextjs/src/components/Link.test.tsx +++ b/packages/sitecore-jss-nextjs/src/components/Link.test.tsx @@ -355,21 +355,14 @@ describe('', () => { expect(rendered).to.have.length(0); }); - it('should render nothing with missing editable and value', () => { + it('should render nothing with missing field', () => { const field = {}; - const rendered = mount().children(); - expect(rendered).to.have.length(0); + const rendered = mount(); + expect(rendered.children()).to.have.length(1); + expect(rendered.html()).to.equal(''); }); it('should render field metadata component when metadata property is present', () => { - const field = { - value: { - href: '/lorem', - text: 'ipsum', - class: 'my-link', - }, - }; - const testMetadata = { contextItem: { id: '{09A07660-6834-476C-B93B-584248D3003B}', @@ -382,17 +375,24 @@ describe('', () => { rawValue: 'Test1', }; + const field = { + value: { + href: '/lorem', + text: 'ipsum', + class: 'my-link', + }, + metadata: testMetadata, + }; + const rendered = mount( - + ); expect(rendered.find('code')).to.have.length(2); expect(rendered.html()).to.contain('kind="open"'); expect(rendered.html()).to.contain('kind="close"'); - expect(rendered.html()).to.not.contain(`href="${field.value.href}"`); - expect(rendered.find(NextLink).length).to.equal(0); - expect(rendered.find(ReactLink).length).to.equal(0); + expect(rendered.html()).to.contain(JSON.stringify(testMetadata)); }); }); diff --git a/packages/sitecore-jss-nextjs/src/components/Link.tsx b/packages/sitecore-jss-nextjs/src/components/Link.tsx index 83e52c4be9..becc7d516a 100644 --- a/packages/sitecore-jss-nextjs/src/components/Link.tsx +++ b/packages/sitecore-jss-nextjs/src/components/Link.tsx @@ -7,7 +7,7 @@ import { LinkField, LinkProps as ReactLinkProps, LinkPropTypes, - getFieldMetadataMarkup, + withFieldMetadataWrapper, } from '@sitecore-jss/sitecore-jss-react'; export type LinkProps = ReactLinkProps & { @@ -18,12 +18,12 @@ export type LinkProps = ReactLinkProps & { internalLinkMatcher?: RegExp; }; -export const Link = forwardRef( - (props: LinkProps, ref): JSX.Element | null => { +export const Link = withFieldMetadataWrapper( + // eslint-disable-next-line react/display-name + forwardRef((props: LinkProps, ref): JSX.Element | null => { const { field, editable, - metadata, children, internalLinkMatcher = /^\//g, showLinkTextWithChildrenPresent, @@ -37,11 +37,6 @@ export const Link = forwardRef( return null; } - // when metadata is present, render it to be used for chrome hydration - if (metadata) { - return getFieldMetadataMarkup(metadata, children); - } - const value = ((field as LinkFieldValue).href ? field : (field as LinkField).value) as LinkFieldValue; @@ -75,8 +70,10 @@ export const Link = forwardRef( const reactLinkProps = { ...props }; delete reactLinkProps.internalLinkMatcher; + // we've already rendered the metadata wrapper - so set metadata to null to prevent duplicate wrapping + reactLinkProps.field.metadata = null; return ; - } + }) ); Link.defaultProps = { diff --git a/packages/sitecore-jss-nextjs/src/components/NextImage.test.tsx b/packages/sitecore-jss-nextjs/src/components/NextImage.test.tsx index 050e09b823..ba1e13d9ed 100644 --- a/packages/sitecore-jss-nextjs/src/components/NextImage.test.tsx +++ b/packages/sitecore-jss-nextjs/src/components/NextImage.test.tsx @@ -252,7 +252,10 @@ describe('', () => { describe('error cases', () => { const src = '/assets/img/test0.png'; it('should throw an error if src is present', () => { - expect(() => mount()).to.throw( + const field = { + src: '/assets/img/test0.png', + }; + expect(() => mount()).to.throw( 'Detected src prop. If you wish to use src, use next/image directly.' ); }); @@ -297,13 +300,17 @@ describe('', () => { rawValue: 'Test1', }; - const field = { value: { src: '/assets/img/test0.png', alt: 'my image' } }; + const field = { + value: { src: '/assets/img/test0.png', alt: 'my image' }, + metadata: testMetadata, + }; - const rendered = mount(); + const rendered = mount(); expect(rendered.find('code')).to.have.length(2); - expect(rendered.find('img')).to.have.length(0); + expect(rendered.find('img')).to.have.length(1); expect(rendered.html()).to.contain('kind="open"'); expect(rendered.html()).to.contain('kind="close"'); + expect(rendered.html()).to.contain(JSON.stringify(testMetadata)); }); }); diff --git a/packages/sitecore-jss-nextjs/src/components/NextImage.tsx b/packages/sitecore-jss-nextjs/src/components/NextImage.tsx index 87436461a3..b13935853f 100644 --- a/packages/sitecore-jss-nextjs/src/components/NextImage.tsx +++ b/packages/sitecore-jss-nextjs/src/components/NextImage.tsx @@ -6,93 +6,81 @@ import { ImageProps, ImageField, ImageFieldValue, - getFieldMetadataMarkup, + withFieldMetadataWrapper, } from '@sitecore-jss/sitecore-jss-react'; import Image, { ImageProps as NextImageProperties } from 'next/image'; type NextImageProps = Omit & Partial; -export const NextImage: React.FC = ({ - editable, - imageParams, - field, - metadata, - mediaUrlPrefix, - fill, - priority, - ...otherProps -}) => { - // next handles src and we use a custom loader, - // throw error if these are present - if (otherProps.src) { - throw new Error('Detected src prop. If you wish to use src, use next/image directly.'); +export const NextImage: React.FC = withFieldMetadataWrapper( + ({ editable, imageParams, field, mediaUrlPrefix, fill, priority, ...otherProps }) => { + // next handles src and we use a custom loader, + // throw error if these are present + if (otherProps.src) { + throw new Error('Detected src prop. If you wish to use src, use next/image directly.'); + } + + const dynamicMedia = field as ImageField | ImageFieldValue; + + if ( + !field || + (!dynamicMedia.editable && !dynamicMedia.value && !(dynamicMedia as ImageFieldValue).src) + ) { + return null; + } + + const imageField = dynamicMedia as ImageField; + + // we likely have an experience editor value, should be a string + if (editable && imageField.editable) { + return getEEMarkup( + imageField, + imageParams as { [paramName: string]: string | number }, + mediaUrlPrefix as RegExp, + otherProps as { src: string } + ); + } + + // some wise-guy/gal is passing in a 'raw' image object value + const img: ImageFieldValue = (dynamicMedia as ImageFieldValue).src + ? (field as ImageFieldValue) + : (dynamicMedia.value as ImageFieldValue); + if (!img) { + return null; + } + + const attrs = { + ...img, + ...otherProps, + fill, + priority, + src: mediaApi.updateImageUrl( + img.src as string, + imageParams as { [paramName: string]: string | number }, + mediaUrlPrefix as RegExp + ), + }; + + const imageProps = { + ...attrs, + // force replace /media with /jssmedia in src since we _know_ we will be adding a 'mw' query string parameter + // this is required for Sitecore media API resizing to work properly + src: mediaApi.replaceMediaUrlPrefix(attrs.src, mediaUrlPrefix as RegExp), + }; + + // Exclude `width`, `height` in case image is responsive, `fill` is used + if (imageProps.fill) { + delete imageProps.width; + delete imageProps.height; + } + + if (attrs) { + return ; + } + + return null; // we can't handle the truth } - - const dynamicMedia = field as ImageField | ImageFieldValue; - - if ( - !field || - (!dynamicMedia.editable && !dynamicMedia.value && !(dynamicMedia as ImageFieldValue).src) - ) { - return null; - } - - // when metadata is present, render it to be used for chrome hydration - if (metadata) { - return getFieldMetadataMarkup(metadata, otherProps.children); - } - - const imageField = dynamicMedia as ImageField; - - // we likely have an experience editor value, should be a string - if (editable && imageField.editable) { - return getEEMarkup( - imageField, - imageParams as { [paramName: string]: string | number }, - mediaUrlPrefix as RegExp, - otherProps as { src: string } - ); - } - - // some wise-guy/gal is passing in a 'raw' image object value - const img: ImageFieldValue = (dynamicMedia as ImageFieldValue).src - ? (field as ImageFieldValue) - : (dynamicMedia.value as ImageFieldValue); - if (!img) { - return null; - } - - const attrs = { - ...img, - ...otherProps, - fill, - priority, - src: mediaApi.updateImageUrl( - img.src as string, - imageParams as { [paramName: string]: string | number }, - mediaUrlPrefix as RegExp - ), - }; - - const imageProps = { - ...attrs, - // force replace /media with /jssmedia in src since we _know_ we will be adding a 'mw' query string parameter - // this is required for Sitecore media API resizing to work properly - src: mediaApi.replaceMediaUrlPrefix(attrs.src, mediaUrlPrefix as RegExp), - }; - - // Exclude `width`, `height` in case image is responsive, `fill` is used - if (imageProps.fill) { - delete imageProps.width; - delete imageProps.height; - } - - if (attrs) { - return ; - } - - return null; // we can't handle the truth -}; +); NextImage.propTypes = { field: PropTypes.oneOfType([ From 752506f8a326a8214543e302496e0c92aac9e7e9 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Tue, 16 Apr 2024 16:16:00 +0300 Subject: [PATCH 15/21] adjust unit tests and fix File component --- .../src/components/Date.test.tsx | 31 ++++++++++--------- .../src/components/File.test.tsx | 11 ++++--- .../src/components/File.tsx | 2 +- .../src/components/Link.test.tsx | 5 +-- .../src/components/Text.test.tsx | 6 ++-- 5 files changed, 30 insertions(+), 25 deletions(-) diff --git a/packages/sitecore-jss-react/src/components/Date.test.tsx b/packages/sitecore-jss-react/src/components/Date.test.tsx index 4a9095bf75..03c1aad816 100644 --- a/packages/sitecore-jss-react/src/components/Date.test.tsx +++ b/packages/sitecore-jss-react/src/components/Date.test.tsx @@ -5,14 +5,14 @@ import React from 'react'; import { DateField } from './Date'; describe('', () => { - it('should return null if no editable or value', () => { + it('should render nothing is field is missing', () => { const p = { field: {}, }; const c = shallow(); - - expect(c.type()).to.be.null; + console.log(c.type()); + expect(c.html()).to.equal(''); }); it('should render value', () => { @@ -83,20 +83,22 @@ describe('', () => { }); it('should render field metadata component when metadata property is present', () => { + const testMetadata = { + contextItem: { + id: '{09A07660-6834-476C-B93B-584248D3003B}', + language: 'en', + revision: 'a0b36ce0a7db49418edf90eb9621e145', + version: 1, + }, + fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}', + fieldType: 'date', + rawValue: 'Test1', + }; + const props = { field: { value: '23-11-2001', - metadata: { - contextItem: { - id: '{09A07660-6834-476C-B93B-584248D3003B}', - language: 'en', - revision: 'a0b36ce0a7db49418edf90eb9621e145', - version: 1, - }, - fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}', - fieldType: 'date', - rawValue: 'Test1', - }, + metadata: testMetadata, }, }; @@ -105,5 +107,6 @@ describe('', () => { expect(rendered.find('code')).to.have.length(2); expect(rendered.html()).to.contain('kind="open"'); expect(rendered.html()).to.contain('kind="close"'); + expect(rendered.html()).to.contain(JSON.stringify(testMetadata)); }); }); diff --git a/packages/sitecore-jss-react/src/components/File.test.tsx b/packages/sitecore-jss-react/src/components/File.test.tsx index 6247e00c86..a73adee5b0 100644 --- a/packages/sitecore-jss-react/src/components/File.test.tsx +++ b/packages/sitecore-jss-react/src/components/File.test.tsx @@ -14,8 +14,8 @@ describe('', () => { const field = { editable: 'lorem', }; - const rendered = mount().children(); - expect(rendered).to.have.length(0); + const rendered = mount(); + expect(rendered.html()).to.equal(''); }); it('should render with src directly on provided field', () => { @@ -51,7 +51,7 @@ describe('', () => { expect(rendered.html()).to.contain('class="my-css"'); }); - it('should render field metadata component when metadata property is present', () => { + it('should render field metadata when metadata property is present', () => { const testMetadata = { contextItem: { id: '{09A07660-6834-476C-B93B-584248D3003B}', @@ -70,10 +70,11 @@ describe('', () => { metadata: testMetadata, }; - const rendered = mount(); + const rendered = mount(); console.log(rendered.html()); - expect(rendered.find('code')).to.have.length(2); + // expect(rendered.find('code')).to.have.length(2); expect(rendered.html()).to.contain('kind="open"'); expect(rendered.html()).to.contain('kind="close"'); + expect(rendered.html()).to.contain(JSON.stringify(testMetadata)); }); }); diff --git a/packages/sitecore-jss-react/src/components/File.tsx b/packages/sitecore-jss-react/src/components/File.tsx index ff4e8815ff..d1b03126d6 100644 --- a/packages/sitecore-jss-react/src/components/File.tsx +++ b/packages/sitecore-jss-react/src/components/File.tsx @@ -7,11 +7,11 @@ export interface FileFieldValue { src?: string; title?: string; displayName?: string; - metadata?: FieldMetadata; } export interface FileField { value: FileFieldValue; + metadata?: FieldMetadata; } export interface FileProps { diff --git a/packages/sitecore-jss-react/src/components/Link.test.tsx b/packages/sitecore-jss-react/src/components/Link.test.tsx index 437b96158e..ad131fe2ab 100644 --- a/packages/sitecore-jss-react/src/components/Link.test.tsx +++ b/packages/sitecore-jss-react/src/components/Link.test.tsx @@ -14,8 +14,8 @@ describe('', () => { it('should render nothing with missing editable and value', () => { const field = {}; - const rendered = mount().children(); - expect(rendered).to.have.length(0); + const rendered = mount(); + expect(rendered.html()).to.equal(''); }); it('should render editable with an editable value', () => { @@ -150,5 +150,6 @@ describe('', () => { expect(rendered.find('code')).to.have.length(2); expect(rendered.html()).to.contain('kind="open"'); expect(rendered.html()).to.contain('kind="close"'); + expect(rendered.html()).to.contain(JSON.stringify(testMetadata)); }); }); diff --git a/packages/sitecore-jss-react/src/components/Text.test.tsx b/packages/sitecore-jss-react/src/components/Text.test.tsx index 653aaecdc0..ad91e10bbb 100644 --- a/packages/sitecore-jss-react/src/components/Text.test.tsx +++ b/packages/sitecore-jss-react/src/components/Text.test.tsx @@ -14,20 +14,20 @@ describe('', () => { expect(rendered.html()).to.be.null; }); - it('should render nothing with empty value', () => { + it('should render nothing with missing field', () => { const field = { value: '', }; const rendered = mount(); expect(rendered).to.have.length(1); - expect(rendered.html()).to.be.null; + expect(rendered.html()).to.equal(''); }); it('should render nothing with missing editable and value', () => { const field = {}; const rendered = mount(); expect(rendered).to.have.length(1); - expect(rendered.html()).to.be.null; + expect(rendered.html()).to.equal(''); }); it('should render editable with editable value', () => { From 03b9de9edf7a2fbf97d897ce41d017f76efacead Mon Sep 17 00:00:00 2001 From: yavorsk Date: Tue, 16 Apr 2024 17:50:03 +0300 Subject: [PATCH 16/21] adjust image field tests; include check for media property in metadata wrapper --- packages/sitecore-jss-react/src/components/FieldMetadata.tsx | 2 +- packages/sitecore-jss-react/src/components/Image.test.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/sitecore-jss-react/src/components/FieldMetadata.tsx b/packages/sitecore-jss-react/src/components/FieldMetadata.tsx index d00953fb6f..8e2d7d69ac 100644 --- a/packages/sitecore-jss-react/src/components/FieldMetadata.tsx +++ b/packages/sitecore-jss-react/src/components/FieldMetadata.tsx @@ -51,7 +51,7 @@ export function withFieldMetadataWrapper { const metadata = (props as any)?.field?.metadata; - if (!props?.field) { + if (!props?.field && !props?.media) { return null; } diff --git a/packages/sitecore-jss-react/src/components/Image.test.tsx b/packages/sitecore-jss-react/src/components/Image.test.tsx index 6a31c5322d..928adc8208 100644 --- a/packages/sitecore-jss-react/src/components/Image.test.tsx +++ b/packages/sitecore-jss-react/src/components/Image.test.tsx @@ -316,8 +316,9 @@ describe('', () => { const rendered = mount(); expect(rendered.find('code')).to.have.length(2); - expect(rendered.find('img')).to.have.length(0); expect(rendered.html()).to.contain('kind="open"'); expect(rendered.html()).to.contain('kind="close"'); + expect(rendered.html()).to.contain('src="/assets/img/test0.png"'); + expect(rendered.html()).to.contain(JSON.stringify(testMetadata)); }); }); From ecc5d826850f862305818cd2753489f423804b22 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Tue, 16 Apr 2024 20:56:42 +0300 Subject: [PATCH 17/21] some types updates --- .../src/components/FieldMetadata.tsx | 20 +++++++++---------- .../src/components/Image.tsx | 11 ++++++++++ 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/packages/sitecore-jss-react/src/components/FieldMetadata.tsx b/packages/sitecore-jss-react/src/components/FieldMetadata.tsx index 8e2d7d69ac..9c7550d238 100644 --- a/packages/sitecore-jss-react/src/components/FieldMetadata.tsx +++ b/packages/sitecore-jss-react/src/components/FieldMetadata.tsx @@ -2,26 +2,26 @@ import React, { ComponentType, forwardRef } from 'react'; /** The field metadata */ export interface FieldMetadata { - contextItem?: FieldMetadataContextItem | null | undefined; - fieldId?: string | null | undefined; - fieldType?: string | null | undefined; - rawValue?: string | null | undefined; + contextItem?: FieldMetadataContextItem; + fieldId?: string; + fieldType?: string; + rawValue?: string; } /** The field's context item metadata */ export interface FieldMetadataContextItem { - id?: string | null | undefined; - language?: string | null | undefined; - revision?: string | null | undefined; - version?: number | null | undefined; + id?: string; + language?: string; + revision?: string; + version?: number; } -export interface FieldMetadataWrapperProps { +interface FieldMetadataWrapperProps { metadata: any; children: React.ReactNode; } -export const FieldMetadataWrapper = (props: FieldMetadataWrapperProps): JSX.Element => { +const FieldMetadataWrapper = (props: FieldMetadataWrapperProps): JSX.Element => { const data = JSON.stringify(props.metadata); const defaultAttributes = { type: 'text/sitecore', diff --git a/packages/sitecore-jss-react/src/components/Image.tsx b/packages/sitecore-jss-react/src/components/Image.tsx index 8d7ac47bd0..2a29a3cce8 100644 --- a/packages/sitecore-jss-react/src/components/Image.tsx +++ b/packages/sitecore-jss-react/src/components/Image.tsx @@ -217,6 +217,17 @@ Image.propTypes = { PropTypes.shape({ value: PropTypes.object, editable: PropTypes.string, + metadata: PropTypes.shape({ + contextItem: PropTypes.shape({ + id: PropTypes.string, + language: PropTypes.string, + revision: PropTypes.string, + version: PropTypes.number, + }), + fieldId: PropTypes.string, + fieldType: PropTypes.string, + rawValue: PropTypes.string, + }), }), ]), editable: PropTypes.bool, From 4d23b396dc33f836e2ece48c97915ab21483a6c4 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Wed, 17 Apr 2024 09:49:21 +0300 Subject: [PATCH 18/21] some unit tests adjustments and metadata wrapper component update --- .../src/components/Link.test.tsx | 4 +- .../src/components/FieldMetadata.test.tsx | 129 ++++++++---------- .../src/components/FieldMetadata.tsx | 6 +- .../src/components/File.test.tsx | 124 ++++++++--------- .../src/components/Image.tsx | 11 -- .../src/components/Link.test.tsx | 4 +- .../src/components/Text.test.tsx | 3 +- 7 files changed, 126 insertions(+), 155 deletions(-) diff --git a/packages/sitecore-jss-nextjs/src/components/Link.test.tsx b/packages/sitecore-jss-nextjs/src/components/Link.test.tsx index ded92731f6..de095e9714 100644 --- a/packages/sitecore-jss-nextjs/src/components/Link.test.tsx +++ b/packages/sitecore-jss-nextjs/src/components/Link.test.tsx @@ -351,8 +351,8 @@ describe('', () => { it('should render nothing with missing field', () => { const field = (null as unknown) as LinkField; - const rendered = mount().children(); - expect(rendered).to.have.length(0); + const rendered = mount(); + expect(rendered.html()).to.equal(''); }); it('should render nothing with missing field', () => { diff --git a/packages/sitecore-jss-react/src/components/FieldMetadata.test.tsx b/packages/sitecore-jss-react/src/components/FieldMetadata.test.tsx index 915a35e961..20935c71e0 100644 --- a/packages/sitecore-jss-react/src/components/FieldMetadata.test.tsx +++ b/packages/sitecore-jss-react/src/components/FieldMetadata.test.tsx @@ -1,17 +1,11 @@ /* eslint-disable no-unused-expressions */ import React from 'react'; import { expect } from 'chai'; -import { mount, render } from 'enzyme'; - -import { - FieldMetadataComponent, - FieldMetadataComponentProps, - getFieldMetadataMarkup, -} from './FieldMetadata'; +import { mount } from 'enzyme'; +import { FieldMetadata, withFieldMetadataWrapper } from './FieldMetadata'; import { describe } from 'node:test'; -import { json } from 'stream/consumers'; -describe('', () => { +describe('withFieldMetadataWrapper', () => { const testMetadata = { contextItem: { id: '{09A07660-6834-476C-B93B-584248D3003B}', @@ -25,90 +19,83 @@ describe('', () => { }; const stringifiedData = JSON.stringify(testMetadata); - it('Should render provided metadata', () => { - const props: FieldMetadataComponentProps = { - data: stringifiedData, - }; - - const rendered = mount(); - - expect(rendered.find('code')).to.have.length(2); - expect(rendered.html()).to.contain('kind="open"'); - expect(rendered.html()).to.contain('kind="close"'); - expect(rendered.html()).to.include(stringifiedData); - }); + const TestComponent: React.FC = (props: any) => { + return ( +
+

foo

+

bar

+
+ ); + }; - it('Should render with provided children', () => { - const props: FieldMetadataComponentProps = { - data: stringifiedData, + it('Should return component if field is empty', () => { + const props = { + editable: true, }; - const rendered = mount( - -
nested
- - ); + const WrappedComponent = withFieldMetadataWrapper((props) => { + return ; + }); - expect(rendered.find('code')).to.have.length(2); + const rendered = mount(); + + expect(rendered.find('code')).to.have.length(0); expect(rendered.find('div')).to.have.length(1); - expect(rendered.html()).to.include('nested'); + expect(rendered.html()).to.contain('bar'); }); - it('Should render with default attributes', () => { - const props: FieldMetadataComponentProps = { - data: stringifiedData, + it('Should render unwrapped component if metadata field is not provided', () => { + const props = { + field: {}, }; - const rendered = mount(); + const WrappedComponent = withFieldMetadataWrapper((props) => { + return ; + }); + + const rendered = mount(); - expect(rendered.html()).to.contain('kind="open"'); - expect(rendered.html()).to.contain('kind="close"'); - expect(rendered.html()).to.contain('type="text/sitecore"'); - expect(rendered.html()).to.contain('chrometype="field"'); - expect(rendered.html()).to.contain('class="scpm"'); + expect(rendered.find('code')).to.have.length(0); + expect(rendered.find('div')).to.have.length(1); + expect(rendered.html()).to.contain('bar'); }); - it('Should render with provided attributes', () => { - const props: FieldMetadataComponentProps = { - data: stringifiedData, - htmlAttributes: { - chrometype: 'foo', - type: 'bar', - className: 'far', + it('Should render unwrapped component if metadata is provided but field is not editable', () => { + const props = { + field: { + metadata: testMetadata, }, + editable: false, }; - const rendered = mount(); + const WrappedComponent = withFieldMetadataWrapper((props) => { + return ; + }); + + const rendered = mount(); - expect(rendered.html()).to.contain('kind="open"'); - expect(rendered.html()).to.contain('kind="close"'); - expect(rendered.html()).to.contain('type="bar"'); - expect(rendered.html()).to.contain('chrometype="foo"'); - expect(rendered.html()).to.contain('class="far"'); + expect(rendered.find('code')).to.have.length(0); + expect(rendered.find('div')).to.have.length(1); + expect(rendered.html()).to.contain('bar'); }); -}); -describe('getFieldMetadataMarkup', () => { - it('Should render component with provided metadata and children ', () => { - const testMetadata = { - contextItem: { - id: '{09A07660-6834-476C-B93B-584248D3003B}', - language: 'en', - revision: 'a0b36ce0a7db49418edf90eb9621e145', - version: 1, + it('Should wrap field with provided metadata', () => { + const props = { + field: { + metadata: testMetadata, }, - fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}', - fieldType: 'single-line', - rawValue: 'Test1', + editable: true, }; - const div =
nested
; + const WrappedComponent = withFieldMetadataWrapper((props) => { + return ; + }); + + const rendered = mount(); - const rendered = mount(getFieldMetadataMarkup(testMetadata, div)); expect(rendered.find('code')).to.have.length(2); - expect(rendered.html()).to.contain('kind="open"'); - expect(rendered.html()).to.contain('kind="close"'); - expect(rendered.html()).to.include(JSON.stringify(testMetadata)); - expect(rendered.html()).to.include('
nested
'); + expect(rendered.find('div')).to.have.length(1); + expect(rendered.html()).to.contain('bar'); + expect(rendered.html()).to.contain(stringifiedData); }); }); diff --git a/packages/sitecore-jss-react/src/components/FieldMetadata.tsx b/packages/sitecore-jss-react/src/components/FieldMetadata.tsx index 9c7550d238..a24f4f4976 100644 --- a/packages/sitecore-jss-react/src/components/FieldMetadata.tsx +++ b/packages/sitecore-jss-react/src/components/FieldMetadata.tsx @@ -51,11 +51,7 @@ export function withFieldMetadataWrapper { const metadata = (props as any)?.field?.metadata; - if (!props?.field && !props?.media) { - return null; - } - - if (!metadata || !props.editable) { + if (!props?.field || !metadata || !props?.editable) { return ; } diff --git a/packages/sitecore-jss-react/src/components/File.test.tsx b/packages/sitecore-jss-react/src/components/File.test.tsx index a73adee5b0..8cff73419e 100644 --- a/packages/sitecore-jss-react/src/components/File.test.tsx +++ b/packages/sitecore-jss-react/src/components/File.test.tsx @@ -6,75 +6,75 @@ import { File, FileField } from './File'; describe('', () => { it('should render nothing with missing field', () => { const field = null as FileField; - const rendered = mount().children(); - expect(rendered).to.have.length(0); - }); - - it('should render nothing with missing value', () => { - const field = { - editable: 'lorem', - }; const rendered = mount(); expect(rendered.html()).to.equal(''); }); - it('should render with src directly on provided field', () => { - const field = { - src: '/lorem', - title: 'ipsum', - }; - const rendered = mount().find('a'); - expect(rendered.html()).to.contain(field.src); - expect(rendered.html()).to.contain(field.title); - }); + // it('should render nothing with missing value', () => { + // const field = { + // editable: 'lorem', + // }; + // const rendered = mount(); + // expect(rendered.html()).to.equal(''); + // }); - it('should render display name if no title', () => { - const field = { - value: { - src: '/lorem', - displayName: 'ipsum', - }, - }; - const rendered = mount().find('a'); - expect(rendered.html()).to.contain(field.value.displayName); - }); + // it('should render with src directly on provided field', () => { + // const field = { + // src: '/lorem', + // title: 'ipsum', + // }; + // const rendered = mount().find('a'); + // expect(rendered.html()).to.contain(field.src); + // expect(rendered.html()).to.contain(field.title); + // }); - it('should render other attributes with other props provided', () => { - const field = { - value: { - src: '/lorem', - title: 'ipsum', - }, - }; - const rendered = mount().find('a'); - expect(rendered.html()).to.contain('id="my-file"'); - expect(rendered.html()).to.contain('class="my-css"'); - }); + // it('should render display name if no title', () => { + // const field = { + // value: { + // src: '/lorem', + // displayName: 'ipsum', + // }, + // }; + // const rendered = mount().find('a'); + // expect(rendered.html()).to.contain(field.value.displayName); + // }); - it('should render field metadata when metadata property is present', () => { - const testMetadata = { - contextItem: { - id: '{09A07660-6834-476C-B93B-584248D3003B}', - language: 'en', - revision: 'a0b36ce0a7db49418edf90eb9621e145', - version: 1, - }, - fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}', - fieldType: 'file', - rawValue: 'Test1', - }; + // it('should render other attributes with other props provided', () => { + // const field = { + // value: { + // src: '/lorem', + // title: 'ipsum', + // }, + // }; + // const rendered = mount().find('a'); + // expect(rendered.html()).to.contain('id="my-file"'); + // expect(rendered.html()).to.contain('class="my-css"'); + // }); - const field = { - src: '/lorem', - title: 'ipsum', - metadata: testMetadata, - }; + // it('should render field metadata when metadata property is present', () => { + // const testMetadata = { + // contextItem: { + // id: '{09A07660-6834-476C-B93B-584248D3003B}', + // language: 'en', + // revision: 'a0b36ce0a7db49418edf90eb9621e145', + // version: 1, + // }, + // fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}', + // fieldType: 'file', + // rawValue: 'Test1', + // }; - const rendered = mount(); - console.log(rendered.html()); - // expect(rendered.find('code')).to.have.length(2); - expect(rendered.html()).to.contain('kind="open"'); - expect(rendered.html()).to.contain('kind="close"'); - expect(rendered.html()).to.contain(JSON.stringify(testMetadata)); - }); + // const field = { + // src: '/lorem', + // title: 'ipsum', + // metadata: testMetadata, + // }; + + // const rendered = mount(); + // console.log(rendered.html()); + // // expect(rendered.find('code')).to.have.length(2); + // expect(rendered.html()).to.contain('kind="open"'); + // expect(rendered.html()).to.contain('kind="close"'); + // expect(rendered.html()).to.contain(JSON.stringify(testMetadata)); + // }); }); diff --git a/packages/sitecore-jss-react/src/components/Image.tsx b/packages/sitecore-jss-react/src/components/Image.tsx index 2a29a3cce8..b3510a07fe 100644 --- a/packages/sitecore-jss-react/src/components/Image.tsx +++ b/packages/sitecore-jss-react/src/components/Image.tsx @@ -197,17 +197,6 @@ Image.propTypes = { PropTypes.shape({ value: PropTypes.object, editable: PropTypes.string, - metadata: PropTypes.shape({ - contextItem: PropTypes.shape({ - id: PropTypes.string, - language: PropTypes.string, - revision: PropTypes.string, - version: PropTypes.number, - }), - fieldId: PropTypes.string, - fieldType: PropTypes.string, - rawValue: PropTypes.string, - }), }), ]), field: PropTypes.oneOfType([ diff --git a/packages/sitecore-jss-react/src/components/Link.test.tsx b/packages/sitecore-jss-react/src/components/Link.test.tsx index ad131fe2ab..1f7c91d230 100644 --- a/packages/sitecore-jss-react/src/components/Link.test.tsx +++ b/packages/sitecore-jss-react/src/components/Link.test.tsx @@ -8,8 +8,8 @@ import { generalLinkField as eeLinkData } from '../test-data/ee-data'; describe('', () => { it('should render nothing with missing field', () => { const field = (null as unknown) as LinkField; - const rendered = mount().children(); - expect(rendered).to.have.length(0); + const rendered = mount(); + expect(rendered.html()).to.equal(''); }); it('should render nothing with missing editable and value', () => { diff --git a/packages/sitecore-jss-react/src/components/Text.test.tsx b/packages/sitecore-jss-react/src/components/Text.test.tsx index ad91e10bbb..3f75896a7d 100644 --- a/packages/sitecore-jss-react/src/components/Text.test.tsx +++ b/packages/sitecore-jss-react/src/components/Text.test.tsx @@ -10,8 +10,7 @@ describe('', () => { it('should render nothing with missing field', () => { const field: TextField = null; const rendered = mount(); - expect(rendered).to.have.length(1); - expect(rendered.html()).to.be.null; + expect(rendered.html()).to.equal(''); }); it('should render nothing with missing field', () => { From 0b05351bac86c55de52d08cba4153be8e1f9cacb Mon Sep 17 00:00:00 2001 From: yavorsk Date: Wed, 17 Apr 2024 10:06:35 +0300 Subject: [PATCH 19/21] some FieldMetadata related renamings --- .../src/components/Link.tsx | 4 +- .../src/components/NextImage.tsx | 4 +- .../src/components/Date.tsx | 4 +- .../src/components/FieldMetadata.test.tsx | 10 ++--- .../src/components/FieldMetadata.tsx | 10 ++--- .../src/components/File.tsx | 42 +++++++++---------- .../src/components/Image.tsx | 4 +- .../src/components/Link.tsx | 4 +- .../src/components/RichText.tsx | 4 +- .../src/components/Text.tsx | 4 +- packages/sitecore-jss-react/src/index.ts | 2 +- 11 files changed, 45 insertions(+), 47 deletions(-) diff --git a/packages/sitecore-jss-nextjs/src/components/Link.tsx b/packages/sitecore-jss-nextjs/src/components/Link.tsx index becc7d516a..9ce63157d7 100644 --- a/packages/sitecore-jss-nextjs/src/components/Link.tsx +++ b/packages/sitecore-jss-nextjs/src/components/Link.tsx @@ -7,7 +7,7 @@ import { LinkField, LinkProps as ReactLinkProps, LinkPropTypes, - withFieldMetadataWrapper, + withMetadata, } from '@sitecore-jss/sitecore-jss-react'; export type LinkProps = ReactLinkProps & { @@ -18,7 +18,7 @@ export type LinkProps = ReactLinkProps & { internalLinkMatcher?: RegExp; }; -export const Link = withFieldMetadataWrapper( +export const Link = withMetadata( // eslint-disable-next-line react/display-name forwardRef((props: LinkProps, ref): JSX.Element | null => { const { diff --git a/packages/sitecore-jss-nextjs/src/components/NextImage.tsx b/packages/sitecore-jss-nextjs/src/components/NextImage.tsx index b13935853f..052d88ec7a 100644 --- a/packages/sitecore-jss-nextjs/src/components/NextImage.tsx +++ b/packages/sitecore-jss-nextjs/src/components/NextImage.tsx @@ -6,13 +6,13 @@ import { ImageProps, ImageField, ImageFieldValue, - withFieldMetadataWrapper, + withMetadata, } from '@sitecore-jss/sitecore-jss-react'; import Image, { ImageProps as NextImageProperties } from 'next/image'; type NextImageProps = Omit & Partial; -export const NextImage: React.FC = withFieldMetadataWrapper( +export const NextImage: React.FC = withMetadata( ({ editable, imageParams, field, mediaUrlPrefix, fill, priority, ...otherProps }) => { // next handles src and we use a custom loader, // throw error if these are present diff --git a/packages/sitecore-jss-react/src/components/Date.tsx b/packages/sitecore-jss-react/src/components/Date.tsx index 8e74f7f422..03f71d2382 100644 --- a/packages/sitecore-jss-react/src/components/Date.tsx +++ b/packages/sitecore-jss-react/src/components/Date.tsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { FieldMetadata, withFieldMetadataWrapper } from './FieldMetadata'; +import { FieldMetadata, withMetadata } from './FieldMetadata'; export interface DateFieldProps { /** The date field data. */ @@ -23,7 +23,7 @@ export interface DateFieldProps { render?: (date: Date | null) => React.ReactNode; } -export const DateField: React.FC = withFieldMetadataWrapper( +export const DateField: React.FC = withMetadata( ({ field, tag, editable, render, ...otherProps }) => { if (!field || (!field.editable && !field.value)) { return null; diff --git a/packages/sitecore-jss-react/src/components/FieldMetadata.test.tsx b/packages/sitecore-jss-react/src/components/FieldMetadata.test.tsx index 20935c71e0..b1d7905e21 100644 --- a/packages/sitecore-jss-react/src/components/FieldMetadata.test.tsx +++ b/packages/sitecore-jss-react/src/components/FieldMetadata.test.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { expect } from 'chai'; import { mount } from 'enzyme'; -import { FieldMetadata, withFieldMetadataWrapper } from './FieldMetadata'; +import { FieldMetadata, withMetadata } from './FieldMetadata'; import { describe } from 'node:test'; describe('withFieldMetadataWrapper', () => { @@ -33,7 +33,7 @@ describe('withFieldMetadataWrapper', () => { editable: true, }; - const WrappedComponent = withFieldMetadataWrapper((props) => { + const WrappedComponent = withMetadata((props) => { return ; }); @@ -49,7 +49,7 @@ describe('withFieldMetadataWrapper', () => { field: {}, }; - const WrappedComponent = withFieldMetadataWrapper((props) => { + const WrappedComponent = withMetadata((props) => { return ; }); @@ -68,7 +68,7 @@ describe('withFieldMetadataWrapper', () => { editable: false, }; - const WrappedComponent = withFieldMetadataWrapper((props) => { + const WrappedComponent = withMetadata((props) => { return ; }); @@ -87,7 +87,7 @@ describe('withFieldMetadataWrapper', () => { editable: true, }; - const WrappedComponent = withFieldMetadataWrapper((props) => { + const WrappedComponent = withMetadata((props) => { return ; }); diff --git a/packages/sitecore-jss-react/src/components/FieldMetadata.tsx b/packages/sitecore-jss-react/src/components/FieldMetadata.tsx index a24f4f4976..835e0cbce6 100644 --- a/packages/sitecore-jss-react/src/components/FieldMetadata.tsx +++ b/packages/sitecore-jss-react/src/components/FieldMetadata.tsx @@ -16,12 +16,12 @@ export interface FieldMetadataContextItem { version?: number; } -interface FieldMetadataWrapperProps { +interface MetadataWrapperProps { metadata: any; children: React.ReactNode; } -const FieldMetadataWrapper = (props: FieldMetadataWrapperProps): JSX.Element => { +const MetadataWrapper = (props: MetadataWrapperProps): JSX.Element => { const data = JSON.stringify(props.metadata); const defaultAttributes = { type: 'text/sitecore', @@ -44,7 +44,7 @@ const FieldMetadataWrapper = (props: FieldMetadataWrapperProps): JSX.Element => * Wraps the field component with metadata markup intended to be used for chromes hydartion * @param {ComponentType} FieldComponent the field component */ -export function withFieldMetadataWrapper>( +export function withMetadata>( FieldComponent: ComponentType ) { // eslint-disable-next-line react/display-name @@ -56,9 +56,9 @@ export function withFieldMetadataWrapper + - + ); }); } diff --git a/packages/sitecore-jss-react/src/components/File.tsx b/packages/sitecore-jss-react/src/components/File.tsx index d1b03126d6..703ecd398c 100644 --- a/packages/sitecore-jss-react/src/components/File.tsx +++ b/packages/sitecore-jss-react/src/components/File.tsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; -import { FieldMetadata, withFieldMetadataWrapper } from './FieldMetadata'; +import { FieldMetadata, withMetadata } from './FieldMetadata'; export interface FileFieldValue { [propName: string]: unknown; @@ -22,33 +22,31 @@ export interface FileProps { children?: React.ReactNode; } -export const File: React.FC = withFieldMetadataWrapper( - ({ field, children, ...otherProps }) => { - /* +export const File: React.FC = withMetadata(({ field, children, ...otherProps }) => { + /* File fields cannot be managed via the EE. We never output "editable." */ - const dynamicField: FileField | FileFieldValue = field; + const dynamicField: FileField | FileFieldValue = field; - if (!field || (!dynamicField.value && !(dynamicField as FileFieldValue).src)) { - return null; - } - - // handle link directly on field for forgetful devs - const file = ((dynamicField as FileFieldValue).src - ? field - : dynamicField.value) as FileFieldValue; - if (!file) { - return null; - } + if (!field || (!dynamicField.value && !(dynamicField as FileFieldValue).src)) { + return null; + } - const linkText = !children ? file.title || file.displayName : null; - const anchorAttrs = { - href: file.src, - }; - return React.createElement('a', { ...anchorAttrs, ...otherProps }, linkText, children); + // handle link directly on field for forgetful devs + const file = ((dynamicField as FileFieldValue).src + ? field + : dynamicField.value) as FileFieldValue; + if (!file) { + return null; } -); + + const linkText = !children ? file.title || file.displayName : null; + const anchorAttrs = { + href: file.src, + }; + return React.createElement('a', { ...anchorAttrs, ...otherProps }, linkText, children); +}); File.propTypes = { field: PropTypes.oneOfType([ diff --git a/packages/sitecore-jss-react/src/components/Image.tsx b/packages/sitecore-jss-react/src/components/Image.tsx index b3510a07fe..1fc884bb4f 100644 --- a/packages/sitecore-jss-react/src/components/Image.tsx +++ b/packages/sitecore-jss-react/src/components/Image.tsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { addClassName, convertAttributesToReactProps } from '../utils'; import { getAttributesString } from '../utils'; -import { FieldMetadata, withFieldMetadataWrapper } from './FieldMetadata'; +import { FieldMetadata, withMetadata } from './FieldMetadata'; export interface ImageFieldValue { [attributeName: string]: unknown; @@ -150,7 +150,7 @@ export const getEEMarkup = ( return getEditableWrapper(editableMarkup); }; -export const Image: React.FC = withFieldMetadataWrapper( +export const Image: React.FC = withMetadata( ({ media, editable, imageParams, field, mediaUrlPrefix, ...otherProps }) => { // allows the mistake of using 'field' prop instead of 'media' (consistent with other helpers) if (field && !media) { diff --git a/packages/sitecore-jss-react/src/components/Link.tsx b/packages/sitecore-jss-react/src/components/Link.tsx index bb9ede8629..607fea2b89 100644 --- a/packages/sitecore-jss-react/src/components/Link.tsx +++ b/packages/sitecore-jss-react/src/components/Link.tsx @@ -1,6 +1,6 @@ import React, { ReactElement, forwardRef } from 'react'; import PropTypes from 'prop-types'; -import { FieldMetadata, withFieldMetadataWrapper } from './FieldMetadata'; +import { FieldMetadata, withMetadata } from './FieldMetadata'; export interface LinkFieldValue { [attributeName: string]: unknown; @@ -42,7 +42,7 @@ export type LinkProps = React.DetailedHTMLProps< showLinkTextWithChildrenPresent?: boolean; }; -export const Link = withFieldMetadataWrapper( +export const Link = withMetadata( // eslint-disable-next-line react/display-name forwardRef( ({ field, editable, showLinkTextWithChildrenPresent, ...otherProps }, ref) => { diff --git a/packages/sitecore-jss-react/src/components/RichText.tsx b/packages/sitecore-jss-react/src/components/RichText.tsx index 8ed6c3cdd4..8cb03f2c7c 100644 --- a/packages/sitecore-jss-react/src/components/RichText.tsx +++ b/packages/sitecore-jss-react/src/components/RichText.tsx @@ -1,6 +1,6 @@ import React, { forwardRef } from 'react'; import PropTypes from 'prop-types'; -import { FieldMetadata, withFieldMetadataWrapper } from './FieldMetadata'; +import { FieldMetadata, withMetadata } from './FieldMetadata'; export interface RichTextField { value?: string; @@ -25,7 +25,7 @@ export interface RichTextProps { editable?: boolean; } -export const RichText: React.FC = withFieldMetadataWrapper( +export const RichText: React.FC = withMetadata( // eslint-disable-next-line react/display-name forwardRef(({ field, tag, editable, ...otherProps }, ref) => { if (!field || (!field.editable && !field.value)) { diff --git a/packages/sitecore-jss-react/src/components/Text.tsx b/packages/sitecore-jss-react/src/components/Text.tsx index 25cb55256f..4a1f3bba44 100644 --- a/packages/sitecore-jss-react/src/components/Text.tsx +++ b/packages/sitecore-jss-react/src/components/Text.tsx @@ -1,5 +1,5 @@ import React, { ReactElement, FunctionComponent } from 'react'; -import { FieldMetadata, withFieldMetadataWrapper } from './FieldMetadata'; +import { FieldMetadata, withMetadata } from './FieldMetadata'; import PropTypes from 'prop-types'; export interface TextField { @@ -28,7 +28,7 @@ export interface TextProps { encode?: boolean; } -export const Text: FunctionComponent = withFieldMetadataWrapper( +export const Text: FunctionComponent = withMetadata( ({ field, tag, editable, encode, ...otherProps }) => { if (!field || (!field.editable && (field.value === undefined || field.value === ''))) { return null; diff --git a/packages/sitecore-jss-react/src/index.ts b/packages/sitecore-jss-react/src/index.ts index d834c1b68a..ae54b3103b 100644 --- a/packages/sitecore-jss-react/src/index.ts +++ b/packages/sitecore-jss-react/src/index.ts @@ -100,4 +100,4 @@ export { withPlaceholder } from './enhancers/withPlaceholder'; export { withDatasourceCheck } from './enhancers/withDatasourceCheck'; export { EditFrameProps, EditFrame } from './components/EditFrame'; export { ComponentBuilder, ComponentBuilderConfig } from './ComponentBuilder'; -export { FieldMetadata, withFieldMetadataWrapper } from './components/FieldMetadata'; +export { FieldMetadata, withMetadata } from './components/FieldMetadata'; From 46481cd2ce8b026e77ab972c9995a456a137344e Mon Sep 17 00:00:00 2001 From: yavorsk Date: Wed, 17 Apr 2024 10:24:20 +0300 Subject: [PATCH 20/21] add unit test for RichText nextjs component --- .../src/components/RichText.test.tsx | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/packages/sitecore-jss-nextjs/src/components/RichText.test.tsx b/packages/sitecore-jss-nextjs/src/components/RichText.test.tsx index de0a4db97c..ff709aeb43 100644 --- a/packages/sitecore-jss-nextjs/src/components/RichText.test.tsx +++ b/packages/sitecore-jss-nextjs/src/components/RichText.test.tsx @@ -379,4 +379,52 @@ describe('RichText', () => { expect(router.prefetch).callCount(0); }); + + it('should render field metadata component when metadata property is present', () => { + const app = document.createElement('main'); + + document.body.appendChild(app); + + const router = Router(); + + const testMetadata = { + contextItem: { + id: '{09A07660-6834-476C-B93B-584248D3003B}', + language: 'en', + revision: 'a0b36ce0a7db49418edf90eb9621e145', + version: 1, + }, + fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}', + fieldType: 'image', + rawValue: 'Test1', + }; + + const props = { + field: { + value: ` + `, + metadata: testMetadata, + }, + }; + + const rendered = mount( + + + , + { attachTo: app } + ); + + // const rendered = mount(); + + expect(rendered.find('code')).to.have.length(2); + expect(rendered.html()).to.contain('
'); + expect(rendered.html()).to.contain('kind="open"'); + expect(rendered.html()).to.contain('kind="close"'); + expect(rendered.html()).to.contain(JSON.stringify(testMetadata)); + }); }); From cd24bb98c41a3f887fd05001d234d264e7dc445f Mon Sep 17 00:00:00 2001 From: yavorsk Date: Wed, 17 Apr 2024 11:01:28 +0300 Subject: [PATCH 21/21] update changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8c9b2a6ce3..970ce26430 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,7 +12,7 @@ Our versioning strategy is as follows: ## Unreleased ### 🎉 New Features & Improvements -* `[sitecore-jss-react]` `[sitecore-jss-nextjs]` Introduce FieldMetadata component and functionality to render it when metadata field property is provided in the field's layout data. In such case FieldMetadaComponent should be rendered instead of the actual field component to enable chrome's hydration when editing in pages. Ability to render metadata has been added to the field rendering components for react and nextjs. ([#1773](https://github.com/Sitecore/jss/pull/1773)) +* `[sitecore-jss-react]` `[sitecore-jss-nextjs]` Introduce FieldMetadata component and functionality to render it when metadata field property is provided in the field's layout data. In such case the field component is wrapped with metadata markup to enable chromes hydration when editing in pages. Ability to render metadata has been added to the field rendering components for react and nextjs. ([#1774](https://github.com/Sitecore/jss/pull/1774)) ## 21.7.1