Fixed #2829 - Editor | new selection-change event

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."
             }
         ]
     }

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> { }

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) {

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>