render system emoji as same size of custom emoji

This commit is contained in:
Ajay Bura 2023-10-25 20:01:25 +05:30
parent a4d58091d7
commit 5c62a3097a
4 changed files with 59 additions and 27 deletions

View file

@ -44,7 +44,6 @@ import {
toRem, toRem,
} from 'folds'; } from 'folds';
import { isKeyHotkey } from 'is-hotkey'; import { isKeyHotkey } from 'is-hotkey';
import Linkify from 'linkify-react';
import { import {
decryptFile, decryptFile,
eventWithShortcode, eventWithShortcode,
@ -76,7 +75,10 @@ import {
MessageBadEncryptedContent, MessageBadEncryptedContent,
MessageNotDecryptedContent, MessageNotDecryptedContent,
} from '../../components/message'; } from '../../components/message';
import { LINKIFY_OPTS, getReactCustomHtmlParser } from '../../plugins/react-custom-html-parser'; import {
emojifyAndLinkify,
getReactCustomHtmlParser,
} from '../../plugins/react-custom-html-parser';
import { import {
canEditEvent, canEditEvent,
decryptAllTimelineEvent, decryptAllTimelineEvent,
@ -978,7 +980,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
if (customBody === '') <MessageEmptyContent />; if (customBody === '') <MessageEmptyContent />;
return parse(sanitizeCustomHtml(customBody), htmlReactParserOptions); return parse(sanitizeCustomHtml(customBody), htmlReactParserOptions);
} }
return <Linkify options={LINKIFY_OPTS}>{body}</Linkify>; return emojifyAndLinkify(body, true);
}; };
const renderRoomMsgContent = useRoomMsgContentRenderer<[EventTimelineSet]>({ const renderRoomMsgContent = useRoomMsgContentRenderer<[EventTimelineSet]>({

View file

@ -1,6 +1,6 @@
/* eslint-disable jsx-a11y/alt-text */ /* eslint-disable jsx-a11y/alt-text */
import React, { ReactEventHandler, Suspense, lazy } from 'react'; import React, { ReactEventHandler, Suspense, lazy } from 'react';
import { import parse, {
Element, Element,
Text as DOMText, Text as DOMText,
HTMLReactParserOptions, HTMLReactParserOptions,
@ -16,9 +16,14 @@ import { ErrorBoundary } from 'react-error-boundary';
import * as css from '../styles/CustomHtml.css'; import * as css from '../styles/CustomHtml.css';
import { getMxIdLocalPart, getRoomWithCanonicalAlias } from '../utils/matrix'; import { getMxIdLocalPart, getRoomWithCanonicalAlias } from '../utils/matrix';
import { getMemberDisplayName } from '../utils/room'; import { getMemberDisplayName } from '../utils/room';
import { EMOJI_PATTERN, URL_NEG_LB } from '../utils/regex';
import { sanitizeText } from '../utils/sanitize';
import { getHexcodeForEmoji, getShortcodeFor } from './emoji';
const ReactPrism = lazy(() => import('./react-prism/ReactPrism')); const ReactPrism = lazy(() => import('./react-prism/ReactPrism'));
const EMOJI_REG = new RegExp(`${URL_NEG_LB}(${EMOJI_PATTERN})`, 'g');
export const LINKIFY_OPTS: LinkifyOpts = { export const LINKIFY_OPTS: LinkifyOpts = {
attributes: { attributes: {
target: '_blank', target: '_blank',
@ -27,6 +32,28 @@ export const LINKIFY_OPTS: LinkifyOpts = {
validate: { validate: {
url: (value) => /^(https|http|ftp|mailto|magnet)?:/.test(value), url: (value) => /^(https|http|ftp|mailto|magnet)?:/.test(value),
}, },
ignoreTags: ['span'],
};
const emojifyParserOptions: HTMLReactParserOptions = {
replace: (domNode) => {
if (domNode instanceof DOMText) {
return <Linkify options={LINKIFY_OPTS}>{domNode.data}</Linkify>;
}
return undefined;
},
};
export const emojifyAndLinkify = (unsafeText: string, linkify?: boolean) => {
const emojifyHtml = sanitizeText(unsafeText).replace(
EMOJI_REG,
(emoji) =>
`<span class="${css.EmoticonBase}"><span class="${css.Emoticon()}" title="${getShortcodeFor(
getHexcodeForEmoji(emoji)
)}">${emoji}</span></span>`
);
return <>{parse(emojifyHtml, linkify ? emojifyParserOptions : undefined)}</>;
}; };
export const getReactCustomHtmlParser = ( export const getReactCustomHtmlParser = (
@ -45,7 +72,7 @@ export const getReactCustomHtmlParser = (
if (name === 'h1') { if (name === 'h1') {
return ( return (
<Text className={css.Heading} size="H2" {...props}> <Text {...props} className={css.Heading} size="H2">
{domToReact(children, opts)} {domToReact(children, opts)}
</Text> </Text>
); );
@ -53,7 +80,7 @@ export const getReactCustomHtmlParser = (
if (name === 'h2') { if (name === 'h2') {
return ( return (
<Text className={css.Heading} size="H3" {...props}> <Text {...props} className={css.Heading} size="H3">
{domToReact(children, opts)} {domToReact(children, opts)}
</Text> </Text>
); );
@ -61,7 +88,7 @@ export const getReactCustomHtmlParser = (
if (name === 'h3') { if (name === 'h3') {
return ( return (
<Text className={css.Heading} size="H4" {...props}> <Text {...props} className={css.Heading} size="H4">
{domToReact(children, opts)} {domToReact(children, opts)}
</Text> </Text>
); );
@ -69,7 +96,7 @@ export const getReactCustomHtmlParser = (
if (name === 'h4') { if (name === 'h4') {
return ( return (
<Text className={css.Heading} size="H4" {...props}> <Text {...props} className={css.Heading} size="H4">
{domToReact(children, opts)} {domToReact(children, opts)}
</Text> </Text>
); );
@ -77,7 +104,7 @@ export const getReactCustomHtmlParser = (
if (name === 'h5') { if (name === 'h5') {
return ( return (
<Text className={css.Heading} size="H5" {...props}> <Text {...props} className={css.Heading} size="H5">
{domToReact(children, opts)} {domToReact(children, opts)}
</Text> </Text>
); );
@ -85,7 +112,7 @@ export const getReactCustomHtmlParser = (
if (name === 'h6') { if (name === 'h6') {
return ( return (
<Text className={css.Heading} size="H6" {...props}> <Text {...props} className={css.Heading} size="H6">
{domToReact(children, opts)} {domToReact(children, opts)}
</Text> </Text>
); );
@ -93,7 +120,7 @@ export const getReactCustomHtmlParser = (
if (name === 'p') { if (name === 'p') {
return ( return (
<Text className={classNames(css.Paragraph, css.MarginSpaced)} size="Inherit" {...props}> <Text {...props} className={classNames(css.Paragraph, css.MarginSpaced)} size="Inherit">
{domToReact(children, opts)} {domToReact(children, opts)}
</Text> </Text>
); );
@ -101,7 +128,7 @@ export const getReactCustomHtmlParser = (
if (name === 'pre') { if (name === 'pre') {
return ( return (
<Text as="pre" className={css.CodeBlock} {...props}> <Text {...props} as="pre" className={css.CodeBlock}>
<Scroll <Scroll
direction="Horizontal" direction="Horizontal"
variant="Secondary" variant="Secondary"
@ -117,7 +144,7 @@ export const getReactCustomHtmlParser = (
if (name === 'blockquote') { if (name === 'blockquote') {
return ( return (
<Text size="Inherit" as="blockquote" className={css.BlockQuote} {...props}> <Text {...props} size="Inherit" as="blockquote" className={css.BlockQuote}>
{domToReact(children, opts)} {domToReact(children, opts)}
</Text> </Text>
); );
@ -125,14 +152,14 @@ export const getReactCustomHtmlParser = (
if (name === 'ul') { if (name === 'ul') {
return ( return (
<ul className={css.List} {...props}> <ul {...props} className={css.List}>
{domToReact(children, opts)} {domToReact(children, opts)}
</ul> </ul>
); );
} }
if (name === 'ol') { if (name === 'ol') {
return ( return (
<ol className={css.List} {...props}> <ol {...props} className={css.List}>
{domToReact(children, opts)} {domToReact(children, opts)}
</ol> </ol>
); );
@ -240,29 +267,28 @@ export const getReactCustomHtmlParser = (
if (htmlSrc && props.src.startsWith('mxc://') === false) { if (htmlSrc && props.src.startsWith('mxc://') === false) {
return ( return (
<a href={htmlSrc} target="_blank" rel="noreferrer noopener"> <a href={htmlSrc} target="_blank" rel="noreferrer noopener">
{props.alt && htmlSrc} {props.alt || props.title || htmlSrc}
</a> </a>
); );
} }
if (htmlSrc && 'data-mx-emoticon' in props) { if (htmlSrc && 'data-mx-emoticon' in props) {
return ( return (
<span className={css.EmoticonBase}> <span className={css.EmoticonBase}>
<span className={css.Emoticon()} contentEditable={false}> <span className={css.Emoticon()}>
<img className={css.EmoticonImg} src={htmlSrc} data-mx-emoticon /> <img {...props} className={css.EmoticonImg} src={htmlSrc} />
</span> </span>
</span> </span>
); );
} }
if (htmlSrc) return <img className={css.Img} {...props} src={htmlSrc} />; if (htmlSrc) return <img {...props} className={css.Img} src={htmlSrc} />;
} }
} }
if ( if (domNode instanceof DOMText) {
domNode instanceof DOMText && const linkify =
!(domNode.parent && 'name' in domNode.parent && domNode.parent.name === 'code') && !(domNode.parent && 'name' in domNode.parent && domNode.parent.name === 'code') &&
!(domNode.parent && 'name' in domNode.parent && domNode.parent.name === 'a') !(domNode.parent && 'name' in domNode.parent && domNode.parent.name === 'a');
) { return emojifyAndLinkify(domNode.data, linkify);
return <Linkify options={LINKIFY_OPTS}>{domNode.data}</Linkify>;
} }
return undefined; return undefined;
}, },

View file

@ -187,11 +187,11 @@ export const Emoticon = recipe({
height: '1em', height: '1em',
minWidth: '1em', minWidth: '1em',
fontSize: '1.47em', fontSize: '1.33em',
lineHeight: '1em', lineHeight: '1em',
verticalAlign: 'middle', verticalAlign: 'middle',
position: 'relative', position: 'relative',
top: '-0.32em', top: '-0.35em',
borderRadius: config.radii.R300, borderRadius: config.radii.R300,
}, },
], ],

4
src/app/utils/regex.ts Normal file

File diff suppressed because one or more lines are too long