How to programmatically insert a component

[eschiebel]

Say I have a Paragraph component. When the user types Enter, I want to add a new Paragraph component after the current one instead of getting a
within it.

Similarly, if I have a list component, I'd like to escape out of the list (or jump up 1 level of a nested list) when the user types Enter twice.

I'm having trouble seeing how to do this.

[eschiebel]

I'm partway there

const handleKey = useCallback(
    e => {
      if (e.key === 'Enter') {
        const a = query.node(myId).ancestors()
        const newPara = query
          .parseFreshNode({
            data: {
              type: 'Text',
            },
          })
          .toNode()
        actions.add(newPara, a[a.length - 1])
      }
    },
    [actions, id, query]
  )

where Text is a user component (from the Tutorial). I get an error in the browser

<Text /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

followed by

The tag <Text> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

I noticed that what I get back from query.node(id) for a Text user component, and what I get back from `query.parseFreshNode(...).toNode() in the code above are very different things.

[eschiebel]

This works:

      if (e.key === 'Enter') {
        e.stopPropagation()
        const a = query.node(id).ancestors()
        const newPara = query
          .parseFreshNode({
            data: {
              type: 'p',
              props: {
                children: 'new paragraph',
              },
            },
          })
          .toNode()
        actions.add(newPara, a[a.length - 1])
      }

but creates a vanilla

. How do I get actions.add to create a UserComponent?

[eschiebel]

I think I've got it

  const handleKey = useCallback(
    e => {
      if (e.key === 'Enter') {
        e.stopPropagation()
        const a = query.node(id).ancestors()
        const newPara = query.parseReactElement(<Text text="new para" />).toNodeTree()
        actions.addNodeTree(newPara, a[a.length - 1])
      }
    },
    [actions, id, query]
  )