javascript - Tiptap (Prosemirror) 提及标签的协作模式错误

Question

我需要一些帮助将提及 实现到实时协作服务器 (https://tiptap.dev/suggestions) 中。我的代码是这个的修改版本:https://glitch.com/edit/#!/tiptap-sockets?path=server.js%3A1%3A0

我正在将这些步骤发送到我的套接字服务器以应用于文档的先前版本

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

并使用此架构来验证提及:

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 }
      },
    },
  ],
},

当我输入@Philip Isik 时，前端发送以下步骤，

第 1 步:@philip Isik

第二步:“”

这些是服务器接收的 JSON 格式的上述步骤:

    [ 
        '{"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":" "}]}}' 
    ]

在第1步之后，循环失败并抛出

RangeError: Position 15 out of range

所以我在第一步之后检查了内容长度，它说它的长度是 3 而它应该是长度 12(@Philip Isik 的长度)

有人知道为什么会这样吗？现在已经有 2 天了。非常感谢任何帮助!

简单描述:

1. 所以我向服务器发送一个@Name 以应用于文档的当前版本。

2. 服务器接收到提到的步骤@Name

3. 现在发送下一步时，发送的步骤是位置 6(@Name 的长度为 5，所以 5+1th=6th pos)

4. 问题来了，根据tiptap/prose对象，@Name的长度是2，不是5

5. 因此，它会抛出“位置超出范围错误”

Answer 1

尝试将 trim() 添加到 parseDOM 以删除空格，因为我认为问题可能与存在的尾随空格有关 ("text": "")。

'{"stepType":"replace","from":15,"to":15,"slice":{"content":[{"type":"text","text":" "}]}}'

在 Chrome 浏览器中测试时，像这样带有一些换行符和空格的简单 HTML:

<span data-mention-id="test">
  @Test mention
</span>

返回 dom.innerText，末尾有一个空格 @Test mention 。

这是将 trim 添加到 parseDOM 的更新架构:

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.trim().split('@').join('') // trim removes white space around text
        return { id, label }
      },
    },
  ],
},