diff --git a/README.md b/README.md
index d22431ce..a6e64615 100644
--- a/README.md
+++ b/README.md
@@ -68,6 +68,7 @@ Depending on the type of element, there are some props that must be preserved to
- `a`: `title`, `href`
- `img`: `title`, `alt`, `src`
+- `input[type="checkbox"]`: `checked`, `readonly` (specifically, the one rendered by a GFM task list)
- `ol`: `start`
- `td`: `style`
- `th`: `style`
diff --git a/index.js b/index.js
index 7b34ec51..04c37b61 100644
--- a/index.js
+++ b/index.js
@@ -446,14 +446,24 @@ export default function markdownToJSX(markdown, {overrides = {}} = {}) {
if (ast.type === 'listItem') {
if (ast.checked === true || ast.checked === false) {
- return (
-
-
- {ast.children.map(astToJSX)}
-
+ const liProps = get(overrides, 'li.props', {});
+
+ liProps.key = key;
+
+ const inputProps = get(overrides, 'input.props', {});
+
+ inputProps.key = 'checkbox';
+ inputProps.type = 'checkbox';
+ inputProps.checked = ast.checked;
+ inputProps.readOnly = true;
+
+ return React.createElement(
+ get(overrides, 'li.component', 'li'),
+ liProps,
+ [
+ React.createElement(get(overrides, 'input.component', 'input'), inputProps),
+ ast.children.map(astToJSX),
+ ],
);
} /* gfm task list, need to add a checkbox */
}
diff --git a/index.spec.js b/index.spec.js
index c0dee53a..1e43827d 100644
--- a/index.spec.js
+++ b/index.spec.js
@@ -403,13 +403,13 @@ describe('markdown-to-jsx', () => {
expect(checkbox.parentNode.textContent).toBe('foo');
});
- it('should disable the checkboxes', () => {
+ it('should mark the checkboxes as readonly', () => {
const element = render(converter('- [x] foo'));
const $element = dom(element);
const checkbox = $element.querySelector('ul li input');
expect(checkbox).not.toBe(null);
- expect(checkbox.disabled).toBe(true);
+ expect(checkbox.readOnly).toBe(true);
});
});
@@ -783,5 +783,21 @@ describe('markdown-to-jsx', () => {
expect($element.children[0].getAttribute('data-foo')).toBe('bar');
expect($element.children[0].getAttribute('data-baz')).toBe('fizz');
});
+
+ it('should be able to override gfm task list items', () => {
+ const element = render(converter('- [ ] foo', {overrides: {li: {props: {className: 'foo'}}}}));
+ const $element = dom(element).querySelector('li');
+
+ expect($element).not.toBe(null);
+ expect($element.className).toContain('foo');
+ });
+
+ it('should be able to override gfm task list item checkboxes', () => {
+ const element = render(converter('- [ ] foo', {overrides: {input: {props: {className: 'foo'}}}}));
+ const $element = dom(element).querySelector('input');
+
+ expect($element).not.toBe(null);
+ expect($element.className).toContain('foo');
+ });
});
});