ui(client): add insertHtml for MduiPatchedTextArea

client-protocol/ChatAttachment.ts

@@ -0,0 +1,90 @@
+import { ApiCallbackMessage } from 'lingchair-internal-shared'
+import BaseClientObject from './BaseClientObject.ts'
+import CallbackError from './CallbackError.ts'
+import LingChairClient from './LingChairClient.ts'
+
+export default class ChatAttachment extends BaseClientObject {
+    declare file_hash: string
+    declare file_name: string
+    constructor(client: LingChairClient, {
+        file_hash,
+        file_name
+    }: {
+        file_hash: string,
+        file_name: string
+    }) {
+        super(client)
+        this.file_name = file_name
+        this.file_hash = file_hash
+    }
+    async blob() {
+        try {
+            return await this.blobOrThrow()
+        } catch (_) {
+            return null
+        }
+    }
+    fetch(init?: RequestInit) {
+        const url = this.client.getUrlForFileByHash(this.file_hash)
+        return fetch(url!, init)
+    }
+    async blobOrThrow() {
+        const re = await this.fetch()
+        const blob = await re.blob()
+        if (!re.ok) throw new CallbackError({
+            msg: await blob.text(),
+            code: re.status,
+        } as ApiCallbackMessage)
+        return blob
+    }
+    async getMimeType() {
+        try {
+            return await this.getMimeTypeOrThrow()
+        } catch (_) {
+            return null
+        }
+    }
+    async getMimeTypeOrThrow() {
+        const re = await this.fetch({
+            method: 'HEAD'
+        })
+        if (re.ok) {
+            const t = re.headers.get('content-type')
+            if (t)
+                return t
+            throw new Error("Unable to get Content-Type")
+        }
+        throw new CallbackError({
+            msg: await re.text(),
+            code: re.status,
+        } as ApiCallbackMessage)
+    }
+    async getLength() {
+        try {
+            return await this.getLengthOrThrow()
+        } catch (_) {
+            return null
+        }
+    }
+    async getLengthOrThrow() {
+        const re = await this.fetch({
+            method: 'HEAD'
+        })
+        if (re.ok) {
+            const contentLength = re.headers.get('content-length')
+            if (contentLength)
+                return parseInt(contentLength)
+            throw new Error("Unable to get Content-Length")
+        }
+        throw new CallbackError({
+            msg: await re.text(),
+            code: re.status,
+        } as ApiCallbackMessage)
+    }
+    getFileHash() {
+        return this.file_hash
+    }
+    getFileName() {
+        return this.file_name
+    }
+}

client-protocol/Message.ts

@@ -3,8 +3,7 @@ import MessageBean from "./bean/MessageBean.ts"
 import LingChairClient from "./LingChairClient.ts"
 import Chat from "./Chat.ts"
 import User from "./User.ts"
-import CallbackError from "./CallbackError.ts"
+import ChatAttachment from "./ChatAttachment.ts"
-import ApiCallbackMessage from "./ApiCallbackMessage.ts"
 
 import * as marked from 'marked'
 
@@ -37,93 +36,18 @@ export class ChatMention extends BaseClientObject {
     }
 }
 
-type FileType = 'Video' | 'Image' | 'File'
+type ChatMentionType = 'ChatMention' | 'UserMention'
-type MentionType = 'ChatMention' | 'UserMention'
+type ChatFileType = 'Video' | 'Image' | 'File'
 
