TINY-11908: Add new readonly prop (#463)

* TINY-11908: Add new `readonly` prop

Co-authored-by: tiny-ben-tran <ben.tran@tiny.cloud>
Co-authored-by: Karl Kemister-Sheppard <karlkemistersheppard@gmail.com>

Author: 3 people

CHANGELOG.md

@@ -7,6 +7,12 @@ 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)
+
+### 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)
+
 ## 6.1.0 - 2024-10-22
 
 ### Changed

README.md

@@ -12,6 +12,7 @@ This package is a thin wrapper around [TinyMCE](https://github.com/tinymce/tinym
 
 ### Support
 
+Version 7.0 is intended to support the tinymce version 7.6 and above.
 Version 4.0 is intended to support Vue 3. For Vue 2.x and below please use previous versions of the wrapper.
 
 ### Issues

package.json

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

src/main/ts/Utils.ts

@@ -155,6 +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');
+
 export {
   bindHandlers,
   bindModelHandlers,
@@ -163,5 +165,6 @@ export {
   uuid,
   isTextarea,
   mergePlugins,
-  isNullOrUndefined
+  isNullOrUndefined,
+  isDisabledOptionSupported
 };

src/main/ts/components/Editor.ts

@@ -8,7 +8,7 @@
 
 import { ScriptLoader } from '../ScriptLoader';
 import { getTinymce } from '../TinyMCE';
-import { isTextarea, mergePlugins, uuid, isNullOrUndefined, initEditor } from '../Utils';
+import { isTextarea, mergePlugins, uuid, isNullOrUndefined, initEditor, isDisabledOptionSupported } from '../Utils';
 import { editorProps, IPropTypes } from './EditorPropTypes';
 import { h, defineComponent, onMounted, ref, Ref, toRefs, nextTick, watch, onBeforeUnmount, onActivated, onDeactivated } from 'vue';
 import type { Editor as TinyMCEEditor, EditorEvent, TinyMCE } from 'tinymce';
@@ -34,9 +34,9 @@ export const Editor = defineComponent({
   props: editorProps,
   setup: (props: IPropTypes, ctx) => {
     let conf = props.init ? { ...props.init, ...defaultInitValues } : { ...defaultInitValues };
-    const { disabled, modelValue, tagName } = toRefs(props);
+    const { disabled, readonly, modelValue, tagName } = toRefs(props);
     const element: Ref<Element | null> = ref(null);
-    let vueEditor: any = null;
+    let vueEditor: TinyMCEEditor | null = null;
     const elementId: string = props.id || uuid('tiny-vue');
     const inlineEditor: boolean = (props.init && props.init.inline) || props.inline;
     const modelBind = !!ctx.attrs['onUpdate:modelValue'];
@@ -52,7 +52,8 @@ export const Editor = defineComponent({
       const content = getContent(mounting);
       const finalInit = {
         ...conf,
-        readonly: props.disabled,
+        readonly: props.readonly,
+        disabled: props.disabled,
         target: element.value,
         plugins: mergePlugins(conf.plugins, props.plugins),
         toolbar: props.toolbar || (conf.toolbar),
@@ -72,21 +73,36 @@ export const Editor = defineComponent({
       getTinymce().init(finalInit);
       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');
+        }
+      }
+    });
     watch(disabled, (disable) => {
       if (vueEditor !== null) {
-        if (typeof vueEditor.mode?.set === 'function') {
-          vueEditor.mode.set(disable ? 'readonly' : 'design');
+        if (isDisabledOptionSupported(vueEditor)) {
+          vueEditor.options.set('disabled', disable);
         } else {
-          vueEditor.setMode(disable ? 'readonly' : 'design');
+          if (typeof vueEditor.mode?.set === 'function') {
+            vueEditor.mode.set(disable ? 'readonly' : 'design');
+          } else {
+            (vueEditor as any).setMode(disable ? 'readonly' : 'design');
+          }
         }
       }
     });
     watch(tagName, (_) => {
-      if (!modelBind) {
-        cache = vueEditor.getContent();
+      if (vueEditor) {
+        if (!modelBind) {
+          cache = vueEditor.getContent();
+        }
+        getTinymce()?.remove(vueEditor);
+        nextTick(() => initWrapper());
       }
-      getTinymce()?.remove(vueEditor);
-      nextTick(() => initWrapper());
     });
     onMounted(() => {
       if (getTinymce() !== null) {
@@ -116,17 +132,21 @@ export const Editor = defineComponent({
         }
       });
       onDeactivated(() => {
-        if (!modelBind) {
-          cache = vueEditor.getContent();
+        if (vueEditor) {
+          if (!modelBind) {
+            cache = vueEditor.getContent();
+          }
+          getTinymce()?.remove(vueEditor);
         }
-        getTinymce()?.remove(vueEditor);
       });
     }
     const rerender = (init: EditorOptions) => {
-      cache = vueEditor.getContent();
-      getTinymce()?.remove(vueEditor);
-      conf = { ...conf, ...init, ...defaultInitValues };
-      nextTick(() => initWrapper());
+      if (vueEditor) {
+        cache = vueEditor.getContent();
+        getTinymce()?.remove(vueEditor);
+        conf = { ...conf, ...init, ...defaultInitValues };
+        nextTick(() => initWrapper());
+      }
     };
     ctx.expose({
       rerender,

src/main/ts/components/EditorPropTypes.ts

@@ -26,6 +26,7 @@ export interface IPropTypes {
   toolbar: string[] | string;
   modelValue: string;
   disabled: boolean;
+  readonly: boolean;
   tinymceScriptSrc: string;
 }
 
@@ -43,6 +44,7 @@ export const editorProps: CopyProps<IPropTypes> = {
   toolbar: [ String, Array ],
   modelValue: String,
   disabled: Boolean,
+  readonly: Boolean,
   tinymceScriptSrc: String,
   outputFormat: {
     type: String,

src/stories/Editor.stories.tsx

@@ -2,8 +2,8 @@ import { Story } from '@storybook/vue3';
 import { onBeforeMount, ref } from 'vue';
 import { ScriptLoader } from '../main/ts/ScriptLoader';
 
+import type { EditorEvent, Editor as TinyMCEEditor } from 'tinymce';
 import { Editor } from '../main/ts/components/Editor';
-import type { Editor as TinyMCEEditor, EditorEvent } from 'tinymce';
 
 const apiKey = 'qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc';
 const content = `
@@ -159,24 +159,32 @@ export const Disable: Story = (args) => ({
     const cc = args.channel || lastChannel;
     const conf = getConf(args.conf);
     const disabled = ref(false);
+    const readonly = ref(false);
     const toggleDisabled = (_) => {
       disabled.value = !disabled.value;
     }
+    const toggleReadonly = (_) => {
+      readonly.value = !readonly.value;
+    }
     return {
       apiKey,
       content,
       cloudChannel: cc,
       conf,
       disabled,
-      toggleDisabled
+      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"
         :init="conf"
         v-model="content"
       />