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 {