From a5a4a3f2aa0d85819136614fdabc6d49dacb236b Mon Sep 17 00:00:00 2001
From: Hamza Benkhaldoun <hamza0867@gmail.com>
Date: Wed, 12 Mar 2025 13:06:03 +0000
Subject: [PATCH 1/7] INT-3226: Fix onEditorChange called three times after
 inserting content on a selection

---
 src/main/ts/components/Editor.tsx         | 20 +++++++-----------
 src/stories/Editor.stories.tsx            |  6 ++++--
 src/test/ts/browser/EditorBehaviorTest.ts | 25 +++++++++++++++++++----
 3 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/src/main/ts/components/Editor.tsx b/src/main/ts/components/Editor.tsx
index e6c1d214..16f3a873 100644
--- a/src/main/ts/components/Editor.tsx
+++ b/src/main/ts/components/Editor.tsx
@@ -1,10 +1,12 @@
 import * as React from 'react';
+import type { Bookmark, EditorEvent, TinyMCE, Editor as TinyMCEEditor } from 'tinymce';
 import { IEvents } from '../Events';
 import { ScriptItem, ScriptLoader } from '../ScriptLoader2';
 import { getTinymce } from '../TinyMCE';
-import { isFunction, isTextareaOrInput, mergePlugins, uuid, configHandlers, isBeforeInputEventAvailable, isInDoc, setMode } from '../Utils';
+import { configHandlers, isBeforeInputEventAvailable, isFunction, isInDoc, isTextareaOrInput, mergePlugins, setMode, uuid } from '../Utils';
 import { EditorPropTypes, IEditorPropTypes } from './EditorPropTypes';
-import type { Bookmark, Editor as TinyMCEEditor, EditorEvent, TinyMCE } from 'tinymce';
+
+const changeEvents = 'change input compositionend setcontent CommentChange';
 
 type OmitStringIndexSignature<T> = { [K in keyof T as string extends K ? never : K]: T[K] };
 
