visual improvements, remove various dependencies
This commit is contained in:
parent
e446fc47ce
commit
5bc5e3cbd2
32 changed files with 3228 additions and 5705 deletions
|
@ -1,6 +1,7 @@
|
||||||
{
|
{
|
||||||
"defaultHomeserver": 3,
|
"defaultHomeserver": 0,
|
||||||
"homeserverList": [
|
"homeserverList": [
|
||||||
|
"http://localhost:3000",
|
||||||
"converser.eu",
|
"converser.eu",
|
||||||
"envs.net",
|
"envs.net",
|
||||||
"halogen.city",
|
"halogen.city",
|
||||||
|
|
90
index.html
90
index.html
|
@ -1,28 +1,20 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Cinny</title>
|
<title>Cinny</title>
|
||||||
<meta name="name" content="Cinny" />
|
<meta name="name" content="Cinny" />
|
||||||
<meta name="author" content="Ajay Bura" />
|
<meta name="author" content="Ajay Bura" />
|
||||||
<meta
|
<meta name="description"
|
||||||
name="description"
|
content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source." />
|
||||||
content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source."
|
<meta name="keywords" content="cinny, cinnyapp, cinnychat, matrix, matrix client, matrix.org, element" />
|
||||||
/>
|
|
||||||
<meta
|
|
||||||
name="keywords"
|
|
||||||
content="cinny, cinnyapp, cinnychat, matrix, matrix client, matrix.org, element"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<meta property="og:title" content="Cinny" />
|
<meta property="og:title" content="Cinny" />
|
||||||
<meta property="og:url" content="https://cinny.in" />
|
<meta property="og:description"
|
||||||
<meta property="og:image" content="https://cinny.in/assets/favicon-48x48.png" />
|
content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source." />
|
||||||
<meta
|
|
||||||
property="og:description"
|
|
||||||
content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source."
|
|
||||||
/>
|
|
||||||
<meta name="theme-color" content="#000000" />
|
<meta name="theme-color" content="#000000" />
|
||||||
|
|
||||||
<link id="favicon" rel="shortcut icon" href="./public/favicon.ico" />
|
<link id="favicon" rel="shortcut icon" href="./public/favicon.ico" />
|
||||||
|
@ -34,58 +26,19 @@
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||||
|
|
||||||
<link
|
<link rel="apple-touch-icon" sizes="57x57" href="./public/res/apple/apple-touch-icon-57x57.png" />
|
||||||
rel="apple-touch-icon"
|
<link rel="apple-touch-icon" sizes="60x60" href="./public/res/apple/apple-touch-icon-60x60.png" />
|
||||||
sizes="57x57"
|
<link rel="apple-touch-icon" sizes="72x72" href="./public/res/apple/apple-touch-icon-72x72.png" />
|
||||||
href="./public/res/apple/apple-touch-icon-57x57.png"
|
<link rel="apple-touch-icon" sizes="76x76" href="./public/res/apple/apple-touch-icon-76x76.png" />
|
||||||
/>
|
<link rel="apple-touch-icon" sizes="114x114" href="./public/res/apple/apple-touch-icon-114x114.png" />
|
||||||
<link
|
<link rel="apple-touch-icon" sizes="120x120" href="./public/res/apple/apple-touch-icon-120x120.png" />
|
||||||
rel="apple-touch-icon"
|
<link rel="apple-touch-icon" sizes="144x144" href="./public/res/apple/apple-touch-icon-144x144.png" />
|
||||||
sizes="60x60"
|
<link rel="apple-touch-icon" sizes="152x152" href="./public/res/apple/apple-touch-icon-152x152.png" />
|
||||||
href="./public/res/apple/apple-touch-icon-60x60.png"
|
<link rel="apple-touch-icon" sizes="167x167" href="./public/res/apple/apple-touch-icon-167x167.png" />
|
||||||
/>
|
<link rel="apple-touch-icon" sizes="180x180" href="./public/res/apple/apple-touch-icon-180x180.png" />
|
||||||
<link
|
</head>
|
||||||
rel="apple-touch-icon"
|
|
||||||
sizes="72x72"
|
<body id="appBody">
|
||||||
href="./public/res/apple/apple-touch-icon-72x72.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="apple-touch-icon"
|
|
||||||
sizes="76x76"
|
|
||||||
href="./public/res/apple/apple-touch-icon-76x76.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="apple-touch-icon"
|
|
||||||
sizes="114x114"
|
|
||||||
href="./public/res/apple/apple-touch-icon-114x114.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="apple-touch-icon"
|
|
||||||
sizes="120x120"
|
|
||||||
href="./public/res/apple/apple-touch-icon-120x120.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="apple-touch-icon"
|
|
||||||
sizes="144x144"
|
|
||||||
href="./public/res/apple/apple-touch-icon-144x144.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="apple-touch-icon"
|
|
||||||
sizes="152x152"
|
|
||||||
href="./public/res/apple/apple-touch-icon-152x152.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="apple-touch-icon"
|
|
||||||
sizes="167x167"
|
|
||||||
href="./public/res/apple/apple-touch-icon-167x167.png"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="apple-touch-icon"
|
|
||||||
sizes="180x180"
|
|
||||||
href="./public/res/apple/apple-touch-icon-180x180.png"
|
|
||||||
/>
|
|
||||||
</head>
|
|
||||||
<body id="appBody">
|
|
||||||
<script>
|
<script>
|
||||||
window.global ||= window;
|
window.global ||= window;
|
||||||
</script>
|
</script>
|
||||||
|
@ -97,5 +50,6 @@
|
||||||
<source src="./public/sound/invite.ogg" type="audio/ogg" />
|
<source src="./public/sound/invite.ogg" type="audio/ogg" />
|
||||||
</audio>
|
</audio>
|
||||||
<script type="module" src="./src/index.jsx"></script>
|
<script type="module" src="./src/index.jsx"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
5331
package-lock.json
generated
5331
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -9,6 +9,7 @@
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "vite",
|
"start": "vite",
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
"lint": "yarn check:eslint && yarn check:prettier",
|
"lint": "yarn check:eslint && yarn check:prettier",
|
||||||
"check:eslint": "eslint src/*",
|
"check:eslint": "eslint src/*",
|
||||||
"check:prettier": "prettier --check .",
|
"check:prettier": "prettier --check .",
|
||||||
|
@ -32,7 +33,6 @@
|
||||||
"flux": "4.0.3",
|
"flux": "4.0.3",
|
||||||
"formik": "2.2.9",
|
"formik": "2.2.9",
|
||||||
"html-react-parser": "3.0.4",
|
"html-react-parser": "3.0.4",
|
||||||
"katex": "0.16.4",
|
|
||||||
"linkify-html": "4.0.2",
|
"linkify-html": "4.0.2",
|
||||||
"linkifyjs": "4.0.2",
|
"linkifyjs": "4.0.2",
|
||||||
"matrix-js-sdk": "22.0.0",
|
"matrix-js-sdk": "22.0.0",
|
||||||
|
@ -43,11 +43,9 @@
|
||||||
"react-dnd": "15.1.2",
|
"react-dnd": "15.1.2",
|
||||||
"react-dnd-html5-backend": "15.1.3",
|
"react-dnd-html5-backend": "15.1.3",
|
||||||
"react-dom": "17.0.2",
|
"react-dom": "17.0.2",
|
||||||
"react-google-recaptcha": "2.1.0",
|
|
||||||
"react-modal": "3.16.1",
|
"react-modal": "3.16.1",
|
||||||
"sanitize-html": "2.8.0",
|
"sanitize-html": "2.8.0",
|
||||||
"tippy.js": "6.3.7",
|
"tippy.js": "6.3.7"
|
||||||
"twemoji": "14.0.2"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
|
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
|
||||||
|
|
|
@ -40,7 +40,7 @@ const Avatar = React.forwardRef(({
|
||||||
iconSrc !== null
|
iconSrc !== null
|
||||||
? <RawIcon size={size} src={iconSrc} color={iconColor} />
|
? <RawIcon size={size} src={iconSrc} color={iconColor} />
|
||||||
: text !== null && (
|
: text !== null && (
|
||||||
<Text variant={textSize} primary>
|
<Text variant={textSize} monospace>
|
||||||
{twemojify(avatarInitials(text))}
|
{twemojify(avatarInitials(text))}
|
||||||
</Text>
|
</Text>
|
||||||
)
|
)
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
width: 42px;
|
width: 42px;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
border-radius: var(--bo-radius);
|
border-radius: 50%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&__large {
|
&__large {
|
||||||
|
|
|
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
|
||||||
import './ContextMenu.scss';
|
import './ContextMenu.scss';
|
||||||
|
|
||||||
import Tippy from '@tippyjs/react';
|
import Tippy from '@tippyjs/react';
|
||||||
import 'tippy.js/animations/scale-extreme.css';
|
import 'tippy.js/animations/scale-subtle.css';
|
||||||
|
|
||||||
import Text from '../text/Text';
|
import Text from '../text/Text';
|
||||||
import Button from '../button/Button';
|
import Button from '../button/Button';
|
||||||
|
@ -22,7 +22,7 @@ function ContextMenu({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tippy
|
<Tippy
|
||||||
animation="scale-extreme"
|
animation="scale-subtle"
|
||||||
className="context-menu"
|
className="context-menu"
|
||||||
visible={isVisible}
|
visible={isVisible}
|
||||||
onClickOutside={hideMenu}
|
onClickOutside={hideMenu}
|
||||||
|
@ -31,7 +31,7 @@ function ContextMenu({
|
||||||
interactive
|
interactive
|
||||||
arrow={false}
|
arrow={false}
|
||||||
maxWidth={maxWidth}
|
maxWidth={maxWidth}
|
||||||
duration={200}
|
duration={150}
|
||||||
>
|
>
|
||||||
{render(isVisible ? hideMenu : showMenu)}
|
{render(isVisible ? hideMenu : showMenu)}
|
||||||
</Tippy>
|
</Tippy>
|
||||||
|
|
|
@ -1,33 +0,0 @@
|
||||||
import React, { useEffect, useRef } from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import './Math.scss';
|
|
||||||
|
|
||||||
import katex from 'katex';
|
|
||||||
import 'katex/dist/katex.min.css';
|
|
||||||
|
|
||||||
import 'katex/dist/contrib/copy-tex';
|
|
||||||
|
|
||||||
const Math = React.memo(({
|
|
||||||
content, throwOnError, errorColor, displayMode,
|
|
||||||
}) => {
|
|
||||||
const ref = useRef(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
katex.render(content, ref.current, { throwOnError, errorColor, displayMode });
|
|
||||||
}, [content, throwOnError, errorColor, displayMode]);
|
|
||||||
|
|
||||||
return <span ref={ref} />;
|
|
||||||
});
|
|
||||||
Math.defaultProps = {
|
|
||||||
throwOnError: null,
|
|
||||||
errorColor: null,
|
|
||||||
displayMode: null,
|
|
||||||
};
|
|
||||||
Math.propTypes = {
|
|
||||||
content: PropTypes.string.isRequired,
|
|
||||||
throwOnError: PropTypes.bool,
|
|
||||||
errorColor: PropTypes.string,
|
|
||||||
displayMode: PropTypes.bool,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Math;
|
|
|
@ -1,3 +0,0 @@
|
||||||
.katex-display {
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
|
@ -39,20 +39,22 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.ReactModal__Overlay {
|
.ReactModal__Overlay {
|
||||||
animation: raw-modal--overlay 150ms;
|
animation: raw-modal--overlay 210ms;
|
||||||
|
animation-timing-function: cubic-bezier(0.77,0,0.18,1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ReactModal__Content {
|
.ReactModal__Content {
|
||||||
animation: raw-modal--content 150ms;
|
animation: raw-modal--content 210ms;
|
||||||
|
animation-timing-function: cubic-bezier(0.77,0,0.18,1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes raw-modal--content {
|
@keyframes raw-modal--content {
|
||||||
0% {
|
0% {
|
||||||
transform: translateY(100px);
|
transform: scale(0.90);
|
||||||
opacity: .5;
|
opacity: .4;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
transform: translateY(0);
|
transform: scale(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,13 +4,14 @@ import './Text.scss';
|
||||||
|
|
||||||
function Text({
|
function Text({
|
||||||
className, style, variant, weight,
|
className, style, variant, weight,
|
||||||
primary, span, children,
|
primary, monospace, span, children,
|
||||||
}) {
|
}) {
|
||||||
const classes = [];
|
const classes = [];
|
||||||
if (className) classes.push(className);
|
if (className) classes.push(className);
|
||||||
|
|
||||||
classes.push(`text text-${variant} text-${weight}`);
|
classes.push(`text text-${variant} text-${weight}`);
|
||||||
if (primary) classes.push('font-primary');
|
if (primary) classes.push('font-primary');
|
||||||
|
if (monospace) classes.push('font-monospace');
|
||||||
|
|
||||||
const textClass = classes.join(' ');
|
const textClass = classes.join(' ');
|
||||||
if (span) return <span className={textClass} style={style}>{ children }</span>;
|
if (span) return <span className={textClass} style={style}>{ children }</span>;
|
||||||
|
@ -26,6 +27,7 @@ Text.defaultProps = {
|
||||||
variant: 'b1',
|
variant: 'b1',
|
||||||
weight: 'normal',
|
weight: 'normal',
|
||||||
primary: false,
|
primary: false,
|
||||||
|
monospace: false,
|
||||||
span: false,
|
span: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -35,6 +37,7 @@ Text.propTypes = {
|
||||||
variant: PropTypes.oneOf(['h1', 'h2', 's1', 'b1', 'b2', 'b3']),
|
variant: PropTypes.oneOf(['h1', 'h2', 's1', 'b1', 'b2', 'b3']),
|
||||||
weight: PropTypes.oneOf(['light', 'normal', 'medium', 'bold']),
|
weight: PropTypes.oneOf(['light', 'normal', 'medium', 'bold']),
|
||||||
primary: PropTypes.bool,
|
primary: PropTypes.bool,
|
||||||
|
monospace: PropTypes.bool,
|
||||||
span: PropTypes.bool,
|
span: PropTypes.bool,
|
||||||
children: PropTypes.node.isRequired,
|
children: PropTypes.node.isRequired,
|
||||||
};
|
};
|
||||||
|
|
|
@ -6,29 +6,24 @@ import { isInSameDay } from '../../../util/common';
|
||||||
|
|
||||||
function Time({ timestamp, fullTime }) {
|
function Time({ timestamp, fullTime }) {
|
||||||
const date = new Date(timestamp);
|
const date = new Date(timestamp);
|
||||||
|
let formattedDate;
|
||||||
|
|
||||||
const formattedFullTime = dateFormat(date, 'dd mmmm yyyy, hh:MM TT');
|
if (fullTime) {
|
||||||
let formattedDate = formattedFullTime;
|
formattedDate = formattedFullTime = dateFormat(date, 'dd mmmm yyyy, hh:MM TT')
|
||||||
|
} else {
|
||||||
if (!fullTime) {
|
|
||||||
const compareDate = new Date();
|
const compareDate = new Date();
|
||||||
const isToday = isInSameDay(date, compareDate);
|
const isToday = isInSameDay(date, compareDate);
|
||||||
compareDate.setDate(compareDate.getDate() - 1);
|
compareDate.setDate(compareDate.getDate() - 1);
|
||||||
const isYesterday = isInSameDay(date, compareDate);
|
const isYesterday = isInSameDay(date, compareDate);
|
||||||
|
|
||||||
formattedDate = dateFormat(date, isToday || isYesterday ? 'hh:MM TT' : 'dd/mm/yyyy');
|
formattedDate = dateFormat(date, isToday || isYesterday ? 'hh:MM TT' : 'dd/mm/yyyy hh:MM TT');
|
||||||
if (isYesterday) {
|
if (isYesterday) {
|
||||||
formattedDate = `Yesterday, ${formattedDate}`;
|
formattedDate = `Yesterday, ${formattedDate}`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<time
|
<time dateTime={date.toISOString()}>{formattedDate}</time>
|
||||||
dateTime={date.toISOString()}
|
|
||||||
title={formattedFullTime}
|
|
||||||
>
|
|
||||||
{formattedDate}
|
|
||||||
</time>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,7 @@ import './Tooltip.scss';
|
||||||
import Tippy from '@tippyjs/react';
|
import Tippy from '@tippyjs/react';
|
||||||
|
|
||||||
function Tooltip({
|
function Tooltip({
|
||||||
className, placement, content, delay, children,
|
className, placement, content, children,
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<Tippy
|
<Tippy
|
||||||
|
@ -14,8 +14,8 @@ function Tooltip({
|
||||||
arrow={false}
|
arrow={false}
|
||||||
maxWidth={250}
|
maxWidth={250}
|
||||||
placement={placement}
|
placement={placement}
|
||||||
delay={delay}
|
duration={[75, 0]}
|
||||||
duration={[100, 0]}
|
animation="scale-subtle"
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</Tippy>
|
</Tippy>
|
||||||
|
@ -25,14 +25,12 @@ function Tooltip({
|
||||||
Tooltip.defaultProps = {
|
Tooltip.defaultProps = {
|
||||||
placement: 'top',
|
placement: 'top',
|
||||||
className: '',
|
className: '',
|
||||||
delay: [200, 0],
|
|
||||||
};
|
};
|
||||||
|
|
||||||
Tooltip.propTypes = {
|
Tooltip.propTypes = {
|
||||||
className: PropTypes.string,
|
className: PropTypes.string,
|
||||||
placement: PropTypes.string,
|
placement: PropTypes.string,
|
||||||
content: PropTypes.node.isRequired,
|
content: PropTypes.node.isRequired,
|
||||||
delay: PropTypes.arrayOf(PropTypes.number),
|
|
||||||
children: PropTypes.node.isRequired,
|
children: PropTypes.node.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -85,12 +85,10 @@ const MessageHeader = React.memo(({
|
||||||
<span>{twemojify(username)}</span>
|
<span>{twemojify(username)}</span>
|
||||||
<span>{twemojify(userId)}</span>
|
<span>{twemojify(userId)}</span>
|
||||||
</Text>
|
</Text>
|
||||||
<div className="message__time">
|
<Text className="message__time" variant="b3">
|
||||||
<Text variant="b3">
|
|
||||||
<Time timestamp={timestamp} fullTime={fullTime} />
|
<Time timestamp={timestamp} fullTime={fullTime} />
|
||||||
</Text>
|
</Text>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
));
|
));
|
||||||
MessageHeader.defaultProps = {
|
MessageHeader.defaultProps = {
|
||||||
fullTime: false,
|
fullTime: false,
|
||||||
|
|
|
@ -108,7 +108,7 @@
|
||||||
& .message__profile {
|
& .message__profile {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
color: var(--tc-surface-high);
|
color: var(--tc-surface-high);
|
||||||
@include dir.side(margin, 0, var(--sp-tight));
|
@include dir.side(margin, 0, var(--sp-ultra-tight));
|
||||||
|
|
||||||
& > span {
|
& > span {
|
||||||
@extend .cp-txt__ellipsis;
|
@extend .cp-txt__ellipsis;
|
||||||
|
@ -128,14 +128,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
& .message__time {
|
& .message__time {
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
& > .text {
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
color: var(--tc-surface-low);
|
color: var(--tc-surface-low);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.message__reply {
|
.message__reply {
|
||||||
&-wrapper {
|
&-wrapper {
|
||||||
|
|
|
@ -1,14 +1,15 @@
|
||||||
@use '../../partials/text';
|
@use '../../partials/text';
|
||||||
|
|
||||||
.people-selector {
|
.people-selector {
|
||||||
width: 100%;
|
|
||||||
padding: var(--sp-extra-tight) var(--sp-normal);
|
padding: var(--sp-extra-tight) var(--sp-normal);
|
||||||
|
flex-grow: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&__container {
|
&__container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
margin: var(--sp-extra-tight);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (hover: hover) {
|
@media (hover: hover) {
|
||||||
|
|
|
@ -16,7 +16,8 @@
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
& .segmented-controls {
|
& .segmented-controls {
|
||||||
@include dir.side(margin, 0, var(--sp-normal));
|
margin: var(--sp-extra-tight);
|
||||||
|
flex-grow: 1;
|
||||||
& > button {
|
& > button {
|
||||||
padding: var(--sp-ultra-tight) 0;
|
padding: var(--sp-ultra-tight) 0;
|
||||||
}
|
}
|
||||||
|
|
|
@ -54,9 +54,6 @@
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
& .message__time {
|
|
||||||
flex: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -4,8 +4,7 @@ import React, { useState, useEffect, useRef } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import './EmojiBoard.scss';
|
import './EmojiBoard.scss';
|
||||||
|
|
||||||
import parse from 'html-react-parser';
|
import parse from "html-react-parser";
|
||||||
import twemoji from 'twemoji';
|
|
||||||
import { emojiGroups, emojis } from './emoji';
|
import { emojiGroups, emojis } from './emoji';
|
||||||
import { getRelevantPacks } from './custom-emoji';
|
import { getRelevantPacks } from './custom-emoji';
|
||||||
import initMatrix from '../../../client/initMatrix';
|
import initMatrix from '../../../client/initMatrix';
|
||||||
|
@ -13,7 +12,6 @@ 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';
|
||||||
|
@ -49,17 +47,7 @@ const EmojiGroup = React.memo(({ name, groupEmojis }) => {
|
||||||
<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(
|
<span className="emoji" unicode={emoji.unicode} shortcodes={emoji.shortcode} data-mx-emoticon={emoji.mxc}>{ emoji.unicode }</span>
|
||||||
twemoji.parse(emoji.unicode, {
|
|
||||||
attributes: () => ({
|
|
||||||
unicode: emoji.unicode,
|
|
||||||
shortcodes: emoji.shortcodes?.toString(),
|
|
||||||
hexcode: emoji.hexcode,
|
|
||||||
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
|
||||||
|
@ -187,15 +175,6 @@ function EmojiBoard({ onSelect, searchRef }) {
|
||||||
const { shortcodes, unicode } = getEmojiDataFromTarget(emoji);
|
const { shortcodes, unicode } = getEmojiDataFromTarget(emoji);
|
||||||
const { src } = e.target;
|
const { src } = e.target;
|
||||||
|
|
||||||
if (typeof shortcodes === 'undefined') {
|
|
||||||
searchRef.current.placeholder = 'Search';
|
|
||||||
setEmojiInfo({
|
|
||||||
unicode: '🙂',
|
|
||||||
shortcode: 'slight_smile',
|
|
||||||
src: 'https://twemoji.maxcdn.com/v/13.1.0/72x72/1f642.png',
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (searchRef.current.placeholder === shortcodes[0]) return;
|
if (searchRef.current.placeholder === shortcodes[0]) return;
|
||||||
searchRef.current.setAttribute('placeholder', shortcodes[0]);
|
searchRef.current.setAttribute('placeholder', shortcodes[0]);
|
||||||
setEmojiInfo({ shortcode: shortcodes[0], src, unicode });
|
setEmojiInfo({ shortcode: shortcodes[0], src, unicode });
|
||||||
|
@ -340,7 +319,7 @@ function EmojiBoard({ onSelect, searchRef }) {
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
</div>
|
</div>
|
||||||
<div ref={emojiInfo} className="emoji-board__content__info">
|
<div ref={emojiInfo} className="emoji-board__content__info">
|
||||||
<div>{parse(twemoji.parse('🙂', { base: TWEMOJI_BASE_URL }))}</div>
|
<div><span className="emoji" unicode="🙂" shortcodes="slight_smile">🙂</span></div>
|
||||||
<Text>:slight_smile:</Text>
|
<Text>:slight_smile:</Text>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -48,7 +48,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
& .room-selector {
|
& .room-selector {
|
||||||
width: calc(100% - var(--sp-extra-tight));
|
margin: var(--sp-ultra-tight);
|
||||||
@include dir.side(margin, auto, 0);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -62,7 +62,7 @@
|
||||||
.sidebar__cross-signin-alert .avatar-container {
|
.sidebar__cross-signin-alert .avatar-container {
|
||||||
box-shadow: var(--bs-danger-border);
|
box-shadow: var(--bs-danger-border);
|
||||||
animation-name: pushRight;
|
animation-name: pushRight;
|
||||||
animation-duration: 400ms;
|
animation-duration: 250ms;
|
||||||
animation-iteration-count: infinite;
|
animation-iteration-count: infinite;
|
||||||
animation-direction: alternate;
|
animation-direction: alternate;
|
||||||
}
|
}
|
||||||
|
|
|
@ -68,15 +68,13 @@
|
||||||
& .people-selector {
|
& .people-selector {
|
||||||
padding: var(--sp-extra-tight);
|
padding: var(--sp-extra-tight);
|
||||||
border-radius: var(--bo-radius);
|
border-radius: var(--bo-radius);
|
||||||
&__container {
|
|
||||||
@include dir.side(margin, var(--sp-extra-tight), 0);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
& .segmented-controls {
|
& .segmented-controls {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: var(--sp-extra-tight);
|
margin: var(--sp-extra-tight);
|
||||||
@include dir.side(margin, var(--sp-extra-tight), 0);
|
margin-top: 0;
|
||||||
|
margin-bottom: var(--sp-tight);
|
||||||
}
|
}
|
||||||
& .segment-btn {
|
& .segment-btn {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
|
@ -40,6 +40,5 @@
|
||||||
min-height: 85px;
|
min-height: 85px;
|
||||||
position: relative;
|
position: relative;
|
||||||
background: var(--bg-surface);
|
background: var(--bg-surface);
|
||||||
border-top: 1px solid var(--bg-surface-border);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -2,10 +2,8 @@
|
||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import './RoomViewCmdBar.scss';
|
import './RoomViewCmdBar.scss';
|
||||||
import parse from 'html-react-parser';
|
|
||||||
import twemoji from 'twemoji';
|
|
||||||
|
|
||||||
import { twemojify, TWEMOJI_BASE_URL } from '../../../util/twemojify';
|
import { twemojify } 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';
|
||||||
|
@ -51,39 +49,6 @@ function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
|
||||||
function renderEmojiSuggestion(emPrefix, emos) {
|
function renderEmojiSuggestion(emPrefix, emos) {
|
||||||
const mx = initMatrix.matrixClient;
|
const mx = initMatrix.matrixClient;
|
||||||
|
|
||||||
// Renders a small Twemoji
|
|
||||||
function renderTwemoji(emoji) {
|
|
||||||
return parse(
|
|
||||||
twemoji.parse(emoji.unicode, {
|
|
||||||
attributes: () => ({
|
|
||||||
unicode: emoji.unicode,
|
|
||||||
shortcodes: emoji.shortcodes?.toString(),
|
|
||||||
}),
|
|
||||||
base: TWEMOJI_BASE_URL,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Render a custom emoji
|
|
||||||
function renderCustomEmoji(emoji) {
|
|
||||||
return (
|
|
||||||
<img
|
|
||||||
className="emoji"
|
|
||||||
src={mx.mxcUrlToHttp(emoji.mxc)}
|
|
||||||
data-mx-emoticon=""
|
|
||||||
alt={`:${emoji.shortcode}:`}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Dynamically render either a custom emoji or twemoji based on what the input is
|
|
||||||
function renderEmoji(emoji) {
|
|
||||||
if (emoji.mxc) {
|
|
||||||
return renderCustomEmoji(emoji);
|
|
||||||
}
|
|
||||||
return renderTwemoji(emoji);
|
|
||||||
}
|
|
||||||
|
|
||||||
return emos.map((emoji) => (
|
return emos.map((emoji) => (
|
||||||
<CmdItem
|
<CmdItem
|
||||||
key={emoji.shortcode}
|
key={emoji.shortcode}
|
||||||
|
@ -94,7 +59,7 @@ function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Text variant="b1">{renderEmoji(emoji)}</Text>
|
<Text variant="b1">{emoji}</Text>
|
||||||
<Text variant="b2">{`:${emoji.shortcode}:`}</Text>
|
<Text variant="b2">{`:${emoji.shortcode}:`}</Text>
|
||||||
</CmdItem>
|
</CmdItem>
|
||||||
));
|
));
|
||||||
|
|
|
@ -361,12 +361,12 @@ function RoomViewInput({
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className={`room-input__option-container${attachment === null ? '' : ' room-attachment__option'}`}>
|
|
||||||
<input onChange={uploadFileChange} style={{ display: 'none' }} ref={uploadInputRef} type="file" />
|
|
||||||
<IconButton onClick={handleUploadClick} tooltip={attachment === null ? 'Upload' : 'Cancel'} src={CirclePlusIC} />
|
|
||||||
</div>
|
|
||||||
<div ref={inputBaseRef} className="room-input__input-container">
|
<div ref={inputBaseRef} className="room-input__input-container">
|
||||||
{roomTimeline.isEncrypted() && <RawIcon size="extra-small" src={ShieldIC} />}
|
{roomTimeline.isEncrypted() && <RawIcon size="extra-small" src={ShieldIC} />}
|
||||||
|
<div className={`room-input__option-container${attachment === null ? '' : ' room-attachment__option'}`}>
|
||||||
|
<input onChange={uploadFileChange} style={{ display: 'none' }} ref={uploadInputRef} type="file" />
|
||||||
|
<IconButton size="small" onClick={handleUploadClick} tooltip={attachment === null ? 'Upload' : 'Cancel'} src={CirclePlusIC} />
|
||||||
|
</div>
|
||||||
<ScrollView autoHide>
|
<ScrollView autoHide>
|
||||||
<Text className="room-input__textarea-wrapper">
|
<Text className="room-input__textarea-wrapper">
|
||||||
<TextareaAutosize
|
<TextareaAutosize
|
||||||
|
@ -380,7 +380,6 @@ function RoomViewInput({
|
||||||
/>
|
/>
|
||||||
</Text>
|
</Text>
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
</div>
|
|
||||||
<div ref={rightOptionsRef} className="room-input__option-container">
|
<div ref={rightOptionsRef} className="room-input__option-container">
|
||||||
<IconButton
|
<IconButton
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
|
@ -404,6 +403,7 @@ function RoomViewInput({
|
||||||
}}
|
}}
|
||||||
tooltip="Sticker"
|
tooltip="Sticker"
|
||||||
src={StickerIC}
|
src={StickerIC}
|
||||||
|
size="small"
|
||||||
/>
|
/>
|
||||||
<IconButton
|
<IconButton
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
|
@ -414,8 +414,9 @@ function RoomViewInput({
|
||||||
}}
|
}}
|
||||||
tooltip="Emoji"
|
tooltip="Emoji"
|
||||||
src={EmojiIC}
|
src={EmojiIC}
|
||||||
|
size="small"
|
||||||
/>
|
/>
|
||||||
<IconButton onClick={sendMessage} tooltip="Send" src={SendIC} />
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,9 +1,10 @@
|
||||||
@use '../../partials/dir';
|
@use '../../partials/dir';
|
||||||
|
|
||||||
.room-input {
|
.room-input {
|
||||||
padding: var(--sp-extra-tight) calc(var(--sp-normal) - 2px);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
min-height: 56px;
|
min-height: 56px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
&__alert {
|
&__alert {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
@ -21,6 +22,7 @@
|
||||||
background-color: var(--bg-surface-low);
|
background-color: var(--bg-surface-low);
|
||||||
box-shadow: var(--bs-surface-border);
|
box-shadow: var(--bs-surface-border);
|
||||||
border-radius: var(--bo-radius);
|
border-radius: var(--bo-radius);
|
||||||
|
padding: var(--sp-ultra-tight);
|
||||||
|
|
||||||
& > .ic-raw {
|
& > .ic-raw {
|
||||||
transform: scale(0.8);
|
transform: scale(0.8);
|
||||||
|
@ -38,6 +40,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&__textarea-wrapper {
|
&__textarea-wrapper {
|
||||||
|
margin-left: var(--sp-extra-tight);
|
||||||
|
margin-right: var(--sp-extra-tight);
|
||||||
min-height: 40px;
|
min-height: 40px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
@ -2,7 +2,6 @@
|
||||||
import React, { useState, useEffect, useRef } from 'react';
|
import React, { useState, useEffect, useRef } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import './Auth.scss';
|
import './Auth.scss';
|
||||||
import ReCAPTCHA from 'react-google-recaptcha';
|
|
||||||
import { Formik } from 'formik';
|
import { Formik } from 'formik';
|
||||||
|
|
||||||
import * as auth from '../../../client/action/auth';
|
import * as auth from '../../../client/action/auth';
|
||||||
|
@ -375,8 +374,7 @@ function Register({ registerInfo, loginFlow, baseUrl }) {
|
||||||
const d = await auth.completeRegisterStage(baseUrl, username, password, { session });
|
const d = await auth.completeRegisterStage(baseUrl, username, password, { session });
|
||||||
|
|
||||||
if (isRecaptcha && !d.completed.includes('m.login.recaptcha')) {
|
if (isRecaptcha && !d.completed.includes('m.login.recaptcha')) {
|
||||||
const sitekey = params['m.login.recaptcha'].public_key;
|
setProcess({ isLoading: false, error: 'm.login.recaptcha is not supported.' });
|
||||||
setProcess({ type: 'm.login.recaptcha', sitekey });
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (isTerms && !d.completed.includes('m.login.terms')) {
|
if (isTerms && !d.completed.includes('m.login.terms')) {
|
||||||
|
@ -400,17 +398,6 @@ function Register({ registerInfo, loginFlow, baseUrl }) {
|
||||||
asyncProcess();
|
asyncProcess();
|
||||||
}, [process]);
|
}, [process]);
|
||||||
|
|
||||||
const handleRecaptcha = async (value) => {
|
|
||||||
if (typeof value !== 'string') return;
|
|
||||||
const [username, password] = getInputs();
|
|
||||||
const d = await auth.completeRegisterStage(baseUrl, username, password, {
|
|
||||||
type: 'm.login.recaptcha',
|
|
||||||
response: value,
|
|
||||||
session,
|
|
||||||
});
|
|
||||||
if (d.done) refreshWindow();
|
|
||||||
else setProcess({ type: 'processing', message: 'Registration in progress...' });
|
|
||||||
};
|
|
||||||
const handleTerms = async () => {
|
const handleTerms = async () => {
|
||||||
const [username, password] = getInputs();
|
const [username, password] = getInputs();
|
||||||
const d = await auth.completeRegisterStage(baseUrl, username, password, {
|
const d = await auth.completeRegisterStage(baseUrl, username, password, {
|
||||||
|
@ -435,7 +422,6 @@ function Register({ registerInfo, loginFlow, baseUrl }) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{process.type === 'processing' && <LoadingScreen message={process.message} />}
|
{process.type === 'processing' && <LoadingScreen message={process.message} />}
|
||||||
{process.type === 'm.login.recaptcha' && <Recaptcha message="Please check the box below to proceed." sitekey={process.sitekey} onChange={handleRecaptcha} />}
|
|
||||||
{process.type === 'm.login.terms' && <Terms url={process.url} onSubmit={handleTerms} />}
|
{process.type === 'm.login.terms' && <Terms url={process.url} onSubmit={handleTerms} />}
|
||||||
{process.type === 'm.login.email.identity' && <EmailVerify email={process.email} onContinue={handleEmailVerify} />}
|
{process.type === 'm.login.email.identity' && <EmailVerify email={process.email} onContinue={handleEmailVerify} />}
|
||||||
<div className="auth-form__heading">
|
<div className="auth-form__heading">
|
||||||
|
@ -607,22 +593,6 @@ LoadingScreen.propTypes = {
|
||||||
message: PropTypes.string.isRequired,
|
message: PropTypes.string.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
function Recaptcha({ message, sitekey, onChange }) {
|
|
||||||
return (
|
|
||||||
<ProcessWrapper>
|
|
||||||
<div style={{ marginBottom: 'var(--sp-normal)' }}>
|
|
||||||
<Text variant="s1" weight="medium">{message}</Text>
|
|
||||||
</div>
|
|
||||||
<ReCAPTCHA sitekey={sitekey} onChange={onChange} />
|
|
||||||
</ProcessWrapper>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Recaptcha.propTypes = {
|
|
||||||
message: PropTypes.string.isRequired,
|
|
||||||
sitekey: PropTypes.string.isRequired,
|
|
||||||
onChange: PropTypes.func.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
function Terms({ url, onSubmit }) {
|
function Terms({ url, onSubmit }) {
|
||||||
return (
|
return (
|
||||||
<ProcessWrapper>
|
<ProcessWrapper>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import * as sdk from 'matrix-js-sdk';
|
import { createClient } from 'matrix-js-sdk';
|
||||||
import cons from '../state/cons';
|
import cons from '../state/cons';
|
||||||
|
|
||||||
function updateLocalStore(accessToken, deviceId, userId, baseUrl) {
|
function updateLocalStore(accessToken, deviceId, userId, baseUrl) {
|
||||||
|
@ -9,7 +9,7 @@ function updateLocalStore(accessToken, deviceId, userId, baseUrl) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function createTemporaryClient(baseUrl) {
|
function createTemporaryClient(baseUrl) {
|
||||||
return sdk.createClient({ baseUrl });
|
return createClient({ baseUrl });
|
||||||
}
|
}
|
||||||
|
|
||||||
async function startSsoLogin(baseUrl, type, idpId) {
|
async function startSsoLogin(baseUrl, type, idpId) {
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
import EventEmitter from 'events';
|
import EventEmitter from 'events';
|
||||||
import * as sdk from 'matrix-js-sdk';
|
|
||||||
import Olm from '@matrix-org/olm';
|
import Olm from '@matrix-org/olm';
|
||||||
// import { logger } from 'matrix-js-sdk/lib/logger';
|
|
||||||
|
|
||||||
import { secret } from './state/auth';
|
import { secret } from './state/auth';
|
||||||
import RoomList from './state/RoomList';
|
import RoomList from './state/RoomList';
|
||||||
|
@ -10,11 +8,10 @@ import RoomsInput from './state/RoomsInput';
|
||||||
import Notifications from './state/Notifications';
|
import Notifications from './state/Notifications';
|
||||||
import { cryptoCallbacks } from './state/secretStorageKeys';
|
import { cryptoCallbacks } from './state/secretStorageKeys';
|
||||||
import navigation from './state/navigation';
|
import navigation from './state/navigation';
|
||||||
|
import { createClient, IndexedDBCryptoStore, IndexedDBStore } from 'matrix-js-sdk';
|
||||||
|
|
||||||
global.Olm = Olm;
|
global.Olm = Olm;
|
||||||
|
|
||||||
// logger.disableAll();
|
|
||||||
|
|
||||||
class InitMatrix extends EventEmitter {
|
class InitMatrix extends EventEmitter {
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
|
@ -29,19 +26,19 @@ class InitMatrix extends EventEmitter {
|
||||||
}
|
}
|
||||||
|
|
||||||
async startClient() {
|
async startClient() {
|
||||||
const indexedDBStore = new sdk.IndexedDBStore({
|
const indexedDBStore = new IndexedDBStore({
|
||||||
indexedDB: global.indexedDB,
|
indexedDB: global.indexedDB,
|
||||||
localStorage: global.localStorage,
|
localStorage: global.localStorage,
|
||||||
dbName: 'web-sync-store',
|
dbName: 'web-sync-store',
|
||||||
});
|
});
|
||||||
await indexedDBStore.startup();
|
await indexedDBStore.startup();
|
||||||
|
|
||||||
this.matrixClient = sdk.createClient({
|
this.matrixClient = createClient({
|
||||||
baseUrl: secret.baseUrl,
|
baseUrl: secret.baseUrl,
|
||||||
accessToken: secret.accessToken,
|
accessToken: secret.accessToken,
|
||||||
userId: secret.userId,
|
userId: secret.userId,
|
||||||
store: indexedDBStore,
|
store: indexedDBStore,
|
||||||
cryptoStore: new sdk.IndexedDBCryptoStore(global.indexedDB, 'crypto-store'),
|
cryptoStore: new IndexedDBCryptoStore(global.indexedDB, 'crypto-store'),
|
||||||
deviceId: secret.deviceId,
|
deviceId: secret.deviceId,
|
||||||
timelineSupport: true,
|
timelineSupport: true,
|
||||||
cryptoCallbacks,
|
cryptoCallbacks,
|
||||||
|
|
|
@ -194,6 +194,7 @@
|
||||||
|
|
||||||
--font-primary: 'Roboto', sans-serif;
|
--font-primary: 'Roboto', sans-serif;
|
||||||
--font-secondary: 'Roboto', sans-serif;
|
--font-secondary: 'Roboto', sans-serif;
|
||||||
|
--font-monospace: monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -331,6 +332,10 @@
|
||||||
--ic-surface-low: rgba(255, 251, 222, 64%);
|
--ic-surface-low: rgba(255, 251, 222, 64%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.font-monospace {
|
||||||
|
font-family: var(--font-monospace);
|
||||||
|
}
|
||||||
|
|
||||||
.font-primary {
|
.font-primary {
|
||||||
font-family: var(--font-primary);
|
font-family: var(--font-primary);
|
||||||
|
|
||||||
|
|
|
@ -1,60 +1,20 @@
|
||||||
/* eslint-disable import/prefer-default-export */
|
|
||||||
import React, { lazy, Suspense } from 'react';
|
|
||||||
|
|
||||||
import linkifyHtml from 'linkify-html';
|
import linkifyHtml from 'linkify-html';
|
||||||
import parse from 'html-react-parser';
|
import parse from 'html-react-parser';
|
||||||
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/';
|
export function twemojify(text, _opts=null, linkify=false, sanitize=true, _maths=false) {
|
||||||
|
|
||||||
const Math = lazy(() => import('../app/atoms/math/Math'));
|
|
||||||
|
|
||||||
const mathOptions = {
|
|
||||||
replace: (node) => {
|
|
||||||
const maths = node.attribs?.['data-mx-maths'];
|
|
||||||
if (maths) {
|
|
||||||
return (
|
|
||||||
<Suspense fallback={<code>{maths}</code>}>
|
|
||||||
<Math
|
|
||||||
content={maths}
|
|
||||||
throwOnError={false}
|
|
||||||
errorColor="var(--tc-danger-normal)"
|
|
||||||
displayMode={node.name === 'div'}
|
|
||||||
/>
|
|
||||||
</Suspense>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {string} text - text to twemojify
|
|
||||||
* @param {object|undefined} opts - options for tweomoji.parse
|
|
||||||
* @param {boolean} [linkify=false] - convert links to html tags (default: false)
|
|
||||||
* @param {boolean} [sanitize=true] - sanitize html text (default: true)
|
|
||||||
* @param {boolean} [maths=false] - render maths (default: false)
|
|
||||||
* @returns React component
|
|
||||||
*/
|
|
||||||
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, options);
|
|
||||||
if (linkify) {
|
if (linkify) {
|
||||||
content = linkifyHtml(content, {
|
content = linkifyHtml(content, {
|
||||||
target: '_blank',
|
target: '_blank',
|
||||||
rel: 'noreferrer noopener',
|
rel: 'noreferrer noopener',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
return parse(content, maths ? mathOptions : null);
|
return parse(content);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue