feat: show links in markdown content as chips

drodil · Nov 29, 2024 · eb156c7 · eb156c7
1 parent 37b327f
commit eb156c7
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 7 deletions.
diff --git a/plugins/qeta-common/src/utils.ts b/plugins/qeta-common/src/utils.ts
@@ -1,5 +1,6 @@
 import { parseEntityRef, stringifyEntityRef } from '@backstage/catalog-model';
 import { compact } from 'lodash';
+import { isValidTag } from './tags';
 
 export const truncate = (str: string, n: number): string => {
   return str.length > n ? `${str.slice(0, n - 1)}...` : str;
@@ -23,6 +24,16 @@ export const findUserMentions = (text: string): string[] => {
   );
 };
 
+export const findTagMentions = (text: string): string[] => {
+  const mentions = text.match(/#(\S+)/g);
+  const ret = mentions ? Array.from(new Set(mentions)) : [];
+  return compact(
+    ret.filter(tag => {
+      return isValidTag(tag);
+    }),
+  );
+};
+
 // Covers many common but not all cases of markdown formatting
 export const removeMarkdownFormatting = (text: string): string => {
   // Remove HTML tags

diff --git a/plugins/qeta-react/src/components/MarkdownRenderer/MarkdownRenderer.tsx b/plugins/qeta-react/src/components/MarkdownRenderer/MarkdownRenderer.tsx
@@ -6,7 +6,10 @@ import {
   a11yLight,
 } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import { IconButton, makeStyles, Tooltip, Typography } from '@material-ui/core';
-import { findUserMentions } from '@drodil/backstage-plugin-qeta-common';
+import {
+  findTagMentions,
+  findUserMentions,
+} from '@drodil/backstage-plugin-qeta-common';
 import gfm from 'remark-gfm';
 import rehypeSlug from 'rehype-slug';
 import rehypeToc, { HeadingNode, TextNode } from '@jsdevtools/rehype-toc';
@@ -20,6 +23,7 @@ import { Variant } from '@material-ui/core/styles/createTypography';
 import GithubSlugger from 'github-slugger';
 import { HtmlElementNode } from '@jsdevtools/rehype-toc/lib/types';
 import { find } from 'unist-util-find';
+import { TagChip } from '../TagsAndEntities/TagChip';
 
 const slugger = new GithubSlugger();
 
@@ -303,20 +307,34 @@ export const MarkdownRenderer = (props: {
               if (typeof child !== 'string') {
                 return child;
               }
-              const mentions = findUserMentions(child);
-              if (mentions.length === 0) {
+              const userMentions = findUserMentions(child);
+              const tagMentions = findTagMentions(child);
+              if (userMentions.length === 0 && tagMentions.length === 0) {
                 return child;
               }
 
               return child.split(' ').map((word: string) => {
-                const mention = mentions.find(m => word.includes(m));
-                if (mention) {
+                const userMention = userMentions.find(m => word === m);
+                if (userMention) {
+                  return (
+                    <>
+                      <EntityRefLink
+                        entityRef={userMention.slice(1)}
+                        hideIcon
+                      />{' '}
+                    </>
+                  );
+                }
+
+                const tagMention = tagMentions.find(m => word === m);
+                if (tagMention) {
                   return (
                     <>
-                      <EntityRefLink entityRef={mention.slice(1)} hideIcon />{' '}
+                      <TagChip tag={tagMention.slice(1)} />
                     </>
                   );
                 }
+
                 return <>{word} </>;
               });
             });

diff --git a/plugins/qeta-react/src/components/TagsAndEntities/TagChip.tsx b/plugins/qeta-react/src/components/TagsAndEntities/TagChip.tsx
@@ -29,6 +29,14 @@ const TagTooltip = (props: { tag: string }) => {
       if (res) {
         cache.set(tag, res);
         setResp(res);
+      } else {
+        setResp({
+          id: 0,
+          tag,
+          postsCount: 0,
+          followerCount: 0,
+          description: '',
+        });
       }
     });
   }, [qetaApi, tag]);
@@ -54,7 +62,7 @@ const TagTooltip = (props: { tag: string }) => {
           <MarkdownRenderer content={resp.description} />
         </Grid>
       )}
-      {!tags.loading && (
+      {!tags.loading && resp.id !== 0 && (
         <Grid item xs={12}>
           <Button
             size="small"