TINY-11907: add 'readonly' property

Author: michalnieruchalski-tiugo

stories/Editor.stories.ts

@@ -15,6 +15,7 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ContainerComponent, ContentProjectionComponent } from './contentprojection/ContentProjection.component';
 import { BindingComponent } from './data-binding/DataBinding.component';
+import { ReadonlyComponent } from './readonly/Readonly.component';
 
 const meta: Meta = {
   component: EditorComponent,
@@ -137,6 +138,20 @@ export const DisablingStory: StoryObj<EditorComponent> = {
   }
 };
 
+export const ReadonlyStory: StoryObj<EditorComponent> = {
+  name: 'Readonly',
+  render: () => ({
+    moduleMetadata: {
+      imports: [ ReactiveFormsModule, FormsModule ],
+      declarations: [ ReadonlyComponent ],
+    },
+    template: `<readonly/>`
+  }),
+  parameters: {
+    notes: 'Example of toggling readonly state in the editor component'
+  }
+};
+
 export const ViewQueryStory: StoryObj<EditorComponent> = {
   name: 'View Query',
   render: () => ({

stories/readonly/Readonly.component.html

@@ -0,0 +1,7 @@
+<button (click)="toggleReadonly()">{{ isReadonly ? 'Escape readonly' : 'Enter readonly' }}</button>
+<editor
+  [apiKey]="apiKey"
+  [readonly]="isReadonly"
+  [initialValue]="initialValue"
+  [init]="{ height: 300 }"
+/>

stories/readonly/Readonly.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { apiKey, sampleContent } from '../Settings';
+
+@Component({
+  selector: 'readonly',
+  templateUrl: './Readonly.component.html',
+})
+export class ReadonlyComponent {
+  public isReadonly = false;
+  public apiKey = apiKey;
+  public initialValue = sampleContent;
+  public toggleReadonly = () => (this.isReadonly = !this.isReadonly);
+}

tinymce-angular-component/src/main/ts/editor/editor.component.ts

@@ -65,6 +65,18 @@ export class EditorComponent extends Events implements AfterViewInit, ControlVal
   @Input() public modelEvents = 'change input undo redo';
   @Input() public allowedEvents?: string | string[];
   @Input() public ignoreEvents?: string | string[];
+  @Input()
+  public set readonly(val) {
+    this._readonly = val;
+    if (this._editor && this._editor.initialized) {
+      setMode(this._editor, val ? 'readonly' : 'design');
+    }
+  }
+
+  public get readonly() {
+    return this._readonly;
+  }
+
   @Input()
   public set disabled(val) {
     this._disabled = val;
@@ -90,6 +102,7 @@ export class EditorComponent extends Events implements AfterViewInit, ControlVal
   private _elementRef: ElementRef;
   private _element?: HTMLElement;
   private _disabled?: boolean;
+  private _readonly?: boolean;
   private _editor?: TinyMCEEditor;
 
   private onTouchedCallback = noop;
@@ -177,7 +190,10 @@ export class EditorComponent extends Events implements AfterViewInit, ControlVal
       selector: undefined,
       target: this._element,
       inline: this.inline,
-      ...( DisabledUtils.isDisabledOptionSupported() ? { disabled: this.disabled } : { readonly: this.disabled } ),
+      ...( DisabledUtils.isDisabledOptionSupported()
+        ? { disabled: this.disabled, readonly: this.readonly }
+        : { readonly: this.disabled || this.readonly }
+      ),
       license_key: this.licenseKey,
       plugins: mergePlugins((this.init && this.init.plugins) as string, this.plugins),
       toolbar: this.toolbar || (this.init && this.init.toolbar),

tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts

@@ -7,8 +7,14 @@ import { eachVersionContext, editorHook } from '../alien/TestHooks';
 import { Editor } from 'tinymce';
 
 describe('DisabledPropertyTest', () => {
-  const assertDesignMode = (editor: Editor) => Assertions.assertEq('TinyMCE should be in design mode', 'design', editor.mode.get());
-  const assertReadonlyMode = (editor: Editor) => Assertions.assertEq('TinyMCE should be in readonly mode', 'readonly', editor.mode.get());
+  const getMode = (editor: Editor) => {
+    if (typeof editor.mode?.get === 'function') {
+      return editor.mode.get();
+    }
+    return editor.readonly ? 'readonly' : 'design';
+  };
+  const assertDesignMode = (editor: Editor) => Assertions.assertEq('TinyMCE should be in design mode', 'design', getMode(editor));
+  const assertReadonlyMode = (editor: Editor) => Assertions.assertEq('TinyMCE should be in readonly mode', 'readonly', getMode(editor));
   const assertDisabledOption = (editor: Editor, expected: boolean) =>
     Assertions.assertEq(`TinyMCE should have disabled option set to ${expected}`, expected, editor.options.get('disabled'));
 
@@ -34,13 +40,23 @@ describe('DisabledPropertyTest', () => {
       fixture.detectChanges();
       assertDesignMode(editor);
     });
+
+    it(`[disabled]=true [readonly]=false triggers readonly mode`, async () => {
+      const { editor } = await createFixture({ disabled: true, readonly: false });
+      assertReadonlyMode(editor);
+    });
+
+    it(`[disabled]=false [readonly]=true triggers readonly mode`, async () => {
+      const { editor } = await createFixture({ disabled: false, readonly: true });
+      assertReadonlyMode(editor);
+    });
   });
 
   eachVersionContext([ '7.6.0' ], () => {
     const createFixture = editorHook(EditorComponent);
 
     it(`Component 'disabled' property is mapped to editor 'disabled' property`, async () => {
-      const { editor } = await createFixture({ cloudChannel: '7.6.0', disabled: true });
+      const { editor } = await createFixture({ disabled: true });
 
       Assertions.assertEq('TinyMCE should have disabled option set to true', true, editor.options.get('disabled'));
       assertDesignMode(editor);
@@ -64,4 +80,28 @@ describe('DisabledPropertyTest', () => {
       assertDisabledOption(editor, false);
     });
   });
-});
+
+  eachVersionContext([ '4', '5', '6', '7' ], () => {
+    const createFixture = editorHook(EditorComponent);
+
+    it(`Setting the 'readonly' property causing readonly mode`, async () => {
+      const { editor } = await createFixture({ readonly: true });
+      assertReadonlyMode(editor);
+    });
+
+    it(`Toggling component's 'readonly' property is mapped to editor 'readonly' mode`, async () => {
+      const fixture = await createFixture();
+      const { editor } = fixture;
+
+      assertDesignMode(editor);
+
+      fixture.componentRef.setInput('readonly', true);
+      fixture.detectChanges();
+      assertReadonlyMode(editor);
+
+      fixture.componentRef.setInput('readonly', false);
+      fixture.detectChanges();
+      assertDesignMode(editor);
+    });
+  });
+});