diff --git a/client/ui/chat/Message.tsx b/client/ui/chat/Message.tsx index 024b8a8..8af3c92 100644 --- a/client/ui/chat/Message.tsx +++ b/client/ui/chat/Message.tsx @@ -12,6 +12,7 @@ import isMobileUI from "../isMobileUI.ts" import ReactJson from 'react-json-view' import User from "../../api/client_data/User.ts" import getUrlForFileByHash from "../../getUrlForFileByHash.ts" +import escapeHTML from "../../escapeHtml.ts" interface Args extends React.HTMLAttributes { userId: string @@ -23,6 +24,9 @@ interface Args extends React.HTMLAttributes { function prettyFlatParsedMessage(html: string) { const elements = new DOMParser().parseFromString(html, 'text/html').body.children + // 纯文本直接处理 + if (elements.length == 0) + return `${escapeHTML(html)}` let ls: Element[] = [] let ret = '' // 第一个元素时, 不会被聚合在一起 @@ -32,13 +36,26 @@ function prettyFlatParsedMessage(html: string) { 'chat-mention', ] function checkContinuousElement(tagName: string) { - if (lastElementType != tagName) { + /* console.log('shangyige ', lastElementType) + console.log("dangqian", tagName) + console.log("上一个元素的类型和当前不一致?", lastElementType != tagName) + console.log("上一个元素的类型和这个元素的类型都属于文本类型", (textElementTags.indexOf(lastElementType) != -1 && textElementTags.indexOf(tagName) != -1)) */ + // 如果上一个元素的类型和当前不一致, 或者上一个元素的类型和这个元素的类型都属于文本类型 (亦或者到最后一步时) 执行 + if ((lastElementType != tagName || (textElementTags.indexOf(lastElementType) != -1 && textElementTags.indexOf(tagName) != -1)) || tagName == 'LAST_CHICKEN') { + /* console.log(tagName, '进入') */ + // 如果上一个元素类型为文本类型, 且当前不是文本类型时, 用文本包裹 if (textElementTags.indexOf(lastElementType) != -1) { + // 当前的文本类型不应该和上一个分离, 滚出去 + if (textElementTags.indexOf(tagName) != -1) return + /* console.log(tagName, '文字和被') */ // 由于 chat-mention 不是用内部元素实现的, 因此在这个元素的生成中必须放置占位字符串 // 尽管显示上占位字符串不会显示, 但是在这里依然是会被处理的, 因为本身还是 innerHTML + + // 当文本非空时, 将文字合并在一起 if (ls.map((v) => v.innerHTML).join('').trim() != '') ret += `${ls.map((v) => v.outerHTML).join('')}` } else + // 非文本类型元素, 各自成块 ret += ls.map((v) => v.outerHTML).join('') ls = [] } @@ -46,12 +63,13 @@ function prettyFlatParsedMessage(html: string) { for (const e of elements) { // 当出现非文本元素时, 将文本聚合在一起 // 如果是其他类型, 虽然也执行聚合, 但是不会有外层包裹 + /* console.log("当前", e, "内容", e.innerHTML) */ checkContinuousElement(e.nodeName.toLowerCase()) ls.push(e) lastElementType = e.nodeName.toLowerCase() } // 最后将剩余的转换 - checkContinuousElement('') + checkContinuousElement('LAST_CHICKEN') return ret }