Hard break instead of Paragraph on enter

1

Some of our editors are currently implementing “br” instead of “p” when using the enter key. To replicate this behaviour I’ve come up with some code based on the baseKeymap and hard break nodes. I’m still learning Prosemirror so I wanted to check to see if it’s seems reasonable to do it this way ?

export function buildBaseKeymap(schema, options) {

  let keys = baseKeymap, type;

  if ( options && options.enterkey_hardbreak === true ) {
    if (type = schema.nodes.hard_break) {
      let br = type;
      let brcmd = chainCommands(newlineInCode, createParagraphNear, (state, dispatch) => {
        let {$from, $to} = state.selection
        if ( !$from.parent.isBlock ) return false
        if ( $from.parent.type != schema.nodes.paragraph ) return false
        if ( dispatch ) {
          dispatch(state.tr.replaceSelectionWith(br.create()).scrollIntoView())
        }
        return true
      }, liftEmptyBlock, splitBlock)
      keys["Enter"] = brcmd;
    }
  }

  return keys;
  
}
2

Looks reasonable!

1 Like
3

@marijn

Replying here as this is still relevant after five years.

As mentioned in the document above, CKEditor has three modes for handling the Enter key behavior.

By default, ProseMirror performs the first option—creating a new paragraph on Enter.

However, I want it to behave like the second option, where Enter adds a <br> tag instead. From what I understand, ProseMirror doesn’t have an explicit option for this. Please correct me if I’m mistaken.

The next approach would be to implement the method suggested above by @garetheddies. It works for basic cases.

But will this scale if I want to use the full range of editor features, such as lists? Will the editor still function correctly, similar to how it does now, if it’s not wrapped in a <p> tag?

Thanks in advance.

4

ProseMirror key behavior isn’t configured with modes or options, but by binding the commands you want executed to the keys, with a keymap.

1 Like
5

@marjin,

Got it. Could you please share your thoughts on this?

But will this approach scale if I want to use the full range of editor features, such as lists and all?

Will the editor still function correctly, similar to how it does now, if new line’s not wrapped in a <p> tag but <br> is used ?

Because I might need to write a lot of custom logic, right?

6

Run the more specific commands for a given key first, and make sure they return false when they do not apply, and you should be fine.

1 Like