Merge pull request #61 from imnapo/np/selection

feat: selection api

README.md

@@ -334,6 +334,39 @@ Format text at user’s current selection.
 _editor.current.format('color', 'red');
 ```
 ---
+## Selection Methods
+###  `getBounds(index: Number, length: Number = 0)`
+Retrieves the pixel position and dimensions of a selection at a given location.
+#### Example: 
+```
+const data = await _editor.current.getBounds(7);
+//Ex. Returns { height: 15, width: 0, left: 27, top: 31 }
+```
+---
+###  `getSelection(focus = false) : { index: Number, length: Number }`
+Retrieves the user’s selection range.
+#### Example: 
+```
+var range = await _editor.current.getSelection();
+if (range) {
+  if (range.length == 0) {
+    console.log('User cursor is at index', range.index);
+  } else {
+    var text = quill.getText(range.index, range.length);
+    console.log('User has highlighted: ', text);
+  }
+} else {
+  console.log('User cursor is not in editor');
+}
+```
+---
+###  `setSelection(index: Number, length: Number = 0, source: String = 'api')`
+Format text at user’s current selection.
+#### Example: 
+```
+_editor.current.setSelection(0, 5);
+```
+---
 ## Clipboard Methods
 ###  `dangerouslyPasteHTML(index: number, html: string)`
 Inserts content represented by HTML snippet into editor at a given index.

src/constants/editor/editor_js.ts

@@ -93,6 +93,29 @@ export const editor_js = `
     quill.clipboard.dangerouslyPasteHTML(index, html);
   }
 
+  var setSelection = function (index, length = 0, source = 'api') {
+    quill.setSelection(index, length, source);
+  }
+
+  var getBounds = function (key, index, length = 0) {
+    var boundsData = quill.getBounds(index, length);
+    var getBoundsJson = JSON.stringify({
+      type: 'get-bounds',
+      key: key,
+      data: boundsData });
+      sendMessage(getBoundsJson);
+  }
+
+  var getSelection = function (key, focus = false) {
+    var getSelectionData = quill.getSelection(focus);
+    var getSelectionJson = JSON.stringify({
+      type: 'get-selectoin',
+      key: key,
+      data: getSelectionData });
+      sendMessage(getSelectionJson);
+  }
+
+
   var getRequest = function (event) {
     var msg = JSON.parse(event.data);    
     switch (msg.command) {
@@ -120,6 +143,15 @@ export const editor_js = `
       case 'getText':
         getText(msg.key, msg.index, msg.length);
         break;
+      case 'getBounds':
+        getBounds(msg.key, msg.index, msg.length);
+        break;
+      case 'getSelection':
+        getSelection(msg.key, msg.focus);
+        break;
+      case 'setSelection':
+        setSelection(msg.index, msg.length, msg.source);   
+        break;
       case 'getHtml':
         getHtml(msg.key);
         break;

src/editor/quill-editor.tsx

@@ -190,6 +190,8 @@ export default class QuillEditor extends React.Component<
       case 'get-contents':
       case 'get-text':
       case 'get-length':
+      case 'get-bounds':
+      case 'get-selection':
       case 'get-html':
         if (response) {
           response.resolve(message.data);
@@ -247,6 +249,18 @@ export default class QuillEditor extends React.Component<
     return this.postAwait<any>({ command: 'getText', index, length });
   };
 
+  getBounds = (index: number, length?: number): Promise<any> => {
+    return this.postAwait<any>({ command: 'getBounds', index, length });
+  };
+
+  getSelection = (focus: boolean = false): Promise<any> => {
+    return this.postAwait<any>({ command: 'getSelection', focus });
+  };
+
+  setSelection = (index: number, length?: number, source?: String) => {
+    this.post({ command: 'setSelection', index, length, source });
+  };
+
   insertEmbed = (index: number, type: string, value: any) => {
     this.post({ command: 'insertEmbed', index, type, value });
   };