forked from Kieran/snort
fix: dont fail to render with invalid URLs
This commit is contained in:
parent
06702a5174
commit
731aa68b44
121
src/Text.js
121
src/Text.js
@ -1,5 +1,3 @@
|
|||||||
import { useMemo } from "react";
|
|
||||||
|
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import ReactMarkdown from "react-markdown";
|
import ReactMarkdown from "react-markdown";
|
||||||
import { TwitterTweetEmbed } from "react-twitter-embed";
|
import { TwitterTweetEmbed } from "react-twitter-embed";
|
||||||
@ -11,54 +9,59 @@ import LazyImage from "./element/LazyImage";
|
|||||||
import Hashtag from "./element/Hashtag";
|
import Hashtag from "./element/Hashtag";
|
||||||
|
|
||||||
function transformHttpLink(a) {
|
function transformHttpLink(a) {
|
||||||
const url = new URL(a);
|
try {
|
||||||
const youtubeId = YoutubeUrlRegex.test(a) && RegExp.$1;
|
const url = new URL(a);
|
||||||
const tweetId = TweetUrlRegex.test(a) && RegExp.$2;
|
const youtubeId = YoutubeUrlRegex.test(a) && RegExp.$1;
|
||||||
const extension = FileExtensionRegex.test(url.pathname.toLowerCase()) && RegExp.$1;
|
const tweetId = TweetUrlRegex.test(a) && RegExp.$2;
|
||||||
if (extension) {
|
const extension = FileExtensionRegex.test(url.pathname.toLowerCase()) && RegExp.$1;
|
||||||
switch (extension) {
|
if (extension) {
|
||||||
case "gif":
|
switch (extension) {
|
||||||
case "jpg":
|
case "gif":
|
||||||
case "jpeg":
|
case "jpg":
|
||||||
case "png":
|
case "jpeg":
|
||||||
case "bmp":
|
case "png":
|
||||||
case "webp": {
|
case "bmp":
|
||||||
return <LazyImage key={url} src={url} />;
|
case "webp": {
|
||||||
|
return <LazyImage key={url} src={url} />;
|
||||||
|
}
|
||||||
|
case "mp4":
|
||||||
|
case "mov":
|
||||||
|
case "mkv":
|
||||||
|
case "avi":
|
||||||
|
case "m4v": {
|
||||||
|
return <video key={url} src={url} controls />
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
return <a key={url} href={url} onClick={(e) => e.stopPropagation()}>{url.toString()}</a>
|
||||||
}
|
}
|
||||||
case "mp4":
|
} else if (tweetId) {
|
||||||
case "mov":
|
return (
|
||||||
case "mkv":
|
<div className="tweet" key={tweetId}>
|
||||||
case "avi":
|
<TwitterTweetEmbed tweetId={tweetId} />
|
||||||
case "m4v": {
|
</div>
|
||||||
return <video key={url} src={url} controls />
|
)
|
||||||
}
|
} else if (youtubeId) {
|
||||||
default:
|
return (
|
||||||
return <a key={url} href={url} onClick={(e) => e.stopPropagation()}>{url.toString()}</a>
|
<>
|
||||||
|
<br />
|
||||||
|
<iframe
|
||||||
|
className="w-max"
|
||||||
|
src={`https://www.youtube.com/embed/${youtubeId}`}
|
||||||
|
title="YouTube video player"
|
||||||
|
key={youtubeId}
|
||||||
|
frameBorder="0"
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||||
|
allowFullScreen=""
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
return <a href={a} onClick={(e) => e.stopPropagation()}>{a}</a>
|
||||||
}
|
}
|
||||||
} else if (tweetId) {
|
} catch (error) {
|
||||||
return (
|
|
||||||
<div className="tweet">
|
|
||||||
<TwitterTweetEmbed tweetId={tweetId} />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
} else if (youtubeId) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<br />
|
|
||||||
<iframe
|
|
||||||
className="w-max"
|
|
||||||
src={`https://www.youtube.com/embed/${youtubeId}`}
|
|
||||||
title="YouTube video player"
|
|
||||||
frameBorder="0"
|
|
||||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
||||||
allowFullScreen=""
|
|
||||||
/>
|
|
||||||
<br />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
return <a href={a} onClick={(e) => e.stopPropagation()}>{a}</a>
|
|
||||||
}
|
}
|
||||||
|
return <a href={a} onClick={(e) => e.stopPropagation()}>{a}</a>
|
||||||
}
|
}
|
||||||
|
|
||||||
function extractLinks(fragments) {
|
function extractLinks(fragments) {
|
||||||
@ -75,7 +78,7 @@ function extractLinks(fragments) {
|
|||||||
}).flat();
|
}).flat();
|
||||||
}
|
}
|
||||||
|
|
||||||
export function extractMentions(fragments, tags, users) {
|
export function extractMentions(fragments, tags = [], users = {}) {
|
||||||
return fragments.map(f => {
|
return fragments.map(f => {
|
||||||
if (typeof f === "string") {
|
if (typeof f === "string") {
|
||||||
return f.split(MentionRegex).map((match) => {
|
return f.split(MentionRegex).map((match) => {
|
||||||
@ -135,36 +138,32 @@ function extractHashtags(fragments) {
|
|||||||
}).flat();
|
}).flat();
|
||||||
}
|
}
|
||||||
|
|
||||||
function transformLi({ body, transforms }) {
|
function transformLi({ body, tags, users }) {
|
||||||
let fragments = transformText({ body, transforms })
|
let fragments = transformText({ body, tags, users })
|
||||||
return <li>{fragments}</li>
|
return <li>{fragments}</li>
|
||||||
}
|
}
|
||||||
|
|
||||||
function transformParagraph({ body, transforms }) {
|
function transformParagraph({ body, tags, users }) {
|
||||||
const fragments = transformText({ body, transforms })
|
const fragments = transformText({ body, tags, users })
|
||||||
if (fragments.every(f => typeof f === 'string')) {
|
if (fragments.every(f => typeof f === 'string')) {
|
||||||
return <p>{fragments}</p>
|
return <p>{fragments}</p>
|
||||||
}
|
}
|
||||||
return <>{fragments}</>
|
return <>{fragments}</>
|
||||||
}
|
}
|
||||||
|
|
||||||
function transformText({ body, transforms }) {
|
function transformText({ body, tags, users }) {
|
||||||
let fragments = [body];
|
let fragments = extractMentions(body);
|
||||||
transforms?.forEach(a => {
|
|
||||||
fragments = a(fragments);
|
|
||||||
});
|
|
||||||
fragments = extractLinks(fragments);
|
fragments = extractLinks(fragments);
|
||||||
fragments = extractInvoices(fragments);
|
fragments = extractInvoices(fragments);
|
||||||
fragments = extractHashtags(fragments);
|
fragments = extractHashtags(fragments);
|
||||||
|
|
||||||
return fragments;
|
return fragments;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Text({ content, transforms }) {
|
export default function Text({ content, tags, users }) {
|
||||||
const components = {
|
const components = {
|
||||||
p: (props) => transformParagraph({ body: props.children, transforms }),
|
p: (props) => transformParagraph({ body: props.children, tags, users }),
|
||||||
a: (props) => transformHttpLink(props.href),
|
a: (props) => transformHttpLink(props.href),
|
||||||
li: (props) => transformLi({ body: props.children, transforms }),
|
li: (props) => transformLi({ body: props.children, tags, users }),
|
||||||
}
|
}
|
||||||
return <ReactMarkdown components={components}>{content}</ReactMarkdown>
|
return <ReactMarkdown components={components}>{content}</ReactMarkdown>
|
||||||
}
|
}
|
||||||
|
11
src/Util.js
11
src/Util.js
@ -62,8 +62,13 @@ export function hexToBech32(hrp, hex) {
|
|||||||
return "";
|
return "";
|
||||||
}
|
}
|
||||||
|
|
||||||
let buf = secp.utils.hexToBytes(hex);
|
try {
|
||||||
return bech32.encode(hrp, bech32.toWords(buf));
|
let buf = secp.utils.hexToBytes(hex);
|
||||||
|
return bech32.encode(hrp, bech32.toWords(buf));
|
||||||
|
} catch (e) {
|
||||||
|
console.warn("Invalid hex", hex, e);
|
||||||
|
return "";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -122,4 +127,4 @@ export function extractLnAddress(lnurl) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
return lnurl;
|
return lnurl;
|
||||||
}
|
}
|
||||||
|
@ -5,7 +5,7 @@ import { useNavigate } from "react-router-dom";
|
|||||||
|
|
||||||
import Event from "../nostr/Event";
|
import Event from "../nostr/Event";
|
||||||
import ProfileImage from "./ProfileImage";
|
import ProfileImage from "./ProfileImage";
|
||||||
import Text, { extractMentions } from "../Text";
|
import Text from "../Text";
|
||||||
import { eventLink, hexToBech32 } from "../Util";
|
import { eventLink, hexToBech32 } from "../Util";
|
||||||
import NoteFooter from "./NoteFooter";
|
import NoteFooter from "./NoteFooter";
|
||||||
import NoteTime from "./NoteTime";
|
import NoteTime from "./NoteTime";
|
||||||
@ -31,10 +31,7 @@ export default function Note(props) {
|
|||||||
if (deletion?.length > 0) {
|
if (deletion?.length > 0) {
|
||||||
return (<b className="error">Deleted</b>);
|
return (<b className="error">Deleted</b>);
|
||||||
}
|
}
|
||||||
const mentions = (fragments) => {
|
return <Text content={body} tags={ev.Tags} users={users} />;
|
||||||
return extractMentions(fragments, ev.Tags, users);
|
|
||||||
}
|
|
||||||
return <Text content={body} transforms={[mentions]} />;
|
|
||||||
}, [data, dataEvent, reactions, deletion]);
|
}, [data, dataEvent, reactions, deletion]);
|
||||||
|
|
||||||
function goToEvent(e, id) {
|
function goToEvent(e, id) {
|
||||||
|
@ -11,7 +11,7 @@ import useProfile from "../feed/ProfileFeed";
|
|||||||
import FollowButton from "../element/FollowButton";
|
import FollowButton from "../element/FollowButton";
|
||||||
import { extractLnAddress, parseId, hexToBech32 } from "../Util";
|
import { extractLnAddress, parseId, hexToBech32 } from "../Util";
|
||||||
import Timeline from "../element/Timeline";
|
import Timeline from "../element/Timeline";
|
||||||
import Text, { mentions } from '../Text'
|
import Text from '../Text'
|
||||||
import LNURLTip from "../element/LNURLTip";
|
import LNURLTip from "../element/LNURLTip";
|
||||||
import Nip05, { useIsVerified } from "../element/Nip05";
|
import Nip05, { useIsVerified } from "../element/Nip05";
|
||||||
import Copy from "../element/Copy";
|
import Copy from "../element/Copy";
|
||||||
|
Loading…
Reference in New Issue
Block a user