Implement the horizontal rule (line) feature

[oleq]

Is this a bug report or feature request? (choose one)

🆕 Feature request

Details

It's one of the missing features in v5 (present in v4) and brought up by the community every now and then.

Instead a simple implementation I think we may consider a widget with a drag&drop support.

The feature should also retain page breaks pasted from Word (and if possible) from Gdocs, though this could be extracted to a followup.

---

If you'd like to see this feature implemented, please add 👍to this comment.

[taufik-nurrohman]

@oleq I would suggest automatic horizontal rule insertion feature by pressing the Enter key two times. And by undoing the second enter, it will replace the horizontal rule element with empty paragraph element.

[oleq]

@tovic How would one create two empty paragraphs (one after another) then? Enter functionality is essential from the UX perspective and must be predictable, i.e. like in other word processors. A horizontal rule showing up out of nowhere could suprise many users. I'd rather opt for the a dedicated keystroke (could be Modifier(s)+Enter) and a toolbar button.

What inspired this idea ayway? Have you seen it somwhere in the software that you use?

cc @dkonopka @Reinmar

[taufik-nurrohman]

What inspired this idea ayway? Have you seen it somwhere in the software that you use?

Not a user, but here’s an example (buggy: at least need two paragraph before insertion) → http://jakiestfu.github.io/Medium.js/docs/#rich

[tomaz-dev]

Inspired by MS word and LibreOffice Writer:
--- Enter
(three minuses in empty line + Enter)

[long-lazuli]

Maybe you can take code from here to implements this feature : https://github.com/Didask/ckeditor5-hr
We use it for few months without much issues.

It allows the insertion of an horizontal rule.
clicking on it makes it invisible, if you just need a clearfix for your floating items.

It's not on NPM yet, but it should be this week. For the moment, we do an npm link.

we use it in our editor builder script like this :

import HR from '@didask/ckeditor5-hr/src/hr'
import HRToolbar from '@didask/ckeditor5-hr/src/hrtoolbar'
import HRVisibility from '@didask/ckeditor5-hr/src/hrvisibility'

    ....
    plugins: [
        ...
        HR, HRToolbar, HRVisibility
        ...
    ],
    toolbar: [
		...
        'hr',
		...
    ],
    hr: {
        toolbar: [
            'hrVisibility:toggle'
        ]
    },
    ...

[cmddavid]

@long-lazuli what is the status of the npm package? would love to give it a shot

[pomek]

Writing a converter that allows adding a horizontal rule to the editor is not that hard. But in order to have this feature useful, we need to resolve a few issues:

1. How do we want to insert the horizontal rule to the editor? I assume we want to have an icon in the toolbar. For testing purposes, I can use any icon from the toolbar but at the end, would be good to have some ideas.
2. Default (browser) styles of the <hr> element are just ugly.
   
3. I am not sure whether it is a problem or not but the height of the <hr> element is equal to 2px (including borders: top and bottom). It could be a little hard to select the element.
   
4. What about text transformation to the horizontal rule? Is it ok to use a combination of ---[Enter] as a trigger?

[Reinmar]

3. I am not sure whether it is a problem or not but the height of the <hr> element is equal to 2px (including borders: top and bottom). It could be a little hard to select the element.

Could we use a selection handle (like for tables)?

[pomek]

Could we use a selection handle (like for tables)?

We can but we need to change the editing element (from <hr> to e.g. <div>). Also, I don't see any reason why we couldn't do that.

[pomek]

Thanks to the selection handler, there is no problem with clicking on the element:

[mlewand]

We had a quick call today and I'm adding here a summary:

• Selecting horizontal rule:
  • It should be possible to select the rule just by clicking it. To make it simpler (than in Implement the horizontal rule (line) feature #1365 (comment)) let's make sure that the hr has few px of padding above and below it.
  • Selecting with a button like in tables is not the most UX friendly way, as it requires you to hover the widget first and only then click the button.
• Insertion markup
  • When inserted in the middle paragraph (say <p>foo^bar</p>) it should split the paragraph into two, and put the HR in-between.
  • If possible it would be nice to put collapsed selection after the hr widget, but that's not necessary and could be extracted into a followup.
• Selection - there might be some tricky things, so check cases like:
  • Make sure it reasonably works when navigating using keyboard (arrows).
  • Make sure it removes well (backspace/delete).
  • Make sure its well selectable with mouse.
  • Make sure its selectable with keyboard.
  • ⚠ There may be multiple issues coming from the widget system itself, do not attempt to fix them here ⚠
• Integration with floating elements? (TODO: @d.konopka)
  • Problem: if we give clear:both then side image will cause the HR to go below it. Is it possible that our widget spans across available with excluding float element?
• Interoperability
  • Paste from Word should be extracted to a separate feature request (not a part of MVP).
  • Paste from Gdocs should be extracted to a separate feature request (not a part of MVP).
• Drag & drop is not required at this point, and should be extracted to a separate feature request (not a part of MVP).
• Text transformation/autoformat integration? Use --- to insert a horizontal rule, should be extracted to a separate feature request (not a part of MVP).

[RezuwanHassan262]

You can simply just enter 3 dashes to create a line like shown below. And a blank line above and below those dashes.

---