fix(components/text-editor): value initializing for multiple text-editors

apps/playground/src/app/components/text-editor/text-editor-series/text-editor-series.component.html

@@ -0,0 +1,25 @@
+<div class="sky-padding-even-large">
+  <h1>Text editor looped</h1>
+  <form [formGroup]="myForm">
+    <sky-vertical-tabset [maintainTabContent]="true">
+      @for (editor of editors; track editor) {
+        <sky-vertical-tab
+          [active]="editor === 'textEditor1'"
+          [tabHeading]="editor"
+        >
+          <sky-text-editor
+            [formControlName]="editor"
+            helpKey="helpKey.html"
+            helpPopoverContent="This is some helpful content."
+            helpPopoverTitle="Did you know?"
+            hintText="Hint text"
+            stacked
+            [labelText]="editor"
+          />
+          <h2>Preview HTML</h2>
+          <div class="content-display" [innerHTML]="displayValue[editor]"></div>
+        </sky-vertical-tab>
+      }
+    </sky-vertical-tabset>
+  </form>
+</div>

apps/playground/src/app/components/text-editor/text-editor-series/text-editor-series.component.scss

@@ -0,0 +1,5 @@
+.content-display {
+  background-color: white;
+  height: 300px;
+  overflow-y: auto;
+}

apps/playground/src/app/components/text-editor/text-editor-series/text-editor-series.component.ts

@@ -0,0 +1,64 @@
+import { Component, DestroyRef, OnInit, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { SkyVerticalTabsetModule } from '@skyux/tabs';
+import { SkyTextEditorModule } from '@skyux/text-editor';
+
+import { startWith } from 'rxjs';
+
+@Component({
+  selector: 'app-text-editor-series',
+  templateUrl: './text-editor-series.component.html',
+  styleUrls: ['./text-editor-series.component.scss'],
+  standalone: true,
+  imports: [SkyTextEditorModule, SkyVerticalTabsetModule, ReactiveFormsModule],
+})
+export class TextEditorSeriesComponent implements OnInit {
+  public displayValue: Record<string, SafeHtml> = {};
+
+  public myForm: FormGroup;
+
+  public editors = ['textEditor1', 'textEditor2', 'textEditor3', 'textEditor4'];
+
+  readonly #destroyRef = inject(DestroyRef);
+  readonly #formBuilder = inject(FormBuilder);
+  readonly #sanitizer = inject(DomSanitizer);
+
+  public ngOnInit(): void {
+    this.myForm = this.#formBuilder.group({
+      textEditor1: new FormControl(
+        '<font style="font-size: 16px" color="#a25353"><b><i><u>Super styled text 1</u></i></b></font>',
+        [Validators.required],
+      ),
+      textEditor2: new FormControl(
+        '<font style="font-size: 16px" color="#a25353"><b><i><u>Super styled text 2</u></i></b></font>',
+        [Validators.required],
+      ),
+      textEditor3: new FormControl(
+        '<font style="font-size: 16px" color="#a25353"><b><i><u>Super styled text 3</u></i></b></font>',
+        [Validators.required],
+      ),
+      textEditor4: new FormControl(
+        '<font style="font-size: 16px" color="#a25353"><b><i><u>Super styled text 4</u></i></b></font>',
+        [Validators.required],
+      ),
+    });
+
+    this.myForm.valueChanges
+      .pipe(takeUntilDestroyed(this.#destroyRef), startWith(this.myForm.value))
+      .subscribe((value) => {
+        for (const key in value) {
+          this.displayValue[key] = this.#sanitizer.bypassSecurityTrustHtml(
+            value[key],
+          );
+        }
+      });
+  }
+}

apps/playground/src/app/components/text-editor/text-editor.module.ts

@@ -16,6 +16,18 @@ const routes: Routes = [
         (m) => m.TextEditorModule,
       ),
   },
