mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-01-31 01:39:08 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Removed useMemo and implement truncation logic for custom HTML

Browse source
This commit is contained in:
Vishawdeep Singh 2024-12-28 17:23:06 +05:30
parent dc1345f7a8
commit 98c8f2b2bf
4 changed files with 168 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

131
package-lock.json generated
View file

@ -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",

1
package.json
View file

@ -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": {

20
src/app/components/message/MsgTypeRenderers.css.ts Normal file
View file

@ -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',
},
},
});

36
src/app/components/message/MsgTypeRenderers.tsx
View file

@ -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 && <MessageEditedContent />}
</MessageTextBody>
{renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
{shouldTruncate && (
<button
aria-expanded={isExpanded}
className="show-more"
<Button
size="400"
fill="None"
radii="0"
className={buttonStyle}
onClick={() => setIsExpanded(!isExpanded)}
>
{isExpanded ? 'Show Less' : 'Show More'}
</button>
</Button>
)}
</>
);