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/prependBlock 往任务列表项块中插入内容后解析异常 #4302

Closed
Zuoqiu-Yingyi opened this issue Mar 18, 2022 · 1 comment
Closed

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

Zuoqiu-Yingyi opened this issue Mar 18, 2022 · 1 comment
Assignees
@88250
Labels
Bug
Milestone
1.9.3

Comments

@Zuoqiu-Yingyi
Copy link
Contributor

Zuoqiu-Yingyi commented Mar 18, 2022 •
edited

描述问题 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

有序列表项与无序列表项均无此缺陷
@Zuoqiu-Yingyi
Copy link
Contributor Author

Zuoqiu-Yingyi commented Mar 18, 2022 •
edited

补充: 找到原因了, *.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 Zuoqiu-Yingyi changed the title 使用 API /api/block/prependBlock 往任务列表项块中插入内容后刷新, 新插入内容渲染错误并有可能导致运行时异常 使用 API /api/block/prependBlock 往任务列表项块中插入内容后解析异常 Mar 18, 2022
@88250 88250 self-assigned this Mar 18, 2022
@88250 88250 added this to the 1.9.3 milestone Mar 18, 2022
@88250 88250 added the Bug label Mar 19, 2022
@88250 88250 closed this as completed Mar 19, 2022
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