How to register totally new nodeSchema?

[zgrybus]

I want to create mention node that works exactly the same as https://github.com/joelewis/prosemirror-mentions.
How may I register this node to the schema? 🤔 I just need to use $nodeSchema('mention', () => ... ) and that's it? I'm asking, because I'm getting Cannot handle unknown node 'mentions'. Do I really need to create remark plugin that looks almost the same as wrapInMentionsInputRule?

const mentionsRemarkPlugin = $remark('mentionsRemark', ....)

This is my schema so far 🤔

export const mentionsAttr = $nodeAttr('mentions');

export const mentionsSchema = $nodeSchema('mentions', ctx => ({
  content: 'inline*',
  group: 'block',
  attrs: {
    'data-mentions-username': {},
  },
  parseDOM: [
    {
      tag: 'span[data-mentions-username]',
      getAttrs: dom => {
        if (!(dom instanceof HTMLElement)) {
          throw expectDomTypeError(dom);
        }

        return {
          username: dom.getAttribute('data-mentions-username'),
        };
      },
    },
  ],
  toDOM: node => [
    'span',
    { ...ctx.get(mentionsAttr.key)(node), ...node.attrs },
    0,
  ],
  parseMarkdown: {
    match: node => node.type === 'mentions',
    runner: (state, node, type) => {
      const username = node.username as string;
      state.openNode(type, { 'data-mentions-username': username });
      state.next(node.children);
      state.closeNode();
    },
  },
  toMarkdown: {
    match: node => node.type.name === 'mentions',
    runner: (state, node) => {
      state.openNode('leafDirective', undefined, {
        name: 'mentions',
        'data-mentions-username': node.attrs['data-mentions-username'],
      });
      state.next(node.content);
      state.closeNode();
    },
  },
}));

const userGroup = '[\\da-z][-\\da-z_]{0,38}';
const mentionRegex = new RegExp('(?:^|\\s)@(' + userGroup + ')', 'gi');

const wrapInMentionsInputRule = $inputRule(
  ctx =>
    new InputRule(mentionRegex, (state, match, start, end) => {
      const [value, username = ''] = match;
      const { tr } = state;
      if (value) {
        tr.replaceWith(
          start,
          end,
          mentionsSchema
            .type(ctx)
            .create({ 'data-mentions-username': username })
        );
      }

      return tr;
    })
);

Basically, I'm following this tutorial: https://milkdown.dev/docs/plugin/example-iframe-plugin, however my scenario is more complex, as I need to render dropdown with suggestions, while user is typing.

Should I use markSchema for such feature? However, I will need to extend "mention" with some UI, as I mentioned above, so markSchema might not be good choice 🤔

Any advices?

[zgrybus]

@Saul-Mirone One question. How may I register totally new node? For example I want to create type: 'new_node' and render it using Milkdown. How should I approach? No idea how to register totally new node into remark 🤔

[Saul-Mirone]

You can just use the schema you created. As for the new node, Maybe you can take a look at image block as an example. Basically you need to create that node both in remark AST and prosemirror schema.