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
2025-09-15 15:22:25 +03:00 · 2023-06-12 21:15:23 +10:00 · 2023-06-12 21:15:23 +10:00 · 0b06bed1db
commit 0b06bed1db
parent 2055d7a07f
128 changed files with 8799 additions and 409 deletions
--- a/src/app/utils/matrix.ts
+++ b/src/app/utils/matrix.ts
@ -0,0 +1,118 @@
+import { EncryptedAttachmentInfo, encryptAttachment } from 'browser-encrypt-attachment';
+import { MatrixClient, MatrixError, UploadProgress, UploadResponse } from 'matrix-js-sdk';
+import { IImageInfo, IThumbnailContent, IVideoInfo } from '../../types/matrix/common';
+
+export const matchMxId = (id: string): RegExpMatchArray | null =>
+  id.match(/^([@!$+#])(\S+):(\S+)$/);
+
+export const validMxId = (id: string): boolean => !!matchMxId(id);
+
+export const getMxIdServer = (userId: string): string | undefined => matchMxId(userId)?.[3];
+
+export const getMxIdLocalPart = (userId: string): string | undefined => matchMxId(userId)?.[2];
+
+export const isUserId = (id: string): boolean => validMxId(id) && id.startsWith('@');
+
+export const getImageInfo = (img: HTMLImageElement, fileOrBlob: File | Blob): IImageInfo => {
+  const info: IImageInfo = {};
+  info.w = img.width;
+  info.h = img.height;
+  info.mimetype = fileOrBlob.type;
+  info.size = fileOrBlob.size;
+  return info;
+};
+
+export const getVideoInfo = (video: HTMLVideoElement, fileOrBlob: File | Blob): IVideoInfo => {
+  const info: IVideoInfo = {};
+  info.duration = Number.isNaN(video.duration) ? undefined : video.duration;
+  info.w = video.videoWidth;
+  info.h = video.videoHeight;
+  info.mimetype = fileOrBlob.type;
+  info.size = fileOrBlob.size;
+  return info;
+};
+
+export const getThumbnailContent = (thumbnailInfo: {
+  thumbnail: File | Blob;
+  encInfo: EncryptedAttachmentInfo | undefined;
+  mxc: string;
+  width: number;
+  height: number;
+}): IThumbnailContent => {
+  const { thumbnail, encInfo, mxc, width, height } = thumbnailInfo;
+
+  const content: IThumbnailContent = {
+    thumbnail_info: {
+      mimetype: thumbnail.type,
+      size: thumbnail.size,
+      w: width,
+      h: height,
+    },
+  };
+  if (encInfo) {
+    content.thumbnail_file = {
+      ...encInfo,
+      url: mxc,
+    };
+  } else {
+    content.thumbnail_url = mxc;
+  }
+  return content;
+};
+
+export const encryptFile = async (
+  file: File | Blob
+): Promise<{
+  encInfo: EncryptedAttachmentInfo;
+  file: File;
+  originalFile: File | Blob;
+}> => {
+  const dataBuffer = await file.arrayBuffer();
+  const encryptedAttachment = await encryptAttachment(dataBuffer);
+  const encFile = new File([encryptedAttachment.data], file.name, {
+    type: file.type,
+  });
+  return {
+    encInfo: encryptedAttachment.info,
+    file: encFile,
+    originalFile: file,
+  };
+};
+
+export type TUploadContent = File | Blob;
+
+export type ContentUploadOptions = {
+  name?: string;
+  fileType?: string;
+  hideFilename?: boolean;
+  onPromise?: (promise: Promise<UploadResponse>) => void;
+  onProgress?: (progress: UploadProgress) => void;
+  onSuccess: (mxc: string) => void;
+  onError: (error: MatrixError) => void;
+};
+
+export const uploadContent = async (
+  mx: MatrixClient,
+  file: TUploadContent,
+  options: ContentUploadOptions
+) => {
+  const { name, fileType, hideFilename, onProgress, onPromise, onSuccess, onError } = options;
+
+  const uploadPromise = mx.uploadContent(file, {
+    name,
+    type: fileType,
+    includeFilename: !hideFilename,
+    progressHandler: onProgress,
+  });
+  onPromise?.(uploadPromise);
+  try {
+    const data = await uploadPromise;
+    const mxc = data.content_uri;
+    if (mxc) onSuccess(mxc);
+    else onError(new MatrixError(data));
+  } catch (e: any) {
+    const error = typeof e?.message === 'string' ? e.message : undefined;
+    const errcode = typeof e?.name === 'string' ? e.message : undefined;
+    onError(new MatrixError({ error, errcode }));
+  }
+};