feat(markdown): migrate to methanium/ui's markdown

packages/chat/package.json

@@ -24,7 +24,6 @@
     "@tensamin/cache": "workspace:*",
     "@tensamin/crypto": "workspace:*",
     "@tensamin/hotkeys": "workspace:*",
-    "@tensamin/markdown": "workspace:*",
     "@tensamin/mtp": "workspace:*",
     "@tensamin/shared": "workspace:*",
     "@tensamin/storage": "workspace:*",

packages/chat/src/components/emojiPicker.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@methanium/ui";
-import Emoji from "@tensamin/markdown/emoji";
+import { Emoji } from "@methanium/ui/markdown";
 import { getRecentEmojis, useEmojiRanks } from "./emojiRanks";
 
 export default function EmojiPicker({

packages/chat/src/components/emojiRanks.ts

@@ -1,6 +1,6 @@
 import { useStorage } from "@tensamin/storage/context";
 import { useCallback, useEffect, useState } from "react";
-import { normalizeShortcode } from "@tensamin/markdown/emoji";
+import { normalizeShortcode } from "@methanium/ui/markdown";
 
 const RANKS_CHANGED_EVENT = "tensamin-reaction-ranks-changed";
 let recordQueue = Promise.resolve();

packages/chat/src/components/input.tsx

@@ -1,4 +1,4 @@
-import Input, { type InputController } from "@tensamin/markdown/input";
+import { Input, type InputController } from "@methanium/ui/markdown";
 import {
   Card,
   CardHeader,
@@ -276,7 +276,7 @@ export default function InputComponent({
         <CardHeader className="relative p-0 flex flex-col">
           <div className="w-full flex items-center">
             <Input
-              className="w-full"
+              className="w-full p-2"
               onControllerChange={setComposer}
               paddingY="13px"
               paddingX="13px"

packages/chat/src/components/media.tsx

@@ -1,4 +1,4 @@
-import Text from "@tensamin/markdown/text";
+import { Text } from "@methanium/ui/markdown";
 import { useStorage } from "@tensamin/storage/context";
 import {
   Avatar,
@@ -22,9 +22,9 @@ import {
   X,
   ZoomIn,
 } from "lucide-react";
-import { useState, useMemo, useEffect, useRef, WheelEvent } from "react";
+import { useState, useMemo, useEffect, useRef, type WheelEvent } from "react";
 import MediaSaveButton from "./mediaSaveButton";
-import { User, useUser } from "@tensamin/user/context";
+import { type User, useUser } from "@tensamin/user/context";
 
 const zoomLevels = [1, 1.5, 2, 3];
 

packages/chat/src/components/message.tsx

@@ -1,5 +1,4 @@
 import type { RawMessage } from "../values";
-import Text from "@tensamin/markdown/text";
 import { AlertTriangle, Check, CheckLine, RefreshCw } from "lucide-react";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import type { User } from "@tensamin/user/context";
@@ -9,6 +8,7 @@ import {
   AvatarFallback,
   AvatarImage,
   Button,
+  Card,
   cn,
   Skeleton,
 } from "@methanium/ui";
@@ -16,11 +16,10 @@ import MessageContextMenu from "./messageContextMenu";
 import Media from "./media";
 import { useStorage } from "@tensamin/storage/context";
 import { useMTP } from "@tensamin/mtp";
-import Input from "@tensamin/markdown/input";
 import { getMessage, useChat } from "../context";
 import { decryptChatText, encryptChatText } from "@tensamin/crypto/chatSecret";
 import { log, toast } from "@tensamin/shared/log";
-import Emoji, { normalizeShortcode } from "@tensamin/markdown/emoji";
+import { Emoji, Input, normalizeShortcode, Text } from "@methanium/ui/markdown";
 import { useRecordEmojiUse } from "./emojiRanks";
 import { useUser } from "@tensamin/user/context";
 import ReplyBox from "./replyBox";
@@ -347,7 +346,7 @@ function MessageComponent({
                   </Avatar>
                 )}
                 <div
-                  className={cn("flex flex-col group", {
+                  className={cn("flex flex-col group w-full", {
                     "min-w-0 flex-1": editing,
                   })}
                 >
@@ -388,20 +387,21 @@ function MessageComponent({
                   )}
                   {editing ? (
                     <div className="flex w-full flex-col gap-1">
-                      <Input
-                        autoFocus
-                        className="w-full"
-                        styled
-                        setValue={setEditDraft}
-                        value={editDraft}
-                        onSubmit={() => {
-                          if (!editDraft.trim()) return;
-                          if (editDraft !== message.Content) {
-                            void submitEditMessage(editDraft);
-                          }
-                          onSetEditing(false);
-                        }}
-                      />
+                      <Card className="p-2!">
+                        <Input
+                          autoFocus
+                          className="w-full"
+                          setValue={setEditDraft}
+                          value={editDraft}
+                          onSubmit={() => {
+                            if (!editDraft.trim()) return;
+                            if (editDraft !== message.Content) {
+                              void submitEditMessage(editDraft);
+                            }
+                            onSetEditing(false);
+                          }}
+                        />
+                      </Card>
                       <div className="flex gap-1">
                         <Button
                           size="xs"
@@ -429,7 +429,7 @@ function MessageComponent({
                       </div>
                     </div>
                   ) : (
-                    <div className="flex gap-1">
+                    <div className="flex gap-1 w-full!">
                       {isValidURL ? (
                         <Media
                           link={message.Content}
@@ -440,12 +440,12 @@ function MessageComponent({
                           })}
                         />
                       ) : (
-                        <Text value={message.Content} />
-                      )}
-                      {message.Edited && (
-                        <p className="text-xs text-muted-foreground self-center">
-                          (edited)
-                        </p>
+                        <div className="min-w-0 flex-1">
+                          <Text
+                            showEditedIndicator={message.Edited}
+                            value={message.Content}
+                          />
+                        </div>
                       )}
                     </div>
                   )}

packages/chat/src/components/messageContextMenu.tsx

@@ -44,7 +44,7 @@ import type {
   Ref,
 } from "react";
 import { useChat } from "../context";
-import Emoji from "@tensamin/markdown/emoji";
+import { Emoji } from "@methanium/ui/markdown";
 import EmojiPicker from "./emojiPicker";
 import { getRecentEmojis, useEmojiRanks } from "./emojiRanks";
 

packages/chat/src/components/replyBox.tsx

@@ -6,7 +6,7 @@ import {
   cn,
   Skeleton,
 } from "@methanium/ui";
-import Text from "@tensamin/markdown/text";
+import { Text } from "@methanium/ui/markdown";
 import type { User } from "@tensamin/user/context";
 import Wrapper from "@tensamin/user/wrapper";
 import { Forward, X } from "lucide-react";
@@ -77,12 +77,11 @@ export default function ReplyBox({
             ) : null}
             {content !== undefined && (
               <div className="h-5.5 min-w-0 flex-1 truncate flex gap-1">
-                <Text fontSize="0.88rem" value={content} />
-                {edited && (
-                  <p className="text-xs text-muted-foreground self-center">
-                    (edited)
-                  </p>
-                )}
+                <Text
+                  fontSize="0.88rem"
+                  showEditedIndicator={edited}
+                  value={content}
+                />
               </div>
             )}
           </>