diff --git a/package-lock.json b/package-lock.json index 1e71f6d..8bd8a8e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "bch-token-sweep": "2.2.1", "bootstrap": "5.2.0", "crypto-browserify": "3.12.1", + "marked": "^15.0.12", "nostr-tools": "2.10.4", "p2wdb": "2.4.1", "process": "0.11.10", @@ -18223,8 +18224,9 @@ } }, "node_modules/marked": { - "version": "12.0.2", - "dev": true, + "version": "15.0.12", + "resolved": "https://registry.npmjs.org/marked/-/marked-15.0.12.tgz", + "integrity": "sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==", "license": "MIT", "bin": { "marked": "bin/marked.js" @@ -26496,6 +26498,19 @@ "js-yaml": "bin/js-yaml.js" } }, + "node_modules/semantic-release/node_modules/marked": { + "version": "12.0.2", + "resolved": "https://registry.npmjs.org/marked/-/marked-12.0.2.tgz", + "integrity": "sha512-qXUm7e/YKFoqFPYPa3Ukg9xlI5cyAtGmyEIzMfW//m6kXwCy2Ps9DYf5ioijFKQ8qyuscrHoY04iJGctu2Kg0Q==", + "dev": true, + "license": "MIT", + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 18" + } + }, "node_modules/semantic-release/node_modules/npm-run-path": { "version": "6.0.0", "dev": true, diff --git a/package.json b/package.json index 359364f..0880e92 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "bch-token-sweep": "2.2.1", "bootstrap": "5.2.0", "crypto-browserify": "3.12.1", + "marked": "15.0.12", "nostr-tools": "2.10.4", "p2wdb": "2.4.1", "process": "0.11.10", diff --git a/src/components/app-body/nostr/global-feed/feed-card.js b/src/components/app-body/nostr/global-feed/feed-card.js index 1cf5c4b..95776af 100644 --- a/src/components/app-body/nostr/global-feed/feed-card.js +++ b/src/components/app-body/nostr/global-feed/feed-card.js @@ -7,6 +7,7 @@ import { Card, Spinner } from 'react-bootstrap' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faUser } from '@fortawesome/free-solid-svg-icons' import * as nip19 from 'nostr-tools/nip19' +import NostrFormat from '../nostr-format' function FeedCard (props) { const { post, appData, profiles } = props @@ -87,7 +88,7 @@ function FeedCard (props) {
- {post.content} +
diff --git a/src/components/app-body/nostr/nostr-format.js b/src/components/app-body/nostr/nostr-format.js new file mode 100644 index 0000000..94c64a3 --- /dev/null +++ b/src/components/app-body/nostr/nostr-format.js @@ -0,0 +1,33 @@ +/** + * Parse nostr content to html , support markdown , links , line breaks + */ +import React from 'react' +import { marked } from 'marked' // https://www.npmjs.com/package/marked/v/0.3.9 + +const NostrFormat = ({ content }) => { + const formatContent = (content) => { + if (!content) return '' + // create marked renderer + const renderer = new marked.Renderer() + // customize link renderer to open in new tab + renderer.link = function ({ href, text }) { + return `${text}` + } + // set marked options + marked.setOptions({ + renderer, + breaks: true + + }) + // parse content to html + const html = marked.parse(content) + + return html + } + + return ( +
+ ) +} + +export default NostrFormat diff --git a/src/components/app-body/nostr/nostr-read/profile-read.js b/src/components/app-body/nostr/nostr-read/profile-read.js index e1aee3e..0ebf080 100644 --- a/src/components/app-body/nostr/nostr-read/profile-read.js +++ b/src/components/app-body/nostr/nostr-read/profile-read.js @@ -7,7 +7,7 @@ import { Container, Button } from 'react-bootstrap' import CopyOnClick from '../../bch-wallet/copy-on-click.js' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faUser } from '@fortawesome/free-solid-svg-icons' - +import NostrFormat from '../nostr-format' import { RelayPool } from 'nostr' function ProfileRead (props) { @@ -74,7 +74,9 @@ function ProfileRead (props) {
-
{post.about}
+
+ +