Merge pull request #58 from reedsy/image-fix

Fix image selection

Author: alecgibson

CHANGELOG.md

@@ -1,5 +1,7 @@
 # Unreleased
 
+- Fix inline image selection
+
 # 3.0.0
 
 - **BREAKING**: Remove most of the styling we'd previously applied to "core" Quill elements in order to stay as unopinionated as possible

src/quill-cursors/quill-cursors.spec.ts

@@ -335,7 +335,9 @@ describe('QuillCursors', () => {
 
       mockRange = {
         setStart: () => { },
+        setStartBefore: () => { },
         setEnd: () => { },
+        setEndAfter: () => { },
         getClientRects: () => {
           const rectangles: any[] = [];
           return rectangles;
@@ -482,6 +484,25 @@ describe('QuillCursors', () => {
       expect(mockRange.setStart).toHaveBeenCalledWith(line2Leaf[0].domNode, line2Leaf[1]);
       expect(mockRange.setEnd).toHaveBeenCalledWith(line1Leaf[0].domNode, line1Leaf[1]);
     });
+
+    it('sets the range on either side of an image', () => {
+      const startIndex = 0;
+      const endIndex = 1;
+      const leaf = createLeaf('img');
+      jest.spyOn(quill, 'getLeaf').mockImplementation(() => leaf);
+      jest.spyOn(quill, 'getLines').mockReturnValue([{
+        children: [],
+      }]);
+      jest.spyOn(mockRange, 'setStartBefore');
+      jest.spyOn(mockRange, 'setEndAfter');
+
+      const range = {index: startIndex, length: endIndex - startIndex};
+
+      cursors.moveCursor(cursor.id, range);
+
+      expect(mockRange.setStartBefore).toHaveBeenCalledWith(leaf[0].domNode);
+      expect(mockRange.setEndAfter).toHaveBeenCalledWith(leaf[0].domNode);
+    });
   });
 
   describe('flag', () => {
@@ -501,10 +522,8 @@ describe('QuillCursors', () => {
     });
   });
 
-  function createLeaf(): any[] {
-    return [
-      {domNode: document.createElement('DIV')},
-      0,
-    ];
+  function createLeaf(tag?: string): any[] {
+    const domNode = tag ? document.createElement(tag) : document.createTextNode('');
+    return [{domNode}, 0];
   }
 });

src/quill-cursors/quill-cursors.ts

@@ -210,8 +210,18 @@ export default class QuillCursors {
         line.path(line.length() - 1).pop();
 
       const range = document.createRange();
-      range.setStart(rangeStart.domNode, startOffset);
-      range.setEnd(rangeEnd.domNode, endOffset);
+
+      if (rangeStart.domNode.nodeType === Node.TEXT_NODE) {
+        range.setStart(rangeStart.domNode, startOffset);
+      } else {
+        range.setStartBefore(rangeStart.domNode);
+      }
+
+      if (rangeEnd.domNode.nodeType === Node.TEXT_NODE) {
+        range.setEnd(rangeEnd.domNode, endOffset);
+      } else {
+        range.setEndAfter(rangeEnd.domNode);
+      }
 
       return ranges.concat(range);
     }, []);