TINY-11908: Add new readonly prop

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 the the readonly editor option. See: https://www.tiny.cloud/docs/tinymce/latest/editor-important-options/#readonly
+
+### Changed
+- The disabled prop now maps the the disabled editor option. See: 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/components/Editor.ts

@@ -34,7 +34,7 @@ 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;
     const elementId: string = props.id || uuid('tiny-vue');
@@ -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,15 +73,20 @@ export const Editor = defineComponent({
       getTinymce().init(finalInit);
       mounting = false;
     };
-    watch(disabled, (disable) => {
+    watch(readonly, (isReadonly) => {
       if (vueEditor !== null) {
         if (typeof vueEditor.mode?.set === 'function') {
-          vueEditor.mode.set(disable ? 'readonly' : 'design');
+          vueEditor.mode.set(isReadonly ? 'readonly' : 'design');
         } else {
-          vueEditor.setMode(disable ? 'readonly' : 'design');
+          vueEditor.setMode(isReadonly ? 'readonly' : 'design');
         }
       }
     });
+    watch(disabled, (disable) => {
+      if (vueEditor !== null) {
+        vueEditor.options.set('disabled', disable);
+      }
+    });
     watch(tagName, (_) => {
       if (!modelBind) {
         cache = vueEditor.getContent();

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"
       />