mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-09-14 06:42:25 +03:00
Refactor timeline (#1346)
* fix intersection & resize observer * add binary search util * add scroll info util * add virtual paginator hook - WIP * render timeline using paginator hook * add continuous pagination to fill timeline * add doc comments in virtual paginator hook * add scroll to element func in virtual paginator * extract timeline pagination login into hook * add sliding name for timeline messages - testing * scroll with live event * change message rending style * make message timestamp smaller * remove unused imports * add random number between util * add compact message component * add sanitize html types * fix sending alias in room mention * get room member display name util * add get room with canonical alias util * add sanitize html util * render custom html with new styles * fix linkifying link text * add reaction component * display message reactions in timeline * Change mention color * show edited message * add event sent by function factory * add functions to get emoji shortcode * add component for reaction msg * add tooltip for who has reacted * add message layouts & placeholder * fix reaction size * fix dark theme colors * add code highlight with prismjs * add options to configure spacing in msgs * render message reply * fix trim reply from body regex * fix crash when loading reply * fix reply hover style * decrypt event on timeline paginate * update custom html code style * remove console logs * fix virtual paginator scroll to func * fix virtual paginator scroll to types * add stop scroll for in view item options * fix virtual paginator out of range scroll to index * scroll to and highlight reply on click * fix reply hover style * make message avatar clickable * fix scrollTo issue in virtual paginator * load reply from fetch * import virtual paginator restore scroll * load timeline for specific event * Fix back pagination recalibration * fix reply min height * revert code block colors to secondary * stop sanitizing text in code block * add decrypt file util * add image media component * update folds * fix code block font style * add msg event type * add scale dimension util * strict msg layout type * add image renderer component * add message content fallback components * add message matrix event renderer components * render matrix event using hooks * add attachment component * add attachment content types * handle error when rendering image in timeline * add video component * render video * include blurhash in thumbnails * generate thumbnails for image message * fix reactToDom spoiler opts * add hooks for HTMLMediaElement * render audio file in timeline * add msg image content component * fix image content props * add video content component * render new image/video component in timeline * remove console.log * convert seconds to milliseconds in video info * add load thumbnail prop to video content component * add file saver types * add file header component * add file content component * render file in timeline * add media control component * render audio message in room timeline * remove moved components * safely load message reply * add media loading hook * update media control layout * add loading indication in audio component * fill audio play icon when playing audio * fix media expanding * add image viewer - WIP * add pan and zoom control to image viewer * add text based file viewer * add pdf viewer * add error handling in pdf viewer * add download btn to pdf viewer * fix file button spinner fill * fix file opens on re-render * add range slider in audio content player * render location in timeline * update folds * display membership event in timeline * make reactions toggle * render sticker messages in timeline * render room name, topic, avatar change and event * fix typos * update render state event type style * add room intro in start of timeline * add power levels context * fix wrong param passing in RoomView * fix sending typing notification in wrong room Slate onChange callback was not updating with react re-renders. * send typing status on key up * add typing indicator component * add typing member atom * display typing status in member drawer * add room view typing member component * display typing members in room view * remove old roomTimeline uses * add event readers hook * add latest event hook * display following members in room view * fetch event instead of event context for reply * fix typo in virtual paginator hook * add scroll to latest btn in timeline * change scroll to latest chip variant * destructure paginator object to improve perf * restore forward dir scroll in virtual paginator * run scroll to bottom in layout effect * display unread message indicator in timeline * make component for room timeline float * add timeline divider component * add day divider and format message time * apply message spacing to dividers * format date in room intro * send read receipt on message arrive * add event readers component * add reply, read receipt, source delete opt * bug fixes * update timeline on delete & show reason * fix empty reaction container style * show msg selection effect on msg option open * add report message options * add options to send quick reactions * add emoji board in message options * add reaction viewer * fix styles * show view reaction in msg options menu * fix spacing between two msg by same person * add option menu in other rendered event * handle m.room.encrypted messages * fix italic reply text overflow cut * handle encrypted sticker messages * remove console log * prevent message context menu with alt key pressed * make mentions clickable in messages * add options to show and hidden events in timeline * add option to disable media autoload * remove old emojiboard opener * add options to use system emoji * refresh timeline on reset * fix stuck typing member in member drawer
This commit is contained in:
Ajay Bura
GitHub
parent
fcd7723f73
commit
3a95d0da01
124 changed files with 9438 additions and 258 deletions
274
src/app/plugins/react-custom-html-parser.tsx
Normal file
274
src/app/plugins/react-custom-html-parser.tsx
Normal file
|
|
@ -0,0 +1,274 @@
|
|||
/* eslint-disable jsx-a11y/alt-text */
|
||||
import React, { ReactEventHandler, Suspense, lazy } from 'react';
|
||||
import {
|
||||
Element,
|
||||
Text as DOMText,
|
||||
HTMLReactParserOptions,
|
||||
attributesToProps,
|
||||
domToReact,
|
||||
} from 'html-react-parser';
|
||||
import { MatrixClient, Room } from 'matrix-js-sdk';
|
||||
import classNames from 'classnames';
|
||||
import { Scroll, Text } from 'folds';
|
||||
import { Opts as LinkifyOpts } from 'linkifyjs';
|
||||
import Linkify from 'linkify-react';
|
||||
import { ErrorBoundary } from 'react-error-boundary';
|
||||
import * as css from '../styles/CustomHtml.css';
|
||||
import { getMxIdLocalPart, getRoomWithCanonicalAlias } from '../utils/matrix';
|
||||
import { getMemberDisplayName } from '../utils/room';
|
||||
|
||||
const ReactPrism = lazy(() => import('./react-prism/ReactPrism'));
|
||||
|
||||
export const LINKIFY_OPTS: LinkifyOpts = {
|
||||
attributes: {
|
||||
target: '_blank',
|
||||
rel: 'noreferrer noopener',
|
||||
},
|
||||
validate: {
|
||||
url: (value) => /^(https|http|ftp|mailto|magnet)?:/.test(value),
|
||||
},
|
||||
};
|
||||
|
||||
export const getReactCustomHtmlParser = (
|
||||
mx: MatrixClient,
|
||||
room: Room,
|
||||
params: {
|
||||
handleSpoilerClick?: ReactEventHandler<HTMLElement>;
|
||||
handleMentionClick?: ReactEventHandler<HTMLElement>;
|
||||
}
|
||||
): HTMLReactParserOptions => {
|
||||
const opts: HTMLReactParserOptions = {
|
||||
replace: (domNode) => {
|
||||
if (domNode instanceof Element && 'name' in domNode) {
|
||||
const { name, attribs, children, parent } = domNode;
|
||||
const props = attributesToProps(attribs);
|
||||
|
||||
if (name === 'h1') {
|
||||
return (
|
||||
<Text className={css.Heading} size="H2" {...props}>
|
||||
{domToReact(children, opts)}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
if (name === 'h2') {
|
||||
return (
|
||||
<Text className={css.Heading} size="H3" {...props}>
|
||||
{domToReact(children, opts)}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
if (name === 'h3') {
|
||||
return (
|
||||
<Text className={css.Heading} size="H4" {...props}>
|
||||
{domToReact(children, opts)}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
if (name === 'h4') {
|
||||
return (
|
||||
<Text className={css.Heading} size="H4" {...props}>
|
||||
{domToReact(children, opts)}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
if (name === 'h5') {
|
||||
return (
|
||||
<Text className={css.Heading} size="H5" {...props}>
|
||||
{domToReact(children, opts)}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
if (name === 'h6') {
|
||||
return (
|
||||
<Text className={css.Heading} size="H6" {...props}>
|
||||
{domToReact(children, opts)}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
if (name === 'p') {
|
||||
return (
|
||||
<Text className={classNames(css.Paragraph, css.MarginSpaced)} size="Inherit" {...props}>
|
||||
{domToReact(children, opts)}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
if (name === 'pre') {
|
||||
return (
|
||||
<Text as="pre" className={css.CodeBlock} {...props}>
|
||||
<Scroll
|
||||
direction="Horizontal"
|
||||
variant="Secondary"
|
||||
size="300"
|
||||
visibility="Hover"
|
||||
hideTrack
|
||||
>
|
||||
<div className={css.CodeBlockInternal}>{domToReact(children, opts)}</div>
|
||||
</Scroll>
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
if (name === 'blockquote') {
|
||||
return (
|
||||
<Text size="Inherit" as="blockquote" className={css.BlockQuote} {...props}>
|
||||
{domToReact(children, opts)}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
|
||||
if (name === 'ul') {
|
||||
return (
|
||||
<ul className={css.List} {...props}>
|
||||
{domToReact(children, opts)}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
if (name === 'ol') {
|
||||
return (
|
||||
<ol className={css.List} {...props}>
|
||||
{domToReact(children, opts)}
|
||||
</ol>
|
||||
);
|
||||
}
|
||||
|
||||
if (name === 'code') {
|
||||
if (parent && 'name' in parent && parent.name === 'pre') {
|
||||
const codeReact = domToReact(children, opts);
|
||||
if (typeof codeReact === 'string') {
|
||||
let lang = props.className;
|
||||
if (lang === 'language-rs') lang = 'language-rust';
|
||||
return (
|
||||
<ErrorBoundary fallback={<code {...props}>{codeReact}</code>}>
|
||||
<Suspense fallback={<code {...props}>{codeReact}</code>}>
|
||||
<ReactPrism>
|
||||
{(ref) => (
|
||||
<code ref={ref} {...props} className={lang}>
|
||||
{codeReact}
|
||||
</code>
|
||||
)}
|
||||
</ReactPrism>
|
||||
</Suspense>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
}
|
||||
} else {
|
||||
return (
|
||||
<code className={css.Code} {...props}>
|
||||
{domToReact(children, opts)}
|
||||
</code>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (name === 'a') {
|
||||
const mention = decodeURIComponent(props.href).match(
|
||||
/^https?:\/\/matrix.to\/#\/((@|#|!).+:[^?/]+)/
|
||||
);
|
||||
if (mention) {
|
||||
// convert mention link to pill
|
||||
const mentionId = mention[1];
|
||||
const mentionPrefix = mention[2];
|
||||
if (mentionPrefix === '#' || mentionPrefix === '!') {
|
||||
const mentionRoom =
|
||||
mentionPrefix === '#'
|
||||
? getRoomWithCanonicalAlias(mx, mentionId)
|
||||
: mx.getRoom(mentionId);
|
||||
const mentionName = mentionRoom?.name;
|
||||
|
||||
const mentionDisplayName =
|
||||
mentionName && (mentionName.startsWith('#') ? mentionName : `#${mentionName}`);
|
||||
return (
|
||||
<span
|
||||
{...props}
|
||||
className={css.Mention({
|
||||
highlight: room.roomId === (mentionRoom?.roomId ?? mentionId),
|
||||
})}
|
||||
data-mention-id={mentionRoom?.roomId ?? mentionId}
|
||||
data-mention-href={props.href}
|
||||
role="button"
|
||||
tabIndex={params.handleMentionClick ? 0 : -1}
|
||||
onKeyDown={params.handleMentionClick}
|
||||
onClick={params.handleMentionClick}
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
{mentionDisplayName ?? mentionId}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (mentionPrefix === '@')
|
||||
return (
|
||||
<span
|
||||
{...props}
|
||||
className={css.Mention({ highlight: mx.getUserId() === mentionId })}
|
||||
data-mention-id={mentionId}
|
||||
data-mention-href={props.href}
|
||||
role="button"
|
||||
tabIndex={params.handleMentionClick ? 0 : -1}
|
||||
onKeyDown={params.handleMentionClick}
|
||||
onClick={params.handleMentionClick}
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
{`@${getMemberDisplayName(room, mentionId) ?? getMxIdLocalPart(mentionId)}`}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (name === 'span' && 'data-mx-spoiler' in props) {
|
||||
return (
|
||||
<span
|
||||
{...props}
|
||||
role="button"
|
||||
tabIndex={params.handleSpoilerClick ? 0 : -1}
|
||||
onKeyDown={params.handleSpoilerClick}
|
||||
onClick={params.handleSpoilerClick}
|
||||
className={css.Spoiler()}
|
||||
aria-pressed
|
||||
style={{ cursor: 'pointer' }}
|
||||
>
|
||||
{domToReact(children, opts)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
if (name === 'img') {
|
||||
const htmlSrc = mx.mxcUrlToHttp(props.src);
|
||||
if (htmlSrc && props.src.startsWith('mxc://') === false) {
|
||||
return (
|
||||
<a href={htmlSrc} target="_blank" rel="noreferrer noopener">
|
||||
{props.alt && 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>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (htmlSrc) return <img className={css.Img} {...props} 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>;
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
};
|
||||
return opts;
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue