mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-02-13 17:10:06 +00:00
render system emoji as same size of custom emoji
This commit is contained in:
parent
a4d58091d7
commit
5c62a3097a
src/app
organisms/room
plugins
styles
utils
|
@ -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]>({
|
||||||
|
|
|
@ -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;
|
||||||
},
|
},
|
||||||
|
|
|
@ -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
4
src/app/utils/regex.ts
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue