[sitecore-jss-angular] Fix Editing Scripts component rendered twice in pages

CHANGELOG.md

@@ -61,7 +61,7 @@ Our versioning strategy is as follows:
    - `scRichTextEmptyFieldEditingTemplate` for _scRichText_
    - `scRouterLinkEmptyFieldEditingTemplate` for _scRouterLink_
    - `scTextEmptyFieldEditingTemplate` for _scText_
-* `[sitecore-jss-angular]` `[templates/angular-xmcloud]` Render clientScripts / clientData. The new `sc-editing-scripts` component is exposed from `sitecore-jss-angular` package and required to be rendered on the page to enable Metadata Edit mode. ([#1924](https://github.com/Sitecore/jss/pull/1924))
+* `[sitecore-jss-angular]` `[templates/angular-xmcloud]` Render clientScripts / clientData. The new `sc-editing-scripts` component is exposed from `sitecore-jss-angular` package and required to be rendered on the page to enable Metadata Edit mode. ([#1924](https://github.com/Sitecore/jss/pull/1924))([#1948](https://github.com/Sitecore/jss/pull/1948))
 * `[sitecore-jss]` GenericFieldValue model is updated to accept Date type ([#1916](https://github.com/Sitecore/jss/pull/1916))
 * `[template/node-xmcloud-proxy]` `[sitecore-jss-proxy]` Introduced /api/healthz endpoint ([#1928](https://github.com/Sitecore/jss/pull/1928))
 * `[sitecore-jss]` `[sitecore-jss-angular]` Render field metdata chromes in editMode metadata - in edit mode metadata in Pages, angular package field directives will render wrapping `code` elements with field metadata required for editing; ([#1926](https://github.com/Sitecore/jss/pull/1926))

packages/sitecore-jss-angular/src/components/editing-scripts.component.spec.ts

@@ -6,6 +6,7 @@ import { PAGES_EDITING_MARKER } from '@sitecore-jss/sitecore-jss/editing';
 import { inject } from '@angular/core/testing';
 import { JssStateService } from '../services/jss-state.service';
 import { EditingScriptsComponent } from './editing-scripts.component';
+import * as utils from '@sitecore-jss/sitecore-jss/utils';
 
 @Component({
   selector: 'test-component',
@@ -35,6 +36,14 @@ describe('<EditingScripts />', () => {
     },
   };
 
+  beforeAll(() => {
+    jasmine.getEnv().allowRespy(true);
+  });
+
+  afterAll(() => {
+    jasmine.getEnv().allowRespy(false);
+  });
+
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [TestComponent, EditingScriptsComponent],
@@ -44,6 +53,7 @@ describe('<EditingScripts />', () => {
         { provide: DOCUMENT, useValue: document.implementation.createHTMLDocument() },
       ],
     }).compileComponents();
+    spyOnProperty(utils, 'isServer').and.returnValue(() => true);
     fixture = TestBed.createComponent(TestComponent);
   });
 
@@ -111,6 +121,42 @@ describe('<EditingScripts />', () => {
     }
   ));
 
+  it('should not add editing scripts and client data when edit mode is Metadata and rendering is not server side', inject(
+    [JssStateService, DOCUMENT],
+    (stateService: JssStateService, _document: Document) => {
+      stateService.setState({
+        sitecore: {
+          context: {
+            editMode: EditMode.Metadata,
+            pageState: LayoutServicePageState.Edit,
+            ...sharedData,
+          },
+          route: null,
+        },
+      });
+
+      spyOnProperty(utils, 'isServer').and.returnValue(() => false);
+
+      fixture.detectChanges();
+      // reset spy state
+      spyOnProperty(utils, 'isServer').and.returnValue(() => true);
+
+      expect(_document.body.querySelector(`#${PAGES_EDITING_MARKER}`)).toBeNull();
+      expect(_document.body.querySelector('#hrz-canvas-state')).toBeNull();
+      expect(_document.body.querySelector('#hrz-canvas-verification-token')).toBeNull();
+      expect(
+        _document.body.querySelector(
+          'script[src="https://test.com/packages/page-extension/latest/page.js"]'
+        )
+      ).toBeNull();
+      expect(
+        _document.body.querySelector(
+          'script[src="https://test.com/horizon/canvas/horizon.canvas.js"]'
+        )
+      ).toBeNull();
+    }
+  ));
+
   it('should add editing scripts and client data when edit mode is Metadata', inject(
     [JssStateService, DOCUMENT],
     (stateService: JssStateService, _document: Document) => {

packages/sitecore-jss-angular/src/components/editing-scripts.component.ts

@@ -3,6 +3,7 @@ import { getJssPagesClientData } from '@sitecore-jss/sitecore-jss/editing';
 import { JssStateService } from '../services/jss-state.service';
 import { DOCUMENT } from '@angular/common';
 import { EditMode, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
+import { isServer } from '@sitecore-jss/sitecore-jss/utils';
 
 /**
  * Component that renders editing scripts and client data for the current page in Sitecore Editor.
@@ -23,10 +24,11 @@ export class EditingScriptsComponent implements OnInit {
     const state = this.stateService.stateValue;
     const { pageState, editMode, clientData, clientScripts } = state.sitecore?.context || {};
 
-    // Don't render anything if not in editing mode
+    // Don't render anything if not in editing mode or not server side
     if (
       pageState === LayoutServicePageState.Normal ||
-      pageState === LayoutServicePageState.Preview
+      pageState === LayoutServicePageState.Preview ||
+      !isServer()
     ) {
       return;
     }