make slugify function configurable (#199)

* make slugify function configurable

* throws error if options.slugify is invalid

* adjust README

* adjust order & add TOC entry

* grammar

README.md

@@ -15,6 +15,7 @@ The most lightweight, customizable React markdown component.
         -   [options.overrides - Override Any HTML Tag's Representation](#optionsoverrides---override-any-html-tags-representation)
         -   [options.overrides - Rendering Arbitrary React Components](#optionsoverrides---rendering-arbitrary-react-components)
         -   [options.createElement - Custom React.createElement behavior](#optionscreateelement---custom-reactcreateelement-behavior)
+        -   [options.slugify](#optionsslugify)
     -   [Getting the smallest possible bundle size](#getting-the-smallest-possible-bundle-size)
     -   [Usage with Preact](#usage-with-preact)
 -   [Gotchas](#gotchas)
@@ -342,6 +343,22 @@ render(
 );
 ```
 
+#### options.slugify
+
+By default, a [lightweight deburring function](https://github.com/probablyup/markdown-to-jsx/blob/bc2f57412332dc670f066320c0f38d0252e0f057/index.js#L261-L275) is used to generate an HTML id from headings. You can override this by passing a function to `options.slugify`. This is helpful when you are using non-alphanumeric characters (e.g. Chinese or Japanese characters) in headings. For example:
+
+```jsx
+<Markdown options={{ slugify: str => str }}># 中文</Markdown>;
+
+// or
+
+compiler('# 中文', { slugify: str => str });
+
+// renders:
+
+<h1 id="中文">中文</h1>
+```
+
 ### Getting the smallest possible bundle size
 
 Many development conveniences are placed behind `process.env.NODE_ENV !== "production"` conditionals. When bundling your app, it's a good idea to replace these code snippets such that a minifier (like uglify) can sweep them away and leave a smaller overall bundle.

__snapshots__/index.spec.js.snap

@@ -3327,6 +3327,26 @@ exports[`markdown-to-jsx compiler options.forceInline treats given markdown as i
 
 `;
 
+exports[`markdown-to-jsx compiler options.slugify should use a custom slugify function rather than the default if set and valid 1`] = `
+
+<h1 data-reactroot
+    id="中文"
+>
+  中文
+</h1>
+
+`;
+
+exports[`markdown-to-jsx compiler options.slugify should use the default function if unset 1`] = `
+
+<h1 data-reactroot
+    id
+>
+  中文
+</h1>
+
+`;
+
 exports[`markdown-to-jsx compiler overrides should add props to pre & code tags if supplied 1`] = `
 
 <pre data-reactroot

index.js

@@ -712,6 +712,7 @@ const PARSE_PRIORITY_MIN = 5;
 export function compiler(markdown, options) {
     options = options || {};
     options.overrides = options.overrides || {};
+    options.slugify = options.slugify || slugify;
 
     const createElementFn = options.createElement || React.createElement;
 
@@ -992,7 +993,7 @@ export function compiler(markdown, options) {
             parse(capture, parse, state) {
                 return {
                     content: parseInline(parse, capture[2], state),
-                    id: slugify(capture[2]),
+                    id: options.slugify(capture[2]),
                     level: capture[1].length,
                 };
             },

index.spec.js

@@ -1142,6 +1142,26 @@ Text content
             });
         });
 
+        describe('options.slugify', () => {
+            it('should use a custom slugify function rather than the default if set and valid', () => {
+                render(compiler('# 中文', { slugify: str => str }));
+
+                expect(root.innerHTML).toMatchSnapshot();
+            });
+
+            it('should use the default function if unset', () => {
+                render(compiler('# 中文'));
+
+                expect(root.innerHTML).toMatchSnapshot();
+            });
+
+            it('should throw error if invalid', () => {
+                expect(() => {
+                    render(compiler('# 中文', { slugify: 'invalid' }));
+                }).toThrow(/options\.slugify is not a function/);
+            });
+        });
+
         describe('overrides', () => {
             it('should substitute the appropriate JSX tag if given a component', () => {
                 class FakeParagraph extends React.Component {