feat(plugin): plugins provide markdown components (#166)

packages/plugin/package.json

@@ -31,11 +31,15 @@
     "@types/md5": "^2.3.2",
     "@types/url-parse": "^1.4.8",
     "@veramo-community/veramo-react": "^1.1.0",
-    "@veramo/core": "5.5.2-next.8",
-    "@veramo/core-types": "5.5.2-next.8",
-    "@veramo/data-store": "5.5.2-next.8",
+    "@veramo/core": "5.5.2-next.9",
+    "@veramo/core-types": "5.5.2-next.9",
+    "@veramo/data-store": "5.5.2-next.9",
+    "@veramo/utils": "5.5.2-next.9",
     "antd": "~5.8.4",
     "date-fns": "^2.30.0",
+    "did-jwt-vc": "^3.2.10",
+    "highlight.js": "^11.8.0",
+    "markdown-it": "^13.0.2",
     "md5": "^2.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -45,6 +49,7 @@
     "url-parse": "^1.5.10"
   },
   "devDependencies": {
+    "@types/markdown-it": "^13.0.2",
     "@types/react": "^18.2.23",
     "@types/react-dom": "^18.2.8"
   }

packages/plugin/src/components/MarkDown.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react'
+import { VerifiableCredentialComponent } from './VerifiableCredentialComponent.js'
+import hljs from 'highlight.js';
+import MarkdownIt from 'markdown-it';
+import "highlight.js/styles/base16/solarized-dark.css";
+import { IDataStore, UniqueVerifiableCredential } from '@veramo/core-types';
+import { useVeramo } from '@veramo-community/veramo-react';
+import { Spin } from 'antd';
+import { usePlugins } from '../PluginProvider.js';
+
+const md = new MarkdownIt({
+  html: true,
+  highlight: function (str, lang) {
+      if (lang && hljs.getLanguage(lang)) {
+          try {
+              return hljs.highlight(str, { language: lang }).value;
+          } catch (e) {
+              console.error(e);
+              /* empty */
+          }
+      }
+
+      return ''; // use external default escaping
+  },
+})
+
+export const MarkDown: React.FC<{ content: string}> = ({ content }: { content: string}) => {
+    const { plugins } = usePlugins()
+    const parsed = md.parse(content, {})
+
+    return (<>
+      {parsed.map((token, index) => {
+
+      let Result: React.FC | undefined = undefined
+      plugins.forEach((plugin) => {
+        if (!Result && plugin.config?.enabled && plugin.getMarkdownComponent) {
+          const Component = plugin.getMarkdownComponent(token)
+          if (Component) {
+            Result = Component
+          }
+        }
+      })
+
+      if (Result) {
+        return Result
+      }
+
+      return <div key={index} dangerouslySetInnerHTML={{ __html: md.renderer.render([token], {}, {}) }} />
+    })}</>);
+}
+
+export const CredentialLoader: React.FC<{ hash: string, did?: string}> = ({ hash, did }) => {
+
+    const [credential, setCredential] = useState<UniqueVerifiableCredential>()
+    const { agent } = useVeramo<IDataStore>()
+
+    useEffect(() => {
+      const load = async () => {
+        const verifiableCredential = await agent?.dataStoreGetVerifiableCredential({
+          hash,
+        });
+
+        if (verifiableCredential) {
+          setCredential({hash, verifiableCredential})
+        } else {
+          // TRY IPFS or DIDComm
+        }
+      }
+
+      load()
+    }, [agent, hash])
+
+    return credential ? <VerifiableCredentialComponent credential={credential} /> : <Spin />
+}
+

packages/plugin/src/index.ts

@@ -5,4 +5,5 @@ export { CredentialActionsDropdown } from './components/CredentialActionsDropdow
 export { IdentifierProfile } from './components/IdentifierProfile.js'
 export { CredentialSummary } from './components/CredentialSummary.js'
 export { VerifiableCredentialComponent } from './components/VerifiableCredentialComponent.js'
-export * from './agent-plugins/IdentifierProfilePlugin.js'
+export * from './agent-plugins/IdentifierProfilePlugin.js'
+export * from './components/MarkDown.js'

packages/plugin/src/types.ts

@@ -2,7 +2,7 @@ import { MenuProps } from 'antd';
 import { MenuDataItem } from '@ant-design/pro-components';
 import { UniqueVerifiableCredential } from '@veramo/core-types'
 import { IAgentPlugin } from '@veramo/core'
-
+import Token from 'markdown-it/lib/token';
 export type IAgentExplorerPluginConfig = {
   url: string;
   enabled: boolean;
@@ -30,6 +30,7 @@ export type IAgentExplorerPlugin = {
   identifierContextMenuItems?: MenuProps['items'];
   getCredentialComponent?: (credential: UniqueVerifiableCredential) => React.FC<IVerifiableComponentProps>;
   agentPlugins?: IAgentPlugin[];
+  getMarkdownComponent?: (token: Token) => React.FC;
 }
 
 export interface IPlugin {