[Angular][Editing Integration] Render clientScripts / clientData

CHANGELOG.md

@@ -55,6 +55,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]` GenericFieldValue model is updated to accept Date type ([#1916](https://github.com/Sitecore/jss/pull/1916))
 
 ### 🛠 Breaking Change

docs/upgrades/unreleased.md

@@ -175,6 +175,12 @@ If you plan to use the Angular SDK with XMCloud, you will need to perform next s
     });
     ```
 
+* Make sure to render new `sc-editing-scripts` component (exposed by JssModule) in your Layout, since it's required for the editing integration:
+
+    ```html
+    <sc-editing-scripts></sc-editing-scripts>
+    ```
+
 # @sitecore-jss/sitecore-jss-proxy
 
 * Update the import statement

packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/scripts.component.html

@@ -0,0 +1,3 @@
+<ng-container>
+  <sc-editing-scripts></sc-editing-scripts>
+</ng-container>

packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/routing/scripts/scripts.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { ScriptsComponent } from './scripts.component';
+import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
+
+@NgModule({
+  exports: [ScriptsComponent],
+  imports: [JssModule],
+  declarations: [ScriptsComponent],
+})
+export class ScriptsModule {}

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

@@ -0,0 +1,149 @@
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { Component, Renderer2 } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { EditMode, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
+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';
+
+@Component({
+  selector: 'test-component',
+  template: `
+    <sc-editing-scripts></sc-editing-scripts>
+  `,
+})
+class TestComponent {}
+
+fdescribe('<EditingScripts />', () => {
+  let fixture: ComponentFixture<TestComponent>;
+
+  const sharedData = {
+    clientScripts: [
+      'https://test.com/packages/page-extension/latest/page.js',
+      'https://test.com/horizon/canvas/horizon.canvas.js',
+    ],
+    clientData: {
+      'hrz-canvas-state': {
+        itemId: '1329a009-1b93-4855-8855-894bc40d7135',
+        siteName: 'jss',
+        language: 'en',
+      },
+      'hrz-canvas-verification-token': {
+        token: 'test',
+      },
+    },
+  };
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TestComponent, EditingScriptsComponent],
+      providers: [
+        Renderer2,
+        JssStateService,
+        { provide: DOCUMENT, useValue: document.implementation.createHTMLDocument() },
+      ],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestComponent);
+  });
+
+  it('should not add editing scripts and client data when edit mode is Chromes', inject(
+    [JssStateService, DOCUMENT],
+    (stateService: JssStateService, _document: Document) => {
+      stateService.setState({
+        sitecore: {
+          context: {
+            editMode: EditMode.Chromes,
+            pageState: LayoutServicePageState.Edit,
+            ...sharedData,
+          },
+          route: null,
+        },
+      });
+
+      fixture.detectChanges();
+
+      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 not add editing scripts and client data when page state is Normal', inject(
+    [JssStateService, DOCUMENT],
+    (stateService: JssStateService, _document: Document) => {
+      stateService.setState({
+        sitecore: {
+          context: {
+            editMode: EditMode.Metadata,
+            pageState: LayoutServicePageState.Normal,
+            ...sharedData,
+          },
+          route: null,
+        },
+      });
+
+      fixture.detectChanges();
+
+      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) => {
+      stateService.setState({
+        sitecore: {
+          context: {
+            editMode: EditMode.Metadata,
+            pageState: LayoutServicePageState.Edit,
+            ...sharedData,
+          },
+          route: null,
+        },
+      });
+
+      fixture.detectChanges();
+
+      expect(_document.body.querySelector(`#${PAGES_EDITING_MARKER}`)).toBeDefined();
+      expect(_document.body.querySelector('#hrz-canvas-state')?.innerHTML).toEqual(
+        '{"itemId":"1329a009-1b93-4855-8855-894bc40d7135","siteName":"jss","language":"en"}'
+      );
+      expect(_document.body.querySelector('#hrz-canvas-verification-token')?.innerHTML).toEqual(
+        '{"token":"test"}'
+      );
+      expect(
+        _document.body.querySelector(
+          'script[src="https://test.com/packages/page-extension/latest/page.js"]'
+        )
+      ).toBeTruthy();
+      expect(
+        _document.body.querySelector(
+          'script[src="https://test.com/horizon/canvas/horizon.canvas.js"]'
+        )
+      ).toBeTruthy();
+    }
+  ));
+});

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

@@ -0,0 +1,46 @@
+import { Component, OnInit, Renderer2, Inject } from '@angular/core';
+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';
+
+/**
+ * Component that renders editing scripts and client data for the current page in Sitecore Editor.
+ * Only renders scripts when Metadata mode is used.
+ */
+@Component({
+  selector: 'sc-editing-scripts',
+  template: '',
+})
+export class EditingScriptsComponent implements OnInit {
+  constructor(
+    private renderer: Renderer2,
+    private stateService: JssStateService,
+    @Inject(DOCUMENT) private document: Document
+  ) {}
+
+  ngOnInit(): void {
+    const state = this.stateService.stateValue;
+    const { pageState, editMode, clientData, clientScripts } = state.sitecore?.context || {};
+
+    // Don't render anything if not in editing/preview mode
+    if (pageState === LayoutServicePageState.Normal) return;
+
+    if (editMode === EditMode.Metadata) {
+      const jssClientData = { ...clientData, ...getJssPagesClientData() };
+      clientScripts?.forEach((src: string) => {
+        const scriptElement = this.renderer.createElement('script');
+        scriptElement.src = src;
+        this.renderer.appendChild(this.document.body, scriptElement);
+      });
+
+      Object.keys(jssClientData).forEach((id: string) => {
+        const scriptElement = this.renderer.createElement('script');
+        scriptElement.id = id;
+        scriptElement.type = 'application/json';
+        scriptElement.innerHTML = JSON.stringify((jssClientData as any)[id]);
+        this.renderer.appendChild(this.document.body, scriptElement);
+      });
+    }
+  }
+}

packages/sitecore-jss-angular/src/lib.module.ts

@@ -33,6 +33,7 @@ import { RouterLinkDirective } from './components/router-link.directive';
 import { TextDirective } from './components/text.directive';
 import { JssComponentFactoryService } from './services/jss-component-factory.service';
 import { JssStateService } from './services/jss-state.service';
+import { EditingScriptsComponent } from './components/editing-scripts.component';
 
 @NgModule({
   imports: [CommonModule],
@@ -54,6 +55,7 @@ import { JssStateService } from './services/jss-state.service';
     MissingComponentComponent,
     HiddenRenderingComponent,
     EditFrameComponent,
+    EditingScriptsComponent,
   ],
   exports: [
     FileDirective,
@@ -71,6 +73,7 @@ import { JssStateService } from './services/jss-state.service';
     RichTextDirective,
     TextDirective,
     EditFrameComponent,
+    EditingScriptsComponent,
   ],
 })
 export class JssModule {

packages/sitecore-jss-angular/src/public_api.ts

@@ -10,6 +10,7 @@ export { RenderEmptyDirective } from './components/render-empty.directive';
 export { RenderComponentComponent } from './components/render-component.component';
 export { DateDirective } from './components/date.directive';
 export { EditFrameComponent } from './components/editframe.component';
+export { EditingScriptsComponent } from './components/editing-scripts.component';
 export {
   ComponentNameAndType,
   DYNAMIC_COMPONENT,