Improved readme.md && added keywords into package.json (#4)

Co-authored-by: Krzysztof Nofz <[email protected]>

Co-authored-by: Krzysztof Nofz <[email protected]>

.gitignore

@@ -22,4 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-*.tgz
+*.tgz

README.md

@@ -1,12 +1,17 @@
+[![GitHub license](https://img.shields.io/github/license/zgrybus/milkdown-mentions-plugin)](https://github.com/zgrybus/milkdown-mentions-plugin/blob/master/LICENSE) [![npm](https://img.shields.io/npm/v/milkdown-mentions-plugin)](https://www.npmjs.com/package/milkdown-mentions-plugin)
+
 - [Overview](#overview)
 - [Using library](#using-library)
+- [Troubleshoots](#troubleshoots)
+  * [After selecting the thing I want to tag, each subsequent word is a link](#after-selecting-the-thing-i-want-to-tag--each-subsequent-word-is-a-link)
+
 
 ## Overview
 
-This library 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. 
+This library wraps [Milkdown](https://milkdown.dev/) 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](https://github.com/zgrybus/milkdown-mentions-plugin/blob/master/plugin_demo.gif)
+![Demo](https://github.com/zgrybus/milkdown-mentions-plugin/blob/master/assets/plugin_demo.gif)
 
 ## Using library
 
@@ -19,7 +24,7 @@ Using `yarn`
 yarn add  milkdown-mentions-plugin
 ```
 
-and then import the given components as shown below
+and then import the given components as shown below ( **of course you need to setup Milkdown** )
 ```typescript
 import { Editor as MilkdownEditor, rootCtx } from '@milkdown/core';
 import { commonmark } from '@milkdown/preset-commonmark';
@@ -56,9 +61,29 @@ export const useMilkdown = () => {
 ```typescript
 import { MentionsListDropdownProps } from 'milkdown-mentions-plugin'
 
-export const MyMentionsPluginDropdownView: React.FC<MentionsListDropdownProps> = ({ queryText, onMentionItemClick }) => {
-    return [...my list].filter(text => text.includes(queryText)).map(text => (
-      <button key={text} onClick={() => onMentionItemClick(text, `https://facebook.com/user/${text}`)}>{text}</button>
-    ))
+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](https://github.com/zgrybus/milkdown-mentions-plugin/blob/master/assets/subsequent_word_troubleshoot.gif)
+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

package.json

@@ -1,7 +1,14 @@
 {
   "name": "milkdown-mentions-plugin",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
+  "keywords": [
+    "milkdown",
+    "mentions",
+    "milkdown plugin",
+    "tag"
+  ],
+  "license": "MIT",
   "files": ["dist"],
   "exports": {
     ".": {