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'); + }); }); });