MCorange/cinny
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor state & Custom editor (#1190)

Browse Source 
* Fix eslint

* Enable ts strict mode

* install folds, jotai & immer

* Enable immer map/set

* change cross-signing alert anim to 30 iteration

* Add function to access matrix client

* Add new types

* Add disposable util

* Add room utils

* Add mDirect list atom

* Add invite list atom

* add room list atom

* add utils for jotai atoms

* Add room id to parents atom

* Add mute list atom

* Add room to unread atom

* Use hook to bind atoms with sdk

* Add settings atom

* Add settings hook

* Extract set settings hook

* Add Sidebar components

* WIP

* Add bind atoms hook

* Fix init muted room list atom

* add navigation atoms

* Add custom editor

* Fix hotkeys

* Update folds

* Add editor output function

* Add matrix client context

* Add tooltip to editor toolbar items

* WIP - Add editor to room input

* Refocus editor on toolbar item click

* Add Mentions - WIP

* update folds

* update mention focus outline

* rename emoji element type

* Add auto complete menu

* add autocomplete query functions

* add index file for editor

* fix bug in getPrevWord function

* Show room mention autocomplete

* Add async search function

* add use async search hook

* use async search in room mention autocomplete

* remove folds prefer font for now

* allow number array in async search

* reset search with empty query

* Autocomplete unknown room mention

* Autocomplete first room mention on tab

* fix roomAliasFromQueryText

* change mention color to primary

* add isAlive hook

* add getMxIdLocalPart to mx utils

* fix getRoomAvatarUrl size

* fix types

* add room members hook

* fix bug in room mention

* add user mention autocomplete

* Fix async search giving prev result after no match

* update folds

* add twemoji font

* add use state provider hook

* add prevent scroll with arrow key util

* add ts to custom-emoji and emoji files

* add types

* add hook for emoji group labels

* add hook for emoji group icons

* add emoji board with basic emoji

* add emojiboard in room input

* select multiple emoji with shift press

* display custom emoji in emojiboard

* Add emoji preview

* focus element on hover

* update folds

* position emojiboard properly

* convert recent-emoji.js to ts

* add use recent emoji hook

* add io.element.recent_emoji to account data evt

* Render recent emoji in emoji board

* show custom emoji from parent spaces

* show room emoji

* improve emoji sidebar

* update folds

* fix pack avatar and name fallback in emoji board

* add stickers to emoji board

* fix bug in emoji preview

* Add sticker icon in room input

* add debounce hook

* add search in emoji board

* Optimize emoji board

* fix emoji board sidebar divider

* sync emojiboard sidebar with scroll & update ui

* Add use throttle hook

* support custom emoji in editor

* remove duplicate emoji selection function

* fix emoji and mention spacing

* add emoticon autocomplete in editor

* fix string

* makes emoji size relative to font size in editor

* add option to render link element

* add spoiler in editor

* fix sticker in emoji board search using wrong type

* render custom placeholder

* update hotkey for block quote and block code

* add terminate search function in async search

* add getImageInfo to matrix utils

* send stickers

* add resize observer hook

* move emoji board component hooks in hooks dir

* prevent editor expand hides room timeline

* send typing notifications

* improve emoji style and performance

* fix imports

* add on paste param to editor

* add selectFile utils

* add file picker hook

* add file paste handler hook

* add file drop handler

* update folds

* Add file upload card

* add bytes to size util

* add blurHash util

* add await to js lib

* add browser-encrypt-attachment types

* add list atom

* convert mimetype file to ts

* add matrix types

* add matrix file util

* add file related dom utils

* add common utils

* add upload atom

* add room input draft atom

* add upload card renderer component

* add upload board component

* add support for file upload in editor

* send files with message / enter

* fix circular deps

* store editor toolbar state in local store

* move msg content util to separate file

* store msg draft on room switch

* fix following member not updating on msg sent

* add theme for folds component

* fix system default theme

* Add reply support in editor

* prevent initMatrix to init multiple time

* add state event hooks

* add async callback hook

* Show tombstone info for tombstone room

* fix room tombstone component border

* add power level hook

* Add room input placeholder component

* Show input placeholder for muted member
This commit is contained in:
Ajay Bura
2023-06-12 21:15:23 +10:00
committed by GitHub
parent 2055d7a07f
commit 0b06bed1db
128 changed files with 8799 additions and 409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/app/templates/client/Client.jsx
View File

@@ -18,14 +18,13 @@ import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener';
import initMatrix from '../../../client/initMatrix';
import navigation from '../../../client/state/navigation';
import cons from '../../../client/state/cons';
import DragDrop from '../../organisms/drag-drop/DragDrop';
import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
import { MatrixClientProvider } from '../../hooks/useMatrixClient';
function Client() {
const [isLoading, changeLoading] = useState(true);
const [loadingMsg, setLoadingMsg] = useState('Heating up');
const [dragCounter, setDragCounter] = useState(0);
const classNameHidden = 'client__item-hidden';
const navWrapperRef = useRef(null);
@@ -44,19 +43,17 @@ function Client() {
navigation.on(cons.events.navigation.ROOM_SELECTED, onRoomSelected);
navigation.on(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected);
return (() => {
return () => {
navigation.removeListener(cons.events.navigation.ROOM_SELECTED, onRoomSelected);
navigation.removeListener(cons.events.navigation.NAVIGATION_OPENED, onNavigationSelected);
});
};
}, []);
useEffect(() => {
changeLoading(true);
let counter = 0;
const iId = setInterval(() => {
const msgList = [
'Almost there...',
'Looks like you have a lot of stuff to heat up!',
];
const msgList = ['Almost there...', 'Looks like you have a lot of stuff to heat up!'];
if (counter === msgList.length - 1) {
setLoadingMsg(msgList[msgList.length - 1]);
clearInterval(iId);
@@ -80,103 +77,48 @@ function Client() {
<div className="loading__menu">
<ContextMenu
placement="bottom"
content={(
content={
<>
<MenuItem onClick={() => initMatrix.clearCacheAndReload()}>
Clear cache & reload
</MenuItem>
<MenuItem onClick={() => initMatrix.logout()}>Logout</MenuItem>
</>
}
render={(toggle) => (
<IconButton size="extra-small" onClick={toggle} src={VerticalMenuIC} />
)}
render={(toggle) => <IconButton size="extra-small" onClick={toggle} src={VerticalMenuIC} />}
/>
</div>
<Spinner />
<Text className="loading__message" variant="b2">{loadingMsg}</Text>
<Text className="loading__message" variant="b2">
{loadingMsg}
</Text>
<div className="loading__appname">
<Text variant="h2" weight="medium">Cinny</Text>
<Text variant="h2" weight="medium">
Cinny
</Text>
</div>
</div>
);
}
function dragContainsFiles(e) {
if (!e.dataTransfer.types) return false;
for (let i = 0; i < e.dataTransfer.types.length; i += 1) {
if (e.dataTransfer.types[i] === 'Files') return true;
}
return false;
}
function modalOpen() {
return navigation.isRawModalVisible && dragCounter <= 0;
}
function handleDragOver(e) {
if (!dragContainsFiles(e)) return;
e.preventDefault();
if (!navigation.selectedRoomId || modalOpen()) {
e.dataTransfer.dropEffect = 'none';
}
}
function handleDragEnter(e) {
e.preventDefault();
if (navigation.selectedRoomId && !modalOpen() && dragContainsFiles(e)) {
setDragCounter(dragCounter + 1);
}
}
function handleDragLeave(e) {
e.preventDefault();
if (navigation.selectedRoomId && !modalOpen() && dragContainsFiles(e)) {
setDragCounter(dragCounter - 1);
}
}
function handleDrop(e) {
e.preventDefault();
setDragCounter(0);
if (modalOpen()) return;
const roomId = navigation.selectedRoomId;
if (!roomId) return;
const { files } = e.dataTransfer;
if (!files?.length) return;
const file = files[0];
initMatrix.roomsInput.setAttachment(roomId, file);
initMatrix.roomsInput.emit(cons.events.roomsInput.ATTACHMENT_SET, file);
}
return (
<div
className="client-container"
onDragOver={handleDragOver}
onDragEnter={handleDragEnter}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
>
<div className="navigation__wrapper" ref={navWrapperRef}>
<Navigation />
<MatrixClientProvider value={initMatrix.matrixClient}>
<div className="client-container">
<div className="navigation__wrapper" ref={navWrapperRef}>
<Navigation />
</div>
<div className={`room__wrapper ${classNameHidden}`} ref={roomWrapperRef}>
<Room />
</div>
<Windows />
<Dialogs />
<EmojiBoardOpener />
<ReusableContextMenu />
</div>
<div className={`room__wrapper ${classNameHidden}`} ref={roomWrapperRef}>
<Room />
</div>
<Windows />
<Dialogs />
<EmojiBoardOpener />
<ReusableContextMenu />
<DragDrop isOpen={dragCounter !== 0} />
</div>
</MatrixClientProvider>
);
}