Inheritance of styles in new paragraph in slate.js

Question

How do I prevent the next text block to inherit the same styles as the first one? If I add an heading and then press enter I would like it to be a paragraph on the next line, and not another heading.

Answer 1

You can use onKeyDown to detect when you press Enter, use Transforms or Editor API to insert new node with desired styling. Refer: https://docs.slatejs.org/api/transforms#transforms.insertnodes-editor-editor-nodes-node-or-node-options

https://docs.slatejs.org/api/nodes/editor#editor.insertnode-editor-editor-node-node-greater-than-void

Answer 2

You can have a custom plugin like this for the editor

const { insertBreak } = editor
editor.insertBreak = () => {
  const { selection } = editor
    if (selection) {
       const [title] = Editor.nodes(editor, {
       match: n =>
       !Editor.isEditor(n) &&
       Element.isElement(n) &&
       (n.type === 'title')
      })
        
      if(title){
       Transforms.insertNodes(editor, {
        children: [{text: ""}],
        type: 'paragraph'
       })
       return
      }
    }
  insertBreak()
}