[sitecore-jss] [sitecore-jss-angular] Field metadata chromes in editMode metadata

CHANGELOG.md

@@ -57,6 +57,7 @@ Our versioning strategy is as follows:
    - `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))
+* `[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))
 
 ### 🛠 Breaking Change
 

packages/sitecore-jss-angular/package.json

@@ -6,7 +6,7 @@
     "build": "ng-packagr -p ng-package.json",
     "lint": "eslint \"./src/**/*.ts\"",
     "test": "ng test",
-    "test:watch": "ng test --no-single-run --browsers Chrome",
+    "test:watch": "ng test --watch --browsers Chrome",
     "coverage": "ng test --code-coverage",
     "generate-docs": "npx typedoc --plugin typedoc-plugin-markdown --readme none --out ../../ref-docs/sitecore-jss-angular src/public_api.ts --githubPages false"
   },

packages/sitecore-jss-angular/src/components/base-field.directive.ts

@@ -1,6 +1,7 @@
 import { Directive, Type, ViewContainerRef, EmbeddedViewRef, TemplateRef } from '@angular/core';
 import { RenderingField } from './rendering-field';
 import { GenericFieldValue, isFieldValueEmpty } from '@sitecore-jss/sitecore-jss/layout';
+import { FieldMetadataMarkerComponent } from './field-metadata-marker.component';
 
 /**
  * Base class that contains common functionality for the field directives.
@@ -34,12 +35,27 @@ export abstract class BaseFieldDirective {
    */
   protected renderEmpty() {
     if (this.field?.metadata && this.editable) {
+      this.renderMetadataTag('open');
       if (this.emptyFieldEditingTemplate) {
         this.viewContainer.createEmbeddedView(this.emptyFieldEditingTemplate);
       } else {
-        this.viewContainer.clear();
         this.viewContainer.createComponent(this.defaultFieldEditingComponent);
       }
+      this.renderMetadataTag('close');
+    }
+  }
+
+  /**
+   * Renders a metadata chrome marker for the field. Required by Pages in editMode 'metadata'.
+   * @param {string} kind - 'open' or 'close' to indicate the start or end of the metadata chrome
+   */
+  protected renderMetadataTag(kind: 'open' | 'close') {
+    if (this.field?.metadata && this.editable) {
+      const metadataChrome = this.viewContainer.createComponent(FieldMetadataMarkerComponent);
+      metadataChrome.setInput('kind', kind);
+      if (kind === 'open') {
+        metadataChrome.setInput('metadata', this.field.metadata);
+      }
     }
   }
 }

packages/sitecore-jss-angular/src/components/date.directive.spec.ts

