TINY-11908: Fix disabled prop not mapped to readonly mode in TinyMCE < 7.6 (#466)

* TINY-11908: Fix disabled prop not mapped to readonly mode when using with TinyMCE < 7.6

* TINY-11908: Fix test

Author: tiny-ben-tran

CHANGELOG.md

@@ -8,10 +8,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## Unreleased
 
 ### Added
-- The readonly prop now maps to the readonly editor option. See: [Editor important options: readonly](https://www.tiny.cloud/docs/tinymce/latest/editor-important-options/#readonly)
+- New `readonly` prop that can be used to toggle the editor's `readonly` mode. #TINY-11908
 
 ### Changed
-- The disabled prop now maps to the disabled editor option. See: [Editor important options: disabled](https://www.tiny.cloud/docs/tinymce/latest/editor-important-options/#disabled)
+- `disabled` prop is now mapped to the editor's `disabled` option. #TINY-11908
 
 ## 6.1.0 - 2024-10-22
 
@@ -24,7 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## 6.0.0 - 2024-06-05
 
 ### Added
-- Add missing events: `onInput`, `onCommentChange`, `onCompositionEnd`, `onCompositionStart`, `onCompositionUpdate`
+- Added missing events: `onInput`, `onCommentChange`, `onCompositionEnd`, `onCompositionStart`, `onCompositionUpdate`.
 
 ### Changed
 - Default cloud channel to '7'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinymce/tinymce-vue",
-  "version": "7.0.0-rc",
+  "version": "6.2.0-rc",
   "description": "Official TinyMCE Vue 3 Component",
   "private": false,
   "repository": {

src/main/ts/Utils.ts

@@ -155,7 +155,8 @@ const mergePlugins = (initPlugins: string | string[] | undefined, inputPlugins?:
 const isNullOrUndefined = (value: any): value is null | undefined =>
   value === null || value === undefined;
 
-const isDisabledOptionSupported = (editor: TinyMCEEditor): boolean => typeof editor.options.set === 'function' && editor.options.isRegistered('disabled');
+const isDisabledOptionSupported = (editor: TinyMCEEditor): boolean =>
+  typeof editor.options?.set === 'function' && editor.options.isRegistered('disabled');
 
 export {
   bindHandlers,

src/main/ts/components/Editor.ts

@@ -30,6 +30,15 @@ const renderIframe = (ce: any, id: string, elementRef: Ref<Element | null>) =>
 
 const defaultInitValues = { selector: undefined, target: undefined };
 
+const setMode = (editor: TinyMCEEditor, mode: 'readonly' | 'design') => {
+  if (typeof editor.mode?.set === 'function') {
+    editor.mode.set(mode);
+  } else {
+    // TinyMCE v4
+    (editor as any).setMode(mode);
+  }
+};
+
 export const Editor = defineComponent({
   props: editorProps,
   setup: (props: IPropTypes, ctx) => {
@@ -52,15 +61,20 @@ export const Editor = defineComponent({
       const content = getContent(mounting);
       const finalInit = {
         ...conf,
-        readonly: props.readonly,
         disabled: props.disabled,
+        readonly: props.readonly,
         target: element.value,
         plugins: mergePlugins(conf.plugins, props.plugins),
         toolbar: props.toolbar || (conf.toolbar),
         inline: inlineEditor,
         license_key: props.licenseKey,
         setup: (editor: TinyMCEEditor) => {
           vueEditor = editor;
+
+          if (!isDisabledOptionSupported(vueEditor) && props.disabled === true) {
+            setMode(vueEditor, 'readonly');
+          }
+
           editor.on('init', (e: EditorEvent<any>) => initEditor(e, props, ctx, editor, modelValue, content));
           if (typeof conf.setup === 'function') {
             conf.setup(editor);
@@ -74,24 +88,16 @@ export const Editor = defineComponent({
       mounting = false;
     };
     watch(readonly, (isReadonly) => {
-      if (vueEditor !== null && isDisabledOptionSupported(vueEditor)) {
-        if (typeof vueEditor.mode?.set === 'function') {
-          vueEditor.mode.set(isReadonly ? 'readonly' : 'design');
-        } else {
-          (vueEditor as any).setMode(isReadonly ? 'readonly' : 'design');
-        }
+      if (vueEditor !== null) {
+        setMode(vueEditor, isReadonly ? 'readonly' : 'design');
       }
     });
-    watch(disabled, (disable) => {
+    watch(disabled, (isDisabled) => {
       if (vueEditor !== null) {
         if (isDisabledOptionSupported(vueEditor)) {
-          vueEditor.options.set('disabled', disable);
+          vueEditor.options.set('disabled', isDisabled);
         } else {
-          if (typeof vueEditor.mode?.set === 'function') {
-            vueEditor.mode.set(disable ? 'readonly' : 'design');
-          } else {
-            (vueEditor as any).setMode(disable ? 'readonly' : 'design');
-          }
+          setMode(vueEditor, isDisabled ? 'readonly' : 'design');
         }
       }
     });

src/stories/Editor.stories.tsx

@@ -53,9 +53,17 @@ export default {
         defaultValue: {summary: '5'}
       },
       defaultValue: '7',
-      options: ['5', '5-dev', '5-testing', '6-testing', '6-stable', '7-dev', '7-testing', '7-stable'],
+      options: ['5', '5-dev', '5-testing', '6-testing', '6-stable', '7-dev', '7-testing', '7-stable', '7.3', '7.4', '7.6'],
       control: { type: 'select'}
     },
+    disabled: {
+      defaultValue: false,
+      control: 'boolean'
+    },
+    readonly: {
+      defaultValue: false,
+      control: 'boolean'
+    },
     conf: {
       defaultValue: '{height: 300}',
       control: { type: 'text' }
@@ -158,11 +166,41 @@ export const Disable: Story = (args) => ({
     });
     const cc = args.channel || lastChannel;
     const conf = getConf(args.conf);
-    const disabled = ref(false);
-    const readonly = ref(false);
+    const disabled = ref(args.disabled);
     const toggleDisabled = (_) => {
       disabled.value = !disabled.value;
     }
+
+    return {
+      apiKey,
+      content,
+      cloudChannel: cc,
+      conf,
+      disabled,
+      toggleDisabled
+    }
+  },
+  template: `
+    <div>
+      <button @click="toggleDisabled">{{ disabled ? 'enable' : 'disable' }}</button>
+      <editor
+        api-key="${apiKey}"
+        :disabled="disabled"
+        :init="conf"
+        v-model="content"
+      />
+    </div>`
+});
+
+export const Readonly: Story = (args) => ({
+  components: { Editor },
+  setup() {
+    onBeforeMount(() => {
+      loadTiny(args);
+    });
+    const cc = args.channel || lastChannel;
+    const conf = getConf(args.conf);
+    const readonly = ref(args.readonly);
     const toggleReadonly = (_) => {
       readonly.value = !readonly.value;
     }
@@ -171,20 +209,16 @@ export const Disable: Story = (args) => ({
       content,
       cloudChannel: cc,
       conf,
-      disabled,
       readonly,
-      toggleDisabled,
       toggleReadonly
     }
   },
   template: `
     <div>
-      <button @click="toggleDisabled">{{ disabled ? 'enable' : 'disable' }}</button>
       <button @click="toggleReadonly">{{ readonly ? 'design' : 'readonly' }}</button>
       <editor
         api-key="${apiKey}"
-        v-bind:disabled="disabled"
-        v-bind:readonly="readonly"
+        :readonly="readonly"
         :init="conf"
         v-model="content"
       />