diff --git a/app/components/markdown/markdown.js b/app/components/markdown/markdown.js index d4d8e33f2..b26059d4e 100644 --- a/app/components/markdown/markdown.js +++ b/app/components/markdown/markdown.js @@ -273,10 +273,11 @@ export default class Markdown extends PureComponent { ); } - renderList = ({children, tight, type}) => { + renderList = ({children, start, tight, type}) => { return ( {children} diff --git a/app/components/markdown/markdown_list.js b/app/components/markdown/markdown_list.js index 8c70226d1..65f9d5a00 100644 --- a/app/components/markdown/markdown_list.js +++ b/app/components/markdown/markdown_list.js @@ -9,12 +9,24 @@ export default class MarkdownList extends PureComponent { static propTypes = { children: PropTypes.node.isRequired, ordered: PropTypes.bool.isRequired, + start: PropTypes.number, tight: PropTypes.bool }; + static defaultProps = { + start: 1 + }; + render() { + let bulletWidth = 15; + if (this.props.ordered) { + const lastNumber = (this.props.start + this.props.children.length) - 1; + bulletWidth = (9 * lastNumber.toString().length) + 7; + } + const children = React.Children.map(this.props.children, (child) => { return React.cloneElement(child, { + bulletWidth, ordered: this.props.ordered, tight: this.props.tight }); diff --git a/app/components/markdown/markdown_list_item.js b/app/components/markdown/markdown_list_item.js index 130963b9c..ba3cde313 100644 --- a/app/components/markdown/markdown_list_item.js +++ b/app/components/markdown/markdown_list_item.js @@ -17,6 +17,7 @@ export default class MarkdownListItem extends PureComponent { ordered: PropTypes.bool.isRequired, continue: PropTypes.bool, index: PropTypes.number.isRequired, + bulletWidth: PropTypes.number, bulletStyle: CustomPropTypes.Style, level: PropTypes.number }; @@ -26,7 +27,7 @@ export default class MarkdownListItem extends PureComponent { if (this.props.continue) { bullet = ''; } else if (this.props.ordered) { - bullet = this.props.index + '. '; + bullet = this.props.index + '.'; } else if (this.props.level % 2 === 0) { bullet = '◦'; } else { @@ -35,7 +36,7 @@ export default class MarkdownListItem extends PureComponent { return ( - + {bullet} @@ -50,7 +51,8 @@ export default class MarkdownListItem extends PureComponent { const style = StyleSheet.create({ bullet: { - width: 15 + alignItems: 'flex-end', + marginRight: 5 }, container: { flexDirection: 'row', diff --git a/app/components/markdown/transform.js b/app/components/markdown/transform.js index 830d74d3b..fb68ed315 100644 --- a/app/components/markdown/transform.js +++ b/app/components/markdown/transform.js @@ -13,7 +13,7 @@ export function addListItemIndices(ast) { const node = e.node; if (node.type === 'list') { - let i = node.listStart || 1; // List indices match what would be displayed in the UI + let i = node.listStart == null ? 1 : node.listStart; // List indices match what would be displayed in the UI for (let child = node.firstChild; child; child = child.next) { child.index = i;