TINY-11906: Add tests

Author: tiny-ben-tran

src/main/ts/components/Editor.tsx

@@ -21,7 +21,8 @@ type EditorOptions = Parameters<TinyMCE['init']>[0];
 export type InitOptions = Omit<OmitStringIndexSignature<EditorOptions>, OmittedInitProps> & {
   selector?: DoNotUse<'selector prop is handled internally by the component'>;
   target?: DoNotUse<'target prop is handled internally by the component'>;
-  readonly?: DoNotUse<'readonly prop is overridden by the component, use the `disabled` prop instead'>;
+  readonly?: DoNotUse<'readonly prop is overridden by the component'>;
+  disabled?: DoNotUse<'disabled prop is overridden by the component'>;
   license_key?: DoNotUse<'license_key prop is overridden by the integration, use the `licenseKey` prop instead'>;
 } & { [key: string]: unknown };
 
@@ -95,7 +96,7 @@ export interface IProps {
   toolbar: NonNullable<EditorOptions['toolbar']>;
   /**
    * @see {@link https://www.tiny.cloud/docs/tinymce/7/react-ref/#disabled React Tech Ref - disabled}
-   * @description Whether the editor should be "disabled".
+   * @description Whether the editor should be disabled.
    */
   disabled: boolean;
   /**
@@ -214,10 +215,15 @@ export class Editor extends React.Component<IAllProps> {
             }
           });
         }
+
         if (this.props.readonly !== prevProps.readonly) {
           const readonly = this.props.readonly ?? false;
           setMode(this.editor, readonly ? 'readonly' : 'design');
         }
+
+        if (this.props.disabled !== prevProps.disabled) {
+          this.editor.options.set('disabled', this.props.disabled);
+        }
       }
     }
   }

src/stories/Editor.stories.tsx

@@ -157,7 +157,7 @@ export const ToggleReadonlyProp: StoryObj<Editor> = {
           readonly={readonly}
         />
         <button onClick={toggleReadonly}>
-          {readonly ? 'Enable Editor' : 'Disable Editor'}
+          {readonly ? 'Set editable' : 'Set Readonly'}
         </button>
       </div>
     );

src/test/ts/browser/EditorInitTest.ts

@@ -69,11 +69,27 @@ describe('EditorInitTest', () => {
         TinyAssertions.assertContent(ctx.editor, '<p>New Value</p>');
       });
 
-      it('Disabled prop should disable editor', async () => {
+      it('Disabled prop should disable editor', async function () {
+        using ctx = await render();
+        const editor = ctx.editor;
+        const minorVersion = parseInt(editor.editorManager.minorVersion, 10);
+        // disabled option was re-introduced in tinymce 7.6
+        if (version !== '7' || minorVersion < 6) {
+          this.skip();
+        }
+
+        Assertions.assertEq('Should be enabled', false, editor.options.get('disabled'));
+        await ctx.reRender({ ...defaultProps, disabled: true });
+        Assertions.assertEq('Should be disabled', true,
+          editor.options.get('disabled'));
+      });
+
+      it('Readonly prop should set editor to readonly mode', async () => {
         using ctx = await render();
         Assertions.assertEq('Should be design mode', true, '4' === version ? !ctx.editor.readonly : ctx.editor.mode.get() === 'design');
         await ctx.reRender({ ...defaultProps, disabled: true });
         Assertions.assertEq('Should be readonly mode', true, '4' === version ? ctx.editor.readonly : ctx.editor.mode.get() === 'readonly');
+
       });
 
       it('Using an overriden props will cause a TS error', async () => {