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 (

packages/app/src/Pages/SettingsPage.tsx

@@ -1,6 +1,6 @@
 import { FormattedMessage } from "react-intl";
 import { Outlet, RouteObject, useNavigate } from "react-router-dom";
-import SettingsIndex from "Pages/settings/Index";
+import SettingsIndex from "Pages/settings/Root";
 import Profile from "Pages/settings/Profile";
 import Relay from "Pages/settings/Relays";
 import Preferences from "Pages/settings/Preferences";

packages/app/src/Pages/settings/Preferences.tsx

@@ -6,6 +6,7 @@ import useLogin from "Hooks/useLogin";
 import { DefaultPreferences, updatePreferences, UserPreferences } from "Login";
 import { DefaultImgProxy } from "Const";
 import { unwrap } from "SnortUtils";
+import searchEmoji from "emoji-search";
 
 import messages from "./messages";
 
@@ -36,8 +37,7 @@ const PreferencesPage = () => {
 
   useEffect(() => {
     (async () => {
-      const emoji = await import("@jukben/emoji-search");
-      setEmoji(emoji.default("").map(a => ({ name: a.name, char: a.char })));
+      setEmoji((await searchEmoji("")).map(a => ({ name: a.name, char: a.char })));
     })();
   }, []);
 

packages/app/src/Pages/settings/Root.tsx

@@ -1,4 +1,4 @@
-import "./Index.css";
+import "./Root.css";
 import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
 import Icon from "Icons/Icon";

packages/app/src/emoji-search.ts

@@ -0,0 +1,12 @@
+import { matchSorter } from "match-sorter";
+
+export default async function searchEmoji(key: string) {
+  const { lib } = await import("emojilib");
+  /* build proper library with included name of the emoji */
+  const library = Object.entries(lib).map(([name, emojiObject]) => ({
+    ...emojiObject,
+    keywords: [name, ...emojiObject.keywords],
+    name,
+  }));
+  return matchSorter(library, key, { keys: ["keywords"] });
+}