Skip to content

使用 API /api/block/prependBlock 往任务列表项块中插入内容后解析异常 #4302

New issue
New issue
Closed
Closed
使用 API /api/block/prependBlock 往任务列表项块中插入内容后解析异常#4302
Assignees
88250
Labels
Bug
Milestone
 
1.9.3
@Zuoqiu-Yingyi

Description

@Zuoqiu-Yingyi
Zuoqiu-Yingyi
opened on Mar 18, 2022 · edited by Zuoqiu-Yingyi
Contributor

描述问题 Describe the problem

复现步骤:

  1. 一个任务列表项 DOM 如下所示
<div data-marker="*" data-subtype="t" data-node-id="20220318203456-k2h9brm" data-type="NodeListItem" class="li protyle-wysiwyg--select">
    <div class="protyle-action protyle-action--task">
        <svg>
            <use xlink:href="#iconUncheck"></use>
        </svg>
    </div>
    <div data-node-id="20220318203456-tjafati" data-type="NodeParagraph" class="p" updated="20220318204655">
        <div contenteditable="true" spellcheck="false">1</div>
        <div class="protyle-attr" contenteditable="false"></div>
    </div>
    <div class="protyle-attr" contenteditable="false"></div>
</div>
  1. 使用 API /api/block/prependBlock 向该任务列表项插入一个块, 请求体如下所示
{
  "data": "```sql\n\n```",
  "dataType": "markdown",
  "parentID": "20220318203456-k2h9brm"
}
  1. 插入后任务列表项 DOM 如下所示, 目前一切正常
<div data-marker="*" data-subtype="t" data-node-id="20220318203456-k2h9brm" data-type="NodeListItem" class="li">
    <div class="protyle-action protyle-action--task">
        <svg>
            <use xlink:href="#iconUncheck"></use>
        </svg>
    </div>
    <div data-node-id="20220318205425-ijti5mu" data-node-index="1" data-type="NodeCodeBlock" class="code-block">
        <div class="protyle-action protyle-icons">
            <span class="protyle-action__language" contenteditable="false">sql</span>
            <span class="protyle-action__copy b3-tooltips b3-tooltips__nw" aria-label="复制" onmouseover="this.setAttribute('aria-label', '复制')">
                <svg>
                    <use xlink:href="#iconCopy"></use>
                </svg>
            </span>
        </div>
        <div contenteditable="true" spellcheck="false" class="hljs protyle-linenumber" data-render="true" style="white-space: pre; word-break: initial; font-variant-ligatures: normal;"></div>
        <span contenteditable="false" class="protyle-linenumber__rows">
            <span></span>
        </span>
        <div class="protyle-attr" contenteditable="false">​</div>
    </div>
    <div data-node-id="20220318203456-tjafati" data-type="NodeParagraph" class="p" updated="20220318204655">
        <div contenteditable="true" spellcheck="false">1</div>
        <div class="protyle-attr" contenteditable="false"></div>
    </div>
    <div class="protyle-attr" contenteditable="false"></div>
</div>
  1. 使用 F5 刷新当前文档后, 该任务列表项 DOM 更改为如下所示
<div data-marker="*" data-subtype="t" data-node-id="20220318203456-k2h9brm" data-type="NodeListItem" class="li" updated="20220318205425">
    <div data-node-id="20220318205425-ijti5mu" data-type="NodeCodeBlock" class="code-block" updated="20220318205425">
        <div class="protyle-action protyle-icons">
            <span class="protyle-action__language" contenteditable="false">sql</span>
            <span class="protyle-action__copy b3-tooltips b3-tooltips__nw" aria-label="复制" onmouseover="this.setAttribute('aria-label', '复制')">
                <svg>
                    <use xlink:href="#iconCopy"></use>
                </svg>
            </span>
        </div>
        <div contenteditable="true" spellcheck="false" class="hljs protyle-linenumber" data-render="true" style="white-space: pre; word-break: initial; font-variant-ligatures: normal;"></div>
        <span contenteditable="false" class="protyle-linenumber__rows">
            <span></span>
        </span>
        <div class="protyle-attr" contenteditable="false">​</div>
    </div>
    <div class="protyle-action protyle-action--task">
        <svg>
            <use xlink:href="#iconUncheck"></use>
        </svg>
    </div>
    <div data-node-id="20220318203456-tjafati" data-type="NodeParagraph" class="p" updated="20220318204655">
        <div contenteditable="true" spellcheck="false">1</div>
        <div class="protyle-attr" contenteditable="false"></div>
    </div>
    <div class="protyle-attr" contenteditable="false"></div>
</div>

显然, 列表项标志(如下所示)出现在了新插入的块与原有的块之间, 继续进行编辑时大概率会触发运行时异常

<div class="protyle-action protyle-action--task">
    <svg>
        <use xlink:href="#iconUncheck"></use>
    </svg>
</div>

期待的结果 Expected result

刷新前后 DOM 树不发生更改

版本环境 Version environment

  • Version: 1.9.1

更多信息 More information

有序列表项与无序列表项均无此缺陷

Activity

Zuoqiu-Yingyi

Zuoqiu-Yingyi commented on Mar 18, 2022

@Zuoqiu-Yingyi
Zuoqiu-Yingyi
on Mar 18, 2022 · edited by Zuoqiu-Yingyi
ContributorAuthor

补充: 找到原因了, *.sy 文件中任务列表标志位置也出现了错误

{
	"ID": "20220318203456-k2h9brm",
	"Type": "NodeListItem",
	"ListData": {
		"Typ": 3,
		"BulletChar": 42,
		"Marker": "Kg=="
	},
	"Properties": {
		"id": "20220318203456-k2h9brm",
		"updated": "20220318205425"
	},
	"Children": [
		{
			"ID": "20220318205425-ijti5mu",
			"Type": "NodeCodeBlock",
			"IsFencedCodeBlock": true,
			"Properties": {
				"id": "20220318205425-ijti5mu",
				"updated": "20220318205425"
			},
			"Children": [
				{
					"Type": "NodeCodeBlockFenceOpenMarker",
					"Data": "```"
				},
				{
					"Type": "NodeCodeBlockFenceInfoMarker",
					"CodeBlockInfo": "c3Fs"
				},
				{
					"Type": "NodeCodeBlockCode",
					"Data": "\n"
				},
				{
					"Type": "NodeCodeBlockFenceCloseMarker",
					"Data": "```"
				}
			]
		},
		{
			"Type": "NodeTaskListItemMarker"
		},
		{
			"ID": "20220318203456-tjafati",
			"Type": "NodeParagraph",
			"Properties": {
				"id": "20220318203456-tjafati",
				"updated": "20220318204655"
			},
			"Children": [
				{
					"Type": "NodeText",
					"Data": "1"
				}
			]
		}
	]
},
Zuoqiu-Yingyi
changed the title [-]使用 API `/api/block/prependBlock` 往任务列表项块中插入内容后刷新, 新插入内容渲染错误并有可能导致运行时异常[/-] [+]使用 API `/api/block/prependBlock` 往任务列表项块中插入内容后解析异常[/+] on Mar 18, 2022
88250
self-assigned this
on Mar 18, 2022
88250
added this to the 1.9.3 milestone on Mar 18, 2022
88250
added
Bug
on Mar 19, 2022
88250
closed this as completedon Mar 19, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Bug

Type

No type

Projects

No projects

Milestone

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @88250@Zuoqiu-Yingyi

      Issue actions
        使用 API `/api/block/prependBlock` 往任务列表项块中插入内容后解析异常 · Issue #4302 · siyuan-note/siyuan