Toolbar button for inserting a horizontal rule

[papandreou]

- Do you want to request a feature or report a bug?

feature

- What is the current behavior?

There is no way to add a horizontal rule (---) using the markdown widget in rich text mode, except by implementing it as a custom editor widget. I would like to have that so I can use it as a structural divider for some content that I'm managing via netlify-cms.

The editor does have good support for the horizontal rule as soon as it's there, though. It's rendered as a horizontal line that goes all the way across the editor, and it compiles to an <hr> element.

- What is the expected behavior?

That there is a toolbar button with an "—" icon or similar that inserts a --- on an empty line into the markdown.

It seems like slate.js does not have this built in, but we could probably upstream that.

[erquhart]

Agreed. Related to #1324.

[PaulEibensteiner]

Hi, agreed too. (did you build the custom editor widget, and if yes, could you provide the code? thx in advance)

[papandreou]

@PaulEibensteiner, sure. I'm not too proud of it:

CMS.registerEditorComponent({
  id: 'separator',
  label: '---',
  // A bogus field so that the component doesn't look weird when rendered:
  fields: [{ label: 'Separator', widget: 'select', options: ['---'], default: '---' }],
  // Never match anything so that the separator will be recognized as a horizontal rule when the document is reloaded:
  pattern: /.^/,
  toBlock(obj) {
    return '---';
  },
  toPreview(obj) {
    return '<hr>';
  }
});

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Lester016]

is this still not available? I'm looking for this kind of feature.

[jboolean]

Would love to see this. It seems to recognize thematic breaks, but can't create them.

[erezrokah]

We would happily accept a contribution for this