Skip rendering ListNestingStyles when below the default Draft.js max depth

Author: thibaudcolas

src/components/DraftailEditor.test.tsx

@@ -299,10 +299,18 @@ describe("DraftailEditor", () => {
     });
   });
 
-  it("#maxListNesting", () => {
-    expect(
-      shallowNoLifecycle(<DraftailEditor maxListNesting={6} />),
-    ).toMatchSnapshot();
+  describe("#maxListNesting", () => {
+    it("renders when 6", () => {
+      expect(
+        shallowNoLifecycle(<DraftailEditor maxListNesting={6} />),
+      ).toMatchSnapshot();
+    });
+
+    it("skips when 1", () => {
+      expect(
+        shallowNoLifecycle(<DraftailEditor maxListNesting={1} />),
+      ).toMatchSnapshot();
+    });
   });
 
   describe("#onSave", () => {

src/components/DraftailEditor.tsx

@@ -14,6 +14,7 @@ import { condenseBlocks } from "draftjs-filters";
 // @ts-ignore
 import Editor from "draft-js-plugins-editor";
 import {
+  DRAFT_DEFAULT_MAX_DEPTH,
   registerCopySource,
   handleDraftEditorPastedText,
   createEditorStateFromRaw,
@@ -1140,7 +1141,9 @@ class DraftailEditor extends Component<
           placeholder={placeholder}
         />
 
-        <ListNestingStyles max={maxListNesting} />
+        {maxListNesting > DRAFT_DEFAULT_MAX_DEPTH ? (
+          <ListNestingStyles max={maxListNesting} />
+        ) : null}
       </div>
     );
   }

src/components/__snapshots__/DraftailEditor.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DraftailEditor #maxListNesting 1`] = `
+exports[`DraftailEditor #maxListNesting renders when 6 1`] = `
 <div
   className="Draftail-Editor"
   data-draftail-editor={true}
@@ -220,7 +220,7 @@ exports[`DraftailEditor #maxListNesting 1`] = `
 </div>
 `;
 
-exports[`DraftailEditor empty 1`] = `
+exports[`DraftailEditor #maxListNesting skips when 1 1`] = `
 <div
   className="Draftail-Editor"
   data-draftail-editor={true}
@@ -434,8 +434,222 @@ exports[`DraftailEditor empty 1`] = `
     blockTypes={Array []}
     placeholder={null}
   />
+</div>
+`;
+
+exports[`DraftailEditor empty 1`] = `
+<div
+  className="Draftail-Editor"
+  data-draftail-editor={true}
+>
+  <Toolbar
+    addBR={[Function]}
+    addHR={[Function]}
+    blockTypes={Array []}
+    commands={false}
+    controls={Array []}
+    currentBlock="unstyled"
+    currentBlockKey="a"
+    currentStyles={Immutable.OrderedSet []}
+    enableHorizontalRule={false}
+    enableLineBreak={false}
+    entityTypes={Array []}
+    focus={[Function]}
+    getEditorState={[Function]}
+    inlineStyles={Array []}
+    onChange={[Function]}
+    onCompleteSource={[Function]}
+    onRequestSource={[Function]}
+    onUndoRedo={[Function]}
+    readOnly={false}
+    showRedoControl={false}
+    showUndoControl={false}
+    toggleBlockType={[Function]}
+    toggleInlineStyle={[Function]}
+  />
+  <PluginEditor
+    ariaDescribedBy={null}
+    ariaExpanded={null}
+    ariaLabel={null}
+    ariaLabelledBy={null}
+    ariaMultiline={true}
+    ariaOwneeID={null}
+    ariaRequired={null}
+    autoCapitalize={null}
+    autoComplete={null}
+    autoCorrect={null}
+    blockRenderMap={
+      Immutable.Map {
+        "ordered-list-item": Object {
+          "element": "li",
+          "wrapper": <ol
+            className="public-DraftStyleDefault-ol"
+          />,
+        },
+        "header-six": Object {
+          "element": "h6",
+        },
+        "header-four": Object {
+          "element": "h4",
+        },
+        "header-one": Object {
+          "element": "h1",
+        },
+        "unordered-list-item": Object {
+          "element": "li",
+          "wrapper": <ul
+            className="public-DraftStyleDefault-ul"
+          />,
+        },
+        "atomic": Object {
+          "element": "figure",
+        },
+        "unstyled": Object {
+          "aliasedElements": Array [
+            "p",
+          ],
+          "element": "div",
+        },
+        "header-two": Object {
+          "element": "h2",
+        },
+        "code-block": Object {
+          "element": "pre",
+          "wrapper": <pre
+            className="public-DraftStyleDefault-pre"
+          />,
+        },
+        "blockquote": Object {
+          "element": "blockquote",
+        },
+        "header-five": Object {
+          "element": "h5",
+        },
+        "header-three": Object {
+          "element": "h3",
+        },
+      }
+    }
+    blockRendererFn={[Function]}
+    blockStyleFn={[Function]}
+    customStyleMap={Object {}}
+    decorators={Array []}
+    defaultBlockRenderMap={true}
+    defaultKeyBindings={false}
+    defaultKeyCommands={true}
+    editorState={
+      EditorState {
+        "_immutable": Immutable.Record {
+          "allowUndo": true,
+          "currentContent": Immutable.Record {
+            "entityMap": Object {
+              "__add": [Function],
+              "__create": [Function],
+              "__get": [Function],
+              "__getLastCreatedEntityKey": [Function],
+              "__mergeData": [Function],
+              "__replaceData": [Function],
+              "add": [Function],
+              "create": [Function],
+              "get": [Function],
+              "getLastCreatedEntityKey": [Function],
+              "mergeData": [Function],
+              "replaceData": [Function],
+            },
+            "blockMap": Immutable.OrderedMap {
+              "a": Immutable.Record {
+                "key": "a",
+                "type": "unstyled",
+                "text": "",
+                "characterList": Immutable.List [],
+                "depth": 0,
+                "data": Immutable.Map {},
+              },
+            },
+            "selectionBefore": Immutable.Record {
+              "anchorKey": "a",
+              "anchorOffset": 0,
+              "focusKey": "a",
+              "focusOffset": 0,
+              "isBackward": false,
+              "hasFocus": false,
+            },
+            "selectionAfter": Immutable.Record {
+              "anchorKey": "a",
+              "anchorOffset": 0,
+              "focusKey": "a",
+              "focusOffset": 0,
+              "isBackward": false,
+              "hasFocus": false,
+            },
+          },
+          "decorator": null,
+          "directionMap": Immutable.OrderedMap {
+            "a": "LTR",
+          },
+          "forceSelection": false,
+          "inCompositionMode": false,
+          "inlineStyleOverride": null,
+          "lastChangeType": null,
+          "nativelyRenderedContent": null,
+          "redoStack": Immutable.Stack [],
+          "selection": Immutable.Record {
+            "anchorKey": "a",
+            "anchorOffset": 0,
+            "focusKey": "a",
+            "focusOffset": 0,
+            "isBackward": false,
+            "hasFocus": false,
+          },
+          "treeMap": Immutable.OrderedMap {
+            "a": Immutable.List [
+              Immutable.Record {
+                "start": 0,
+                "end": 0,
+                "decoratorKey": null,
+                "leaves": Immutable.List [
+                  Immutable.Record {
+                    "start": 0,
+                    "end": 0,
+                  },
+                ],
+              },
+            ],
+          },
+          "undoStack": Immutable.Stack [],
+        },
+      }
+    }
+    handleBeforeInput={[Function]}
+    handleKeyCommand={[Function]}
+    handlePastedText={[Function]}
+    handleReturn={[Function]}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onDownArrow={[Function]}
+    onFocus={[Function]}
+    onTab={[Function]}
+    onUpArrow={[Function]}
+    plugins={
+      Array [
+        Object {
+          "keyBindingFn": [Function],
+        },
+      ]
+    }
+    readOnly={false}
+    spellCheck={false}
+    stripPastedStyles={true}
+    textAlignment={null}
+    textDirectionality={null}
+  />
+  <div
+    data-draftail-tooltip-parent={true}
+  />
   <Memo(Styles)
-    max={1}
+    blockKey="a"
+    blockTypes={Array []}
+    placeholder={null}
   />
 </div>
 `;