milkdown-mentions-plugin

• Overview
• Using library
• Troubleshoots
  • After selecting the thing I want to tag, each subsequent word is a link

Overview

This library wraps Milkdown and allows you to tag people, for example. Of course, you can tag anything or anyone you want, because the library provides options to render a list of people or things you want to tag, as well as the page to which the user will be redirected after clicking on the tag. Additionally, the library transforms the tag into a link.

Using library

Using npm

npm i --save milkdown-mentions-plugin

Using yarn

yarn add  milkdown-mentions-plugin

and then import the given components as shown below ( of course you need to setup Milkdown )

import { Editor as MilkdownEditor, rootCtx } from '@milkdown/core';
import { commonmark } from '@milkdown/preset-commonmark';
import { useEditor } from '@milkdown/react';
import {
  mentionsPlugin,
  mentionsPluginOptions,
} from 'milkdown-mentions-plugin';

import { YourComponent } from '../YourComponent';

export const useMilkdown = () => {
  const mentions = mentionsPlugin();

  const editor = useEditor(
    root =>
      MilkdownEditor.make()
        .config(ctx => {
          ctx.set(rootCtx, root);
          ctx.update(mentionsPluginOptions.key, prev => ({
            ...prev,
            view: MyMentionsPluginDropdownView, 
          }));
        })
        .use(commonmark)
        .use(mentions),
    [],
  );

  return editor;
};

import { MentionsListDropdownProps } from 'milkdown-mentions-plugin'

export const MyMentionsPluginDropdownView: React.FC<MentionsListDropdownProps> = ({ 
  queryText, // current query text ( if we type @Name, then queryText is Name )
  onMentionItemClick // function that converts @Name text into link with appropriate url
}) => {
    return (
      [...my list]
        .filter(text => text.includes(queryText))
        .map(text => (
          <button 
            key={text} 
            onClick={() => onMentionItemClick(text, `https://facebook.com/user/${text}`)}
          >
            {text}
          </button>
        ))
    )
}

Troubleshoots

After selecting the thing I want to tag, each subsequent word is a link

This is a problem that many people who use Milkdown struggle with. To fix this, just add the following plugin mentioned in this issue: https://github.com/orgs/Milkdown/discussions/1114