Refactor state & Custom editor (#1190)

* 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

src/app/utils/AsyncSearch.ts

@@ -0,0 +1,102 @@
+export type NormalizeOption = {
+  caseSensitive?: boolean;
+  normalizeUnicode?: boolean;
+  ignoreWhitespace?: boolean;
+};
+
+export type MatchQueryOption = {
+  contain?: boolean;
+};
+
+export type AsyncSearchOption = {
+  limit?: number;
+};
+
+export type MatchHandler<TSearchItem extends object | string | number> = (
+  item: TSearchItem,
+  query: string
+) => boolean;
+export type ResultHandler<TSearchItem extends object | string | number> = (
+  results: TSearchItem[],
+  query: string
+) => void;
+
+export type AsyncSearchHandler = (query: string) => void;
+export type TerminateAsyncSearch = () => void;
+
+export const normalize = (str: string, options?: NormalizeOption) => {
+  let nStr = str.normalize(options?.normalizeUnicode ?? true ? 'NFKC' : 'NFC');
+  if (!options?.caseSensitive) nStr = nStr.toLocaleLowerCase();
+  if (options?.ignoreWhitespace ?? true) nStr = nStr.replace(/\s/g, '');
+  return nStr;
+};
+
+export const matchQuery = (item: string, query: string, options?: MatchQueryOption): boolean => {
+  if (options?.contain) return item.indexOf(query) !== -1;
+  return item.startsWith(query);
+};
+
+export const AsyncSearch = <TSearchItem extends object | string | number>(
+  list: TSearchItem[],
+  match: MatchHandler<TSearchItem>,
+  onResult: ResultHandler<TSearchItem>,
+  options?: AsyncSearchOption
+): [AsyncSearchHandler, TerminateAsyncSearch] => {
+  let resultList: TSearchItem[] = [];
+
+  let searchIndex = 0;
+  let sessionStartTimestamp = 0;
+  let sessionScheduleId: number | undefined;
+
+  const terminateSearch: TerminateAsyncSearch = () => {
+    resultList = [];
+    searchIndex = 0;
+    sessionStartTimestamp = 0;
+    if (sessionScheduleId) clearTimeout(sessionScheduleId);
+    sessionScheduleId = undefined;
+  };
+
+  const find = (query: string, sessionTimestamp: number) => {
+    const findingCount = resultList.length;
+    sessionScheduleId = undefined;
+    // return if find session got reset
+    if (sessionTimestamp !== sessionStartTimestamp) return;
+
+    sessionStartTimestamp = window.performance.now();
+    for (; searchIndex < list.length; searchIndex += 1) {
+      if (match(list[searchIndex], query)) {
+        resultList.push(list[searchIndex]);
+        if (typeof options?.limit === 'number' && resultList.length >= options.limit) {
+          break;
+        }
+      }
+
+      const matchFinishTime = window.performance.now();
+      if (matchFinishTime - sessionStartTimestamp > 8) {
+        const currentFindingCount = resultList.length;
+        const thisSessionTimestamp = sessionStartTimestamp;
+        if (findingCount !== currentFindingCount) onResult(resultList, query);
+
+        searchIndex += 1;
+        sessionScheduleId = window.setTimeout(() => find(query, thisSessionTimestamp), 1);
+        return;
+      }
+    }
+
+    if (findingCount !== resultList.length || findingCount === 0) {
+      onResult(resultList, query);
+    }
+    terminateSearch();
+  };
+
+  const search: AsyncSearchHandler = (query: string) => {
+    terminateSearch();
+    if (query === '') {
+      onResult(resultList, query);
+      return;
+    }
+    find(query, sessionStartTimestamp);
+  };
+
+  return [search, terminateSearch];
+};