[sitecore-jss-react] [sitecore-jss-nextjs] Add support for chrome's hydration for fields

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 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. ([#1773](https://github.com/Sitecore/jss/pull/1773)) 
+
 ## 21.7.1
 
 ### 🐛 Bug Fixes

packages/sitecore-jss-nextjs/src/components/Link.test.tsx

@@ -351,13 +351,48 @@ describe('<Link />', () => {
 
   it('should render nothing with missing field', () => {
     const field = (null as unknown) as LinkField;
-    const rendered = mount(<Link field={field} />).children();
-    expect(rendered).to.have.length(0);
+    const rendered = mount(<Link field={field} />);
+    expect(rendered.html()).to.equal('');
   });
 
-  it('should render nothing with missing editable and value', () => {
+  it('should render nothing with missing field', () => {
     const field = {};
-    const rendered = mount(<Link field={field} />).children();
-    expect(rendered).to.have.length(0);
+    const rendered = mount(<Link field={field} />);
+    expect(rendered.children()).to.have.length(1);
+    expect(rendered.html()).to.equal('');
+  });
+
+  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 = {
+      value: {
+        href: '/lorem',
+        text: 'ipsum',
+        class: 'my-link',
+      },
+      metadata: testMetadata,
+    };
+
+    const rendered = mount(
+      <Page>
+        <Link field={field} />
+      </Page>
+    );
+
+    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));
   });
 });

packages/sitecore-jss-nextjs/src/components/Link.tsx

@@ -7,6 +7,7 @@ import {
   LinkField,
   LinkProps as ReactLinkProps,
   LinkPropTypes,
+  withFieldMetadataForwardRef,
 } from '@sitecore-jss/sitecore-jss-react';
 
 export type LinkProps = ReactLinkProps & {
@@ -17,8 +18,9 @@ export type LinkProps = ReactLinkProps & {
   internalLinkMatcher?: RegExp;
 };
 
-export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  (props: LinkProps, ref): JSX.Element | null => {
+export const Link = withFieldMetadataForwardRef(
+  // eslint-disable-next-line react/display-name
+  forwardRef<HTMLAnchorElement, LinkProps>((props: LinkProps, ref): JSX.Element | null => {
     const {
       field,
       editable,
@@ -68,8 +70,10 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
     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 <ReactLink {...reactLinkProps} ref={ref} />;
-  }
+  })
 );
 
 Link.defaultProps = {

packages/sitecore-jss-nextjs/src/components/NextImage.test.tsx

@@ -252,7 +252,10 @@ describe('<NextImage />', () => {
   describe('error cases', () => {
     const src = '/assets/img/test0.png';
     it('should throw an error if src is present', () => {
-      expect(() => mount(<NextImage src={src} />)).to.throw(
+      const field = {
+        src: '/assets/img/test0.png',
+      };
+      expect(() => mount(<NextImage src={src} field={field} />)).to.throw(
         'Detected src prop. If you wish to use src, use next/image directly.'
       );
     });
@@ -283,4 +286,31 @@ describe('<NextImage />', () => {
       );
     });
   });
+
+  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' },
+      metadata: testMetadata,
+    };
+
+    const rendered = mount(<NextImage field={field} fill={true} />);
+
+    expect(rendered.find('code')).to.have.length(2);
+    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));
+  });
 });

packages/sitecore-jss-nextjs/src/components/NextImage.tsx

@@ -1,92 +1,86 @@
 import { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 import {
   getEEMarkup,
   ImageProps,
   ImageField,
   ImageFieldValue,
+  withFieldMetadata,
 } from '@sitecore-jss/sitecore-jss-react';
 import Image, { ImageProps as NextImageProperties } from 'next/image';
 
 type NextImageProps = Omit<ImageProps, 'media'> & Partial<NextImageProperties>;
 
-export const NextImage: React.FC<NextImageProps> = ({
-  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;
+export const NextImage: React.FC<NextImageProps> = withFieldMetadata(
+  ({ 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 <Image alt="" {...imageProps} />;
+    }
+
+    return null; // we can't handle the truth
   }
-
-  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 <Image alt="" {...imageProps} />;
-  }
-
-  return null; // we can't handle the truth
-};
+);
 
 NextImage.propTypes = {
   field: PropTypes.oneOfType([

packages/sitecore-jss-nextjs/src/components/RichText.test.tsx

@@ -379,4 +379,50 @@ 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: `
+        <div id="test">
+          <h1>Hello!</h1>
+          <a href="/t10">1</a>
+          <a href="/t10">2</a>
+          <a href="/contains-children"><span id="child">Title</span></a>
+        </div>`,
+        metadata: testMetadata,
+      },
+    };
+
+    const rendered = mount(
+      <Page value={router}>
+        <RichText {...props} prefetchLinks={false} />
+      </Page>,
+      { attachTo: app }
+    );
+
+    expect(rendered.find('code')).to.have.length(2);
+    expect(rendered.html()).to.contain('<div id="test">');
+    expect(rendered.html()).to.contain('kind="open"');
+    expect(rendered.html()).to.contain('kind="close"');
+    expect(rendered.html()).to.contain(JSON.stringify(testMetadata));
+  });
 });