Enable cursor to go outside the inline node when clicked at the end/beginning

1

How do I enable “Enter” key to create new line for the case where my whole paragraph contains an inline node?

My document looks something like this -

    <p>
         <span data-custom-id="123"> some text here... </span>
    </p>
    <p>
         Some extra text
         <span data-custom-id="123">some more text here...</span>
    </p>

where the “span” is a custom node.

I have some weird things happening and I am not exactly sure why (am quite new to prosemirror) -

  1. When I click on the text in the first para - enter key doesn’t work - which seems like I can’t get the cursor to move out of the span and go to the P tag.
  2. When I press “Shift+Enter” at the end of the first para - It creates a new line - If i press “Backspace” - It deletes my whole span and the content.

I am not really sure if this is an issue with the schema or am I doing something wrong here.

I’ve been playing around with all the different options available for the schema but can’t seem to figure it out.

Schema is as follows right now -

content: ‘text*’, group: ‘inline’, inline: true, defining: true, draggable: true, selectable: true

So inside my editor - How do I enable cursor to go out of the span when I click on the end/or beginning of the span? Seems like I am missing something here…

How%20to%20move%20cursor%20outside
How%20to%20move%20cursor%20outside1143×1129 103 KB

JSON from the editor

{
  "type": "doc",
  "content": [
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "Janice plays quite an important role with customers."
        }
      ]
    },
    {
      "type": "paragraph",
      "content": [
        {
          "type": "highlight",
          "attrs": {
            "highlight-id": "123",
            "class": ""
          },
          "content": [
            {
              "type": "text",
              "text": "Her "
            },
            {
              "type": "text",
              "marks": [
                {
                  "type": "bold"
                }
              ],
              "text": "daily job"
            },
            {
              "type": "text",
              "text": " entails talking to more than 20 customers and going over what they think about the new features and/or how satisfied they are with the existing ones.This comes down to figuring out whether they like everything about the product and if not, how can we improve their experience. ["
            },
            {
              "type": "text",
              "marks": [
                {
                  "type": "bold"
                }
              ],
              "text": "HOW TO MOVE CURSOR OUTSIDE"
            },
            {
              "type": "text",
              "text": "]"
            }
          ]
        }
      ]
    }
  ]
}

Thanks!

2

Did you manage to solve this? I’m trying to get my cursor outside of a node after creating it in a InputRule.