feat(plugin): passing context to VC components

packages/plugin/package.json

@@ -34,13 +34,13 @@
  "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",
+ "react-markdown": "^9.0.0",
  "react-query": "^3.39.3",
  "react-router-dom": "^6.11.2",
+ "remark-gfm": "^4.0.0",
  "typescript": "5.2.2",
  "url-parse": "^1.5.10",
  "uuid": "^9.0.1"
@@ -54,6 +54,7 @@
  "@veramo/core": "5.5.3-next.17",
  "@veramo/core-types": "5.5.3-next.17",
  "@veramo/data-store": "5.5.3-next.17",
- "@veramo/utils": "5.5.3-next.17"
+ "@veramo/utils": "5.5.3-next.17",
+ "unified": "^11.0.3"
  }
 }

packages/plugin/src/components/CredentialActionsDropdown.tsx

@@ -2,9 +2,7 @@ import { Dropdown, App } from 'antd'
 import React from 'react'
 import { useVeramo } from '@veramo-community/veramo-react'
 import { useNavigate } from 'react-router-dom'
-import { PicLeftOutlined } from '@ant-design/icons'
 import { IDataStore, UniqueVerifiableCredential } from '@veramo/core'
-import { getIssuerDID } from '../utils/did.js'
 import { usePlugins } from '../PluginProvider.js'
 import { MenuProps } from 'antd'
 
@@ -27,47 +25,12 @@ export const CredentialActionsDropdown: React.FC<{
  }
  })
 