-export class ChatAttachment extends BaseClientObject {
+type ChatParserTransformers = {
-    declare file_hash: string
+    attachment?: ({ text, fileType, attachment }: { text: string, fileType: ChatFileType, attachment: ChatAttachment }) => string,
-    declare file_name: string
+    mention?: ({ text, mentionType, mention }: { text: string, mentionType: ChatMentionType, mention: ChatMention }) => string,
-    constructor(client: LingChairClient, {
+}
-        file_hash,
+
-        file_name
+export type {
-    }: {
+    ChatMentionType,
-        file_hash: string,
+    ChatFileType,
-        file_name: string
+    ChatParserTransformers,
-    }) {
-        super(client)
-        this.file_name = file_name
-        this.file_hash = file_hash
-    }
-    async blob() {
-        try {
-            return await this.blobOrThrow()
-        } catch (_) {
-            return null
-        }
-    }
-    fetch(init?: RequestInit) {
-        const url = this.client.getUrlForFileByHash(this.file_hash)
-        return fetch(url!, init)
-    }
-    async blobOrThrow() {
-        const re = await this.fetch()
-        const blob = await re.blob()
-        if (!re.ok) throw new CallbackError({
-            msg: await blob.text(),
-            code: re.status,
-        } as ApiCallbackMessage)
-        return blob
-    }
-    async getMimeType() {
-        try {
-            return await this.getMimeTypeOrThrow()
-        } catch (_) {
-            return null
-        }
-    }
-    async getMimeTypeOrThrow() {
-        const re = await this.fetch({
-            method: 'HEAD'
-        })
-        if (re.ok) {
-            const t = re.headers.get('content-type')
-            if (t)
-                return t
-            throw new Error("Unable to get Content-Type")
-        }
-        throw new CallbackError({
-            msg: await re.text(),
-            code: re.status,
-        } as ApiCallbackMessage)
-    }
-    async getLength() {
-        try {
-            return await this.getLengthOrThrow()
-        } catch (_) {
-            return null
-        }
-    }
-    async getLengthOrThrow() {
-        const re = await this.fetch({
-            method: 'HEAD'
-        })
-        if (re.ok) {
-            const contentLength = re.headers.get('content-length')
-            if (contentLength)
-                return parseInt(contentLength)
-            throw new Error("Unable to get Content-Length")
-        }
-        throw new CallbackError({
-            msg: await re.text(),
-            code: re.status,
-        } as ApiCallbackMessage)
-    }
-    getFileHash() {
-        return this.file_hash
-    }
-    getFileName() {
-        return this.file_name
-    }
 }
 
 export default class Message extends BaseClientObject {
@@ -152,10 +76,7 @@ export default class Message extends BaseClientObject {
     parseWithTransformers({
         attachment,
         mention,
-    }: {
+    }: ChatParserTransformers) {
-        attachment?: ({ text, fileType, attachment }: { text: string, fileType: FileType, attachment: ChatAttachment }) => string,
-        mention?: ({ text, mentionType, mention }: { text: string, mentionType: MentionType, mention: ChatMention }) => string,
-    }) {
         return new marked.Marked({
             async: false,
             extensions: [
@@ -178,8 +99,8 @@ export default class Message extends BaseClientObject {
                 {
                     name: 'image',
                     renderer: ({ text, href }) => {
-                        const mentionType = /^(UserMention|ChatMention)=.*/.exec(text)?.[1] as MentionType
+                        const mentionType = /^(UserMention|ChatMention)=.*/.exec(text)?.[1] as ChatMentionType
-                        const fileType = (/^(Video|File|Image)=.*/.exec(text)?.[1] || 'Image') as FileType
+                        const fileType = (/^(Video|File|Image)=.*/.exec(text)?.[1] || 'Image') as ChatFileType
 
                         if (fileType != null && /tws:\/\/file\?hash=[A-Za-z0-9]+$/.test(href)) {
                             const file_hash = /^tws:\/\/file\?hash=(.*)/.exec(href)?.[1]!

client-protocol/main.ts

@@ -7,10 +7,16 @@ import GroupSettingsBean from "./bean/GroupSettingsBean.ts"
 import JoinRequestBean from "./bean/JoinRequestBean.ts"
 import MessageBean from "./bean/MessageBean.ts"
 import RecentChatBean from "./bean/RecentChatBean.ts"
-import Message, { ChatAttachment, ChatMention } from "./Message.ts"
+import Message, {
+    ChatMention,
+    ChatParserTransformers,
+    ChatMentionType,
+    ChatFileType,
+} from "./Message.ts"
 
 import LingChairClient from "./LingChairClient.ts"
 import CallbackError from "./CallbackError.ts"
+import ChatAttachment from "./ChatAttachment.ts"
 
 export {
     LingChairClient,
@@ -19,6 +25,7 @@ export {
     Chat,
     User,
     UserMySelf,
+
     Message,
     ChatAttachment,
     ChatMention,
@@ -29,4 +36,10 @@ export {
     RecentChatBean,
     JoinRequestBean,
 }
-export type { GroupSettingsBean }
+export type {
+    ChatParserTransformers,
+    ChatMentionType,
+    ChatFileType,
+
+    GroupSettingsBean,
+}

client-protocol/type/ChatParserTransformers.ts

@@ -0,0 +1,5 @@
+import ChatAttachment from '../ChatAttachment.ts'
+import { ChatMention } from '../Message.ts'
+import ChatFileType from './ChatFileType.ts'
+
+

client/env.d.ts

@@ -6,8 +6,9 @@ declare global {
     namespace React {
         namespace JSX {
             interface IntrinsicElements {
-                'input-element': {
+                'mdui-patched-textarea': {
                     'value'?: string
+                    insertHtml: (html: string) => void
                 } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
             }
         }

client/ui/MduiPatchedTextAreaElement.ts

@@ -60,6 +60,9 @@ export default class MduiPatchedTextAreaElement extends HTMLElement {
                 this._lastValue = this.value || ''
                 this.dispatchEvent(new Event('change', { bubbles: true }))
             }
+            // 消除 <br> 对 placeholder 的影响
+            if (this.value == '')
+                this.value = ''
         })
         this.inputDiv.addEventListener('paste', (e: ClipboardEvent) => {
             e.preventDefault()
@@ -101,6 +104,11 @@ export default class MduiPatchedTextAreaElement extends HTMLElement {
     set value(v) {
         this.inputDiv && (this.inputDiv.textContent = v)
     }
+    insertHtml(html: string) {
+        this.inputDiv?.focus()
+
+        document.execCommand('insertHTML', false, html)
+    }
 }
 
 customElements.define('mdui-patched-textarea', MduiPatchedTextAreaElement)

client/ui/chat-fragment/ChatMessage.tsx

@@ -1,4 +1,4 @@
-import { Message } from "lingchair-client-protocol"
+import { ChatParserTransformers, Message } from "lingchair-client-protocol"
 import isMobileUI from "../../utils/isMobileUI"
 import useAsyncEffect from "../../utils/useAsyncEffect"
 import ClientCache from "../../ClientCache"
@@ -94,9 +94,30 @@ const sanitizeConfig = {
     ],
 }
 
+const transformers: ChatParserTransformers = {
+    attachment({ fileType, attachment }) {
+        const url = getClient().getUrlForFileByHash(attachment.getFileHash())
+        return ({
+            Image: `<chat-image src="${url}" alt="${attachment.getFileName()}"></chat-image>`,
+            Video: `<chat-video src="${url}"></chat-video>`,
+            File: `<chat-file href="${url}" name="${attachment.getFileName()}"></chat-file>`,
+        })?.[fileType]
+    },
+    mention({ mentionType, mention }) {
+        switch (mentionType) {
+            case "UserMention":
+                return `<chat-mention user-id="${mention.user_id}" text="${mention.text}">[对话提及]</chat-mention>`
+            case "ChatMention":
+                return `<chat-mention chat-id="${mention.chat_id}" text="${mention.text}">[对话提及]</chat-mention>`
+        }
+    },
+}
+
 export default function ChatMessage({ message, noUserDisplay, avatarMenuItems, messageMenuItems }: { message: Message, noUserDisplay?: boolean, avatarMenuItems?: globalThis.React.JSX.IntrinsicElements['mdui-menu-item'][], messageMenuItems?: globalThis.React.JSX.IntrinsicElements['mdui-menu-item'][] }) {
     const AppState = React.useContext(AppStateContext)
 
+    const [show, setShown] = React.useState(false)
+
     const [isAtRight, setAtRight] = React.useState(false)
 
     const messageDropDownRef = React.useRef<Dropdown>()
@@ -111,35 +132,19 @@ export default function ChatMessage({ message, noUserDisplay, avatarMenuItems, m
         setAvatarDropDownOpen(false)
     })
 
-    const [nickName, setNickName] = React.useState('')
+    const [nickName, setNickName] = React.useState(message.getUserId()! || 'System')
     const [avatarUrl, setAvatarUrl] = React.useState('')
     useAsyncEffect(async () => {
         const user = await ClientCache.getUser(message.getUserId()!)
         setAtRight(await ClientCache.getMySelf().then((re) => re?.getId()) == user?.getId())
         setNickName(user?.getNickName() || '')
         setAvatarUrl(getClient().getUrlForFileByHash(user?.getAvatarFileHash() || '') || '')
+        setShown(true)
     }, [message])
 
     const messageInnerRef = React.useRef<HTMLSpanElement>(null)
     React.useEffect(() => {
-        messageInnerRef.current!.innerHTML = prettyFlatParsedMessage(DOMPurify.sanitize(message.parseWithTransformers({
+        messageInnerRef.current!.innerHTML = prettyFlatParsedMessage(DOMPurify.sanitize(message.parseWithTransformers(transformers), sanitizeConfig))
-            attachment({ fileType, attachment }) {
-                const url = getClient().getUrlForFileByHash(attachment.getFileHash())
-                return ({
-                    Image: `<chat-image src="${url}" alt="${attachment.getFileName()}"></chat-image>`,
-                    Video: `<chat-video src="${url}"></chat-video>`,
-                    File: `<chat-file href="${url}" name="${attachment.getFileName()}"></chat-file>`,
-                })?.[fileType]
-            },
-            mention({ mentionType, mention }) {
-                switch (mentionType) {
-                    case "UserMention":
-                        return `<chat-mention user-id="${mention.user_id}" text="${mention.text}">[对话提及]</chat-mention>`
-                    case "ChatMention":
-                        return `<chat-mention chat-id="${mention.chat_id}" text="${mention.text}">[对话提及]</chat-mention>`
-                }
-            },
-        }), sanitizeConfig))
 
         // 没有办法的办法 （笑）
         // 姐姐, 谁让您不是 React 组件呢
@@ -150,7 +155,11 @@ export default function ChatMessage({ message, noUserDisplay, avatarMenuItems, m
         })
     }, [message])
 
-    return (
+    return <>
+        <div style={{
+            display: show ? 'none' : undefined,
+            padding: '5px',
+        }}>加载中...</div>
         <div
             slot="trigger"
             onContextMenu={(e) => {
@@ -165,12 +174,12 @@ export default function ChatMessage({ message, noUserDisplay, avatarMenuItems, m
             }}
             style={{
                 width: "100%",
-                display: "flex",
+                display: show ? 'flex' : 'none',
                 justifyContent: isAtRight ? "flex-end" : "flex-start",
                 flexDirection: "column"
             }}>
             {
-            	<div
+                <div
                     style={{
                         display: noUserDisplay ? "none" : "flex",
                         justifyContent: isAtRight ? "flex-end" : "flex-start",
@@ -258,5 +267,5 @@ export default function ChatMessage({ message, noUserDisplay, avatarMenuItems, m
             </mdui-card>
 
         </div>
-    )
+    </>
 }