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

Fix emoji and other related bugs (#1504)

Browse source 
* make system-emoji default & twitter emoji optional

* add mozilla twemoji-colr credit

* fix wrong audio duration

* set locales to empty in member count millify

* render system emoji as same size of custom emoji
This commit is contained in:
Ajay Bura 2023-10-26 09:09:27 +11:00 committed by GitHub
parent 2957a45c4b
commit f53bb28b66
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 78 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/organisms/room/MembersDrawer.tsx
View file

@ -271,7 +271,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
<Box grow="Yes" alignItems="Center" gap="200">
<Box grow="Yes" alignItems="Center" gap="200">
<Text size="H5" truncate>
{`${millify(room.getJoinedMemberCount(), { precision: 1 })} Members`}
{`${millify(room.getJoinedMemberCount(), { precision: 1, locales: [] })} Members`}
</Text>
</Box>
<Box shrink="No" alignItems="Center">

8
src/app/organisms/room/RoomTimeline.tsx
View file

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

3
src/app/organisms/room/message/AudioContent.tsx
View file

@ -44,7 +44,8 @@ export const AudioContent = as<'div', AudioContentProps>(
const audioRef = useRef<HTMLAudioElement | null>(null);
const [currentTime, setCurrentTime] = useState(0);
const [duration, setDuration] = useState(info.duration ?? 0);
// duration in seconds. (NOTE: info.duration is in milliseconds)
const [duration, setDuration] = useState((info.duration ?? 0) / 1000);
const getAudioRef = useCallback(() => audioRef.current, []);
const { loading } = useMediaLoading(getAudioRef);

14
src/app/organisms/settings/Settings.jsx
View file

@ -54,7 +54,7 @@ function AppearanceSection() {
const [enterForNewline, setEnterForNewline] = useSetting(settingsAtom, 'enterForNewline');
const [messageLayout, setMessageLayout] = useSetting(settingsAtom, 'messageLayout');
const [messageSpacing, setMessageSpacing] = useSetting(settingsAtom, 'messageSpacing');
const [useSystemEmoji, setUseSystemEmoji] = useSetting(settingsAtom, 'useSystemEmoji');
const [twitterEmoji, setTwitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
const [isMarkdown, setIsMarkdown] = useSetting(settingsAtom, 'isMarkdown');
const [hideMembershipEvents, setHideMembershipEvents] = useSetting(settingsAtom, 'hideMembershipEvents');
const [hideNickAvatarEvents, setHideNickAvatarEvents] = useSetting(settingsAtom, 'hideNickAvatarEvents');
@ -96,14 +96,14 @@ function AppearanceSection() {
)}
/>
<SettingTile
title="Use System Emoji"
title="Use Twitter Emoji"
options={(
<Toggle
isActive={useSystemEmoji}
onToggle={() => setUseSystemEmoji(!useSystemEmoji)}
isActive={twitterEmoji}
onToggle={() => setTwitterEmoji(!twitterEmoji)}
/>
)}
content={<Text variant="b3">Use system emoji instead of Twitter emojis.</Text>}
content={<Text variant="b3">Use Twitter emoji instead of system emoji.</Text>}
/>
</div>
<div className="settings-appearance__card">
@ -339,6 +339,10 @@ function AboutSection() {
{/* eslint-disable-next-line react/jsx-one-expression-per-line */ }
<Text>The <a href="https://github.com/matrix-org/matrix-js-sdk" rel="noreferrer noopener" target="_blank">matrix-js-sdk</a> is © <a href="https://matrix.org/foundation" rel="noreferrer noopener" target="_blank">The Matrix.org Foundation C.I.C</a> used under the terms of <a href="http://www.apache.org/licenses/LICENSE-2.0" rel="noreferrer noopener" target="_blank">Apache 2.0</a>.</Text>
</li>
<li>
{/* eslint-disable-next-line react/jsx-one-expression-per-line */ }
<Text>The <a href="https://github.com/mozilla/twemoji-colr" target="_blank" rel="noreferrer noopener">twemoji-colr</a> font is © <a href="https://mozilla.org/" target="_blank" rel="noreferrer noopener">Mozilla Foundation</a> used under the terms of <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank" rel="noreferrer noopener">Apache 2.0</a>.</Text>
</li>
<li>
{/* eslint-disable-next-line react/jsx-one-expression-per-line */ }
<Text>The <a href="https://twemoji.twitter.com" target="_blank" rel="noreferrer noopener">Twemoji</a> emoji art is © <a href="https://twemoji.twitter.com" target="_blank" rel="noreferrer noopener">Twitter, Inc and other contributors</a> used under the terms of <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer noopener">CC-BY 4.0</a>.</Text>

70
src/app/plugins/react-custom-html-parser.tsx
View file

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

4
src/app/state/settings.ts
View file

@ -9,7 +9,7 @@ export interface Settings {
useSystemTheme: boolean;
isMarkdown: boolean;
editorToolbar: boolean;
useSystemEmoji: boolean;
twitterEmoji: boolean;
isPeopleDrawer: boolean;
memberSortFilterIndex: number;
@ -30,7 +30,7 @@ const defaultSettings: Settings = {
useSystemTheme: true,
isMarkdown: false,
editorToolbar: false,
useSystemEmoji: false,
twitterEmoji: false,
isPeopleDrawer: true,
memberSortFilterIndex: 0,

4
src/app/styles/CustomHtml.css.ts
View file

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

8
src/app/templates/client/Client.jsx
View file

@ -24,12 +24,12 @@ import { useSetting } from '../../state/hooks/settings';
import { settingsAtom } from '../../state/settings';
function SystemEmojiFeature() {
const [systemEmoji] = useSetting(settingsAtom, 'useSystemEmoji');
const [twitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
if (systemEmoji) {
document.documentElement.style.setProperty('--font-emoji', 'Twemoji_DISABLED');
} else {
if (twitterEmoji) {
document.documentElement.style.setProperty('--font-emoji', 'Twemoji');
} else {
document.documentElement.style.setProperty('--font-emoji', 'Twemoji_DISABLED');
}
return null;

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

File diff suppressed because one or more lines are too long

2
src/index.scss
View file

@ -192,7 +192,7 @@
--fluid-slide-down: cubic-bezier(0.02, 0.82, 0.4, 0.96);
--fluid-slide-up: cubic-bezier(0.13, 0.56, 0.25, 0.99);
--font-emoji: 'Twemoji';
--font-emoji: 'Twemoji_DISABLED';
--font-primary: 'InterVariable', var(--font-emoji), sans-serif;
--font-secondary: 'InterVariable', var(--font-emoji), sans-serif;
}