feat: embed tweets

src/Const.js

@@ -63,6 +63,11 @@ export const InvoiceRegex = /(lnbc\w+)/i;
  */
 export const YoutubeUrlRegex = /(?:https?:\/\/)?(?:www|m\.)?(?:youtu\.be\/|youtube\.com\/(?:shorts\/|embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})/;
 
+/**
+ * Tweet Regex
+ */
+export const TweetUrlRegex = /https?:\/\/twitter\.com\/(?:#!\/)?(\w+)\/status(?:es)?\/(\d+)/
+
 /**
  * Hashtag regex
  */

src/Text.js

@@ -1,7 +1,8 @@
 import { Link } from "react-router-dom";
+import { TwitterTweetEmbed } from "react-twitter-embed";
 
 import Invoice from "./element/Invoice";
-import { UrlRegex, FileExtensionRegex, MentionRegex, InvoiceRegex, YoutubeUrlRegex, HashtagRegex } from "./Const";
+import { UrlRegex, FileExtensionRegex, MentionRegex, InvoiceRegex, YoutubeUrlRegex, TweetUrlRegex, HashtagRegex } from "./Const";
 import { eventLink, hexToBech32, profileLink } from "./Util";
 import LazyImage from "./element/LazyImage";
 import Hashtag from "./element/Hashtag";
@@ -10,6 +11,7 @@ function transformHttpLink(a) {
     try {
         const url = new URL(a);
         const youtubeId = YoutubeUrlRegex.test(a) && RegExp.$1;
+        const tweetId = TweetUrlRegex.test(a) && RegExp.$2;
         const extension = FileExtensionRegex.test(url.pathname.toLowerCase()) && RegExp.$1;
         if (extension) {
             switch (extension) {
@@ -31,6 +33,12 @@ function transformHttpLink(a) {
                 default:
                     return <a key={url} href={url} onClick={(e) => e.stopPropagation()}>{url.toString()}</a>
             }
+        } else if (tweetId) {
+          return (
+            <div className="tweet">
+              <TwitterTweetEmbed tweetId={tweetId} />
+            </div>
+          )
         } else if (youtubeId) {
             return (
                 <>

src/index.css

@@ -299,3 +299,21 @@ body.scroll-lock {
 .root-tab.active {
     border-bottom: 3px solid var(--highlight);
 }
+
+.tweet {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.tweet div {
+    width: 100%;
+}
+
+.tweet div .twitter-tweet {
+    margin: 0 auto;
+}
+
+.tweet div .twitter-tweet > iframe {
+    max-height: unset;
+}