From 222d6089287b14554ff07a84b493b1df37c1e33c Mon Sep 17 00:00:00 2001
From: lorenzo-pomili <pomili.lorenzo85@gmail.com>
Date: Tue, 29 Apr 2025 14:10:27 +0200
Subject: [PATCH 01/12] TINY-11909: first implementation

---
 src/main/component/Editor.svelte  | 11 +++++++++--
 src/stories/Editor.stories.svelte |  9 +++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/main/component/Editor.svelte b/src/main/component/Editor.svelte
index 9e5bb4b..08ff2d7 100644
--- a/src/main/component/Editor.svelte
+++ b/src/main/component/Editor.svelte
@@ -67,6 +67,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,6 +83,7 @@
   let editorRef: TinyMCEEditor | null;
   let lastVal = value;
   let disablindCache = disabled;
+  let readonlyCache = readonly;
   
   const dispatch = createEventDispatcher();
   
@@ -90,10 +92,14 @@
       editorRef.setContent(value);
       text = editorRef.getContent({format: 'text'});
     }
+    if (editorRef && readonly !== readonlyCache) {
+      readonlyCache = readonly;
+      editorRef.mode.set(readonly ? 'readonly' : 'design');
+    }
     if (editorRef && disabled !== disablindCache) {
       disablindCache = disabled;
       if (typeof editorRef.mode?.set === 'function') {
-        editorRef.mode.set(disabled ? 'readonly' : 'design');
+        editorRef.options.set('disabled', disabled);
       } else {
         interface TinyMCEEditor4 extends TinyMCEEditor {
           setMode: (input: string) => void
@@ -117,7 +123,8 @@
       ...conf,
       target: element,
       inline: inline !== undefined ? inline : conf.inline !== undefined ? conf.inline : false,
-      readonly: disabled,
+      readonly,
+      disabled,
       license_key: licenseKey,
       setup: (editor: TinyMCEEditor) => {
         editorRef = editor;
diff --git a/src/stories/Editor.stories.svelte b/src/stories/Editor.stories.svelte
index de6e5c1..fca6463 100644
--- a/src/stories/Editor.stories.svelte
+++ b/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 = 'b1g4d59rwwqxx1vj7mci23rjj8ubgb46i4xsio6ieig6fkps';
   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>
 
@@ -66,6 +70,7 @@ TinyMCE provides a <span style="text-decoration: underline;">full-featured</span
 <Story name="Disabling" args={controls} let:args>
   <div>
     <button on:click={toggleDisabled}>{#if disabled}Enable{:else}Disable{/if}</button>
-    <Editor {apiKey} {disabled} {value} {...args}/>
+    <button on:click={toggleReadonly}>{#if readonly}Not Readonly{:else}Readonly{/if}</button>
+    <Editor {apiKey} {disabled} {readonly} {value} {...args}/>
   </div>
 </Story>

From f2833fc56ef8cca2d8e50ccc9512bc2c4cd8b1f7 Mon Sep 17 00:00:00 2001
From: lorenzo-pomili <pomili.lorenzo85@gmail.com>
Date: Wed, 7 May 2025 08:02:53 +0200
Subject: [PATCH 02/12] TINY-11909: add changelog entries

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 886f263..9f39cb4 100644
--- a/CHANGELOG.md
+++ b/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

From f004f6fbd4f69dcf9a5c7e95841ee39dcb962069 Mon Sep 17 00:00:00 2001
From: lorenzo-pomili <pomili.lorenzo85@gmail.com>
Date: Wed, 7 May 2025 08:08:13 +0200
Subject: [PATCH 03/12] TINY-11909: split disable and readonly stories

---
 src/stories/Editor.stories.svelte | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/stories/Editor.stories.svelte b/src/stories/Editor.stories.svelte
index fca6463..36cc000 100644
--- a/src/stories/Editor.stories.svelte
+++ b/src/stories/Editor.stories.svelte
@@ -70,7 +70,13 @@ TinyMCE provides a <span style="text-decoration: underline;">full-featured</span
 <Story name="Disabling" args={controls} let:args>
   <div>
     <button on:click={toggleDisabled}>{#if disabled}Enable{:else}Disable{/if}</button>
+    <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} {disabled} {readonly} {value} {...args}/>
+    <Editor {apiKey} {readonly} {value} {...args}/>
   </div>
 </Story>

From 155e3ffebb5afd23b26b9fe0c6eb5a8c8b72deec Mon Sep 17 00:00:00 2001
From: lorenzo-pomili <pomili.lorenzo85@gmail.com>
Date: Wed, 7 May 2025 08:38:28 +0200
Subject: [PATCH 04/12] TINY-11909: fix check

---
 src/main/component/Editor.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/component/Editor.svelte b/src/main/component/Editor.svelte
index 08ff2d7..61f9350 100644
--- a/src/main/component/Editor.svelte
+++ b/src/main/component/Editor.svelte
@@ -98,7 +98,7 @@
     }
     if (editorRef && disabled !== disablindCache) {
       disablindCache = disabled;
-      if (typeof editorRef.mode?.set === 'function') {
+      if (typeof editorRef.options.set === 'function') {
         editorRef.options.set('disabled', disabled);
       } else {
         interface TinyMCEEditor4 extends TinyMCEEditor {

From 866400a56fe500bbca04c33adb5f96fdfbb29314 Mon Sep 17 00:00:00 2001
From: lorenzo-pomili <pomili.lorenzo85@gmail.com>
Date: Wed, 7 May 2025 09:54:14 +0200
Subject: [PATCH 05/12] TINY-11909: improvement

---
 src/main/component/Editor.svelte | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/main/component/Editor.svelte b/src/main/component/Editor.svelte
index 61f9350..54fd6d7 100644
--- a/src/main/component/Editor.svelte
+++ b/src/main/component/Editor.svelte
@@ -94,7 +94,14 @@
     }
     if (editorRef && readonly !== readonlyCache) {
       readonlyCache = readonly;
-      editorRef.mode.set(readonly ? 'readonly' : 'design');
+      if (typeof editorRef.mode?.set === 'function') {
+        editorRef.mode.set(readonly ? 'readonly' : 'design');
+      } else {
+        interface TinyMCEEditor4 extends TinyMCEEditor {
+          setMode: (input: string) => void
+        }
+        (editorRef as TinyMCEEditor4).setMode(disabled ? 'readonly' : 'design');
+      }
     }
     if (editorRef && disabled !== disablindCache) {
       disablindCache = disabled;

From f7ddab9c0f86c086e4cc6e8bac9888e7f4b79b51 Mon Sep 17 00:00:00 2001
From: lorenzo-pomili <pomili.lorenzo85@gmail.com>
Date: Tue, 13 May 2025 08:59:06 +0200
Subject: [PATCH 06/12] TINY-11909: add check for isDisabledOptionSupported

---
 src/main/component/Editor.svelte | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/main/component/Editor.svelte b/src/main/component/Editor.svelte
index 54fd6d7..c3b0596 100644
--- a/src/main/component/Editor.svelte
+++ b/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>,
@@ -94,7 +98,7 @@
     }
     if (editorRef && readonly !== readonlyCache) {
       readonlyCache = readonly;
-      if (typeof editorRef.mode?.set === 'function') {
+      if (typeof editorRef.mode?.set === 'function' && isDisabledOptionSupported(editorRef)) {
         editorRef.mode.set(readonly ? 'readonly' : 'design');
       } else {
         interface TinyMCEEditor4 extends TinyMCEEditor {
@@ -105,7 +109,7 @@
     }
     if (editorRef && disabled !== disablindCache) {
       disablindCache = disabled;
-      if (typeof editorRef.options.set === 'function') {
+      if (isDisabledOptionSupported(editorRef)) {
         editorRef.options.set('disabled', disabled);
       } else {
         interface TinyMCEEditor4 extends TinyMCEEditor {

From 3fc5cbf358c4cd73742b826968fb613b06231061 Mon Sep 17 00:00:00 2001
From: lorenzo-pomili <pomili.lorenzo85@gmail.com>
Date: Fri, 16 May 2025 09:16:24 +0200
Subject: [PATCH 07/12] TINY-11909: improvemente

---
 src/main/component/Editor.svelte | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/main/component/Editor.svelte b/src/main/component/Editor.svelte
index c3b0596..1eb28c1 100644
--- a/src/main/component/Editor.svelte
+++ b/src/main/component/Editor.svelte
@@ -100,11 +100,6 @@
       readonlyCache = readonly;
       if (typeof editorRef.mode?.set === 'function' && isDisabledOptionSupported(editorRef)) {
         editorRef.mode.set(readonly ? 'readonly' : 'design');
-      } else {
-        interface TinyMCEEditor4 extends TinyMCEEditor {
-          setMode: (input: string) => void
-        }
-        (editorRef as TinyMCEEditor4).setMode(disabled ? 'readonly' : 'design');
       }
     }
     if (editorRef && disabled !== disablindCache) {
@@ -112,10 +107,7 @@
       if (isDisabledOptionSupported(editorRef)) {
         editorRef.options.set('disabled', disabled);
       } else {
-        interface TinyMCEEditor4 extends TinyMCEEditor {
-          setMode: (input: string) => void
-        }
-        (editorRef as TinyMCEEditor4).setMode(disabled ? 'readonly' : 'design');
+        editorRef.mode.set(readonly ? 'readonly' : 'design');
       }
     }
   }

From 1b2dcc2d68d18ab8bbb5badb7eade81a8908512b Mon Sep 17 00:00:00 2001
From: lorenzo-pomili <pomili.lorenzo85@gmail.com>
Date: Fri, 16 May 2025 09:44:00 +0200
Subject: [PATCH 08/12] TINY-11909: refactor

---
 src/main/component/Editor.svelte | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/main/component/Editor.svelte b/src/main/component/Editor.svelte
index 1eb28c1..841f728 100644
--- a/src/main/component/Editor.svelte
+++ b/src/main/component/Editor.svelte
@@ -89,8 +89,22 @@
   let disablindCache = disabled;
   let readonlyCache = readonly;
   
+  const setReadonly = (editor: TinyMCEEditor, readonlyValue: boolean) => {
+    if (typeof editor.mode?.set === 'function' && isDisabledOptionSupported(editor)) {
+      editor.mode.set(readonlyValue ? 'readonly' : 'design');
+    }
+  }
+
+  const setDisabled = (editor: TinyMCEEditor, disabledValue: boolean, readonlyValue: boolean) => {
+    if (isDisabledOptionSupported(editor)) {
+        editor.options.set('disabled', disabledValue);
+      } else {
+        editor.mode.set(readonlyValue ? 'readonly' : 'design');
+      }
+  }
+
   const dispatch = createEventDispatcher();
-  
+
   $: {
     if (editorRef && lastVal !== value) {
       editorRef.setContent(value);
@@ -98,17 +112,11 @@
     }
     if (editorRef && readonly !== readonlyCache) {
       readonlyCache = readonly;
-      if (typeof editorRef.mode?.set === 'function' && isDisabledOptionSupported(editorRef)) {
-        editorRef.mode.set(readonly ? 'readonly' : 'design');
-      }
+      setReadonly(editorRef, readonly);
     }
     if (editorRef && disabled !== disablindCache) {
       disablindCache = disabled;
-      if (isDisabledOptionSupported(editorRef)) {
-        editorRef.options.set('disabled', disabled);
-      } else {
-        editorRef.mode.set(readonly ? 'readonly' : 'design');
-      }
+      setDisabled(editorRef, disabled, readonly);
     }
   }
   
@@ -126,11 +134,11 @@
       ...conf,
       target: element,
       inline: inline !== undefined ? inline : conf.inline !== undefined ? conf.inline : false,
-      readonly,
-      disabled,
       license_key: licenseKey,
       setup: (editor: TinyMCEEditor) => {
         editorRef = editor;
+        setDisabled(editorRef, disabled, readonly);
+        setReadonly(editorRef, readonly);
         editor.on('init', () => {
           editor.setContent(value);
           // bind model events

From b392a65b99f648f6f9ad9ce4f8dc967fa4d9c31a Mon Sep 17 00:00:00 2001
From: lorenzo-pomili <pomili.lorenzo85@gmail.com>
Date: Fri, 23 May 2025 16:06:13 +0200
Subject: [PATCH 09/12] TINY-11909: fix

---
 src/main/component/Editor.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/main/component/Editor.svelte b/src/main/component/Editor.svelte
index 841f728..c6361c7 100644
--- a/src/main/component/Editor.svelte
+++ b/src/main/component/Editor.svelte
@@ -95,11 +95,11 @@
     }
   }
 
-  const setDisabled = (editor: TinyMCEEditor, disabledValue: boolean, readonlyValue: boolean) => {
+  const setDisabled = (editor: TinyMCEEditor, disabledValue: boolean) => {
     if (isDisabledOptionSupported(editor)) {
         editor.options.set('disabled', disabledValue);
       } else {
-        editor.mode.set(readonlyValue ? 'readonly' : 'design');
+        editor.mode.set(disabledValue ? 'readonly' : 'design');
       }
   }
 
@@ -116,7 +116,7 @@
     }
     if (editorRef && disabled !== disablindCache) {
       disablindCache = disabled;
-      setDisabled(editorRef, disabled, readonly);
+      setDisabled(editorRef, disabled);
     }
   }
   
@@ -137,7 +137,7 @@
       license_key: licenseKey,
       setup: (editor: TinyMCEEditor) => {
         editorRef = editor;
-        setDisabled(editorRef, disabled, readonly);
+        setDisabled(editorRef, disabled);
         setReadonly(editorRef, readonly);
         editor.on('init', () => {
           editor.setContent(value);

From 45318dd48580cd5ce7e3e96877914579a3f04354 Mon Sep 17 00:00:00 2001
From: lorenzo-pomili <pomili.lorenzo85@gmail.com>
Date: Fri, 23 May 2025 16:12:57 +0200
Subject: [PATCH 10/12] TINY-11909: refactor

---
 src/main/component/Editor.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/main/component/Editor.svelte b/src/main/component/Editor.svelte
index c6361c7..6c53cc7 100644
--- a/src/main/component/Editor.svelte
+++ b/src/main/component/Editor.svelte
@@ -136,9 +136,11 @@
       inline: inline !== undefined ? inline : conf.inline !== undefined ? conf.inline : false,
       license_key: licenseKey,
       setup: (editor: TinyMCEEditor) => {
+        editor.on('PreInit', () => {
+          setDisabled(editor, disabled);
+          setReadonly(editor, readonly);
+        });
         editorRef = editor;
-        setDisabled(editorRef, disabled);
-        setReadonly(editorRef, readonly);
         editor.on('init', () => {
           editor.setContent(value);
           // bind model events

From 93a32fa5184e6e69b2e65589e097f0b75e092005 Mon Sep 17 00:00:00 2001
From: lorenzo-pomili <pomili.lorenzo85@gmail.com>
Date: Mon, 26 May 2025 09:43:41 +0200
Subject: [PATCH 11/12] TINY-11909: update version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 30e4c79..672988a 100644
--- a/package.json
+++ b/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": {

From c1cfc7b3f3045a33e22d3579132e61964a97312e Mon Sep 17 00:00:00 2001
From: tiny-ben-tran <ben.tran@tiny.cloud>
Date: Tue, 27 May 2025 11:18:13 +0930
Subject: [PATCH 12/12] Update src/main/component/Editor.svelte

---
 src/main/component/Editor.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/component/Editor.svelte b/src/main/component/Editor.svelte
index 6c53cc7..43ac3de 100644
--- a/src/main/component/Editor.svelte
+++ b/src/main/component/Editor.svelte
@@ -90,7 +90,7 @@
   let readonlyCache = readonly;
   
   const setReadonly = (editor: TinyMCEEditor, readonlyValue: boolean) => {
-    if (typeof editor.mode?.set === 'function' && isDisabledOptionSupported(editor)) {
+    if (typeof editor.mode?.set === 'function') {
       editor.mode.set(readonlyValue ? 'readonly' : 'design');
     }
   }