Skip to content

Plugin that allows you to mentions people and transform it into links

License

Notifications You must be signed in to change notification settings

zgrybus/milkdown-mentions-plugin

Repository files navigation

GitHub license npm

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.

Demo

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

Demo 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

About

Plugin that allows you to mentions people and transform it into links

Resources

License

Stars

Watchers

Forks

Packages

No packages published