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

CHANGELOG.md

@@ -58,6 +58,7 @@ Our versioning strategy is as follows:
 * `[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))
 * `[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))
 
 ### 🛠 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.spec.ts

@@ -45,7 +45,6 @@ class TestEmptyTemplateComponent {
 describe('<span *scTestBase />', () => {
   let fixture: ComponentFixture<TestComponent>;
   let de: DebugElement;
-  let deSpan: DebugElement;
   let comp: TestComponent;
 
   beforeEach(() => {
@@ -57,7 +56,6 @@ describe('<span *scTestBase />', () => {
     fixture.detectChanges();
 
     de = fixture.debugElement;
-    deSpan = de.query(By.css('span'));
     comp = fixture.componentInstance;
   });
 
@@ -69,7 +67,7 @@ describe('<span *scTestBase />', () => {
       comp.field = field;
       fixture.detectChanges();
 
-      const rendered = deSpan.nativeElement.innerHTML;
+      const rendered = de.query(By.css('span')).nativeElement.innerHTML;
       expect(rendered).toBe('value');
     });
 
@@ -81,7 +79,7 @@ describe('<span *scTestBase />', () => {
       comp.field = field;
       fixture.detectChanges();
 
-      const rendered = deSpan.nativeElement.innerHTML;
+      const rendered = de.query(By.css('span')).nativeElement.innerHTML;
       expect(rendered).toBe(field.editable);
     });
 
@@ -92,8 +90,8 @@ describe('<span *scTestBase />', () => {
       comp.field = field;
       fixture.detectChanges();
 
-      const rendered = deSpan.nativeElement.innerHTML;
-      expect(rendered).toBe('');
+      const spanElement = de.query(By.css('span'));
+      expect(spanElement).toBeNull();
     });
   });
 
@@ -118,7 +116,7 @@ describe('<span *scTestBase />', () => {
       comp.field = field;
       fixture.detectChanges();
 
-      const rendered = deSpan.nativeElement.innerHTML;
+      const rendered = de.query(By.css('span')).nativeElement.innerHTML;
       expect(rendered).toBe('value');
     });
 
@@ -162,8 +160,95 @@ describe('<span *scTestBase />', () => {
         comp.editable = false;
         fixture.detectChanges();
 
-        const rendered = deSpan.nativeElement.innerHTML;
-        expect(rendered).toBe('');
+        const spanElement = de.query(By.css('span'));
+        expect(spanElement).toBeNull();
+      });
+    });
+
+    describe('with "metadata" property value', () => {
+      describe('and editing enabled', () => {
+        it('should render <img /> with metadata chrome tags', () => {
+          const field = {
+            metadata: testMetadata,
+            value: 'value',
+          };
+          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.outerHTML).toEqual(
+            `<code scfieldmetadatamarker="" type="text/sitecore" chrometype="field" kind="open" class="scpm">${JSON.stringify(
+              testMetadata
+            )}</code>`
+          );
+          expect(metadataCloseTag.outerHTML).toEqual(
+            '<code scfieldmetadatamarker="" type="text/sitecore" chrometype="field" kind="close" class="scpm"></code>'
+          );
+        });
+
+        it('should render empty field with metadata chrome tags', () => {
+          const field = {
+            metadata: testMetadata,
+            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.outerHTML).toEqual(
+            `<code scfieldmetadatamarker="" type="text/sitecore" chrometype="field" kind="open" class="scpm">${JSON.stringify(
+              testMetadata
+            )}</code>`
+          );
+          expect(metadataCloseTag.outerHTML).toEqual(
+            '<code scfieldmetadatamarker="" type="text/sitecore" chrometype="field" kind="close" class="scpm"></code>'
+          );
+        });
+      });
+
+      describe('and editing disabled', () => {
+        it('should render <img /> without metadata chrome tags', () => {
+          const field = {
+            metadata: testMetadata,
+            value: 'value',
+          };
+          comp.editable = false;
+          comp.field = field;
+          fixture.detectChanges();
+
+          const fieldEl = de.query(By.css('span'));
+          const metadataOpenTag = fieldEl.nativeElement.previousElementSibling;
+          const metadataCloseTag = fieldEl.nativeElement.nextElementSibling;
+
+          expect(metadataOpenTag).toBeNull();
+          expect(metadataCloseTag).toBeNull();
+        });
+      });
+    });
+
+    describe('without "metadata" property value', () => {
+      it('should render <img /> without metadata chrome tags', () => {
+        const field = {
+          value: 'value',
+        };
+        comp.editable = true;
+        comp.field = field;
+        fixture.detectChanges();
+
+        const fieldEl = de.query(By.css('span'));
+        const metadataOpenTag = fieldEl.nativeElement.previousElementSibling;
+        const metadataCloseTag = fieldEl.nativeElement.nextElementSibling;
+
+        expect(metadataOpenTag).toBeNull();
+        expect(metadataCloseTag).toBeNull();
       });
     });
   });

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

@@ -1,6 +1,8 @@
 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';
+import { MetadataKind } from '@sitecore-jss/sitecore-jss/editing';
 
 /**
  * Base class that contains common functionality for the field directives.
@@ -34,12 +36,27 @@ export abstract class BaseFieldDirective {
    */
   protected renderEmpty() {
     if (this.field?.metadata && this.editable) {
+      this.renderMetadata(MetadataKind.Open);
       if (this.emptyFieldEditingTemplate) {
         this.viewContainer.createEmbeddedView(this.emptyFieldEditingTemplate);
       } else {
-        this.viewContainer.clear();
         this.viewContainer.createComponent(this.defaultFieldEditingComponent);
       }
+      this.renderMetadata(MetadataKind.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 renderMetadata(kind: MetadataKind) {
+    if (this.field?.metadata && this.editable) {
+      const metadataChrome = this.viewContainer.createComponent(FieldMetadataMarkerComponent);
+      metadataChrome.setInput('kind', kind);
+      if (kind === MetadataKind.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,91 @@ 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 editing 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.outerHTML).toEqual(
+            '<code scfieldmetadatamarker="" type="text/sitecore" chrometype="field" kind="open" class="scpm">{"foo":"bar"}</code>'
+          );
+          expect(metadataCloseTag.outerHTML).toEqual(
+            '<code scfieldmetadatamarker="" type="text/sitecore" chrometype="field" kind="close" class="scpm"></code>'
+          );
+        });
+
+        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.outerHTML).toEqual(
+            '<code scfieldmetadatamarker="" type="text/sitecore" chrometype="field" kind="open" class="scpm">{"foo":"bar"}</code>'
+          );
+          expect(metadataCloseTag.outerHTML).toEqual(
+            '<code scfieldmetadatamarker="" type="text/sitecore" chrometype="field" kind="close" class="scpm"></code>'
+          );
+        });
+      });
+
+      describe('and editing 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();
+      });
     });
   });
 });