Support hr block in markdown-to-draft

[martingregoire]

The markdown hr block (horizontal rule) is currently not supported by markdown-to-draft.

When the markdown contains the hr block code, for example this line:

---

This code is suppressed (see below) when converting the markdown to the raw Draft.js object.

We would like to add a custom blockType to handle these hr blocks, like this:

var rawDraftJSObject = markdownToDraft(markdownString, {
  blockTypes: {
    hr: function (_item) {
      return {
        type: 'HR',
        text: '',
      };
    }
  }
});

So that we could use the blockRendererFn of Draft.js to render a custom component for this HR block type, like this:

function blockRendererFn(contentBlock) {
  if (contentBlock.getType() === 'HR') {
    return {
      component: MyCustomHrComponent,
      editable: false,
    };
  }
}

// in React's render method
<Editor
  blockRendererFn={blockRendererFn}
/>

// some sample component to be used by Draft.js for displaying the `HR` block type
const MyCustomHrComponent = () => {
  return (
    <figure>
      <p>MY-CUSTOM-HR-COMPONENT</p>
    </figure>
  );
}

---

Remarkable already knows this hr block (see remarkable hr block rule), and pushes a token with the type hr to the state.

The issue is (as far as I see) that markdown-to-draft silently drops this type here:

markdown-draft-js/src/markdown-to-draft.js

Line 236 in 96ffba6

} else if ((itemType.indexOf('_open') !== -1 || itemType === 'fence') && BlockTypes[itemType]) {

itemType would be 'hr' here. But even if we added this block type to the options.blockTypes (as I did above), the first part of this expression would skip this item.

---

TL;DR: would it be possible to add the 'hr' block type here, like this?

    } else if ((itemType.indexOf('_open') !== -1 || itemType === 'fence' || itemType === 'hr') && BlockTypes[itemType]) {

[Rosey]

great issue write up and thank you for pRing a solution as well 🙂