Merge pull request #6 from NearSocial/markdown-hashtags

Add onHashtag to Markdown component

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.3.0
+
+- Add support to hashtags for `Markdown` component. Expose `onHashtag` similar to `onMention`.
+
 ## 0.2.2
 
 - Await for wallet selector before trying to build a commit message. This fixes an issue when the wallet selector is not ready before the commit message is initialized.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "near-social-vm",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Near Social VM",
   "main": "dist/index.js",
   "files": [

src/lib/components/Markdown.js

@@ -4,16 +4,23 @@ import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { tomorrow } from "react-syntax-highlighter/dist/esm/styles/prism";
 import React from "react";
 import mentions from "./remark/mentions";
+import hashtags from "./remark/hashtags";
+
 export const Markdown = (props) => {
-  const { onLinkClick, text, onMention, syntaxHighlighterProps, ...rest } = props;
+  const { onLinkClick, text, onMention, onHashtag, syntaxHighlighterProps, ...rest } = props;
   return (
     <ReactMarkdown
       {...rest}
-      plugins={[gfm, mentions]}
+      plugins={[]}
+      rehypePlugins={[]}
+      remarkPlugins={[gfm, mentions, hashtags]}
+      children={text}
       components={{
         strong({ node, children, ...props }) {
           if (onMention && node.properties?.accountId) {
             return onMention(node.properties?.accountId);
+          } else if (onHashtag && node.properties?.hashtag) {
+            return onHashtag(node.properties?.hashtag);
           }
           return <strong {...props}>{children}</strong>;
         },
@@ -55,8 +62,6 @@ export const Markdown = (props) => {
           );
         },
       }}
-    >
-      {text}
-    </ReactMarkdown>
+    />
   );
 };

src/lib/components/remark/hashtags.js

@@ -0,0 +1,33 @@
+import { findAndReplace } from "mdast-util-find-and-replace";
+
+const hashtagRegex =
+  /#(\w+)/gi;
+
+export default function hashtags() {
+  function replace(value, hashtag, match) {
+    if (
+      /[\w`]/.test(match.input.charAt(match.index - 1)) ||
+      /[/\w`]/.test(match.input.charAt(match.index + value.length))
+    ) {
+      return false;
+    }
+
+    let node = { type: "text", value };
+    node = {
+      type: "strong",
+      children: [node],
+      data: {
+        hProperties: { hashtag },
+      },
+    };
+
+    return node;
+  }
+
+  function transform(markdownAST) {
+    findAndReplace(markdownAST, hashtagRegex, replace);
+    return markdownAST;
+  }
+
+  return transform;
+}