Adding a child to a node

[leo-petrucci]

I'm implementing the code highlighting example (https://www.slatejs.org/examples/code-highlighting).

Everything works well, except whenever I try to insert a new line when I'm writing within the code block it creates a paragraph after the code block. My Slate object looks like this:

{
    "children": [
        {
            "text": "const test = \"Example\""
        }
    ],
    "type": "code_block",
    "language": "jsx"
}

My assumption was that I could override editor.inserBreak to change the behavior, so I came up with this code:

export const withCodeBlock = (editor: ReactEditor) => {
  const { insertBreak } = editor
  editor.insertBreak = () => {
    const { selection } = editor

    if (selection && Range.isCollapsed(selection)) {
      const [block, path] =
        Editor.above(editor, {
          match: (n) =>
            !Editor.isEditor(n) &&
            Element.isElement(n) &&
            // @ts-expect-error
            n.type === defaultNodeTypes.code_block,
        }) || []

      if (block && path) {
        // We're in a code block
        const start = Editor.start(editor, path)
        const end = Editor.end(editor, path)

        // Get the text before and after the cursor
        const beforeText = Editor.string(editor, {
          anchor: start,
          focus: selection.anchor,
        })
        const afterText = Editor.string(editor, {
          anchor: selection.anchor,
          focus: end,
        })

        // Create two new text nodes
        const newBefore = { text: beforeText }
        const newAfter = { text: afterText }

        const nextPath = Path.next(editor.selection?.anchor.path || path)

        console.log('nextPath', nextPath)

        Transforms.insertNodes(editor, newAfter, { at: nextPath })

        return
      }
    }

    // Default behavior for other cases
    insertBreak()
  }

  return editor
}

Given the Slate object above, trying to add a new line at the end of the existing text attempts to insert:

Transforms.insertNodes(
  editor,
  { text: "" },
  [0,1]
)

But the newline isn't inserted. I also tried doing:

Transforms.insertNodes(
  editor,
  { children: 
    { text: "" }
  },
  [0,1]
)

What am I missing?

[leo-petrucci]

So I think I'm supposed to use Transforms.insertText, but even that is failing.

Transforms.insertText(editor, afterText, { at: [0] })
Transforms.insertText(editor, afterText, { at: [0, 0] })
Transforms.insertText(editor, afterText, { at: [0, 1] })

All of the above replace the text that is already written inside the codeblock.