Fixes some edge cases on entity selection

springload · Nov 21, 2018 · ce6e97c · ce6e97c
1 parent 766249c
commit ce6e97c
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 5 deletions.
diff --git a/lib/api/DraftUtils.js b/lib/api/DraftUtils.js
@@ -66,6 +66,11 @@ export default {
     const selectionState = editorState.getSelection();
     const block = this.getSelectedBlock(editorState);
     let entityRange;
+
+    if (!entityKey) {
+      return selectionState;
+    }
+
     // https://github.com/jpuri/draftjs-utils/blob/e81c0ae19c3b0fdef7e0c1b70d924398956be126/js/inline.js#L111
     block.findEntityRanges(
       (value) => value.get("entity") === entityKey,
@@ -77,9 +82,17 @@ export default {
       },
     );
 
+    if (!entityRange) {
+      return selectionState;
+    }
+
     return selectionState.merge({
-      anchorOffset: entityRange.start,
-      focusOffset: entityRange.end,
+      anchorOffset: selectionState.isBackward
+        ? entityRange.end
+        : entityRange.start,
+      focusOffset: selectionState.isBackward
+        ? entityRange.start
+        : entityRange.end,
     });
   },
 

diff --git a/lib/api/DraftUtils.test.js b/lib/api/DraftUtils.test.js
@@ -151,14 +151,22 @@ describe("DraftUtils", () => {
   });
 
   describe("#getEntitySelection", () => {
+    let contentBlocks;
+    let contentState;
+    let editorState;
+
+    beforeEach(() => {
+      contentBlocks = convertFromHTML("<h1>aaaaaaaaaa</h1>");
+      contentState = ContentState.createFromBlockArray(contentBlocks);
+      editorState = EditorState.createWithContent(contentState);
+    });
+
     it("works", () => {
-      const contentBlocks = convertFromHTML("<h1>aaaaaaaaaa</h1>");
-      const contentState = ContentState.createFromBlockArray(contentBlocks);
-      let editorState = EditorState.createWithContent(contentState);
       const updatedSelection = editorState.getSelection().merge({
         anchorOffset: 0,
         focusOffset: 5,
       });
+
       const contentStateWithEntity = contentState.createEntity(
         "LINK",
         "MUTABLE",
@@ -179,6 +187,55 @@ describe("DraftUtils", () => {
         focusOffset: 5,
       });
     });
+
+    it("entity not found should not change selection", () => {
+      const contentStateWithEntity = contentState.createEntity(
+        "LINK",
+        "MUTABLE",
+        { url: "www.testing.com" },
+      );
+      const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+
+      const entitySelection = DraftUtils.getEntitySelection(
+        editorState,
+        entityKey,
+      );
+      expect(entitySelection.toJS()).toEqual(editorState.getSelection().toJS());
+    });
+
+    it("selected a null entity key should not change selection", () => {
+      const entitySelection = DraftUtils.getEntitySelection(editorState, null);
+
+      expect(entitySelection.toJS()).toEqual(editorState.getSelection().toJS());
+    });
+
+    it("selection backwards", () => {
+      const updatedSelection = editorState.getSelection().merge({
+        anchorOffset: 5,
+        focusOffset: 0,
+        isBackward: true,
+      });
+      const contentStateWithEntity = contentState.createEntity(
+        "LINK",
+        "MUTABLE",
+        { url: "www.testing.com" },
+      );
+      const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+      editorState = RichUtils.toggleLink(
+        editorState,
+        updatedSelection,
+        entityKey,
+      );
+      const entitySelection = DraftUtils.getEntitySelection(
+        editorState,
+        entityKey,
+      );
+      expect(entitySelection.toJS()).toMatchObject({
+        anchorOffset: 5,
+        focusOffset: 0,
+        isBackward: true,
+      });
+    });
   });
 
   describe("#updateBlockEntity", () => {