TINY-11909: Add support for readonly mode (#77)

* TINY-11909: first implementation

* TINY-11909: add changelog entries

* TINY-11909: split disable and readonly stories

* TINY-11909: fix check

* TINY-11909: improvement

* TINY-11909: add check for isDisabledOptionSupported

* TINY-11909: improvemente

* TINY-11909: refactor

* TINY-11909: fix

* TINY-11909: refactor

* TINY-11909: update version

* Update src/main/component/Editor.svelte

---------

Co-authored-by: tiny-ben-tran <ben.tran@tiny.cloud>

Author: lorenzo-pomili

CHANGELOG.md

@@ -10,6 +10,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 - tinymce "^v7.0.0 || ^v6.0.0 || ^v5.0.0" is now an optional peer dependency. #INT-3324
 
+### Changed
+- `disabled` property is now mapped to the TinyMCE `disabled` option.
+
+### Added
+- Added `readonly` property that maps to the TinyMCE `readonly` option.
+
 ## 3.0.0 - 2024-06-05
 
 ### Added

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinymce/tinymce-svelte",
-  "version": "3.0.1-rc",
+  "version": "3.1.0-rc",
   "description": "TinyMCE Svelte Component",
   "private": false,
   "publishConfig": {

src/main/component/Editor.svelte

@@ -12,6 +12,10 @@
     return prefix + '_' + Math.floor(Math.random() * 1000000000) + String(Date.now());
   };
 
+  const isDisabledOptionSupported = (editor: TinyMCEEditor): boolean => {
+    return typeof editor.options.set === 'function' && editor.options.isRegistered('disabled')
+  };
+
   const createScriptLoader = () => {
     let state: {
       listeners: Array<() => void>,
@@ -67,6 +71,7 @@
   export let id: string = uuid('tinymce-svelte'); // default values
   export let inline: boolean | undefined = undefined;
   export let disabled: boolean = false;
+  export let readonly: boolean = false;
   export let apiKey: string = 'no-api-key';
   export let licenseKey: string | undefined = undefined;
   export let channel: Channel = '7';
@@ -82,24 +87,36 @@
   let editorRef: TinyMCEEditor | null;
   let lastVal = value;
   let disablindCache = disabled;
+  let readonlyCache = readonly;
   
+  const setReadonly = (editor: TinyMCEEditor, readonlyValue: boolean) => {
+    if (typeof editor.mode?.set === 'function') {
+      editor.mode.set(readonlyValue ? 'readonly' : 'design');
+    }
+  }
+
+  const setDisabled = (editor: TinyMCEEditor, disabledValue: boolean) => {
+    if (isDisabledOptionSupported(editor)) {
+        editor.options.set('disabled', disabledValue);
+      } else {
+        editor.mode.set(disabledValue ? 'readonly' : 'design');
+      }
+  }
+
   const dispatch = createEventDispatcher();
-  
+
   $: {
     if (editorRef && lastVal !== value) {
       editorRef.setContent(value);
       text = editorRef.getContent({format: 'text'});
     }
+    if (editorRef && readonly !== readonlyCache) {
+      readonlyCache = readonly;
+      setReadonly(editorRef, readonly);
+    }
     if (editorRef && disabled !== disablindCache) {
       disablindCache = disabled;
-      if (typeof editorRef.mode?.set === 'function') {
-        editorRef.mode.set(disabled ? 'readonly' : 'design');
-      } else {
-        interface TinyMCEEditor4 extends TinyMCEEditor {
-          setMode: (input: string) => void
-        }
-        (editorRef as TinyMCEEditor4).setMode(disabled ? 'readonly' : 'design');
-      }
+      setDisabled(editorRef, disabled);
     }
   }
   
@@ -117,9 +134,12 @@
       ...conf,
       target: element,
       inline: inline !== undefined ? inline : conf.inline !== undefined ? conf.inline : false,
-      readonly: disabled,
       license_key: licenseKey,
       setup: (editor: TinyMCEEditor) => {
+        editor.on('PreInit', () => {
+          setDisabled(editor, disabled);
+          setReadonly(editor, readonly);
+        });
         editorRef = editor;
         editor.on('init', () => {
           editor.setContent(value);

src/stories/Editor.stories.svelte

@@ -6,8 +6,8 @@
 </script>
 
 <script>
-  import Editor from '../main/component/Editor.svelte';
   import { Story } from '@storybook/addon-svelte-csf';
+  import Editor from '../main/component/Editor.svelte';
 
   const apiKey = 'prsghhxax677rv082a1zj9b7cgjuoaqysf7h8ayxi5ao43ha';
   const content = `
@@ -20,11 +20,15 @@ TinyMCE provides a <span style="text-decoration: underline;">full-featured</span
 
   let value = content;
   let disabled = true;
+  let readonly = true;
   let text = '';
 
   const toggleDisabled = () => {
     disabled = !disabled;
   }
+  const toggleReadonly = () => {
+    readonly = !readonly;
+  }
   const controls = { channel: '7', conf: { plugins: 'help' } }
 </script>
 
@@ -69,3 +73,10 @@ TinyMCE provides a <span style="text-decoration: underline;">full-featured</span
     <Editor {apiKey} {disabled} {value} {...args}/>
   </div>
 </Story>
+
+<Story name="Readonly" args={controls} let:args>
+  <div>
+    <button on:click={toggleReadonly}>{#if readonly}Not Readonly{:else}Readonly{/if}</button>
+    <Editor {apiKey} {readonly} {value} {...args}/>
+  </div>
+</Story>