Fix DraftTreeAdapter to respect the tree invariants

Summary:
`DraftTreeAdapter` is called to convert list-data style Content Blocks into a valid Tree Data structure.

* The Tree Data structure has an invariant that only leaf nodes (i.e. nodes with no children) can have text in them. To respect this invariant, we need to create a new parent block at each level of a nested list. By implementing this, we fix a bug with the rendering of nested lists.
* Also adds the tree invariant check in DEV mode in `convertFromRawToDraftState` (which calls the tree adapter) to flag if this structure breaks again due to any updates.
* Re-record snapshot for `DraftTreeAdapter-test.js` and `convertFromRawToDraftState-test.js`

Reviewed By: mitermayer

Differential Revision: D9524985

fbshipit-source-id: f5828dfb5f12cb4e34c8511456a79457c1a09808

Author: niveditc

src/component/utils/exploration/DraftTreeAdapter.js

@@ -16,6 +16,8 @@
 import type {RawDraftContentBlock} from 'RawDraftContentBlock';
 import type {RawDraftContentState} from 'RawDraftContentState';
 
+const generateRandomKey = require('generateRandomKey');
+const idx = require('idx');
 const invariant = require('invariant');
 
 const traverseInDepthOrder = (
@@ -62,7 +64,7 @@ const addDepthToChildren = (block: RawDraftContentBlock) => {
  */
 const DraftTreeAdapter = {
   /**
-   * Converts from a tree raw state back to  draft raw state
+   * Converts from a tree raw state back to draft raw state
    */
   fromRawTreeStateToRawState(
     draftTreeState: RawDraftContentState,
@@ -123,12 +125,30 @@ const DraftTreeAdapter = {
         return;
       }
 
-      // update our depth cache reference path
-      lastListDepthCacheRef[depth] = treeBlock;
-
-      // if we are greater than zero we must have seen a parent already
+      // nesting
       if (depth > 0) {
-        const parent = lastListDepthCacheRef[depth - 1];
+        let parent = idx(lastListDepthCacheRef, _ => _[depth - 1]);
+        if (parent == null) {
+          parent = {
+            key: generateRandomKey(),
+            text: '',
+            depth: depth - 1,
+            type: block.type,
+            children: [],
+            entityRanges: [],
+            inlineStyleRanges: [],
+          };
+
+          lastListDepthCacheRef[depth - 1] = parent;
+          if (depth === 1) {
+            // add as a root-level block
+            transformedBlocks.push(parent);
+          } else {
+            // depth > 1 => also add as previous parent's child
+            const grandparent = lastListDepthCacheRef[depth - 2];
+            grandparent.children.push(parent);
+          }
+        }
 
         invariant(parent, 'Invalid depth for RawDraftContentBlock');
 

src/component/utils/exploration/__tests__/DraftTreeAdapter-test.js

@@ -14,6 +14,8 @@
 
 jest.disableAutomock();
 
+jest.mock('generateRandomKey');
+
 const DraftTreeAdapter = require('DraftTreeAdapter');
 
 const assertFromRawTreeStateToRawState = rawState => {

src/component/utils/exploration/__tests__/__snapshots__/DraftTreeAdapter-test.js.snap

@@ -26,8 +26,22 @@ Object {
 exports[`must be able to convert from raw state to raw tree state with nested trees based on lists depth 1`] = `
 Object {
   "blocks": Array [
+    Object {
+      "children": Array [],
+      "depth": 0,
+      "key": "A",
+      "text": "Alpha",
+      "type": "ordered-list-item",
+    },
     Object {
       "children": Array [
+        Object {
+          "children": Array [],
+          "depth": 1,
+          "key": "B",
+          "text": "Beta",
+          "type": "ordered-list-item",
+        },
         Object {
           "children": Array [
             Object {
@@ -39,8 +53,10 @@ Object {
             },
           ],
           "depth": 1,
-          "key": "B",
-          "text": "Beta",
+          "entityRanges": Array [],
+          "inlineStyleRanges": Array [],
+          "key": "key1",
+          "text": "",
           "type": "ordered-list-item",
         },
         Object {
@@ -52,8 +68,10 @@ Object {
         },
       ],
       "depth": 0,
-      "key": "A",
-      "text": "Alpha",
+      "entityRanges": Array [],
+      "inlineStyleRanges": Array [],
+      "key": "key0",
+      "text": "",
       "type": "ordered-list-item",
     },
   ],
@@ -64,6 +82,13 @@ Object {
 exports[`must be able to convert from raw state to raw tree state with nested trees based on lists depth and attach nested blocks to closest depth parent 1`] = `
 Object {
   "blocks": Array [
+    Object {
+      "children": Array [],
+      "depth": 0,
+      "key": "A",
+      "text": "Alpha",
+      "type": "ordered-list-item",
+    },
     Object {
       "children": Array [
         Object {
@@ -73,6 +98,13 @@ Object {
           "text": "Beta",
           "type": "ordered-list-item",
         },
+        Object {
+          "children": Array [],
+          "depth": 1,
+          "key": "C",
+          "text": "Charlie",
+          "type": "ordered-list-item",
+        },
         Object {
           "children": Array [
             Object {
@@ -84,14 +116,18 @@ Object {
             },
           ],
           "depth": 1,
-          "key": "C",
-          "text": "Charlie",
+          "entityRanges": Array [],
+          "inlineStyleRanges": Array [],
+          "key": "key3",
+          "text": "",
           "type": "ordered-list-item",
         },
       ],
       "depth": 0,
-      "key": "A",
-      "text": "Alpha",
+      "entityRanges": Array [],
+      "inlineStyleRanges": Array [],
+      "key": "key2",
+      "text": "",
       "type": "ordered-list-item",
     },
   ],

src/model/encoding/__tests__/__snapshots__/convertFromRawToDraftState-test.js.snap

@@ -282,28 +282,24 @@ exports[`must be able to convert content blocks that have list with depth from r
 Object {
   "A": Object {
     "characterList": Array [],
-    "children": Array [
-      "B",
-    ],
+    "children": Array [],
     "data": Object {},
     "depth": 0,
     "key": "A",
-    "nextSibling": null,
+    "nextSibling": "key0",
     "parent": null,
     "prevSibling": null,
     "text": "",
     "type": "ordered-list-item",
   },
   "B": Object {
     "characterList": Array [],
-    "children": Array [
-      "C",
-    ],
+    "children": Array [],
     "data": Object {},
     "depth": 1,
     "key": "B",
-    "nextSibling": null,
-    "parent": "A",
+    "nextSibling": "key1",
+    "parent": "key0",
     "prevSibling": null,
     "text": "",
     "type": "ordered-list-item",
@@ -388,11 +384,40 @@ Object {
     "depth": 2,
     "key": "C",
     "nextSibling": null,
-    "parent": "B",
+    "parent": "key1",
     "prevSibling": null,
     "text": "deeply nested list",
     "type": "ordered-list-item",
   },
+  "key0": Object {
+    "characterList": Array [],
+    "children": Array [
+      "B",
+      "key1",
+    ],
+    "data": Object {},
+    "depth": 0,
+    "key": "key0",
+    "nextSibling": null,
+    "parent": null,
+    "prevSibling": "A",
+    "text": "",
+    "type": "ordered-list-item",
+  },
+  "key1": Object {
+    "characterList": Array [],
+    "children": Array [
+      "C",
+    ],
+    "data": Object {},
+    "depth": 1,
+    "key": "key1",
+    "nextSibling": null,
+    "parent": "key0",
+    "prevSibling": "B",
+    "text": "",
+    "type": "ordered-list-item",
+  },
 }
 `;
 

src/model/encoding/__tests__/convertFromRawToDraftState-test.js

@@ -14,6 +14,8 @@
 
 jest.disableAutomock();
 
+jest.mock('generateRandomKey');
+
 const convertFromRawToDraftState = require('convertFromRawToDraftState');
 
 const toggleExperimentalTreeDataSupport = enabled => {

src/model/encoding/convertFromRawToDraftState.js

@@ -23,14 +23,15 @@ const ContentBlockNode = require('ContentBlockNode');
 const ContentState = require('ContentState');
 const DraftEntity = require('DraftEntity');
 const DraftTreeAdapter = require('DraftTreeAdapter');
-const Immutable = require('immutable');
+const DraftTreeInvariants = require('DraftTreeInvariants');
 const SelectionState = require('SelectionState');
 
 const createCharacterList = require('createCharacterList');
 const decodeEntityRanges = require('decodeEntityRanges');
 const decodeInlineStyleRanges = require('decodeInlineStyleRanges');
 const generateRandomKey = require('generateRandomKey');
 const gkx = require('gkx');
+const Immutable = require('immutable');
 const invariant = require('invariant');
 
 const experimentalTreeDataSupport = gkx('draft_tree_data_support');
@@ -228,7 +229,15 @@ const decodeRawBlocks = (
     );
   }
 
-  return decodeContentBlockNodes(rawBlocks, entityMap);
+  const blockMap = decodeContentBlockNodes(rawBlocks, entityMap);
+  // in dev mode, check that the tree invariants are met
+  if (__DEV__) {
+    invariant(
+      DraftTreeInvariants.isValidTree(blockMap),
+      'Should be a valid tree',
+    );
+  }
+  return blockMap;
 };
 
 const decodeRawEntityMap = (rawState: RawDraftContentState): * => {