[😁 Resolved]How to write a custom syntax plugin to parse ==highlight_content== to <mark>highlight_content</mark>?

[yswang0927]

Hello,
I want to write a custom syntax plugin to parse ==highlight_content== to <mark>highlight_content</mark>,
but I cantnot find any custom plugin help from milkdown.dev.

Can somebody help me? Thanks!

==================================
[😁 Resolved] The below code is works ok

import { $inputRule, $node, $remark } from '@milkdown/kit/utils';
import { InputRule } from '@milkdown/kit/prose/inputrules';

/**
 * custom-syntax-plugin: Parse `==content==` to `<mark>content</mark>`
 */
const remarkMark = $remark('remarkMark', () => () => (tree) => {
    const visit = (node) => {
        // only parse text node
        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) {
                // add before text node
                if (match.index > lastIndex) {
                    nodes.push({
                        type: 'text',
                        value: value.slice(lastIndex, match.index)
                    });
                }

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

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

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

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

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

        return [node];
    };

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

const markNode = $node('mark', () => ({
    group: 'inline',
    inline: true,
    atom: true,
    marks: '',
    content: '',
    attrs: {
        content: { default: '' },
    },
    parseDOM: [{
        tag: 'mark',
        getAttrs: (dom) => ({
            'content': dom.textContent,
        }),
    }],
    toDOM: (node) => ['mark', {}, node.attrs.content],
    parseMarkdown: {
        match: (node) => node.type === 'mark',
        runner: (state, node, type) => {
            state.addNode(type, { content: node.content });
        },
    },
    toMarkdown: {
        match: (node) => node.type.name === 'mark',
        runner: (state, node) => {
            state.addNode('text', undefined, undefined, {
                value: `==${node.attrs.content}==`
            });
        },
    }
}));

const markInputRule = $inputRule((ctx) => new InputRule(/==([^=]+)==/, (state, match, start, end) => {
    const [okay, content = ''] = match;
    const { tr } = state;
    if (okay) {
        tr.replaceWith(start, end, markNode.type(ctx).create({ 'content': content }));
    }
    return tr;
}));

export const highlightMarkPlugin = [remarkMark, markInputRule, markNode].flat();

[Saul-Mirone]

1. Transform your syntax

First, you'll need a remark plugin to transform your syntax to target AST, like how https://github.com/remarkjs/remark-math works.

==highlight_content==

to

{
  type: 'markdown_highlight_type',
  value: 'highlight_content'
}

2. Add an implementation in schema

// I use `pm_highlight_type` and `markdown_highlight_type` to show how it works
// but it's okay in realworld to use same value as type.
export const highlightSchema = $markSchema('pm_highlight_type', () => ({
  inclusive: false,
  code: true,
  parseDOM: [
    {
      tag: `span[data-type="inline_highlight"]`,
    },
  ],
  toDOM: (mark) => ['span', { 'data-type': "inline_highlight" }],
  parseMarkdown: {
    // TODO
  },
  toMarkdown: {
    // TODO
  },
}))

3. Implement the markdown transformer

parseMarkdown: {
  match: (node) => node.type === 'markdown_highlight_type',
  runner: (state, node, markType) => {
    state
      .openMark(markType)
      next(node.children)
      .closeMark(markType)
  },
},
toMarkdown: {
  match: (mark) => mark.type.name === 'pm_highlight_type',
  runner: (state, mark, node) => {
    // if you implemented the toMarkdownExtension in remark
    // similar to: https://github.com/remarkjs/remark-math/blob/main/packages/remark-math/lib/index.js#L34
    state.withMark(mark, 'markdown_highlight_type')

    // if you didn't implement toMarkdownExtension
    state.addText('==').addText(node.text || '').addText('==')
  },
}

[yswang0927]

Hi, @Saul-Mirone I wrote the following code based on @milkdown/preset-commonmark/src/mark/emphasis.ts code, but it doesn't work.

import { commandsCtx } from '@milkdown/core'
import {
  $command,
  $inputRule,
  $markAttr,
  $markSchema,
  $useKeymap,
} from '@milkdown/utils'
import { markRule } from '@milkdown/prose'
import { withMeta } from './__internal__'

  
/// HTML attributes for the highlight mark.
export const highlightAttr = $markAttr('pm_highlight_type');

withMeta(highlightAttr, {
  displayName: 'Attr<highlight>',
  group: 'Highlight',
});

/// Highlight mark schema.
export const highlightSchema = $markSchema('pm_highlight_type', (ctx) => ({
  priority: 100,
  code: true,
  inclusive: false,
  parseDOM: [{ tag: 'mark' }],
  toDOM: (mark) => ['mark'],
  parseMarkdown: {
    match: (node) => node.type === 'pm_highlight_type',
    runner: (state, node, markType) => {
      state.openMark(markType, { marker: node.marker })
      state.next(node.children)
      state.closeMark(markType)
    },
  },
  toMarkdown: {
    match: (mark) => mark.type.name === 'pm_highlight_type',
    runner: (state, mark) => {
      state.withMark(mark, 'pm_highlight_type', undefined, {
        marker: mark.attrs.marker,
      })
    },
  },
}));

withMeta(highlightSchema.mark, {
  displayName: 'MarkSchema<highlight>',
  group: 'Highlight',
});

withMeta(highlightSchema.ctx, {
  displayName: 'MarkSchemaCtx<highlight>',
  group: 'Highlight',
});

/// A command to toggle the highlight mark.
export const toggleHighlightCommand = $command('ToggleHighlight', (ctx) => () => {
  return toggleMark(highlightSchema.type(ctx))
});

withMeta(toggleHighlightCommand, {
  displayName: 'Command<toggleHighlightCommand>',
  group: 'Highlight',
});

/// Input rule for create highlight mark.
export const highlightInputRule = $inputRule((ctx) => {
  return markRule(/(?:==)([^==]+)(?:==)/g, highlightSchema.type(ctx))
});

withMeta(highlightInputRule, {
  displayName: 'InputRule<highlightInputRule>',
  group: 'Highlight',
});

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

withMeta(highlightKeymap.ctx, {
  displayName: 'KeymapCtx<highlight>',
  group: 'Highlight',
});

withMeta(highlightKeymap.shortcuts, {
  displayName: 'Keymap<highlight>',
  group: 'Highlight',
});

export const highlight = [highlightAttr, highlightSchema, toggleHighlightCommand, highlightInputRule, highlightKeymap].flat()

import { highlight } from './plugin-highlight';

// ... other code

crepe.editor.use(highlight);

[Saul-Mirone]

You need a remark plugin.

[yswang0927]

I try to write the remark-plugin, but it doesn't work , output error: Error: Cannot handle unknown node 'pm_highlight_type'.

import { $remark } from '@milkdown/utils'
import { visit } from 'unist-util-visit'

const highlightRegex = /(?:==)([^=]+)(?:==)/g;

const remarkHighlight = (tree) => {
    return visit(tree, 'text', (node, index, parent) => {
        const { value } = node;
        let match;
        let lastIndex = 0;
        const children = [];

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

            children.push({
                type: 'pm_highlight_type',
                value: match[1],
            });

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

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

        if (children.length > 0) {
            parent.children.splice(index, 1, ...children);
        }
    });
}

export const remarkHighlightPlugin = $remark(
    'highlight',
    () => () => remarkHighlight
);

export const highlight = [remarkHighlightPlugin, highlightAttr, highlightSchema, toggleHighlightCommand, highlightInputRule, highlightKeymap].flat()

[Saul-Mirone]

why pm_highlight_type? it should bemarkdown_highlight_type in the remark plugin.

[yswang0927]

Hi, @Saul-Mirone

I wrote it, it works ok now 😁, thank you very much 🤝🤝

import { $inputRule, $node, $remark } from '@milkdown/kit/utils';
import { InputRule } from '@milkdown/kit/prose/inputrules';

/**
 * custom-syntax-plugin: Parse `==content==` to `<mark>content</mark>`
 */
const remarkMark = $remark('remarkMark', () => () => (tree) => {
    const visit = (node) => {
        // only parse text node
        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) {
                // add before text node
                if (match.index > lastIndex) {
                    nodes.push({
                        type: 'text',
                        value: value.slice(lastIndex, match.index)
                    });
                }

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

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

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

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

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

        return [node];
    };

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

const markNode = $node('mark', () => ({
    group: 'inline',
    inline: true,
    atom: true,
    marks: '',
    content: '',
    attrs: {
        content: { default: '' },
    },
    parseDOM: [{
        tag: 'mark',
        getAttrs: (dom) => ({
            'content': dom.textContent,
        }),
    }],
    toDOM: (node) => ['mark', {}, node.attrs.content],
    parseMarkdown: {
        match: (node) => node.type === 'mark',
        runner: (state, node, type) => {
            state.addNode(type, { content: node.content });
        },
    },
    toMarkdown: {
        match: (node) => node.type.name === 'mark',
        runner: (state, node) => {
            state.addNode('text', undefined, undefined, {
                value: `==${node.attrs.content}==`
            });
        },
    }
}));

const markInputRule = $inputRule((ctx) => new InputRule(/==([^=]+)==/, (state, match, start, end) => {
    const [okay, content = ''] = match;
    const { tr } = state;
    if (okay) {
        tr.replaceWith(start, end, markNode.type(ctx).create({ 'content': content }));
    }
    return tr;
}));

export const highlightMarkPlugin = [remarkMark, markInputRule, markNode].flat();