From 33a259d657718f3609f9db1bdd31eef986439dcc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Fri, 5 Aug 2022 11:09:36 +0300
Subject: [PATCH] Fixed #2829 - Editor | new selection-change event

---
 api-generator/components/editor.js | 31 ++++++++++++++++++++++++++---
 src/components/editor/Editor.d.ts  | 32 ++++++++++++++++++++++++++++++
 src/components/editor/Editor.vue   | 16 ++++++++++++++-
 src/views/editor/EditorDoc.vue     | 11 +++++++---
 4 files changed, 83 insertions(+), 7 deletions(-)

diff --git a/api-generator/components/editor.js b/api-generator/components/editor.js
index 0873cc697..f72737ef1 100644
--- a/api-generator/components/editor.js
+++ b/api-generator/components/editor.js
@@ -64,13 +64,38 @@ const EditorEvents = [
         ]
     },
     {
-        name: "input",
-        description: "Callback to invoke when text of editor changes.",
+        name: "selection-change",
+        description: "Callback to invoke when selection of the text changes.",
         arguments: [
             {
-                name: "event",
+                name: "event.range",
                 type: "object",
+                description: "Representation of the selection boundaries."
+            },
+            {
+                name: "event.oldRange",
+                type: "string",
+                description: 'Representation of the previous selection boundaries.'
+            },
+            {
+                name: "event.source",
+                type: "string",
+                description: 'Source of change. Will be either "user" or "api".'
+            },
+            {
+                name: "event.htmlValue",
+                type: "string",
                 description: "Current value as html."
+            },
+            {
+                name: "event.textValue",
+                type: "string",
+                description: "Current value as text."
+            },
+            {
+                name: "event.instance",
+                type: "object",
+                description: "Text editor instance."
             }
         ]
     }
diff --git a/src/components/editor/Editor.d.ts b/src/components/editor/Editor.d.ts
index fe9b26e1f..26e261053 100755
--- a/src/components/editor/Editor.d.ts
+++ b/src/components/editor/Editor.d.ts
@@ -24,6 +24,33 @@ export interface EditorTextChangeEvent {
     instance: any;
 }
 
+export interface EditorSelectionChangeEvent {
+    /**
+     * Current value as html.
+     */
+    htmlValue: string;
+    /**
+     * Current value as text.
+     */
+    textValue: any;
+    /**
+     * Representation of the selection boundaries.
+     */
+    range: any;
+    /**
+     * Representation of the previous selection boundaries.
+     */
+    oldRange: any;
+    /**
+     * Source of change. Will be either 'user' or 'api'.
+     */
+    source: string;
+    /**
+     * Text editor instance.
+     */
+    instance: any;
+}
+
 export interface EditorProps {
     /**
      * Value of the content.
@@ -65,6 +92,11 @@ export declare type EditorEmits = {
      * @param {EditorTextChangeEvent} event - Custom text change event.
      */
     'text-change': (event: EditorTextChangeEvent) => void;
+    /**
+     * Callback to invoke when selection of the text changes.
+     * @param {EditorSelectionChangeEvent} event - Custom selection change event.
+     */
+    'selection-change': (event: EditorTextChangeEvent) => void;
 }
 
 declare class Editor extends ClassComponent<EditorProps, EditorSlots, EditorEmits> { }
diff --git a/src/components/editor/Editor.vue b/src/components/editor/Editor.vue
index 88719b841..9137581c6 100755
--- a/src/components/editor/Editor.vue
+++ b/src/components/editor/Editor.vue
@@ -52,7 +52,7 @@ import Quill from "quill";
 
 export default {
     name: 'Editor',
-    emits: ['update:modelValue', 'text-change'],
+    emits: ['update:modelValue', 'text-change', 'selection-change'],
     props: {
         modelValue: String,
         placeholder: String,
@@ -99,6 +99,20 @@ export default {
                 });
             }
         });
+
+        this.quill.on('selection-change', (range, oldRange, source) => {
+            let html = this.$refs.editorElement.children[0].innerHTML;
+            let text = this.quill.getText().trim();
+            
+            this.$emit('selection-change', {
+                htmlValue: html,
+                textValue: text,
+                range: range,
+                oldRange: oldRange,
+                source: source,
+                instance: this.quill
+            })
+        });
     },
     methods: {
         renderValue(value) {
diff --git a/src/views/editor/EditorDoc.vue b/src/views/editor/EditorDoc.vue
index ef613e6be..e16487c50 100755
--- a/src/views/editor/EditorDoc.vue
+++ b/src/views/editor/EditorDoc.vue
@@ -103,9 +103,14 @@ import Editor from 'primevue/editor';
                         <td>Callback to invoke when text of editor changes.</td>
                     </tr>
                     <tr>
-                        <td>input</td>
-                        <td>event: Current value as html.</td>
-                        <td>Callback to invoke when text of editor changes.</td>
+                        <td>selection-change</td>
+                        <td>event.range: Representation of the selection boundaries.<br/>
+                            event.oldRange: Representation of the previous selection boundaries.<br/>
+                            event.source: Source of change. Will be either "user" or "api".<br/>
+                            event.htmlValue: Current value as html.<br/>
+                            event.textValue: Current value as text.<br/>
+                            event.instance: Text editor instance.</td>
+                        <td>Callback to invoke when selection of the text changes.</td>
                     </tr>
 				</tbody>
 			</table>