可以添加自定义语法吗？

[gzyunke]

请问这个可以添加自定义的语法吗？
比如我要加-d 这是一个红色背景的引用块，效果是希望显示为一个红色背景的引用块，似乎识别不了， toMarkdown 时会报错：Uncaught Error: Cannot handle unknown node yy。

这是我的代码，在 vue2 中使用

<template>
  <div >
    <div ref="editor"></div>
  </div>

</template>

<script>

import { Editor,editorViewCtx, serializerCtx,defaultValueCtx, rootCtx, RemarkPlugin  } from '@milkdown/core';
import { nord } from '@milkdown/theme-nord';
import { commonmark, blockquote } from '@milkdown/preset-commonmark';
import { clipboard } from '@milkdown/plugin-clipboard';
import directive from 'remark-directive';
import { wrapIn, wrappingInputRule } from '@milkdown/prose';
import { AtomList, createNode, createPlugin } from "@milkdown/utils";
import { listener, listenerCtx } from "@milkdown/plugin-listener";
import { InputRule } from "prosemirror-inputrules";


export default {
  props: {
    msg: String
  },
  data(){
      return {
        editor: '',
      }
  },
  methods: {
      async init(){

        const yy = createNode(() => {
          const id = 'yy';
          console.log('init node')
          return {
            id,
            remarkPlugins: () => [directive],
            inputRules: (nodeType) => {
              console.log('on inputRules', nodeType);
              return [wrappingInputRule(/^\s*-d\s$/, nodeType)]
            },
            schema: () => {
              console.log('on schema')
              return ({
                content: 'block+',
                group: 'block',
                defining: true,
                toDOM: (node) => {
                  console.log('on to dom, node:', node);
                  return ['yy', {class: 'danger'}, 0]
                },
                parseMarkdown: {
                  match: (node) => {
                    console.log('on parseMarkdown match, node:', node);
                    return node.type === id
                  },
                  runner: (state, node, type) => {
                    console.log('on parseMarkdown runner, state, node, type', state, node, type);
                    state.openNode(type).next(node.children).closeNode();
                  },
                },
                toMarkdown: {
                  match: (node) => {
                    console.log('on toMarkdown match, node:', node);
                    return node.type.name === id
                  },
                  runner: (state, node) => {
                    console.log('on toMarkdown runner')
                    console.log('state', state)
                    console.log('node', node)
                    console.log('node content', node.content)
                    state.openNode('yy').next(node.content).closeNode();
                  },
                },
              })
            }
          }
        });

        const plugins = AtomList.create([yy()]);

        this.editor = await Editor.make()
                .config((ctx) => {
                  ctx.set(listenerCtx, {
                    markdown: [
                      (get) => {
                        // this.rawMarkdown = get();
                        window.getMarkdown = get
                      }
                    ],
                    docs: [
                      (node) => {
                        console.log('doc node', node)
                        this.node = node.toJSON();
                      },
                    ],
                  });
                })
                .use(listener)
                .use(nord)
                .use(plugins)
                .use(commonmark)
                .create();
        // mdast
      }
  },
  mounted() {
    this.init()
  }
}
</script>

[Saul-Mirone]

你需要添加一个能够处理yy类型的node的remark插件。

toMarkdown的作用，是将你的prosemirror节点（yy）转换为一个remark节点，然后转换后的remark节点会由remark处理。但是这里你的yy节点remark无法处理（因为这不是一个默认节点类型），因此你需要一个remark插件来处理这种类型的节点。

我推荐你把它转换为remark的directive插件能够处理的类型。

[gzyunke]

那就必须是:xxx这种格式了？想要自定义格式，milkdown 要是能支持下就好了，这样自定义插件才有意义，不然感觉只是一个摆设，限制死了只能默认类型。

[Saul-Mirone]

倒也没有限制，你也可以写一个remark插件，不复杂。可以参考这里：

定义：
https://github.com/Saul-Mirone/milkdown/blob/main/gh-pages/component/MilkdownEditor/codeSandBox.ts#L18
使用：

[gzyunke]

倒也没有限制，你也可以写一个remark插件，不复杂。可以参考这里：https://github.com/Saul-Mirone/milkdown/blob/main/gh-pages/component/MilkdownEditor/codeSandBox.ts#L18

好的，感谢！我看看

[gzyunke]

加了，还是有问题，可以帮忙看看吗？打开后，换行输入-d xxx就会看到报错
codesandbox： https://codesandbox.io/s/test-milkdown-1utik?file=/src/components/Test.vue

[Saul-Mirone]

因为你生成的remark节点没有children

[gzyunke]

因为你生成的remark节点没有children

具体要怎么改？抱歉，不是很清楚

[Saul-Mirone]

因为你生成的remark节点没有children

具体要怎么改？抱歉，不是很清楚

我对remark研究也不深入，不是很清楚，估计要看下别的remark插件怎么写的。

[gzyunke]

因为你生成的remark节点没有children

具体要怎么改？抱歉，不是很清楚

我对remark研究也不深入，不是很清楚，估计要看下别的remark插件怎么写的。

看错误不是很像没有 children 的问题，还是原来那个错误，无法识别 Uncaught Error: Cannot handle unknown node yy

[Saul-Mirone]

因为你生成的remark节点没有children

具体要怎么改？抱歉，不是很清楚

我对remark研究也不深入，不是很清楚，估计要看下别的remark插件怎么写的。

看错误不是很像没有 children 的问题，还是原来那个错误，无法识别 Uncaught Error: Cannot handle unknown node yy

这里这个错误是当你toMarkdown的时候用了yy这个节点，但是remark识别不了，所以本质上还是remark插件的问题，例如你改为open('paragraph')，这里就不会报错了

[Saul-Mirone]

我一般用issue追踪bug，用discussion继续讨论吧。