@@ -61,7 +61,6 @@ class TestEmptyTemplateComponent {
 describe('<span *scDate />', () => {
   let fixture: ComponentFixture<TestComponent>;
   let de: DebugElement;
-  let deSpan: DebugElement;
   let comp: TestComponent;
 
   beforeEach(() => {
@@ -74,22 +73,21 @@ describe('<span *scDate />', () => {
     fixture.detectChanges();
 
     de = fixture.debugElement;
-    deSpan = de.query(By.css('span'));
     comp = fixture.componentInstance;
   });
 
   it('should render nothing with missing field', () => {
-    const rendered = deSpan.nativeElement.innerHTML;
-    expect(rendered).toBe('');
+    const span = de.query(By.css('span'));
+    expect(span).toBeNull();
   });
 
   it('should render nothing with missing editable and value', () => {
     const field = {};
     comp.field = field;
     fixture.detectChanges();
 
-    const rendered = deSpan.nativeElement.innerHTML;
-    expect(rendered).toBe('');
+    const span = de.query(By.css('span'));
+    expect(span).toBeNull();
   });
 
   it('should render editable with editable value', () => {
@@ -100,7 +98,7 @@ describe('<span *scDate />', () => {
 
     comp.field = field;
     fixture.detectChanges();
-    const rendered = deSpan.nativeElement.innerHTML;
+    const rendered = de.query(By.css('span')).nativeElement.innerHTML;
     expect(rendered).toBe('editable');
   });
 
@@ -113,7 +111,7 @@ describe('<span *scDate />', () => {
     comp.editable = false;
     fixture.detectChanges();
 
-    const rendered = deSpan.nativeElement.innerHTML;
+    const rendered = de.query(By.css('span')).nativeElement.innerHTML;
     expect(rendered).toBe(defaultFormattedDate);
   });
 
@@ -124,7 +122,7 @@ describe('<span *scDate />', () => {
     comp.field = field;
     fixture.detectChanges();
 
-    const rendered = deSpan.nativeElement.innerHTML;
+    const rendered = de.query(By.css('span')).nativeElement.innerHTML;
     expect(rendered).toBe(defaultFormattedDate);
   });
 
@@ -135,7 +133,7 @@ describe('<span *scDate />', () => {
     comp.field = field;
     fixture.detectChanges();
 
-    const rendered = deSpan.nativeElement.innerHTML;
+    const rendered = de.query(By.css('span')).nativeElement.innerHTML;
     expect(rendered).toContain('<input');
     expect(rendered).toContain('<span class="scChromeData">');
   });
@@ -222,8 +220,101 @@ describe('<span *scDate />', () => {
       comp.editable = false;
       fixture.detectChanges();
 
-      const rendered = deSpan.nativeElement.innerHTML;
-      expect(rendered).toBe('');
+      const span = de.query(By.css('span'));
+      expect(span).toBeNull();
+    });
+
+    describe('with "metadata" property value', () => {
+      describe('and edtiging enabled', () => {
+        it('should render <img /> with metadata chrome tags', () => {
+          const field = {
+            metadata: { foo: 'bar' },
+            value: testIsoDateValue,
+          };
+          comp.editable = true;
+          comp.field = field;
+          fixture.detectChanges();
+
+          const fieldValue = de.query(By.css('span'));
+          const metadataOpenTag = fieldValue.nativeElement.previousElementSibling;
+          const metadataCloseTag = fieldValue.nativeElement.nextElementSibling;
+
+          expect(metadataOpenTag).toBeDefined();
+          expect(metadataOpenTag?.tagName).toEqual('CODE');
+          expect(metadataOpenTag?.getAttribute('kind')).toEqual('open');
+          expect(metadataOpenTag?.getAttribute('chrometype')).toEqual('field');
+
+          expect(metadataOpenTag?.textContent).toContain(JSON.stringify(field.metadata));
+
+          expect(metadataCloseTag).toBeDefined();
+          expect(metadataCloseTag?.tagName).toEqual('CODE');
+          expect(metadataOpenTag?.getAttribute('chrometype')).toEqual('field');
+          expect(metadataCloseTag?.getAttribute('kind')).toEqual('close');
+        });
+
+        it('should render empty field with metadata chrome tags', () => {
+          const field = {
+            metadata: { foo: 'bar' },
+            value: '',
+          };
+          comp.editable = true;
+          comp.field = field;
+          fixture.detectChanges();
+
+          const fieldValue = de.query(By.css('sc-default-empty-text-field-editing-placeholder'));
+          const metadataOpenTag = fieldValue.nativeElement.previousElementSibling;
+          const metadataCloseTag = fieldValue.nativeElement.nextElementSibling;
+
+          expect(metadataOpenTag).toBeDefined();
+          expect(metadataOpenTag?.tagName).toEqual('CODE');
+          expect(metadataOpenTag?.getAttribute('kind')).toEqual('open');
+          expect(metadataOpenTag?.getAttribute('chrometype')).toEqual('field');
+
+          expect(metadataOpenTag?.textContent).toContain(JSON.stringify(field.metadata));
+
+          expect(metadataCloseTag).toBeDefined();
+          expect(metadataCloseTag?.tagName).toEqual('CODE');
+          expect(metadataOpenTag?.getAttribute('chrometype')).toEqual('field');
+          expect(metadataCloseTag?.getAttribute('kind')).toEqual('close');
+        });
+      });
+
+      describe('and edtiging disabled', () => {
+        it('should render <img /> without metadata chrome tags', () => {
+          const field = {
+            metadata: { foo: 'bar' },
+            value: testIsoDateValue,
+          };
+          comp.editable = false;
+          comp.field = field;
+          fixture.detectChanges();
+
+          const dateField = de.query(By.css('span'));
+          const metadataOpenTag = dateField.nativeElement.previousElementSibling;
+          const metadataCloseTag = dateField.nativeElement.nextElementSibling;
+
+          expect(metadataOpenTag).toBeNull();
+          expect(metadataCloseTag).toBeNull();
+        });
+      });
+    });
+
+    describe('without "metadata" property value', () => {
+      it('should render <img /> without metadata chrome tags', () => {
+        const field = {
+          value: testIsoDateValue,
+        };
+        comp.editable = true;
+        comp.field = field;
+        fixture.detectChanges();
+
+        const dateField = de.query(By.css('span'));
+        const metadataOpenTag = dateField.nativeElement.previousElementSibling;
+        const metadataCloseTag = dateField.nativeElement.nextElementSibling;
+
+        expect(metadataOpenTag).toBeNull();
+        expect(metadataCloseTag).toBeNull();
+      });
     });
   });
 });

packages/sitecore-jss-angular/src/components/date.directive.ts

@@ -47,11 +47,7 @@ export class DateDirective extends BaseFieldDirective implements OnChanges {
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes.field || changes.format) {
-      if (!this.viewRef) {
-        this.viewContainer.clear();
-        this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
-      }
-
+      this.viewContainer.clear();
       this.updateView();
     }
   }
@@ -62,11 +58,14 @@ export class DateDirective extends BaseFieldDirective implements OnChanges {
       return;
     }
 
+    this.renderMetadataTag('open');
+    this.viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
+    this.renderMetadataTag('close');
+
     const field = this.field;
 
     const html = field.editable && this.editable ? field.editable : field.value;
     const setDangerously = field.editable && this.editable;
-
     this.viewRef.rootNodes.forEach((node) => {
       if (setDangerously) {
         node.innerHTML = html;

packages/sitecore-jss-angular/src/components/field-metadata-marker.component.spec.ts

@@ -0,0 +1,64 @@
+import { Component, DebugElement, Input } from '@angular/core';
+import { FieldMetadataMarkerComponent } from './field-metadata-marker.component';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+@Component({
+  selector: 'test-marker',
+  template: `
+    <code scFieldMetadataMarker [metadata]="metadata" [kind]="kind"></code>
+  `,
+})
+class TestComponent {
+  @Input() metadata: any;
+  @Input() kind: 'open' | 'close' = 'open';
+}
+
+describe('<code scFieldMetadataMarker />', () => {
+  let fixture: ComponentFixture<TestComponent>;
+  let de: DebugElement;
+  let comp: TestComponent;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [FieldMetadataMarkerComponent, TestComponent],
+    });
+
+    fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+
+    de = fixture.debugElement;
+    comp = fixture.componentInstance;
+  });
+
+  it('should render code element with metadata', () => {
+    const rendered = de.query(By.css('code')).nativeElement;
+    expect(rendered).not.toBeNull();
+    expect(rendered.getAttribute('type')).toBe('text/sitecore');
+    expect(rendered.getAttribute('chrometype')).toBe('field');
+  });
+
+  it('should render a kind attribute with "open" value', () => {
+    comp.kind = 'open';
+    fixture.detectChanges();
+
+    const rendered = de.query(By.css('code')).nativeElement;
+    expect(rendered.getAttribute('kind')).toBe('open');
+  });
+
+  it('should render a kind attribute with "close" value', () => {
+    comp.kind = 'close';
+    fixture.detectChanges();
+
+    const rendered = de.query(By.css('code')).nativeElement;
+    expect(rendered.getAttribute('kind')).toBe('close');
+  });
+
+  it('should add metadata as content of code element', () => {
+    comp.metadata = { key: 'value' };
+    fixture.detectChanges();
+
+    const rendered = de.query(By.css('code')).nativeElement as HTMLElement;
+    expect(rendered.textContent).toBe(JSON.stringify(comp.metadata));
+  });
+});

packages/sitecore-jss-angular/src/components/field-metadata-marker.component.ts

@@ -0,0 +1,27 @@
+import { Component, HostBinding, Input } from '@angular/core';
+
+/**
+ * Component that renders a field' metadata chrome element.
+ */
+@Component({
+  selector: 'code[scFieldMetadataMarker]',
+  template: '{{ metadataString }}',
+  // eslint-disable-next-line @angular-eslint/no-host-metadata-property -- the only way to set static attributes
+  host: {
+    '[attr.type]': '"text/sitecore"',
+    '[attr.chrometype]': '"field"',
+    '[class]': '"scpm"',
+  },
+})
+export class FieldMetadataMarkerComponent {
+  @Input()
+  metadata?: any;
+
+  get metadataString(): string {
+    return this.metadata ? JSON.stringify(this.metadata) : '';
+  }
+
+  @HostBinding('attr.kind')
+  @Input()
+  kind: 'open' | 'close' = 'open';
+}