fix(components/text-editor): allow initializing as disabled (#3099)

[AB#3243272](https://dev.azure.com/blackbaud/f565481a-7bc9-4083-95d5-4f953da6d499/_workitems/edit/3243272)
blackbaud · Feb 4, 2025 · 794a6fc · 794a6fc
1 parent 501b985
commit 794a6fc
Show file tree

Hide file tree

Showing 4 changed files with 143 additions and 26 deletions.
diff --git a/...t-editor/src/lib/modules/text-editor/fixtures/text-editor-reactive.component.fixture.html b/...t-editor/src/lib/modules/text-editor/fixtures/text-editor-reactive.component.fixture.html
@@ -0,0 +1,21 @@
+<div id="fixture-wrapper">
+  <sky-text-editor
+    [autofocus]="autofocus"
+    [fontList]="fontList"
+    [fontSizeList]="fontSizeList"
+    [formControl]="formControl"
+    [helpKey]="helpKey"
+    [helpPopoverContent]="helpPopoverContent"
+    [helpPopoverTitle]="helpPopoverTitle"
+    [hintText]="hintText"
+    [id]="id"
+    [initialStyleState]="initialStyleState"
+    [labelText]="labelText"
+    [linkWindowOptions]="linkWindowOptions"
+    [menus]="menus"
+    [mergeFields]="mergeFields"
+    [placeholder]="placeholder"
+    [stacked]="stacked"
+    [toolbarActions]="toolbarActions"
+  />
+</div>
diff --git a/...ext-editor/src/lib/modules/text-editor/fixtures/text-editor-reactive.component.fixture.ts b/...ext-editor/src/lib/modules/text-editor/fixtures/text-editor-reactive.component.fixture.ts
@@ -0,0 +1,72 @@
+import { Component } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { SkyTextEditorModule } from '@skyux/text-editor';
+
+import { FONT_LIST_DEFAULTS } from '../defaults/font-list-defaults';
+import { FONT_SIZE_LIST_DEFAULTS } from '../defaults/font-size-list-defaults';
+import { SkyTextEditorFont } from '../types/font-state';
+import { SkyTextEditorLinkWindowOptionsType } from '../types/link-window-options-type';
+import { SkyTextEditorMenuType } from '../types/menu-type';
+import { SkyTextEditorStyleState } from '../types/style-state';
+import { SkyTextEditorMergeField } from '../types/text-editor-merge-field';
+import { SkyTextEditorToolbarActionType } from '../types/toolbar-action-type';
+
+/**
+ * @internal
+ */
+@Component({
+  selector: 'sky-text-editor-test-reactive',
+  templateUrl: './text-editor-reactive.component.fixture.html',
+  standalone: true,
+  imports: [SkyTextEditorModule, ReactiveFormsModule],
+})
+export class TextEditorReactiveFixtureComponent {
+  public autofocus = false;
+  public fontList: SkyTextEditorFont[] | undefined = FONT_LIST_DEFAULTS;
+  public fontSizeList: number[] | undefined = FONT_SIZE_LIST_DEFAULTS;
+  public formControl = new FormControl('<p>Some text</p>');
+  public helpKey: string | undefined;
+  public helpPopoverContent: string | undefined;
+  public helpPopoverTitle: string | undefined;
+  public id: string | undefined = 'id-from-fixture';
+  public initialStyleState: SkyTextEditorStyleState =
+    {} as SkyTextEditorStyleState;
+  public menus: SkyTextEditorMenuType[] | undefined = [
+    'edit',
+    'format',
+    'merge-field',
+  ];
+  public mergeFields: SkyTextEditorMergeField[] | undefined = [
+    {
+      id: '0',
+      name: 'Best field',
+    },
+    {
+      id: '1',
+      name: 'Second best field',
+    },
+    {
+      id: '2',
+      name: 'A field that is really too long for its own good',
+    },
+  ];
+  public placeholder: string | undefined;
+  public toolbarActions: SkyTextEditorToolbarActionType[] | undefined = [
+    'font-family',
+    'font-size',
+    'color',
+    'list',
+    'font-style',
+    'alignment',
+    'indentation',
+    'undo-redo',
+    'link',
+  ];
+  public linkWindowOptions: SkyTextEditorLinkWindowOptionsType[] | undefined = [
+    'new',
+    'existing',
+  ];
+  public labelText: string | undefined;
+  public hintText: string | undefined;
+  public stacked: boolean | undefined;
+}
diff --git a/libs/components/text-editor/src/lib/modules/text-editor/text-editor.component.spec.ts b/libs/components/text-editor/src/lib/modules/text-editor/text-editor.component.spec.ts
@@ -29,6 +29,7 @@ import { FONT_SIZE_LIST_DEFAULTS } from './defaults/font-size-list-defaults';
 import { MENU_DEFAULTS } from './defaults/menu-defaults';
 import { STYLE_STATE_DEFAULTS } from './defaults/style-state-defaults';
 import { TOOLBAR_ACTION_DEFAULTS } from './defaults/toolbar-action-defaults';
+import { TextEditorReactiveFixtureComponent } from './fixtures/text-editor-reactive.component.fixture';
 import { TextEditorFixtureComponent } from './fixtures/text-editor.component.fixture';
 import { SkyTextEditorAdapterService } from './services/text-editor-adapter.service';
 import { SkyTextEditorComponent } from './text-editor.component';
@@ -1605,6 +1606,24 @@ describe('Text editor', () => {
       );
     }));
 
