Kieran/snort
5
14
Fork 14
Code Issues 37 Pull Requests 1 Packages Projects Releases 24 Wiki Activity

feat: render markdown

Browse Source
This commit is contained in:
Alejandro Gomez 2023-01-14 02:39:20 +01:00
parent 29f92b7cb2
commit 33e233d4a3
No known key found for this signature in database
GPG Key ID: 4DF39E566658C817
1 changed files with 46 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
src/element/Text.js
View File

@ -12,57 +12,53 @@ import './Text.css'
import { useMemo } from "react"; import { useMemo } from "react";
function transformHttpLink(a) { function transformHttpLink(a) {
try { const url = new URL(a);
const url = new URL(a); const youtubeId = YoutubeUrlRegex.test(a) && RegExp.$1;
const youtubeId = YoutubeUrlRegex.test(a) && RegExp.$1; const tweetId = TweetUrlRegex.test(a) && RegExp.$2;
const tweetId = TweetUrlRegex.test(a) && RegExp.$2; const extension = FileExtensionRegex.test(url.pathname.toLowerCase()) && RegExp.$1;
const extension = FileExtensionRegex.test(url.pathname.toLowerCase()) && RegExp.$1; if (extension) {
if (extension) { switch (extension) {
switch (extension) { case "gif":
case "gif": case "jpg":
case "jpg": case "jpeg":
case "jpeg": case "png":
case "png": case "bmp":
case "bmp": case "webp": {
case "webp": { return <LazyImage key={url} src={url} />;
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>
} }
} else if (tweetId) { case "mp4":
return ( case "mov":
<div className="tweet" key={tweetId}> case "mkv":
<TwitterTweetEmbed tweetId={tweetId} /> case "avi":
</div> case "m4v": {
) return <video key={url} src={url} controls />
} else if (youtubeId) { }
return ( default:
<> 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>
} }
} catch (error) { } else if (tweetId) {
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> return <a href={a} onClick={(e) => e.stopPropagation()}>{a}</a>
} }
@ -81,7 +77,7 @@ function extractLinks(fragments) {
}).flat(); }).flat();
} }
export function extractMentions(fragments, tags, users) { 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) => {
@ -172,4 +168,3 @@ export default function Text({ content, tags, users }) {
}, [content]); }, [content]);
return <ReactMarkdown className="text" components={components}>{content}</ReactMarkdown> return <ReactMarkdown className="text" components={components}>{content}</ReactMarkdown>
} }