michael/cinny
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity

Allow html in m.text

Browse source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-11-21 18:31:58 +05:30
parent b3e27da26d
commit 7fdf165ff3
2 changed files with 19 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/app/molecules/message/Message.jsx
View file

@ -34,7 +34,7 @@ import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg'; import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
import BinIC from '../../../../public/res/ic/outlined/bin.svg'; import BinIC from '../../../../public/res/ic/outlined/bin.svg';
import sanitize from './sanitize'; import { sanitizeCustomHtml, sanitizeText } from './sanitize';
function PlaceholderMessage() { function PlaceholderMessage() {
return ( return (
@ -102,16 +102,20 @@ function MessageBody({
isEdited, isEdited,
msgType, msgType,
}) { }) {
// if body is not string it is a React( element. // if body is not string it is a React element.
if (typeof body !== 'string') return <div className="message__body">{body}</div>; if (typeof body !== 'string') return <div className="message__body">{body}</div>;
const content = twemoji.parse(isCustomHTML ? sanitize(body) : body); let content = isCustomHTML ? sanitizeCustomHtml(body) : body;
const linkified = linkifyHtml(content, { target: '_blank', rel: 'noreferrer noopener' }); content = linkifyHtml(content, { target: '_blank', rel: 'noreferrer noopener' });
if (!isCustomHTML) content = sanitizeText(body);
content = twemoji.parse(content);
const parsed = parse(content);
return ( return (
<div className="message__body"> <div className="message__body">
<div className="text text-b1"> <div className="text text-b1">
{ msgType === 'm.emote' && `* ${senderName} ` } { msgType === 'm.emote' && `* ${senderName} ` }
{ parse(linkified) } { parsed }
</div> </div>
{ isEdited && <Text className="message__body-edited" variant="b3">(edited)</Text>} { isEdited && <Text className="message__body-edited" variant="b3">(edited)</Text>}
</div> </div>

11
src/app/molecules/message/sanitize.js
View file

@ -67,7 +67,7 @@ function sanitizeImgTag(tagName, attributes) {
return { tagName, attribs }; return { tagName, attribs };
} }
export default function sanitize(body) { export function sanitizeCustomHtml(body) {
return sanitizeHtml(body, { return sanitizeHtml(body, {
allowedTags: [ allowedTags: [
'font', 'font',
@ -142,3 +142,12 @@ export default function sanitize(body) {
}, },
}); });
} }
export function sanitizeText(body) {
const tagsToReplace = {
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
};
return body.replace(/[&<>]/g, (tag) => tagsToReplace[tag] || tag);
}