@@ -241,7 +243,7 @@ export class Editor extends React.Component<IAllProps> {
   public componentWillUnmount() {
     const editor = this.editor;
     if (editor) {
-      editor.off(this.changeEvents(), this.handleEditorChange);
+      editor.off(changeEvents, this.handleEditorChange);
       editor.off(this.beforeInputEvent(), this.handleBeforeInput);
       editor.off('keypress', this.handleEditorChangeSpecial);
       editor.off('keydown', this.handleBeforeInputSpecial);
@@ -259,14 +261,6 @@ export class Editor extends React.Component<IAllProps> {
     return this.inline ? this.renderInline() : this.renderIframe();
   }
 
-  private changeEvents() {
-    const isIE = getTinymce(this.view)?.Env?.browser?.isIE();
-    return (isIE
-      ? 'change keyup compositionend setcontent CommentChange'
-      : 'change input compositionend setcontent CommentChange'
-    );
-  }
-
   private beforeInputEvent() {
     return isBeforeInputEventAvailable() ? 'beforeinput SelectionChange' : 'SelectionChange';
   }
@@ -335,13 +329,13 @@ export class Editor extends React.Component<IAllProps> {
       const wasControlled = isValueControlled(prevProps);
       const nowControlled = isValueControlled(this.props);
       if (!wasControlled && nowControlled) {
-        this.editor.on(this.changeEvents(), this.handleEditorChange);
+        this.editor.on(changeEvents, this.handleEditorChange);
         this.editor.on(this.beforeInputEvent(), this.handleBeforeInput);
         this.editor.on('keydown', this.handleBeforeInputSpecial);
         this.editor.on('keyup', this.handleEditorChangeSpecial);
         this.editor.on('NewBlock', this.handleEditorChange);
       } else if (wasControlled && !nowControlled) {
-        this.editor.off(this.changeEvents(), this.handleEditorChange);
+        this.editor.off(changeEvents, this.handleEditorChange);
         this.editor.off(this.beforeInputEvent(), this.handleBeforeInput);
         this.editor.off('keydown', this.handleBeforeInputSpecial);
         this.editor.off('keyup', this.handleEditorChangeSpecial);
diff --git a/src/stories/Editor.stories.tsx b/src/stories/Editor.stories.tsx
index 184f2596..145ccc5f 100644
--- a/src/stories/Editor.stories.tsx
+++ b/src/stories/Editor.stories.tsx
@@ -1,6 +1,6 @@
+import { StoryObj } from '@storybook/react';
 import React from 'react';
 import { EditorEvent, Events, Editor as TinyMCEEditor } from 'tinymce';
-import { StoryObj } from '@storybook/react';
 import { Editor, IAllProps } from '../main/ts/components/Editor';
 
 const apiKey = 'qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc';
@@ -60,7 +60,9 @@ export const ControlledInput: StoryObj<Editor> = {
         <Editor
           apiKey={apiKey}
           value={data}
-          onEditorChange={(e) => setData(e)}
+          onEditorChange={(e) => {
+            setData(e);
+          }}
         />
         <textarea
           style={{ width: '100%', height: '200px' }}
diff --git a/src/test/ts/browser/EditorBehaviorTest.ts b/src/test/ts/browser/EditorBehaviorTest.ts
index 3da988af..d715a6b4 100644
--- a/src/test/ts/browser/EditorBehaviorTest.ts
+++ b/src/test/ts/browser/EditorBehaviorTest.ts
@@ -1,13 +1,13 @@
-import * as Loader from '../alien/Loader';
 import { PlatformDetection } from '@ephox/sand';
+import * as Loader from '../alien/Loader';
 
 import { describe, it } from '@ephox/bedrock-client';
 
+import { Assertions, Waiter } from '@ephox/agar';
+import { TinyAssertions, TinySelections } from '@ephox/mcagar';
+import { EditorEvent, Events, Editor as TinyMCEEditor } from 'tinymce';
 import { getTinymce } from '../../../main/ts/TinyMCE';
 import { EventStore, VERSIONS } from '../alien/TestHelpers';
-import { Editor as TinyMCEEditor, EditorEvent, Events } from 'tinymce';
-import { Assertions, Waiter } from '@ephox/agar';
-import { TinyAssertions } from '@ephox/mcagar';
 
 type SetContentEvent = EditorEvent<Events.EditorEventMap['SetContent']>;
 
@@ -135,6 +135,23 @@ describe('EditorBehaviourTest', () => {
 
         eventStore.clearState();
       });
+      it.only('INT-3226: onEditorChange is triggered only twice after calling insertContent', async () => {
+        using ctx = await render({ onEditorChange: eventStore.createHandler('onEditorChange') });
+        const { editor } = ctx;
+        editor.setContent('<p>abc</p>');
+        await Waiter.pTryUntilPredicate('Editor content is set to correct value', () => ctx.editor.getContent() === '<p>abc</p>');
+        eventStore.clearState();
+        TinySelections.setSelection(editor, [ 0, 0 ], 1, [ 0, 0 ], 2);
+        editor.insertContent('e');
+        await Waiter.pTryUntilPredicate('Editor content is set to correct value', () => ctx.editor.getContent() === '<p>aec</p>');
+        eventStore.each<string>('onEditorChange', (events) => {
+          Assertions.assertEq(
+            'onEditorChange should have been triggered twice',
+            2,
+            events.length
+          );
+        });
+      });
     })
   );
 });

From 1b5fa578b2bbe8de4f3b885073e9555f46ab5344 Mon Sep 17 00:00:00 2001
From: Hamza Benkhaldoun <hamza0867@gmail.com>
Date: Wed, 12 Mar 2025 13:07:23 +0000
Subject: [PATCH 2/7] INT-3226: Add changelog entry

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 608d6db4..36ddd3e6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - Support for `react` version `^19.0.0` by updating the `react` and `react-dom` in the `peerDependencies` to `^19.0.0`
 
+### Fixed
+- onEditorChange called three times after calling `insertContent` on a selection. #INT-3226
+
 ## 6.0.0 - 2025-02-21
 
 ### Fixed

From d77285b5be06a0c886323012e16ba47ccdf37c5d Mon Sep 17 00:00:00 2001
From: Hamza Benkhaldoun <hamza0867@gmail.com>
Date: Wed, 12 Mar 2025 13:09:57 +0000
Subject: [PATCH 3/7] INT-3226: Fix lint issue

---
 src/test/ts/browser/EditorBehaviorTest.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/test/ts/browser/EditorBehaviorTest.ts b/src/test/ts/browser/EditorBehaviorTest.ts
index d715a6b4..ca6cd022 100644
--- a/src/test/ts/browser/EditorBehaviorTest.ts
+++ b/src/test/ts/browser/EditorBehaviorTest.ts
@@ -135,7 +135,7 @@ describe('EditorBehaviourTest', () => {
 
         eventStore.clearState();
       });
-      it.only('INT-3226: onEditorChange is triggered only twice after calling insertContent', async () => {
+      it('INT-3226: onEditorChange is triggered only twice after calling insertContent', async () => {
         using ctx = await render({ onEditorChange: eventStore.createHandler('onEditorChange') });
         const { editor } = ctx;
         editor.setContent('<p>abc</p>');

From b4007a3d2b8f48cc3b469abc24374835da3bbe61 Mon Sep 17 00:00:00 2001
From: Hamza Benkhaldoun <hamza0867@gmail.com>
Date: Tue, 18 Mar 2025 06:08:55 +0000
Subject: [PATCH 4/7] INT-3226: fix as per review

---
 src/main/ts/components/Editor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/ts/components/Editor.tsx b/src/main/ts/components/Editor.tsx
index 16f3a873..19f8be72 100644
--- a/src/main/ts/components/Editor.tsx
+++ b/src/main/ts/components/Editor.tsx
@@ -6,7 +6,7 @@ import { getTinymce } from '../TinyMCE';
 import { configHandlers, isBeforeInputEventAvailable, isFunction, isInDoc, isTextareaOrInput, mergePlugins, setMode, uuid } from '../Utils';
 import { EditorPropTypes, IEditorPropTypes } from './EditorPropTypes';
 
-const changeEvents = 'change input compositionend setcontent CommentChange';
+const changeEvents = 'change keyup compositionend setcontent CommentChange';
 
 type OmitStringIndexSignature<T> = { [K in keyof T as string extends K ? never : K]: T[K] };
 

From 06567e70b1690257e10bb8723899d37d55d38882 Mon Sep 17 00:00:00 2001
From: Hamza Benkhaldoun <hamza0867@gmail.com>
Date: Tue, 18 Mar 2025 06:20:28 +0000
Subject: [PATCH 5/7] INT-3226: Fix test case

---
 src/stories/Editor.stories.tsx            | 1 +
 src/test/ts/browser/EditorBehaviorTest.ts | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/stories/Editor.stories.tsx b/src/stories/Editor.stories.tsx
index 145ccc5f..e8f58489 100644
--- a/src/stories/Editor.stories.tsx
+++ b/src/stories/Editor.stories.tsx
@@ -61,6 +61,7 @@ export const ControlledInput: StoryObj<Editor> = {
           apiKey={apiKey}
           value={data}
           onEditorChange={(e) => {
+            console.log('change');
             setData(e);
           }}
         />
diff --git a/src/test/ts/browser/EditorBehaviorTest.ts b/src/test/ts/browser/EditorBehaviorTest.ts
index ca6cd022..72522f51 100644
--- a/src/test/ts/browser/EditorBehaviorTest.ts
+++ b/src/test/ts/browser/EditorBehaviorTest.ts
@@ -135,7 +135,7 @@ describe('EditorBehaviourTest', () => {
 
         eventStore.clearState();
       });
-      it('INT-3226: onEditorChange is triggered only twice after calling insertContent', async () => {
+      it('INT-3226: onEditorChange is triggered only once after calling insertContent', async () => {
         using ctx = await render({ onEditorChange: eventStore.createHandler('onEditorChange') });
         const { editor } = ctx;
         editor.setContent('<p>abc</p>');
@@ -146,8 +146,8 @@ describe('EditorBehaviourTest', () => {
         await Waiter.pTryUntilPredicate('Editor content is set to correct value', () => ctx.editor.getContent() === '<p>aec</p>');
         eventStore.each<string>('onEditorChange', (events) => {
           Assertions.assertEq(
-            'onEditorChange should have been triggered twice',
-            2,
+            'onEditorChange should have been triggered once',
+            1,
             events.length
           );
         });

From 61241face03de4904f297604f486ea125d076d27 Mon Sep 17 00:00:00 2001
From: Hamza Benkhaldoun <hamza0867@gmail.com>
Date: Tue, 18 Mar 2025 06:22:00 +0000
Subject: [PATCH 6/7] INT-3226: Remove console log

---
 src/stories/Editor.stories.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/stories/Editor.stories.tsx b/src/stories/Editor.stories.tsx
index e8f58489..145ccc5f 100644
--- a/src/stories/Editor.stories.tsx
+++ b/src/stories/Editor.stories.tsx
@@ -61,7 +61,6 @@ export const ControlledInput: StoryObj<Editor> = {
           apiKey={apiKey}
           value={data}
           onEditorChange={(e) => {
-            console.log('change');
             setData(e);
           }}
         />

From 63140fd87ec82795f91869478854d02974739a69 Mon Sep 17 00:00:00 2001
From: Hamza Benkhaldoun <hamza0867@gmail.com>
Date: Wed, 19 Mar 2025 09:10:16 +0000
Subject: [PATCH 7/7] Update CHANGELOG.md

Co-authored-by: spocke <johan.sorlin@tiny.cloud>
---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 36ddd3e6..94ff1744 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,7 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Support for `react` version `^19.0.0` by updating the `react` and `react-dom` in the `peerDependencies` to `^19.0.0`
 
 ### Fixed
-- onEditorChange called three times after calling `insertContent` on a selection. #INT-3226
+- The `onEditorChange` callback was called three times when content was inserted with `insertContent` editor API. #INT-3226
 
 ## 6.0.0 - 2025-02-21