Monday, 1 March 2021

Tiptap (Prosemirror) collab schema error for mention tags

I needed some help implementing mentions into real-time collab server (https://tiptap.dev/suggestions). My code is modded version of this: https://glitch.com/edit/#!/tiptap-sockets?path=server.js%3A1%3A0

I am sending these steps to my socket server to be applied to the previous version of the doc

steps.forEach((step) => {
    const result = Step.fromJSON(schema, step).apply(doc)
    doc = result.doc
})

And using this schema to vakidate the mention:

mention: {
  attrs: {
    id: {},
    label: {},
  },
  group: 'inline',
  inline: true,
  selectable: false,
  atom: true,
  toDOM: node => [
    'span',
    {
      class: 'mention',
      'data-mention-id': node.attrs.id,
    },
    `@${node.attrs.label}`,
  ],
  parseDOM: [
    {
      tag: 'span[data-mention-id]',
      getAttrs: dom => {
        const id = dom.getAttribute('data-mention-id')
        const label = dom.innerText.split('@').join('')
        return { id, label }
      },
    },
  ],
},

These are the steps I get for @ mention Philip Isik, it sends:

step 1: @philip Isik

step 2: " "

These are the steps' data that the server receives

    [ 
        '{"stepType":"replace","from":1,"to":2,"slice":{"content":[{"type":"mention","attrs":{"id":4,"label":"Philip Isik"},"content":[{"type":"text","text":"@Philip Isik"}]}]}}',
        
        '{"stepType":"replace","from":15,"to":15,"slice":{"content":[{"type":"text","text":" "}]}}' 
    ]

After step 1, the loop fails and throws

RangeError: Position 15 out of range

So I checked the content length (inside Prosemirror model > ResolvedPos.resolve), after step 1, it said it was of length 3

Does anyone know why this is happening? been at it for 2 days now. Any help is greatly appreciated!



from Tiptap (Prosemirror) collab schema error for mention tags

No comments:

Post a Comment