Allow overrides for GFM task list items & associated checkboxes

quantizor · Sep 26, 2016 · 25f70a6 · 25f70a6
1 parent 3395105
commit 25f70a6
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 10 deletions.
diff --git 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
@@ -446,14 +446,24 @@ export default function markdownToJSX(markdown, {overrides = {}} = {}) {
 
         if (ast.type === 'listItem') {
             if (ast.checked === true || ast.checked === false) {
-                return (
-                    <li key={key}>
-                        <input key='checkbox'
-                               type="checkbox"
-                               checked={ast.checked}
-                               disabled />
-                        {ast.children.map(astToJSX)}
-                    </li>
+                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
@@ -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');
+        });
     });
 });