Milkdown
custom schema error: Cannot create node for paragraph #1997
Answered
by
Saul-Mirone
dingshaohua-com
asked this question in
Q&A
-
|
card.ts import { $node, $remark } from '@milkdown/kit/utils';
import { Editor } from '@milkdown/kit/core';
import { jsonToHtmlAttr } from '@dingshaohua.com/utils';
const cardRemark = $remark('remarkDirective1', function () {
return function () {
const that = this;
return function (tree: any) {
const transformer = (node: any) => {
if (!node.children) return;
const firstChild = node.children.at(0);
const isCardStart = firstChild.type === 'html' && /^<card/.test(firstChild.value.trim());
if (isCardStart) {
const htmlNode = jsonToHtmlAttr(firstChild.value);
const tree: any = that.parse(htmlNode.node.innerHTML.trim());
node.children.splice(0, node.children.length, {
type: 'card-node',
children: tree.children,
attrs: htmlNode.attrs,
});
}
node.children.forEach(transformer);
};
transformer(tree);
}
};
});
const cardSchema = $node('card-node', (ctx) => {
return {
group: 'block',
inline: false,
atom: false,
content: 'block*',
attrs: {
title: '',
},
toDOM: (node) => {
return [
'div',
{
class: 'card'
},
[
'div',
{
class: 'card-title'
},
node.attrs.title,
],
[
'div',
{
class: 'card-content'
},
0,
],
];
},
parseMarkdown: {
match: (node) => node.type === 'card-node',
runner: (state, node, type) => {
state.openNode(type, node.attrs);
if (node.children) {
state.next(node.children);
} else if (node.value) {
state.addText(node.value as string);
}
state.closeNode();
},
},
};
});
export default (editor: Editor) => {
editor.use(cardSchema).use(cardRemark);
};markdown content <card title="这是标题">
**这是**另一个测试卡片
哈哈
## 这是标题
嘻嘻
</card>get error my-editor.tsx:122 MilkdownError: [Description]: "Cannot create node for paragraph".
[Attributes]: null.
[Content]: ["card-node(paragraph(strong(\"这是\"), \"另一个测试卡片\\n哈哈\"), heading(\"这是标题\"), paragraph(\"嘻嘻\"))"]. |
Beta Was this translation helpful? Give feedback.
Answered by
Saul-Mirone
Jun 27, 2025
Replies: 1 comment 2 replies
-
|
You remark AST is wrong. Your AST structure is like this: {
"type": "root",
"children": [
{
"type": "paragraph",
"position": {
"start": {
"line": 2,
"column": 1,
"offset": 1
},
"end": {
"line": 7,
"column": 8,
"offset": 56
}
},
"children": [
{
"type": "card-node",
"children": [
{
"type": "paragraph",
"children": [
{
"type": "strong",
"children": [
{
"type": "text",
"value": "这是",
"position": {
"start": {
"line": 1,
"column": 3,
"offset": 2
},
"end": {
"line": 1,
"column": 5,
"offset": 4
}
}
}
],
"position": {
"start": {
"line": 1,
"column": 1,
"offset": 0
},
"end": {
"line": 1,
"column": 7,
"offset": 6
}
}
},
{
"type": "text",
"value": "另一个测试卡片\n哈哈",
"position": {
"start": {
"line": 1,
"column": 7,
"offset": 6
},
"end": {
"line": 2,
"column": 3,
"offset": 16
}
}
}
],
"position": {
"start": {
"line": 1,
"column": 1,
"offset": 0
},
"end": {
"line": 2,
"column": 3,
"offset": 16
}
}
},
{
"type": "heading",
"depth": 2,
"children": [
{
"type": "text",
"value": "这是标题",
"position": {
"start": {
"line": 3,
"column": 4,
"offset": 20
},
"end": {
"line": 3,
"column": 8,
"offset": 24
}
}
}
],
"position": {
"start": {
"line": 3,
"column": 1,
"offset": 17
},
"end": {
"line": 3,
"column": 8,
"offset": 24
}
}
},
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "嘻嘻",
"position": {
"start": {
"line": 4,
"column": 1,
"offset": 25
},
"end": {
"line": 4,
"column": 3,
"offset": 27
}
}
}
],
"position": {
"start": {
"line": 4,
"column": 1,
"offset": 25
},
"end": {
"line": 4,
"column": 3,
"offset": 27
}
}
}
],
"attrs": {
"title": "这是标题"
}
}
]
}
],
"position": {
"start": {
"line": 1,
"column": 1,
"offset": 0
},
"end": {
"line": 8,
"column": 1,
"offset": 57
}
}
}You put |
Beta Was this translation helpful? Give feedback.
2 replies
-
|
so，what can i dou，can you help me fix the cardRemark or cardSchema 🥺 |
Beta Was this translation helpful? Give feedback.
-
|
gpt help me change like this const cardRemark = $remark('remarkDirective1', function () {
return function () {
const that = this;
return function (tree: any) {
const transformer = (node: any) => {
if (!node.children) return;
const firstChild = node.children.at(0);
const isCardStart = firstChild?.type === 'html' && /^<card/.test(firstChild.value.trim());
if (isCardStart) {
const htmlNode = jsonToHtmlAttr(firstChild.value);
const parsedTree: any = that.parse(htmlNode.node.innerHTML.trim());
// 检查当前节点是否是 paragraph，如果是，需要特殊处理
if (node.type === 'paragraph') {
// 将 card-node 提升到与 paragraph 同级
const cardNode = {
type: 'card-node',
children: parsedTree.children,
attrs: htmlNode.attrs,
};
// 替换整个 paragraph 节点为 card-node
Object.assign(node, cardNode);
} else {
node.children.splice(0, node.children.length, {
type: 'card-node',
children: parsedTree.children,
attrs: htmlNode.attrs,
});
}
}
node.children.forEach(transformer);
};
transformer(tree);
};
};
}); |
Beta Was this translation helpful? Give feedback.
Answer selected by
dingshaohua-com
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You remark AST is wrong. Your AST structure is like this: