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

编程问答 2022-05-24

问题描述

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

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

Sub RunMe()

Workbooks("NewWb").Activate
Sheets("Employee Cost center data_4").Name = "Sheet2"
Sheets("Employee Cost center data_3").Name = "Sheet3"
Sheets("Employee Cost center data_2").Name = "Sheet4"
Sheets("Employee Cost center data_1").Name = "Sheet5"


Dim lRow3,lrow2 As Long
Dim fValue As Range
Dim Report As Worksheet
Sheets.Add.Name = "Report"
Worksheets("Report").Move After:=Worksheets(Worksheets.Count)
'Note that Sheet1 is blank. Therefore macro will start from sheet2.

Sheets("Sheet3").Select
lRow3 = Sheets("Sheet3").Range("D1").End(xlDown).Row
lrow2 = Sheets("Sheet2").Range("D1").End(xlDown).Row

'We will use Sheet2 as the reference sheet and will compare the remaining sheets with Sheet2
For Each cell In Range("D2:D" & lRow3)
    With Sheets("Sheet2").Range("D2:D" & lrow2)
        Set fValue = .Find(cell.Value,LookIn:=xlValues)
        If fValue Is nothing Then
            cell.EntireRow.copy Sheets("Report").Range("A" & Rows.Count).End(xlUp).Offset(1,0)
        End If
    
    End With

Next cell
End Sub

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

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

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

第 1 步：@philip Isik

第 2 步：“”

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

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

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

RangeError：位置 15 超出范围

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

有谁知道为什么会这样？已经用了 2 天了。非常感谢任何帮助！

TLDR：

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

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

  3. 现在当它发送下一步时，发送的步骤是针对位置 6（@Name 的长度为 5，所以 5+1th=6th pos）

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

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

解决方法

尝试将 order.user_id 添加到 trim() 以删除空格，因为我发现问题可能与尾随空格存在 (parseDOM) 相关。

"text": " "

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

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

返回 <span data-mention-id="test"> @Test mention </span> ，末尾有一个空格 dom.innerText。

这是更新后的架构，将 @Test mention 添加到 trim：

parseDOM
javascriptprose-mirrortiptap