From afc4457de84637b07aa2ddb474b3ac062c395879 Mon Sep 17 00:00:00 2001 From: Simonas Karuzas Date: Thu, 28 Sep 2023 10:59:39 +0300 Subject: [PATCH] feat(plugin): plugins provide markdown components --- packages/plugin/package.json | 5 + packages/plugin/src/components/MarkDown.tsx | 75 +++++++++ packages/plugin/src/index.ts | 3 +- packages/plugin/src/types.ts | 3 +- pnpm-lock.yaml | 159 +++++++++++++++++++- 5 files changed, 239 insertions(+), 6 deletions(-) create mode 100644 packages/plugin/src/components/MarkDown.tsx diff --git a/packages/plugin/package.json b/packages/plugin/package.json index 6cb633ec..1541add7 100644 --- a/packages/plugin/package.json +++ b/packages/plugin/package.json @@ -34,8 +34,12 @@ "@veramo/core": "5.5.2-next.4", "@veramo/core-types": "5.5.2-next.4", "@veramo/data-store": "5.5.2-next.4", + "@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" } diff --git a/packages/plugin/src/components/MarkDown.tsx b/packages/plugin/src/components/MarkDown.tsx new file mode 100644 index 00000000..6ef03687 --- /dev/null +++ b/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
+ })}); +} + +export const CredentialLoader: React.FC<{ hash: string, did?: string}> = ({ hash, did }) => { + + const [credential, setCredential] = useState() + const { agent } = useVeramo() + + 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 ? : +} + diff --git a/packages/plugin/src/index.ts b/packages/plugin/src/index.ts index 836428f1..b569b0a1 100644 --- a/packages/plugin/src/index.ts +++ b/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' \ No newline at end of file +export * from './agent-plugins/IdentifierProfilePlugin.js' +export * from './components/MarkDown.js' \ No newline at end of file diff --git a/packages/plugin/src/types.ts b/packages/plugin/src/types.ts index e440b6e4..16720ae5 100644 --- a/packages/plugin/src/types.ts +++ b/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; agentPlugins?: IAgentPlugin[]; + getMarkdownComponent?: (token: Token) => React.FC; } export interface IPlugin { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 79abae18..de848a9f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -317,13 +317,25 @@ importers: version: 5.5.2-next.4 '@veramo/data-store': specifier: 5.5.2-next.4 - version: 5.5.2-next.4(ts-node@10.9.1) + version: 5.5.2-next.4 + '@veramo/utils': + specifier: 5.5.2-next.9 + version: 5.5.2-next.9 antd: specifier: ~5.8.4 version: 5.8.6(date-fns@2.30.0)(react-dom@18.2.0)(react@18.2.0) date-fns: specifier: ^2.30.0 version: 2.30.0 + did-jwt-vc: + specifier: ^3.2.10 + version: 3.2.10 + highlight.js: + specifier: ^11.8.0 + version: 11.8.0 + markdown-it: + specifier: ^13.0.2 + version: 13.0.2 md5: specifier: ^2.3.0 version: 2.3.0 @@ -346,6 +358,9 @@ importers: specifier: ^1.5.10 version: 1.5.10 devDependencies: + '@types/markdown-it': + specifier: ^13.0.2 + version: 13.0.2 '@types/react': specifier: ^18.2.23 version: 18.2.23 @@ -6179,9 +6194,24 @@ packages: '@types/node': 18.18.0 dev: true + /@types/linkify-it@3.0.3: + resolution: {integrity: sha512-pTjcqY9E4nOI55Wgpz7eiI8+LzdYnw3qxXCfHyBDdPbYvbyLgWLJGh8EdPvqawwMK1Uo1794AUkkR38Fr0g+2g==} + dev: true + + /@types/markdown-it@13.0.2: + resolution: {integrity: sha512-Tla7hH9oeXHOlJyBFdoqV61xWE9FZf/y2g+gFVwQ2vE1/eBzjUno5JCd3Hdb5oATve5OF6xNjZ/4VIZhVVx+hA==} + dependencies: + '@types/linkify-it': 3.0.3 + '@types/mdurl': 1.0.3 + dev: true + /@types/md5@2.3.2: resolution: {integrity: sha512-v+JFDu96+UYJ3/UWzB0mEglIS//MZXgRaJ4ubUPwOM0gvLc/kcQ3TWNYwENEK7/EcXGQVrW8h/XqednSjBd/Og==} + /@types/mdurl@1.0.3: + resolution: {integrity: sha512-T5k6kTXak79gwmIOaDF2UUQXFbnBE0zBUzF20pz7wDYu0RQMzWg+Ml/Pz50214NsFHBITkoi5VtdjFZnJ2ijjA==} + dev: true + /@types/mime@1.3.2: resolution: {integrity: sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==} dev: true @@ -6733,7 +6763,7 @@ packages: dependencies: credential-status: 2.0.6 debug: 4.3.4 - did-jwt-vc: 3.2.9 + did-jwt-vc: 3.2.10 did-resolver: 4.1.0 transitivePeerDependencies: - supports-color @@ -6751,6 +6781,16 @@ packages: dev: true optional: true + /@veramo/core-types@5.5.2-next.9: + resolution: {integrity: sha512-MFdq4BuCWy6ygbNVv1T9eYgWFcGpj52e+saffoPNOgdpctLB53ZWTTmHvIKayjOxRl0TcISKyELDtkjwGoJ97A==} + dependencies: + credential-status: 2.0.6 + debug: 4.3.4 + did-jwt-vc: 3.2.10 + did-resolver: 4.1.0 + transitivePeerDependencies: + - supports-color + /@veramo/core@5.5.2-next.4: resolution: {integrity: sha512-1upwjQqj0zwiwxcmRHmGqqLXifiX8jfEm68iPWKBW7hIolhVR2t6+DBHZQpLbv8BO3TK/7RxWc8ED+ZZuAB9pQ==} dependencies: @@ -6841,6 +6881,40 @@ packages: - supports-color dev: true + /@veramo/data-store@5.5.2-next.4: + resolution: {integrity: sha512-bSM0Jf1gBotx6rObu7N85ZmSDmxIVKZOw75T5qIgodmgcfQNyJaNfYGAzH97VthNobk9UazK24riiICwvP2reQ==} + dependencies: + '@veramo/core-types': 5.5.2-next.4 + '@veramo/did-discovery': 5.5.2-next.4 + '@veramo/did-manager': 5.5.2-next.4 + '@veramo/key-manager': 5.5.2-next.4 + '@veramo/utils': 5.5.2-next.9 + debug: 4.3.4 + did-jwt-vc: 3.2.10 + typeorm: 0.3.17(ts-node@10.9.1) + uuid: 9.0.1 + transitivePeerDependencies: + - '@google-cloud/spanner' + - '@sap/hana-client' + - better-sqlite3 + - encoding + - hdb-pool + - ioredis + - mongodb + - mssql + - mysql2 + - oracledb + - pg + - pg-native + - pg-query-stream + - redis + - sql.js + - sqlite3 + - supports-color + - ts-node + - typeorm-aurora-data-api-driver + dev: false + /@veramo/data-store@5.5.2-next.4(ts-node@10.9.1): resolution: {integrity: sha512-bSM0Jf1gBotx6rObu7N85ZmSDmxIVKZOw75T5qIgodmgcfQNyJaNfYGAzH97VthNobk9UazK24riiICwvP2reQ==} dependencies: @@ -6873,6 +6947,7 @@ packages: - supports-color - ts-node - typeorm-aurora-data-api-driver + dev: true /@veramo/did-comm@5.5.2-next.4(expo@49.0.11)(react-native@0.72.5): resolution: {integrity: sha512-6+rY2oNtUj5Y9Gn9RaP41/nh0kG4i8Ughxs5z7lxcOP8btHhSq7LL0d/ePTzrIyUF2k8tKrowiLPU5uXHKAKWw==} @@ -6986,7 +7061,7 @@ packages: '@ethersproject/transactions': 5.7.0 '@noble/curves': 1.2.0 '@veramo/core-types': 5.5.2-next.4 - '@veramo/utils': 5.5.2-next.4 + '@veramo/utils': 5.5.2-next.9 debug: 4.3.4 did-jwt: 7.3.0 uint8arrays: 4.0.6 @@ -7088,6 +7163,7 @@ packages: transitivePeerDependencies: - encoding - supports-color + dev: true /@veramo/utils@5.5.2-next.5: resolution: {integrity: sha512-sNif4FMvQUvJ3JMV1pBz76s9G4WDL0ZfQEbdtqhpvFYdgYf4JEbGcn8r3Is6CyTu7MvB6CQ8h95H5PErh8VuQA==} @@ -7113,6 +7189,27 @@ packages: dev: true optional: true + /@veramo/utils@5.5.2-next.9: + resolution: {integrity: sha512-qKORJOmlsna8NGyNqEjQJ55UkQlIxGcdTBvsd+gDfT+avynitBSLwi3IO3Ia/vAnR3lAJ2Q2axNhfbg3qDR2Aw==} + dependencies: + '@ethersproject/signing-key': 5.7.0 + '@ethersproject/transactions': 5.7.0 + '@ipld/dag-pb': 4.0.5 + '@noble/curves': 1.2.0 + '@veramo/core-types': 5.5.2-next.9 + credential-status: 2.0.6 + cross-fetch: 4.0.0 + debug: 4.3.4 + did-jwt: 7.4.1 + did-jwt-vc: 3.2.10 + did-resolver: 4.1.0 + ipfs-unixfs: 11.1.0 + multiformats: 12.1.1 + uint8arrays: 4.0.6 + transitivePeerDependencies: + - encoding + - supports-color + /@walletconnect/browser-utils@1.8.0: resolution: {integrity: sha512-Wcqqx+wjxIo9fv6eBUFHPsW1y/bGWWRboni5dfD8PtOmrihrEpOCmvRJe4rfl7xgJW8Ea9UqKEaq0bIRLHlK4A==} dependencies: @@ -7983,7 +8080,6 @@ packages: /argparse@2.0.1: resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} - dev: true /argv-formatter@1.0.0: resolution: {integrity: sha512-F2+Hkm9xFaRg+GkaNnbwXNDV5O6pnCFEmqyhvfC/Ic5LbgOWjJh3L+mN/s91rxVL3znE7DYVpW0GJFT+4YBgWw==} @@ -10521,12 +10617,20 @@ packages: - supports-color dev: true + /did-jwt-vc@3.2.10: + resolution: {integrity: sha512-fX4WBcsjwQ3OWj98t6p5iR4bqSS8wgCt1rVJXeL/ZRy4ij4Y+SJOUpwBoMF/t2ziQMwd47XLCCHYfvKerALZjQ==} + engines: {node: '>=18'} + dependencies: + did-jwt: 7.4.1 + did-resolver: 4.1.0 + /did-jwt-vc@3.2.9: resolution: {integrity: sha512-BCBW1hUGb76WY+4ylc0KWQ64HlPQIF5zRKKV/BicikQWm9dbqGMWzPbxvzxdtQ8BHkN4TJmKNR/VmscfbpP0cg==} engines: {node: '>=18'} dependencies: did-jwt: 7.3.0 did-resolver: 4.1.0 + dev: true /did-jwt@6.11.6: resolution: {integrity: sha512-OfbWknRxJuUqH6Lk0x+H1FsuelGugLbBDEwsoJnicFOntIG/A4y19fn0a8RLxaQbWQ5gXg0yDq5E2huSBiiXzw==} @@ -10556,6 +10660,18 @@ packages: multiformats: 12.1.1 uint8arrays: 4.0.6 + /did-jwt@7.4.1: + resolution: {integrity: sha512-gYDbY6KKuKxmcmJvI1u4zS7QDQGz4B4Ak/T/biMMOHNYZZDGDMKXdZYhiCsphqrBvd7j0OZTFK7iAvMgSpB2aw==} + dependencies: + '@noble/ciphers': 0.3.0 + '@noble/curves': 1.2.0 + '@noble/hashes': 1.3.2 + '@scure/base': 1.1.3 + canonicalize: 2.0.0 + did-resolver: 4.1.0 + multiformats: 12.1.1 + uint8arrays: 4.0.6 + /did-resolver@4.1.0: resolution: {integrity: sha512-S6fWHvCXkZg2IhS4RcVHxwuyVejPR7c+a4Go0xbQ9ps5kILa8viiYQgrM4gfTyeTjJ0ekgJH9gk/BawTpmkbZA==} @@ -10959,6 +11075,11 @@ packages: resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==} dev: true + /entities@3.0.1: + resolution: {integrity: sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==} + engines: {node: '>=0.12'} + dev: false + /env-ci@9.1.1: resolution: {integrity: sha512-Im2yEWeF4b2RAMAaWvGioXk6m0UNaIjD8hj28j2ij5ldnIFrDQT0+pzDvpbRkcjurhXhf/AsBKv8P2rtmGi9Aw==} engines: {node: ^16.14 || >=18} @@ -13056,6 +13177,11 @@ packages: /highlight.js@10.7.3: resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==} + /highlight.js@11.8.0: + resolution: {integrity: sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==} + engines: {node: '>=12.0.0'} + dev: false + /hmac-drbg@1.0.1: resolution: {integrity: sha512-Tti3gMqLdZfhOQY1Mzf/AanLiqh1WTiJgEj26ZuYQ9fbkLomzGchCws4FyrSd4VkpBfiNhaE1On+lOz894jvXg==} dependencies: @@ -15393,6 +15519,12 @@ packages: engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} dev: true + /linkify-it@4.0.1: + resolution: {integrity: sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==} + dependencies: + uc.micro: 1.0.6 + dev: false + /load-json-file@4.0.0: resolution: {integrity: sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==} engines: {node: '>=4'} @@ -15739,6 +15871,17 @@ packages: engines: {node: '>=8'} dev: true + /markdown-it@13.0.2: + resolution: {integrity: sha512-FtwnEuuK+2yVU7goGn/MJ0WBZMM9ZPgU9spqlFs7/A/pDIUNSOQZhUgOqYCficIuR2QaFnrt8LHqBWsbTAoI5w==} + hasBin: true + dependencies: + argparse: 2.0.1 + entities: 3.0.1 + linkify-it: 4.0.1 + mdurl: 1.0.1 + uc.micro: 1.0.6 + dev: false + /marked-terminal@5.2.0(marked@5.1.2): resolution: {integrity: sha512-Piv6yNwAQXGFjZSaiNljyNFw7jKDdGrw70FSbtxEyldLsyeuV5ZHm/1wW++kWbrOF1VPnUgYOhB2oLL0ZpnekA==} engines: {node: '>=14.13.1 || >=16.0.0'} @@ -15821,6 +15964,10 @@ packages: resolution: {integrity: sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==} dev: true + /mdurl@1.0.1: + resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==} + dev: false + /media-typer@0.3.0: resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==} engines: {node: '>= 0.6'} @@ -22189,6 +22336,10 @@ packages: dev: true optional: true + /uc.micro@1.0.6: + resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==} + dev: false + /uglify-es@3.3.9: resolution: {integrity: sha512-r+MU0rfv4L/0eeW3xZrd16t4NZfK8Ld4SWVglYBb7ez5uXFWHuVRs6xCTrf1yirs9a4j4Y27nn7SRfO6v67XsQ==} engines: {node: '>=0.8.0'}