[NextJS] Fix for bug in RichText component - links not reinitialised when content changes

CHANGELOG.md

@@ -63,6 +63,7 @@ Our versioning strategy is as follows:
 * `[templates/nextjs-sxa]` Add condition DISABLE_SSG_FETCH for 404/500 pages to enable full ISR (Incremental Static Regeneration) flow ([#1496](https://github.com/Sitecore/jss/pull/1496))
 * `[templates/nextjs-sxa]` Fix class .indent for component which have column size 12 ([#1505](https://github.com/Sitecore/jss/pull/1505))
 * `[templates/nextjs-sxa]` Fix type(from Text to RichText) of editing text in value Text2 for Promo Component in WithText variant ([#1504](https://github.com/Sitecore/jss/pull/1504)).
+* `[sitecore-jss-nextjs]` Fix RichText component to re-initialize links when content changes ([#1503](https://github.com/Sitecore/jss/pull/1503))
 
 ## 21.1.6
 

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

@@ -19,6 +19,7 @@ const Router = (): NextRouter => ({
   basePath: '',
   isLocaleDomain: false,
   isFallback: false,
+  forward: spy(),
   isPreview: false,
   isReady: false,
   events: { emit: spy(), off: spy(), on: spy() },
@@ -71,8 +72,8 @@ describe('RichText', () => {
     const link1 = links && links[0];
     const link2 = links && links[1];
 
-    expect(link1!.href).to.equal('/t10');
-    expect(link2!.href).to.equal('/t10');
+    expect(link1!.pathname).to.equal('/t10');
+    expect(link2!.pathname).to.equal('/t10');
 
     link1 && link1.click();
 
@@ -87,6 +88,96 @@ describe('RichText', () => {
     document.body.removeChild(app);
   });
 
+  it('should re-initialize links when the re-mounting with different content', () => {
+    const app = document.createElement('main');
+
+    document.body.appendChild(app);
+
+    const router = Router();
+
+    const props = {
+      field: {
+        value: '<div id="test"><h1>Hello!</h1><a href="/t100">1</a><a href="/t100">2</a></div>',
+      },
+    };
+
+    const props2 = {
+      field: {
+        value: '<div id="test"><h1>Hello!</h1><a href="/t20">1</a><a href="/t20">2</a></div>',
+      },
+    };
+
+    const initialMountedComponent = mount(
+      <Page value={router}>
+        <RichText {...props} />
+      </Page>,
+      { attachTo: app }
+    );
+
+    expect(initialMountedComponent.html()).contains('<div id="test">');
+    expect(initialMountedComponent.html()).contains('<h1>Hello!</h1>');
+    expect(initialMountedComponent.html()).contains('<a href="/t100">1</a>');
+    expect(initialMountedComponent.html()).contains('<a href="/t100">2</a>');
+
+    expect(router.prefetch).callCount(1);
+
+    const main = document.querySelector('main');
+
+    const links = main && main.querySelectorAll('a');
+
+    const link1 = links && links[0];
+    const link2 = links && links[1];
+
+    expect(link1!.pathname).to.equal('/t100');
+    expect(link2!.pathname).to.equal('/t100');
+
+    link1 && link1.click();
+
+    expect(router.push).callCount(1);
+
+    link2 && link2.click();
+
+    expect(router.push).callCount(2);
+
+    expect(initialMountedComponent.find(ReactRichText).length).to.equal(1);
+
+    initialMountedComponent.unmount();
+
+    const remountedComponent = mount(
+      <Page value={router}>
+        <RichText {...props2} />
+      </Page>,
+      { attachTo: app }
+    );
+
+    expect(remountedComponent.html()).contains('<div id="test">');
+    expect(remountedComponent.html()).contains('<h1>Hello!</h1>');
+    expect(remountedComponent.html()).contains('<a href="/t20">1</a>');
+    expect(remountedComponent.html()).contains('<a href="/t20">2</a>');
+
+    expect(router.prefetch).callCount(2);
+
+    const links2 = main && main.querySelectorAll('a');
+
+    const link3 = links2 && links2[0];
+    const link4 = links2 && links2[1];
+
+    expect(link3!.pathname).to.equal('/t20');
+    expect(link4!.pathname).to.equal('/t20');
+
+    link3 && link3.click();
+
+    expect(router.push).callCount(3);
+
+    link4 && link4.click();
+
+    expect(router.push).callCount(4);
+
+    expect(remountedComponent.find(ReactRichText).length).to.equal(1);
+
+    document.body.removeChild(app);
+  });
+
   it('should initialize links using internalLinksSelector', () => {
     const app = document.createElement('main');
 
@@ -112,15 +203,15 @@ describe('RichText', () => {
     expect(c.html()).contains('<div id="test">');
     expect(c.html()).contains('<h1>Hello!</h1>');
 
-    const main = document.querySelector('main');
+    expect(router.prefetch).callCount(1);
 
+    const main = document.querySelector('main');
     const links = main && main.querySelectorAll('a');
-
     const link1 = links && links[0];
     const link2 = links && links[1];
 
-    expect(link1!.href).to.equal('/testpath/t1?test=sample1');
-    expect(link2!.href).to.equal('/t2');
+    expect(link1!.href).to.endWith('/testpath/t1?test=sample1');
+    expect(link2!.pathname).to.equal('/t2');
 
     link1 && link1.click();
 

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

@@ -30,7 +30,7 @@ export const RichText = (props: RichTextProps): JSX.Element => {
     if (hasText && !isEditing) {
       initializeLinks();
     }
-  }, []);
+  }, [hasText]);
 
   const routeHandler = (ev: MouseEvent) => {
     if (!ev.target) return;

packages/sitecore-jss-nextjs/src/tests/jsdom-setup.ts

@@ -9,7 +9,9 @@ declare var global: NodeJS.Global;
 
 const { JSDOM } = require('jsdom');
 
-const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
+const jsdom = new JSDOM('<!doctype html><html><body></body></html>', {
+  url: 'https://example.com/',
+});
 const jsDomWindow = jsdom.window;
 
 /**