If maxDepth param is greater than 4 in RichUtils.onTab, list item breaks

[nimamehanian]

Bug:

https://jsfiddle.net/nimamehanian/asooqzw0/6/

An <li> whose depth is 4 will break and go back to a depth of 0, and it won't even be an <li> element anymore, upon pressing tab.

Is it deliberate to contain maxDepth to 4, or should list items in Draft be infinitely nestable?
And if so, I'm open to attempting to fix this and offer a PR.

This is with v0.10.0

[robbertbrak]

I would say that the current max depth of 4 is arbitrary and can easily be changed to some higher number, but changing it to infinite would not be entirely trivial.

As you can see in https://github.com/facebook/draft-js/blob/master/src/component/utils/DraftStyleDefault.css#L98 and https://github.com/facebook/draft-js/blob/master/src/component/utils/DraftStyleDefault.css#L189, some CSS trickery is done to mimic the layout of nested lists. Since the CSS only goes up to 4, that would be why maxDepth is also constrained to that number.

[nimamehanian]

Thank you for pointing that out. I was reading the code for onTab and even though it was clearly written, I couldn't see the cause for the problem.

I agree, infinite isn't necessary...

[thibaudcolas]

I made a little helper to solve this for my use case – it automatically creates the list nesting styles up to infinity and beyond (well, I tried it up to 15 levels at least…).

It's available here: https://github.com/thibaudcolas/draftjs-conductor, and on npm.

Here is roughly how it works under the hood:

export const generateListNestingStyles = (
  selectorPrefix,
  minDepth,
  maxDepth,
) => {
  let styles = "";

  for (let depth = minDepth; depth <= maxDepth; depth++) {
    const prefix = `${selectorPrefix}${depth}`;
    const counter = `ol${depth}`;
    const margin = 1.5 * (depth + 1);

    styles += `
.${prefix}.public-DraftStyleDefault-listLTR { margin-left: ${margin}em; }
.${prefix}.public-DraftStyleDefault-listRTL { margin-right: ${margin}em; }
.${prefix}.public-DraftStyleDefault-orderedListItem::before { content: counter(${counter}) '. '; counter-increment: ${counter}; }
.${prefix}.public-DraftStyleDefault-reset { counter-reset: ${counter}; }`;
  }

  return styles;
};

And using the package:

import { ListNestingStyles, blockDepthStyleFn } from 'draftjs-conductor';

<Editor blockStyleFn={blockDepthStyleFn} />
<ListNestingStyles max={6} />