diff --git a/package-lock.json b/package-lock.json index 7fb554e7..a899e804 100644 --- a/package-lock.json +++ b/package-lock.json @@ -66,6 +66,7 @@ "slate-history": "0.93.0", "slate-react": "0.98.4", "tippy.js": "6.3.7", + "truncate-html": "1.1.2", "ua-parser-js": "1.0.35" }, "devDependencies": { @@ -5900,6 +5901,12 @@ "resolved": "https://registry.npmjs.org/blurhash/-/blurhash-2.0.4.tgz", "integrity": "sha512-r/As72u2FbucLoK5NTegM/GucxJc3d8GvHc4ngo13IO/nt2HU4gONxNLq1XPN6EM/V8Y9URIa7PcSz2RZu553A==" }, + "node_modules/boolbase": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", + "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", + "license": "ISC" + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -6089,6 +6096,56 @@ "node": ">=4" } }, + "node_modules/cheerio": { + "version": "1.0.0-rc.12", + "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.12.tgz", + "integrity": "sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==", + "license": "MIT", + "dependencies": { + "cheerio-select": "^2.1.0", + "dom-serializer": "^2.0.0", + "domhandler": "^5.0.3", + "domutils": "^3.0.1", + "htmlparser2": "^8.0.1", + "parse5": "^7.0.0", + "parse5-htmlparser2-tree-adapter": "^7.0.0" + }, + "engines": { + "node": ">= 6" + }, + "funding": { + "url": "https://github.com/cheeriojs/cheerio?sponsor=1" + } + }, + "node_modules/cheerio-select": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz", + "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==", + "license": "BSD-2-Clause", + "dependencies": { + "boolbase": "^1.0.0", + "css-select": "^5.1.0", + "css-what": "^6.1.0", + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3", + "domutils": "^3.0.1" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, + "node_modules/cheerio-select/node_modules/css-what": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", + "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==", + "license": "BSD-2-Clause", + "engines": { + "node": ">= 6" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, "node_modules/chokidar": { "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", @@ -6302,6 +6359,34 @@ "node": ">=8" } }, + "node_modules/css-select": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", + "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==", + "license": "BSD-2-Clause", + "dependencies": { + "boolbase": "^1.0.0", + "css-what": "^6.1.0", + "domhandler": "^5.0.2", + "domutils": "^3.0.1", + "nth-check": "^2.0.1" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, + "node_modules/css-select/node_modules/css-what": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", + "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==", + "license": "BSD-2-Clause", + "engines": { + "node": ">= 6" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, "node_modules/css-what": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz", @@ -9387,6 +9472,18 @@ "set-blocking": "^2.0.0" } }, + "node_modules/nth-check": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz", + "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==", + "license": "BSD-2-Clause", + "dependencies": { + "boolbase": "^1.0.0" + }, + "funding": { + "url": "https://github.com/fb55/nth-check?sponsor=1" + } + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -9607,6 +9704,31 @@ "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz", "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==" }, + "node_modules/parse5": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz", + "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==", + "license": "MIT", + "dependencies": { + "entities": "^4.5.0" + }, + "funding": { + "url": "https://github.com/inikulin/parse5?sponsor=1" + } + }, + "node_modules/parse5-htmlparser2-tree-adapter": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.1.0.tgz", + "integrity": "sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==", + "license": "MIT", + "dependencies": { + "domhandler": "^5.0.3", + "parse5": "^7.0.0" + }, + "funding": { + "url": "https://github.com/inikulin/parse5?sponsor=1" + } + }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -11117,6 +11239,15 @@ "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==" }, + "node_modules/truncate-html": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/truncate-html/-/truncate-html-1.1.2.tgz", + "integrity": "sha512-BiLzO594/Quf0wu3jHnVxHA4X5tl4Gunhqe2mlGTa5ElwHJGw7M/N5JdBvU8OPtR+MaEIvmyUdNxnoEi3YI5Yg==", + "license": "MIT", + "dependencies": { + "cheerio": "1.0.0-rc.12" + } + }, "node_modules/tsconfig-paths": { "version": "3.15.0", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz", diff --git a/package.json b/package.json index 1ecbc190..5c489dbe 100644 --- a/package.json +++ b/package.json @@ -77,6 +77,7 @@ "slate-history": "0.93.0", "slate-react": "0.98.4", "tippy.js": "6.3.7", + "truncate-html": "1.1.2", "ua-parser-js": "1.0.35" }, "devDependencies": { diff --git a/src/app/components/message/MsgTypeRenderers.css.ts b/src/app/components/message/MsgTypeRenderers.css.ts new file mode 100644 index 00000000..29b6b29d --- /dev/null +++ b/src/app/components/message/MsgTypeRenderers.css.ts @@ -0,0 +1,20 @@ +import { style } from '@vanilla-extract/css'; + +export const buttonStyle = style({ + width: '15%', + color: '#5e9ecf', + backgroundColor: 'transparent', + border: 'none', + padding: '0', + textDecoration: 'underline', + cursor: 'pointer', + transition: 'color 0.3s, text-decoration 0.3s', + + selectors: { + '&:hover': { + color: '#1e6e8c', + textDecoration: 'none', + backgroundColor: 'transparent', + }, + }, +}); diff --git a/src/app/components/message/MsgTypeRenderers.tsx b/src/app/components/message/MsgTypeRenderers.tsx index 89c9e11c..b23d71b0 100644 --- a/src/app/components/message/MsgTypeRenderers.tsx +++ b/src/app/components/message/MsgTypeRenderers.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode, useState, useMemo, useCallback } from 'react'; +import React, { ReactNode, useState } from 'react'; import { Box, Chip, Icon, Icons, Text, toRem } from 'folds'; import { IContent } from 'matrix-js-sdk'; import { JUMBO_EMOJI_REG, URL_REG } from '../../utils/regex'; @@ -28,6 +28,8 @@ import { parseGeoUri, scaleYDimension } from '../../utils/common'; import { Attachment, AttachmentBox, AttachmentContent, AttachmentHeader } from './attachment'; import { FileHeader } from './FileHeader'; import { Button } from 'folds'; +import { buttonStyle } from './MsgTypeRenderers.css'; +import truncateHtml from 'truncate-html'; const CHARACTER_LIMIT = 750; @@ -90,20 +92,12 @@ export function MText({ edited, content, renderBody, renderUrlsPreview }: MTextP const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined; const [isExpanded, setIsExpanded] = useState(false); - const { shouldTruncate, finalContent, finalCustomContent } = useMemo(() => { - const contentStr = trimmedBody || ''; - const customContentStr = typeof customBody === 'string' ? trimReplyFromBody(customBody) : ''; - const needTruncate = contentStr.length > 750 || customContentStr.length > 750; - return { - contentStr, - customContentStr, - shouldTruncate: needTruncate, - finalContent: isExpanded ? contentStr : truncateText(contentStr, CHARACTER_LIMIT), - finalCustomContent: isExpanded - ? customContentStr - : truncateText(customContentStr, CHARACTER_LIMIT), - }; - }, [trimmedBody, customBody, isExpanded]); + const shouldTruncate = + trimmedBody.length > 750 || (typeof customBody === 'string' && customBody.length > 750); + const finalContent = isExpanded ? trimmedBody : truncateText(trimmedBody, CHARACTER_LIMIT); + const customFinalContent = isExpanded + ? (customBody as string) + : truncateHtml(customBody as string, CHARACTER_LIMIT); return ( <> @@ -113,20 +107,22 @@ export function MText({ edited, content, renderBody, renderUrlsPreview }: MTextP > {renderBody({ body: finalContent, - customBody: typeof customBody === 'string' ? finalCustomContent : undefined, + customBody: typeof customBody === 'string' ? customFinalContent : undefined, })} {edited && } {renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)} {shouldTruncate && ( - + )} );