Rendering a HorizontalRule with custom component blocks the editor

[fbolcic]

Hello,

I am trying to add the horizontal rule element to the editor with a custom component. This is my code:

const horizontalRulePlugin = createHorizontalRulePlugin<any, EditorValue>({
  component: (props) => (
    <Box bg="rteditor-horizontal-rule-bg" my={4} sx={{ height: '2px', width: '100%', borderRadius: 'xs' }}>
      {props.children}
    </Box>
  ),
});

This works, in a sense that the rule is rendered, but then I cannot add a new line after it and continue editing.
Here is a small video demonstrating the behaviour:

Screen.Recording.2022-11-29.at.17.20.30.mov

On the video I am pressing the enter key after adding the rule, or trying to select below it. Nothing works, I can only edit the content above.
Our desired behaviour would be to add a new paragraph element below, which can then be edited. I went through the docs a couple of times but could not find instructions on how to do something like that.