+  {
+    path: 'text-editor-series',
+    loadComponent: () =>
+      import('./text-editor-series/text-editor-series.component').then(
+        (m) => m.TextEditorSeriesComponent,
+      ),
+    data: {
+      name: 'Text editor looped',
+      icon: 'pencil-square-o',
+      library: 'text-editor',
+    },
+  },
 ];
 
 @NgModule({

apps/playground/src/app/components/text-editor/text-editor/text-editor.component.html

@@ -18,7 +18,7 @@ <h1>Text editor</h1>
       helpPopoverContent="This is some helpful content."
       helpPopoverTitle="Did you know?"
       hintText="Hint text"
-      name="text-editor"
+      stacked
       [menus]="menus"
       [mergeFields]="mergeFields"
       [labelText]="labelText"

libs/components/text-editor/src/lib/modules/text-editor/services/text-editor-adapter.service.spec.ts

@@ -0,0 +1,107 @@
+import { TestBed } from '@angular/core/testing';
+import { SkyTextEditorStyleState } from '@skyux/text-editor';
+
+import { STYLE_STATE_DEFAULTS } from '../defaults/style-state-defaults';
+
+import { SkyTextEditorAdapterService } from './text-editor-adapter.service';
+import { SkyTextEditorSelectionService } from './text-editor-selection.service';
+import { SkyTextEditorService } from './text-editor.service';
+
+import SpyObj = jasmine.SpyObj;
+
+describe('SkyTextEditorAdapterService', () => {
+  let styleState: SkyTextEditorStyleState;
+  let doc: SpyObj<Document>;
+  let win: SpyObj<Window>;
+
+  beforeEach(() => {
+    styleState = Object.assign({}, STYLE_STATE_DEFAULTS);
+    doc = jasmine.createSpyObj<Document>(
+      'Document',
+      [
+        'addEventListener',
+        'close',
+        'createElement',
+        'open',
+        'removeEventListener',
+        'querySelector',
+      ],
+      {
+        body: jasmine.createSpyObj<HTMLBodyElement>([
+          'addEventListener',
+          'setAttribute',
+        ]),
+        head: jasmine.createSpyObj<HTMLHeadElement>(['appendChild']),
+      },
+    );
+    doc.createElement.and.callFake((tagName: string) => {
+      return document.createElement(tagName);
+    });
+    win = jasmine.createSpyObj<Window>(
+      'Window',
+      ['addEventListener', 'removeEventListener'],
+      {
+        document: doc,
+      },
+    );
+    TestBed.configureTestingModule({
+      providers: [
+        SkyTextEditorAdapterService,
+        SkyTextEditorSelectionService,
+        SkyTextEditorService,
+      ],
+    });
+  });
+
+  it('should initialize the editor', () => {
+    const service = TestBed.inject(SkyTextEditorAdapterService);
+    const iframe = jasmine.createSpyObj<HTMLIFrameElement>(
+      'HTMLIFrameElement',
+      ['addEventListener', 'removeEventListener'],
+      {
+        contentWindow: win,
+        contentDocument: doc,
+      },
+    );
+    service.initEditor('test', iframe, styleState);
+    expect(doc.body.setAttribute).toHaveBeenCalledWith(
+      'contenteditable',
+      'true',
+    );
+  });
+
+  it('should initialize the editor using contentDocument', () => {
+    const service = TestBed.inject(SkyTextEditorAdapterService);
+    const iframe = jasmine.createSpyObj<HTMLIFrameElement>(
+      'HTMLIFrameElement',
+      ['addEventListener', 'removeEventListener'],
+      {
+        contentWindow: undefined,
+        contentDocument: doc,
+      },
+    );
+    service.initEditor('test', iframe, styleState);
+    expect(doc.body.setAttribute).toHaveBeenCalledWith(
+      'contenteditable',
+      'true',
+    );
+  });
+
+  it('should stop initializing the editor when document is null', () => {
+    const service = TestBed.inject(SkyTextEditorAdapterService);
+    const iframe = jasmine.createSpyObj<HTMLIFrameElement>(
+      'HTMLIFrameElement',
+      ['addEventListener', 'removeEventListener'],
+      {
+        contentWindow: undefined,
+        contentDocument: undefined,
+      },
+    );
+    service.initEditor('test', iframe, styleState);
+    expect(doc.body.setAttribute).not.toHaveBeenCalled();
+    expect(service.editorSelected()).toBeFalse();
+    expect(service.saveSelection()).toBeUndefined();
+    expect(service.getCurrentSelection()).toBeFalsy();
+    expect(service.getSelectedAnchorTag()).toBeFalsy();
+  });
+});