From c9c1dfdb21356e04a82832b7e2237d2cc83624af Mon Sep 17 00:00:00 2001 From: Addy Pathania Date: Mon, 30 Sep 2024 17:14:32 -0400 Subject: [PATCH 01/11] fix linkedList and image on Pages --- .../src/components/base-field.directive.ts | 51 +++++++++++++++++-- .../src/components/date.directive.ts | 8 ++- ...ext-field-editing-placeholder.component.ts | 2 +- .../src/components/image.directive.ts | 6 +-- .../src/components/link.directive.ts | 4 +- .../src/components/rich-text.directive.ts | 8 +-- .../src/components/text.directive.ts | 11 +++- 7 files changed, 74 insertions(+), 16 deletions(-) diff --git a/packages/sitecore-jss-angular/src/components/base-field.directive.ts b/packages/sitecore-jss-angular/src/components/base-field.directive.ts index a2d41d9d3d..3db55e1581 100644 --- a/packages/sitecore-jss-angular/src/components/base-field.directive.ts +++ b/packages/sitecore-jss-angular/src/components/base-field.directive.ts @@ -1,4 +1,12 @@ -import { Directive, Type, ViewContainerRef, EmbeddedViewRef, TemplateRef } from '@angular/core'; +import { + Directive, + Type, + ViewContainerRef, + EmbeddedViewRef, + TemplateRef, + Renderer2, + ElementRef, +} from '@angular/core'; import { RenderingField } from './rendering-field'; import { GenericFieldValue, isFieldValueEmpty } from '@sitecore-jss/sitecore-jss/layout'; import { FieldMetadataMarkerComponent } from './field-metadata-marker.component'; @@ -21,7 +29,11 @@ export abstract class BaseFieldDirective { */ protected abstract defaultFieldEditingComponent: Type; - constructor(protected viewContainer: ViewContainerRef) {} + constructor( + protected viewContainer: ViewContainerRef, + protected renderer: Renderer2, // Inject Renderer2 for DOM manipulation + protected elementRef: ElementRef + ) {} /** * Determines if directive should render the field as is @@ -40,7 +52,40 @@ export abstract class BaseFieldDirective { if (this.emptyFieldEditingTemplate) { this.viewContainer.createEmbeddedView(this.emptyFieldEditingTemplate); } else { - this.viewContainer.createComponent(this.defaultFieldEditingComponent); + if (this.field?.metadata?.fieldType === 'Image') { + const img = this.renderer.createElement('img'); + + // Set image attributes + this.renderer.setAttribute(img, 'alt', ''); + this.renderer.setAttribute( + img, + 'src', + 'data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23969696;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.75;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Crect class="st0" width="240" height="240"/%3E%3Cg%3E%3Cg%3E%3Crect x="20" y="20" class="st1" width="200" height="200"/%3E%3C/g%3E%3Cg%3E%3Ccircle class="st2" cx="174" cy="67" r="14"/%3E%3Cpath class="st2" d="M174,54c7.17,0,13,5.83,13,13s-5.83,13-13,13s-13-5.83-13-13S166.83,54,174,54 M174,52 c-8.28,0-15,6.72-15,15s6.72,15,15,15s15-6.72,15-15S182.28,52,174,52L174,52z"/%3E%3C/g%3E%3Cpolyline class="st3" points="29.5,179.25 81.32,122.25 95.41,137.75 137.23,91.75 209.5,179.75 "/%3E%3C/g%3E%3C/g%3E%3C/svg%3E' + ); + this.renderer.setAttribute(img, 'class', 'scEmptyImage'); + this.renderer.setStyle(img, 'min-width', '48px'); + this.renderer.setStyle(img, 'min-height', '48px'); + this.renderer.setStyle(img, 'max-width', '400px'); + this.renderer.setStyle(img, 'max-height', '400px'); + this.renderer.setStyle(img, 'cursor', 'pointer'); + + const parentNode = this.renderer.parentNode(this.elementRef.nativeElement); + if (parentNode) { + this.renderer.insertBefore(parentNode, img, this.elementRef.nativeElement); + } + } else if ( + this.field?.metadata?.fieldType === 'General Link' || + this.field?.metadata?.fieldType === 'Single Line Text' + ) { + const span = this.renderer.createElement('span'); + + this.renderer.setAttribute(span, 'sc-default-empty-text-field-editing-placeholder', ''); + + const parentNode = this.renderer.parentNode(this.elementRef.nativeElement); + if (parentNode) { + this.renderer.insertBefore(parentNode, span, this.elementRef.nativeElement); + } + } } this.renderMetadata(MetadataKind.Close); } diff --git a/packages/sitecore-jss-angular/src/components/date.directive.ts b/packages/sitecore-jss-angular/src/components/date.directive.ts index 9d82cf8489..3eb45face5 100644 --- a/packages/sitecore-jss-angular/src/components/date.directive.ts +++ b/packages/sitecore-jss-angular/src/components/date.directive.ts @@ -1,8 +1,10 @@ import { DatePipe } from '@angular/common'; import { Directive, + ElementRef, Input, OnChanges, + Renderer2, SimpleChanges, TemplateRef, Type, @@ -40,9 +42,11 @@ export class DateDirective extends BaseFieldDirective implements OnChanges { constructor( viewContainer: ViewContainerRef, private templateRef: TemplateRef, - private datePipe: DatePipe + private datePipe: DatePipe, + protected renderer: Renderer2, + protected elementRef: ElementRef ) { - super(viewContainer); + super(viewContainer, renderer, elementRef); this.defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent; } diff --git a/packages/sitecore-jss-angular/src/components/default-empty-text-field-editing-placeholder.component.ts b/packages/sitecore-jss-angular/src/components/default-empty-text-field-editing-placeholder.component.ts index 810415c75c..3ac61bd022 100644 --- a/packages/sitecore-jss-angular/src/components/default-empty-text-field-editing-placeholder.component.ts +++ b/packages/sitecore-jss-angular/src/components/default-empty-text-field-editing-placeholder.component.ts @@ -4,7 +4,7 @@ import { Component } from '@angular/core'; * Default component that will be rendered in pages when field is empty; applies for text, richtext, date and link fields. */ @Component({ - selector: 'sc-default-empty-text-field-editing-placeholder', + selector: '[sc-default-empty-text-field-editing-placeholder]', template: '[No text in field]', }) export class DefaultEmptyFieldEditingComponent {} diff --git a/packages/sitecore-jss-angular/src/components/image.directive.ts b/packages/sitecore-jss-angular/src/components/image.directive.ts index 085e274060..847a30d5bf 100644 --- a/packages/sitecore-jss-angular/src/components/image.directive.ts +++ b/packages/sitecore-jss-angular/src/components/image.directive.ts @@ -49,10 +49,10 @@ export class ImageDirective extends BaseFieldDirective implements OnChanges { constructor( viewContainer: ViewContainerRef, private templateRef: TemplateRef, - private renderer: Renderer2, - private elementRef: ElementRef + protected renderer: Renderer2, + protected elementRef: ElementRef ) { - super(viewContainer); + super(viewContainer, renderer, elementRef); this.defaultFieldEditingComponent = DefaultEmptyImageFieldEditingComponent; } diff --git a/packages/sitecore-jss-angular/src/components/link.directive.ts b/packages/sitecore-jss-angular/src/components/link.directive.ts index d9d6e0a393..136fbe9835 100644 --- a/packages/sitecore-jss-angular/src/components/link.directive.ts +++ b/packages/sitecore-jss-angular/src/components/link.directive.ts @@ -38,9 +38,9 @@ export class LinkDirective extends BaseFieldDirective implements OnChanges { viewContainer: ViewContainerRef, protected templateRef: TemplateRef, protected renderer: Renderer2, - private elementRef: ElementRef + protected elementRef: ElementRef ) { - super(viewContainer); + super(viewContainer, renderer, elementRef); this.defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent; } diff --git a/packages/sitecore-jss-angular/src/components/rich-text.directive.ts b/packages/sitecore-jss-angular/src/components/rich-text.directive.ts index 191ec95718..35e73367aa 100644 --- a/packages/sitecore-jss-angular/src/components/rich-text.directive.ts +++ b/packages/sitecore-jss-angular/src/components/rich-text.directive.ts @@ -7,6 +7,7 @@ import { ViewContainerRef, Renderer2, Type, + ElementRef, } from '@angular/core'; import { Router } from '@angular/router'; import { isAbsoluteUrl } from '@sitecore-jss/sitecore-jss/utils'; @@ -36,10 +37,11 @@ export class RichTextDirective extends BaseFieldDirective implements OnChanges { constructor( viewContainer: ViewContainerRef, private templateRef: TemplateRef, - private renderer: Renderer2, - private router: Router + private router: Router, + protected renderer: Renderer2, + protected elementRef: ElementRef ) { - super(viewContainer); + super(viewContainer, renderer, elementRef); this.defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent; } diff --git a/packages/sitecore-jss-angular/src/components/text.directive.ts b/packages/sitecore-jss-angular/src/components/text.directive.ts index 9411bf47fc..39b3acef7f 100644 --- a/packages/sitecore-jss-angular/src/components/text.directive.ts +++ b/packages/sitecore-jss-angular/src/components/text.directive.ts @@ -1,7 +1,9 @@ import { Directive, + ElementRef, Input, OnChanges, + Renderer2, SimpleChanges, TemplateRef, Type, @@ -32,8 +34,13 @@ export class TextDirective extends BaseFieldDirective implements OnChanges { */ protected defaultFieldEditingComponent: Type; - constructor(viewContainer: ViewContainerRef, private templateRef: TemplateRef) { - super(viewContainer); + constructor( + viewContainer: ViewContainerRef, + private templateRef: TemplateRef, + protected renderer: Renderer2, + protected elementRef: ElementRef + ) { + super(viewContainer, renderer, elementRef); this.defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent; } From 5cfb5fab15ca77601591f2d142f1a9b2461f522f Mon Sep 17 00:00:00 2001 From: Addy Pathania Date: Tue, 1 Oct 2024 10:45:58 -0400 Subject: [PATCH 02/11] add a defaultEmptyComponent method for link and image directives --- .../src/components/base-field.directive.ts | 51 ++----------------- .../src/components/date.directive.ts | 2 +- ...ext-field-editing-placeholder.component.ts | 2 +- .../src/components/image.directive.ts | 30 ++++++++++- .../src/components/link.directive.ts | 18 ++++++- .../src/components/rich-text.directive.ts | 2 +- .../src/components/text.directive.ts | 2 +- 7 files changed, 51 insertions(+), 56 deletions(-) diff --git a/packages/sitecore-jss-angular/src/components/base-field.directive.ts b/packages/sitecore-jss-angular/src/components/base-field.directive.ts index 3db55e1581..a2d41d9d3d 100644 --- a/packages/sitecore-jss-angular/src/components/base-field.directive.ts +++ b/packages/sitecore-jss-angular/src/components/base-field.directive.ts @@ -1,12 +1,4 @@ -import { - Directive, - Type, - ViewContainerRef, - EmbeddedViewRef, - TemplateRef, - Renderer2, - ElementRef, -} from '@angular/core'; +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'; @@ -29,11 +21,7 @@ export abstract class BaseFieldDirective { */ protected abstract defaultFieldEditingComponent: Type; - constructor( - protected viewContainer: ViewContainerRef, - protected renderer: Renderer2, // Inject Renderer2 for DOM manipulation - protected elementRef: ElementRef - ) {} + constructor(protected viewContainer: ViewContainerRef) {} /** * Determines if directive should render the field as is @@ -52,40 +40,7 @@ export abstract class BaseFieldDirective { if (this.emptyFieldEditingTemplate) { this.viewContainer.createEmbeddedView(this.emptyFieldEditingTemplate); } else { - if (this.field?.metadata?.fieldType === 'Image') { - const img = this.renderer.createElement('img'); - - // Set image attributes - this.renderer.setAttribute(img, 'alt', ''); - this.renderer.setAttribute( - img, - 'src', - 'data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23969696;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.75;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Crect class="st0" width="240" height="240"/%3E%3Cg%3E%3Cg%3E%3Crect x="20" y="20" class="st1" width="200" height="200"/%3E%3C/g%3E%3Cg%3E%3Ccircle class="st2" cx="174" cy="67" r="14"/%3E%3Cpath class="st2" d="M174,54c7.17,0,13,5.83,13,13s-5.83,13-13,13s-13-5.83-13-13S166.83,54,174,54 M174,52 c-8.28,0-15,6.72-15,15s6.72,15,15,15s15-6.72,15-15S182.28,52,174,52L174,52z"/%3E%3C/g%3E%3Cpolyline class="st3" points="29.5,179.25 81.32,122.25 95.41,137.75 137.23,91.75 209.5,179.75 "/%3E%3C/g%3E%3C/g%3E%3C/svg%3E' - ); - this.renderer.setAttribute(img, 'class', 'scEmptyImage'); - this.renderer.setStyle(img, 'min-width', '48px'); - this.renderer.setStyle(img, 'min-height', '48px'); - this.renderer.setStyle(img, 'max-width', '400px'); - this.renderer.setStyle(img, 'max-height', '400px'); - this.renderer.setStyle(img, 'cursor', 'pointer'); - - const parentNode = this.renderer.parentNode(this.elementRef.nativeElement); - if (parentNode) { - this.renderer.insertBefore(parentNode, img, this.elementRef.nativeElement); - } - } else if ( - this.field?.metadata?.fieldType === 'General Link' || - this.field?.metadata?.fieldType === 'Single Line Text' - ) { - const span = this.renderer.createElement('span'); - - this.renderer.setAttribute(span, 'sc-default-empty-text-field-editing-placeholder', ''); - - const parentNode = this.renderer.parentNode(this.elementRef.nativeElement); - if (parentNode) { - this.renderer.insertBefore(parentNode, span, this.elementRef.nativeElement); - } - } + this.viewContainer.createComponent(this.defaultFieldEditingComponent); } this.renderMetadata(MetadataKind.Close); } diff --git a/packages/sitecore-jss-angular/src/components/date.directive.ts b/packages/sitecore-jss-angular/src/components/date.directive.ts index 3eb45face5..2bcaafe553 100644 --- a/packages/sitecore-jss-angular/src/components/date.directive.ts +++ b/packages/sitecore-jss-angular/src/components/date.directive.ts @@ -46,7 +46,7 @@ export class DateDirective extends BaseFieldDirective implements OnChanges { protected renderer: Renderer2, protected elementRef: ElementRef ) { - super(viewContainer, renderer, elementRef); + super(viewContainer); this.defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent; } diff --git a/packages/sitecore-jss-angular/src/components/default-empty-text-field-editing-placeholder.component.ts b/packages/sitecore-jss-angular/src/components/default-empty-text-field-editing-placeholder.component.ts index 3ac61bd022..810415c75c 100644 --- a/packages/sitecore-jss-angular/src/components/default-empty-text-field-editing-placeholder.component.ts +++ b/packages/sitecore-jss-angular/src/components/default-empty-text-field-editing-placeholder.component.ts @@ -4,7 +4,7 @@ import { Component } from '@angular/core'; * Default component that will be rendered in pages when field is empty; applies for text, richtext, date and link fields. */ @Component({ - selector: '[sc-default-empty-text-field-editing-placeholder]', + selector: 'sc-default-empty-text-field-editing-placeholder', template: '[No text in field]', }) export class DefaultEmptyFieldEditingComponent {} diff --git a/packages/sitecore-jss-angular/src/components/image.directive.ts b/packages/sitecore-jss-angular/src/components/image.directive.ts index 847a30d5bf..c8902e7d20 100644 --- a/packages/sitecore-jss-angular/src/components/image.directive.ts +++ b/packages/sitecore-jss-angular/src/components/image.directive.ts @@ -52,7 +52,7 @@ export class ImageDirective extends BaseFieldDirective implements OnChanges { protected renderer: Renderer2, protected elementRef: ElementRef ) { - super(viewContainer, renderer, elementRef); + super(viewContainer); this.defaultFieldEditingComponent = DefaultEmptyImageFieldEditingComponent; } @@ -70,7 +70,11 @@ export class ImageDirective extends BaseFieldDirective implements OnChanges { private updateView() { if (!this.shouldRender()) { - super.renderEmpty(); + if (this.emptyFieldEditingTemplate) { + super.renderEmpty(); + } else { + this.defaultEmptyFieldTemplate(); + } return; } @@ -114,6 +118,28 @@ export class ImageDirective extends BaseFieldDirective implements OnChanges { } } + private defaultEmptyFieldTemplate() { + const img = this.renderer.createElement('img'); + // Set image attributes + this.renderer.setAttribute(img, 'alt', ''); + this.renderer.setAttribute( + img, + 'src', + 'data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23969696;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.75;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Crect class="st0" width="240" height="240"/%3E%3Cg%3E%3Cg%3E%3Crect x="20" y="20" class="st1" width="200" height="200"/%3E%3C/g%3E%3Cg%3E%3Ccircle class="st2" cx="174" cy="67" r="14"/%3E%3Cpath class="st2" d="M174,54c7.17,0,13,5.83,13,13s-5.83,13-13,13s-13-5.83-13-13S166.83,54,174,54 M174,52 c-8.28,0-15,6.72-15,15s6.72,15,15,15s15-6.72,15-15S182.28,52,174,52L174,52z"/%3E%3C/g%3E%3Cpolyline class="st3" points="29.5,179.25 81.32,122.25 95.41,137.75 137.23,91.75 209.5,179.75 "/%3E%3C/g%3E%3C/g%3E%3C/svg%3E' + ); + this.renderer.setAttribute(img, 'class', 'scEmptyImage'); + this.renderer.setStyle(img, 'min-width', '48px'); + this.renderer.setStyle(img, 'min-height', '48px'); + this.renderer.setStyle(img, 'max-width', '400px'); + this.renderer.setStyle(img, 'max-height', '400px'); + this.renderer.setStyle(img, 'cursor', 'pointer'); + + const parentNode = this.renderer.parentNode(this.elementRef.nativeElement); + if (parentNode) { + this.renderer.insertBefore(parentNode, img, this.elementRef.nativeElement); + } + } + private getImageAttrs( fieldAttrs: ImageFieldValue, parsedAttrs: { [attr: string]: unknown }, diff --git a/packages/sitecore-jss-angular/src/components/link.directive.ts b/packages/sitecore-jss-angular/src/components/link.directive.ts index 136fbe9835..cb30f2feeb 100644 --- a/packages/sitecore-jss-angular/src/components/link.directive.ts +++ b/packages/sitecore-jss-angular/src/components/link.directive.ts @@ -40,7 +40,7 @@ export class LinkDirective extends BaseFieldDirective implements OnChanges { protected renderer: Renderer2, protected elementRef: ElementRef ) { - super(viewContainer, renderer, elementRef); + super(viewContainer); this.defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent; } @@ -112,7 +112,11 @@ export class LinkDirective extends BaseFieldDirective implements OnChanges { this.renderInlineWrapper(field.editableFirstPart, field.editableLastPart); } else { if (!this.shouldRender()) { - super.renderEmpty(); + if (this.emptyFieldEditingTemplate) { + super.renderEmpty(); + } else { + this.defaultEmptyFieldTemplate(); + } return; } @@ -131,6 +135,16 @@ export class LinkDirective extends BaseFieldDirective implements OnChanges { } } + private defaultEmptyFieldTemplate() { + const emptyElement = this.renderer.createElement('span'); + emptyElement.textContent = '[No text in field]'; + + const parentNode = this.renderer.parentNode(this.elementRef.nativeElement); + if (parentNode) { + this.renderer.insertBefore(parentNode, emptyElement, this.elementRef.nativeElement); + } + } + private renderInlineWrapper(editableFirstPart: string, editableLastPart: string) { const span: HTMLSpanElement = this.renderer.createElement('span'); span.className = 'sc-link-wrapper'; diff --git a/packages/sitecore-jss-angular/src/components/rich-text.directive.ts b/packages/sitecore-jss-angular/src/components/rich-text.directive.ts index 35e73367aa..893d528b23 100644 --- a/packages/sitecore-jss-angular/src/components/rich-text.directive.ts +++ b/packages/sitecore-jss-angular/src/components/rich-text.directive.ts @@ -41,7 +41,7 @@ export class RichTextDirective extends BaseFieldDirective implements OnChanges { protected renderer: Renderer2, protected elementRef: ElementRef ) { - super(viewContainer, renderer, elementRef); + super(viewContainer); this.defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent; } diff --git a/packages/sitecore-jss-angular/src/components/text.directive.ts b/packages/sitecore-jss-angular/src/components/text.directive.ts index 39b3acef7f..2bb4eca455 100644 --- a/packages/sitecore-jss-angular/src/components/text.directive.ts +++ b/packages/sitecore-jss-angular/src/components/text.directive.ts @@ -40,7 +40,7 @@ export class TextDirective extends BaseFieldDirective implements OnChanges { protected renderer: Renderer2, protected elementRef: ElementRef ) { - super(viewContainer, renderer, elementRef); + super(viewContainer); this.defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent; } From 952d40a69c0f2041df47b868c5dbb193f2eecdae Mon Sep 17 00:00:00 2001 From: Addy Pathania Date: Tue, 1 Oct 2024 10:50:08 -0400 Subject: [PATCH 03/11] remove unused variables --- .../src/components/date.directive.ts | 6 +----- .../src/components/image.directive.ts | 4 ++-- .../src/components/link.directive.ts | 2 +- .../src/components/rich-text.directive.ts | 4 +--- .../src/components/text.directive.ts | 9 +-------- 5 files changed, 6 insertions(+), 19 deletions(-) diff --git a/packages/sitecore-jss-angular/src/components/date.directive.ts b/packages/sitecore-jss-angular/src/components/date.directive.ts index 2bcaafe553..9d82cf8489 100644 --- a/packages/sitecore-jss-angular/src/components/date.directive.ts +++ b/packages/sitecore-jss-angular/src/components/date.directive.ts @@ -1,10 +1,8 @@ import { DatePipe } from '@angular/common'; import { Directive, - ElementRef, Input, OnChanges, - Renderer2, SimpleChanges, TemplateRef, Type, @@ -42,9 +40,7 @@ export class DateDirective extends BaseFieldDirective implements OnChanges { constructor( viewContainer: ViewContainerRef, private templateRef: TemplateRef, - private datePipe: DatePipe, - protected renderer: Renderer2, - protected elementRef: ElementRef + private datePipe: DatePipe ) { super(viewContainer); this.defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent; diff --git a/packages/sitecore-jss-angular/src/components/image.directive.ts b/packages/sitecore-jss-angular/src/components/image.directive.ts index c8902e7d20..2134b929fb 100644 --- a/packages/sitecore-jss-angular/src/components/image.directive.ts +++ b/packages/sitecore-jss-angular/src/components/image.directive.ts @@ -49,8 +49,8 @@ export class ImageDirective extends BaseFieldDirective implements OnChanges { constructor( viewContainer: ViewContainerRef, private templateRef: TemplateRef, - protected renderer: Renderer2, - protected elementRef: ElementRef + private renderer: Renderer2, + private elementRef: ElementRef ) { super(viewContainer); this.defaultFieldEditingComponent = DefaultEmptyImageFieldEditingComponent; diff --git a/packages/sitecore-jss-angular/src/components/link.directive.ts b/packages/sitecore-jss-angular/src/components/link.directive.ts index cb30f2feeb..4a8781f234 100644 --- a/packages/sitecore-jss-angular/src/components/link.directive.ts +++ b/packages/sitecore-jss-angular/src/components/link.directive.ts @@ -38,7 +38,7 @@ export class LinkDirective extends BaseFieldDirective implements OnChanges { viewContainer: ViewContainerRef, protected templateRef: TemplateRef, protected renderer: Renderer2, - protected elementRef: ElementRef + private elementRef: ElementRef ) { super(viewContainer); this.defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent; diff --git a/packages/sitecore-jss-angular/src/components/rich-text.directive.ts b/packages/sitecore-jss-angular/src/components/rich-text.directive.ts index 893d528b23..cb6fad9bef 100644 --- a/packages/sitecore-jss-angular/src/components/rich-text.directive.ts +++ b/packages/sitecore-jss-angular/src/components/rich-text.directive.ts @@ -7,7 +7,6 @@ import { ViewContainerRef, Renderer2, Type, - ElementRef, } from '@angular/core'; import { Router } from '@angular/router'; import { isAbsoluteUrl } from '@sitecore-jss/sitecore-jss/utils'; @@ -38,8 +37,7 @@ export class RichTextDirective extends BaseFieldDirective implements OnChanges { viewContainer: ViewContainerRef, private templateRef: TemplateRef, private router: Router, - protected renderer: Renderer2, - protected elementRef: ElementRef + private renderer: Renderer2 ) { super(viewContainer); this.defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent; diff --git a/packages/sitecore-jss-angular/src/components/text.directive.ts b/packages/sitecore-jss-angular/src/components/text.directive.ts index 2bb4eca455..9411bf47fc 100644 --- a/packages/sitecore-jss-angular/src/components/text.directive.ts +++ b/packages/sitecore-jss-angular/src/components/text.directive.ts @@ -1,9 +1,7 @@ import { Directive, - ElementRef, Input, OnChanges, - Renderer2, SimpleChanges, TemplateRef, Type, @@ -34,12 +32,7 @@ export class TextDirective extends BaseFieldDirective implements OnChanges { */ protected defaultFieldEditingComponent: Type; - constructor( - viewContainer: ViewContainerRef, - private templateRef: TemplateRef, - protected renderer: Renderer2, - protected elementRef: ElementRef - ) { + constructor(viewContainer: ViewContainerRef, private templateRef: TemplateRef) { super(viewContainer); this.defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent; } From ac13f5d60eeae7f2621f5542a968644c39b88ef7 Mon Sep 17 00:00:00 2001 From: Addy Pathania Date: Tue, 1 Oct 2024 11:01:17 -0400 Subject: [PATCH 04/11] fix richtext directive --- .../src/components/rich-text.directive.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/sitecore-jss-angular/src/components/rich-text.directive.ts b/packages/sitecore-jss-angular/src/components/rich-text.directive.ts index cb6fad9bef..191ec95718 100644 --- a/packages/sitecore-jss-angular/src/components/rich-text.directive.ts +++ b/packages/sitecore-jss-angular/src/components/rich-text.directive.ts @@ -36,8 +36,8 @@ export class RichTextDirective extends BaseFieldDirective implements OnChanges { constructor( viewContainer: ViewContainerRef, private templateRef: TemplateRef, - private router: Router, - private renderer: Renderer2 + private renderer: Renderer2, + private router: Router ) { super(viewContainer); this.defaultFieldEditingComponent = DefaultEmptyFieldEditingComponent; From 459fe4310defb9e9cd2afafe09468896a07a725c Mon Sep 17 00:00:00 2001 From: Addy Pathania Date: Tue, 1 Oct 2024 15:30:43 -0400 Subject: [PATCH 05/11] refactor default empty field components --- ...age-field-editing-placeholder.component.ts | 2 +- ...ext-field-editing-placeholder.component.ts | 24 ++++++++++++++-- .../src/components/image.directive.ts | 28 +------------------ .../src/components/link.directive.ts | 16 +---------- 4 files changed, 24 insertions(+), 46 deletions(-) diff --git a/packages/sitecore-jss-angular/src/components/default-empty-image-field-editing-placeholder.component.ts b/packages/sitecore-jss-angular/src/components/default-empty-image-field-editing-placeholder.component.ts index 660d7ef8aa..b06fcec2f6 100644 --- a/packages/sitecore-jss-angular/src/components/default-empty-image-field-editing-placeholder.component.ts +++ b/packages/sitecore-jss-angular/src/components/default-empty-image-field-editing-placeholder.component.ts @@ -4,7 +4,7 @@ import { Component } from '@angular/core'; * Default component that will be rendered in pages when image field is empty. */ @Component({ - selector: 'sc-default-empty-image-field-editing-placeholder', + selector: '[sc-default-empty-image-field-editing-placeholder]', template: ` [No text in field]', + template: '[No text in field]', }) -export class DefaultEmptyFieldEditingComponent {} +export class DefaultEmptyFieldEditingComponent implements OnInit { + constructor(private renderer: Renderer2, private elementRef: ElementRef) {} + + ngOnInit() { + // Change the default wrapping element to a + const nativeElement = this.elementRef.nativeElement; + const parent = nativeElement.parentNode; + + // Create a new element and move the content + const span = this.renderer.createElement('span'); + while (nativeElement.firstChild) { + this.renderer.appendChild(span, nativeElement.firstChild); + } + + // Replace the original element with the new + this.renderer.insertBefore(parent, span, nativeElement); + this.renderer.removeChild(parent, nativeElement); + } +} diff --git a/packages/sitecore-jss-angular/src/components/image.directive.ts b/packages/sitecore-jss-angular/src/components/image.directive.ts index 2134b929fb..085e274060 100644 --- a/packages/sitecore-jss-angular/src/components/image.directive.ts +++ b/packages/sitecore-jss-angular/src/components/image.directive.ts @@ -70,11 +70,7 @@ export class ImageDirective extends BaseFieldDirective implements OnChanges { private updateView() { if (!this.shouldRender()) { - if (this.emptyFieldEditingTemplate) { - super.renderEmpty(); - } else { - this.defaultEmptyFieldTemplate(); - } + super.renderEmpty(); return; } @@ -118,28 +114,6 @@ export class ImageDirective extends BaseFieldDirective implements OnChanges { } } - private defaultEmptyFieldTemplate() { - const img = this.renderer.createElement('img'); - // Set image attributes - this.renderer.setAttribute(img, 'alt', ''); - this.renderer.setAttribute( - img, - 'src', - 'data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23969696;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.75;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Crect class="st0" width="240" height="240"/%3E%3Cg%3E%3Cg%3E%3Crect x="20" y="20" class="st1" width="200" height="200"/%3E%3C/g%3E%3Cg%3E%3Ccircle class="st2" cx="174" cy="67" r="14"/%3E%3Cpath class="st2" d="M174,54c7.17,0,13,5.83,13,13s-5.83,13-13,13s-13-5.83-13-13S166.83,54,174,54 M174,52 c-8.28,0-15,6.72-15,15s6.72,15,15,15s15-6.72,15-15S182.28,52,174,52L174,52z"/%3E%3C/g%3E%3Cpolyline class="st3" points="29.5,179.25 81.32,122.25 95.41,137.75 137.23,91.75 209.5,179.75 "/%3E%3C/g%3E%3C/g%3E%3C/svg%3E' - ); - this.renderer.setAttribute(img, 'class', 'scEmptyImage'); - this.renderer.setStyle(img, 'min-width', '48px'); - this.renderer.setStyle(img, 'min-height', '48px'); - this.renderer.setStyle(img, 'max-width', '400px'); - this.renderer.setStyle(img, 'max-height', '400px'); - this.renderer.setStyle(img, 'cursor', 'pointer'); - - const parentNode = this.renderer.parentNode(this.elementRef.nativeElement); - if (parentNode) { - this.renderer.insertBefore(parentNode, img, this.elementRef.nativeElement); - } - } - private getImageAttrs( fieldAttrs: ImageFieldValue, parsedAttrs: { [attr: string]: unknown }, diff --git a/packages/sitecore-jss-angular/src/components/link.directive.ts b/packages/sitecore-jss-angular/src/components/link.directive.ts index 4a8781f234..d9d6e0a393 100644 --- a/packages/sitecore-jss-angular/src/components/link.directive.ts +++ b/packages/sitecore-jss-angular/src/components/link.directive.ts @@ -112,11 +112,7 @@ export class LinkDirective extends BaseFieldDirective implements OnChanges { this.renderInlineWrapper(field.editableFirstPart, field.editableLastPart); } else { if (!this.shouldRender()) { - if (this.emptyFieldEditingTemplate) { - super.renderEmpty(); - } else { - this.defaultEmptyFieldTemplate(); - } + super.renderEmpty(); return; } @@ -135,16 +131,6 @@ export class LinkDirective extends BaseFieldDirective implements OnChanges { } } - private defaultEmptyFieldTemplate() { - const emptyElement = this.renderer.createElement('span'); - emptyElement.textContent = '[No text in field]'; - - const parentNode = this.renderer.parentNode(this.elementRef.nativeElement); - if (parentNode) { - this.renderer.insertBefore(parentNode, emptyElement, this.elementRef.nativeElement); - } - } - private renderInlineWrapper(editableFirstPart: string, editableLastPart: string) { const span: HTMLSpanElement = this.renderer.createElement('span'); span.className = 'sc-link-wrapper'; From f72a3f98f543456eb6e5b0a7854a43a73b95b126 Mon Sep 17 00:00:00 2001 From: Addy Pathania Date: Tue, 1 Oct 2024 15:39:49 -0400 Subject: [PATCH 06/11] update changelog --- CHANGELOG.md | 5 +++-- ...default-empty-text-field-editing-placeholder.component.ts | 1 - 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index beaa53643f..21b9051db0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,8 +7,7 @@ Our versioning strategy is as follows: - Patch: no breaking changes (e.g. bug fixes, minor improvements) - Minor: may include breaking changes in framework packages (e.g. framework upgrades, new features, improvements) -- Major: may include breaking changes in core packages (e.g. major architectural changes, major features) - +- Major: may include breaking changes in core packages (e.g. major architectural changes, major features ## Unreleased ### 🐛 Bug Fixes @@ -16,6 +15,8 @@ Our versioning strategy is as follows: * `[templates/nextjs]` `[templates/react]` `[templates/angular]` `[templates/vue]` Fixed an issue when environment variable is undefined (not present in .env), that produced an "undefined" value in generated config file ([#1875](https://github.com/Sitecore/jss/pull/1875)) * `[templates/nextjs]` Fix embedded personalization not rendering correctly after navigation through router links. ([#1911](https://github.com/Sitecore/jss/pull/1911)) * `[template/angular]` Prevent client-side dictionary API call when SSR data is available ([#1930](https://github.com/Sitecore/jss/pull/1930)) ([#1932](https://github.com/Sitecore/jss/pull/1932)) +* `[sitecore-jss-angular]` Fix default empty field components to not render the unwanted wrapping tags ([#1937](https://github.com/Sitecore/jss/pull/1937)) + ### 🎉 New Features & Improvements diff --git a/packages/sitecore-jss-angular/src/components/default-empty-text-field-editing-placeholder.component.ts b/packages/sitecore-jss-angular/src/components/default-empty-text-field-editing-placeholder.component.ts index c5ac22a94b..cec689bfc0 100644 --- a/packages/sitecore-jss-angular/src/components/default-empty-text-field-editing-placeholder.component.ts +++ b/packages/sitecore-jss-angular/src/components/default-empty-text-field-editing-placeholder.component.ts @@ -11,7 +11,6 @@ export class DefaultEmptyFieldEditingComponent implements OnInit { constructor(private renderer: Renderer2, private elementRef: ElementRef) {} ngOnInit() { - // Change the default wrapping element to a const nativeElement = this.elementRef.nativeElement; const parent = nativeElement.parentNode; From 7d0192f3c9331c3df0a8749377f74c33f179a671 Mon Sep 17 00:00:00 2001 From: Addy Pathania Date: Tue, 1 Oct 2024 15:40:33 -0400 Subject: [PATCH 07/11] add line --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 21b9051db0..ac8dbf67a6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ Our versioning strategy is as follows: - Patch: no breaking changes (e.g. bug fixes, minor improvements) - Minor: may include breaking changes in framework packages (e.g. framework upgrades, new features, improvements) - Major: may include breaking changes in core packages (e.g. major architectural changes, major features + ## Unreleased ### 🐛 Bug Fixes From 051ed735db974180433db2696dd0949a1aee29f9 Mon Sep 17 00:00:00 2001 From: Addy Pathania Date: Tue, 1 Oct 2024 15:41:18 -0400 Subject: [PATCH 08/11] fix changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ac8dbf67a6..0c88cd954a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,7 @@ Our versioning strategy is as follows: - Patch: no breaking changes (e.g. bug fixes, minor improvements) - Minor: may include breaking changes in framework packages (e.g. framework upgrades, new features, improvements) -- Major: may include breaking changes in core packages (e.g. major architectural changes, major features +- Major: may include breaking changes in core packages (e.g. major architectural changes, major features) ## Unreleased From 5d4271c75ed1c0aeb3d4e963c4829d141eaaebc0 Mon Sep 17 00:00:00 2001 From: Addy Pathania Date: Wed, 2 Oct 2024 08:55:57 -0400 Subject: [PATCH 09/11] refactor default empty text component --- ...ext-field-editing-placeholder.component.ts | 23 +++---------------- 1 file changed, 3 insertions(+), 20 deletions(-) diff --git a/packages/sitecore-jss-angular/src/components/default-empty-text-field-editing-placeholder.component.ts b/packages/sitecore-jss-angular/src/components/default-empty-text-field-editing-placeholder.component.ts index cec689bfc0..8cab0d1a7e 100644 --- a/packages/sitecore-jss-angular/src/components/default-empty-text-field-editing-placeholder.component.ts +++ b/packages/sitecore-jss-angular/src/components/default-empty-text-field-editing-placeholder.component.ts @@ -1,27 +1,10 @@ -import { Component, ElementRef, OnInit, Renderer2 } from '@angular/core'; +import { Component } from '@angular/core'; /** * Default component that will be rendered in pages when field is empty; applies for text, richtext, date and link fields. */ @Component({ - selector: 'sc-default-empty-text-field-editing-placeholder', + selector: '[sc-default-empty-text-field-editing-placeholder]', template: '[No text in field]', }) -export class DefaultEmptyFieldEditingComponent implements OnInit { - constructor(private renderer: Renderer2, private elementRef: ElementRef) {} - - ngOnInit() { - const nativeElement = this.elementRef.nativeElement; - const parent = nativeElement.parentNode; - - // Create a new element and move the content - const span = this.renderer.createElement('span'); - while (nativeElement.firstChild) { - this.renderer.appendChild(span, nativeElement.firstChild); - } - - // Replace the original element with the new - this.renderer.insertBefore(parent, span, nativeElement); - this.renderer.removeChild(parent, nativeElement); - } -} +export class DefaultEmptyFieldEditingComponent {} From 40dd2722c3a63bbdf0eec24bd51a33a89b0ed755 Mon Sep 17 00:00:00 2001 From: Addy Pathania Date: Wed, 2 Oct 2024 15:56:23 -0400 Subject: [PATCH 10/11] fix tests --- .../src/components/base-field.directive.spec.ts | 8 ++++++-- .../src/components/date.directive.spec.ts | 12 +++++++++--- .../src/components/generic-link.directive.spec.ts | 3 ++- .../src/components/image.directive.spec.ts | 2 +- .../src/components/link.directive.spec.ts | 11 ++++++++--- .../src/components/rich-text.directive.spec.ts | 8 ++++++-- .../src/components/router-link.directive.spec.ts | 3 ++- .../src/components/text.directive.spec.ts | 8 ++++++-- 8 files changed, 40 insertions(+), 15 deletions(-) diff --git a/packages/sitecore-jss-angular/src/components/base-field.directive.spec.ts b/packages/sitecore-jss-angular/src/components/base-field.directive.spec.ts index 77d85471c5..144729a201 100644 --- a/packages/sitecore-jss-angular/src/components/base-field.directive.spec.ts +++ b/packages/sitecore-jss-angular/src/components/base-field.directive.spec.ts @@ -130,7 +130,9 @@ describe('', () => { fixture.detectChanges(); const rendered = de.nativeElement.innerHTML; - expect(rendered).toContain('[No text in field]'); + expect(rendered).toContain( + '[No text in field]' + ); }); it('should render custom empty editing template if provided', () => { @@ -199,7 +201,9 @@ describe('', () => { comp.field = field; fixture.detectChanges(); - const fieldValue = de.query(By.css('sc-default-empty-text-field-editing-placeholder')); + const fieldValue = de.query( + By.css('span[sc-default-empty-text-field-editing-placeholder]') + ); const metadataOpenTag = fieldValue.nativeElement.previousElementSibling; const metadataCloseTag = fieldValue.nativeElement.nextElementSibling; diff --git a/packages/sitecore-jss-angular/src/components/date.directive.spec.ts b/packages/sitecore-jss-angular/src/components/date.directive.spec.ts index 189f2ef8c9..1bc986f2f7 100644 --- a/packages/sitecore-jss-angular/src/components/date.directive.spec.ts +++ b/packages/sitecore-jss-angular/src/components/date.directive.spec.ts @@ -160,7 +160,9 @@ describe('', () => { fixture.detectChanges(); const rendered = de.nativeElement.innerHTML; - expect(rendered).toContain('[No text in field]'); + expect(rendered).toContain( + '[No text in field]' + ); }); it('should render default empty field component when field value is the default empty date value', () => { @@ -172,7 +174,9 @@ describe('', () => { fixture.detectChanges(); const rendered = de.nativeElement.innerHTML; - expect(rendered).toContain('[No text in field]'); + expect(rendered).toContain( + '[No text in field]' + ); }); it('should render custom empty field component when provided, when field value is empty', () => { @@ -256,7 +260,9 @@ describe('', () => { comp.field = field; fixture.detectChanges(); - const fieldValue = de.query(By.css('sc-default-empty-text-field-editing-placeholder')); + const fieldValue = de.query( + By.css('span[sc-default-empty-text-field-editing-placeholder]') + ); const metadataOpenTag = fieldValue.nativeElement.previousElementSibling; const metadataCloseTag = fieldValue.nativeElement.nextElementSibling; diff --git a/packages/sitecore-jss-angular/src/components/generic-link.directive.spec.ts b/packages/sitecore-jss-angular/src/components/generic-link.directive.spec.ts index ba972213e7..76f008d1bb 100644 --- a/packages/sitecore-jss-angular/src/components/generic-link.directive.spec.ts +++ b/packages/sitecore-jss-angular/src/components/generic-link.directive.spec.ts @@ -27,7 +27,8 @@ class TestComponent { const emptyLinkFieldEditingTemplateId = 'emptyLinkFieldEditingTemplate'; const emptyLinkFieldEditingTemplate = '[This is a *custom* empty field template]'; -const emptyLinkFieldEditingTemplateDefaultTestString = '[No text in field]'; +const emptyLinkFieldEditingTemplateDefaultTestString = + '[No text in field]'; @Component({ selector: 'test-empty-template-generic-link', diff --git a/packages/sitecore-jss-angular/src/components/image.directive.spec.ts b/packages/sitecore-jss-angular/src/components/image.directive.spec.ts index 154ea0c4f6..4ff50438b5 100644 --- a/packages/sitecore-jss-angular/src/components/image.directive.spec.ts +++ b/packages/sitecore-jss-angular/src/components/image.directive.spec.ts @@ -512,7 +512,7 @@ describe('', () => { comp.field = field; fixture.detectChanges(); - const fieldValue = de.query(By.css('sc-default-empty-image-field-editing-placeholder')); + const fieldValue = de.query(By.css('[sc-default-empty-image-field-editing-placeholder]')); const metadataOpenTag = fieldValue.nativeElement.previousElementSibling; const metadataCloseTag = fieldValue.nativeElement.nextElementSibling; diff --git a/packages/sitecore-jss-angular/src/components/link.directive.spec.ts b/packages/sitecore-jss-angular/src/components/link.directive.spec.ts index ff8ada6407..8ef3bc4ab7 100644 --- a/packages/sitecore-jss-angular/src/components/link.directive.spec.ts +++ b/packages/sitecore-jss-angular/src/components/link.directive.spec.ts @@ -20,7 +20,8 @@ class TestComponent { const emptyLinkFieldEditingTemplateId = 'emptyLinkFieldEditingTemplate'; const emptyLinkFieldEditingTemplate = '[This is a *custom* empty field template]'; -const emptyLinkFieldEditingTemplateDefaultTestString = '[No text in field]'; +const emptyLinkFieldEditingTemplateDefaultTestString = + '[No text in field]'; @Component({ selector: 'test-empty-template-link', @@ -389,7 +390,9 @@ describe('', () => { comp.field = field; fixture.detectChanges(); - const fieldValue = de.query(By.css('sc-default-empty-text-field-editing-placeholder')); + const fieldValue = de.query( + By.css('span[sc-default-empty-text-field-editing-placeholder]') + ); const metadataOpenTag = fieldValue.nativeElement.previousElementSibling; const metadataCloseTag = fieldValue.nativeElement.nextElementSibling; @@ -740,7 +743,9 @@ describe('children', () => { comp.field = field; fixture.detectChanges(); - const fieldValue = de.query(By.css('sc-default-empty-text-field-editing-placeholder')); + const fieldValue = de.query( + By.css('span[sc-default-empty-text-field-editing-placeholder]') + ); const metadataOpenTag = fieldValue.nativeElement.previousElementSibling; const metadataCloseTag = fieldValue.nativeElement.nextElementSibling; diff --git a/packages/sitecore-jss-angular/src/components/rich-text.directive.spec.ts b/packages/sitecore-jss-angular/src/components/rich-text.directive.spec.ts index 2d53280cac..2537811147 100644 --- a/packages/sitecore-jss-angular/src/components/rich-text.directive.spec.ts +++ b/packages/sitecore-jss-angular/src/components/rich-text.directive.spec.ts @@ -172,7 +172,9 @@ describe('
', () => { fixture.detectChanges(); const rendered = de.nativeElement.innerHTML; - expect(rendered).toContain('[No text in field]'); + expect(rendered).toContain( + '[No text in field]' + ); }); it('should render custom empty field component when provided, when field value is empty', () => { @@ -238,7 +240,9 @@ describe('
', () => { comp.field = field; fixture.detectChanges(); - const fieldValue = de.query(By.css('sc-default-empty-text-field-editing-placeholder')); + const fieldValue = de.query( + By.css('span[sc-default-empty-text-field-editing-placeholder]') + ); const metadataOpenTag = fieldValue.nativeElement.previousElementSibling; const metadataCloseTag = fieldValue.nativeElement.nextElementSibling; diff --git a/packages/sitecore-jss-angular/src/components/router-link.directive.spec.ts b/packages/sitecore-jss-angular/src/components/router-link.directive.spec.ts index cfb3d7e803..3c7e43f70a 100644 --- a/packages/sitecore-jss-angular/src/components/router-link.directive.spec.ts +++ b/packages/sitecore-jss-angular/src/components/router-link.directive.spec.ts @@ -25,7 +25,8 @@ class TestComponent { const emptyLinkFieldEditingTemplateId = 'emptyLinkFieldEditingTemplate'; const emptyLinkFieldEditingTemplate = '[This is a *custom* empty field template]'; -const emptyLinkFieldEditingTemplateDefaultTestString = '[No text in field]'; +const emptyLinkFieldEditingTemplateDefaultTestString = + '[No text in field]'; @Component({ selector: 'test-empty-template-router-link', diff --git a/packages/sitecore-jss-angular/src/components/text.directive.spec.ts b/packages/sitecore-jss-angular/src/components/text.directive.spec.ts index 43b2083876..e1d39ef245 100644 --- a/packages/sitecore-jss-angular/src/components/text.directive.spec.ts +++ b/packages/sitecore-jss-angular/src/components/text.directive.spec.ts @@ -215,7 +215,9 @@ describe('', () => { fixture.detectChanges(); const rendered = de.nativeElement.innerHTML; - expect(rendered).toContain('[No text in field]'); + expect(rendered).toContain( + '[No text in field]' + ); }); it('should render custom empty field component when provided, when field value is empty', () => { @@ -281,7 +283,9 @@ describe('', () => { comp.field = field; fixture.detectChanges(); - const fieldValue = de.query(By.css('sc-default-empty-text-field-editing-placeholder')); + const fieldValue = de.query( + By.css('span[sc-default-empty-text-field-editing-placeholder]') + ); const metadataOpenTag = fieldValue.nativeElement.previousElementSibling; const metadataCloseTag = fieldValue.nativeElement.nextElementSibling; From d56f46a612b36ff28e16eac94b8c8a7a8b2f1d27 Mon Sep 17 00:00:00 2001 From: Addy Pathania Date: Wed, 2 Oct 2024 15:57:50 -0400 Subject: [PATCH 11/11] fix changelog --- CHANGELOG.md | 1 - 1 file changed, 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0c88cd954a..fd6b8f3b3c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,7 +18,6 @@ Our versioning strategy is as follows: * `[template/angular]` Prevent client-side dictionary API call when SSR data is available ([#1930](https://github.com/Sitecore/jss/pull/1930)) ([#1932](https://github.com/Sitecore/jss/pull/1932)) * `[sitecore-jss-angular]` Fix default empty field components to not render the unwanted wrapping tags ([#1937](https://github.com/Sitecore/jss/pull/1937)) - ### 🎉 New Features & Improvements * `[create-sitecore-jss]` Introduced "node-xmcloud-proxy" addon ([#1863](https://github.com/Sitecore/jss/pull/1863))