From ae7bb73b76bb52f681ef3dbb0f8e2b1ad47496c8 Mon Sep 17 00:00:00 2001
From: Midas <midas19910709@gmail.com>
Date: Mon, 16 Oct 2017 17:50:28 -0700
Subject: [PATCH] Fix rich text utils backspace not clearing the block type at
 the start.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Summary:
**Summary**

When backspacing at the start of the first block using rich text utils, the block type should be cleared.

Example of me frantically trying to clear the first block type **without** this PR by pressing backspace at the beginning of the document:

![clear-first-block-type](https://cloud.githubusercontent.com/assets/424704/19821170/d3296d9a-9d11-11e6-990d-e2277bbfb833.gif)

Followed by an example of me clearing the first block type **with** this PR:

![clear-first-block-type-working](https://cloud.githubusercontent.com/assets/424704/19821197/01b4826c-9d12-11e6-853b-32417ec93f10.gif)

**Test Plan**
- Pull master.
- Open the rich text example.
- Create a list.
- Put your cursor at the first offset of the first block, backspace to reset the block type, notice that it doesn't work.
- Pull this branch.
- Open the rich text example.
- Create a list.
- Put your cursor at the first offset of the first block, backspace to reset the block type, rejoice in joy as the list item disappears.
- Celebrate. 🎉
Closes https://github.com/facebook/draft-js/pull/748

Differential Revision: D6065808

fbshipit-source-id: d4b9028e255be1bdf405cf228cfd16c877872c95
---
 src/model/modifier/RichTextEditorUtil.js      | 10 ++++----
 .../__tests__/RichTextEditorUtil-test.js      | 23 ++++++++++++++++++-
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/model/modifier/RichTextEditorUtil.js b/src/model/modifier/RichTextEditorUtil.js
index 9cbfdba..d3b7a7b 100644
--- a/src/model/modifier/RichTextEditorUtil.js
+++ b/src/model/modifier/RichTextEditorUtil.js
@@ -380,9 +380,9 @@ const RichTextEditorUtil = {
   },
 
   /**
-   * When a collapsed cursor is at the start of an empty styled block, 
-   * changes block to 'unstyled'. Returns null if block or selection does not
-   * meet that criteria.
+   * When a collapsed cursor is at the start of the first styled block, or 
+   * an empty styled block, changes block to 'unstyled'. Returns null if 
+   * block or selection does not meet that criteria.
    */
   tryToRemoveBlockStyle: function(editorState: EditorState): ?ContentState {
     var selection = editorState.getSelection();
@@ -391,7 +391,9 @@ const RichTextEditorUtil = {
       var key = selection.getAnchorKey();
       var content = editorState.getCurrentContent();
       var block = content.getBlockForKey(key);
-      if (block.getLength() > 0) {
+
+      var firstBlock = content.getFirstBlock();
+      if (block.getLength() > 0 && block !== firstBlock) {
         return null;
       }
 
diff --git a/src/model/modifier/__tests__/RichTextEditorUtil-test.js b/src/model/modifier/__tests__/RichTextEditorUtil-test.js
index e6d74e7..6f9b508 100644
--- a/src/model/modifier/__tests__/RichTextEditorUtil-test.js
+++ b/src/model/modifier/__tests__/RichTextEditorUtil-test.js
@@ -63,7 +63,7 @@ describe('RichTextEditorUtil', () => {
 
       // Remove the current text from the blockquote.
       const resetBlockquote = DraftModifier.removeRange(
-        editorState.getCurrentContent(),
+        contentState,
         new SelectionState({
           anchorKey: lastBlockKey,
           anchorOffset: 0,
@@ -86,6 +86,27 @@ describe('RichTextEditorUtil', () => {
       expect(lastBlockNow.getText()).toBe('');
     });
 
+    it('resets the current block type at the start of the first block', () => {
+      const contentState = editorState.getCurrentContent();
+
+      const setListItem = DraftModifier.setBlockType(
+        contentState,
+        selectionState,
+        'unordered-list-item',
+      );
+
+      const withListItem = EditorState.push(
+        editorState,
+        setListItem,
+        'change-block-type',
+      );
+
+      const afterBackspace = onBackspace(withListItem);
+      const firstBlockNow = afterBackspace.getCurrentContent().getFirstBlock();
+
+      expect(firstBlockNow.getType()).toBe('unstyled');
+    });
+
     it('removes a preceding atomic block', () => {
       const withAtomicBlock = insertAtomicBlock(editorState);
       const afterBackspace = onBackspace(withAtomicBlock);