Trying to include blockquote-admonitions.

[mggrand]

Im trying to include the blockquote admonitions like discussed in https://github.com/orgs/community/discussions/16925.

I have tried to include the plugin https://github.com/myl7/remark-github-beta-blockquote-admonitions using

import plugin from 'remark-github-beta-blockquote-admonitions'
export const admonitionsBlockquoteRemarkPlugin = $remark("alert_blockquote", () => plugin as RemarkPluginRaw<{}>, {})

But this does not work. Am I missing something?

[Saul-Mirone]

The plugin seems won't change the AST of blockquote. It just check the first line of blockquote and modify the html output.

If you want to implement something similar in milkdown. You'll need to change the AST of the blockquote (like create a new node). You can see how I implemented the image block here: https://github.com/Milkdown/milkdown/blob/main/packages/components/src/image-block/remark-plugin.ts

In your case, you'll need to check the first paragraph in blockquote's children and create a new node if it matches some pattern.

[mggrand]

Exactly what I needed, thank you very much!

[mggrand]

@Saul-Mirone
I have successfully created the new AST element and so far, everything looking good. I have pretty much copy & pasted the whole code from the image block and adopted it where needed.

But now im getting the following error every time i try to load the editor.

MilkdownError: Create prosemirror node from remark failed in parser

I am creating the following AST node in the remark plugin

const newNode  = {
      type: "admonitions-blockquote",
      severity: displayTitle as InfoBlockSeverity,
      children: [paragraphTitle, paragraphBody]
    }

    parent.children.splice(index, 1, newNode)

defined a $nodeSchema with the name admonitions-blockquote and the following parseMarkdown function:

parseMarkdown: {
      match: ({ type }) => type === 'admonitions-blockquote',
      runner: (state, node, type) => {
    debugger;
        if(!node.severity){
          return
        }

        const severity = node.severity;

        state.openNode(type, { severity});
        state.next(node.children);
        state.closeNode();
      },
    },

i also hit the debugger point but then in the function state.closeNode the error from above is thrown.

The editor is configured like so:

 Editor.make()
.use(remarkAdmonitionsPlugin)
.use(admonitionBlockquoteSchema)
.use($view(admonitionBlockquoteSchema.node, () =>
    nodeViewFactory({ component: BlockQuote })
  ))
.use(commonmark)

Is there something else I am missing?

[Saul-Mirone]

Can you paste your schema here?

[mggrand]

My schema looks like this:

export const admonitionBlockquoteSchema = $nodeSchema('admonitions-blockquote', () => {
  return {
    inline: false,
    group: 'block',
    selectable: true,
    draggable: true,
    marks: '',
    atom: true,
    attrs: {
        severity: {
          default: 'NOTE' as InfoBlockSeverity
        }
    },
    parseDOM: [
      {
        tag: `blockquote[data-${attributeName}]`,
        getAttrs: (dom) => {
          debugger
          if (!(dom instanceof HTMLElement))
            throw Error(dom)

          return {
            severity: dom.dataset[attributeName] as InfoBlockSeverity,
          }
        },
      },
    ],
    toDOM: (node) => {
      debugger;
      if (node.attrs[attributeName] == null){
        throw new Error("wrong type")
      }

      return [
        'blockquote',
        {
          'data-severity': node.attrs[attributeName],
        },
        0,
      ]
    },
    parseMarkdown: {
      match: ({ type }) => type === 'admonitions-blockquote',
      runner: (state, node, type) => {
    debugger;
        if(!node.severity){
          return
        }

        const severity = node.severity;

        state.openNode(type, { severity});
        state.next(node.children);
        state.closeNode();
      },
    },
    toMarkdown: {
      match: node => node.type.name === 'admonitions-blockquote',
      runner: (state, node) => {
        debugger;
        if (node.attrs[attributeName] == null) {
          return
        }
        const severity = node.attrs[attributeName]

        const severityTitle = ` [!${severity}]`;

        state.openNode('blockquote', undefined, { severity })
        state.addNode('text', undefined, severityTitle);
        state.next(node.content.child(1))
        state.closeNode()
      },
    },
  }
})

The remark plugin like this:

export const remarkAdmonitionsPlugin = $remark('admonitions-blockquote', () => () => visitBlockQuote);

function visitBlockQuote(ast: Node) {
  return visit(ast, 'blockquote', (node: Node & { children?: Node[] }, index: number, parent: Node & { children: Node[] }) => {

    const blockquote = node as Blockquote

    if (blockquote.children[0]?.type !== 'paragraph'){
      return
    }

    const paragraph = blockquote.children[0]

    if (paragraph.children[0]?.type !== 'text')
    {
      return
    }

    const paragraphText = paragraph.children[0]
    let title
    let body = "";

    const titleEnd = paragraphText.value.indexOf('\n')
    if (titleEnd < 0) { //There is only a title

      if (paragraph.children.length > 1) return
      // Considering the reason why the paragraph ends here, the following one should be a children of the blockquote, which means it is always a block.
      // So no more check is required.

      title = paragraphText.value

      // Remove the text as the title
      paragraph.children.shift()
    } else {
      title = paragraphText.value.substring(0, titleEnd)
      body = paragraphText.value.substring(titleEnd + 1)
    }


    // remove surrounding [!...]
    const displayTitle = title.substring(2, title.length - 1)

    const paragraphTitle: Paragraph = {
      type: 'paragraph',
      children: [{ type: 'text', value: displayTitle }],
    }

    const paragraphBody: Paragraph= {
      type: 'paragraph',
      children: [{ type: 'text', value: body }],
    }

    const newNode  = {
      type: "admonitions-blockquote",
      severity: displayTitle as InfoBlockSeverity,
      children: [paragraphTitle, paragraphBody]
    }

    parent.children.splice(index, 1, newNode)
  })
}

[Saul-Mirone]

You'll need to add content: 'block+', in your schema because the node has children.

[mggrand]

ouu wow, thank you very much! It feels like I debugged this code for ages and in the end, it is just something so little.