Yarn 3 upgrade

packages/app/src/Element/ProxyImg.tsx

@@ -1,5 +1,5 @@
 import useImgProxy from "Hooks/useImgProxy";
-import { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { getUrlHostname } from "SnortUtils";
 

packages/app/src/Element/Text.tsx

@@ -19,59 +19,37 @@ export interface TextProps {
 }
 
 export default function Text({ content, tags, creator, disableMedia, depth, disableMediaSpotlight }: TextProps) {
-  function renderChunk(f: Array<ParsedFragment>) {
-    if (f.every(a => a.type === "media") && f.length === 1) {
+  function renderChunk(a: ParsedFragment) {
+    if (a.type === "media" && !a.mimeType?.startsWith("unknown")) {
       if (disableMedia ?? false) {
         return (
-          <a href={f[0].content} onClick={e => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">
-            {f[0].content}
+          <a href={a.content} onClick={e => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">
+            {a.content}
           </a>
         );
       }
-      return <RevealMedia link={f[0].content} creator={creator} disableSpotlight={disableMediaSpotlight} />;
+      return <RevealMedia link={a.content} creator={creator} disableSpotlight={disableMediaSpotlight} />;
     } else {
-      return (
-        <div className="text-frag">
-          {f.map(a => {
-            switch (a.type) {
-              case "invoice":
-                return <Invoice invoice={a.content} />;
-              case "hashtag":
-                return <Hashtag tag={a.content} />;
-              case "cashu":
-                return <CashuNuts token={a.content} />;
-              case "media":
-              case "link":
-                return <HyperText link={a.content} depth={depth} />;
-              case "custom_emoji":
-                return <ProxyImg src={a.content} size={15} className="custom-emoji" />;
-              default:
-                return <>{a.content}</>;
-            }
-          })}
-        </div>
-      );
+      switch (a.type) {
+        case "invoice":
+          return <Invoice invoice={a.content} />;
+        case "hashtag":
+          return <Hashtag tag={a.content} />;
+        case "cashu":
+          return <CashuNuts token={a.content} />;
+        case "media":
+        case "link":
+          return <HyperText link={a.content} depth={depth} />;
+        case "custom_emoji":
+          return <ProxyImg src={a.content} size={15} className="custom-emoji" />;
+        default:
+          return <div className="text-frag">{a.content}</div>;
+      }
     }
   }
+
   const elements = useMemo(() => {
-    const frags = transformText(content, tags);
-    const chunked = frags.reduce((acc, v) => {
-      if (v.type === "media" && !(v.mimeType?.startsWith("unknown") ?? true)) {
-        if (acc.length === 0) {
-          acc.push([], [v]);
-        } else {
-          acc.push([v]);
-        }
-      } else {
-        if (acc.length === 0) {
-          acc.push([v]);
-        } else {
-          acc[0].push(v);
-        }
-      }
-      return acc;
-    }, [] as Array<Array<ParsedFragment>>);
-    return chunked.reverse();
+    return transformText(content, tags);
   }, [content]);
 
   return (

packages/app/src/Element/Textarea.tsx

@@ -10,6 +10,7 @@ import Avatar from "Element/Avatar";
 import Nip05 from "Element/Nip05";
 import { hexToBech32 } from "SnortUtils";
 import { UserCache } from "Cache";
+import searchEmoji from "emoji-search";
 
 import messages from "./messages";
 
@@ -60,11 +61,7 @@ const Textarea = (props: TextareaProps) => {
   };
 
   const emojiDataProvider = async (token: string) => {
-    const emoji = await import("@jukben/emoji-search");
-    return emoji
-      .default(token)
-      .slice(0, 5)
-      .map(({ name, char }) => ({ name, char }));
+    return (await searchEmoji(token)).slice(0, 5).map(({ name, char }) => ({ name, char }));
   };
 
   return (