Merge branch 'dev' into dev

This commit is contained in:
Ayes 2023-01-18 17:08:21 +02:00 committed by GitHub
commit 681a097b5b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 191 additions and 133 deletions

21
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "cinny", "name": "cinny",
"version": "2.2.2", "version": "2.2.3",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "cinny", "name": "cinny",
"version": "2.2.2", "version": "2.2.3",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@fontsource/inter": "4.5.14", "@fontsource/inter": "4.5.14",
@ -41,6 +41,7 @@
}, },
"devDependencies": { "devDependencies": {
"@rollup/plugin-wasm": "6.1.1", "@rollup/plugin-wasm": "6.1.1",
"@types/node": "18.11.18",
"@types/react": "18.0.26", "@types/react": "18.0.26",
"@types/react-dom": "18.0.9", "@types/react-dom": "18.0.9",
"@typescript-eslint/eslint-plugin": "5.46.1", "@typescript-eslint/eslint-plugin": "5.46.1",
@ -53,6 +54,7 @@
"eslint-plugin-jsx-a11y": "6.6.1", "eslint-plugin-jsx-a11y": "6.6.1",
"eslint-plugin-react": "7.31.11", "eslint-plugin-react": "7.31.11",
"eslint-plugin-react-hooks": "4.6.0", "eslint-plugin-react-hooks": "4.6.0",
"mini-svg-data-uri": "1.4.4",
"prettier": "2.8.1", "prettier": "2.8.1",
"sass": "1.56.2", "sass": "1.56.2",
"typescript": "4.9.4", "typescript": "4.9.4",
@ -1054,6 +1056,12 @@
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
"dev": true "dev": true
}, },
"node_modules/@types/node": {
"version": "18.11.18",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
"integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
"dev": true
},
"node_modules/@types/prop-types": { "node_modules/@types/prop-types": {
"version": "15.7.5", "version": "15.7.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@ -3768,6 +3776,15 @@
"node": ">=8.6" "node": ">=8.6"
} }
}, },
"node_modules/mini-svg-data-uri": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
"integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
"dev": true,
"bin": {
"mini-svg-data-uri": "cli.js"
}
},
"node_modules/minimatch": { "node_modules/minimatch": {
"version": "3.1.2", "version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",

View file

@ -1,6 +1,6 @@
{ {
"name": "cinny", "name": "cinny",
"version": "2.2.2", "version": "2.2.3",
"description": "Yet another matrix client", "description": "Yet another matrix client",
"main": "index.js", "main": "index.js",
"engines": { "engines": {
@ -51,6 +51,7 @@
}, },
"devDependencies": { "devDependencies": {
"@rollup/plugin-wasm": "6.1.1", "@rollup/plugin-wasm": "6.1.1",
"@types/node": "18.11.18",
"@types/react": "18.0.26", "@types/react": "18.0.26",
"@types/react-dom": "18.0.9", "@types/react-dom": "18.0.9",
"@typescript-eslint/eslint-plugin": "5.46.1", "@typescript-eslint/eslint-plugin": "5.46.1",
@ -63,6 +64,7 @@
"eslint-plugin-jsx-a11y": "6.6.1", "eslint-plugin-jsx-a11y": "6.6.1",
"eslint-plugin-react": "7.31.11", "eslint-plugin-react": "7.31.11",
"eslint-plugin-react-hooks": "4.6.0", "eslint-plugin-react-hooks": "4.6.0",
"mini-svg-data-uri": "1.4.4",
"prettier": "2.8.1", "prettier": "2.8.1",
"sass": "1.56.2", "sass": "1.56.2",
"typescript": "4.9.4", "typescript": "4.9.4",

View file

@ -2,20 +2,18 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import './RawIcon.scss'; import './RawIcon.scss';
function RawIcon({ function RawIcon({ color, size, src, isImage }) {
color, size, src, isImage,
}) {
const style = {}; const style = {};
if (color !== null) style.backgroundColor = color; if (color !== null) style.backgroundColor = color;
if (isImage) { if (isImage) {
style.backgroundColor = 'transparent'; style.backgroundColor = 'transparent';
style.backgroundImage = `url(${src})`; style.backgroundImage = `url("${src}")`;
} else { } else {
style.WebkitMaskImage = `url(${src})`; style.WebkitMaskImage = `url("${src}")`;
style.maskImage = `url(${src})`; style.maskImage = `url("${src}")`;
} }
return <span className={`ic-raw ic-raw-${size}`} style={style}> </span>; return <span className={`ic-raw ic-raw-${size}`} style={style} />;
} }
RawIcon.defaultProps = { RawIcon.defaultProps = {

View file

@ -74,7 +74,7 @@ function ImageUpload({
<Text variant="b3">{uploadPromise ? 'Cancel' : 'Remove'}</Text> <Text variant="b3">{uploadPromise ? 'Cancel' : 'Remove'}</Text>
</button> </button>
)} )}
<input onChange={uploadImage} style={{ display: 'none' }} ref={uploadImageRef} type="file" /> <input onChange={uploadImage} style={{ display: 'none' }} ref={uploadImageRef} type="file" accept="image/*" />
</div> </div>
); );
} }

View file

@ -13,6 +13,7 @@ import cons from '../../../client/state/cons';
import navigation from '../../../client/state/navigation'; import navigation from '../../../client/state/navigation';
import AsyncSearch from '../../../util/AsyncSearch'; import AsyncSearch from '../../../util/AsyncSearch';
import { addRecentEmoji, getRecentEmojis } from './recent'; import { addRecentEmoji, getRecentEmojis } from './recent';
import { TWEMOJI_BASE_URL } from '../../../util/twemojify';
import Text from '../../atoms/text/Text'; import Text from '../../atoms/text/Text';
import RawIcon from '../../atoms/system-icons/RawIcon'; import RawIcon from '../../atoms/system-icons/RawIcon';
@ -46,22 +47,21 @@ const EmojiGroup = React.memo(({ name, groupEmojis }) => {
const emoji = groupEmojis[emojiIndex]; const emoji = groupEmojis[emojiIndex];
emojiRow.push( emojiRow.push(
<span key={emojiIndex}> <span key={emojiIndex}>
{ {emoji.hexcode ? (
emoji.hexcode
// This is a unicode emoji, and should be rendered with twemoji // This is a unicode emoji, and should be rendered with twemoji
? parse(twemoji.parse( parse(
emoji.unicode, twemoji.parse(emoji.unicode, {
{
attributes: () => ({ attributes: () => ({
unicode: emoji.unicode, unicode: emoji.unicode,
shortcodes: emoji.shortcodes?.toString(), shortcodes: emoji.shortcodes?.toString(),
hexcode: emoji.hexcode, hexcode: emoji.hexcode,
loading: 'lazy', loading: 'lazy',
}), }),
}, base: TWEMOJI_BASE_URL,
)) })
)
) : (
// This is a custom emoji, and should be render as an mxc // This is a custom emoji, and should be render as an mxc
: (
<img <img
className="emoji" className="emoji"
draggable="false" draggable="false"
@ -72,19 +72,24 @@ const EmojiGroup = React.memo(({ name, groupEmojis }) => {
src={initMatrix.matrixClient.mxcUrlToHttp(emoji.mxc)} src={initMatrix.matrixClient.mxcUrlToHttp(emoji.mxc)}
data-mx-emoticon={emoji.mxc} data-mx-emoticon={emoji.mxc}
/> />
) )}
} </span>
</span>,
); );
} }
emojiBoard.push(<div key={r} className="emoji-row">{emojiRow}</div>); emojiBoard.push(
<div key={r} className="emoji-row">
{emojiRow}
</div>
);
} }
return emojiBoard; return emojiBoard;
} }
return ( return (
<div className="emoji-group"> <div className="emoji-group">
<Text className="emoji-group__header" variant="b2" weight="bold">{name}</Text> <Text className="emoji-group__header" variant="b2" weight="bold">
{name}
</Text>
{groupEmojis.length !== 0 && <div className="emoji-set noselect">{getEmojiBoard()}</div>} {groupEmojis.length !== 0 && <div className="emoji-set noselect">{getEmojiBoard()}</div>}
</div> </div>
); );
@ -92,17 +97,16 @@ const EmojiGroup = React.memo(({ name, groupEmojis }) => {
EmojiGroup.propTypes = { EmojiGroup.propTypes = {
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
groupEmojis: PropTypes.arrayOf(PropTypes.shape({ groupEmojis: PropTypes.arrayOf(
PropTypes.shape({
length: PropTypes.number, length: PropTypes.number,
unicode: PropTypes.string, unicode: PropTypes.string,
hexcode: PropTypes.string, hexcode: PropTypes.string,
mxc: PropTypes.string, mxc: PropTypes.string,
shortcode: PropTypes.string, shortcode: PropTypes.string,
shortcodes: PropTypes.oneOfType([ shortcodes: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
PropTypes.string, })
PropTypes.arrayOf(PropTypes.string), ).isRequired,
]),
})).isRequired,
}; };
const asyncSearch = new AsyncSearch(); const asyncSearch = new AsyncSearch();
@ -128,7 +132,13 @@ function SearchedEmoji() {
if (searchedEmojis === null) return false; if (searchedEmojis === null) return false;
return <EmojiGroup key="-1" name={searchedEmojis.emojis.length === 0 ? 'No search result found' : 'Search results'} groupEmojis={searchedEmojis.emojis} />; return (
<EmojiGroup
key="-1"
name={searchedEmojis.emojis.length === 0 ? 'No search result found' : 'Search results'}
groupEmojis={searchedEmojis.emojis}
/>
);
} }
function EmojiBoard({ onSelect, searchRef }) { function EmojiBoard({ onSelect, searchRef }) {
@ -146,7 +156,10 @@ function EmojiBoard({ onSelect, searchRef }) {
if (typeof shortcodes === 'undefined') shortcodes = undefined; if (typeof shortcodes === 'undefined') shortcodes = undefined;
else shortcodes = shortcodes.split(','); else shortcodes = shortcodes.split(',');
return { return {
unicode, hexcode, shortcodes, mxc, unicode,
hexcode,
shortcodes,
mxc,
}; };
} }
@ -211,10 +224,9 @@ function EmojiBoard({ onSelect, searchRef }) {
const parentIds = initMatrix.roomList.getAllParentSpaces(room.roomId); const parentIds = initMatrix.roomList.getAllParentSpaces(room.roomId);
const parentRooms = [...parentIds].map((id) => mx.getRoom(id)); const parentRooms = [...parentIds].map((id) => mx.getRoom(id));
if (room) { if (room) {
const packs = getRelevantPacks( const packs = getRelevantPacks(room.client, [room, ...parentRooms]).filter(
room.client, (pack) => pack.getEmojis().length !== 0
[room, ...parentRooms], );
).filter((pack) => pack.getEmojis().length !== 0);
// Set an index for each pack so that we know where to jump when the user uses the nav // Set an index for each pack so that we know where to jump when the user uses the nav
for (let i = 0; i < packs.length; i += 1) { for (let i = 0; i < packs.length; i += 1) {
@ -263,10 +275,10 @@ function EmojiBoard({ onSelect, searchRef }) {
/> />
)} )}
<div className="emoji-board__nav-custom"> <div className="emoji-board__nav-custom">
{ {availableEmojis.map((pack) => {
availableEmojis.map((pack) => { const src = initMatrix.matrixClient.mxcUrlToHttp(
const src = initMatrix.matrixClient pack.avatarUrl ?? pack.getEmojis()[0].mxc
.mxcUrlToHttp(pack.avatarUrl ?? pack.getEmojis()[0].mxc); );
return ( return (
<IconButton <IconButton
onClick={() => openGroup(recentOffset + pack.packIndex)} onClick={() => openGroup(recentOffset + pack.packIndex)}
@ -277,12 +289,10 @@ function EmojiBoard({ onSelect, searchRef }) {
isImage isImage
/> />
); );
}) })}
}
</div> </div>
<div className="emoji-board__nav-twemoji"> <div className="emoji-board__nav-twemoji">
{ {[
[
[0, EmojiIC, 'Smilies'], [0, EmojiIC, 'Smilies'],
[1, DogIC, 'Animals'], [1, DogIC, 'Animals'],
[2, CupIC, 'Food'], [2, CupIC, 'Food'],
@ -299,8 +309,7 @@ function EmojiBoard({ onSelect, searchRef }) {
tooltip={name} tooltip={name}
tooltipPlacement="left" tooltipPlacement="left"
/> />
)) ))}
}
</div> </div>
</div> </div>
</ScrollView> </ScrollView>
@ -313,27 +322,25 @@ function EmojiBoard({ onSelect, searchRef }) {
<ScrollView ref={scrollEmojisRef} autoHide> <ScrollView ref={scrollEmojisRef} autoHide>
<div onMouseMove={hoverEmoji} onClick={selectEmoji}> <div onMouseMove={hoverEmoji} onClick={selectEmoji}>
<SearchedEmoji /> <SearchedEmoji />
{recentEmojis.length > 0 && <EmojiGroup name="Recently used" groupEmojis={recentEmojis} />} {recentEmojis.length > 0 && (
{ <EmojiGroup name="Recently used" groupEmojis={recentEmojis} />
availableEmojis.map((pack) => ( )}
{availableEmojis.map((pack) => (
<EmojiGroup <EmojiGroup
name={pack.displayName ?? 'Unknown'} name={pack.displayName ?? 'Unknown'}
key={pack.packIndex} key={pack.packIndex}
groupEmojis={pack.getEmojis()} groupEmojis={pack.getEmojis()}
className="custom-emoji-group" className="custom-emoji-group"
/> />
)) ))}
} {emojiGroups.map((group) => (
{
emojiGroups.map((group) => (
<EmojiGroup key={group.name} name={group.name} groupEmojis={group.emojis} /> <EmojiGroup key={group.name} name={group.name} groupEmojis={group.emojis} />
)) ))}
}
</div> </div>
</ScrollView> </ScrollView>
</div> </div>
<div ref={emojiInfo} className="emoji-board__content__info"> <div ref={emojiInfo} className="emoji-board__content__info">
<div>{ parse(twemoji.parse('🙂')) }</div> <div>{parse(twemoji.parse('🙂', { base: TWEMOJI_BASE_URL }))}</div>
<Text>:slight_smile:</Text> <Text>:slight_smile:</Text>
</div> </div>
</div> </div>

View file

@ -5,7 +5,7 @@ import './RoomViewCmdBar.scss';
import parse from 'html-react-parser'; import parse from 'html-react-parser';
import twemoji from 'twemoji'; import twemoji from 'twemoji';
import { twemojify } from '../../../util/twemojify'; import { twemojify, TWEMOJI_BASE_URL } from '../../../util/twemojify';
import initMatrix from '../../../client/initMatrix'; import initMatrix from '../../../client/initMatrix';
import { getEmojiForCompletion } from '../emoji-board/custom-emoji'; import { getEmojiForCompletion } from '../emoji-board/custom-emoji';
@ -31,7 +31,7 @@ CmdItem.propTypes = {
function renderSuggestions({ prefix, option, suggestions }, fireCmd) { function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
function renderCmdSuggestions(cmdPrefix, cmds) { function renderCmdSuggestions(cmdPrefix, cmds) {
const cmdOptString = (typeof option === 'string') ? `/${option}` : '/?'; const cmdOptString = typeof option === 'string' ? `/${option}` : '/?';
return cmds.map((cmd) => ( return cmds.map((cmd) => (
<CmdItem <CmdItem
key={cmd} key={cmd}
@ -53,15 +53,15 @@ function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
// Renders a small Twemoji // Renders a small Twemoji
function renderTwemoji(emoji) { function renderTwemoji(emoji) {
return parse(twemoji.parse( return parse(
emoji.unicode, twemoji.parse(emoji.unicode, {
{
attributes: () => ({ attributes: () => ({
unicode: emoji.unicode, unicode: emoji.unicode,
shortcodes: emoji.shortcodes?.toString(), shortcodes: emoji.shortcodes?.toString(),
}), }),
}, base: TWEMOJI_BASE_URL,
)); })
);
} }
// Render a custom emoji // Render a custom emoji
@ -87,10 +87,12 @@ function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
return emos.map((emoji) => ( return emos.map((emoji) => (
<CmdItem <CmdItem
key={emoji.shortcode} key={emoji.shortcode}
onClick={() => fireCmd({ onClick={() =>
fireCmd({
prefix: emPrefix, prefix: emPrefix,
result: emoji, result: emoji,
})} })
}
> >
<Text variant="b1">{renderEmoji(emoji)}</Text> <Text variant="b1">{renderEmoji(emoji)}</Text>
<Text variant="b2">{`:${emoji.shortcode}:`}</Text> <Text variant="b2">{`:${emoji.shortcode}:`}</Text>
@ -187,7 +189,10 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
}); });
}, },
'@': () => { '@': () => {
const members = mx.getRoom(roomId).getJoinedMembers().map((member) => ({ const members = mx
.getRoom(roomId)
.getJoinedMembers()
.map((member) => ({
name: member.name, name: member.name,
userId: member.userId.slice(1), userId: member.userId.slice(1),
})); }));
@ -277,9 +282,7 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
</div> </div>
<div className="cmd-bar__content"> <div className="cmd-bar__content">
<ScrollView horizontal vertical={false} invisible> <ScrollView horizontal vertical={false} invisible>
<div className="cmd-bar__content-suggestions"> <div className="cmd-bar__content-suggestions">{renderSuggestions(cmd, fireCmd)}</div>
{ renderSuggestions(cmd, fireCmd) }
</div>
</ScrollView> </ScrollView>
</div> </div>
</div> </div>

View file

@ -1,5 +1,5 @@
const cons = { const cons = {
version: '2.2.2', version: '2.2.3',
secretKey: { secretKey: {
ACCESS_TOKEN: 'cinny_access_token', ACCESS_TOKEN: 'cinny_access_token',
DEVICE_ID: 'cinny_device_id', DEVICE_ID: 'cinny_device_id',
@ -12,7 +12,13 @@ const cons = {
HOME: 'home', HOME: 'home',
DIRECTS: 'dm', DIRECTS: 'dm',
}, },
supportEventTypes: ['m.room.create', 'm.room.message', 'm.room.encrypted', 'm.room.member', 'm.sticker'], supportEventTypes: [
'm.room.create',
'm.room.message',
'm.room.encrypted',
'm.room.member',
'm.sticker',
],
notifs: { notifs: {
DEFAULT: 'default', DEFAULT: 'default',
ALL_MESSAGES: 'all_messages', ALL_MESSAGES: 'all_messages',

View file

@ -6,6 +6,8 @@ import parse from 'html-react-parser';
import twemoji from 'twemoji'; import twemoji from 'twemoji';
import { sanitizeText } from './sanitize'; import { sanitizeText } from './sanitize';
export const TWEMOJI_BASE_URL = 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/';
const Math = lazy(() => import('../app/atoms/math/Math')); const Math = lazy(() => import('../app/atoms/math/Math'));
const mathOptions = { const mathOptions = {
@ -38,11 +40,16 @@ const mathOptions = {
export function twemojify(text, opts, linkify = false, sanitize = true, maths = false) { export function twemojify(text, opts, linkify = false, sanitize = true, maths = false) {
if (typeof text !== 'string') return text; if (typeof text !== 'string') return text;
let content = text; let content = text;
const options = opts ?? { base: TWEMOJI_BASE_URL };
if (!options.base) {
options.base = TWEMOJI_BASE_URL;
}
if (sanitize) { if (sanitize) {
content = sanitizeText(content); content = sanitizeText(content);
} }
content = twemoji.parse(content, opts);
content = twemoji.parse(content, options);
if (linkify) { if (linkify) {
content = linkifyHtml(content, { content = linkifyHtml(content, {
target: '_blank', target: '_blank',

View file

@ -2,6 +2,7 @@ import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react'; import react from '@vitejs/plugin-react';
import { wasm } from '@rollup/plugin-wasm'; import { wasm } from '@rollup/plugin-wasm';
import { viteStaticCopy } from 'vite-plugin-static-copy'; import { viteStaticCopy } from 'vite-plugin-static-copy';
import { svgLoader } from './viteSvgLoader';
const copyFiles = { const copyFiles = {
targets: [ targets: [
@ -33,6 +34,7 @@ export default defineConfig({
}, },
plugins: [ plugins: [
viteStaticCopy(copyFiles), viteStaticCopy(copyFiles),
svgLoader(),
wasm(), wasm(),
react(), react(),
], ],

16
viteSvgLoader.ts Normal file
View file

@ -0,0 +1,16 @@
import svgToMiniDataURI from 'mini-svg-data-uri';
import type { Plugin } from 'rollup';
import fs from 'fs';
// TODO: remove this once https://github.com/vitejs/vite/pull/2909 gets merged
export const svgLoader = (): Plugin => ({
name: 'vite-svg-patch-plugin',
transform: (code, id) => {
if (id.endsWith('.svg')) {
const extractedSvg = fs.readFileSync(id, 'utf8');
const datauri = svgToMiniDataURI.toSrcset(extractedSvg);
return `export default "${datauri}"`;
}
return code;
},
});