- const handleCopyEmbed = () => {
- let embed = ''
- if (verifiableCredential.proof?.jwt) {
- embed = `\`\`\`vc+jwt\n${verifiableCredential.proof.jwt}\n\`\`\``
- } else {
- embed = `\`\`\`vc+json\n${JSON.stringify(verifiableCredential, null, 2)}\n\`\`\``
- }
- navigator.clipboard.writeText(embed)
- notification.success({
- message: 'Credential embed copied to clipboard',
- })
- }
-
- const handleCopyReference = () => {
- const reference = `\`\`\`vc+multihash\n${getIssuerDID(verifiableCredential)}/${hash}\n\`\`\``
-
- navigator.clipboard.writeText(reference)
- notification.success({
- message: 'Credential reference copied to clipboard',
- })
- }
-
-
-
  return (
  <Dropdown
  menu={{
  items: [
  ...menuItems,
- {
- key: 'embed',
- label: 'Copy embed',
- icon: <PicLeftOutlined />,
- onClick: handleCopyEmbed,
- },
- {
- key: 'reference',
- label: 'Copy reference',
- icon: <PicLeftOutlined />,
- onClick: handleCopyReference,
- },
+
  ],
  }}
  >

packages/plugin/src/components/MarkDown.tsx

@@ -1,74 +1,71 @@
-import React, { useEffect, useState } from 'react'
+import React, { PropsWithChildren, 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 { Button, Spin } from 'antd';
 import { usePlugins } from '../PluginProvider.js';
 import { v4 } from 'uuid'
+import Markdown, { Components } from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { PluggableList } from 'unified'
 
-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 = (
+ { content, credential, context }: 
+ { content: string, credential?: UniqueVerifiableCredential, context?: any}
+) => {
 
-export const MarkDown: React.FC<{ content: string}> = ({ content }: { content: string}) => {
  const { plugins } = usePlugins()
+ const [ showAll, setShowAll ] = useState<boolean>(context?.textRange ? false : true)
 
- const markDownPlugins = React.useMemo(() => {
- const result: MarkdownIt.PluginSimple[] = []
+ const {remarkPlugins, components} = React.useMemo(() => {
+ const remarkPlugins: PluggableList = [remarkGfm]
+ let components: Partial<Components> = {}
  plugins.forEach((plugin) => {
- if (plugin.config?.enabled && plugin.getMarkdownPlugins) {
- const mPlugins = plugin.getMarkdownPlugins()
- result.push(...mPlugins)
+ if (plugin.config?.enabled && plugin.getRemarkPlugins) {
+ const rPlugins = plugin.getRemarkPlugins()
+ remarkPlugins.push(...rPlugins)
+ }
+ if (plugin.config?.enabled && plugin.getMarkdownComponents) {
+ const rComponents = plugin.getMarkdownComponents()
+ components = {...components, ...rComponents}
  }
  })
- return result
+ return {remarkPlugins, components}
  }, [plugins])
 
- markDownPlugins.forEach((plugin) => {
- console.log('use', plugin)
- // @ts-ignore
- md.use(plugin())
- })
+ let str = content
 
- const parsed = md.parse(content, {})
+ if (!showAll && context?.textRange) {
+ const [ start, end ] = context.textRange.split('-')
+ str = content.substring(start, end)
+ }
 
- return (<>
- {parsed.map((token, index) => {
+ return (
+ <>
+ <Markdown 
+ remarkPlugins={remarkPlugins}
+ rehypePlugins={[[remarkCredentialPlugin, credential]]}
+ components={components}
+ >{str}</Markdown>
+ {!showAll && context?.textRange && <Button type='text' size='small' onClick={() => setShowAll(true)}>Show more</Button>}
+ {showAll && context?.textRange && <Button type='text' size='small' onClick={() => setShowAll(false)}>Show less</Button>}
+ </>
+ )
+}
 
- let Result: React.JSX.Element | undefined = undefined
- plugins.forEach((plugin) => {
- if (!Result && plugin.config?.enabled && plugin.getMarkdownComponent) {
- const Component = plugin.getMarkdownComponent(token)
- if (Component) {
- Result = Component
- }
+function remarkCredentialPlugin(credential: UniqueVerifiableCredential) {
+ return (tree: any) => {
+ if (Array.isArray(tree.children)) {
+ tree.children.forEach((node: any) => {
+ if (node.type === 'element' && node.tagName === 'p') {
+ node.credential = credential
  }
- })
-
- if (Result) {
- return React.cloneElement(Result, { key: index })
- }
-
- return <div key={index} dangerouslySetInnerHTML={{ __html: md.renderer.render([token], {}, {}) }} />
- })}</>);
-}
+ });
+ }
+ };
+};
 
-export const CredentialLoader: React.FC<{ hash: string, did?: string}> = ({ hash, did }) => {
+export const CredentialLoader = ({ hash, did, context } : { hash: string, did?: string, context?: any }) => {
 
  const [credential, setCredential] = useState<UniqueVerifiableCredential>()
  const { agent } = useVeramo<IDataStore>()
@@ -89,16 +86,16 @@ export const CredentialLoader: React.FC<{ hash: string, did?: string}> = ({ hash
  } else {
  // TRY IPFS or DIDComm
  const senders = await agent?.didManagerFind({ provider: "did:peer"})
- if (senders && senders.length > 0) {
- const requestCredMessage = {
- type: 'https://veramo.io/didcomm/brainshare/1.0/request-credential',
- from: senders[0].did,
- to: did,
- id: v4(),
- body: {
- hash
- },
- return_route: 'all'
+  if (senders && senders.length > 0) {
+  const requestCredMessage = {
+  type: 'https://veramo.io/didcomm/brainshare/1.0/request-credential',
+  from: senders[0].did,
+  to: did,
+  id: v4(),
+  body: {
+  hash
+  },
+  return_route: 'all'
  }
  const packedMessage = await agent?.packDIDCommMessage({ message: requestCredMessage, packing: 'authcrypt' })
  await agent?.sendDIDCommMessage({ packedMessage: packedMessage!, messageId: requestCredMessage.id, recipientDidUrl: did! })
@@ -111,6 +108,6 @@ export const CredentialLoader: React.FC<{ hash: string, did?: string}> = ({ hash
  load()
  }, [agent, hash])
 
- return credential ? <VerifiableCredentialComponent credential={credential} /> : <Spin />
+ return credential ? <VerifiableCredentialComponent credential={credential} context={context} /> : <Spin />
 }
 

packages/plugin/src/components/VerifiableCredentialComponent.tsx

@@ -14,9 +14,10 @@ import { EllipsisOutlined } from "@ant-design/icons";
 import { IdentifierPopover } from "./IdentifierPopover.js";
 
 export const VerifiableCredentialComponent = (
- { credential, verify = true } : { 
+ { credential, verify = true, context } : { 
  credential: UniqueVerifiableCredential,
  verify?: boolean
+ context?: any
 }
 ) => {
  const { agent } = useVeramo<ICredentialVerifier & IDataStore>()
@@ -132,7 +133,7 @@ export const VerifiableCredentialComponent = (
  </Row>
  </div>}
 
- {credential && <Component credential={credential} />}
+ {credential && <Component credential={credential} context={context}/>}
  </div>
  )
 

packages/plugin/src/types.ts

@@ -2,8 +2,8 @@ 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';
-import { PluginSimple } from 'markdown-it';
+import { Components } from 'react-markdown'
+import { PluggableList } from 'unified'
 export type IAgentExplorerPluginConfig = {
  url: string;
  enabled: boolean;
@@ -17,6 +17,7 @@ export type IRouteComponent = {
 
 export type IVerifiableComponentProps = {
  credential: UniqueVerifiableCredential
+ context?: any
 }
 
 export type IIdentifierHoverComponentProps = {
@@ -43,8 +44,8 @@ export type IAgentExplorerPlugin = {
  getCredentialComponent?: (credential: UniqueVerifiableCredential) => React.FC<IVerifiableComponentProps> | undefined;
  getIdentifierHoverComponent?: () => React.FC<IIdentifierHoverComponentProps>;
  agentPlugins?: IAgentPlugin[];
- getMarkdownComponent?: (token: Token) => React.JSX.Element | undefined;
- getMarkdownPlugins?: () => PluginSimple[];
+ getMarkdownComponents?: () => Partial<Components> | undefined;
+ getRemarkPlugins?: () => PluggableList;
 }
 
 export interface IPlugin {