title: Tiptap (Prosemirror) collab schema error for mention tags
body: <p>I needed some help implementing <strong>mentions</strong> into real-time collab server (<a href="https://tiptap.dev/suggestions" rel="nofollow noreferrer">https://tiptap.dev/suggestions</a>). My code is modded version of this: <a href="https://glitch.com/edit/#!/tiptap-sockets?path=server.js%3A1%3A0" rel="nofollow noreferrer">https://glitch.com/edit/#!/tiptap-sockets?path=server.js%3A1%3A0</a></p>
  <p>I am sending these <strong>steps</strong> to my socket server to be applied to the previous version of the doc</p>
  <pre><code>steps.forEach((step) =&gt; {
      const result = Step.fromJSON(schema, step).apply(doc)
      doc = result.doc
  })
  </code></pre>
  <p>And using this schema to validate the mention:</p>
  <pre><code>mention: {
    attrs: {
      id: {},
      label: {},
    },
    group: 'inline',
    inline: true,
    selectable: false,
    atom: true,
    toDOM: node =&gt; [
      'span',
      {
        class: 'mention',
        'data-mention-id': node.attrs.id,
      },
      `@${node.attrs.label}`,
    ],
    parseDOM: [
      {
        tag: 'span[data-mention-id]',
        getAttrs: dom =&gt; {
          const id = dom.getAttribute('data-mention-id')
          const label = dom.innerText.split('@').join('')
          return { id, label }
        },
      },
    ],
  },
  </code></pre>
  <p>The frontend sends the following steps when I enter @Philip Isik,</p>
  <p>step 1: @philip Isik</p>
  <p>step 2: &quot; &quot;</p>
  <p>These are the above steps in JSON form that the server receives:</p>
  <pre><code>    [ 
          '{&quot;stepType&quot;:&quot;replace&quot;,&quot;from&quot;:1,&quot;to&quot;:2,&quot;slice&quot;:{&quot;content&quot;:[{&quot;type&quot;:&quot;mention&quot;,&quot;attrs&quot;:{&quot;id&quot;:4,&quot;label&quot;:&quot;Philip Isik&quot;},&quot;content&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;@Philip Isik&quot;}]}]}}',
          
          '{&quot;stepType&quot;:&quot;replace&quot;,&quot;from&quot;:15,&quot;to&quot;:15,&quot;slice&quot;:{&quot;content&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot; &quot;}]}}' 
      ]
  </code></pre>
  <p>After step 1, the loop fails and throws</p>
  <blockquote>
  <p>RangeError: Position 15 out of range</p>
  </blockquote>
  <p>So I checked the content length after step one, it said it was of length 3 when it should be of length 12 (length of @Philip Isik)</p>
  <p>Does anyone know why this is happening? been at it for 2 days now. Any help is greatly appreciated!</p>
  <p>TLDR:</p>
  <ol>
  <li><p>So I'm sending a @Name to the server to be applied to the current version of the doc.</p>
  </li>
  <li><p>The server receives the mentioned step @Name</p>
  </li>
  <li><p>Now when it sends the next step, the step being sent is for location 6 (@Name is of length 5, so 5+1th=6th pos)</p>
  </li>
  <li><p>Here is the problem, according to tiptap/prose object, @ Name is of length 2, not 5</p>
  </li>
  <li><p>Therefore, it throws a 'Position-out-of-range error'</p>
  </li>
  </ol>