+    it('should disable text editor once iframe is loaded', fakeAsync(() => {
+      const fixture = TestBed.createComponent(
+        TextEditorReactiveFixtureComponent,
+      );
+      fixture.componentInstance.formControl.disable();
+      fixture.detectChanges();
+      tick();
+      fixture.detectChanges();
+      tick();
+      const fixtureIframe: HTMLIFrameElement =
+        fixture.nativeElement.querySelector('iframe');
+      expect(fixtureIframe).toBeTruthy();
+      expect(fixtureIframe.getAttribute('aria-disabled')).toEqual('true');
+      expect(
+        fixtureIframe.contentDocument?.body.getAttribute('contenteditable'),
+      ).toEqual('false');
+    }));
+
     it('should render help inline popover if helpPopoverContent is provided', () => {
       testComponent.helpPopoverContent = 'popover content';
       testComponent.labelText = 'label text';

diff --git a/libs/components/text-editor/src/lib/modules/text-editor/text-editor.component.ts b/libs/components/text-editor/src/lib/modules/text-editor/text-editor.component.ts
@@ -103,32 +103,7 @@ export class SkyTextEditorComponent
   public set disabled(value: boolean) {
     if (value !== this.disabled) {
       this.#_disabled = value;
-
-      // Update focusableChildren inside the iframe.
-      let focusableChildren: HTMLElement[];
-      /* istanbul ignore else */
-      if (this.iframeRef) {
-        focusableChildren = this.#coreAdapterService.getFocusableChildren(
-          this.iframeRef.nativeElement.contentDocument.body,
-          {
-            ignoreVisibility: true,
-            ignoreTabIndex: true,
-          },
-        );
-
-        if (this.#_disabled) {
-          this.#adapterService.disableEditor(
-            focusableChildren,
-            this.iframeRef.nativeElement,
-          );
-        } else {
-          this.#adapterService.enableEditor(
-            focusableChildren,
-            this.iframeRef.nativeElement,
-          );
-        }
-        this.#changeDetector.markForCheck();
-      }
+      this.#applyDisabledState();
     }
   }
 
@@ -573,6 +548,8 @@ export class SkyTextEditorComponent
       this.#adapterService.focusEditor();
     }
 
+    this.#applyDisabledState();
+
     this.#initialized = true;
     this.#focusInitialized = false;
 
@@ -600,6 +577,34 @@ export class SkyTextEditorComponent
     }
   }
 
+  #applyDisabledState(): void {
+    // Update focusableChildren inside the iframe.
+    let focusableChildren: HTMLElement[];
+    /* istanbul ignore else */
+    if (this.iframeRef?.nativeElement.contentDocument?.body) {
+      focusableChildren = this.#coreAdapterService.getFocusableChildren(
+        this.iframeRef.nativeElement.contentDocument.body,
+        {
+          ignoreVisibility: true,
+          ignoreTabIndex: true,
+        },
+      );
+
+      if (this.#_disabled) {
+        this.#adapterService.disableEditor(
+          focusableChildren,
+          this.iframeRef.nativeElement,
+        );
+      } else {
+        this.#adapterService.enableEditor(
+          focusableChildren,
+          this.iframeRef.nativeElement,
+        );
+      }
+      this.#changeDetector.markForCheck();
+    }
+  }
+
   /* istanbul ignore next */
   #_onTouched = (): void => {};