Uncaught Error: Cannot handle unknown node customInlineMath

[Innoviox]

I have the following code to create a custom math schema:

import { $nodeSchema } from "@milkdown/utils";

const mathInlineId = "custom_math_inline";

export const customMathInlineSchema = $nodeSchema(mathInlineId, () => {
  return {
    content: "text*",
    group: "inline",
    marks: "",
    defining: true,
    inline: true,
    attrs: {
      value: {
        default: "",
      },
    },
    parseMarkdown: {
      match: ({ type }) => type === "customInlineMath",
      runner: (state, node, type) => {
        state.addNode(type, { value: node.value as string });
      },
    },
    toMarkdown: {
      match: (node) => node.type.name === mathInlineId,
      runner: (state, node) => {
        state.addNode(
          "customInlineMath",
          undefined,
          node.attrs.value,
        );
      },
    },
  };
});

However, when I run it it will not save my nodes properly because I get the error:

Uncaught Error: Cannot handle unknown node customInlineMath
How can I tell it how to handle the customInlineMath node in a way that I have not already done? Everywhere I log the state.schema.nodes my node is in there, why is the handler not being found? How can I have a node of a custom type?

[shenzhongkang]

I had same question on customize a new markdown syntax, like [[text here]] as internal link. Can you produce any example ? @Saul-Mirone

[yswang0927]

@shenzhongkang @Innoviox I have the same question too. Have you solved it?

[Saul-Mirone]

https://github.com/orgs/Milkdown/discussions/1674#discussioncomment-12188165

[yswang0927]

https://github.com/orgs/Milkdown/discussions/1674#discussioncomment-12188165

@Saul-Mirone I used $node , but cannot use toggleMark() in command and keymap, how to change $node -> $mark or $markSchema instead ?

[Saul-Mirone]

Here's an example about how to toggle a inline node: https://github.com/Milkdown/milkdown/blob/main/packages/crepe/src/feature/toolbar/component.ts#L98

If you want to use $mark, you can just use it. I don't see any problem.

[yswang0927]

Here's an example about how to toggle a inline node: https://github.com/Milkdown/milkdown/blob/main/packages/crepe/src/feature/toolbar/component.ts#L98

If you want to use $mark, you can just use it. I don't see any problem.

Thank you 🙏 , I use $markSchema to implements it, now it supports command and keymap 😊😊

import { commandsCtx } from '@milkdown/core';
import { $inputRule, $markSchema, $remark, $command, $useKeymap } from '@milkdown/kit/utils';
import { markRule } from '@milkdown/prose'
import { toggleMark } from '@milkdown/prose/commands';

const remarkMark = $remark('remarkMark', () => () => (tree) => {
    const visit = (node: any) => {
        if (node.type === 'text' && typeof node.value === 'string') {
            const value = node.value;
            const regex = /==([^=]+)==/g;
            let match;
            let lastIndex = 0;
            const nodes = [];

            while ((match = regex.exec(value)) !== null) {
                if (match.index > lastIndex) {
                    nodes.push({
                        type: 'text',
                        value: value.slice(lastIndex, match.index)
                    });
                }

                nodes.push({
                    type: 'mark',
                    content: match[1]
                });

                //lastIndex = match.index + match[0].length;
                lastIndex = regex.lastIndex;
            }

            if (lastIndex < value.length) {
                nodes.push({
                    type: 'text',
                    value: value.slice(lastIndex)
                });
            }

            return nodes.length > 0 ? nodes : [node];
        }

        if (Array.isArray(node.children)) {
            node.children = node.children.flatMap(visit);
        }

        return [node];
    };

    tree.children = tree.children.flatMap(visit);
    return tree;
});

const markSchema = $markSchema('mark', () => ({
    inclusive: true,
    parseDOM: [{
        tag: 'mark',
    }],
    toDOM: (mark) => ['mark', 0],
    parseMarkdown: {
        match: (node) => node.type === 'mark',
        runner: (state, node, type) => {
            state.openMark(type);
            state.addText(node.content as string);
            state.closeMark(type);
        },
    },
    toMarkdown: {
        match: (mark) => mark.type.name === 'mark',
        runner: (state, mark, node) => {
            state.withMark(mark, 'text', node.text ? ('==' + node.text + '==') : '');
        },
    }
}));


const markInputRule = $inputRule((ctx) => {
    return markRule(/==([^=]+)==/, markSchema.type(ctx))
});

const toggleHighlightCommand = $command('ToggleHighlight', (ctx) => () => {
    return toggleMark(markSchema.type(ctx));
});

const highlightKeymap = $useKeymap('highlightKeymap', {
    'ToggleHighlight': {
      shortcuts: 'Mod-m',
      command: (ctx) => {
        const commands = ctx.get(commandsCtx)
        return () => commands.call(toggleHighlightCommand.key)
      },
    },
});

export const highlightMarkPlugin = [remarkMark, markInputRule, markSchema, toggleHighlightCommand, highlightKeymap].flat();