Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

使用 API /api/block/appendBlock 往超级块中插入内容后渲染错误 #4283

Closed
Zuoqiu-Yingyi opened this issue Mar 16, 2022 · 0 comments
Closed

使用 API /api/block/appendBlock 往超级块中插入内容后渲染错误 #4283

Zuoqiu-Yingyi opened this issue Mar 16, 2022 · 0 comments
Assignees
@88250
Labels
Bug
Milestone
1.9.3

Comments

@Zuoqiu-Yingyi
Copy link
Contributor

描述问题 Describe the problem

使用 API /api/block/appendBlock 往超级块中插入内容时新插入内容位置渲染错误, 刷新文档后位置恢复正常

复现步骤:

  1. 新建一个文档, 文档 ID 为 20220317031809-f4a13aj
  2. 使用 API /api/block/appendBlock 在该文档中插入一个超级块
    请求体为:
{
    "data": "{{{row\n123\n}}}",
    "dataType": "markdown",
    "parentID": "20220317031809-f4a13aj"
}

响应体:

{
    "code": 0,
    "msg": "",
    "data": [
        {
            "doOperations": [
                {
                    "action": "insert",
                    "data": "<div data-node-id=\"20220317031830-95t5u77\" data-node-index=\"1\" data-type=\"NodeSuperBlock\" class=\"sb\" data-sb-layout=\"row\"><div data-node-id=\"20220317031830-ggvqci0\" data-type=\"NodeParagraph\" class=\"p\"><div contenteditable=\"true\" spellcheck=\"false\">123</div><div class=\"protyle-attr\" contenteditable=\"false\"></div></div><div class=\"protyle-attr\" contenteditable=\"false\"></div></div>",
                    "id": "20220317031830-95t5u77",
                    "parentID": "20220317031809-f4a13aj",
                    "previousID": "20220317031809-yypzewx",
                    "retData": null
                }
            ],
            "undoOperations": null
        }
    ]
}

实时渲染样式:
image
注: 这里为了方便调试, 使用了如下自定义 css 样式

.protyle-wysiwyg div[data-node-id]::after {
    content: attr(data-node-id);
    font-size: 12px;
}
  1. 再次使用 API /api/block/appendBlock 插入一个超级块, 不过这次请求体 parentID 属性设置为上一步插入的超级块的 ID 20220317031830-95t5u77
{
    "data": "{{{row\n456\n}}}",
    "dataType": "markdown",
    "parentID": "20220317031830-95t5u77"
}
响应体:
```json
{
    "code": 0,
    "msg": "",
    "data": [
        {
            "doOperations": [
                {
                    "action": "insert",
                    "data": "<div data-node-id=\"20220317032330-tmsdncw\" data-node-index=\"1\" data-type=\"NodeSuperBlock\" class=\"sb\" data-sb-layout=\"row\"><div data-node-id=\"20220317032330-iyoar7f\" data-type=\"NodeParagraph\" class=\"p\"><div contenteditable=\"true\" spellcheck=\"false\">456</div><div class=\"protyle-attr\" contenteditable=\"false\"></div></div><div class=\"protyle-attr\" contenteditable=\"false\"></div></div>",
                    "id": "20220317032330-tmsdncw",
                    "parentID": "20220317031830-95t5u77",
                    "previousID": "",
                    "retData": null
                }
            ],
            "undoOperations": null
        }
    ]
}

实时渲染样式:
image
这里可以看出, 块插入到了内容为 123 的段落的前方
4. 再次使用 API /api/block/appendBlock 插入一个超级块, parentID 属性设置不变, 依旧为 20220317031830-95t5u77

{
    "data": "{{{row\n789\n}}}",
    "dataType": "markdown",
    "parentID": "20220317031830-95t5u77"
}
响应体:
```json
{
    "code": 0,
    "msg": "",
    "data": [
        {
            "doOperations": [
                {
                    "action": "insert",
                    "data": "<div data-node-id=\"20220317032705-uhbkbw6\" data-node-index=\"1\" data-type=\"NodeSuperBlock\" class=\"sb\" data-sb-layout=\"row\"><div data-node-id=\"20220317032705-d1ftjyo\" data-type=\"NodeParagraph\" class=\"p\"><div contenteditable=\"true\" spellcheck=\"false\">789</div><div class=\"protyle-attr\" contenteditable=\"false\"></div></div><div class=\"protyle-attr\" contenteditable=\"false\"></div></div>",
                    "id": "20220317032705-uhbkbw6",
                    "parentID": "20220317031830-95t5u77",
                    "previousID": "20220317032330-tmsdncw",
                    "retData": null
                }
            ],
            "undoOperations": null
        }
    ]
}

实时渲染样式:
image
这里可以看出, 块依旧插入到了内容为 123 的段落的前方

  1. 使用 F5 刷新当前文档, 刚刚插入的块顺序恢复为理论状态
    image

期待的结果 Expected result

无需刷新文档, 插入的块顺序即渲染为理论状态

版本环境 Version environment

  • Version: 1.9.0
@88250 88250 self-assigned this Mar 17, 2022
@88250 88250 added this to the 1.9.3 milestone Mar 18, 2022
@88250 88250 changed the title 使用 API /api/block/appendBlock 往超级块中插入内容时新插入内容位置渲染错误 使用 API /api/block/appendBlock 往超级块中插入内容后渲染错误 Mar 19, 2022
@88250 88250 added the Bug label Mar 19, 2022
@88250 88250 closed this as completed Mar 19, 2022
@Zuoqiu-Yingyi Zuoqiu-Yingyi mentioned this issue Apr 3, 2022
Closed
@88250 88250 mentioned this issue Apr 4, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@88250 88250

Labels
Bug
Projects
None yet
Milestone
1.9.3
Development

No branches or pull requests
2 participants
@88250 @Zuoqiu-Yingyi