Unstyle empty list item on Enter key (#769)

Summary: **Summary** This appears to be standard functionality in text editors. If the list item has no text and the user pressed `Enter`, rather than creating a new list item, the current one should simply be removed. This is how it works in Google Docs, TextEdit, etc. **Test Plan** 1. Open the Rich Text editor example. 2. Create a list item. Don't add any text to it. 3. Press enter The list item should be removed. Pull Request resolved: #769 Reviewed By: flarnie Differential Revision: D10371552 Pulled By: flarnie fbshipit-source-id: aa975e465c5cdbb1a8def62ba079545836211152
facebookarchive · Oct 15, 2018 · a0267a9 · a0267a9
1 parent 9a96ab0
commit a0267a9
Show file tree

Hide file tree

Showing 3 changed files with 330 additions and 2 deletions.
diff --git a/src/model/transaction/__tests__/__snapshots__/splitBlockInContentState-test.js.snap b/src/model/transaction/__tests__/__snapshots__/splitBlockInContentState-test.js.snap
@@ -1,5 +1,229 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`must convert empty list item ContentBlock to unstyled rather than split 1`] = `
+Array [
+  Object {
+    "characterList": Array [
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+    ],
+    "children": Array [],
+    "data": Object {},
+    "depth": 0,
+    "key": "A",
+    "nextSibling": "B",
+    "parent": null,
+    "prevSibling": null,
+    "text": "Alpha",
+    "type": "unstyled",
+  },
+  Object {
+    "characterList": Array [],
+    "children": Array [
+      "C",
+      "F",
+    ],
+    "data": Object {},
+    "depth": 0,
+    "key": "B",
+    "nextSibling": "G",
+    "parent": null,
+    "prevSibling": "A",
+    "text": "",
+    "type": "unstyled",
+  },
+  Object {
+    "characterList": Array [],
+    "children": Array [
+      "D",
+      "E",
+    ],
+    "data": Object {},
+    "depth": 0,
+    "key": "C",
+    "nextSibling": "F",
+    "parent": "B",
+    "prevSibling": null,
+    "text": "",
+    "type": "unstyled",
+  },
+  Object {
+    "characterList": Array [
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+    ],
+    "children": Array [],
+    "data": Object {},
+    "depth": 0,
+    "key": "D",
+    "nextSibling": "E",
+    "parent": "C",
+    "prevSibling": null,
+    "text": "Delta",
+    "type": "unstyled",
+  },
+  Object {
+    "characterList": Array [
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+    ],
+    "children": Array [],
+    "data": Object {},
+    "depth": 0,
+    "key": "E",
+    "nextSibling": null,
+    "parent": "C",
+    "prevSibling": "D",
+    "text": "Elephant",
+    "type": "unstyled",
+  },
+  Object {
+    "characterList": Array [
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+    ],
+    "children": Array [],
+    "data": Object {},
+    "depth": 0,
+    "key": "F",
+    "nextSibling": null,
+    "parent": "B",
+    "prevSibling": "C",
+    "text": "Fire",
+    "type": "unstyled",
+  },
+  Object {
+    "characterList": Array [
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+      Object {
+        "entity": null,
+        "style": Array [],
+      },
+    ],
+    "children": Array [],
+    "data": Object {},
+    "depth": 0,
+    "key": "G",
+    "nextSibling": null,
+    "parent": null,
+    "prevSibling": "B",
+    "text": "Gorila",
+    "type": "unstyled",
+  },
+  Object {
+    "characterList": Array [],
+    "children": Array [],
+    "data": Object {},
+    "depth": 0,
+    "key": "H",
+    "nextSibling": null,
+    "parent": null,
+    "prevSibling": "G",
+    "text": "",
+    "type": "unstyled",
+  },
+]
+`;
+
 exports[`must split at the beginning of a block 1`] = `
 Array [
   Object {
@@ -395,6 +619,18 @@ Array [
     "text": "Gorila",
     "type": "unstyled",
   },
+  Object {
+    "characterList": Array [],
+    "children": Array [],
+    "data": Object {},
+    "depth": 0,
+    "key": "H",
+    "nextSibling": null,
+    "parent": null,
+    "prevSibling": "G",
+    "text": "",
+    "type": "unordered-list-item",
+  },
 ]
 `;
 
@@ -619,6 +855,18 @@ Array [
     "text": "Gorila",
     "type": "unstyled",
   },
+  Object {
+    "characterList": Array [],
+    "children": Array [],
+    "data": Object {},
+    "depth": 0,
+    "key": "H",
+    "nextSibling": null,
+    "parent": null,
+    "prevSibling": "G",
+    "text": "",
+    "type": "unordered-list-item",
+  },
 ]
 `;
 
@@ -1017,6 +1265,18 @@ Array [
     "text": "Gorila",
     "type": "unstyled",
   },
+  Object {
+    "characterList": Array [],
+    "children": Array [],
+    "data": Object {},
+    "depth": 0,
+    "key": "H",
+    "nextSibling": null,
+    "parent": null,
+    "prevSibling": "G",
+    "text": "",
+    "type": "unordered-list-item",
+  },
 ]
 `;
 
@@ -1241,6 +1501,18 @@ Array [
     "text": "Gorila",
     "type": "unstyled",
   },
+  Object {
+    "characterList": Array [],
+    "children": Array [],
+    "data": Object {},
+    "depth": 0,
+    "key": "H",
+    "nextSibling": null,
+    "parent": null,
+    "prevSibling": "G",
+    "text": "",
+    "type": "unordered-list-item",
+  },
 ]
 `;
 
@@ -1641,6 +1913,18 @@ Array [
     "text": "Gorila",
     "type": "unstyled",
   },
+  Object {
+    "characterList": Array [],
+    "children": Array [],
+    "data": Object {},
+    "depth": 0,
+    "key": "H",
+    "nextSibling": null,
+    "parent": null,
+    "prevSibling": "G",
+    "text": "",
+    "type": "unordered-list-item",
+  },
 ]
 `;
 
@@ -1866,5 +2150,17 @@ Array [
     "text": "Gorila",
     "type": "unstyled",
   },
+  Object {
+    "characterList": Array [],
+    "children": Array [],
+    "data": Object {},
+    "depth": 0,
+    "key": "H",
+    "nextSibling": null,
+    "parent": null,
+    "prevSibling": "G",
+    "text": "",
+    "type": "unordered-list-item",
+  },
 ]
 `;
diff --git a/src/model/transaction/__tests__/splitBlockInContentState-test.js b/src/model/transaction/__tests__/splitBlockInContentState-test.js
@@ -70,6 +70,12 @@ const contentBlockNodes = [
     prevSibling: 'B',
     text: 'Gorila',
   }),
+  new ContentBlockNode({
+    key: 'H',
+    prevSibling: 'G',
+    text: '',
+    type: 'unordered-list-item',
+  }),
 ];
 const treeSelectionState = SelectionState.createEmpty('A');
 const treeContentState = contentState.set(
@@ -208,3 +214,15 @@ test('must split at the end of a nested ContentBlock', () => {
     treeContentState,
   );
 });
+
+test('must convert empty list item ContentBlock to unstyled rather than split', () => {
+  assertSplitBlockInContentState(
+    treeSelectionState.merge({
+      anchorOffset: 0,
+      focusOffset: 0,
+      anchorKey: 'H',
+      focusKey: 'H',
+    }),
+    treeContentState,
+  );
+});