mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-15 11:40:29 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'upstream/dev' into dev

Browse source
This commit is contained in:
Ginger 2025-03-06 13:24:14 -05:00
commit 76d1902708
83 changed files with 2747 additions and 1619 deletions
Download patch file Download diff file Expand all files Collapse all files

13
.github/renovate.json vendored
View file

@ -1,15 +1,14 @@
{ {
"$schema": "https://docs.renovatebot.com/renovate-schema.json", "$schema": "https://docs.renovatebot.com/renovate-schema.json",
"extends": [ "extends": ["config:recommended", ":dependencyDashboardApproval"],
"config:base", "labels": ["Dependencies"],
":dependencyDashboardApproval"
],
"labels": [ "Dependencies" ],
"packageRules": [ "packageRules": [
{ {
"matchUpdateTypes": [ "lockFileMaintenance" ] "matchUpdateTypes": ["lockFileMaintenance"]
} }
], ],
"lockFileMaintenance": { "enabled": true }, "lockFileMaintenance": {
"enabled": true
},
"dependencyDashboard": true "dependencyDashboard": true
} }

4
.github/workflows/build-pull-request.yml vendored
View file

@ -25,7 +25,7 @@ jobs:
NODE_OPTIONS: '--max_old_space_size=4096' NODE_OPTIONS: '--max_old_space_size=4096'
run: npm run build run: npm run build
- name: Upload artifact - name: Upload artifact
uses: actions/upload-artifact@v4.6.0 uses: actions/upload-artifact@v4.6.1
with: with:
name: preview name: preview
path: dist path: dist
@ -33,7 +33,7 @@ jobs:
- name: Save pr number - name: Save pr number
run: echo ${PR_NUMBER} > ./pr.txt run: echo ${PR_NUMBER} > ./pr.txt
- name: Upload pr number - name: Upload pr number
uses: actions/upload-artifact@v4.6.0 uses: actions/upload-artifact@v4.6.1
with: with:
name: pr name: pr
path: ./pr.txt path: ./pr.txt

2
.github/workflows/docker-pr.yml vendored
View file

@ -13,7 +13,7 @@ jobs:
- name: Checkout repository - name: Checkout repository
uses: actions/checkout@v4.2.0 uses: actions/checkout@v4.2.0
- name: Build Docker image - name: Build Docker image
uses: docker/build-push-action@v6.13.0 uses: docker/build-push-action@v6.15.0
with: with:
context: . context: .
push: false push: false

8
.github/workflows/prod-deploy.yml vendored
View file

@ -68,9 +68,9 @@ jobs:
- name: Checkout repository - name: Checkout repository
uses: actions/checkout@v4.2.0 uses: actions/checkout@v4.2.0
- name: Set up QEMU - name: Set up QEMU
uses: docker/setup-qemu-action@v3.4.0 uses: docker/setup-qemu-action@v3.6.0
- name: Set up Docker Buildx - name: Set up Docker Buildx
uses: docker/setup-buildx-action@v3.9.0 uses: docker/setup-buildx-action@v3.10.0
- name: Login to Docker Hub - name: Login to Docker Hub
uses: docker/login-action@v3.3.0 uses: docker/login-action@v3.3.0
with: with:
@ -84,13 +84,13 @@ jobs:
password: ${{ secrets.GITHUB_TOKEN }} password: ${{ secrets.GITHUB_TOKEN }}
- name: Extract metadata (tags, labels) for Docker - name: Extract metadata (tags, labels) for Docker
id: meta id: meta
uses: docker/metadata-action@v5.6.1 uses: docker/metadata-action@v5.7.0
with: with:
images: | images: |
${{ secrets.DOCKER_USERNAME }}/cinny ${{ secrets.DOCKER_USERNAME }}/cinny
ghcr.io/${{ github.repository }} ghcr.io/${{ github.repository }}
- name: Build and push Docker image - name: Build and push Docker image
uses: docker/build-push-action@v6.13.0 uses: docker/build-push-action@v6.15.0
with: with:
context: . context: .
platforms: linux/amd64,linux/arm64 platforms: linux/amd64,linux/arm64

33
README.md
View file

@ -19,27 +19,22 @@ A Matrix client focusing primarily on simple, elegant and secure interface. The
<img align="center" src="https://raw.githubusercontent.com/cinnyapp/cinny-site/main/assets/preview2-light.png" height="380"> <img align="center" src="https://raw.githubusercontent.com/cinnyapp/cinny-site/main/assets/preview2-light.png" height="380">
## Getting started ## Getting started
* Web app is available at https://app.cinny.in and gets updated on each new release. The `dev` branch is continuously deployed at https://dev.cinny.in but keep in mind that it could have things broken. The web app is available at [app.cinny.in](https://app.cinny.in/) and gets updated on each new release. The `dev` branch is continuously deployed at [dev.cinny.in](https://dev.cinny.in) but keep in mind that it could have things broken.
* You can also download our desktop app from [cinny-desktop repository](https://github.com/cinnyapp/cinny-desktop). You can also download our desktop app from the [cinny-desktop repository](https://github.com/cinnyapp/cinny-desktop).
* To host Cinny on your own, download tarball of the app from [GitHub release](https://github.com/cinnyapp/cinny/releases/latest). ## Self-hosting
You can serve the application with a webserver of your choice by simply copying `dist/` directory to the webroot. To host Cinny on your own, simply download the tarball from [GitHub releases](https://github.com/cinnyapp/cinny/releases/latest), and serve the files from `dist/` using your preferred webserver. Alternatively, you can just pull the docker image from [DockerHub](https://hub.docker.com/r/ajbura/cinny) or [GitHub Container Registry](https://github.com/cinnyapp/cinny/pkgs/container/cinny).
To set default Homeserver on login, register and Explore Community page, place a customized [`config.json`](config.json) in webroot of your choice.
You will also need to setup redirects to serve the assests. An example setting of redirects for netlify is done in [`netlify.toml`](netlify.toml). You can also set `hashRouter.enabled = true` in [`config.json`](config.json) if you have trouble setting redirects.
To deploy on subdirectory, you need to rebuild the app youself after updating the `base` path in [`build.config.ts`](build.config.ts). For example, if you want to deploy on `https://cinny.in/app`, then change `base: '/app'`.
* Alternatively you can just pull the [DockerHub image](https://hub.docker.com/r/ajbura/cinny) by: * The default homeservers and explore pages are defined in [`config.json`](config.json).
```
docker pull ajbura/cinny
```
or [ghcr image](https://github.com/cinnyapp/cinny/pkgs/container/cinny) by:
```
docker pull ghcr.io/cinnyapp/cinny:latest
```
<details> * You need to set up redirects to serve the assests. Example configurations; [netlify](netlify.toml), [nginx](contrib/nginx/cinny.domain.tld.conf), [caddy](contrib/caddy/caddyfile).
<summary>PGP Public Key to verify tarball</summary> * If you have trouble configuring redirects you can [enable hash routing](config.json#L35) — the url in the browser will have a `/#/` between the domain and open channel (ie. `app.cinny.in/#/home/` instead of `app.cinny.in/home/`) but you won't have to configure your webserver.
* To deploy on subdirectory, you need to rebuild the app youself after updating the `base` path in [`build.config.ts`](build.config.ts).
* For example, if you want to deploy on `https://cinny.in/app`, then set `base: '/app'`.
<details><summary><b>PGP Public Key to verify tarball</b></summary>
``` ```
-----BEGIN PGP PUBLIC KEY BLOCK----- -----BEGIN PGP PUBLIC KEY BLOCK-----
@ -87,8 +82,8 @@ mxFo+ioe/ABCufSmyqFye0psX3Sp
</details> </details>
## Local development ## Local development
> We recommend using a version manager as versions change very quickly. You will likely need to switch > [!TIP]
between multiple Node.js versions based on the needs of different projects you're working on. [NVM on windows](https://github.com/coreybutler/nvm-windows#installation--upgrades) on Windows and [nvm](https://github.com/nvm-sh/nvm) on Linux/macOS are pretty good choices. Recommended nodejs version is Iron LTS (v20). > We recommend using a version manager as versions change very quickly. You will likely need to switch between multiple Node.js versions based on the needs of different projects you're working on. [NVM on windows](https://github.com/coreybutler/nvm-windows#installation--upgrades) on Windows and [nvm](https://github.com/nvm-sh/nvm) on Linux/macOS are pretty good choices. Recommended nodejs version is Iron LTS (v20).
Execute the following commands to start a development server: Execute the following commands to start a development server:
```sh ```sh

6
contrib/caddy/caddyfile Normal file
View file

@ -0,0 +1,6 @@
cinny.domain.tld {
@nativeRouter not file {path} /
rewrite @nativeRouter {http.matchers.file.relative}
root * /path/to/caddy/dist
file_server
}

46
contrib/nginx/cinny.domain.tld.conf
View file

@ -1,35 +1,35 @@
server { server {
listen 80; listen 80;
listen [::]:80; listen [::]:80;
server_name cinny.domain.tld; server_name cinny.domain.tld;
location / { location / {
return 301 https://$host$request_uri; return 301 https://$host$request_uri;
} }
location /.well-known/acme-challenge/ { location /.well-known/acme-challenge/ {
alias /var/lib/letsencrypt/.well-known/acme-challenge/; alias /var/lib/letsencrypt/.well-known/acme-challenge/;
} }
} }
server { server {
listen 443 ssl http2; listen 443 ssl http2;
listen [::]:443 ssl; listen [::]:443 ssl;
server_name cinny.domain.tld; server_name cinny.domain.tld;
location / { location / {
root /opt/cinny/dist/; root /opt/cinny/dist/;
rewrite ^/config.json$ /config.json break; rewrite ^/config.json$ /config.json break;
rewrite ^/manifest.json$ /manifest.json break; rewrite ^/manifest.json$ /manifest.json break;
rewrite ^.*/olm.wasm$ /olm.wasm break; rewrite ^.*/olm.wasm$ /olm.wasm break;
rewrite ^/sw.js$ /sw.js break; rewrite ^/sw.js$ /sw.js break;
rewrite ^/pdf.worker.min.js$ /pdf.worker.min.js break; rewrite ^/pdf.worker.min.js$ /pdf.worker.min.js break;
rewrite ^/public/(.*)$ /public/$1 break; rewrite ^/public/(.*)$ /public/$1 break;
rewrite ^/assets/(.*)$ /assets/$1 break; rewrite ^/assets/(.*)$ /assets/$1 break;
rewrite ^(.+)$ /index.html break; rewrite ^(.+)$ /index.html break;
} }
} }

120
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "cinny", "name": "cinny",
"version": "4.3.2", "version": "4.5.1",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "cinny", "name": "cinny",
"version": "4.3.2", "version": "4.5.1",
"license": "AGPL-3.0-only", "license": "AGPL-3.0-only",
"dependencies": { "dependencies": {
"@atlaskit/pragmatic-drag-and-drop": "1.1.6", "@atlaskit/pragmatic-drag-and-drop": "1.1.6",
@ -62,9 +62,10 @@
"react-range": "1.8.14", "react-range": "1.8.14",
"react-router-dom": "6.20.0", "react-router-dom": "6.20.0",
"sanitize-html": "2.12.1", "sanitize-html": "2.12.1",
"slate": "0.94.1", "slate": "0.112.0",
"slate-history": "0.93.0", "slate-dom": "0.112.2",
"slate-react": "0.98.4", "slate-history": "0.110.3",
"slate-react": "0.112.1",
"tippy.js": "6.3.7", "tippy.js": "6.3.7",
"ua-parser-js": "1.0.35" "ua-parser-js": "1.0.35"
}, },
@ -73,6 +74,7 @@
"@rollup/plugin-inject": "5.0.3", "@rollup/plugin-inject": "5.0.3",
"@rollup/plugin-wasm": "6.1.1", "@rollup/plugin-wasm": "6.1.1",
"@types/file-saver": "2.0.5", "@types/file-saver": "2.0.5",
"@types/is-hotkey": "0.1.10",
"@types/node": "18.11.18", "@types/node": "18.11.18",
"@types/prismjs": "1.26.0", "@types/prismjs": "1.26.0",
"@types/react": "18.2.39", "@types/react": "18.2.39",
@ -4598,7 +4600,9 @@
"node_modules/@types/is-hotkey": { "node_modules/@types/is-hotkey": {
"version": "0.1.10", "version": "0.1.10",
"resolved": "https://registry.npmjs.org/@types/is-hotkey/-/is-hotkey-0.1.10.tgz", "resolved": "https://registry.npmjs.org/@types/is-hotkey/-/is-hotkey-0.1.10.tgz",
"integrity": "sha512-RvC8KMw5BCac1NvRRyaHgMMEtBaZ6wh0pyPTBu7izn4Sj/AX9Y4aXU5c7rX8PnM/knsuUpC1IeoBkANtxBypsQ==" "integrity": "sha512-RvC8KMw5BCac1NvRRyaHgMMEtBaZ6wh0pyPTBu7izn4Sj/AX9Y4aXU5c7rX8PnM/knsuUpC1IeoBkANtxBypsQ==",
"dev": true,
"license": "MIT"
}, },
"node_modules/@types/json-schema": { "node_modules/@types/json-schema": {
"version": "7.0.15", "version": "7.0.15",
@ -4612,11 +4616,6 @@
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
"dev": true "dev": true
}, },
"node_modules/@types/lodash": {
"version": "4.17.14",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.14.tgz",
"integrity": "sha512-jsxagdikDiDBeIRaPYtArcT8my4tN1og7MtMRquFT3XNA6axxyHDRUemqDz/taRDdOUn0GnGHRCuff4q48sW9A=="
},
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "18.11.18", "version": "18.11.18",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
@ -5797,9 +5796,10 @@
} }
}, },
"node_modules/compute-scroll-into-view": { "node_modules/compute-scroll-into-view": {
"version": "1.0.20", "version": "3.1.1",
"resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz", "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.1.tgz",
"integrity": "sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==" "integrity": "sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==",
"license": "MIT"
}, },
"node_modules/computed-style": { "node_modules/computed-style": {
"version": "0.1.4", "version": "0.1.4",
@ -8145,7 +8145,8 @@
"node_modules/is-hotkey": { "node_modules/is-hotkey": {
"version": "0.2.0", "version": "0.2.0",
"resolved": "https://registry.npmjs.org/is-hotkey/-/is-hotkey-0.2.0.tgz", "resolved": "https://registry.npmjs.org/is-hotkey/-/is-hotkey-0.2.0.tgz",
"integrity": "sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw==" "integrity": "sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw==",
"license": "MIT"
}, },
"node_modules/is-map": { "node_modules/is-map": {
"version": "2.0.3", "version": "2.0.3",
@ -10225,11 +10226,12 @@
} }
}, },
"node_modules/scroll-into-view-if-needed": { "node_modules/scroll-into-view-if-needed": {
"version": "2.2.31", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.31.tgz", "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz",
"integrity": "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==", "integrity": "sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==",
"license": "MIT",
"dependencies": { "dependencies": {
"compute-scroll-into-view": "^1.0.20" "compute-scroll-into-view": "^3.0.2"
} }
}, },
"node_modules/sdp-transform": { "node_modules/sdp-transform": {
@ -10458,19 +10460,39 @@
} }
}, },
"node_modules/slate": { "node_modules/slate": {
"version": "0.94.1", "version": "0.112.0",
"resolved": "https://registry.npmjs.org/slate/-/slate-0.94.1.tgz", "resolved": "https://registry.npmjs.org/slate/-/slate-0.112.0.tgz",
"integrity": "sha512-GH/yizXr1ceBoZ9P9uebIaHe3dC/g6Plpf9nlUwnvoyf6V1UOYrRwkabtOCd3ZfIGxomY4P7lfgLr7FPH8/BKA==", "integrity": "sha512-PRnfFgDA3tSop4OH47zu4M1R4Uuhm/AmASu29Qp7sGghVFb713kPBKEnSf1op7Lx/nCHkRlCa3ThfHtCBy+5Yw==",
"license": "MIT",
"dependencies": { "dependencies": {
"immer": "^9.0.6", "immer": "^10.0.3",
"is-plain-object": "^5.0.0", "is-plain-object": "^5.0.0",
"tiny-warning": "^1.0.3" "tiny-warning": "^1.0.3"
} }
}, },
"node_modules/slate-dom": {
"version": "0.112.2",
"resolved": "https://registry.npmjs.org/slate-dom/-/slate-dom-0.112.2.tgz",
"integrity": "sha512-cozITMlpcBxrov854reM6+TooiHiqpfM/nZPrnjpN1wSiDsAQmYbWUyftC+jlwcpFj80vywfDHzlG6hXIc5h6A==",
"license": "MIT",
"dependencies": {
"@juggle/resize-observer": "^3.4.0",
"direction": "^1.0.4",
"is-hotkey": "^0.2.0",
"is-plain-object": "^5.0.0",
"lodash": "^4.17.21",
"scroll-into-view-if-needed": "^3.1.0",
"tiny-invariant": "1.3.1"
},
"peerDependencies": {
"slate": ">=0.99.0"
}
},
"node_modules/slate-history": { "node_modules/slate-history": {
"version": "0.93.0", "version": "0.110.3",
"resolved": "https://registry.npmjs.org/slate-history/-/slate-history-0.93.0.tgz", "resolved": "https://registry.npmjs.org/slate-history/-/slate-history-0.110.3.tgz",
"integrity": "sha512-Gr1GMGPipRuxIz41jD2/rbvzPj8eyar56TVMyJBvBeIpQSSjNISssvGNDYfJlSWM8eaRqf6DAcxMKzsLCYeX6g==", "integrity": "sha512-sgdff4Usdflmw5ZUbhDkxFwCBQ2qlDKMMkF93w66KdV48vHOgN2BmLrf+2H8SdX8PYIpP/cTB0w8qWC2GwhDVA==",
"license": "MIT",
"dependencies": { "dependencies": {
"is-plain-object": "^5.0.0" "is-plain-object": "^5.0.0"
}, },
@ -10479,30 +10501,35 @@
} }
}, },
"node_modules/slate-react": { "node_modules/slate-react": {
"version": "0.98.4", "version": "0.112.1",
"resolved": "https://registry.npmjs.org/slate-react/-/slate-react-0.98.4.tgz", "resolved": "https://registry.npmjs.org/slate-react/-/slate-react-0.112.1.tgz",
"integrity": "sha512-8Of3v9hFuX8rIRc86LuuBhU9t8ps+9ARKL4yyhCrKQYZ93Ep/LFA3GvPGvtf3zYuVadZ8tkhRH8tbHOGNAndLw==", "integrity": "sha512-V9b+waxPweXqAkSQmKQ1afG4Me6nVQACPpxQtHPIX02N7MXa5f5WilYv+bKt7vKKw+IZC2F0Gjzhv5BekVgP/A==",
"license": "MIT",
"dependencies": { "dependencies": {
"@juggle/resize-observer": "^3.4.0", "@juggle/resize-observer": "^3.4.0",
"@types/is-hotkey": "^0.1.1", "direction": "^1.0.4",
"@types/lodash": "^4.14.149", "is-hotkey": "^0.2.0",
"direction": "^1.0.3",
"is-hotkey": "^0.1.6",
"is-plain-object": "^5.0.0", "is-plain-object": "^5.0.0",
"lodash": "^4.17.4", "lodash": "^4.17.21",
"scroll-into-view-if-needed": "^2.2.20", "scroll-into-view-if-needed": "^3.1.0",
"tiny-invariant": "1.0.6" "tiny-invariant": "1.3.1"
}, },
"peerDependencies": { "peerDependencies": {
"react": ">=16.8.0", "react": ">=18.2.0",
"react-dom": ">=16.8.0", "react-dom": ">=18.2.0",
"slate": ">=0.65.3" "slate": ">=0.99.0",
"slate-dom": ">=0.110.2"
} }
}, },
"node_modules/slate-react/node_modules/is-hotkey": { "node_modules/slate/node_modules/immer": {
"version": "0.1.8", "version": "10.1.1",
"resolved": "https://registry.npmjs.org/is-hotkey/-/is-hotkey-0.1.8.tgz", "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
"integrity": "sha512-qs3NZ1INIS+H+yeo7cD9pDfwYV/jqRh1JG9S9zYrNudkoUQg7OL7ziXqRKu+InFjUIDoP2o6HIkLYMh1pcWgyQ==" "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
"license": "MIT",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/immer"
}
}, },
"node_modules/smob": { "node_modules/smob": {
"version": "1.5.0", "version": "1.5.0",
@ -10866,9 +10893,10 @@
"dev": true "dev": true
}, },
"node_modules/tiny-invariant": { "node_modules/tiny-invariant": {
"version": "1.0.6", "version": "1.3.1",
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.6.tgz", "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
"integrity": "sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==" "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==",
"license": "MIT"
}, },
"node_modules/tiny-warning": { "node_modules/tiny-warning": {
"version": "1.0.3", "version": "1.0.3",

10
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "cinny", "name": "cinny",
"version": "4.3.2", "version": "4.5.1",
"description": "Yet another matrix client", "description": "Yet another matrix client",
"main": "index.js", "main": "index.js",
"type": "module", "type": "module",
@ -73,9 +73,10 @@
"react-range": "1.8.14", "react-range": "1.8.14",
"react-router-dom": "6.20.0", "react-router-dom": "6.20.0",
"sanitize-html": "2.12.1", "sanitize-html": "2.12.1",
"slate": "0.94.1", "slate": "0.112.0",
"slate-history": "0.93.0", "slate-dom": "0.112.2",
"slate-react": "0.98.4", "slate-history": "0.110.3",
"slate-react": "0.112.1",
"tippy.js": "6.3.7", "tippy.js": "6.3.7",
"ua-parser-js": "1.0.35" "ua-parser-js": "1.0.35"
}, },
@ -84,6 +85,7 @@
"@rollup/plugin-inject": "5.0.3", "@rollup/plugin-inject": "5.0.3",
"@rollup/plugin-wasm": "6.1.1", "@rollup/plugin-wasm": "6.1.1",
"@types/file-saver": "2.0.5", "@types/file-saver": "2.0.5",
"@types/is-hotkey": "0.1.10",
"@types/node": "18.11.18", "@types/node": "18.11.18",
"@types/prismjs": "1.26.0", "@types/prismjs": "1.26.0",
"@types/react": "18.2.39", "@types/react": "18.2.39",

12
src/app/components/editor/autocomplete/AutocompleteMenu.tsx
View file

@ -5,6 +5,7 @@ import { Header, Menu, Scroll, config } from 'folds';
import * as css from './AutocompleteMenu.css'; import * as css from './AutocompleteMenu.css';
import { preventScrollWithArrowKey, stopPropagation } from '../../../utils/keyboard'; import { preventScrollWithArrowKey, stopPropagation } from '../../../utils/keyboard';
import { useAlive } from '../../../hooks/useAlive';
type AutocompleteMenuProps = { type AutocompleteMenuProps = {
requestClose: () => void; requestClose: () => void;
@ -12,13 +13,22 @@ type AutocompleteMenuProps = {
children: ReactNode; children: ReactNode;
}; };
export function AutocompleteMenu({ headerContent, requestClose, children }: AutocompleteMenuProps) { export function AutocompleteMenu({ headerContent, requestClose, children }: AutocompleteMenuProps) {
const alive = useAlive();
const handleDeactivate = () => {
if (alive()) {
// The component is unmounted so we will not call for `requestClose`
requestClose();
}
};
return ( return (
<div className={css.AutocompleteMenuBase}> <div className={css.AutocompleteMenuBase}>
<div className={css.AutocompleteMenuContainer}> <div className={css.AutocompleteMenuContainer}>
<FocusTrap <FocusTrap
focusTrapOptions={{ focusTrapOptions={{
initialFocus: false, initialFocus: false,
onDeactivate: () => requestClose(), onPostDeactivate: handleDeactivate,
returnFocusOnDeactivate: false, returnFocusOnDeactivate: false,
clickOutsideDeactivates: true, clickOutsideDeactivates: true,
allowOutsideClick: true, allowOutsideClick: true,

20
src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx
View file

@ -6,11 +6,7 @@ import { Room } from 'matrix-js-sdk';
import { AutocompleteQuery } from './autocompleteQuery'; import { AutocompleteQuery } from './autocompleteQuery';
import { AutocompleteMenu } from './AutocompleteMenu'; import { AutocompleteMenu } from './AutocompleteMenu';
import { useMatrixClient } from '../../../hooks/useMatrixClient'; import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { import { UseAsyncSearchOptions, useAsyncSearch } from '../../../hooks/useAsyncSearch';
SearchItemStrGetter,
UseAsyncSearchOptions,
useAsyncSearch,
} from '../../../hooks/useAsyncSearch';
import { onTabPress } from '../../../utils/keyboard'; import { onTabPress } from '../../../utils/keyboard';
import { createEmoticonElement, moveCursor, replaceWithElement } from '../utils'; import { createEmoticonElement, moveCursor, replaceWithElement } from '../utils';
import { useRecentEmoji } from '../../../hooks/useRecentEmoji'; import { useRecentEmoji } from '../../../hooks/useRecentEmoji';
@ -20,6 +16,7 @@ import { useKeyDown } from '../../../hooks/useKeyDown';
import { mxcUrlToHttp } from '../../../utils/matrix'; import { mxcUrlToHttp } from '../../../utils/matrix';
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication'; import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
import { ImageUsage, PackImageReader } from '../../../plugins/custom-emoji'; import { ImageUsage, PackImageReader } from '../../../plugins/custom-emoji';
import { getEmoticonSearchStr } from '../../../plugins/utils';
type EmoticonCompleteHandler = (key: string, shortcode: string) => void; type EmoticonCompleteHandler = (key: string, shortcode: string) => void;
@ -33,16 +30,11 @@ type EmoticonAutocompleteProps = {
}; };
const SEARCH_OPTIONS: UseAsyncSearchOptions = { const SEARCH_OPTIONS: UseAsyncSearchOptions = {
limit: 20,
matchOptions: { matchOptions: {
contain: true, contain: true,
}, },
}; };
const getEmoticonStr: SearchItemStrGetter<EmoticonSearchItem> = (emoticon) => [
`:${emoticon.shortcode}:`,
];
export function EmoticonAutocomplete({ export function EmoticonAutocomplete({
imagePackRooms, imagePackRooms,
editor, editor,
@ -63,8 +55,12 @@ export function EmoticonAutocomplete({
); );
}, [imagePacks]); }, [imagePacks]);
const [result, search, resetSearch] = useAsyncSearch(searchList, getEmoticonStr, SEARCH_OPTIONS); const [result, search, resetSearch] = useAsyncSearch(
const autoCompleteEmoticon = result ? result.items : recentEmoji; searchList,
getEmoticonSearchStr,
SEARCH_OPTIONS
);
const autoCompleteEmoticon = result ? result.items.slice(0, 20) : recentEmoji;
useEffect(() => { useEffect(() => {
if (query.text) search(query.text); if (query.text) search(query.text);

3
src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
View file

@ -65,7 +65,6 @@ type RoomMentionAutocompleteProps = {
}; };
const SEARCH_OPTIONS: UseAsyncSearchOptions = { const SEARCH_OPTIONS: UseAsyncSearchOptions = {
limit: 20,
matchOptions: { matchOptions: {
contain: true, contain: true,
}, },
@ -97,7 +96,7 @@ export function RoomMentionAutocomplete({
SEARCH_OPTIONS SEARCH_OPTIONS
); );
const autoCompleteRoomIds = result ? result.items : allRooms.slice(0, 20); const autoCompleteRoomIds = result ? result.items.slice(0, 20) : allRooms.slice(0, 20);
useEffect(() => { useEffect(() => {
if (query.text) search(query.text); if (query.text) search(query.text);

4
src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx
View file

@ -74,7 +74,7 @@ const withAllowedMembership = (member: RoomMember): boolean =>
member.membership === Membership.Knock; member.membership === Membership.Knock;
const SEARCH_OPTIONS: UseAsyncSearchOptions = { const SEARCH_OPTIONS: UseAsyncSearchOptions = {
limit: 20, limit: 1000,
matchOptions: { matchOptions: {
contain: true, contain: true,
}, },
@ -97,7 +97,7 @@ export function UserMentionAutocomplete({
const members = useRoomMembers(mx, roomId); const members = useRoomMembers(mx, roomId);
const [result, search, resetSearch] = useAsyncSearch(members, getRoomMemberStr, SEARCH_OPTIONS); const [result, search, resetSearch] = useAsyncSearch(members, getRoomMemberStr, SEARCH_OPTIONS);
const autoCompleteMembers = (result ? result.items : members.slice(0, 20)).filter( const autoCompleteMembers = (result ? result.items.slice(0, 20) : members.slice(0, 20)).filter(
withAllowedMembership withAllowedMembership
); );

236
src/app/components/editor/input.ts
View file

@ -26,48 +26,75 @@ import {
testMatrixTo, testMatrixTo,
} from '../../plugins/matrix-to'; } from '../../plugins/matrix-to';
import { tryDecodeURIComponent } from '../../utils/dom'; import { tryDecodeURIComponent } from '../../utils/dom';
import {
escapeMarkdownInlineSequences,
escapeMarkdownBlockSequences,
} from '../../plugins/markdown';
const markNodeToType: Record<string, MarkType> = { type ProcessTextCallback = (text: string) => string;
b: MarkType.Bold,
strong: MarkType.Bold,
i: MarkType.Italic,
em: MarkType.Italic,
u: MarkType.Underline,
s: MarkType.StrikeThrough,
del: MarkType.StrikeThrough,
code: MarkType.Code,
span: MarkType.Spoiler,
};
const elementToTextMark = (node: Element): MarkType | undefined => { const getText = (node: ChildNode): string => {
const markType = markNodeToType[node.name];
if (!markType) return undefined;
if (markType === MarkType.Spoiler && node.attribs['data-mx-spoiler'] === undefined) {
return undefined;
}
if (
markType === MarkType.Code &&
node.parent &&
'name' in node.parent &&
node.parent.name === 'pre'
) {
return undefined;
}
return markType;
};
const parseNodeText = (node: ChildNode): string => {
if (isText(node)) { if (isText(node)) {
return node.data; return node.data;
} }
if (isTag(node)) { if (isTag(node)) {
return node.children.map((child) => parseNodeText(child)).join(''); return node.children.map((child) => getText(child)).join('');
} }
return ''; return '';
}; };
const elementToInlineNode = (node: Element): MentionElement | EmoticonElement | undefined => { const getInlineNodeMarkType = (node: Element): MarkType | undefined => {
if (node.name === 'b' || node.name === 'strong') {
return MarkType.Bold;
}
if (node.name === 'i' || node.name === 'em') {
return MarkType.Italic;
}
if (node.name === 'u') {
return MarkType.Underline;
}
if (node.name === 's' || node.name === 'del') {
return MarkType.StrikeThrough;
}
if (node.name === 'code') {
if (node.parent && 'name' in node.parent && node.parent.name === 'pre') {
return undefined; // Don't apply `Code` mark inside a <pre> tag
}
return MarkType.Code;
}
if (node.name === 'span' && node.attribs['data-mx-spoiler'] !== undefined) {
return MarkType.Spoiler;
}
return undefined;
};
const getInlineMarkElement = (
markType: MarkType,
node: Element,
getChild: (child: ChildNode) => InlineElement[]
): InlineElement[] => {
const children = node.children.flatMap(getChild);
const mdSequence = node.attribs['data-md'];
if (mdSequence !== undefined) {
children.unshift({ text: mdSequence });
children.push({ text: mdSequence });
return children;
}
children.forEach((child) => {
if (Text.isText(child)) {
child[markType] = true;
}
});
return children;
};
const getInlineNonMarkElement = (node: Element): MentionElement | EmoticonElement | undefined => {
if (node.name === 'img' && node.attribs['data-mx-emoticon'] !== undefined) { if (node.name === 'img' && node.attribs['data-mx-emoticon'] !== undefined) {
const { src, alt } = node.attribs; const { src, alt } = node.attribs;
if (!src) return undefined; if (!src) return undefined;
@ -79,13 +106,13 @@ const elementToInlineNode = (node: Element): MentionElement | EmoticonElement |
if (testMatrixTo(href)) { if (testMatrixTo(href)) {
const userMention = parseMatrixToUser(href); const userMention = parseMatrixToUser(href);
if (userMention) { if (userMention) {
return createMentionElement(userMention, parseNodeText(node) || userMention, false); return createMentionElement(userMention, getText(node) || userMention, false);
} }
const roomMention = parseMatrixToRoom(href); const roomMention = parseMatrixToRoom(href);
if (roomMention) { if (roomMention) {
return createMentionElement( return createMentionElement(
roomMention.roomIdOrAlias, roomMention.roomIdOrAlias,
parseNodeText(node) || roomMention.roomIdOrAlias, getText(node) || roomMention.roomIdOrAlias,
false, false,
undefined, undefined,
roomMention.viaServers roomMention.viaServers
@ -95,7 +122,7 @@ const elementToInlineNode = (node: Element): MentionElement | EmoticonElement |
if (eventMention) { if (eventMention) {
return createMentionElement( return createMentionElement(
eventMention.roomIdOrAlias, eventMention.roomIdOrAlias,
parseNodeText(node) || eventMention.roomIdOrAlias, getText(node) || eventMention.roomIdOrAlias,
false, false,
eventMention.eventId, eventMention.eventId,
eventMention.viaServers eventMention.viaServers
@ -106,44 +133,40 @@ const elementToInlineNode = (node: Element): MentionElement | EmoticonElement |
return undefined; return undefined;
}; };
const parseInlineNodes = (node: ChildNode): InlineElement[] => { const getInlineElement = (node: ChildNode, processText: ProcessTextCallback): InlineElement[] => {
if (isText(node)) { if (isText(node)) {
return [{ text: node.data }]; return [{ text: processText(node.data) }];
} }
if (isTag(node)) { if (isTag(node)) {
const markType = elementToTextMark(node); const markType = getInlineNodeMarkType(node);
if (markType) { if (markType) {
const children = node.children.flatMap(parseInlineNodes); return getInlineMarkElement(markType, node, (child) => {
if (node.attribs['data-md'] !== undefined) { if (markType === MarkType.Code) return [{ text: getText(child) }];
children.unshift({ text: node.attribs['data-md'] }); return getInlineElement(child, processText);
children.push({ text: node.attribs['data-md'] }); });
} else {
children.forEach((child) => {
if (Text.isText(child)) {
child[markType] = true;
}
});
}
return children;
} }
const inlineNode = elementToInlineNode(node); const inlineNode = getInlineNonMarkElement(node);
if (inlineNode) return [inlineNode]; if (inlineNode) return [inlineNode];
if (node.name === 'a') { if (node.name === 'a') {
const children = node.childNodes.flatMap(parseInlineNodes); const children = node.childNodes.flatMap((child) => getInlineElement(child, processText));
children.unshift({ text: '[' }); children.unshift({ text: '[' });
children.push({ text: `](${node.attribs.href})` }); children.push({ text: `](${node.attribs.href})` });
return children; return children;
} }
return node.childNodes.flatMap(parseInlineNodes); return node.childNodes.flatMap((child) => getInlineElement(child, processText));
} }
return []; return [];
}; };
const parseBlockquoteNode = (node: Element): BlockQuoteElement[] | ParagraphElement[] => { const parseBlockquoteNode = (
node: Element,
processText: ProcessTextCallback
): BlockQuoteElement[] | ParagraphElement[] => {
const quoteLines: Array<InlineElement[]> = []; const quoteLines: Array<InlineElement[]> = [];
let lineHolder: InlineElement[] = []; let lineHolder: InlineElement[] = [];
@ -156,7 +179,7 @@ const parseBlockquoteNode = (node: Element): BlockQuoteElement[] | ParagraphElem
node.children.forEach((child) => { node.children.forEach((child) => {
if (isText(child)) { if (isText(child)) {
lineHolder.push({ text: child.data }); lineHolder.push({ text: processText(child.data) });
return; return;
} }
if (isTag(child)) { if (isTag(child)) {
@ -168,19 +191,20 @@ const parseBlockquoteNode = (node: Element): BlockQuoteElement[] | ParagraphElem
if (child.name === 'p') { if (child.name === 'p') {
appendLine(); appendLine();
quoteLines.push(child.children.flatMap((c) => parseInlineNodes(c))); quoteLines.push(child.children.flatMap((c) => getInlineElement(c, processText)));
return; return;
} }
parseInlineNodes(child).forEach((inlineNode) => lineHolder.push(inlineNode)); lineHolder.push(...getInlineElement(child, processText));
} }
}); });
appendLine(); appendLine();
if (node.attribs['data-md'] !== undefined) { const mdSequence = node.attribs['data-md'];
if (mdSequence !== undefined) {
return quoteLines.map((lineChildren) => ({ return quoteLines.map((lineChildren) => ({
type: BlockType.Paragraph, type: BlockType.Paragraph,
children: [{ text: `${node.attribs['data-md']} ` }, ...lineChildren], children: [{ text: `${mdSequence} ` }, ...lineChildren],
})); }));
} }
@ -195,22 +219,19 @@ const parseBlockquoteNode = (node: Element): BlockQuoteElement[] | ParagraphElem
]; ];
}; };
const parseCodeBlockNode = (node: Element): CodeBlockElement[] | ParagraphElement[] => { const parseCodeBlockNode = (node: Element): CodeBlockElement[] | ParagraphElement[] => {
const codeLines = parseNodeText(node).trim().split('\n'); const codeLines = getText(node).trim().split('\n');
if (node.attribs['data-md'] !== undefined) { const mdSequence = node.attribs['data-md'];
const pLines = codeLines.map<ParagraphElement>((lineText) => ({ if (mdSequence !== undefined) {
const pLines = codeLines.map<ParagraphElement>((text) => ({
type: BlockType.Paragraph, type: BlockType.Paragraph,
children: [ children: [{ text }],
{
text: lineText,
},
],
})); }));
const childCode = node.children[0]; const childCode = node.children[0];
const className = const className =
isTag(childCode) && childCode.tagName === 'code' ? childCode.attribs.class ?? '' : ''; isTag(childCode) && childCode.tagName === 'code' ? childCode.attribs.class ?? '' : '';
const prefix = { text: `${node.attribs['data-md']}${className.replace('language-', '')}` }; const prefix = { text: `${mdSequence}${className.replace('language-', '')}` };
const suffix = { text: node.attribs['data-md'] }; const suffix = { text: mdSequence };
return [ return [
{ type: BlockType.Paragraph, children: [prefix] }, { type: BlockType.Paragraph, children: [prefix] },
...pLines, ...pLines,
@ -221,19 +242,16 @@ const parseCodeBlockNode = (node: Element): CodeBlockElement[] | ParagraphElemen
return [ return [
{ {
type: BlockType.CodeBlock, type: BlockType.CodeBlock,
children: codeLines.map<CodeLineElement>((lineTxt) => ({ children: codeLines.map<CodeLineElement>((text) => ({
type: BlockType.CodeLine, type: BlockType.CodeLine,
children: [ children: [{ text }],
{
text: lineTxt,
},
],
})), })),
}, },
]; ];
}; };
const parseListNode = ( const parseListNode = (
node: Element node: Element,
processText: ProcessTextCallback
): OrderedListElement[] | UnorderedListElement[] | ParagraphElement[] => { ): OrderedListElement[] | UnorderedListElement[] | ParagraphElement[] => {
const listLines: Array<InlineElement[]> = []; const listLines: Array<InlineElement[]> = [];
let lineHolder: InlineElement[] = []; let lineHolder: InlineElement[] = [];
@ -247,7 +265,7 @@ const parseListNode = (
node.children.forEach((child) => { node.children.forEach((child) => {
if (isText(child)) { if (isText(child)) {
lineHolder.push({ text: child.data }); lineHolder.push({ text: processText(child.data) });
return; return;
} }
if (isTag(child)) { if (isTag(child)) {
@ -259,17 +277,18 @@ const parseListNode = (
if (child.name === 'li') { if (child.name === 'li') {
appendLine(); appendLine();
listLines.push(child.children.flatMap((c) => parseInlineNodes(c))); listLines.push(child.children.flatMap((c) => getInlineElement(c, processText)));
return; return;
} }
parseInlineNodes(child).forEach((inlineNode) => lineHolder.push(inlineNode)); lineHolder.push(...getInlineElement(child, processText));
} }
}); });
appendLine(); appendLine();
if (node.attribs['data-md'] !== undefined) { const mdSequence = node.attribs['data-md'];
const prefix = node.attribs['data-md'] || '-'; if (mdSequence !== undefined) {
const prefix = mdSequence || '-';
const [starOrHyphen] = prefix.match(/^\*|-$/) ?? []; const [starOrHyphen] = prefix.match(/^\*|-$/) ?? [];
return listLines.map((lineChildren) => ({ return listLines.map((lineChildren) => ({
type: BlockType.Paragraph, type: BlockType.Paragraph,
@ -302,17 +321,21 @@ const parseListNode = (
}, },
]; ];
}; };
const parseHeadingNode = (node: Element): HeadingElement | ParagraphElement => { const parseHeadingNode = (
const children = node.children.flatMap((child) => parseInlineNodes(child)); node: Element,
processText: ProcessTextCallback
): HeadingElement | ParagraphElement => {
const children = node.children.flatMap((child) => getInlineElement(child, processText));
const headingMatch = node.name.match(/^h([123456])$/); const headingMatch = node.name.match(/^h([123456])$/);
const [, g1AsLevel] = headingMatch ?? ['h3', '3']; const [, g1AsLevel] = headingMatch ?? ['h3', '3'];
const level = parseInt(g1AsLevel, 10); const level = parseInt(g1AsLevel, 10);
if (node.attribs['data-md'] !== undefined) { const mdSequence = node.attribs['data-md'];
if (mdSequence !== undefined) {
return { return {
type: BlockType.Paragraph, type: BlockType.Paragraph,
children: [{ text: `${node.attribs['data-md']} ` }, ...children], children: [{ text: `${mdSequence} ` }, ...children],
}; };
} }
@ -323,7 +346,11 @@ const parseHeadingNode = (node: Element): HeadingElement | ParagraphElement => {
}; };
}; };
export const domToEditorInput = (domNodes: ChildNode[]): Descendant[] => { export const domToEditorInput = (
domNodes: ChildNode[],
processText: ProcessTextCallback,
processLineStartText: ProcessTextCallback
): Descendant[] => {
const children: Descendant[] = []; const children: Descendant[] = [];
let lineHolder: InlineElement[] = []; let lineHolder: InlineElement[] = [];
@ -340,7 +367,14 @@ export const domToEditorInput = (domNodes: ChildNode[]): Descendant[] => {
domNodes.forEach((node) => { domNodes.forEach((node) => {
if (isText(node)) { if (isText(node)) {
lineHolder.push({ text: node.data }); if (lineHolder.length === 0) {
// we are inserting first part of line
// it may contain block markdown starting data
// that we may need to escape.
lineHolder.push({ text: processLineStartText(node.data) });
return;
}
lineHolder.push({ text: processText(node.data) });
return; return;
} }
if (isTag(node)) { if (isTag(node)) {
@ -354,14 +388,14 @@ export const domToEditorInput = (domNodes: ChildNode[]): Descendant[] => {
appendLine(); appendLine();
children.push({ children.push({
type: BlockType.Paragraph, type: BlockType.Paragraph,
children: node.children.flatMap((child) => parseInlineNodes(child)), children: node.children.flatMap((child) => getInlineElement(child, processText)),
}); });
return; return;
} }
if (node.name === 'blockquote') { if (node.name === 'blockquote') {
appendLine(); appendLine();
children.push(...parseBlockquoteNode(node)); children.push(...parseBlockquoteNode(node, processText));
return; return;
} }
if (node.name === 'pre') { if (node.name === 'pre') {
@ -371,17 +405,17 @@ export const domToEditorInput = (domNodes: ChildNode[]): Descendant[] => {
} }
if (node.name === 'ol' || node.name === 'ul') { if (node.name === 'ol' || node.name === 'ul') {
appendLine(); appendLine();
children.push(...parseListNode(node)); children.push(...parseListNode(node, processText));
return; return;
} }
if (node.name.match(/^h[123456]$/)) { if (node.name.match(/^h[123456]$/)) {
appendLine(); appendLine();
children.push(parseHeadingNode(node)); children.push(parseHeadingNode(node, processText));
return; return;
} }
parseInlineNodes(node).forEach((inlineNode) => lineHolder.push(inlineNode)); lineHolder.push(...getInlineElement(node, processText));
} }
}); });
appendLine(); appendLine();
@ -389,21 +423,31 @@ export const domToEditorInput = (domNodes: ChildNode[]): Descendant[] => {
return children; return children;
}; };
export const htmlToEditorInput = (unsafeHtml: string): Descendant[] => { export const htmlToEditorInput = (unsafeHtml: string, markdown?: boolean): Descendant[] => {
const sanitizedHtml = sanitizeCustomHtml(unsafeHtml); const sanitizedHtml = sanitizeCustomHtml(unsafeHtml);
const processText = (partText: string) => {
if (!markdown) return partText;
return escapeMarkdownInlineSequences(partText);
};
const domNodes = parse(sanitizedHtml); const domNodes = parse(sanitizedHtml);
const editorNodes = domToEditorInput(domNodes); const editorNodes = domToEditorInput(domNodes, processText, (lineStartText: string) => {
if (!markdown) return lineStartText;
return escapeMarkdownBlockSequences(lineStartText, processText);
});
return editorNodes; return editorNodes;
}; };
export const plainToEditorInput = (text: string): Descendant[] => { export const plainToEditorInput = (text: string, markdown?: boolean): Descendant[] => {
const editorNodes: Descendant[] = text.split('\n').map((lineText) => { const editorNodes: Descendant[] = text.split('\n').map((lineText) => {
const paragraphNode: ParagraphElement = { const paragraphNode: ParagraphElement = {
type: BlockType.Paragraph, type: BlockType.Paragraph,
children: [ children: [
{ {
text: lineText, text: markdown
? escapeMarkdownBlockSequences(lineText, escapeMarkdownInlineSequences)
: lineText,
}, },
], ],
}; };

64
src/app/components/editor/output.ts
View file

@ -1,10 +1,17 @@
import { Descendant, Text } from 'slate'; import { Descendant, Editor, Text } from 'slate';
import { MatrixClient } from 'matrix-js-sdk';
import { sanitizeText } from '../../utils/sanitize'; import { sanitizeText } from '../../utils/sanitize';
import { BlockType } from './types'; import { BlockType } from './types';
import { CustomElement } from './slate'; import { CustomElement } from './slate';
import { parseBlockMD, parseInlineMD } from '../../plugins/markdown'; import {
parseBlockMD,
parseInlineMD,
unescapeMarkdownBlockSequences,
unescapeMarkdownInlineSequences,
} from '../../plugins/markdown';
import { findAndReplace } from '../../utils/findAndReplace'; import { findAndReplace } from '../../utils/findAndReplace';
import { sanitizeForRegex } from '../../utils/regex';
import { getCanonicalAliasOrRoomId, isUserId } from '../../utils/matrix';
export type OutputOptions = { export type OutputOptions = {
allowTextFormatting?: boolean; allowTextFormatting?: boolean;
@ -18,7 +25,7 @@ const textToCustomHtml = (node: Text, opts: OutputOptions): string => {
if (node.bold) string = `<strong>${string}</strong>`; if (node.bold) string = `<strong>${string}</strong>`;
if (node.italic) string = `<i>${string}</i>`; if (node.italic) string = `<i>${string}</i>`;
if (node.underline) string = `<u>${string}</u>`; if (node.underline) string = `<u>${string}</u>`;
if (node.strikeThrough) string = `<del>${string}</del>`; if (node.strikeThrough) string = `<s>${string}</s>`;
if (node.code) string = `<code>${string}</code>`; if (node.code) string = `<code>${string}</code>`;
if (node.spoiler) string = `<span data-mx-spoiler>${string}</span>`; if (node.spoiler) string = `<span data-mx-spoiler>${string}</span>`;
} }
@ -101,7 +108,8 @@ export const toMatrixCustomHTML = (
allowBlockMarkdown: false, allowBlockMarkdown: false,
}) })
.replace(/<br\/>$/, '\n') .replace(/<br\/>$/, '\n')
.replace(/^&gt;/, '>'); .replace(/^(\\*)&gt;/, '$1>');
markdownLines += line; markdownLines += line;
if (index === targetNodes.length - 1) { if (index === targetNodes.length - 1) {
return parseBlockMD(markdownLines, ignoreHTMLParseInlineMD); return parseBlockMD(markdownLines, ignoreHTMLParseInlineMD);
@ -156,11 +164,14 @@ const elementToPlainText = (node: CustomElement, children: string): string => {
} }
}; };
export const toPlainText = (node: Descendant | Descendant[]): string => { export const toPlainText = (node: Descendant | Descendant[], isMarkdown: boolean): string => {
if (Array.isArray(node)) return node.map((n) => toPlainText(n)).join(''); if (Array.isArray(node)) return node.map((n) => toPlainText(n, isMarkdown)).join('');
if (Text.isText(node)) return node.text; if (Text.isText(node))
return isMarkdown
? unescapeMarkdownBlockSequences(node.text, unescapeMarkdownInlineSequences)
: node.text;
const children = node.children.map((n) => toPlainText(n)).join(''); const children = node.children.map((n) => toPlainText(n, isMarkdown)).join('');
return elementToPlainText(node, children); return elementToPlainText(node, children);
}; };
@ -179,9 +190,42 @@ export const customHtmlEqualsPlainText = (customHtml: string, plain: string): bo
export const trimCustomHtml = (customHtml: string) => customHtml.replace(/<br\/>$/g, '').trim(); export const trimCustomHtml = (customHtml: string) => customHtml.replace(/<br\/>$/g, '').trim();
export const trimCommand = (cmdName: string, str: string) => { export const trimCommand = (cmdName: string, str: string) => {
const cmdRegX = new RegExp(`^(\\s+)?(\\/${cmdName})([^\\S\n]+)?`); const cmdRegX = new RegExp(`^(\\s+)?(\\/${sanitizeForRegex(cmdName)})([^\\S\n]+)?`);
const match = str.match(cmdRegX); const match = str.match(cmdRegX);
if (!match) return str; if (!match) return str;
return str.slice(match[0].length); return str.slice(match[0].length);
}; };
export type MentionsData = {
room: boolean;
users: Set<string>;
};
export const getMentions = (mx: MatrixClient, roomId: string, editor: Editor): MentionsData => {
const mentionData: MentionsData = {
room: false,
users: new Set(),
};
const parseMentions = (node: Descendant): void => {
if (Text.isText(node)) return;
if (node.type === BlockType.CodeBlock) return;
if (node.type === BlockType.Mention) {
if (node.id === getCanonicalAliasOrRoomId(mx, roomId)) {
mentionData.room = true;
}
if (isUserId(node.id) && node.id !== mx.getUserId()) {
mentionData.users.add(node.id);
}
return;
}
node.children.forEach(parseMentions);
};
editor.children.forEach(parseMentions);
return mentionData;
};

20
src/app/components/emoji-board/EmojiBoard.tsx
View file

@ -50,6 +50,7 @@ import { addRecentEmoji } from '../../plugins/recent-emoji';
import { mobileOrTablet } from '../../utils/user-agent'; import { mobileOrTablet } from '../../utils/user-agent';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication'; import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { ImagePack, ImageUsage, PackImageReader } from '../../plugins/custom-emoji'; import { ImagePack, ImageUsage, PackImageReader } from '../../plugins/custom-emoji';
import { getEmoticonSearchStr } from '../../plugins/utils';
const RECENT_GROUP_ID = 'recent_group'; const RECENT_GROUP_ID = 'recent_group';
const SEARCH_GROUP_ID = 'search_group'; const SEARCH_GROUP_ID = 'search_group';
@ -636,15 +637,8 @@ export const NativeEmojiGroups = memo(
) )
); );
const getSearchListItemStr = (item: PackImageReader | IEmoji) => {
const shortcode = `:${item.shortcode}:`;
if ('body' in item) {
return [shortcode, item.body ?? ''];
}
return shortcode;
};
const SEARCH_OPTIONS: UseAsyncSearchOptions = { const SEARCH_OPTIONS: UseAsyncSearchOptions = {
limit: 26, limit: 1000,
matchOptions: { matchOptions: {
contain: true, contain: true,
}, },
@ -696,10 +690,12 @@ export function EmojiBoard({
const [result, search, resetSearch] = useAsyncSearch( const [result, search, resetSearch] = useAsyncSearch(
searchList, searchList,
getSearchListItemStr, getEmoticonSearchStr,
SEARCH_OPTIONS SEARCH_OPTIONS
); );
const searchedItems = result?.items.slice(0, 100);
const handleOnChange: ChangeEventHandler<HTMLInputElement> = useDebounce( const handleOnChange: ChangeEventHandler<HTMLInputElement> = useDebounce(
useCallback( useCallback(
(evt) => { (evt) => {
@ -920,13 +916,13 @@ export function EmojiBoard({
direction="Column" direction="Column"
gap="200" gap="200"
> >
{result && ( {searchedItems && (
<SearchEmojiGroup <SearchEmojiGroup
mx={mx} mx={mx}
tab={tab} tab={tab}
id={SEARCH_GROUP_ID} id={SEARCH_GROUP_ID}
label={result.items.length ? 'Search Results' : 'No Results found'} label={searchedItems.length ? 'Search Results' : 'No Results found'}
emojis={result.items} emojis={searchedItems}
useAuthentication={useAuthentication} useAuthentication={useAuthentication}
/> />
)} )}

79
src/app/components/message/FileHeader.tsx
View file

@ -1,22 +1,81 @@
import { Badge, Box, Text, as, toRem } from 'folds'; import { Badge, Box, Icon, IconButton, Icons, Spinner, Text, as, toRem } from 'folds';
import React from 'react'; import React, { ReactNode, useCallback } from 'react';
import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
import FileSaver from 'file-saver';
import { mimeTypeToExt } from '../../utils/mimeTypes'; import { mimeTypeToExt } from '../../utils/mimeTypes';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
import {
decryptFile,
downloadEncryptedMedia,
downloadMedia,
mxcUrlToHttp,
} from '../../utils/matrix';
const badgeStyles = { maxWidth: toRem(100) }; const badgeStyles = { maxWidth: toRem(100) };
type FileDownloadButtonProps = {
filename: string;
url: string;
mimeType: string;
encInfo?: EncryptedAttachmentInfo;
};
export function FileDownloadButton({ filename, url, mimeType, encInfo }: FileDownloadButtonProps) {
const mx = useMatrixClient();
const useAuthentication = useMediaAuthentication();
const [downloadState, download] = useAsyncCallback(
useCallback(async () => {
const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
const fileContent = encInfo
? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo))
: await downloadMedia(mediaUrl);
const fileURL = URL.createObjectURL(fileContent);
FileSaver.saveAs(fileURL, filename);
return fileURL;
}, [mx, url, useAuthentication, mimeType, encInfo, filename])
);
const downloading = downloadState.status === AsyncStatus.Loading;
const hasError = downloadState.status === AsyncStatus.Error;
return (
<IconButton
disabled={downloading}
onClick={download}
variant={hasError ? 'Critical' : 'SurfaceVariant'}
size="300"
radii="300"
>
{downloading ? (
<Spinner size="100" variant={hasError ? 'Critical' : 'Secondary'} />
) : (
<Icon size="100" src={Icons.Download} />
)}
</IconButton>
);
}
export type FileHeaderProps = { export type FileHeaderProps = {
body: string; body: string;
mimeType: string; mimeType: string;
after?: ReactNode;
}; };
export const FileHeader = as<'div', FileHeaderProps>(({ body, mimeType, ...props }, ref) => ( export const FileHeader = as<'div', FileHeaderProps>(({ body, mimeType, after, ...props }, ref) => (
<Box alignItems="Center" gap="200" grow="Yes" {...props} ref={ref}> <Box alignItems="Center" gap="200" grow="Yes" {...props} ref={ref}>
<Badge style={badgeStyles} variant="Secondary" radii="Pill"> <Box shrink="No">
<Text size="O400" truncate> <Badge style={badgeStyles} variant="Secondary" radii="Pill">
{mimeTypeToExt(mimeType)} <Text size="O400" truncate>
{mimeTypeToExt(mimeType)}
</Text>
</Badge>
</Box>
<Box grow="Yes">
<Text size="T300" truncate>
{body}
</Text> </Text>
</Badge> </Box>
<Text size="T300" truncate> {after}
{body}
</Text>
</Box> </Box>
)); ));

32
src/app/components/message/MsgTypeRenderers.tsx
View file

@ -28,7 +28,7 @@ import {
import { FALLBACK_MIMETYPE, getBlobSafeMimeType } from '../../utils/mimeTypes'; import { FALLBACK_MIMETYPE, getBlobSafeMimeType } from '../../utils/mimeTypes';
import { parseGeoUri, scaleYDimension } from '../../utils/common'; import { parseGeoUri, scaleYDimension } from '../../utils/common';
import { Attachment, AttachmentBox, AttachmentContent, AttachmentHeader } from './attachment'; import { Attachment, AttachmentBox, AttachmentContent, AttachmentHeader } from './attachment';
import { FileHeader } from './FileHeader'; import { FileHeader, FileDownloadButton } from './FileHeader';
export function MBadEncrypted() { export function MBadEncrypted() {
return ( return (
@ -245,8 +245,24 @@ export function MVideo({ content, renderAsFile, renderVideoContent, outlined }:
const height = scaleYDimension(videoInfo.w || 400, 400, videoInfo.h || 400); const height = scaleYDimension(videoInfo.w || 400, 400, videoInfo.h || 400);
const filename = content.filename ?? content.body ?? 'Video';
return ( return (
<Attachment outlined={outlined}> <Attachment outlined={outlined}>
<AttachmentHeader>
<FileHeader
body={filename}
mimeType={safeMimeType}
after={
<FileDownloadButton
filename={filename}
url={mxcUrl}
mimeType={safeMimeType}
encInfo={content.file}
/>
}
/>
</AttachmentHeader>
<AttachmentBox <AttachmentBox
style={{ style={{
height: toRem(height < 48 ? 48 : height), height: toRem(height < 48 ? 48 : height),
@ -290,10 +306,22 @@ export function MAudio({ content, renderAsFile, renderAudioContent, outlined }:
return <BrokenContent />; return <BrokenContent />;
} }
const filename = content.filename ?? content.body ?? 'Audio';
return ( return (
<Attachment outlined={outlined}> <Attachment outlined={outlined}>
<AttachmentHeader> <AttachmentHeader>
<FileHeader body={content.filename ?? content.body ?? 'Audio'} mimeType={safeMimeType} /> <FileHeader
body={filename}
mimeType={safeMimeType}
after={
<FileDownloadButton
filename={filename}
url={mxcUrl}
mimeType={safeMimeType}
encInfo={content.file}
/>
}
/>
</AttachmentHeader> </AttachmentHeader>
<AttachmentBox> <AttachmentBox>
<AttachmentContent> <AttachmentContent>

5
src/app/components/text-viewer/TextViewer.css.ts
View file

@ -31,8 +31,11 @@ export const TextViewerContent = style([
export const TextViewerPre = style([ export const TextViewerPre = style([
DefaultReset, DefaultReset,
{ {
padding: config.space.S600,
whiteSpace: 'pre-wrap', whiteSpace: 'pre-wrap',
wordBreak: 'break-word', wordBreak: 'break-word',
}, },
]); ]);
export const TextViewerPrePadding = style({
padding: config.space.S600,
});

38
src/app/components/text-viewer/TextViewer.tsx
View file

@ -1,5 +1,5 @@
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
import React, { Suspense, lazy } from 'react'; import React, { ComponentProps, HTMLAttributes, Suspense, forwardRef, lazy } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { Box, Chip, Header, Icon, IconButton, Icons, Scroll, Text, as } from 'folds'; import { Box, Chip, Header, Icon, IconButton, Icons, Scroll, Text, as } from 'folds';
import { ErrorBoundary } from 'react-error-boundary'; import { ErrorBoundary } from 'react-error-boundary';
@ -8,6 +8,29 @@ import { copyToClipboard } from '../../utils/dom';
const ReactPrism = lazy(() => import('../../plugins/react-prism/ReactPrism')); const ReactPrism = lazy(() => import('../../plugins/react-prism/ReactPrism'));
type TextViewerContentProps = {
text: string;
langName: string;
size?: ComponentProps<typeof Text>['size'];
} & HTMLAttributes<HTMLPreElement>;
export const TextViewerContent = forwardRef<HTMLPreElement, TextViewerContentProps>(
({ text, langName, size, className, ...props }, ref) => (
<Text
as="pre"
size={size}
className={classNames(css.TextViewerPre, `language-${langName}`, className)}
{...props}
ref={ref}
>
<ErrorBoundary fallback={<code>{text}</code>}>
<Suspense fallback={<code>{text}</code>}>
<ReactPrism>{(codeRef) => <code ref={codeRef}>{text}</code>}</ReactPrism>
</Suspense>
</ErrorBoundary>
</Text>
)
);
export type TextViewerProps = { export type TextViewerProps = {
name: string; name: string;
text: string; text: string;
@ -43,6 +66,7 @@ export const TextViewer = as<'div', TextViewerProps>(
</Chip> </Chip>
</Box> </Box>
</Header> </Header>
<Box <Box
grow="Yes" grow="Yes"
className={css.TextViewerContent} className={css.TextViewerContent}
@ -50,13 +74,11 @@ export const TextViewer = as<'div', TextViewerProps>(
alignItems="Center" alignItems="Center"
> >
<Scroll hideTrack variant="Background" visibility="Hover"> <Scroll hideTrack variant="Background" visibility="Hover">
<Text as="pre" className={classNames(css.TextViewerPre, `language-${langName}`)}> <TextViewerContent
<ErrorBoundary fallback={<code>{text}</code>}> className={css.TextViewerPrePadding}
<Suspense fallback={<code>{text}</code>}> text={text}
<ReactPrism>{(codeRef) => <code ref={codeRef}>{text}</code>}</ReactPrism> langName={langName}
</Suspense> />
</ErrorBoundary>
</Text>
</Scroll> </Scroll>
</Box> </Box>
</Box> </Box>

89
src/app/components/upload-card/UploadCardRenderer.tsx
View file

@ -1,5 +1,5 @@
import React, { useCallback, useEffect } from 'react'; import React, { useEffect } from 'react';
import { Chip, Icon, IconButton, Icons, Text, Tooltip, TooltipProvider, color } from 'folds'; import { Box, Chip, Icon, IconButton, Icons, Text, color, config, toRem } from 'folds';
import { UploadCard, UploadCardError, UploadCardProgress } from './UploadCard'; import { UploadCard, UploadCardError, UploadCardProgress } from './UploadCard';
import { UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload'; import { UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload';
import { useMatrixClient } from '../../hooks/useMatrixClient'; import { useMatrixClient } from '../../hooks/useMatrixClient';
@ -10,11 +10,60 @@ import {
TUploadItem, TUploadItem,
TUploadMetadata, TUploadMetadata,
} from '../../state/room/roomInputDrafts'; } from '../../state/room/roomInputDrafts';
import { useObjectURL } from '../../hooks/useObjectURL';
type ImagePreviewProps = { fileItem: TUploadItem; onSpoiler: (marked: boolean) => void };
function ImagePreview({ fileItem, onSpoiler }: ImagePreviewProps) {
const { originalFile, metadata } = fileItem;
const fileUrl = useObjectURL(originalFile);
return fileUrl ? (
<Box
style={{
borderRadius: config.radii.R300,
overflow: 'hidden',
backgroundColor: 'black',
position: 'relative',
}}
>
<img
style={{
objectFit: 'contain',
width: '100%',
height: toRem(152),
filter: fileItem.metadata.markedAsSpoiler ? 'blur(44px)' : undefined,
}}
src={fileUrl}
alt={originalFile.name}
/>
<Box
justifyContent="End"
style={{
position: 'absolute',
bottom: config.space.S100,
left: config.space.S100,
right: config.space.S100,
}}
>
<Chip
variant={metadata.markedAsSpoiler ? 'Warning' : 'Secondary'}
fill="Soft"
radii="Pill"
aria-pressed={metadata.markedAsSpoiler}
before={<Icon src={Icons.EyeBlind} size="50" />}
onClick={() => onSpoiler(!metadata.markedAsSpoiler)}
>
<Text size="B300">Spoiler</Text>
</Chip>
</Box>
</Box>
) : null;
}
type UploadCardRendererProps = { type UploadCardRendererProps = {
isEncrypted?: boolean; isEncrypted?: boolean;
fileItem: TUploadItem; fileItem: TUploadItem;
setMetadata: (metadata: TUploadMetadata) => void; setMetadata: (fileItem: TUploadItem, metadata: TUploadMetadata) => void;
onRemove: (file: TUploadContent) => void; onRemove: (file: TUploadContent) => void;
onComplete?: (upload: UploadSuccess) => void; onComplete?: (upload: UploadSuccess) => void;
}; };
@ -33,9 +82,9 @@ export function UploadCardRenderer({
if (upload.status === UploadStatus.Idle) startUpload(); if (upload.status === UploadStatus.Idle) startUpload();
const toggleSpoiler = useCallback(() => { const handleSpoiler = (marked: boolean) => {
setMetadata({ ...metadata, markedAsSpoiler: !metadata.markedAsSpoiler }); setMetadata(fileItem, { ...metadata, markedAsSpoiler: marked });
}, [setMetadata, metadata]); };
const removeUpload = () => { const removeUpload = () => {
cancelUpload(); cancelUpload();
@ -66,31 +115,6 @@ export function UploadCardRenderer({
<Text size="B300">Retry</Text> <Text size="B300">Retry</Text>
</Chip> </Chip>
)} )}
{(file.type.startsWith('image') || file.type.startsWith('video')) && (
<TooltipProvider
tooltip={
<Tooltip variant="SurfaceVariant">
<Text>Mark as Spoiler</Text>
</Tooltip>
}
position="Top"
align="Center"
>
{(triggerRef) => (
<IconButton
ref={triggerRef}
onClick={toggleSpoiler}
aria-label="Mark as Spoiler"
variant="SurfaceVariant"
radii="Pill"
size="300"
aria-pressed={metadata.markedAsSpoiler}
>
<Icon src={Icons.EyeBlind} size="200" />
</IconButton>
)}
</TooltipProvider>
)}
<IconButton <IconButton
onClick={removeUpload} onClick={removeUpload}
aria-label="Cancel Upload" aria-label="Cancel Upload"
@ -104,6 +128,9 @@ export function UploadCardRenderer({
} }
bottom={ bottom={
<> <>
{fileItem.originalFile.type.startsWith('image') && (
<ImagePreview fileItem={fileItem} onSpoiler={handleSpoiler} />
)}
{upload.status === UploadStatus.Idle && ( {upload.status === UploadStatus.Idle && (
<UploadCardProgress sentBytes={0} totalBytes={file.size} /> <UploadCardProgress sentBytes={0} totalBytes={file.size} />
)} )}

4
src/app/features/lobby/HierarchyItemMenu.tsx
View file

@ -155,7 +155,7 @@ function SettingsMenuItem({
disabled?: boolean; disabled?: boolean;
}) { }) {
const handleSettings = () => { const handleSettings = () => {
if (item.space) { if ('space' in item) {
openSpaceSettings(item.roomId); openSpaceSettings(item.roomId);
} else { } else {
toggleRoomSettings(item.roomId); toggleRoomSettings(item.roomId);
@ -271,7 +271,7 @@ export function HierarchyItemMenu({
</Text> </Text>
</MenuItem> </MenuItem>
{promptLeave && {promptLeave &&
(item.space ? ( ('space' in item ? (
<LeaveSpacePrompt <LeaveSpacePrompt
roomId={item.roomId} roomId={item.roomId}
onDone={handleRequestClose} onDone={handleRequestClose}

238
src/app/features/lobby/Lobby.tsx
View file

@ -5,9 +5,15 @@ import { useAtom, useAtomValue } from 'jotai';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { JoinRule, RestrictedAllowType, Room } from 'matrix-js-sdk'; import { JoinRule, RestrictedAllowType, Room } from 'matrix-js-sdk';
import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types'; import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
import { IHierarchyRoom } from 'matrix-js-sdk/lib/@types/spaces';
import produce from 'immer';
import { useSpace } from '../../hooks/useSpace'; import { useSpace } from '../../hooks/useSpace';
import { Page, PageContent, PageContentCenter, PageHeroSection } from '../../components/page'; import { Page, PageContent, PageContentCenter, PageHeroSection } from '../../components/page';
import { HierarchyItem, useSpaceHierarchy } from '../../hooks/useSpaceHierarchy'; import {
HierarchyItem,
HierarchyItemSpace,
useSpaceHierarchy,
} from '../../hooks/useSpaceHierarchy';
import { VirtualTile } from '../../components/virtualizer'; import { VirtualTile } from '../../components/virtualizer';
import { spaceRoomsAtom } from '../../state/spaceRooms'; import { spaceRoomsAtom } from '../../state/spaceRooms';
import { MembersDrawer } from '../room/MembersDrawer'; import { MembersDrawer } from '../room/MembersDrawer';
@ -25,18 +31,15 @@ import {
usePowerLevels, usePowerLevels,
useRoomsPowerLevels, useRoomsPowerLevels,
} from '../../hooks/usePowerLevels'; } from '../../hooks/usePowerLevels';
import { RoomItemCard } from './RoomItem';
import { mDirectAtom } from '../../state/mDirectList'; import { mDirectAtom } from '../../state/mDirectList';
import { SpaceItemCard } from './SpaceItem';
import { makeLobbyCategoryId } from '../../state/closedLobbyCategories'; import { makeLobbyCategoryId } from '../../state/closedLobbyCategories';
import { useCategoryHandler } from '../../hooks/useCategoryHandler'; import { useCategoryHandler } from '../../hooks/useCategoryHandler';
import { useMatrixClient } from '../../hooks/useMatrixClient'; import { useMatrixClient } from '../../hooks/useMatrixClient';
import { allRoomsAtom } from '../../state/room-list/roomList'; import { allRoomsAtom } from '../../state/room-list/roomList';
import { getCanonicalAliasOrRoomId } from '../../utils/matrix'; import { getCanonicalAliasOrRoomId } from '../../utils/matrix';
import { getSpaceRoomPath } from '../../pages/pathUtils'; import { getSpaceRoomPath } from '../../pages/pathUtils';
import { HierarchyItemMenu } from './HierarchyItemMenu';
import { StateEvent } from '../../../types/matrix/room'; import { StateEvent } from '../../../types/matrix/room';
import { AfterItemDropTarget, CanDropCallback, useDnDMonitor } from './DnD'; import { CanDropCallback, useDnDMonitor } from './DnD';
import { ASCIILexicalTable, orderKeys } from '../../utils/ASCIILexicalTable'; import { ASCIILexicalTable, orderKeys } from '../../utils/ASCIILexicalTable';
import { getStateEvent } from '../../utils/room'; import { getStateEvent } from '../../utils/room';
import { useClosedLobbyCategoriesAtom } from '../../state/hooks/closedLobbyCategories'; import { useClosedLobbyCategoriesAtom } from '../../state/hooks/closedLobbyCategories';
@ -49,6 +52,7 @@ import { useOrphanSpaces } from '../../state/hooks/roomList';
import { roomToParentsAtom } from '../../state/room/roomToParents'; import { roomToParentsAtom } from '../../state/room/roomToParents';
import { AccountDataEvent } from '../../../types/matrix/accountData'; import { AccountDataEvent } from '../../../types/matrix/accountData';
import { useRoomMembers } from '../../hooks/useRoomMembers'; import { useRoomMembers } from '../../hooks/useRoomMembers';
import { SpaceHierarchy } from './SpaceHierarchy';
export function Lobby() { export function Lobby() {
const navigate = useNavigate(); const navigate = useNavigate();
@ -81,6 +85,8 @@ export function Lobby() {
return new Set(sideSpaces); return new Set(sideSpaces);
}, [sidebarItems]); }, [sidebarItems]);
const [spacesItems, setSpacesItem] = useState<Map<string, IHierarchyRoom>>(() => new Map());
useElementSizeObserver( useElementSizeObserver(
useCallback(() => heroSectionRef.current, []), useCallback(() => heroSectionRef.current, []),
useCallback((w, height) => setHeroSectionHeight(height), []) useCallback((w, height) => setHeroSectionHeight(height), [])
@ -107,19 +113,20 @@ export function Lobby() {
); );
const [draggingItem, setDraggingItem] = useState<HierarchyItem>(); const [draggingItem, setDraggingItem] = useState<HierarchyItem>();
const flattenHierarchy = useSpaceHierarchy( const hierarchy = useSpaceHierarchy(
space.roomId, space.roomId,
spaceRooms, spaceRooms,
getRoom, getRoom,
useCallback( useCallback(
(childId) => (childId) =>
closedCategories.has(makeLobbyCategoryId(space.roomId, childId)) || !!draggingItem?.space, closedCategories.has(makeLobbyCategoryId(space.roomId, childId)) ||
(draggingItem ? 'space' in draggingItem : false),
[closedCategories, space.roomId, draggingItem] [closedCategories, space.roomId, draggingItem]
) )
); );
const virtualizer = useVirtualizer({ const virtualizer = useVirtualizer({
count: flattenHierarchy.length, count: hierarchy.length,
getScrollElement: () => scrollRef.current, getScrollElement: () => scrollRef.current,
estimateSize: () => 1, estimateSize: () => 1,
overscan: 2, overscan: 2,
@ -129,8 +136,17 @@ export function Lobby() {
const roomsPowerLevels = useRoomsPowerLevels( const roomsPowerLevels = useRoomsPowerLevels(
useMemo( useMemo(
() => flattenHierarchy.map((i) => mx.getRoom(i.roomId)).filter((r) => !!r) as Room[], () =>
[mx, flattenHierarchy] hierarchy
.flatMap((i) => {
const childRooms = Array.isArray(i.rooms)
? i.rooms.map((r) => mx.getRoom(r.roomId))
: [];
return [mx.getRoom(i.space.roomId), ...childRooms];
})
.filter((r) => !!r) as Room[],
[mx, hierarchy]
) )
); );
@ -142,8 +158,8 @@ export function Lobby() {
return false; return false;
} }
if (item.space) { if ('space' in item) {
if (!container.item.space) return false; if (!('space' in container.item)) return false;
const containerSpaceId = space.roomId; const containerSpaceId = space.roomId;
if ( if (
@ -156,9 +172,8 @@ export function Lobby() {
return true; return true;
} }
const containerSpaceId = container.item.space const containerSpaceId =
? container.item.roomId 'space' in container.item ? container.item.roomId : container.item.parentId;
: container.item.parentId;
const dropOutsideSpace = item.parentId !== containerSpaceId; const dropOutsideSpace = item.parentId !== containerSpaceId;
@ -192,22 +207,22 @@ export function Lobby() {
); );
const reorderSpace = useCallback( const reorderSpace = useCallback(
(item: HierarchyItem, containerItem: HierarchyItem) => { (item: HierarchyItemSpace, containerItem: HierarchyItem) => {
if (!item.parentId) return; if (!item.parentId) return;
const childItems = flattenHierarchy const itemSpaces: HierarchyItemSpace[] = hierarchy
.filter((i) => i.parentId && i.space) .map((i) => i.space)
.filter((i) => i.roomId !== item.roomId); .filter((i) => i.roomId !== item.roomId);
const beforeIndex = childItems.findIndex((i) => i.roomId === containerItem.roomId); const beforeIndex = itemSpaces.findIndex((i) => i.roomId === containerItem.roomId);
const insertIndex = beforeIndex + 1; const insertIndex = beforeIndex + 1;
childItems.splice(insertIndex, 0, { itemSpaces.splice(insertIndex, 0, {
...item, ...item,
content: { ...item.content, order: undefined }, content: { ...item.content, order: undefined },
}); });
const currentOrders = childItems.map((i) => { const currentOrders = itemSpaces.map((i) => {
if (typeof i.content.order === 'string' && lex.has(i.content.order)) { if (typeof i.content.order === 'string' && lex.has(i.content.order)) {
return i.content.order; return i.content.order;
} }
@ -217,21 +232,21 @@ export function Lobby() {
const newOrders = orderKeys(lex, currentOrders); const newOrders = orderKeys(lex, currentOrders);
newOrders?.forEach((orderKey, index) => { newOrders?.forEach((orderKey, index) => {
const itm = childItems[index]; const itm = itemSpaces[index];
if (!itm || !itm.parentId) return; if (!itm || !itm.parentId) return;
const parentPL = roomsPowerLevels.get(itm.parentId); const parentPL = roomsPowerLevels.get(itm.parentId);
const canEdit = parentPL && canEditSpaceChild(parentPL); const canEdit = parentPL && canEditSpaceChild(parentPL);
if (canEdit && orderKey !== currentOrders[index]) { if (canEdit && orderKey !== currentOrders[index]) {
mx.sendStateEvent( mx.sendStateEvent(
itm.parentId, itm.parentId,
StateEvent.SpaceChild, StateEvent.SpaceChild as any,
{ ...itm.content, order: orderKey }, { ...itm.content, order: orderKey },
itm.roomId itm.roomId
); );
} }
}); });
}, },
[mx, flattenHierarchy, lex, roomsPowerLevels, canEditSpaceChild] [mx, hierarchy, lex, roomsPowerLevels, canEditSpaceChild]
); );
const reorderRoom = useCallback( const reorderRoom = useCallback(
@ -240,13 +255,12 @@ export function Lobby() {
if (!item.parentId) { if (!item.parentId) {
return; return;
} }
const containerParentId: string = containerItem.space const containerParentId: string =
? containerItem.roomId 'space' in containerItem ? containerItem.roomId : containerItem.parentId;
: containerItem.parentId;
const itemContent = item.content; const itemContent = item.content;
if (item.parentId !== containerParentId) { if (item.parentId !== containerParentId) {
mx.sendStateEvent(item.parentId, StateEvent.SpaceChild, {}, item.roomId); mx.sendStateEvent(item.parentId, StateEvent.SpaceChild as any, {}, item.roomId);
} }
if ( if (
@ -265,28 +279,29 @@ export function Lobby() {
const allow = const allow =
joinRuleContent.allow?.filter((allowRule) => allowRule.room_id !== item.parentId) ?? []; joinRuleContent.allow?.filter((allowRule) => allowRule.room_id !== item.parentId) ?? [];
allow.push({ type: RestrictedAllowType.RoomMembership, room_id: containerParentId }); allow.push({ type: RestrictedAllowType.RoomMembership, room_id: containerParentId });
mx.sendStateEvent(itemRoom.roomId, StateEvent.RoomJoinRules, { mx.sendStateEvent(itemRoom.roomId, StateEvent.RoomJoinRules as any, {
...joinRuleContent, ...joinRuleContent,
allow, allow,
}); });
} }
} }
const childItems = flattenHierarchy const itemSpaces = Array.from(
.filter((i) => i.parentId === containerParentId && !i.space) hierarchy?.find((i) => i.space.roomId === containerParentId)?.rooms ?? []
.filter((i) => i.roomId !== item.roomId); );
const beforeItem: HierarchyItem | undefined = containerItem.space ? undefined : containerItem; const beforeItem: HierarchyItem | undefined =
const beforeIndex = childItems.findIndex((i) => i.roomId === beforeItem?.roomId); 'space' in containerItem ? undefined : containerItem;
const beforeIndex = itemSpaces.findIndex((i) => i.roomId === beforeItem?.roomId);
const insertIndex = beforeIndex + 1; const insertIndex = beforeIndex + 1;
childItems.splice(insertIndex, 0, { itemSpaces.splice(insertIndex, 0, {
...item, ...item,
parentId: containerParentId, parentId: containerParentId,
content: { ...itemContent, order: undefined }, content: { ...itemContent, order: undefined },
}); });
const currentOrders = childItems.map((i) => { const currentOrders = itemSpaces.map((i) => {
if (typeof i.content.order === 'string' && lex.has(i.content.order)) { if (typeof i.content.order === 'string' && lex.has(i.content.order)) {
return i.content.order; return i.content.order;
} }
@ -296,18 +311,18 @@ export function Lobby() {
const newOrders = orderKeys(lex, currentOrders); const newOrders = orderKeys(lex, currentOrders);
newOrders?.forEach((orderKey, index) => { newOrders?.forEach((orderKey, index) => {
const itm = childItems[index]; const itm = itemSpaces[index];
if (itm && orderKey !== currentOrders[index]) { if (itm && orderKey !== currentOrders[index]) {
mx.sendStateEvent( mx.sendStateEvent(
containerParentId, containerParentId,
StateEvent.SpaceChild, StateEvent.SpaceChild as any,
{ ...itm.content, order: orderKey }, { ...itm.content, order: orderKey },
itm.roomId itm.roomId
); );
} }
}); });
}, },
[mx, flattenHierarchy, lex] [mx, hierarchy, lex]
); );
useDnDMonitor( useDnDMonitor(
@ -318,7 +333,7 @@ export function Lobby() {
if (!canDrop(item, container)) { if (!canDrop(item, container)) {
return; return;
} }
if (item.space) { if ('space' in item) {
reorderSpace(item, container.item); reorderSpace(item, container.item);
} else { } else {
reorderRoom(item, container.item); reorderRoom(item, container.item);
@ -328,8 +343,16 @@ export function Lobby() {
) )
); );
const addSpaceRoom = useCallback( const handleSpacesFound = useCallback(
(roomId: string) => setSpaceRooms({ type: 'PUT', roomId }), (sItems: IHierarchyRoom[]) => {
setSpaceRooms({ type: 'PUT', roomIds: sItems.map((i) => i.room_id) });
setSpacesItem((current) => {
const newItems = produce(current, (draft) => {
sItems.forEach((item) => draft.set(item.room_id, item));
});
return current.size === newItems.size ? current : newItems;
});
},
[setSpaceRooms] [setSpaceRooms]
); );
@ -394,121 +417,44 @@ export function Lobby() {
<LobbyHero /> <LobbyHero />
</PageHeroSection> </PageHeroSection>
{vItems.map((vItem) => { {vItems.map((vItem) => {
const item = flattenHierarchy[vItem.index]; const item = hierarchy[vItem.index];
if (!item) return null; if (!item) return null;
const itemPowerLevel = roomsPowerLevels.get(item.roomId) ?? {}; const nextSpaceId = hierarchy[vItem.index + 1]?.space.roomId;
const userPLInItem = powerLevelAPI.getPowerLevel(
itemPowerLevel,
mx.getUserId() ?? undefined
);
const canInvite = powerLevelAPI.canDoAction(
itemPowerLevel,
'invite',
userPLInItem
);
const isJoined = allJoinedRooms.has(item.roomId);
const nextRoomId: string | undefined = const categoryId = makeLobbyCategoryId(space.roomId, item.space.roomId);
flattenHierarchy[vItem.index + 1]?.roomId;
const dragging =
draggingItem?.roomId === item.roomId &&
draggingItem.parentId === item.parentId;
if (item.space) {
const categoryId = makeLobbyCategoryId(space.roomId, item.roomId);
const { parentId } = item;
const parentPowerLevels = parentId
? roomsPowerLevels.get(parentId) ?? {}
: undefined;
return (
<VirtualTile
virtualItem={vItem}
style={{
paddingTop: vItem.index === 0 ? 0 : config.space.S500,
}}
ref={virtualizer.measureElement}
key={vItem.index}
>
<SpaceItemCard
item={item}
joined={allJoinedRooms.has(item.roomId)}
categoryId={categoryId}
closed={closedCategories.has(categoryId) || !!draggingItem?.space}
handleClose={handleCategoryClick}
getRoom={getRoom}
canEditChild={canEditSpaceChild(
roomsPowerLevels.get(item.roomId) ?? {}
)}
canReorder={
parentPowerLevels ? canEditSpaceChild(parentPowerLevels) : false
}
options={
parentId &&
parentPowerLevels && (
<HierarchyItemMenu
item={{ ...item, parentId }}
canInvite={canInvite}
joined={isJoined}
canEditChild={canEditSpaceChild(parentPowerLevels)}
pinned={sidebarSpaces.has(item.roomId)}
onTogglePin={togglePinToSidebar}
/>
)
}
before={item.parentId ? undefined : undefined}
after={
<AfterItemDropTarget
item={item}
nextRoomId={nextRoomId}
afterSpace
canDrop={canDrop}
/>
}
onDragging={setDraggingItem}
data-dragging={dragging}
/>
</VirtualTile>
);
}
const parentPowerLevels = roomsPowerLevels.get(item.parentId) ?? {};
const prevItem: HierarchyItem | undefined = flattenHierarchy[vItem.index - 1];
const nextItem: HierarchyItem | undefined = flattenHierarchy[vItem.index + 1];
return ( return (
<VirtualTile <VirtualTile
virtualItem={vItem} virtualItem={vItem}
style={{ paddingTop: config.space.S100 }} style={{
paddingTop: vItem.index === 0 ? 0 : config.space.S500,
}}
ref={virtualizer.measureElement} ref={virtualizer.measureElement}
key={vItem.index} key={vItem.index}
> >
<RoomItemCard <SpaceHierarchy
item={item} spaceItem={item.space}
onSpaceFound={addSpaceRoom} summary={spacesItems.get(item.space.roomId)}
dm={mDirects.has(item.roomId)} roomItems={item.rooms}
firstChild={!prevItem || prevItem.space === true} allJoinedRooms={allJoinedRooms}
lastChild={!nextItem || nextItem.space === true} mDirects={mDirects}
onOpen={handleOpenRoom} roomsPowerLevels={roomsPowerLevels}
getRoom={getRoom} canEditSpaceChild={canEditSpaceChild}
canReorder={canEditSpaceChild(parentPowerLevels)} categoryId={categoryId}
options={ closed={
<HierarchyItemMenu closedCategories.has(categoryId) ||
item={item} (draggingItem ? 'space' in draggingItem : false)
canInvite={canInvite}
joined={isJoined}
canEditChild={canEditSpaceChild(parentPowerLevels)}
/>
} }
after={ handleClose={handleCategoryClick}
<AfterItemDropTarget draggingItem={draggingItem}
item={item}
nextRoomId={nextRoomId}
canDrop={canDrop}
/>
}
data-dragging={dragging}
onDragging={setDraggingItem} onDragging={setDraggingItem}
canDrop={canDrop}
nextSpaceId={nextSpaceId}
getRoom={getRoom}
pinned={sidebarSpaces.has(item.space.roomId)}
togglePinToSidebar={togglePinToSidebar}
onSpacesFound={handleSpacesFound}
onOpenRoom={handleOpenRoom}
/> />
</VirtualTile> </VirtualTile>
); );

146
src/app/features/lobby/RoomItem.tsx
View file

@ -1,4 +1,4 @@
import React, { MouseEventHandler, ReactNode, useCallback, useEffect, useRef } from 'react'; import React, { MouseEventHandler, ReactNode, useCallback, useRef } from 'react';
import { import {
Avatar, Avatar,
Badge, Badge,
@ -20,23 +20,20 @@ import {
} from 'folds'; } from 'folds';
import FocusTrap from 'focus-trap-react'; import FocusTrap from 'focus-trap-react';
import { JoinRule, MatrixError, Room } from 'matrix-js-sdk'; import { JoinRule, MatrixError, Room } from 'matrix-js-sdk';
import { IHierarchyRoom } from 'matrix-js-sdk/lib/@types/spaces';
import { RoomAvatar, RoomIcon } from '../../components/room-avatar'; import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
import { SequenceCard } from '../../components/sequence-card'; import { SequenceCard } from '../../components/sequence-card';
import { useMatrixClient } from '../../hooks/useMatrixClient'; import { useMatrixClient } from '../../hooks/useMatrixClient';
import { HierarchyItem } from '../../hooks/useSpaceHierarchy'; import { HierarchyItem } from '../../hooks/useSpaceHierarchy';
import { millify } from '../../plugins/millify'; import { millify } from '../../plugins/millify';
import { import { LocalRoomSummaryLoader } from '../../components/RoomSummaryLoader';
HierarchyRoomSummaryLoader,
LocalRoomSummaryLoader,
} from '../../components/RoomSummaryLoader';
import { UseStateProvider } from '../../components/UseStateProvider'; import { UseStateProvider } from '../../components/UseStateProvider';
import { RoomTopicViewer } from '../../components/room-topic-viewer'; import { RoomTopicViewer } from '../../components/room-topic-viewer';
import { onEnterOrSpace, stopPropagation } from '../../utils/keyboard'; import { onEnterOrSpace, stopPropagation } from '../../utils/keyboard';
import { Membership, RoomType } from '../../../types/matrix/room'; import { Membership } from '../../../types/matrix/room';
import * as css from './RoomItem.css'; import * as css from './RoomItem.css';
import * as styleCss from './style.css'; import * as styleCss from './style.css';
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback'; import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
import { ErrorCode } from '../../cs-errorcode';
import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../../utils/room'; import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../../utils/room';
import { ItemDraggableTarget, useDraggableItem } from './DnD'; import { ItemDraggableTarget, useDraggableItem } from './DnD';
import { mxcUrlToHttp } from '../../utils/matrix'; import { mxcUrlToHttp } from '../../utils/matrix';
@ -125,13 +122,11 @@ function RoomProfileLoading() {
type RoomProfileErrorProps = { type RoomProfileErrorProps = {
roomId: string; roomId: string;
error: Error; inaccessibleRoom: boolean;
suggested?: boolean; suggested?: boolean;
via?: string[]; via?: string[];
}; };
function RoomProfileError({ roomId, suggested, error, via }: RoomProfileErrorProps) { function RoomProfileError({ roomId, suggested, inaccessibleRoom, via }: RoomProfileErrorProps) {
const privateRoom = error.name === ErrorCode.M_FORBIDDEN;
return ( return (
<Box grow="Yes" gap="300"> <Box grow="Yes" gap="300">
<Avatar> <Avatar>
@ -142,7 +137,7 @@ function RoomProfileError({ roomId, suggested, error, via }: RoomProfileErrorPro
renderFallback={() => ( renderFallback={() => (
<RoomIcon <RoomIcon
size="300" size="300"
joinRule={privateRoom ? JoinRule.Invite : JoinRule.Restricted} joinRule={inaccessibleRoom ? JoinRule.Invite : JoinRule.Restricted}
filled filled
/> />
)} )}
@ -162,25 +157,18 @@ function RoomProfileError({ roomId, suggested, error, via }: RoomProfileErrorPro
)} )}
</Box> </Box>
<Box gap="200" alignItems="Center"> <Box gap="200" alignItems="Center">
{privateRoom && ( {inaccessibleRoom ? (
<> <Badge variant="Secondary" fill="Soft" radii="300" size="500">
<Badge variant="Secondary" fill="Soft" radii="Pill" outlined> <Text size="L400">Inaccessible</Text>
<Text size="L400">Private Room</Text> </Badge>
</Badge> ) : (
<Line <Text size="T200" truncate>
variant="SurfaceVariant" {roomId}
style={{ height: toRem(12) }} </Text>
direction="Vertical"
size="400"
/>
</>
)} )}
<Text size="T200" truncate>
{roomId}
</Text>
</Box> </Box>
</Box> </Box>
{!privateRoom && <RoomJoinButton roomId={roomId} via={via} />} {!inaccessibleRoom && <RoomJoinButton roomId={roomId} via={via} />}
</Box> </Box>
); );
} }
@ -288,23 +276,11 @@ function RoomProfile({
); );
} }
function CallbackOnFoundSpace({
roomId,
onSpaceFound,
}: {
roomId: string;
onSpaceFound: (roomId: string) => void;
}) {
useEffect(() => {
onSpaceFound(roomId);
}, [roomId, onSpaceFound]);
return null;
}
type RoomItemCardProps = { type RoomItemCardProps = {
item: HierarchyItem; item: HierarchyItem;
onSpaceFound: (roomId: string) => void; loading: boolean;
error: Error | null;
summary: IHierarchyRoom | undefined;
dm?: boolean; dm?: boolean;
firstChild?: boolean; firstChild?: boolean;
lastChild?: boolean; lastChild?: boolean;
@ -320,10 +296,10 @@ export const RoomItemCard = as<'div', RoomItemCardProps>(
( (
{ {
item, item,
onSpaceFound, loading,
error,
summary,
dm, dm,
firstChild,
lastChild,
onOpen, onOpen,
options, options,
before, before,
@ -348,8 +324,6 @@ export const RoomItemCard = as<'div', RoomItemCardProps>(
return ( return (
<SequenceCard <SequenceCard
className={css.RoomItemCard} className={css.RoomItemCard}
firstChild={firstChild}
lastChild={lastChild}
variant="SurfaceVariant" variant="SurfaceVariant"
gap="300" gap="300"
alignItems="Center" alignItems="Center"
@ -367,7 +341,9 @@ export const RoomItemCard = as<'div', RoomItemCardProps>(
name={localSummary.name} name={localSummary.name}
topic={localSummary.topic} topic={localSummary.topic}
avatarUrl={ avatarUrl={
dm ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication) : getRoomAvatarUrl(mx, room, 96, useAuthentication) dm
? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
: getRoomAvatarUrl(mx, room, 96, useAuthentication)
} }
memberCount={localSummary.memberCount} memberCount={localSummary.memberCount}
suggested={content.suggested} suggested={content.suggested}
@ -395,46 +371,46 @@ export const RoomItemCard = as<'div', RoomItemCardProps>(
)} )}
</LocalRoomSummaryLoader> </LocalRoomSummaryLoader>
) : ( ) : (
<HierarchyRoomSummaryLoader roomId={roomId}> <>
{(summaryState) => ( {!summary &&
<> (error ? (
{summaryState.status === AsyncStatus.Loading && <RoomProfileLoading />} <RoomProfileError
{summaryState.status === AsyncStatus.Error && ( roomId={roomId}
<RoomProfileError inaccessibleRoom={false}
roomId={roomId} suggested={content.suggested}
error={summaryState.error} via={content.via}
suggested={content.suggested} />
via={content.via} ) : (
/> <>
)} {loading && <RoomProfileLoading />}
{summaryState.status === AsyncStatus.Success && ( {!loading && (
<> <RoomProfileError
{summaryState.data.room_type === RoomType.Space && (
<CallbackOnFoundSpace
roomId={summaryState.data.room_id}
onSpaceFound={onSpaceFound}
/>
)}
<RoomProfile
roomId={roomId} roomId={roomId}
name={summaryState.data.name || summaryState.data.canonical_alias || roomId} inaccessibleRoom
topic={summaryState.data.topic}
avatarUrl={
summaryState.data?.avatar_url
? mxcUrlToHttp(mx, summaryState.data.avatar_url, useAuthentication, 96, 96, 'crop') ??
undefined
: undefined
}
memberCount={summaryState.data.num_joined_members}
suggested={content.suggested} suggested={content.suggested}
joinRule={summaryState.data.join_rule} via={content.via}
options={<RoomJoinButton roomId={roomId} via={content.via} />}
/> />
</> )}
)} </>
</> ))}
{summary && (
<RoomProfile
roomId={roomId}
name={summary.name || summary.canonical_alias || roomId}
topic={summary.topic}
avatarUrl={
summary?.avatar_url
? mxcUrlToHttp(mx, summary.avatar_url, useAuthentication, 96, 96, 'crop') ??
undefined
: undefined
}
memberCount={summary.num_joined_members}
suggested={content.suggested}
joinRule={summary.join_rule}
options={<RoomJoinButton roomId={roomId} via={content.via} />}
/>
)} )}
</HierarchyRoomSummaryLoader> </>
)} )}
</Box> </Box>
{options} {options}

225
src/app/features/lobby/SpaceHierarchy.tsx Normal file
View file

@ -0,0 +1,225 @@
import React, { forwardRef, MouseEventHandler, useEffect, useMemo } from 'react';
import { MatrixError, Room } from 'matrix-js-sdk';
import { IHierarchyRoom } from 'matrix-js-sdk/lib/@types/spaces';
import { Box, config, Text } from 'folds';
import {
HierarchyItem,
HierarchyItemRoom,
HierarchyItemSpace,
useFetchSpaceHierarchyLevel,
} from '../../hooks/useSpaceHierarchy';
import { IPowerLevels, powerLevelAPI } from '../../hooks/usePowerLevels';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { SpaceItemCard } from './SpaceItem';
import { AfterItemDropTarget, CanDropCallback } from './DnD';
import { HierarchyItemMenu } from './HierarchyItemMenu';
import { RoomItemCard } from './RoomItem';
import { RoomType } from '../../../types/matrix/room';
import { SequenceCard } from '../../components/sequence-card';
type SpaceHierarchyProps = {
summary: IHierarchyRoom | undefined;
spaceItem: HierarchyItemSpace;
roomItems?: HierarchyItemRoom[];
allJoinedRooms: Set<string>;
mDirects: Set<string>;
roomsPowerLevels: Map<string, IPowerLevels>;
canEditSpaceChild: (powerLevels: IPowerLevels) => boolean;
categoryId: string;
closed: boolean;
handleClose: MouseEventHandler<HTMLButtonElement>;
draggingItem?: HierarchyItem;
onDragging: (item?: HierarchyItem) => void;
canDrop: CanDropCallback;
nextSpaceId?: string;
getRoom: (roomId: string) => Room | undefined;
pinned: boolean;
togglePinToSidebar: (roomId: string) => void;
onSpacesFound: (spaceItems: IHierarchyRoom[]) => void;
onOpenRoom: MouseEventHandler<HTMLButtonElement>;
};
export const SpaceHierarchy = forwardRef<HTMLDivElement, SpaceHierarchyProps>(
(
{
summary,
spaceItem,
roomItems,
allJoinedRooms,
mDirects,
roomsPowerLevels,
canEditSpaceChild,
categoryId,
closed,
handleClose,
draggingItem,
onDragging,
canDrop,
nextSpaceId,
getRoom,
pinned,
togglePinToSidebar,
onOpenRoom,
onSpacesFound,
},
ref
) => {
const mx = useMatrixClient();
const { fetching, error, rooms } = useFetchSpaceHierarchyLevel(spaceItem.roomId, true);
const subspaces = useMemo(() => {
const s: Map<string, IHierarchyRoom> = new Map();
rooms.forEach((r) => {
if (r.room_type === RoomType.Space) {
s.set(r.room_id, r);
}
});
return s;
}, [rooms]);
const spacePowerLevels = roomsPowerLevels.get(spaceItem.roomId) ?? {};
const userPLInSpace = powerLevelAPI.getPowerLevel(
spacePowerLevels,
mx.getUserId() ?? undefined
);
const canInviteInSpace = powerLevelAPI.canDoAction(spacePowerLevels, 'invite', userPLInSpace);
const draggingSpace =
draggingItem?.roomId === spaceItem.roomId && draggingItem.parentId === spaceItem.parentId;
const { parentId } = spaceItem;
const parentPowerLevels = parentId ? roomsPowerLevels.get(parentId) ?? {} : undefined;
useEffect(() => {
onSpacesFound(Array.from(subspaces.values()));
}, [subspaces, onSpacesFound]);
let childItems = roomItems?.filter((i) => !subspaces.has(i.roomId));
if (!canEditSpaceChild(spacePowerLevels)) {
// hide unknown rooms for normal user
childItems = childItems?.filter((i) => {
const forbidden = error instanceof MatrixError ? error.errcode === 'M_FORBIDDEN' : false;
const inaccessibleRoom = !rooms.get(i.roomId) && !fetching && (error ? forbidden : true);
return !inaccessibleRoom;
});
}
return (
<Box direction="Column" gap="100" ref={ref}>
<SpaceItemCard
summary={rooms.get(spaceItem.roomId) ?? summary}
loading={fetching}
item={spaceItem}
joined={allJoinedRooms.has(spaceItem.roomId)}
categoryId={categoryId}
closed={closed}
handleClose={handleClose}
getRoom={getRoom}
canEditChild={canEditSpaceChild(spacePowerLevels)}
canReorder={parentPowerLevels ? canEditSpaceChild(parentPowerLevels) : false}
options={
parentId &&
parentPowerLevels && (
<HierarchyItemMenu
item={{ ...spaceItem, parentId }}
canInvite={canInviteInSpace}
joined={allJoinedRooms.has(spaceItem.roomId)}
canEditChild={canEditSpaceChild(parentPowerLevels)}
pinned={pinned}
onTogglePin={togglePinToSidebar}
/>
)
}
after={
<AfterItemDropTarget
item={spaceItem}
nextRoomId={closed ? nextSpaceId : childItems?.[0]?.roomId}
afterSpace
canDrop={canDrop}
/>
}
onDragging={onDragging}
data-dragging={draggingSpace}
/>
{childItems && childItems.length > 0 ? (
<Box direction="Column" gap="100">
{childItems.map((roomItem, index) => {
const roomSummary = rooms.get(roomItem.roomId);
const roomPowerLevels = roomsPowerLevels.get(roomItem.roomId) ?? {};
const userPLInRoom = powerLevelAPI.getPowerLevel(
roomPowerLevels,
mx.getUserId() ?? undefined
);
const canInviteInRoom = powerLevelAPI.canDoAction(
roomPowerLevels,
'invite',
userPLInRoom
);
const lastItem = index === childItems.length;
const nextRoomId = lastItem ? nextSpaceId : childItems[index + 1]?.roomId;
const roomDragging =
draggingItem?.roomId === roomItem.roomId &&
draggingItem.parentId === roomItem.parentId;
return (
<RoomItemCard
key={roomItem.roomId}
item={roomItem}
loading={fetching}
error={error}
summary={roomSummary}
dm={mDirects.has(roomItem.roomId)}
onOpen={onOpenRoom}
getRoom={getRoom}
canReorder={canEditSpaceChild(spacePowerLevels)}
options={
<HierarchyItemMenu
item={roomItem}
canInvite={canInviteInRoom}
joined={allJoinedRooms.has(roomItem.roomId)}
canEditChild={canEditSpaceChild(spacePowerLevels)}
/>
}
after={
<AfterItemDropTarget
item={roomItem}
nextRoomId={nextRoomId}
canDrop={canDrop}
/>
}
data-dragging={roomDragging}
onDragging={onDragging}
/>
);
})}
</Box>
) : (
childItems && (
<SequenceCard variant="SurfaceVariant" gap="300" alignItems="Center">
<Box
grow="Yes"
style={{
padding: config.space.S700,
}}
direction="Column"
alignItems="Center"
justifyContent="Center"
gap="100"
>
<Text size="H5" align="Center">
No Rooms
</Text>
<Text align="Center" size="T300" priority="300">
This space does not contains rooms yet.
</Text>
</Box>
</SequenceCard>
)
)}
</Box>
);
}
);

90
src/app/features/lobby/SpaceItem.tsx
View file

@ -19,19 +19,16 @@ import {
import FocusTrap from 'focus-trap-react'; import FocusTrap from 'focus-trap-react';
import classNames from 'classnames'; import classNames from 'classnames';
import { MatrixError, Room } from 'matrix-js-sdk'; import { MatrixError, Room } from 'matrix-js-sdk';
import { IHierarchyRoom } from 'matrix-js-sdk/lib/@types/spaces';
import { HierarchyItem } from '../../hooks/useSpaceHierarchy'; import { HierarchyItem } from '../../hooks/useSpaceHierarchy';
import { useMatrixClient } from '../../hooks/useMatrixClient'; import { useMatrixClient } from '../../hooks/useMatrixClient';
import { RoomAvatar } from '../../components/room-avatar'; import { RoomAvatar } from '../../components/room-avatar';
import { nameInitials } from '../../utils/common'; import { nameInitials } from '../../utils/common';
import { import { LocalRoomSummaryLoader } from '../../components/RoomSummaryLoader';
HierarchyRoomSummaryLoader,
LocalRoomSummaryLoader,
} from '../../components/RoomSummaryLoader';
import { getRoomAvatarUrl } from '../../utils/room'; import { getRoomAvatarUrl } from '../../utils/room';
import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback'; import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
import * as css from './SpaceItem.css'; import * as css from './SpaceItem.css';
import * as styleCss from './style.css'; import * as styleCss from './style.css';
import { ErrorCode } from '../../cs-errorcode';
import { useDraggableItem } from './DnD'; import { useDraggableItem } from './DnD';
import { openCreateRoom, openSpaceAddExisting } from '../../../client/action/navigation'; import { openCreateRoom, openSpaceAddExisting } from '../../../client/action/navigation';
import { stopPropagation } from '../../utils/keyboard'; import { stopPropagation } from '../../utils/keyboard';
@ -53,18 +50,11 @@ function SpaceProfileLoading() {
); );
} }
type UnknownPrivateSpaceProfileProps = { type InaccessibleSpaceProfileProps = {
roomId: string; roomId: string;
name?: string;
avatarUrl?: string;
suggested?: boolean; suggested?: boolean;
}; };
function UnknownPrivateSpaceProfile({ function InaccessibleSpaceProfile({ roomId, suggested }: InaccessibleSpaceProfileProps) {
roomId,
name,
avatarUrl,
suggested,
}: UnknownPrivateSpaceProfileProps) {
return ( return (
<Chip <Chip
as="span" as="span"
@ -75,11 +65,9 @@ function UnknownPrivateSpaceProfile({
<Avatar size="200" radii="300"> <Avatar size="200" radii="300">
<RoomAvatar <RoomAvatar
roomId={roomId} roomId={roomId}
src={avatarUrl}
alt={name}
renderFallback={() => ( renderFallback={() => (
<Text as="span" size="H6"> <Text as="span" size="H6">
{nameInitials(name)} U
</Text> </Text>
)} )}
/> />
@ -88,11 +76,11 @@ function UnknownPrivateSpaceProfile({
> >
<Box alignItems="Center" gap="200"> <Box alignItems="Center" gap="200">
<Text size="H4" truncate> <Text size="H4" truncate>
{name || 'Unknown'} Unknown
</Text> </Text>
<Badge variant="Secondary" fill="Soft" radii="Pill" outlined> <Badge variant="Secondary" fill="Soft" radii="Pill" outlined>
<Text size="L400">Private Space</Text> <Text size="L400">Inaccessible</Text>
</Badge> </Badge>
{suggested && ( {suggested && (
<Badge variant="Success" fill="Soft" radii="Pill" outlined> <Badge variant="Success" fill="Soft" radii="Pill" outlined>
@ -104,20 +92,20 @@ function UnknownPrivateSpaceProfile({
); );
} }
type UnknownSpaceProfileProps = { type UnjoinedSpaceProfileProps = {
roomId: string; roomId: string;
via?: string[]; via?: string[];
name?: string; name?: string;
avatarUrl?: string; avatarUrl?: string;
suggested?: boolean; suggested?: boolean;
}; };
function UnknownSpaceProfile({ function UnjoinedSpaceProfile({
roomId, roomId,
via, via,
name, name,
avatarUrl, avatarUrl,
suggested, suggested,
}: UnknownSpaceProfileProps) { }: UnjoinedSpaceProfileProps) {
const mx = useMatrixClient(); const mx = useMatrixClient();
const [joinState, join] = useAsyncCallback<Room, MatrixError, []>( const [joinState, join] = useAsyncCallback<Room, MatrixError, []>(
@ -376,6 +364,8 @@ function AddSpaceButton({ item }: { item: HierarchyItem }) {
} }
type SpaceItemCardProps = { type SpaceItemCardProps = {
summary: IHierarchyRoom | undefined;
loading?: boolean;
item: HierarchyItem; item: HierarchyItem;
joined?: boolean; joined?: boolean;
categoryId: string; categoryId: string;
@ -393,6 +383,8 @@ export const SpaceItemCard = as<'div', SpaceItemCardProps>(
( (
{ {
className, className,
summary,
loading,
joined, joined,
closed, closed,
categoryId, categoryId,
@ -451,37 +443,31 @@ export const SpaceItemCard = as<'div', SpaceItemCardProps>(
} }
</LocalRoomSummaryLoader> </LocalRoomSummaryLoader>
) : ( ) : (
<HierarchyRoomSummaryLoader roomId={roomId}> <>
{(summaryState) => ( {!summary &&
<> (loading ? (
{summaryState.status === AsyncStatus.Loading && <SpaceProfileLoading />} <SpaceProfileLoading />
{summaryState.status === AsyncStatus.Error && ) : (
(summaryState.error.name === ErrorCode.M_FORBIDDEN ? ( <InaccessibleSpaceProfile
<UnknownPrivateSpaceProfile roomId={roomId} suggested={content.suggested} /> roomId={item.roomId}
) : ( suggested={item.content.suggested}
<UnknownSpaceProfile />
roomId={roomId} ))}
via={item.content.via} {summary && (
suggested={content.suggested} <UnjoinedSpaceProfile
/> roomId={roomId}
))} via={item.content.via}
{summaryState.status === AsyncStatus.Success && ( name={summary.name || summary.canonical_alias || roomId}
<UnknownSpaceProfile avatarUrl={
roomId={roomId} summary?.avatar_url
via={item.content.via} ? mxcUrlToHttp(mx, summary.avatar_url, useAuthentication, 96, 96, 'crop') ??
name={summaryState.data.name || summaryState.data.canonical_alias || roomId} undefined
avatarUrl={ : undefined
summaryState.data?.avatar_url }
? mxcUrlToHttp(mx, summaryState.data.avatar_url, useAuthentication, 96, 96, 'crop') ?? suggested={content.suggested}
undefined />
: undefined
}
suggested={content.suggested}
/>
)}
</>
)} )}
</HierarchyRoomSummaryLoader> </>
)} )}
</Box> </Box>
{canEditChild && ( {canEditChild && (

5
src/app/features/room-nav/RoomNavItem.tsx
View file

@ -39,6 +39,8 @@ import { getMatrixToRoom } from '../../plugins/matrix-to';
import { getCanonicalAliasOrRoomId, isRoomAlias } from '../../utils/matrix'; import { getCanonicalAliasOrRoomId, isRoomAlias } from '../../utils/matrix';
import { getViaServers } from '../../plugins/via-servers'; import { getViaServers } from '../../plugins/via-servers';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication'; import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { useSetting } from '../../state/hooks/settings';
import { settingsAtom } from '../../state/settings';
type RoomNavItemMenuProps = { type RoomNavItemMenuProps = {
room: Room; room: Room;
@ -47,13 +49,14 @@ type RoomNavItemMenuProps = {
const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>( const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
({ room, requestClose }, ref) => { ({ room, requestClose }, ref) => {
const mx = useMatrixClient(); const mx = useMatrixClient();
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
const unread = useRoomUnread(room.roomId, roomToUnreadAtom); const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
const powerLevels = usePowerLevels(room); const powerLevels = usePowerLevels(room);
const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels); const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? '')); const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
const handleMarkAsRead = () => { const handleMarkAsRead = () => {
markAsRead(mx, room.roomId); markAsRead(mx, room.roomId, hideActivity);
requestClose(); requestClose();
}; };

27
src/app/features/room/MembersDrawer.tsx
View file

@ -156,7 +156,7 @@ export type MembersFilterOptions = {
}; };
const SEARCH_OPTIONS: UseAsyncSearchOptions = { const SEARCH_OPTIONS: UseAsyncSearchOptions = {
limit: 100, limit: 1000,
matchOptions: { matchOptions: {
contain: true, contain: true,
}, },
@ -428,8 +428,9 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
}} }}
after={<Icon size="50" src={Icons.Cross} />} after={<Icon size="50" src={Icons.Cross} />}
> >
<Text size="B300">{`${result.items.length || 'No'} ${result.items.length === 1 ? 'Result' : 'Results' <Text size="B300">{`${result.items.length || 'No'} ${
}`}</Text> result.items.length === 1 ? 'Result' : 'Results'
}`}</Text>
</Chip> </Chip>
) )
} }
@ -485,15 +486,17 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
const member = tagOrMember; const member = tagOrMember;
const name = getName(member); const name = getName(member);
const avatarMxcUrl = member.getMxcAvatarUrl(); const avatarMxcUrl = member.getMxcAvatarUrl();
const avatarUrl = avatarMxcUrl ? mx.mxcUrlToHttp( const avatarUrl = avatarMxcUrl
avatarMxcUrl, ? mx.mxcUrlToHttp(
100, avatarMxcUrl,
100, 100,
'crop', 100,
undefined, 'crop',
false, undefined,
useAuthentication false,
) : undefined; useAuthentication
)
: undefined;
return ( return (
<MenuItem <MenuItem

5
src/app/features/room/Room.tsx
View file

@ -20,6 +20,7 @@ export function Room() {
const mx = useMatrixClient(); const mx = useMatrixClient();
const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer'); const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
const screenSize = useScreenSizeContext(); const screenSize = useScreenSizeContext();
const powerLevels = usePowerLevels(room); const powerLevels = usePowerLevels(room);
const members = useRoomMembers(mx, room.roomId); const members = useRoomMembers(mx, room.roomId);
@ -29,10 +30,10 @@ export function Room() {
useCallback( useCallback(
(evt) => { (evt) => {
if (isKeyHotkey('escape', evt)) { if (isKeyHotkey('escape', evt)) {
markAsRead(mx, room.roomId); markAsRead(mx, room.roomId, hideActivity);
} }
}, },
[mx, room.roomId] [mx, room.roomId, hideActivity]
) )
); );

76
src/app/features/room/RoomInput.tsx
View file

@ -53,6 +53,7 @@ import {
isEmptyEditor, isEmptyEditor,
getBeginCommand, getBeginCommand,
trimCommand, trimCommand,
getMentions,
} from '../../components/editor'; } from '../../components/editor';
import { EmojiBoard, EmojiBoardTab } from '../../components/emoji-board'; import { EmojiBoard, EmojiBoardTab } from '../../components/emoji-board';
import { UseStateProvider } from '../../components/UseStateProvider'; import { UseStateProvider } from '../../components/UseStateProvider';
@ -69,6 +70,7 @@ import { useFilePasteHandler } from '../../hooks/useFilePasteHandler';
import { useFileDropZone } from '../../hooks/useFileDrop'; import { useFileDropZone } from '../../hooks/useFileDrop';
import { import {
TUploadItem, TUploadItem,
TUploadMetadata,
roomIdToMsgDraftAtomFamily, roomIdToMsgDraftAtomFamily,
roomIdToReplyDraftAtomFamily, roomIdToReplyDraftAtomFamily,
roomIdToUploadItemsAtomFamily, roomIdToUploadItemsAtomFamily,
@ -102,12 +104,9 @@ import colorMXID from '../../../util/colorMXID';
import { import {
getAllParents, getAllParents,
getMemberDisplayName, getMemberDisplayName,
parseReplyBody, getMentionContent,
parseReplyFormattedBody,
trimReplyFromBody, trimReplyFromBody,
trimReplyFromFormattedBody,
} from '../../utils/room'; } from '../../utils/room';
import { sanitizeText } from '../../utils/sanitize';
import { CommandAutocomplete } from './CommandAutocomplete'; import { CommandAutocomplete } from './CommandAutocomplete';
import { Command, SHRUG, TABLEFLIP, UNFLIP, useCommands } from '../../hooks/useCommands'; import { Command, SHRUG, TABLEFLIP, UNFLIP, useCommands } from '../../hooks/useCommands';
import { mobileOrTablet } from '../../utils/user-agent'; import { mobileOrTablet } from '../../utils/user-agent';
@ -128,6 +127,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
const useAuthentication = useMediaAuthentication(); const useAuthentication = useMediaAuthentication();
const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline'); const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline');
const [isMarkdown] = useSetting(settingsAtom, 'isMarkdown'); const [isMarkdown] = useSetting(settingsAtom, 'isMarkdown');
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
const commands = useCommands(mx, room); const commands = useCommands(mx, room);
const emojiBtnRef = useRef<HTMLButtonElement>(null); const emojiBtnRef = useRef<HTMLButtonElement>(null);
const roomToParents = useAtomValue(roomToParentsAtom); const roomToParents = useAtomValue(roomToParentsAtom);
@ -222,6 +222,17 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
[roomId, editor, setMsgDraft] [roomId, editor, setMsgDraft]
); );
const handleFileMetadata = useCallback(
(fileItem: TUploadItem, metadata: TUploadMetadata) => {
setSelectedFiles({
type: 'REPLACE',
item: fileItem,
replacement: { ...fileItem, metadata },
});
},
[setSelectedFiles]
);
const handleRemoveUpload = useCallback( const handleRemoveUpload = useCallback(
(upload: TUploadContent | TUploadContent[]) => { (upload: TUploadContent | TUploadContent[]) => {
const uploads = Array.isArray(upload) ? upload : [upload]; const uploads = Array.isArray(upload) ? upload : [upload];
@ -268,8 +279,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
uploadBoardHandlers.current?.handleSend(); uploadBoardHandlers.current?.handleSend();
const commandName = getBeginCommand(editor); const commandName = getBeginCommand(editor);
let plainText = toPlainText(editor.children, isMarkdown).trim();
let plainText = toPlainText(editor.children).trim();
let customHtml = trimCustomHtml( let customHtml = trimCustomHtml(
toMatrixCustomHTML(editor.children, { toMatrixCustomHTML(editor.children, {
allowTextFormatting: true, allowTextFormatting: true,
@ -309,25 +319,22 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
if (plainText === '') return; if (plainText === '') return;
let body = plainText; const body = plainText;
let formattedBody = customHtml; const formattedBody = customHtml;
if (replyDraft) { const mentionData = getMentions(mx, roomId, editor);
body = parseReplyBody(replyDraft.userId, trimReplyFromBody(replyDraft.body)) + body;
formattedBody =
parseReplyFormattedBody(
roomId,
replyDraft.userId,
replyDraft.eventId,
replyDraft.formattedBody
? trimReplyFromFormattedBody(replyDraft.formattedBody)
: sanitizeText(replyDraft.body)
) + formattedBody;
}
const content: IContent = { const content: IContent = {
msgtype: msgType, msgtype: msgType,
body, body,
}; };
if (replyDraft && replyDraft.userId !== mx.getUserId()) {
mentionData.users.add(replyDraft.userId);
}
const mMentions = getMentionContent(Array.from(mentionData.users), mentionData.room);
content['m.mentions'] = mMentions;
if (replyDraft || !customHtmlEqualsPlainText(formattedBody, body)) { if (replyDraft || !customHtmlEqualsPlainText(formattedBody, body)) {
content.format = 'org.matrix.custom.html'; content.format = 'org.matrix.custom.html';
content.formatted_body = formattedBody; content.formatted_body = formattedBody;
@ -359,10 +366,14 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
} }
if (isKeyHotkey('escape', evt)) { if (isKeyHotkey('escape', evt)) {
evt.preventDefault(); evt.preventDefault();
if (autocompleteQuery) {
setAutocompleteQuery(undefined);
return;
}
setReplyDraft(undefined); setReplyDraft(undefined);
} }
}, },
[submit, setReplyDraft, enterForNewline] [submit, setReplyDraft, enterForNewline, autocompleteQuery]
); );
const handleKeyUp: KeyboardEventHandler = useCallback( const handleKeyUp: KeyboardEventHandler = useCallback(
@ -372,7 +383,9 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
return; return;
} }
sendTypingStatus(!isEmptyEditor(editor)); if (!hideActivity) {
sendTypingStatus(!isEmptyEditor(editor));
}
const prevWordRange = getPrevWorldRange(editor); const prevWordRange = getPrevWorldRange(editor);
const query = prevWordRange const query = prevWordRange
@ -380,7 +393,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
: undefined; : undefined;
setAutocompleteQuery(query); setAutocompleteQuery(query);
}, },
[editor, sendTypingStatus] [editor, sendTypingStatus, hideActivity]
); );
const handleCloseAutocomplete = useCallback(() => { const handleCloseAutocomplete = useCallback(() => {
@ -435,13 +448,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
key={index} key={index}
isEncrypted={!!fileItem.encInfo} isEncrypted={!!fileItem.encInfo}
fileItem={fileItem} fileItem={fileItem}
setMetadata={(metadata) => setMetadata={handleFileMetadata}
setSelectedFiles({
type: 'REPLACE',
item: fileItem,
replacement: { ...fileItem, metadata },
})
}
onRemove={handleRemoveUpload} onRemove={handleRemoveUpload}
/> />
))} ))}
@ -593,8 +600,13 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
onCustomEmojiSelect={handleEmoticonSelect} onCustomEmojiSelect={handleEmoticonSelect}
onStickerSelect={handleStickerSelect} onStickerSelect={handleStickerSelect}
requestClose={() => { requestClose={() => {
setEmojiBoardTab(undefined); setEmojiBoardTab((t) => {
if (!mobileOrTablet()) ReactEditor.focus(editor); if (t) {
if (!mobileOrTablet()) ReactEditor.focus(editor);
return undefined;
}
return t;
});
}} }}
/> />
} }

126
src/app/features/room/RoomTimeline.tsx
View file

@ -117,6 +117,7 @@ import { useMentionClickHandler } from '../../hooks/useMentionClickHandler';
import { useSpoilerClickHandler } from '../../hooks/useSpoilerClickHandler'; import { useSpoilerClickHandler } from '../../hooks/useSpoilerClickHandler';
import { useRoomNavigate } from '../../hooks/useRoomNavigate'; import { useRoomNavigate } from '../../hooks/useRoomNavigate';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication'; import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
const TimelineFloat = as<'div', css.TimelineFloatVariants>( const TimelineFloat = as<'div', css.TimelineFloatVariants>(
({ position, className, ...props }, ref) => ( ({ position, className, ...props }, ref) => (
@ -424,6 +425,7 @@ const getRoomUnreadInfo = (room: Room, scrollTo = false) => {
export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimelineProps) { export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimelineProps) {
const mx = useMatrixClient(); const mx = useMatrixClient();
const useAuthentication = useMediaAuthentication(); const useAuthentication = useMediaAuthentication();
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
const [messageLayout] = useSetting(settingsAtom, 'messageLayout'); const [messageLayout] = useSetting(settingsAtom, 'messageLayout');
const [messageSpacing] = useSetting(settingsAtom, 'messageSpacing'); const [messageSpacing] = useSetting(settingsAtom, 'messageSpacing');
const [hideMembershipEvents] = useSetting(settingsAtom, 'hideMembershipEvents'); const [hideMembershipEvents] = useSetting(settingsAtom, 'hideMembershipEvents');
@ -433,6 +435,10 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
const [encUrlPreview] = useSetting(settingsAtom, 'encUrlPreview'); const [encUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
const showUrlPreview = room.hasEncryptionStateEvent() ? encUrlPreview : urlPreview; const showUrlPreview = room.hasEncryptionStateEvent() ? encUrlPreview : urlPreview;
const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents'); const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
const ignoredUsersList = useIgnoredUsers();
const ignoredUsersSet = useMemo(() => new Set(ignoredUsersList), [ignoredUsersList]);
const setReplyDraft = useSetAtom(roomIdToReplyDraftAtomFamily(room.roomId)); const setReplyDraft = useSetAtom(roomIdToReplyDraftAtomFamily(room.roomId));
const powerLevels = usePowerLevelsContext(); const powerLevels = usePowerLevelsContext();
const { canDoAction, canSendEvent, canSendStateEvent, getPowerLevel } = const { canDoAction, canSendEvent, canSendStateEvent, getPowerLevel } =
@ -586,15 +592,19 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
// so timeline can be updated with evt like: edits, reactions etc // so timeline can be updated with evt like: edits, reactions etc
if (atBottomRef.current) { if (atBottomRef.current) {
if (document.hasFocus() && (!unreadInfo || mEvt.getSender() === mx.getUserId())) { if (document.hasFocus() && (!unreadInfo || mEvt.getSender() === mx.getUserId())) {
requestAnimationFrame(() => markAsRead(mx, mEvt.getRoomId()!)); // Check if the document is in focus (user is actively viewing the app),
// and either there are no unread messages or the latest message is from the current user.
// If either condition is met, trigger the markAsRead function to send a read receipt.
requestAnimationFrame(() => markAsRead(mx, mEvt.getRoomId()!, hideActivity));
} }
if (document.hasFocus()) { if (!document.hasFocus() && !unreadInfo) {
scrollToBottomRef.current.count += 1;
scrollToBottomRef.current.smooth = true;
} else if (!unreadInfo) {
setUnreadInfo(getRoomUnreadInfo(room)); setUnreadInfo(getRoomUnreadInfo(room));
} }
scrollToBottomRef.current.count += 1;
scrollToBottomRef.current.smooth = true;
setTimeline((ct) => ({ setTimeline((ct) => ({
...ct, ...ct,
range: { range: {
@ -609,10 +619,40 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
setUnreadInfo(getRoomUnreadInfo(room)); setUnreadInfo(getRoomUnreadInfo(room));
} }
}, },
[mx, room, unreadInfo] [mx, room, unreadInfo, hideActivity]
) )
); );
const handleOpenEvent = useCallback(
async (
evtId: string,
highlight = true,
onScroll: ((scrolled: boolean) => void) | undefined = undefined
) => {
const evtTimeline = getEventTimeline(room, evtId);
const absoluteIndex =
evtTimeline && getEventIdAbsoluteIndex(timeline.linkedTimelines, evtTimeline, evtId);
if (typeof absoluteIndex === 'number') {
const scrolled = scrollToItem(absoluteIndex, {
behavior: 'smooth',
align: 'center',
stopInView: true,
});
if (onScroll) onScroll(scrolled);
setFocusItem({
index: absoluteIndex,
scrollTo: false,
highlight,
});
} else {
setTimeline(getEmptyTimeline());
loadEventTimeline(evtId);
}
},
[room, timeline, scrollToItem, loadEventTimeline]
);
useLiveTimelineRefresh( useLiveTimelineRefresh(
room, room,
useCallback(() => { useCallback(() => {
@ -646,16 +686,17 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
); );
const tryAutoMarkAsRead = useCallback(() => { const tryAutoMarkAsRead = useCallback(() => {
if (!unreadInfo) { const readUptoEventId = readUptoEventIdRef.current;
requestAnimationFrame(() => markAsRead(mx, room.roomId)); if (!readUptoEventId) {
requestAnimationFrame(() => markAsRead(mx, room.roomId, hideActivity));
return; return;
} }
const evtTimeline = getEventTimeline(room, unreadInfo.readUptoEventId); const evtTimeline = getEventTimeline(room, readUptoEventId);
const latestTimeline = evtTimeline && getFirstLinkedTimeline(evtTimeline, Direction.Forward); const latestTimeline = evtTimeline && getFirstLinkedTimeline(evtTimeline, Direction.Forward);
if (latestTimeline === room.getLiveTimeline()) { if (latestTimeline === room.getLiveTimeline()) {
requestAnimationFrame(() => markAsRead(mx, room.roomId)); requestAnimationFrame(() => markAsRead(mx, room.roomId, hideActivity));
} }
}, [mx, room, unreadInfo]); }, [mx, room, hideActivity]);
const debounceSetAtBottom = useDebounce( const debounceSetAtBottom = useDebounce(
useCallback((entry: IntersectionObserverEntry) => { useCallback((entry: IntersectionObserverEntry) => {
@ -672,7 +713,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
if (targetEntry) debounceSetAtBottom(targetEntry); if (targetEntry) debounceSetAtBottom(targetEntry);
if (targetEntry?.isIntersecting && atLiveEndRef.current) { if (targetEntry?.isIntersecting && atLiveEndRef.current) {
setAtBottom(true); setAtBottom(true);
tryAutoMarkAsRead(); if (document.hasFocus()) {
tryAutoMarkAsRead();
}
} }
}, },
[debounceSetAtBottom, tryAutoMarkAsRead] [debounceSetAtBottom, tryAutoMarkAsRead]
@ -691,10 +734,20 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
useCallback( useCallback(
(inFocus) => { (inFocus) => {
if (inFocus && atBottomRef.current) { if (inFocus && atBottomRef.current) {
if (unreadInfo?.inLiveTimeline) {
handleOpenEvent(unreadInfo.readUptoEventId, false, (scrolled) => {
// the unread event is already in view
// so, try mark as read;
if (!scrolled) {
tryAutoMarkAsRead();
}
});
return;
}
tryAutoMarkAsRead(); tryAutoMarkAsRead();
} }
}, },
[tryAutoMarkAsRead] [tryAutoMarkAsRead, unreadInfo, handleOpenEvent]
) )
); );
@ -825,34 +878,16 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
}; };
const handleMarkAsRead = () => { const handleMarkAsRead = () => {
markAsRead(mx, room.roomId); markAsRead(mx, room.roomId, hideActivity);
}; };
const handleOpenReply: MouseEventHandler = useCallback( const handleOpenReply: MouseEventHandler = useCallback(
async (evt) => { async (evt) => {
const targetId = evt.currentTarget.getAttribute('data-event-id'); const targetId = evt.currentTarget.getAttribute('data-event-id');
if (!targetId) return; if (!targetId) return;
const replyTimeline = getEventTimeline(room, targetId); handleOpenEvent(targetId);
const absoluteIndex =
replyTimeline && getEventIdAbsoluteIndex(timeline.linkedTimelines, replyTimeline, targetId);
if (typeof absoluteIndex === 'number') {
scrollToItem(absoluteIndex, {
behavior: 'smooth',
align: 'center',
stopInView: true,
});
setFocusItem({
index: absoluteIndex,
scrollTo: false,
highlight: true,
});
} else {
setTimeline(getEmptyTimeline());
loadEventTimeline(targetId);
}
}, },
[room, timeline, scrollToItem, loadEventTimeline] [handleOpenEvent]
); );
const handleUserClick: MouseEventHandler<HTMLButtonElement> = useCallback( const handleUserClick: MouseEventHandler<HTMLButtonElement> = useCallback(
@ -1018,6 +1053,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
/> />
) )
} }
hideReadReceipts={hideActivity}
> >
{mEvent.isRedacted() ? ( {mEvent.isRedacted() ? (
<RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} /> <RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
@ -1090,6 +1126,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
/> />
) )
} }
hideReadReceipts={hideActivity}
> >
<EncryptedContent mEvent={mEvent}> <EncryptedContent mEvent={mEvent}>
{() => { {() => {
@ -1186,6 +1223,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
/> />
) )
} }
hideReadReceipts={hideActivity}
> >
{mEvent.isRedacted() ? ( {mEvent.isRedacted() ? (
<RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} /> <RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
@ -1227,6 +1265,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
highlight={highlighted} highlight={highlighted}
messageSpacing={messageSpacing} messageSpacing={messageSpacing}
canDelete={canRedact || mEvent.getSender() === mx.getUserId()} canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
hideReadReceipts={hideActivity}
> >
<EventContent <EventContent
messageLayout={messageLayout} messageLayout={messageLayout}
@ -1262,6 +1301,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
highlight={highlighted} highlight={highlighted}
messageSpacing={messageSpacing} messageSpacing={messageSpacing}
canDelete={canRedact || mEvent.getSender() === mx.getUserId()} canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
hideReadReceipts={hideActivity}
> >
<EventContent <EventContent
messageLayout={messageLayout} messageLayout={messageLayout}
@ -1298,6 +1338,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
highlight={highlighted} highlight={highlighted}
messageSpacing={messageSpacing} messageSpacing={messageSpacing}
canDelete={canRedact || mEvent.getSender() === mx.getUserId()} canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
hideReadReceipts={hideActivity}
> >
<EventContent <EventContent
messageLayout={messageLayout} messageLayout={messageLayout}
@ -1334,6 +1375,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
highlight={highlighted} highlight={highlighted}
messageSpacing={messageSpacing} messageSpacing={messageSpacing}
canDelete={canRedact || mEvent.getSender() === mx.getUserId()} canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
hideReadReceipts={hideActivity}
> >
<EventContent <EventContent
messageLayout={messageLayout} messageLayout={messageLayout}
@ -1372,6 +1414,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
highlight={highlighted} highlight={highlighted}
messageSpacing={messageSpacing} messageSpacing={messageSpacing}
canDelete={canRedact || mEvent.getSender() === mx.getUserId()} canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
hideReadReceipts={hideActivity}
> >
<EventContent <EventContent
messageLayout={messageLayout} messageLayout={messageLayout}
@ -1415,6 +1458,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
highlight={highlighted} highlight={highlighted}
messageSpacing={messageSpacing} messageSpacing={messageSpacing}
canDelete={canRedact || mEvent.getSender() === mx.getUserId()} canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
hideReadReceipts={hideActivity}
> >
<EventContent <EventContent
messageLayout={messageLayout} messageLayout={messageLayout}
@ -1449,6 +1493,14 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
if (!mEvent || !mEventId) return null; if (!mEvent || !mEventId) return null;
const eventSender = mEvent.getSender();
if (eventSender && ignoredUsersSet.has(eventSender)) {
return null;
}
if (mEvent.isRedacted() && !showHiddenEvents) {
return null;
}
if (!newDivider && readUptoEventIdRef.current) { if (!newDivider && readUptoEventIdRef.current) {
newDivider = prevEvent?.getId() === readUptoEventIdRef.current; newDivider = prevEvent?.getId() === readUptoEventIdRef.current;
} }
@ -1459,9 +1511,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
const collapsed = const collapsed =
isPrevRendered && isPrevRendered &&
!dayDivider && !dayDivider &&
(!newDivider || mEvent.getSender() === mx.getUserId()) && (!newDivider || eventSender === mx.getUserId()) &&
prevEvent !== undefined && prevEvent !== undefined &&
prevEvent.getSender() === mEvent.getSender() && prevEvent.getSender() === eventSender &&
prevEvent.getType() === mEvent.getType() && prevEvent.getType() === mEvent.getType() &&
minuteDifference(prevEvent.getTs(), mEvent.getTs()) < 2; minuteDifference(prevEvent.getTs(), mEvent.getTs()) < 2;
@ -1480,7 +1532,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
isPrevRendered = !!eventJSX; isPrevRendered = !!eventJSX;
const newDividerJSX = const newDividerJSX =
newDivider && eventJSX && mEvent.getSender() !== mx.getUserId() ? ( newDivider && eventJSX && eventSender !== mx.getUserId() ? (
<MessageBase space={messageSpacing}> <MessageBase space={messageSpacing}>
<TimelineDivider style={{ color: color.Success.Main }} variant="Inherit"> <TimelineDivider style={{ color: color.Success.Main }} variant="Inherit">
<Badge as="span" size="500" variant="Success" fill="Solid" radii="300"> <Badge as="span" size="500" variant="Success" fill="Solid" radii="300">

11
src/app/features/room/RoomView.tsx
View file

@ -13,13 +13,16 @@ import { RoomTimeline } from './RoomTimeline';
import { RoomViewTyping } from './RoomViewTyping'; import { RoomViewTyping } from './RoomViewTyping';
import { RoomTombstone } from './RoomTombstone'; import { RoomTombstone } from './RoomTombstone';
import { RoomInput } from './RoomInput'; import { RoomInput } from './RoomInput';
import { RoomViewFollowing } from './RoomViewFollowing'; import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollowing';
import { Page } from '../../components/page'; import { Page } from '../../components/page';
import { RoomViewHeader } from './RoomViewHeader'; import { RoomViewHeader } from './RoomViewHeader';
import { useKeyDown } from '../../hooks/useKeyDown'; import { useKeyDown } from '../../hooks/useKeyDown';
import { editableActiveElement } from '../../utils/dom'; import { editableActiveElement } from '../../utils/dom';
import navigation from '../../../client/state/navigation'; import navigation from '../../../client/state/navigation';
import { settingsAtom } from '../../state/settings';
import { useSetting } from '../../state/hooks/settings';
const FN_KEYS_REGEX = /^F\d+$/;
const shouldFocusMessageField = (evt: KeyboardEvent): boolean => { const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
const { code } = evt; const { code } = evt;
if (evt.metaKey || evt.altKey || evt.ctrlKey) { if (evt.metaKey || evt.altKey || evt.ctrlKey) {
@ -27,7 +30,7 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
} }
// do not focus on F keys // do not focus on F keys
if (/^F\d+$/.test(code)) return false; if (FN_KEYS_REGEX.test(code)) return false;
// do not focus on numlock/scroll lock // do not focus on numlock/scroll lock
if ( if (
@ -56,6 +59,8 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
const roomInputRef = useRef<HTMLDivElement>(null); const roomInputRef = useRef<HTMLDivElement>(null);
const roomViewRef = useRef<HTMLDivElement>(null); const roomViewRef = useRef<HTMLDivElement>(null);
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
const { roomId } = room; const { roomId } = room;
const editor = useEditor(); const editor = useEditor();
@ -132,7 +137,7 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
</> </>
)} )}
</div> </div>
<RoomViewFollowing room={room} /> {hideActivity ? <RoomViewFollowingPlaceholder /> : <RoomViewFollowing room={room} />}
</Box> </Box>
</Page> </Page>
); );

8
src/app/features/room/RoomViewFollowing.css.ts
View file

@ -1,6 +1,14 @@
import { style } from '@vanilla-extract/css';
import { recipe } from '@vanilla-extract/recipes'; import { recipe } from '@vanilla-extract/recipes';
import { DefaultReset, color, config, toRem } from 'folds'; import { DefaultReset, color, config, toRem } from 'folds';
export const RoomViewFollowingPlaceholder = style([
DefaultReset,
{
height: toRem(28),
},
]);
export const RoomViewFollowing = recipe({ export const RoomViewFollowing = recipe({
base: [ base: [
DefaultReset, DefaultReset,

4
src/app/features/room/RoomViewFollowing.tsx
View file

@ -24,6 +24,10 @@ import { useRoomEventReaders } from '../../hooks/useRoomEventReaders';
import { EventReaders } from '../../components/event-readers'; import { EventReaders } from '../../components/event-readers';
import { stopPropagation } from '../../utils/keyboard'; import { stopPropagation } from '../../utils/keyboard';
export function RoomViewFollowingPlaceholder() {
return <div className={css.RoomViewFollowingPlaceholder} />;
}
export type RoomViewFollowingProps = { export type RoomViewFollowingProps = {
room: Room; room: Room;
}; };

5
src/app/features/room/RoomViewHeader.tsx
View file

@ -33,7 +33,7 @@ import { RoomTopicViewer } from '../../components/room-topic-viewer';
import { StateEvent } from '../../../types/matrix/room'; import { StateEvent } from '../../../types/matrix/room';
import { useMatrixClient } from '../../hooks/useMatrixClient'; import { useMatrixClient } from '../../hooks/useMatrixClient';
import { useRoom } from '../../hooks/useRoom'; import { useRoom } from '../../hooks/useRoom';
import { useSetSetting } from '../../state/hooks/settings'; import { useSetSetting, useSetting } from '../../state/hooks/settings';
import { settingsAtom } from '../../state/settings'; import { settingsAtom } from '../../state/settings';
import { useSpaceOptionally } from '../../hooks/useSpace'; import { useSpaceOptionally } from '../../hooks/useSpace';
import { getHomeSearchPath, getSpaceSearchPath, withSearchParam } from '../../pages/pathUtils'; import { getHomeSearchPath, getSpaceSearchPath, withSearchParam } from '../../pages/pathUtils';
@ -64,13 +64,14 @@ type RoomMenuProps = {
}; };
const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose }, ref) => { const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose }, ref) => {
const mx = useMatrixClient(); const mx = useMatrixClient();
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
const unread = useRoomUnread(room.roomId, roomToUnreadAtom); const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
const powerLevels = usePowerLevelsContext(); const powerLevels = usePowerLevelsContext();
const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels); const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? '')); const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
const handleMarkAsRead = () => { const handleMarkAsRead = () => {
markAsRead(mx, room.roomId); markAsRead(mx, room.roomId, hideActivity);
requestClose(); requestClose();
}; };

44
src/app/features/room/message/Message.tsx
View file

@ -35,7 +35,7 @@ import { useHover, useFocusWithin } from 'react-aria';
import { MatrixEvent, Room } from 'matrix-js-sdk'; import { MatrixEvent, Room } from 'matrix-js-sdk';
import { Relations } from 'matrix-js-sdk/lib/models/relations'; import { Relations } from 'matrix-js-sdk/lib/models/relations';
import classNames from 'classnames'; import classNames from 'classnames';
import { EventType, RoomPinnedEventsEventContent } from 'matrix-js-sdk/lib/types'; import { RoomPinnedEventsEventContent } from 'matrix-js-sdk/lib/types';
import { import {
AvatarBase, AvatarBase,
BubbleLayout, BubbleLayout,
@ -671,6 +671,7 @@ export type MessageProps = {
onReactionToggle: (targetEventId: string, key: string, shortcode?: string) => void; onReactionToggle: (targetEventId: string, key: string, shortcode?: string) => void;
reply?: ReactNode; reply?: ReactNode;
reactions?: ReactNode; reactions?: ReactNode;
hideReadReceipts?: boolean;
}; };
export const Message = as<'div', MessageProps>( export const Message = as<'div', MessageProps>(
( (
@ -695,6 +696,7 @@ export const Message = as<'div', MessageProps>(
onEditId, onEditId,
reply, reply,
reactions, reactions,
hideReadReceipts,
children, children,
...props ...props
}, },
@ -992,11 +994,13 @@ export const Message = as<'div', MessageProps>(
</Text> </Text>
</MenuItem> </MenuItem>
)} )}
<MessageReadReceiptItem {!hideReadReceipts && (
room={room} <MessageReadReceiptItem
eventId={mEvent.getId() ?? ''} room={room}
onClose={closeMenu} eventId={mEvent.getId() ?? ''}
/> onClose={closeMenu}
/>
)}
<MessageSourceCodeItem room={room} mEvent={mEvent} onClose={closeMenu} /> <MessageSourceCodeItem room={room} mEvent={mEvent} onClose={closeMenu} />
<MessageCopyLinkItem room={room} mEvent={mEvent} onClose={closeMenu} /> <MessageCopyLinkItem room={room} mEvent={mEvent} onClose={closeMenu} />
{canPinEvent && ( {canPinEvent && (
@ -1071,9 +1075,23 @@ export type EventProps = {
highlight: boolean; highlight: boolean;
canDelete?: boolean; canDelete?: boolean;
messageSpacing: MessageSpacing; messageSpacing: MessageSpacing;
hideReadReceipts?: boolean;
}; };
export const Event = as<'div', EventProps>( export const Event = as<'div', EventProps>(
({ className, room, mEvent, highlight, canDelete, messageSpacing, children, ...props }, ref) => { (
{
className,
room,
mEvent,
highlight,
canDelete,
messageSpacing,
hideReadReceipts,
children,
...props
},
ref
) => {
const mx = useMatrixClient(); const mx = useMatrixClient();
const [hover, setHover] = useState(false); const [hover, setHover] = useState(false);
const { hoverProps } = useHover({ onHoverChange: setHover }); const { hoverProps } = useHover({ onHoverChange: setHover });
@ -1138,11 +1156,13 @@ export const Event = as<'div', EventProps>(
> >
<Menu {...props} ref={ref}> <Menu {...props} ref={ref}>
<Box direction="Column" gap="100" className={css.MessageMenuGroup}> <Box direction="Column" gap="100" className={css.MessageMenuGroup}>
<MessageReadReceiptItem {!hideReadReceipts && (
room={room} <MessageReadReceiptItem
eventId={mEvent.getId() ?? ''} room={room}
onClose={closeMenu} eventId={mEvent.getId() ?? ''}
/> onClose={closeMenu}
/>
)}
<MessageSourceCodeItem room={room} mEvent={mEvent} onClose={closeMenu} /> <MessageSourceCodeItem room={room} mEvent={mEvent} onClose={closeMenu} />
<MessageCopyLinkItem room={room} mEvent={mEvent} onClose={closeMenu} /> <MessageCopyLinkItem room={room} mEvent={mEvent} onClose={closeMenu} />
</Box> </Box>

43
src/app/features/room/message/MessageEditor.tsx
View file

@ -21,7 +21,7 @@ import {
} from 'folds'; } from 'folds';
import { Editor, Transforms } from 'slate'; import { Editor, Transforms } from 'slate';
import { ReactEditor } from 'slate-react'; import { ReactEditor } from 'slate-react';
import { IContent, MatrixEvent, RelationType, Room } from 'matrix-js-sdk'; import { IContent, IMentions, MatrixEvent, RelationType, Room } from 'matrix-js-sdk';
import { isKeyHotkey } from 'is-hotkey'; import { isKeyHotkey } from 'is-hotkey';
import { import {
AUTOCOMPLETE_PREFIXES, AUTOCOMPLETE_PREFIXES,
@ -43,6 +43,7 @@ import {
toPlainText, toPlainText,
trimCustomHtml, trimCustomHtml,
useEditor, useEditor,
getMentions,
} from '../../../components/editor'; } from '../../../components/editor';
import { useSetting } from '../../../state/hooks/settings'; import { useSetting } from '../../../state/hooks/settings';
import { settingsAtom } from '../../../state/settings'; import { settingsAtom } from '../../../state/settings';
@ -50,7 +51,7 @@ import { UseStateProvider } from '../../../components/UseStateProvider';
import { EmojiBoard } from '../../../components/emoji-board'; import { EmojiBoard } from '../../../components/emoji-board';
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback'; import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
import { useMatrixClient } from '../../../hooks/useMatrixClient'; import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { getEditedEvent, trimReplyFromFormattedBody } from '../../../utils/room'; import { getEditedEvent, getMentionContent, trimReplyFromFormattedBody } from '../../../utils/room';
import { mobileOrTablet } from '../../../utils/user-agent'; import { mobileOrTablet } from '../../../utils/user-agent';
type MessageEditorProps = { type MessageEditorProps = {
@ -74,25 +75,29 @@ export const MessageEditor = as<'div', MessageEditorProps>(
const getPrevBodyAndFormattedBody = useCallback((): [ const getPrevBodyAndFormattedBody = useCallback((): [
string | undefined, string | undefined,
string | undefined string | undefined,
IMentions | undefined
] => { ] => {
const evtId = mEvent.getId()!; const evtId = mEvent.getId()!;
const evtTimeline = room.getTimelineForEvent(evtId); const evtTimeline = room.getTimelineForEvent(evtId);
const editedEvent = const editedEvent =
evtTimeline && getEditedEvent(evtId, mEvent, evtTimeline.getTimelineSet()); evtTimeline && getEditedEvent(evtId, mEvent, evtTimeline.getTimelineSet());
const { body, formatted_body: customHtml }: Record<string, unknown> = const content: IContent = editedEvent?.getContent()['m.new_content'] ?? mEvent.getContent();
editedEvent?.getContent()['m.new_content'] ?? mEvent.getContent(); const { body, formatted_body: customHtml }: Record<string, unknown> = content;
const mMentions: IMentions | undefined = content['m.mentions'];
return [ return [
typeof body === 'string' ? body : undefined, typeof body === 'string' ? body : undefined,
typeof customHtml === 'string' ? customHtml : undefined, typeof customHtml === 'string' ? customHtml : undefined,
mMentions,
]; ];
}, [room, mEvent]); }, [room, mEvent]);
const [saveState, save] = useAsyncCallback( const [saveState, save] = useAsyncCallback(
useCallback(async () => { useCallback(async () => {
const plainText = toPlainText(editor.children).trim(); const plainText = toPlainText(editor.children, isMarkdown).trim();
const customHtml = trimCustomHtml( const customHtml = trimCustomHtml(
toMatrixCustomHTML(editor.children, { toMatrixCustomHTML(editor.children, {
allowTextFormatting: true, allowTextFormatting: true,
@ -101,7 +106,7 @@ export const MessageEditor = as<'div', MessageEditorProps>(
}) })
); );
const [prevBody, prevCustomHtml] = getPrevBodyAndFormattedBody(); const [prevBody, prevCustomHtml, prevMentions] = getPrevBodyAndFormattedBody();
if (plainText === '') return undefined; if (plainText === '') return undefined;
if (prevBody) { if (prevBody) {
@ -122,6 +127,15 @@ export const MessageEditor = as<'div', MessageEditorProps>(
body: plainText, body: plainText,
}; };
const mentionData = getMentions(mx, roomId, editor);
prevMentions?.user_ids?.forEach((prevMentionId) => {
mentionData.users.add(prevMentionId);
});
const mMentions = getMentionContent(Array.from(mentionData.users), mentionData.room);
newContent['m.mentions'] = mMentions;
if (!customHtmlEqualsPlainText(customHtml, plainText)) { if (!customHtmlEqualsPlainText(customHtml, plainText)) {
newContent.format = 'org.matrix.custom.html'; newContent.format = 'org.matrix.custom.html';
newContent.formatted_body = customHtml; newContent.formatted_body = customHtml;
@ -192,8 +206,8 @@ export const MessageEditor = as<'div', MessageEditorProps>(
const initialValue = const initialValue =
typeof customHtml === 'string' typeof customHtml === 'string'
? htmlToEditorInput(customHtml) ? htmlToEditorInput(customHtml, isMarkdown)
: plainToEditorInput(typeof body === 'string' ? body : ''); : plainToEditorInput(typeof body === 'string' ? body : '', isMarkdown);
Transforms.select(editor, { Transforms.select(editor, {
anchor: Editor.start(editor, []), anchor: Editor.start(editor, []),
@ -202,7 +216,7 @@ export const MessageEditor = as<'div', MessageEditorProps>(
editor.insertFragment(initialValue); editor.insertFragment(initialValue);
if (!mobileOrTablet()) ReactEditor.focus(editor); if (!mobileOrTablet()) ReactEditor.focus(editor);
}, [editor, getPrevBodyAndFormattedBody]); }, [editor, getPrevBodyAndFormattedBody, isMarkdown]);
useEffect(() => { useEffect(() => {
if (saveState.status === AsyncStatus.Success) { if (saveState.status === AsyncStatus.Success) {
@ -291,8 +305,13 @@ export const MessageEditor = as<'div', MessageEditorProps>(
onEmojiSelect={handleEmoticonSelect} onEmojiSelect={handleEmoticonSelect}
onCustomEmojiSelect={handleEmoticonSelect} onCustomEmojiSelect={handleEmoticonSelect}
requestClose={() => { requestClose={() => {
setAnchor(undefined); setAnchor((v) => {
if (!mobileOrTablet()) ReactEditor.focus(editor); if (v) {
if (!mobileOrTablet()) ReactEditor.focus(editor);
return undefined;
}
return v;
});
}} }}
/> />
} }

90
src/app/features/settings/developer-tools/AccountData.tsx Normal file
View file

@ -0,0 +1,90 @@
import React, { useCallback, useState } from 'react';
import { Box, Text, Icon, Icons, Chip, Button } from 'folds';
import { SequenceCard } from '../../../components/sequence-card';
import { SequenceCardStyle } from '../styles.css';
import { SettingTile } from '../../../components/setting-tile';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { useAccountDataCallback } from '../../../hooks/useAccountDataCallback';
type AccountDataProps = {
expand: boolean;
onExpandToggle: (expand: boolean) => void;
onSelect: (type: string | null) => void;
};
export function AccountData({ expand, onExpandToggle, onSelect }: AccountDataProps) {
const mx = useMatrixClient();
const [accountData, setAccountData] = useState(() => Array.from(mx.store.accountData.values()));
useAccountDataCallback(
mx,
useCallback(
() => setAccountData(Array.from(mx.store.accountData.values())),
[mx, setAccountData]
)
);
return (
<Box direction="Column" gap="100">
<Text size="L400">Account Data</Text>
<SequenceCard
className={SequenceCardStyle}
variant="SurfaceVariant"
direction="Column"
gap="400"
>
<SettingTile
title="Global"
description="Data stored in your global account data."
after={
<Button
onClick={() => onExpandToggle(!expand)}
variant="Secondary"
fill="Soft"
size="300"
radii="300"
outlined
before={
<Icon src={expand ? Icons.ChevronTop : Icons.ChevronBottom} size="100" filled />
}
>
<Text size="B300">{expand ? 'Collapse' : 'Expand'}</Text>
</Button>
}
/>
{expand && (
<SettingTile>
<Box direction="Column" gap="200">
<Text size="L400">Types</Text>
<Box gap="200" wrap="Wrap">
<Chip
variant="Secondary"
fill="Soft"
radii="Pill"
before={<Icon size="50" src={Icons.Plus} />}
onClick={() => onSelect(null)}
>
<Text size="T200" truncate>
Add New
</Text>
</Chip>
{accountData.map((mEvent) => (
<Chip
key={mEvent.getType()}
variant="Secondary"
fill="Soft"
radii="Pill"
onClick={() => onSelect(mEvent.getType())}
>
<Text size="T200" truncate>
{mEvent.getType()}
</Text>
</Chip>
))}
</Box>
</Box>
</SettingTile>
)}
</SequenceCard>
</Box>
);
}

447
src/app/features/settings/developer-tools/AccountDataEditor.tsx
View file

@ -8,9 +8,7 @@ import React, {
useState, useState,
} from 'react'; } from 'react';
import { import {
as,
Box, Box,
Header,
Text, Text,
Icon, Icon,
Icons, Icons,
@ -20,6 +18,9 @@ import {
TextArea as TextAreaComponent, TextArea as TextAreaComponent,
color, color,
Spinner, Spinner,
Chip,
Scroll,
config,
} from 'folds'; } from 'folds';
import { isKeyHotkey } from 'is-hotkey'; import { isKeyHotkey } from 'is-hotkey';
import { MatrixError } from 'matrix-js-sdk'; import { MatrixError } from 'matrix-js-sdk';
@ -30,182 +31,302 @@ import { GetTarget } from '../../../plugins/text-area/type';
import { syntaxErrorPosition } from '../../../utils/dom'; import { syntaxErrorPosition } from '../../../utils/dom';
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback'; import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
import { useMatrixClient } from '../../../hooks/useMatrixClient'; import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { Page, PageHeader } from '../../../components/page';
import { useAlive } from '../../../hooks/useAlive';
import { SequenceCard } from '../../../components/sequence-card';
import { TextViewerContent } from '../../../components/text-viewer';
const EDITOR_INTENT_SPACE_COUNT = 2; const EDITOR_INTENT_SPACE_COUNT = 2;
type AccountDataInfo = {
type: string;
content: object;
};
type AccountDataEditProps = {
type: string;
defaultContent: string;
onCancel: () => void;
onSave: (info: AccountDataInfo) => void;
};
function AccountDataEdit({ type, defaultContent, onCancel, onSave }: AccountDataEditProps) {
const mx = useMatrixClient();
const alive = useAlive();
const textAreaRef = useRef<HTMLTextAreaElement>(null);
const [jsonError, setJSONError] = useState<SyntaxError>();
const getTarget: GetTarget = useCallback(() => {
const target = textAreaRef.current;
if (!target) throw new Error('TextArea element not found!');
return target;
}, []);
const { textArea, operations, intent } = useMemo(() => {
const ta = new TextArea(getTarget);
const op = new TextAreaOperations(getTarget);
return {
textArea: ta,
operations: op,
intent: new Intent(EDITOR_INTENT_SPACE_COUNT, ta, op),
};
}, [getTarget]);
const intentHandler = useTextAreaIntentHandler(textArea, operations, intent);
const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (evt) => {
intentHandler(evt);
if (isKeyHotkey('escape', evt)) {
const cursor = Cursor.fromTextAreaElement(getTarget());
operations.deselect(cursor);
}
};
const [submitState, submit] = useAsyncCallback<object, MatrixError, [string, object]>(
useCallback((dataType, data) => mx.setAccountData(dataType, data), [mx])
);
const submitting = submitState.status === AsyncStatus.Loading;
const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
evt.preventDefault();
if (submitting) return;
const target = evt.target as HTMLFormElement | undefined;
const typeInput = target?.typeInput as HTMLInputElement | undefined;
const contentTextArea = target?.contentTextArea as HTMLTextAreaElement | undefined;
if (!typeInput || !contentTextArea) return;
const typeStr = typeInput.value.trim();
const contentStr = contentTextArea.value.trim();
let parsedContent: object;
try {
parsedContent = JSON.parse(contentStr);
} catch (e) {
setJSONError(e as SyntaxError);
return;
}
setJSONError(undefined);
if (
!typeStr ||
parsedContent === null ||
defaultContent === JSON.stringify(parsedContent, null, EDITOR_INTENT_SPACE_COUNT)
) {
return;
}
submit(typeStr, parsedContent).then(() => {
if (alive()) {
onSave({
type: typeStr,
content: parsedContent,
});
}
});
};
useEffect(() => {
if (jsonError) {
const errorPosition = syntaxErrorPosition(jsonError) ?? 0;
const cursor = new Cursor(errorPosition, errorPosition, 'none');
operations.select(cursor);
getTarget()?.focus();
}
}, [jsonError, operations, getTarget]);
return (
<Box
as="form"
onSubmit={handleSubmit}
grow="Yes"
className={css.EditorContent}
direction="Column"
gap="400"
aria-disabled={submitting}
>
<Box shrink="No" direction="Column" gap="100">
<Text size="L400">Account Data</Text>
<Box gap="300">
<Box grow="Yes" direction="Column">
<Input
variant={type.length > 0 || submitting ? 'SurfaceVariant' : 'Background'}
name="typeInput"
size="400"
radii="300"
readOnly={type.length > 0 || submitting}
defaultValue={type}
required
/>
</Box>
<Button
variant="Success"
size="400"
radii="300"
type="submit"
disabled={submitting}
before={submitting && <Spinner variant="Primary" fill="Solid" size="300" />}
>
<Text size="B400">Save</Text>
</Button>
<Button
variant="Secondary"
fill="Soft"
size="400"
radii="300"
onClick={onCancel}
disabled={submitting}
>
<Text size="B400">Cancel</Text>
</Button>
</Box>
{submitState.status === AsyncStatus.Error && (
<Text size="T200" style={{ color: color.Critical.Main }}>
<b>{submitState.error.message}</b>
</Text>
)}
</Box>
<Box grow="Yes" direction="Column" gap="100">
<Box shrink="No">
<Text size="L400">JSON Content</Text>
</Box>
<TextAreaComponent
ref={textAreaRef}
name="contentTextArea"
className={css.EditorTextArea}
onKeyDown={handleKeyDown}
defaultValue={defaultContent}
resize="None"
spellCheck="false"
required
readOnly={submitting}
/>
{jsonError && (
<Text size="T200" style={{ color: color.Critical.Main }}>
<b>
{jsonError.name}: {jsonError.message}
</b>
</Text>
)}
</Box>
</Box>
);
}
type AccountDataViewProps = {
type: string;
defaultContent: string;
onEdit: () => void;
};
function AccountDataView({ type, defaultContent, onEdit }: AccountDataViewProps) {
return (
<Box direction="Column" className={css.EditorContent} gap="400">
<Box shrink="No" gap="300" alignItems="End">
<Box grow="Yes" direction="Column" gap="100">
<Text size="L400">Account Data</Text>
<Input
variant="SurfaceVariant"
size="400"
radii="300"
readOnly
defaultValue={type}
required
/>
</Box>
<Button variant="Secondary" size="400" radii="300" onClick={onEdit}>
<Text size="B400">Edit</Text>
</Button>
</Box>
<Box grow="Yes" direction="Column" gap="100">
<Text size="L400">JSON Content</Text>
<SequenceCard variant="SurfaceVariant">
<Scroll visibility="Always" size="300" hideTrack>
<TextViewerContent
size="T300"
style={{
padding: `${config.space.S300} ${config.space.S100} ${config.space.S300} ${config.space.S300}`,
}}
text={defaultContent}
langName="JSON"
/>
</Scroll>
</SequenceCard>
</Box>
</Box>
);
}
export type AccountDataEditorProps = { export type AccountDataEditorProps = {
type?: string; type?: string;
content?: object;
requestClose: () => void; requestClose: () => void;
}; };
export const AccountDataEditor = as<'div', AccountDataEditorProps>( export function AccountDataEditor({ type, requestClose }: AccountDataEditorProps) {
({ type, content, requestClose, ...props }, ref) => { const mx = useMatrixClient();
const mx = useMatrixClient();
const defaultContent = useMemo(
() => JSON.stringify(content, null, EDITOR_INTENT_SPACE_COUNT),
[content]
);
const textAreaRef = useRef<HTMLTextAreaElement>(null);
const [jsonError, setJSONError] = useState<SyntaxError>();
const getTarget: GetTarget = useCallback(() => { const [data, setData] = useState<AccountDataInfo>({
const target = textAreaRef.current; type: type ?? '',
if (!target) throw new Error('TextArea element not found!'); content: mx.getAccountData(type ?? '')?.getContent() ?? {},
return target; });
}, []);
const { textArea, operations, intent } = useMemo(() => { const [edit, setEdit] = useState(!type);
const ta = new TextArea(getTarget);
const op = new TextAreaOperations(getTarget);
return {
textArea: ta,
operations: op,
intent: new Intent(EDITOR_INTENT_SPACE_COUNT, ta, op),
};
}, [getTarget]);
const intentHandler = useTextAreaIntentHandler(textArea, operations, intent); const closeEdit = useCallback(() => {
if (!type) {
requestClose();
return;
}
setEdit(false);
}, [type, requestClose]);
const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (evt) => { const handleSave = useCallback((info: AccountDataInfo) => {
intentHandler(evt); setData(info);
if (isKeyHotkey('escape', evt)) { setEdit(false);
const cursor = Cursor.fromTextAreaElement(getTarget()); }, []);
operations.deselect(cursor);
}
};
const [submitState, submit] = useAsyncCallback<object, MatrixError, [string, object]>( const contentJSONStr = useMemo(
useCallback((dataType, data) => mx.setAccountData(dataType, data), [mx]) () => JSON.stringify(data.content, null, EDITOR_INTENT_SPACE_COUNT),
); [data.content]
const submitting = submitState.status === AsyncStatus.Loading; );
const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => { return (
evt.preventDefault(); <Page>
if (submitting) return; <PageHeader outlined={false} balance>
<Box alignItems="Center" grow="Yes" gap="200">
const target = evt.target as HTMLFormElement | undefined; <Box alignItems="Inherit" grow="Yes" gap="200">
const typeInput = target?.typeInput as HTMLInputElement | undefined; <Chip
const contentTextArea = target?.contentTextArea as HTMLTextAreaElement | undefined; size="500"
if (!typeInput || !contentTextArea) return; radii="Pill"
onClick={requestClose}
const typeStr = typeInput.value.trim(); before={<Icon size="100" src={Icons.ArrowLeft} />}
const contentStr = contentTextArea.value.trim(); >
<Text size="T300">Developer Tools</Text>
let parsedContent: object; </Chip>
try {
parsedContent = JSON.parse(contentStr);
} catch (e) {
setJSONError(e as SyntaxError);
return;
}
setJSONError(undefined);
if (
!typeStr ||
parsedContent === null ||
defaultContent === JSON.stringify(parsedContent, null, EDITOR_INTENT_SPACE_COUNT)
) {
return;
}
submit(typeStr, parsedContent);
};
useEffect(() => {
if (jsonError) {
const errorPosition = syntaxErrorPosition(jsonError) ?? 0;
const cursor = new Cursor(errorPosition, errorPosition, 'none');
operations.select(cursor);
getTarget()?.focus();
}
}, [jsonError, operations, getTarget]);
useEffect(() => {
if (submitState.status === AsyncStatus.Success) {
requestClose();
}
}, [submitState, requestClose]);
return (
<Box grow="Yes" direction="Column" {...props} ref={ref}>
<Header className={css.EditorHeader} size="600">
<Box grow="Yes" gap="200">
<Box grow="Yes" alignItems="Center" gap="200">
<Text size="H3" truncate>
Account Data
</Text>
</Box>
<Box shrink="No">
<IconButton onClick={requestClose} variant="Surface">
<Icon src={Icons.Cross} />
</IconButton>
</Box>
</Box> </Box>
</Header> <Box shrink="No">
<Box <IconButton onClick={requestClose} variant="Surface">
as="form" <Icon src={Icons.Cross} />
onSubmit={handleSubmit} </IconButton>
grow="Yes"
className={css.EditorContent}
direction="Column"
gap="400"
aria-disabled={submitting}
>
<Box shrink="No" direction="Column" gap="100">
<Text size="L400">Type</Text>
<Box gap="300">
<Box grow="Yes" direction="Column">
<Input
name="typeInput"
size="400"
readOnly={!!type || submitting}
defaultValue={type}
required
/>
</Box>
<Button
variant="Primary"
size="400"
type="submit"
disabled={submitting}
before={submitting && <Spinner variant="Primary" fill="Solid" size="300" />}
>
<Text size="B400">Save</Text>
</Button>
</Box>
{submitState.status === AsyncStatus.Error && (
<Text size="T200" style={{ color: color.Critical.Main }}>
<b>{submitState.error.message}</b>
</Text>
)}
</Box>
<Box grow="Yes" direction="Column" gap="100">
<Box shrink="No">
<Text size="L400">JSON Content</Text>
</Box>
<TextAreaComponent
ref={textAreaRef}
name="contentTextArea"
className={css.EditorTextArea}
onKeyDown={handleKeyDown}
defaultValue={defaultContent}
resize="None"
spellCheck="false"
required
readOnly={submitting}
/>
{jsonError && (
<Text size="T200" style={{ color: color.Critical.Main }}>
<b>
{jsonError.name}: {jsonError.message}
</b>
</Text>
)}
</Box> </Box>
</Box> </Box>
</PageHeader>
<Box grow="Yes" direction="Column">
{edit ? (
<AccountDataEdit
type={data.type}
defaultContent={contentJSONStr}
onCancel={closeEdit}
onSave={handleSave}
/>
) : (
<AccountDataView
type={data.type}
defaultContent={contentJSONStr}
onEdit={() => setEdit(true)}
/>
)}
</Box> </Box>
); </Page>
} );
); }

232
src/app/features/settings/developer-tools/DevelopTools.tsx
View file

@ -1,26 +1,5 @@
import React, { MouseEventHandler, useCallback, useState } from 'react'; import React, { useState } from 'react';
import { import { Box, Text, IconButton, Icon, Icons, Scroll, Switch, Button } from 'folds';
Box,
Text,
IconButton,
Icon,
Icons,
Scroll,
Switch,
Overlay,
OverlayBackdrop,
OverlayCenter,
Modal,
Chip,
Button,
PopOut,
RectCords,
Menu,
config,
MenuItem,
} from 'folds';
import { MatrixEvent } from 'matrix-js-sdk';
import FocusTrap from 'focus-trap-react';
import { Page, PageContent, PageHeader } from '../../../components/page'; import { Page, PageContent, PageHeader } from '../../../components/page';
import { SequenceCard } from '../../../components/sequence-card'; import { SequenceCard } from '../../../components/sequence-card';
import { SequenceCardStyle } from '../styles.css'; import { SequenceCardStyle } from '../styles.css';
@ -28,195 +7,9 @@ import { SettingTile } from '../../../components/setting-tile';
import { useSetting } from '../../../state/hooks/settings'; import { useSetting } from '../../../state/hooks/settings';
import { settingsAtom } from '../../../state/settings'; import { settingsAtom } from '../../../state/settings';
import { useMatrixClient } from '../../../hooks/useMatrixClient'; import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { useAccountDataCallback } from '../../../hooks/useAccountDataCallback';
import { TextViewer } from '../../../components/text-viewer';
import { stopPropagation } from '../../../utils/keyboard';
import { AccountDataEditor } from './AccountDataEditor'; import { AccountDataEditor } from './AccountDataEditor';
import { copyToClipboard } from '../../../utils/dom'; import { copyToClipboard } from '../../../utils/dom';
import { AccountData } from './AccountData';
function AccountData() {
const mx = useMatrixClient();
const [view, setView] = useState(false);
const [accountData, setAccountData] = useState(() => Array.from(mx.store.accountData.values()));
const [selectedEvent, selectEvent] = useState<MatrixEvent>();
const [menuCords, setMenuCords] = useState<RectCords>();
const [selectedOption, selectOption] = useState<'edit' | 'inspect'>();
useAccountDataCallback(
mx,
useCallback(
() => setAccountData(Array.from(mx.store.accountData.values())),
[mx, setAccountData]
)
);
const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
const target = evt.currentTarget;
const eventType = target.getAttribute('data-event-type');
if (eventType) {
const mEvent = accountData.find((mEvt) => mEvt.getType() === eventType);
setMenuCords(evt.currentTarget.getBoundingClientRect());
selectEvent(mEvent);
}
};
const handleMenuClose = () => setMenuCords(undefined);
const handleEdit = () => {
selectOption('edit');
setMenuCords(undefined);
};
const handleInspect = () => {
selectOption('inspect');
setMenuCords(undefined);
};
const handleClose = useCallback(() => {
selectEvent(undefined);
selectOption(undefined);
}, []);
return (
<Box direction="Column" gap="100">
<Text size="L400">Account Data</Text>
<SequenceCard
className={SequenceCardStyle}
variant="SurfaceVariant"
direction="Column"
gap="400"
>
<SettingTile
title="Global"
description="Data stored in your global account data."
after={
<Button
onClick={() => setView(!view)}
variant="Secondary"
fill="Soft"
size="300"
radii="300"
outlined
before={
<Icon src={view ? Icons.ChevronTop : Icons.ChevronBottom} size="100" filled />
}
>
<Text size="B300">{view ? 'Collapse' : 'Expand'}</Text>
</Button>
}
/>
{view && (
<SettingTile>
<Box direction="Column" gap="200">
<Text size="L400">Types</Text>
<Box gap="200" wrap="Wrap">
<Chip
variant="Secondary"
fill="Soft"
radii="Pill"
onClick={handleEdit}
before={<Icon size="50" src={Icons.Plus} />}
>
<Text size="T200" truncate>
Add New
</Text>
</Chip>
{accountData.map((mEvent) => (
<Chip
key={mEvent.getType()}
variant="Secondary"
fill="Soft"
radii="Pill"
aria-pressed={menuCords && selectedEvent?.getType() === mEvent.getType()}
onClick={handleMenu}
data-event-type={mEvent.getType()}
>
<Text size="T200" truncate>
{mEvent.getType()}
</Text>
</Chip>
))}
</Box>
</Box>
</SettingTile>
)}
<PopOut
anchor={menuCords}
offset={5}
position="Bottom"
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: handleMenuClose,
clickOutsideDeactivates: true,
isKeyForward: (evt: KeyboardEvent) =>
evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
isKeyBackward: (evt: KeyboardEvent) =>
evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
escapeDeactivates: stopPropagation,
}}
>
<Menu>
<Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
<MenuItem size="300" variant="Surface" radii="300" onClick={handleInspect}>
<Text size="T300">Inspect</Text>
</MenuItem>
<MenuItem size="300" variant="Surface" radii="300" onClick={handleEdit}>
<Text size="T300">Edit</Text>
</MenuItem>
</Box>
</Menu>
</FocusTrap>
}
/>
</SequenceCard>
{selectedEvent && selectedOption === 'inspect' && (
<Overlay open backdrop={<OverlayBackdrop />}>
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: handleClose,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Modal variant="Surface" size="500">
<TextViewer
name={selectedEvent.getType() ?? 'Source Code'}
langName="json"
text={JSON.stringify(selectedEvent.getContent(), null, 2)}
requestClose={handleClose}
/>
</Modal>
</FocusTrap>
</OverlayCenter>
</Overlay>
)}
{selectedOption === 'edit' && (
<Overlay open backdrop={<OverlayBackdrop />}>
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: handleClose,
clickOutsideDeactivates: true,
escapeDeactivates: stopPropagation,
}}
>
<Modal variant="Surface" size="500">
<AccountDataEditor
type={selectedEvent?.getType()}
content={selectedEvent?.getContent()}
requestClose={handleClose}
/>
</Modal>
</FocusTrap>
</OverlayCenter>
</Overlay>
)}
</Box>
);
}
type DeveloperToolsProps = { type DeveloperToolsProps = {
requestClose: () => void; requestClose: () => void;
@ -224,6 +17,17 @@ type DeveloperToolsProps = {
export function DeveloperTools({ requestClose }: DeveloperToolsProps) { export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
const mx = useMatrixClient(); const mx = useMatrixClient();
const [developerTools, setDeveloperTools] = useSetting(settingsAtom, 'developerTools'); const [developerTools, setDeveloperTools] = useSetting(settingsAtom, 'developerTools');
const [expand, setExpend] = useState(false);
const [accountDataType, setAccountDataType] = useState<string | null>();
if (accountDataType !== undefined) {
return (
<AccountDataEditor
type={accountDataType ?? undefined}
requestClose={() => setAccountDataType(undefined)}
/>
);
}
return ( return (
<Page> <Page>
@ -292,7 +96,13 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
</SequenceCard> </SequenceCard>
)} )}
</Box> </Box>
{developerTools && <AccountData />} {developerTools && (
<AccountData
expand={expand}
onExpandToggle={setExpend}
onSelect={setAccountDataType}
/>
)}
</Box> </Box>
</PageContent> </PageContent>
</Scroll> </Scroll>

16
src/app/features/settings/general/General.tsx
View file

@ -344,6 +344,7 @@ function Appearance() {
function Editor() { function Editor() {
const [enterForNewline, setEnterForNewline] = useSetting(settingsAtom, 'enterForNewline'); const [enterForNewline, setEnterForNewline] = useSetting(settingsAtom, 'enterForNewline');
const [isMarkdown, setIsMarkdown] = useSetting(settingsAtom, 'isMarkdown'); const [isMarkdown, setIsMarkdown] = useSetting(settingsAtom, 'isMarkdown');
const [hideActivity, setHideActivity] = useSetting(settingsAtom, 'hideActivity');
return ( return (
<Box direction="Column" gap="100"> <Box direction="Column" gap="100">
@ -363,6 +364,13 @@ function Editor() {
after={<Switch variant="Primary" value={isMarkdown} onChange={setIsMarkdown} />} after={<Switch variant="Primary" value={isMarkdown} onChange={setIsMarkdown} />}
/> />
</SequenceCard> </SequenceCard>
<SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
<SettingTile
title="Hide Typing & Read Receipts"
description="Turn off both typing status and read receipts to keep your activity private."
after={<Switch variant="Primary" value={hideActivity} onChange={setHideActivity} />}
/>
</SequenceCard>
</Box> </Box>
); );
} }
@ -555,7 +563,13 @@ function Messages() {
<SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column"> <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
<SettingTile <SettingTile
title="Disable Media Auto Load" title="Disable Media Auto Load"
after={<Switch variant="Primary" value={!mediaAutoLoad} onChange={(v) => setMediaAutoLoad(!v)} />} after={
<Switch
variant="Primary"
value={!mediaAutoLoad}
onChange={(v) => setMediaAutoLoad(!v)}
/>
}
/> />
</SequenceCard> </SequenceCard>
<SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column"> <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">

16
src/app/features/settings/notifications/IgnoredUserList.tsx
View file

@ -1,17 +1,12 @@
import React, { ChangeEventHandler, FormEventHandler, useCallback, useMemo, useState } from 'react'; import React, { ChangeEventHandler, FormEventHandler, useCallback, useState } from 'react';
import { Box, Button, Chip, Icon, IconButton, Icons, Input, Spinner, Text, config } from 'folds'; import { Box, Button, Chip, Icon, IconButton, Icons, Input, Spinner, Text, config } from 'folds';
import { useAccountData } from '../../../hooks/useAccountData';
import { AccountDataEvent } from '../../../../types/matrix/accountData';
import { SequenceCard } from '../../../components/sequence-card'; import { SequenceCard } from '../../../components/sequence-card';
import { SequenceCardStyle } from '../styles.css'; import { SequenceCardStyle } from '../styles.css';
import { SettingTile } from '../../../components/setting-tile'; import { SettingTile } from '../../../components/setting-tile';
import { useMatrixClient } from '../../../hooks/useMatrixClient'; import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback'; import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
import { isUserId } from '../../../utils/matrix'; import { isUserId } from '../../../utils/matrix';
import { useIgnoredUsers } from '../../../hooks/useIgnoredUsers';
type IgnoredUserListContent = {
ignored_users?: Record<string, object>;
};
function IgnoreUserInput({ userList }: { userList: string[] }) { function IgnoreUserInput({ userList }: { userList: string[] }) {
const mx = useMatrixClient(); const mx = useMatrixClient();
@ -129,12 +124,7 @@ function IgnoredUserChip({ userId, userList }: { userId: string; userList: strin
} }
export function IgnoredUserList() { export function IgnoredUserList() {
const ignoredUserListEvt = useAccountData(AccountDataEvent.IgnoredUserList); const ignoredUsers = useIgnoredUsers();
const ignoredUsers = useMemo(() => {
const ignoredUsersRecord =
ignoredUserListEvt?.getContent<IgnoredUserListContent>().ignored_users ?? {};
return Object.keys(ignoredUsersRecord);
}, [ignoredUserListEvt]);
return ( return (
<Box direction="Column" gap="100"> <Box direction="Column" gap="100">

74
src/app/features/settings/notifications/Notifications.tsx
View file

@ -1,82 +1,12 @@
import React from 'react'; import React from 'react';
import { Box, Text, IconButton, Icon, Icons, Scroll, Switch, Button, color } from 'folds'; import { Box, Text, IconButton, Icon, Icons, Scroll } from 'folds';
import { Page, PageContent, PageHeader } from '../../../components/page'; import { Page, PageContent, PageHeader } from '../../../components/page';
import { SequenceCard } from '../../../components/sequence-card'; import { SystemNotification } from './SystemNotification';
import { SequenceCardStyle } from '../styles.css';
import { SettingTile } from '../../../components/setting-tile';
import { useSetting } from '../../../state/hooks/settings';
import { settingsAtom } from '../../../state/settings';
import { getNotificationState, usePermissionState } from '../../../hooks/usePermission';
import { AllMessagesNotifications } from './AllMessages'; import { AllMessagesNotifications } from './AllMessages';
import { SpecialMessagesNotifications } from './SpecialMessages'; import { SpecialMessagesNotifications } from './SpecialMessages';
import { KeywordMessagesNotifications } from './KeywordMessages'; import { KeywordMessagesNotifications } from './KeywordMessages';
import { IgnoredUserList } from './IgnoredUserList'; import { IgnoredUserList } from './IgnoredUserList';
function SystemNotification() {
const notifPermission = usePermissionState('notifications', getNotificationState());
const [showNotifications, setShowNotifications] = useSetting(settingsAtom, 'showNotifications');
const [isNotificationSounds, setIsNotificationSounds] = useSetting(
settingsAtom,
'isNotificationSounds'
);
const requestNotificationPermission = () => {
window.Notification.requestPermission();
};
return (
<Box direction="Column" gap="100">
<Text size="L400">System</Text>
<SequenceCard
className={SequenceCardStyle}
variant="SurfaceVariant"
direction="Column"
gap="400"
>
<SettingTile
title="Desktop Notifications"
description={
notifPermission === 'denied' ? (
<Text as="span" style={{ color: color.Critical.Main }} size="T200">
{'Notification' in window
? 'Notification permission is blocked. Please allow notification permission from browser address bar.'
: 'Notifications are not supported by the system.'}
</Text>
) : (
<span>Show desktop notifications when message arrive.</span>
)
}
after={
notifPermission === 'prompt' ? (
<Button size="300" radii="300" onClick={requestNotificationPermission}>
<Text size="B300">Enable</Text>
</Button>
) : (
<Switch
disabled={notifPermission !== 'granted'}
value={showNotifications}
onChange={setShowNotifications}
/>
)
}
/>
</SequenceCard>
<SequenceCard
className={SequenceCardStyle}
variant="SurfaceVariant"
direction="Column"
gap="400"
>
<SettingTile
title="Notification Sound"
description="Play sound when new message arrive."
after={<Switch value={isNotificationSounds} onChange={setIsNotificationSounds} />}
/>
</SequenceCard>
</Box>
);
}
type NotificationsProps = { type NotificationsProps = {
requestClose: () => void; requestClose: () => void;
}; };

158
src/app/features/settings/notifications/SystemNotification.tsx Normal file
View file

@ -0,0 +1,158 @@
import React, { useCallback } from 'react';
import { Box, Text, Switch, Button, color, Spinner } from 'folds';
import { IPusherRequest } from 'matrix-js-sdk';
import { SequenceCard } from '../../../components/sequence-card';
import { SequenceCardStyle } from '../styles.css';
import { SettingTile } from '../../../components/setting-tile';
import { useSetting } from '../../../state/hooks/settings';
import { settingsAtom } from '../../../state/settings';
import { getNotificationState, usePermissionState } from '../../../hooks/usePermission';
import { useEmailNotifications } from '../../../hooks/useEmailNotifications';
import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
function EmailNotification() {
const mx = useMatrixClient();
const [result, refreshResult] = useEmailNotifications();
const [setState, setEnable] = useAsyncCallback(
useCallback(
async (email: string, enable: boolean) => {
if (enable) {
await mx.setPusher({
kind: 'email',
app_id: 'm.email',
pushkey: email,
app_display_name: 'Email Notifications',
device_display_name: email,
lang: 'en',
data: {
brand: 'Cinny',
},
append: true,
});
return;
}
await mx.setPusher({
pushkey: email,
app_id: 'm.email',
kind: null,
} as unknown as IPusherRequest);
},
[mx]
)
);
const handleChange = (value: boolean) => {
if (result && result.email) {
setEnable(result.email, value).then(() => {
refreshResult();
});
}
};
return (
<SettingTile
title="Email Notification"
description={
<>
{result && !result.email && (
<Text as="span" style={{ color: color.Critical.Main }} size="T200">
Your account does not have any email attached.
</Text>
)}
{result && result.email && <>Send notification to your email. {`("${result.email}")`}</>}
{result === null && (
<Text as="span" style={{ color: color.Critical.Main }} size="T200">
Unexpected Error!
</Text>
)}
{result === undefined && 'Send notification to your email.'}
</>
}
after={
<>
{setState.status !== AsyncStatus.Loading &&
typeof result === 'object' &&
result?.email && <Switch value={result.enabled} onChange={handleChange} />}
{(setState.status === AsyncStatus.Loading || result === undefined) && (
<Spinner variant="Secondary" />
)}
</>
}
/>
);
}
export function SystemNotification() {
const notifPermission = usePermissionState('notifications', getNotificationState());
const [showNotifications, setShowNotifications] = useSetting(settingsAtom, 'showNotifications');
const [isNotificationSounds, setIsNotificationSounds] = useSetting(
settingsAtom,
'isNotificationSounds'
);
const requestNotificationPermission = () => {
window.Notification.requestPermission();
};
return (
<Box direction="Column" gap="100">
<Text size="L400">System</Text>
<SequenceCard
className={SequenceCardStyle}
variant="SurfaceVariant"
direction="Column"
gap="400"
>
<SettingTile
title="Desktop Notifications"
description={
notifPermission === 'denied' ? (
<Text as="span" style={{ color: color.Critical.Main }} size="T200">
{'Notification' in window
? 'Notification permission is blocked. Please allow notification permission from browser address bar.'
: 'Notifications are not supported by the system.'}
</Text>
) : (
<span>Show desktop notifications when message arrive.</span>
)
}
after={
notifPermission === 'prompt' ? (
<Button size="300" radii="300" onClick={requestNotificationPermission}>
<Text size="B300">Enable</Text>
</Button>
) : (
<Switch
disabled={notifPermission !== 'granted'}
value={showNotifications}
onChange={setShowNotifications}
/>
)
}
/>
</SequenceCard>
<SequenceCard
className={SequenceCardStyle}
variant="SurfaceVariant"
direction="Column"
gap="400"
>
<SettingTile
title="Notification Sound"
description="Play sound when new message arrive."
after={<Switch value={isNotificationSounds} onChange={setIsNotificationSounds} />}
/>
</SequenceCard>
<SequenceCard
className={SequenceCardStyle}
variant="SurfaceVariant"
direction="Column"
gap="400"
>
<EmailNotification />
</SequenceCard>
</Box>
);
}

5
src/app/hooks/useAsyncSearch.ts
View file

@ -10,6 +10,7 @@ import {
matchQuery, matchQuery,
ResultHandler, ResultHandler,
} from '../utils/AsyncSearch'; } from '../utils/AsyncSearch';
import { sanitizeForRegex } from '../utils/regex';
export type UseAsyncSearchOptions = AsyncSearchOption & { export type UseAsyncSearchOptions = AsyncSearchOption & {
matchOptions?: MatchQueryOption; matchOptions?: MatchQueryOption;
@ -55,8 +56,8 @@ export const orderSearchItems = <TSearchItem extends object | string | number>(
// we will consider "_" as word boundary char. // we will consider "_" as word boundary char.
// because in more use-cases it is used. (like: emojishortcode) // because in more use-cases it is used. (like: emojishortcode)
const boundaryRegex = new RegExp(`(\\b|_)${query}`); const boundaryRegex = new RegExp(`(\\b|_)${sanitizeForRegex(query)}`);
const perfectBoundaryRegex = new RegExp(`(\\b|_)${query}(\\b|_)`); const perfectBoundaryRegex = new RegExp(`(\\b|_)${sanitizeForRegex(query)}(\\b|_)`);
orderedItems.sort((i1, i2) => { orderedItems.sort((i1, i2) => {
const str1 = performMatch(getItemStr(i1, query), query, options); const str1 = performMatch(getItemStr(i1, query), query, options);

55
src/app/hooks/useEmailNotifications.ts Normal file
View file

@ -0,0 +1,55 @@
import { useCallback } from 'react';
import { AsyncStatus, useAsyncCallbackValue } from './useAsyncCallback';
import { useMatrixClient } from './useMatrixClient';
type RefreshHandler = () => void;
type EmailNotificationResult = {
enabled: boolean;
email?: string;
};
export const useEmailNotifications = (): [
EmailNotificationResult | undefined | null,
RefreshHandler
] => {
const mx = useMatrixClient();
const [emailState, refresh] = useAsyncCallbackValue<EmailNotificationResult, Error>(
useCallback(async () => {
const tpIDs = (await mx.getThreePids())?.threepids;
const emailAddresses = tpIDs.filter((id) => id.medium === 'email').map((id) => id.address);
if (emailAddresses.length === 0)
return {
enabled: false,
};
const pushers = (await mx.getPushers())?.pushers;
const emailPusher = pushers.find(
(pusher) => pusher.app_id === 'm.email' && emailAddresses.includes(pusher.pushkey)
);
if (emailPusher?.pushkey) {
return {
enabled: true,
email: emailPusher.pushkey,
};
}
return {
enabled: false,
email: emailAddresses[0],
};
}, [mx])
);
if (emailState.status === AsyncStatus.Success) {
return [emailState.data, refresh];
}
if (emailState.status === AsyncStatus.Error) {
return [null, refresh];
}
return [undefined, refresh];
};

18
src/app/hooks/useIgnoredUsers.ts Normal file
View file

@ -0,0 +1,18 @@
import { useMemo } from 'react';
import { useAccountData } from './useAccountData';
import { AccountDataEvent } from '../../types/matrix/accountData';
export type IgnoredUserListContent = {
ignored_users?: Record<string, object>;
};
export const useIgnoredUsers = (): string[] => {
const ignoredUserListEvt = useAccountData(AccountDataEvent.IgnoredUserList);
const ignoredUsers = useMemo(() => {
const ignoredUsersRecord =
ignoredUserListEvt?.getContent<IgnoredUserListContent>().ignored_users ?? {};
return Object.keys(ignoredUsersRecord);
}, [ignoredUserListEvt]);
return ignoredUsers;
};

162
src/app/hooks/useSpaceHierarchy.ts
View file

@ -1,6 +1,8 @@
import { atom, useAtom, useAtomValue } from 'jotai'; import { atom, useAtom, useAtomValue } from 'jotai';
import { useCallback, useEffect, useState } from 'react'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Room } from 'matrix-js-sdk'; import { MatrixError, Room } from 'matrix-js-sdk';
import { IHierarchyRoom } from 'matrix-js-sdk/lib/@types/spaces';
import { QueryFunction, useInfiniteQuery } from '@tanstack/react-query';
import { useMatrixClient } from './useMatrixClient'; import { useMatrixClient } from './useMatrixClient';
import { roomToParentsAtom } from '../state/room/roomToParents'; import { roomToParentsAtom } from '../state/room/roomToParents';
import { MSpaceChildContent, StateEvent } from '../../types/matrix/room'; import { MSpaceChildContent, StateEvent } from '../../types/matrix/room';
@ -8,22 +10,24 @@ import { getAllParents, getStateEvents, isValidChild } from '../utils/room';
import { isRoomId } from '../utils/matrix'; import { isRoomId } from '../utils/matrix';
import { SortFunc, byOrderKey, byTsOldToNew, factoryRoomIdByActivity } from '../utils/sort'; import { SortFunc, byOrderKey, byTsOldToNew, factoryRoomIdByActivity } from '../utils/sort';
import { useStateEventCallback } from './useStateEventCallback'; import { useStateEventCallback } from './useStateEventCallback';
import { ErrorCode } from '../cs-errorcode';
export type HierarchyItem = export type HierarchyItemSpace = {
| { roomId: string;
roomId: string; content: MSpaceChildContent;
content: MSpaceChildContent; ts: number;
ts: number; space: true;
space: true; parentId?: string;
parentId?: string; };
}
| { export type HierarchyItemRoom = {
roomId: string; roomId: string;
content: MSpaceChildContent; content: MSpaceChildContent;
ts: number; ts: number;
space?: false; parentId: string;
parentId: string; };
};
export type HierarchyItem = HierarchyItemSpace | HierarchyItemRoom;
type GetRoomCallback = (roomId: string) => Room | undefined; type GetRoomCallback = (roomId: string) => Room | undefined;
@ -35,16 +39,16 @@ const getHierarchySpaces = (
rootSpaceId: string, rootSpaceId: string,
getRoom: GetRoomCallback, getRoom: GetRoomCallback,
spaceRooms: Set<string> spaceRooms: Set<string>
): HierarchyItem[] => { ): HierarchyItemSpace[] => {
const rootSpaceItem: HierarchyItem = { const rootSpaceItem: HierarchyItemSpace = {
roomId: rootSpaceId, roomId: rootSpaceId,
content: { via: [] }, content: { via: [] },
ts: 0, ts: 0,
space: true, space: true,
}; };
let spaceItems: HierarchyItem[] = []; let spaceItems: HierarchyItemSpace[] = [];
const findAndCollectHierarchySpaces = (spaceItem: HierarchyItem) => { const findAndCollectHierarchySpaces = (spaceItem: HierarchyItemSpace) => {
if (spaceItems.find((item) => item.roomId === spaceItem.roomId)) return; if (spaceItems.find((item) => item.roomId === spaceItem.roomId)) return;
const space = getRoom(spaceItem.roomId); const space = getRoom(spaceItem.roomId);
spaceItems.push(spaceItem); spaceItems.push(spaceItem);
@ -61,7 +65,7 @@ const getHierarchySpaces = (
// or requesting room summary, we will look it into spaceRooms local // or requesting room summary, we will look it into spaceRooms local
// cache which we maintain as we load summary in UI. // cache which we maintain as we load summary in UI.
if (getRoom(childId)?.isSpaceRoom() || spaceRooms.has(childId)) { if (getRoom(childId)?.isSpaceRoom() || spaceRooms.has(childId)) {
const childItem: HierarchyItem = { const childItem: HierarchyItemSpace = {
roomId: childId, roomId: childId,
content: childEvent.getContent<MSpaceChildContent>(), content: childEvent.getContent<MSpaceChildContent>(),
ts: childEvent.getTs(), ts: childEvent.getTs(),
@ -85,28 +89,34 @@ const getHierarchySpaces = (
return spaceItems; return spaceItems;
}; };
export type SpaceHierarchy = {
space: HierarchyItemSpace;
rooms?: HierarchyItemRoom[];
};
const getSpaceHierarchy = ( const getSpaceHierarchy = (
rootSpaceId: string, rootSpaceId: string,
spaceRooms: Set<string>, spaceRooms: Set<string>,
getRoom: (roomId: string) => Room | undefined, getRoom: (roomId: string) => Room | undefined,
closedCategory: (spaceId: string) => boolean closedCategory: (spaceId: string) => boolean
): HierarchyItem[] => { ): SpaceHierarchy[] => {
const spaceItems: HierarchyItem[] = getHierarchySpaces(rootSpaceId, getRoom, spaceRooms); const spaceItems: HierarchyItemSpace[] = getHierarchySpaces(rootSpaceId, getRoom, spaceRooms);
const hierarchy: HierarchyItem[] = spaceItems.flatMap((spaceItem) => { const hierarchy: SpaceHierarchy[] = spaceItems.map((spaceItem) => {
const space = getRoom(spaceItem.roomId); const space = getRoom(spaceItem.roomId);
if (!space || closedCategory(spaceItem.roomId)) { if (!space || closedCategory(spaceItem.roomId)) {
return [spaceItem]; return {
space: spaceItem,
};
} }
const childEvents = getStateEvents(space, StateEvent.SpaceChild); const childEvents = getStateEvents(space, StateEvent.SpaceChild);
const childItems: HierarchyItem[] = []; const childItems: HierarchyItemRoom[] = [];
childEvents.forEach((childEvent) => { childEvents.forEach((childEvent) => {
if (!isValidChild(childEvent)) return; if (!isValidChild(childEvent)) return;
const childId = childEvent.getStateKey(); const childId = childEvent.getStateKey();
if (!childId || !isRoomId(childId)) return; if (!childId || !isRoomId(childId)) return;
if (getRoom(childId)?.isSpaceRoom() || spaceRooms.has(childId)) return; if (getRoom(childId)?.isSpaceRoom() || spaceRooms.has(childId)) return;
const childItem: HierarchyItem = { const childItem: HierarchyItemRoom = {
roomId: childId, roomId: childId,
content: childEvent.getContent<MSpaceChildContent>(), content: childEvent.getContent<MSpaceChildContent>(),
ts: childEvent.getTs(), ts: childEvent.getTs(),
@ -114,7 +124,11 @@ const getSpaceHierarchy = (
}; };
childItems.push(childItem); childItems.push(childItem);
}); });
return [spaceItem, ...childItems.sort(hierarchyItemTs).sort(hierarchyItemByOrder)];
return {
space: spaceItem,
rooms: childItems.sort(hierarchyItemTs).sort(hierarchyItemByOrder),
};
}); });
return hierarchy; return hierarchy;
@ -125,7 +139,7 @@ export const useSpaceHierarchy = (
spaceRooms: Set<string>, spaceRooms: Set<string>,
getRoom: (roomId: string) => Room | undefined, getRoom: (roomId: string) => Room | undefined,
closedCategory: (spaceId: string) => boolean closedCategory: (spaceId: string) => boolean
): HierarchyItem[] => { ): SpaceHierarchy[] => {
const mx = useMatrixClient(); const mx = useMatrixClient();
const roomToParents = useAtomValue(roomToParentsAtom); const roomToParents = useAtomValue(roomToParentsAtom);
@ -163,7 +177,7 @@ const getSpaceJoinedHierarchy = (
excludeRoom: (parentId: string, roomId: string) => boolean, excludeRoom: (parentId: string, roomId: string) => boolean,
sortRoomItems: (parentId: string, items: HierarchyItem[]) => HierarchyItem[] sortRoomItems: (parentId: string, items: HierarchyItem[]) => HierarchyItem[]
): HierarchyItem[] => { ): HierarchyItem[] => {
const spaceItems: HierarchyItem[] = getHierarchySpaces(rootSpaceId, getRoom, new Set()); const spaceItems: HierarchyItemSpace[] = getHierarchySpaces(rootSpaceId, getRoom, new Set());
const hierarchy: HierarchyItem[] = spaceItems.flatMap((spaceItem) => { const hierarchy: HierarchyItem[] = spaceItems.flatMap((spaceItem) => {
const space = getRoom(spaceItem.roomId); const space = getRoom(spaceItem.roomId);
@ -182,14 +196,14 @@ const getSpaceJoinedHierarchy = (
if (joinedRoomEvents.length === 0) return []; if (joinedRoomEvents.length === 0) return [];
const childItems: HierarchyItem[] = []; const childItems: HierarchyItemRoom[] = [];
joinedRoomEvents.forEach((childEvent) => { joinedRoomEvents.forEach((childEvent) => {
const childId = childEvent.getStateKey(); const childId = childEvent.getStateKey();
if (!childId) return; if (!childId) return;
if (excludeRoom(space.roomId, childId)) return; if (excludeRoom(space.roomId, childId)) return;
const childItem: HierarchyItem = { const childItem: HierarchyItemRoom = {
roomId: childId, roomId: childId,
content: childEvent.getContent<MSpaceChildContent>(), content: childEvent.getContent<MSpaceChildContent>(),
ts: childEvent.getTs(), ts: childEvent.getTs(),
@ -251,3 +265,85 @@ export const useSpaceJoinedHierarchy = (
return hierarchy; return hierarchy;
}; };
// we will paginate until 5000 items
const PER_PAGE_COUNT = 100;
const MAX_AUTO_PAGE_COUNT = 50;
export type FetchSpaceHierarchyLevelData = {
fetching: boolean;
error: Error | null;
rooms: Map<string, IHierarchyRoom>;
};
export const useFetchSpaceHierarchyLevel = (
roomId: string,
enable: boolean
): FetchSpaceHierarchyLevelData => {
const mx = useMatrixClient();
const pageNoRef = useRef(0);
const fetchLevel: QueryFunction<
Awaited<ReturnType<typeof mx.getRoomHierarchy>>,
string[],
string | undefined
> = useCallback(
({ pageParam }) => mx.getRoomHierarchy(roomId, PER_PAGE_COUNT, 1, false, pageParam),
[roomId, mx]
);
const queryResponse = useInfiniteQuery({
refetchOnMount: enable,
queryKey: [roomId, 'hierarchy_level'],
initialPageParam: undefined,
queryFn: fetchLevel,
getNextPageParam: (result) => {
if (result.next_batch) return result.next_batch;
return undefined;
},
retry: 5,
retryDelay: (failureCount, error) => {
if (error instanceof MatrixError && error.errcode === ErrorCode.M_LIMIT_EXCEEDED) {
const { retry_after_ms: delay } = error.data;
if (typeof delay === 'number') {
return delay;
}
}
return 500 * failureCount;
},
});
const { data, isLoading, isFetchingNextPage, error, fetchNextPage, hasNextPage } = queryResponse;
useEffect(() => {
if (
hasNextPage &&
pageNoRef.current <= MAX_AUTO_PAGE_COUNT &&
!error &&
data &&
data.pages.length > 0
) {
pageNoRef.current += 1;
fetchNextPage();
}
}, [fetchNextPage, hasNextPage, data, error]);
const rooms: Map<string, IHierarchyRoom> = useMemo(() => {
const roomsMap: Map<string, IHierarchyRoom> = new Map();
if (!data) return roomsMap;
const rms = data.pages.flatMap((result) => result.rooms);
rms.forEach((r) => {
roomsMap.set(r.room_id, r);
});
return roomsMap;
}, [data]);
const fetching = isLoading || isFetchingNextPage;
return {
fetching,
error,
rooms,
};
};

32
src/app/hooks/useVirtualPaginator.ts
View file

@ -26,8 +26,23 @@ export type ScrollToOptions = {
stopInView?: boolean; stopInView?: boolean;
}; };
export type ScrollToElement = (element: HTMLElement, opts?: ScrollToOptions) => void; /**
export type ScrollToItem = (index: number, opts?: ScrollToOptions) => void; * Scrolls the page to a specified element in the DOM.
*
* @param {HTMLElement} element - The DOM element to scroll to.
* @param {ScrollToOptions} [opts] - Optional configuration for the scroll behavior (e.g., smooth scrolling, alignment).
* @returns {boolean} - Returns `true` if the scroll was successful, otherwise returns `false`.
*/
export type ScrollToElement = (element: HTMLElement, opts?: ScrollToOptions) => boolean;
/**
* Scrolls the page to an item at the specified index within a scrollable container.
*
* @param {number} index - The index of the item to scroll to.
* @param {ScrollToOptions} [opts] - Optional configuration for the scroll behavior (e.g., smooth scrolling, alignment).
* @returns {boolean} - Returns `true` if the scroll was successful, otherwise returns `false`.
*/
export type ScrollToItem = (index: number, opts?: ScrollToOptions) => boolean;
type HandleObserveAnchor = (element: HTMLElement | null) => void; type HandleObserveAnchor = (element: HTMLElement | null) => void;
@ -186,10 +201,10 @@ export const useVirtualPaginator = <TScrollElement extends HTMLElement>(
const scrollToElement = useCallback<ScrollToElement>( const scrollToElement = useCallback<ScrollToElement>(
(element, opts) => { (element, opts) => {
const scrollElement = getScrollElement(); const scrollElement = getScrollElement();
if (!scrollElement) return; if (!scrollElement) return false;
if (opts?.stopInView && isInScrollView(scrollElement, element)) { if (opts?.stopInView && isInScrollView(scrollElement, element)) {
return; return false;
} }
let scrollTo = element.offsetTop; let scrollTo = element.offsetTop;
if (opts?.align === 'center' && canFitInScrollView(scrollElement, element)) { if (opts?.align === 'center' && canFitInScrollView(scrollElement, element)) {
@ -207,6 +222,7 @@ export const useVirtualPaginator = <TScrollElement extends HTMLElement>(
top: scrollTo - (opts?.offset ?? 0), top: scrollTo - (opts?.offset ?? 0),
behavior: opts?.behavior, behavior: opts?.behavior,
}); });
return true;
}, },
[getScrollElement] [getScrollElement]
); );
@ -215,7 +231,7 @@ export const useVirtualPaginator = <TScrollElement extends HTMLElement>(
(index, opts) => { (index, opts) => {
const { range: currentRange, limit: currentLimit, count: currentCount } = propRef.current; const { range: currentRange, limit: currentLimit, count: currentCount } = propRef.current;
if (index < 0 || index >= currentCount) return; if (index < 0 || index >= currentCount) return false;
// index is not in range change range // index is not in range change range
// and trigger scrollToItem in layoutEffect hook // and trigger scrollToItem in layoutEffect hook
if (index < currentRange.start || index >= currentRange.end) { if (index < currentRange.start || index >= currentRange.end) {
@ -227,7 +243,7 @@ export const useVirtualPaginator = <TScrollElement extends HTMLElement>(
index, index,
opts, opts,
}; };
return; return true;
} }
// find target or it's previous rendered element to scroll to // find target or it's previous rendered element to scroll to
@ -241,9 +257,9 @@ export const useVirtualPaginator = <TScrollElement extends HTMLElement>(
top: opts?.offset ?? 0, top: opts?.offset ?? 0,
behavior: opts?.behavior, behavior: opts?.behavior,
}); });
return; return true;
} }
scrollToElement(itemElement, opts); return scrollToElement(itemElement, opts);
}, },
[getScrollElement, scrollToElement, getItemElement, onRangeChange] [getScrollElement, scrollToElement, getItemElement, onRangeChange]
); );

2
src/app/pages/auth/AuthFooter.tsx
View file

@ -15,7 +15,7 @@ export function AuthFooter() {
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
> >
v4.3.2 v4.5.1
</Text> </Text>
<Text as="a" size="T300" href="https://twitter.com/cinnyapp" target="_blank" rel="noreferrer"> <Text as="a" size="T300" href="https://twitter.com/cinnyapp" target="_blank" rel="noreferrer">
Twitter Twitter

2
src/app/pages/client/WelcomePage.tsx
View file

@ -24,7 +24,7 @@ export function WelcomePage() {
target="_blank" target="_blank"
rel="noreferrer noopener" rel="noreferrer noopener"
> >
v4.3.2 v4.5.1
</a> </a>
</span> </span>
} }

5
src/app/pages/client/direct/Direct.tsx
View file

@ -45,18 +45,21 @@ import { useClosedNavCategoriesAtom } from '../../../state/hooks/closedNavCatego
import { useRoomsUnread } from '../../../state/hooks/unread'; import { useRoomsUnread } from '../../../state/hooks/unread';
import { markAsRead } from '../../../../client/action/notifications'; import { markAsRead } from '../../../../client/action/notifications';
import { stopPropagation } from '../../../utils/keyboard'; import { stopPropagation } from '../../../utils/keyboard';
import { useSetting } from '../../../state/hooks/settings';
import { settingsAtom } from '../../../state/settings';
type DirectMenuProps = { type DirectMenuProps = {
requestClose: () => void; requestClose: () => void;
}; };
const DirectMenu = forwardRef<HTMLDivElement, DirectMenuProps>(({ requestClose }, ref) => { const DirectMenu = forwardRef<HTMLDivElement, DirectMenuProps>(({ requestClose }, ref) => {
const mx = useMatrixClient(); const mx = useMatrixClient();
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
const orphanRooms = useDirectRooms(); const orphanRooms = useDirectRooms();
const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom); const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom);
const handleMarkAsRead = () => { const handleMarkAsRead = () => {
if (!unread) return; if (!unread) return;
orphanRooms.forEach((rId) => markAsRead(mx, rId)); orphanRooms.forEach((rId) => markAsRead(mx, rId, hideActivity));
requestClose(); requestClose();
}; };

5
src/app/pages/client/home/Home.tsx
View file

@ -48,18 +48,21 @@ import { useRoomsUnread } from '../../../state/hooks/unread';
import { markAsRead } from '../../../../client/action/notifications'; import { markAsRead } from '../../../../client/action/notifications';
import { useClosedNavCategoriesAtom } from '../../../state/hooks/closedNavCategories'; import { useClosedNavCategoriesAtom } from '../../../state/hooks/closedNavCategories';
import { stopPropagation } from '../../../utils/keyboard'; import { stopPropagation } from '../../../utils/keyboard';
import { useSetting } from '../../../state/hooks/settings';
import { settingsAtom } from '../../../state/settings';
type HomeMenuProps = { type HomeMenuProps = {
requestClose: () => void; requestClose: () => void;
}; };
const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, ref) => { const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, ref) => {
const orphanRooms = useHomeRooms(); const orphanRooms = useHomeRooms();
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom); const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom);
const mx = useMatrixClient(); const mx = useMatrixClient();
const handleMarkAsRead = () => { const handleMarkAsRead = () => {
if (!unread) return; if (!unread) return;
orphanRooms.forEach((rId) => markAsRead(mx, rId)); orphanRooms.forEach((rId) => markAsRead(mx, rId, hideActivity));
requestClose(); requestClose();
}; };

6
src/app/pages/client/inbox/Notifications.tsx
View file

@ -182,6 +182,7 @@ type RoomNotificationsGroupProps = {
notifications: INotification[]; notifications: INotification[];
mediaAutoLoad?: boolean; mediaAutoLoad?: boolean;
urlPreview?: boolean; urlPreview?: boolean;
hideActivity: boolean;
onOpen: (roomId: string, eventId: string) => void; onOpen: (roomId: string, eventId: string) => void;
}; };
function RoomNotificationsGroupComp({ function RoomNotificationsGroupComp({
@ -189,6 +190,7 @@ function RoomNotificationsGroupComp({
notifications, notifications,
mediaAutoLoad, mediaAutoLoad,
urlPreview, urlPreview,
hideActivity,
onOpen, onOpen,
}: RoomNotificationsGroupProps) { }: RoomNotificationsGroupProps) {
const mx = useMatrixClient(); const mx = useMatrixClient();
@ -362,7 +364,7 @@ function RoomNotificationsGroupComp({
onOpen(room.roomId, eventId); onOpen(room.roomId, eventId);
}; };
const handleMarkAsRead = () => { const handleMarkAsRead = () => {
markAsRead(mx, room.roomId); markAsRead(mx, room.roomId, hideActivity);
}; };
return ( return (
@ -496,6 +498,7 @@ const DEFAULT_REFRESH_MS = 7000;
export function Notifications() { export function Notifications() {
const mx = useMatrixClient(); const mx = useMatrixClient();
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad'); const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
const [urlPreview] = useSetting(settingsAtom, 'urlPreview'); const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
const screenSize = useScreenSizeContext(); const screenSize = useScreenSizeContext();
@ -656,6 +659,7 @@ export function Notifications() {
notifications={group.notifications} notifications={group.notifications}
mediaAutoLoad={mediaAutoLoad} mediaAutoLoad={mediaAutoLoad}
urlPreview={urlPreview} urlPreview={urlPreview}
hideActivity={hideActivity}
onOpen={navigateRoom} onOpen={navigateRoom}
/> />
</VirtualTile> </VirtualTile>

5
src/app/pages/client/sidebar/DirectTab.tsx
View file

@ -23,18 +23,21 @@ import { useNavToActivePathAtom } from '../../../state/hooks/navToActivePath';
import { useDirectRooms } from '../direct/useDirectRooms'; import { useDirectRooms } from '../direct/useDirectRooms';
import { markAsRead } from '../../../../client/action/notifications'; import { markAsRead } from '../../../../client/action/notifications';
import { stopPropagation } from '../../../utils/keyboard'; import { stopPropagation } from '../../../utils/keyboard';
import { settingsAtom } from '../../../state/settings';
import { useSetting } from '../../../state/hooks/settings';
type DirectMenuProps = { type DirectMenuProps = {
requestClose: () => void; requestClose: () => void;
}; };
const DirectMenu = forwardRef<HTMLDivElement, DirectMenuProps>(({ requestClose }, ref) => { const DirectMenu = forwardRef<HTMLDivElement, DirectMenuProps>(({ requestClose }, ref) => {
const orphanRooms = useDirectRooms(); const orphanRooms = useDirectRooms();
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom); const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom);
const mx = useMatrixClient(); const mx = useMatrixClient();
const handleMarkAsRead = () => { const handleMarkAsRead = () => {
if (!unread) return; if (!unread) return;
orphanRooms.forEach((rId) => markAsRead(mx, rId)); orphanRooms.forEach((rId) => markAsRead(mx, rId, hideActivity));
requestClose(); requestClose();
}; };

5
src/app/pages/client/sidebar/HomeTab.tsx
View file

@ -24,18 +24,21 @@ import { useNavToActivePathAtom } from '../../../state/hooks/navToActivePath';
import { useHomeRooms } from '../home/useHomeRooms'; import { useHomeRooms } from '../home/useHomeRooms';
import { markAsRead } from '../../../../client/action/notifications'; import { markAsRead } from '../../../../client/action/notifications';
import { stopPropagation } from '../../../utils/keyboard'; import { stopPropagation } from '../../../utils/keyboard';
import { useSetting } from '../../../state/hooks/settings';
import { settingsAtom } from '../../../state/settings';
type HomeMenuProps = { type HomeMenuProps = {
requestClose: () => void; requestClose: () => void;
}; };
const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, ref) => { const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, ref) => {
const orphanRooms = useHomeRooms(); const orphanRooms = useHomeRooms();
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom); const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom);
const mx = useMatrixClient(); const mx = useMatrixClient();
const handleMarkAsRead = () => { const handleMarkAsRead = () => {
if (!unread) return; if (!unread) return;
orphanRooms.forEach((rId) => markAsRead(mx, rId)); orphanRooms.forEach((rId) => markAsRead(mx, rId, hideActivity));
requestClose(); requestClose();
}; };

35
src/app/pages/client/sidebar/SpaceTabs.tsx
View file

@ -88,6 +88,8 @@ import { getMatrixToRoom } from '../../../plugins/matrix-to';
import { getViaServers } from '../../../plugins/via-servers'; import { getViaServers } from '../../../plugins/via-servers';
import { getRoomAvatarUrl } from '../../../utils/room'; import { getRoomAvatarUrl } from '../../../utils/room';
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication'; import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
import { useSetting } from '../../../state/hooks/settings';
import { settingsAtom } from '../../../state/settings';
type SpaceMenuProps = { type SpaceMenuProps = {
room: Room; room: Room;
@ -97,6 +99,7 @@ type SpaceMenuProps = {
const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>( const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
({ room, requestClose, onUnpin }, ref) => { ({ room, requestClose, onUnpin }, ref) => {
const mx = useMatrixClient(); const mx = useMatrixClient();
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
const roomToParents = useAtomValue(roomToParentsAtom); const roomToParents = useAtomValue(roomToParentsAtom);
const powerLevels = usePowerLevels(room); const powerLevels = usePowerLevels(room);
const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels); const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
@ -110,7 +113,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
const unread = useRoomsUnread(allChild, roomToUnreadAtom); const unread = useRoomsUnread(allChild, roomToUnreadAtom);
const handleMarkAsRead = () => { const handleMarkAsRead = () => {
allChild.forEach((childRoomId) => markAsRead(mx, childRoomId)); allChild.forEach((childRoomId) => markAsRead(mx, childRoomId, hideActivity));
requestClose(); requestClose();
}; };
@ -227,18 +230,18 @@ const useDraggableItem = (
return !target return !target
? undefined ? undefined
: draggable({ : draggable({
element: target, element: target,
dragHandle, dragHandle,
getInitialData: () => ({ item }), getInitialData: () => ({ item }),
onDragStart: () => { onDragStart: () => {
setDragging(true); setDragging(true);
onDragging?.(item); onDragging?.(item);
}, },
onDrop: () => { onDrop: () => {
setDragging(false); setDragging(false);
onDragging?.(undefined); onDragging?.(undefined);
}, },
}); });
}, [targetRef, dragHandleRef, item, onDragging]); }, [targetRef, dragHandleRef, item, onDragging]);
return dragging; return dragging;
@ -388,9 +391,9 @@ function SpaceTab({
() => () =>
folder folder
? { ? {
folder, folder,
spaceId: space.roomId, spaceId: space.roomId,
} }
: space.roomId, : space.roomId,
[folder, space] [folder, space]
); );

5
src/app/pages/client/space/Space.tsx
View file

@ -69,6 +69,8 @@ import { StateEvent } from '../../../../types/matrix/room';
import { stopPropagation } from '../../../utils/keyboard'; import { stopPropagation } from '../../../utils/keyboard';
import { getMatrixToRoom } from '../../../plugins/matrix-to'; import { getMatrixToRoom } from '../../../plugins/matrix-to';
import { getViaServers } from '../../../plugins/via-servers'; import { getViaServers } from '../../../plugins/via-servers';
import { useSetting } from '../../../state/hooks/settings';
import { settingsAtom } from '../../../state/settings';
type SpaceMenuProps = { type SpaceMenuProps = {
room: Room; room: Room;
@ -76,6 +78,7 @@ type SpaceMenuProps = {
}; };
const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClose }, ref) => { const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClose }, ref) => {
const mx = useMatrixClient(); const mx = useMatrixClient();
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
const roomToParents = useAtomValue(roomToParentsAtom); const roomToParents = useAtomValue(roomToParentsAtom);
const powerLevels = usePowerLevels(room); const powerLevels = usePowerLevels(room);
const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels); const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
@ -89,7 +92,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
const unread = useRoomsUnread(allChild, roomToUnreadAtom); const unread = useRoomsUnread(allChild, roomToUnreadAtom);
const handleMarkAsRead = () => { const handleMarkAsRead = () => {
allChild.forEach((childRoomId) => markAsRead(mx, childRoomId)); allChild.forEach((childRoomId) => markAsRead(mx, childRoomId, hideActivity));
requestClose(); requestClose();
}; };

368
src/app/plugins/markdown.ts
View file

@ -1,368 +0,0 @@
export type MatchResult = RegExpMatchArray | RegExpExecArray;
export type RuleMatch = (text: string) => MatchResult | null;
export const beforeMatch = (text: string, match: RegExpMatchArray | RegExpExecArray): string =>
text.slice(0, match.index);
export const afterMatch = (text: string, match: RegExpMatchArray | RegExpExecArray): string =>
text.slice((match.index ?? 0) + match[0].length);
export const replaceMatch = <C>(
convertPart: (txt: string) => Array<string | C>,
text: string,
match: MatchResult,
content: C
): Array<string | C> => [
...convertPart(beforeMatch(text, match)),
content,
...convertPart(afterMatch(text, match)),
];
/*
*****************
* INLINE PARSER *
*****************
*/
export type InlineMDParser = (text: string) => string;
export type InlineMatchConverter = (parse: InlineMDParser, match: MatchResult) => string;
export type InlineMDRule = {
match: RuleMatch;
html: InlineMatchConverter;
};
export type InlineRuleRunner = (
parse: InlineMDParser,
text: string,
rule: InlineMDRule
) => string | undefined;
export type InlineRulesRunner = (
parse: InlineMDParser,
text: string,
rules: InlineMDRule[]
) => string | undefined;
const MIN_ANY = '(.+?)';
const URL_NEG_LB = '(?<!(https?|ftp|mailto|magnet):\\/\\/\\S*)';
const BOLD_MD_1 = '**';
const BOLD_PREFIX_1 = '\\*{2}';
const BOLD_NEG_LA_1 = '(?!\\*)';
const BOLD_REG_1 = new RegExp(
`${URL_NEG_LB}${BOLD_PREFIX_1}${MIN_ANY}${BOLD_PREFIX_1}${BOLD_NEG_LA_1}`
);
const BoldRule: InlineMDRule = {
match: (text) => text.match(BOLD_REG_1),
html: (parse, match) => {
const [, , g2] = match;
return `<strong data-md="${BOLD_MD_1}">${parse(g2)}</strong>`;
},
};
const ITALIC_MD_1 = '*';
const ITALIC_PREFIX_1 = '\\*';
const ITALIC_NEG_LA_1 = '(?!\\*)';
const ITALIC_REG_1 = new RegExp(
`${URL_NEG_LB}${ITALIC_PREFIX_1}${MIN_ANY}${ITALIC_PREFIX_1}${ITALIC_NEG_LA_1}`
);
const ItalicRule1: InlineMDRule = {
match: (text) => text.match(ITALIC_REG_1),
html: (parse, match) => {
const [, , g2] = match;
return `<i data-md="${ITALIC_MD_1}">${parse(g2)}</i>`;
},
};
const ITALIC_MD_2 = '_';
const ITALIC_PREFIX_2 = '_';
const ITALIC_NEG_LA_2 = '(?!_)';
const ITALIC_REG_2 = new RegExp(
`${URL_NEG_LB}${ITALIC_PREFIX_2}${MIN_ANY}${ITALIC_PREFIX_2}${ITALIC_NEG_LA_2}`
);
const ItalicRule2: InlineMDRule = {
match: (text) => text.match(ITALIC_REG_2),
html: (parse, match) => {
const [, , g2] = match;
return `<i data-md="${ITALIC_MD_2}">${parse(g2)}</i>`;
},
};
const UNDERLINE_MD_1 = '__';
const UNDERLINE_PREFIX_1 = '_{2}';
const UNDERLINE_NEG_LA_1 = '(?!_)';
const UNDERLINE_REG_1 = new RegExp(
`${URL_NEG_LB}${UNDERLINE_PREFIX_1}${MIN_ANY}${UNDERLINE_PREFIX_1}${UNDERLINE_NEG_LA_1}`
);
const UnderlineRule: InlineMDRule = {
match: (text) => text.match(UNDERLINE_REG_1),
html: (parse, match) => {
const [, , g2] = match;
return `<u data-md="${UNDERLINE_MD_1}">${parse(g2)}</u>`;
},
};
const STRIKE_MD_1 = '~~';
const STRIKE_PREFIX_1 = '~{2}';
const STRIKE_NEG_LA_1 = '(?!~)';
const STRIKE_REG_1 = new RegExp(
`${URL_NEG_LB}${STRIKE_PREFIX_1}${MIN_ANY}${STRIKE_PREFIX_1}${STRIKE_NEG_LA_1}`
);
const StrikeRule: InlineMDRule = {
match: (text) => text.match(STRIKE_REG_1),
html: (parse, match) => {
const [, , g2] = match;
return `<del data-md="${STRIKE_MD_1}">${parse(g2)}</del>`;
},
};
const CODE_MD_1 = '`';
const CODE_PREFIX_1 = '`';
const CODE_NEG_LA_1 = '(?!`)';
const CODE_REG_1 = new RegExp(`${URL_NEG_LB}${CODE_PREFIX_1}(.+?)${CODE_PREFIX_1}${CODE_NEG_LA_1}`);
const CodeRule: InlineMDRule = {
match: (text) => text.match(CODE_REG_1),
html: (parse, match) => {
const [, , g2] = match;
return `<code data-md="${CODE_MD_1}">${g2}</code>`;
},
};
const SPOILER_MD_1 = '||';
const SPOILER_PREFIX_1 = '\\|{2}';
const SPOILER_NEG_LA_1 = '(?!\\|)';
const SPOILER_REG_1 = new RegExp(
`${URL_NEG_LB}${SPOILER_PREFIX_1}${MIN_ANY}${SPOILER_PREFIX_1}${SPOILER_NEG_LA_1}`
);
const SpoilerRule: InlineMDRule = {
match: (text) => text.match(SPOILER_REG_1),
html: (parse, match) => {
const [, , g2] = match;
return `<span data-md="${SPOILER_MD_1}" data-mx-spoiler>${parse(g2)}</span>`;
},
};
const LINK_ALT = `\\[${MIN_ANY}\\]`;
const LINK_URL = `\\((https?:\\/\\/.+?)\\)`;
const LINK_REG_1 = new RegExp(`${LINK_ALT}${LINK_URL}`);
const LinkRule: InlineMDRule = {
match: (text) => text.match(LINK_REG_1),
html: (parse, match) => {
const [, g1, g2] = match;
return `<a data-md href="${g2}">${parse(g1)}</a>`;
},
};
const runInlineRule: InlineRuleRunner = (parse, text, rule) => {
const matchResult = rule.match(text);
if (matchResult) {
const content = rule.html(parse, matchResult);
return replaceMatch((txt) => [parse(txt)], text, matchResult, content).join('');
}
return undefined;
};
/**
* Runs multiple rules at the same time to better handle nested rules.
* Rules will be run in the order they appear.
*/
const runInlineRules: InlineRulesRunner = (parse, text, rules) => {
const matchResults = rules.map((rule) => rule.match(text));
let targetRule: InlineMDRule | undefined;
let targetResult: MatchResult | undefined;
for (let i = 0; i < matchResults.length; i += 1) {
const currentResult = matchResults[i];
if (currentResult && typeof currentResult.index === 'number') {
if (
!targetResult ||
(typeof targetResult?.index === 'number' && currentResult.index < targetResult.index)
) {
targetResult = currentResult;
targetRule = rules[i];
}
}
}
if (targetRule && targetResult) {
const content = targetRule.html(parse, targetResult);
return replaceMatch((txt) => [parse(txt)], text, targetResult, content).join('');
}
return undefined;
};
const LeveledRules = [
BoldRule,
ItalicRule1,
UnderlineRule,
ItalicRule2,
StrikeRule,
SpoilerRule,
LinkRule,
];
export const parseInlineMD: InlineMDParser = (text) => {
if (text === '') return text;
let result: string | undefined;
if (!result) result = runInlineRule(parseInlineMD, text, CodeRule);
if (!result) result = runInlineRules(parseInlineMD, text, LeveledRules);
return result ?? text;
};
/*
****************
* BLOCK PARSER *
****************
*/
export type BlockMDParser = (test: string, parseInline?: (txt: string) => string) => string;
export type BlockMatchConverter = (
match: MatchResult,
parseInline?: (txt: string) => string
) => string;
export type BlockMDRule = {
match: RuleMatch;
html: BlockMatchConverter;
};
export type BlockRuleRunner = (
parse: BlockMDParser,
text: string,
rule: BlockMDRule,
parseInline?: (txt: string) => string
) => string | undefined;
const HEADING_REG_1 = /^(#{1,6}) +(.+)\n?/m;
const HeadingRule: BlockMDRule = {
match: (text) => text.match(HEADING_REG_1),
html: (match, parseInline) => {
const [, g1, g2] = match;
const level = g1.length;
return `<h${level} data-md="${g1}">${parseInline ? parseInline(g2) : g2}</h${level}>`;
},
};
const CODEBLOCK_MD_1 = '```';
const CODEBLOCK_REG_1 = /^`{3}(\S*)\n((?:.*\n)+?)`{3} *(?!.)\n?/m;
const CodeBlockRule: BlockMDRule = {
match: (text) => text.match(CODEBLOCK_REG_1),
html: (match) => {
const [, g1, g2] = match;
const classNameAtt = g1 ? ` class="language-${g1}"` : '';
return `<pre data-md="${CODEBLOCK_MD_1}"><code${classNameAtt}>${g2}</code></pre>`;
},
};
const BLOCKQUOTE_MD_1 = '>';
const QUOTE_LINE_PREFIX = /^> */;
const BLOCKQUOTE_TRAILING_NEWLINE = /\n$/;
const BLOCKQUOTE_REG_1 = /(^>.*\n?)+/m;
const BlockQuoteRule: BlockMDRule = {
match: (text) => text.match(BLOCKQUOTE_REG_1),
html: (match, parseInline) => {
const [blockquoteText] = match;
const lines = blockquoteText
.replace(BLOCKQUOTE_TRAILING_NEWLINE, '')
.split('\n')
.map((lineText) => {
const line = lineText.replace(QUOTE_LINE_PREFIX, '');
if (parseInline) return `${parseInline(line)}<br/>`;
return `${line}<br/>`;
})
.join('');
return `<blockquote data-md="${BLOCKQUOTE_MD_1}">${lines}</blockquote>`;
},
};
const ORDERED_LIST_MD_1 = '-';
const O_LIST_ITEM_PREFIX = /^(-|[\da-zA-Z]\.) */;
const O_LIST_START = /^([\d])\./;
const O_LIST_TYPE = /^([aAiI])\./;
const O_LIST_TRAILING_NEWLINE = /\n$/;
const ORDERED_LIST_REG_1 = /(^(?:-|[\da-zA-Z]\.) +.+\n?)+/m;
const OrderedListRule: BlockMDRule = {
match: (text) => text.match(ORDERED_LIST_REG_1),
html: (match, parseInline) => {
const [listText] = match;
const [, listStart] = listText.match(O_LIST_START) ?? [];
const [, listType] = listText.match(O_LIST_TYPE) ?? [];
const lines = listText
.replace(O_LIST_TRAILING_NEWLINE, '')
.split('\n')
.map((lineText) => {
const line = lineText.replace(O_LIST_ITEM_PREFIX, '');
const txt = parseInline ? parseInline(line) : line;
return `<li><p>${txt}</p></li>`;
})
.join('');
const dataMdAtt = `data-md="${listType || listStart || ORDERED_LIST_MD_1}"`;
const startAtt = listStart ? ` start="${listStart}"` : '';
const typeAtt = listType ? ` type="${listType}"` : '';
return `<ol ${dataMdAtt}${startAtt}${typeAtt}>${lines}</ol>`;
},
};
const UNORDERED_LIST_MD_1 = '*';
const U_LIST_ITEM_PREFIX = /^\* */;
const U_LIST_TRAILING_NEWLINE = /\n$/;
const UNORDERED_LIST_REG_1 = /(^\* +.+\n?)+/m;
const UnorderedListRule: BlockMDRule = {
match: (text) => text.match(UNORDERED_LIST_REG_1),
html: (match, parseInline) => {
const [listText] = match;
const lines = listText
.replace(U_LIST_TRAILING_NEWLINE, '')
.split('\n')
.map((lineText) => {
const line = lineText.replace(U_LIST_ITEM_PREFIX, '');
const txt = parseInline ? parseInline(line) : line;
return `<li><p>${txt}</p></li>`;
})
.join('');
return `<ul data-md="${UNORDERED_LIST_MD_1}">${lines}</ul>`;
},
};
const runBlockRule: BlockRuleRunner = (parse, text, rule, parseInline) => {
const matchResult = rule.match(text);
if (matchResult) {
const content = rule.html(matchResult, parseInline);
return replaceMatch((txt) => [parse(txt, parseInline)], text, matchResult, content).join('');
}
return undefined;
};
export const parseBlockMD: BlockMDParser = (text, parseInline) => {
if (text === '') return text;
let result: string | undefined;
if (!result) result = runBlockRule(parseBlockMD, text, CodeBlockRule, parseInline);
if (!result) result = runBlockRule(parseBlockMD, text, BlockQuoteRule, parseInline);
if (!result) result = runBlockRule(parseBlockMD, text, OrderedListRule, parseInline);
if (!result) result = runBlockRule(parseBlockMD, text, UnorderedListRule, parseInline);
if (!result) result = runBlockRule(parseBlockMD, text, HeadingRule, parseInline);
// replace \n with <br/> because want to preserve empty lines
if (!result) {
if (parseInline) {
result = text
.split('\n')
.map((lineText) => parseInline(lineText))
.join('<br/>');
} else {
result = text.replace(/\n/g, '<br/>');
}
}
return result ?? text;
};

1
src/app/plugins/markdown/block/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './parser';

47
src/app/plugins/markdown/block/parser.ts Normal file
View file

@ -0,0 +1,47 @@
import { replaceMatch } from '../internal';
import {
BlockQuoteRule,
CodeBlockRule,
ESC_BLOCK_SEQ,
HeadingRule,
OrderedListRule,
UnorderedListRule,
} from './rules';
import { runBlockRule } from './runner';
import { BlockMDParser } from './type';
/**
* Parses block-level markdown text into HTML using defined block rules.
*
* @param text - The markdown text to be parsed.
* @param parseInline - Optional function to parse inline elements.
* @returns The parsed HTML or the original text if no block-level markdown was found.
*/
export const parseBlockMD: BlockMDParser = (text, parseInline) => {
if (text === '') return text;
let result: string | undefined;
if (!result) result = runBlockRule(text, CodeBlockRule, parseBlockMD, parseInline);
if (!result) result = runBlockRule(text, BlockQuoteRule, parseBlockMD, parseInline);
if (!result) result = runBlockRule(text, OrderedListRule, parseBlockMD, parseInline);
if (!result) result = runBlockRule(text, UnorderedListRule, parseBlockMD, parseInline);
if (!result) result = runBlockRule(text, HeadingRule, parseBlockMD, parseInline);
// replace \n with <br/> because want to preserve empty lines
if (!result) {
result = text
.split('\n')
.map((lineText) => {
const match = lineText.match(ESC_BLOCK_SEQ);
if (!match) {
return parseInline?.(lineText) ?? lineText;
}
const [, g1] = match;
return replaceMatch(lineText, match, g1, (t) => [parseInline?.(t) ?? t]).join('');
})
.join('<br/>');
}
return result ?? text;
};

100
src/app/plugins/markdown/block/rules.ts Normal file
View file

@ -0,0 +1,100 @@
import { BlockMDRule } from './type';
const HEADING_REG_1 = /^(#{1,6}) +(.+)\n?/m;
export const HeadingRule: BlockMDRule = {
match: (text) => text.match(HEADING_REG_1),
html: (match, parseInline) => {
const [, g1, g2] = match;
const level = g1.length;
return `<h${level} data-md="${g1}">${parseInline ? parseInline(g2) : g2}</h${level}>`;
},
};
const CODEBLOCK_MD_1 = '```';
const CODEBLOCK_REG_1 = /^`{3}(\S*)\n((?:.*\n)+?)`{3} *(?!.)\n?/m;
export const CodeBlockRule: BlockMDRule = {
match: (text) => text.match(CODEBLOCK_REG_1),
html: (match) => {
const [, g1, g2] = match;
const classNameAtt = g1 ? ` class="language-${g1}"` : '';
return `<pre data-md="${CODEBLOCK_MD_1}"><code${classNameAtt}>${g2}</code></pre>`;
},
};
const BLOCKQUOTE_MD_1 = '>';
const QUOTE_LINE_PREFIX = /^> */;
const BLOCKQUOTE_TRAILING_NEWLINE = /\n$/;
const BLOCKQUOTE_REG_1 = /(^>.*\n?)+/m;
export const BlockQuoteRule: BlockMDRule = {
match: (text) => text.match(BLOCKQUOTE_REG_1),
html: (match, parseInline) => {
const [blockquoteText] = match;
const lines = blockquoteText
.replace(BLOCKQUOTE_TRAILING_NEWLINE, '')
.split('\n')
.map((lineText) => {
const line = lineText.replace(QUOTE_LINE_PREFIX, '');
if (parseInline) return `${parseInline(line)}<br/>`;
return `${line}<br/>`;
})
.join('');
return `<blockquote data-md="${BLOCKQUOTE_MD_1}">${lines}</blockquote>`;
},
};
const ORDERED_LIST_MD_1 = '-';
const O_LIST_ITEM_PREFIX = /^(-|[\da-zA-Z]\.) */;
const O_LIST_START = /^([\d])\./;
const O_LIST_TYPE = /^([aAiI])\./;
const O_LIST_TRAILING_NEWLINE = /\n$/;
const ORDERED_LIST_REG_1 = /(^(?:-|[\da-zA-Z]\.) +.+\n?)+/m;
export const OrderedListRule: BlockMDRule = {
match: (text) => text.match(ORDERED_LIST_REG_1),
html: (match, parseInline) => {
const [listText] = match;
const [, listStart] = listText.match(O_LIST_START) ?? [];
const [, listType] = listText.match(O_LIST_TYPE) ?? [];
const lines = listText
.replace(O_LIST_TRAILING_NEWLINE, '')
.split('\n')
.map((lineText) => {
const line = lineText.replace(O_LIST_ITEM_PREFIX, '');
const txt = parseInline ? parseInline(line) : line;
return `<li><p>${txt}</p></li>`;
})
.join('');
const dataMdAtt = `data-md="${listType || listStart || ORDERED_LIST_MD_1}"`;
const startAtt = listStart ? ` start="${listStart}"` : '';
const typeAtt = listType ? ` type="${listType}"` : '';
return `<ol ${dataMdAtt}${startAtt}${typeAtt}>${lines}</ol>`;
},
};
const UNORDERED_LIST_MD_1 = '*';
const U_LIST_ITEM_PREFIX = /^\* */;
const U_LIST_TRAILING_NEWLINE = /\n$/;
const UNORDERED_LIST_REG_1 = /(^\* +.+\n?)+/m;
export const UnorderedListRule: BlockMDRule = {
match: (text) => text.match(UNORDERED_LIST_REG_1),
html: (match, parseInline) => {
const [listText] = match;
const lines = listText
.replace(U_LIST_TRAILING_NEWLINE, '')
.split('\n')
.map((lineText) => {
const line = lineText.replace(U_LIST_ITEM_PREFIX, '');
const txt = parseInline ? parseInline(line) : line;
return `<li><p>${txt}</p></li>`;
})
.join('');
return `<ul data-md="${UNORDERED_LIST_MD_1}">${lines}</ul>`;
},
};
export const UN_ESC_BLOCK_SEQ = /^\\*(#{1,6} +|```|>|(-|[\da-zA-Z]\.) +|\* +)/;
export const ESC_BLOCK_SEQ = /^\\(\\*(#{1,6} +|```|>|(-|[\da-zA-Z]\.) +|\* +))/;

25
src/app/plugins/markdown/block/runner.ts Normal file
View file

@ -0,0 +1,25 @@
import { replaceMatch } from '../internal';
import { BlockMDParser, BlockMDRule } from './type';
/**
* Parses block-level markdown text into HTML using defined block rules.
*
* @param text - The text to parse.
* @param rule - The markdown rule to run.
* @param parse - A function that run the parser on remaining parts..
* @param parseInline - Optional function to parse inline elements.
* @returns The text with the markdown rule applied or `undefined` if no match is found.
*/
export const runBlockRule = (
text: string,
rule: BlockMDRule,
parse: BlockMDParser,
parseInline?: (txt: string) => string
): string | undefined => {
const matchResult = rule.match(text);
if (matchResult) {
const content = rule.html(matchResult, parseInline);
return replaceMatch(text, matchResult, content, (txt) => [parse(txt, parseInline)]).join('');
}
return undefined;
};

30
src/app/plugins/markdown/block/type.ts Normal file
View file

@ -0,0 +1,30 @@
import { MatchResult, MatchRule } from '../internal';
/**
* Type for a function that parses block-level markdown into HTML.
*
* @param text - The markdown text to be parsed.
* @param parseInline - Optional function to parse inline elements.
* @returns The parsed HTML.
*/
export type BlockMDParser = (text: string, parseInline?: (txt: string) => string) => string;
/**
* Type for a function that converts a block match to output.
*
* @param match - The match result.
* @param parseInline - Optional function to parse inline elements.
* @returns The output string after processing the match.
*/
export type BlockMatchConverter = (
match: MatchResult,
parseInline?: (txt: string) => string
) => string;
/**
* Type representing a block-level markdown rule that includes a matching pattern and HTML conversion.
*/
export type BlockMDRule = {
match: MatchRule; // A function that matches a specific markdown pattern.
html: BlockMatchConverter; // A function that converts the match to HTML.
};

3
src/app/plugins/markdown/index.ts Normal file
View file

@ -0,0 +1,3 @@
export * from './utils';
export * from './block';
export * from './inline';

1
src/app/plugins/markdown/inline/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './parser';

40
src/app/plugins/markdown/inline/parser.ts Normal file
View file

@ -0,0 +1,40 @@
import {
BoldRule,
CodeRule,
EscapeRule,
ItalicRule1,
ItalicRule2,
LinkRule,
SpoilerRule,
StrikeRule,
UnderlineRule,
} from './rules';
import { runInlineRule, runInlineRules } from './runner';
import { InlineMDParser } from './type';
const LeveledRules = [
BoldRule,
ItalicRule1,
UnderlineRule,
ItalicRule2,
StrikeRule,
SpoilerRule,
LinkRule,
EscapeRule,
];
/**
* Parses inline markdown text into HTML using defined rules.
*
* @param text - The markdown text to be parsed.
* @returns The parsed HTML or the original text if no markdown was found.
*/
export const parseInlineMD: InlineMDParser = (text) => {
if (text === '') return text;
let result: string | undefined;
if (!result) result = runInlineRule(text, CodeRule, parseInlineMD);
if (!result) result = runInlineRules(text, LeveledRules, parseInlineMD);
return result ?? text;
};

124
src/app/plugins/markdown/inline/rules.ts Normal file
View file

@ -0,0 +1,124 @@
import { InlineMDRule } from './type';
const MIN_ANY = '(.+?)';
const URL_NEG_LB = '(?<!(https?|ftp|mailto|magnet):\\/\\/\\S*)';
const ESC_NEG_LB = '(?<!\\\\)';
const BOLD_MD_1 = '**';
const BOLD_PREFIX_1 = `${ESC_NEG_LB}\\*{2}`;
const BOLD_NEG_LA_1 = '(?!\\*)';
const BOLD_REG_1 = new RegExp(
`${URL_NEG_LB}${BOLD_PREFIX_1}${MIN_ANY}${BOLD_PREFIX_1}${BOLD_NEG_LA_1}`
);
export const BoldRule: InlineMDRule = {
match: (text) => text.match(BOLD_REG_1),
html: (parse, match) => {
const [, , g2] = match;
return `<strong data-md="${BOLD_MD_1}">${parse(g2)}</strong>`;
},
};
const ITALIC_MD_1 = '*';
const ITALIC_PREFIX_1 = `${ESC_NEG_LB}\\*`;
const ITALIC_NEG_LA_1 = '(?!\\*)';
const ITALIC_REG_1 = new RegExp(
`${URL_NEG_LB}${ITALIC_PREFIX_1}${MIN_ANY}${ITALIC_PREFIX_1}${ITALIC_NEG_LA_1}`
);
export const ItalicRule1: InlineMDRule = {
match: (text) => text.match(ITALIC_REG_1),
html: (parse, match) => {
const [, , g2] = match;
return `<i data-md="${ITALIC_MD_1}">${parse(g2)}</i>`;
},
};
const ITALIC_MD_2 = '_';
const ITALIC_PREFIX_2 = `${ESC_NEG_LB}_`;
const ITALIC_NEG_LA_2 = '(?!_)';
const ITALIC_REG_2 = new RegExp(
`${URL_NEG_LB}${ITALIC_PREFIX_2}${MIN_ANY}${ITALIC_PREFIX_2}${ITALIC_NEG_LA_2}`
);
export const ItalicRule2: InlineMDRule = {
match: (text) => text.match(ITALIC_REG_2),
html: (parse, match) => {
const [, , g2] = match;
return `<i data-md="${ITALIC_MD_2}">${parse(g2)}</i>`;
},
};
const UNDERLINE_MD_1 = '__';
const UNDERLINE_PREFIX_1 = `${ESC_NEG_LB}_{2}`;
const UNDERLINE_NEG_LA_1 = '(?!_)';
const UNDERLINE_REG_1 = new RegExp(
`${URL_NEG_LB}${UNDERLINE_PREFIX_1}${MIN_ANY}${UNDERLINE_PREFIX_1}${UNDERLINE_NEG_LA_1}`
);
export const UnderlineRule: InlineMDRule = {
match: (text) => text.match(UNDERLINE_REG_1),
html: (parse, match) => {
const [, , g2] = match;
return `<u data-md="${UNDERLINE_MD_1}">${parse(g2)}</u>`;
},
};
const STRIKE_MD_1 = '~~';
const STRIKE_PREFIX_1 = `${ESC_NEG_LB}~{2}`;
const STRIKE_NEG_LA_1 = '(?!~)';
const STRIKE_REG_1 = new RegExp(
`${URL_NEG_LB}${STRIKE_PREFIX_1}${MIN_ANY}${STRIKE_PREFIX_1}${STRIKE_NEG_LA_1}`
);
export const StrikeRule: InlineMDRule = {
match: (text) => text.match(STRIKE_REG_1),
html: (parse, match) => {
const [, , g2] = match;
return `<s data-md="${STRIKE_MD_1}">${parse(g2)}</s>`;
},
};
const CODE_MD_1 = '`';
const CODE_PREFIX_1 = `${ESC_NEG_LB}\``;
const CODE_NEG_LA_1 = '(?!`)';
const CODE_REG_1 = new RegExp(`${URL_NEG_LB}${CODE_PREFIX_1}(.+?)${CODE_PREFIX_1}${CODE_NEG_LA_1}`);
export const CodeRule: InlineMDRule = {
match: (text) => text.match(CODE_REG_1),
html: (parse, match) => {
const [, , g2] = match;
return `<code data-md="${CODE_MD_1}">${g2}</code>`;
},
};
const SPOILER_MD_1 = '||';
const SPOILER_PREFIX_1 = `${ESC_NEG_LB}\\|{2}`;
const SPOILER_NEG_LA_1 = '(?!\\|)';
const SPOILER_REG_1 = new RegExp(
`${URL_NEG_LB}${SPOILER_PREFIX_1}${MIN_ANY}${SPOILER_PREFIX_1}${SPOILER_NEG_LA_1}`
);
export const SpoilerRule: InlineMDRule = {
match: (text) => text.match(SPOILER_REG_1),
html: (parse, match) => {
const [, , g2] = match;
return `<span data-md="${SPOILER_MD_1}" data-mx-spoiler>${parse(g2)}</span>`;
},
};
const LINK_ALT = `\\[${MIN_ANY}\\]`;
const LINK_URL = `\\((https?:\\/\\/.+?)\\)`;
const LINK_REG_1 = new RegExp(`${LINK_ALT}${LINK_URL}`);
export const LinkRule: InlineMDRule = {
match: (text) => text.match(LINK_REG_1),
html: (parse, match) => {
const [, g1, g2] = match;
return `<a data-md href="${g2}">${parse(g1)}</a>`;
},
};
export const INLINE_SEQUENCE_SET = '[*_~`|]';
export const CAP_INLINE_SEQ = `${URL_NEG_LB}${INLINE_SEQUENCE_SET}`;
const ESC_SEQ_1 = `\\\\(${INLINE_SEQUENCE_SET})`;
const ESC_REG_1 = new RegExp(`${URL_NEG_LB}${ESC_SEQ_1}`);
export const EscapeRule: InlineMDRule = {
match: (text) => text.match(ESC_REG_1),
html: (parse, match) => {
const [, , g2] = match;
return g2;
},
};

62
src/app/plugins/markdown/inline/runner.ts Normal file
View file

@ -0,0 +1,62 @@
import { MatchResult, replaceMatch } from '../internal';
import { InlineMDParser, InlineMDRule } from './type';
/**
* Runs a single markdown rule on the provided text.
*
* @param text - The text to parse.
* @param rule - The markdown rule to run.
* @param parse - A function that run the parser on remaining parts.
* @returns The text with the markdown rule applied or `undefined` if no match is found.
*/
export const runInlineRule = (
text: string,
rule: InlineMDRule,
parse: InlineMDParser
): string | undefined => {
const matchResult = rule.match(text);
if (matchResult) {
const content = rule.html(parse, matchResult);
return replaceMatch(text, matchResult, content, (txt) => [parse(txt)]).join('');
}
return undefined;
};
/**
* Runs multiple rules at the same time to better handle nested rules.
* Rules will be run in the order they appear.
*
* @param text - The text to parse.
* @param rules - The markdown rules to run.
* @param parse - A function that run the parser on remaining parts.
* @returns The text with the markdown rules applied or `undefined` if no match is found.
*/
export const runInlineRules = (
text: string,
rules: InlineMDRule[],
parse: InlineMDParser
): string | undefined => {
const matchResults = rules.map((rule) => rule.match(text));
let targetRule: InlineMDRule | undefined;
let targetResult: MatchResult | undefined;
for (let i = 0; i < matchResults.length; i += 1) {
const currentResult = matchResults[i];
if (currentResult && typeof currentResult.index === 'number') {
if (
!targetResult ||
(typeof targetResult?.index === 'number' && currentResult.index < targetResult.index)
) {
targetResult = currentResult;
targetRule = rules[i];
}
}
}
if (targetRule && targetResult) {
const content = targetRule.html(parse, targetResult);
return replaceMatch(text, targetResult, content, (txt) => [parse(txt)]).join('');
}
return undefined;
};

26
src/app/plugins/markdown/inline/type.ts Normal file
View file

@ -0,0 +1,26 @@
import { MatchResult, MatchRule } from '../internal';
/**
* Type for a function that parses inline markdown into HTML.
*
* @param text - The markdown text to be parsed.
* @returns The parsed HTML.
*/
export type InlineMDParser = (text: string) => string;
/**
* Type for a function that converts a match to output.
*
* @param parse - The inline markdown parser function.
* @param match - The match result.
* @returns The output string after processing the match.
*/
export type InlineMatchConverter = (parse: InlineMDParser, match: MatchResult) => string;
/**
* Type representing a markdown rule that includes a matching pattern and HTML conversion.
*/
export type InlineMDRule = {
match: MatchRule; // A function that matches a specific markdown pattern.
html: InlineMatchConverter; // A function that converts the match to HTML.
};

1
src/app/plugins/markdown/internal/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './utils';

61
src/app/plugins/markdown/internal/utils.ts Normal file
View file

@ -0,0 +1,61 @@
/**
* @typedef {RegExpMatchArray | RegExpExecArray} MatchResult
*
* Represents the result of a regular expression match.
* This type can be either a `RegExpMatchArray` or a `RegExpExecArray`,
* which are returned when performing a match with a regular expression.
*
* @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec}
* @see {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match}
*/
export type MatchResult = RegExpMatchArray | RegExpExecArray;
/**
* @typedef {function(string): MatchResult | null} MatchRule
*
* A function type that takes a string and returns a `MatchResult` or `null` if no match is found.
*
* @param {string} text The string to match against.
* @returns {MatchResult | null} The result of the regular expression match, or `null` if no match is found.
*/
export type MatchRule = (text: string) => MatchResult | null;
/**
* Returns the part of the text before a match.
*
* @param text - The input text string.
* @param match - The match result (e.g., `RegExpMatchArray` or `RegExpExecArray`).
* @returns A string containing the part of the text before the match.
*/
export const beforeMatch = (text: string, match: RegExpMatchArray | RegExpExecArray): string =>
text.slice(0, match.index);
/**
* Returns the part of the text after a match.
*
* @param text - The input text string.
* @param match - The match result (e.g., `RegExpMatchArray` or `RegExpExecArray`).
* @returns A string containing the part of the text after the match.
*/
export const afterMatch = (text: string, match: RegExpMatchArray | RegExpExecArray): string =>
text.slice((match.index ?? 0) + match[0].length);
/**
* Replaces a match in the text with a content.
*
* @param text - The input text string.
* @param match - The match result (e.g., `RegExpMatchArray` or `RegExpExecArray`).
* @param content - The content to replace the match with.
* @param processPart - A function to further process remaining parts of the text.
* @returns An array containing the processed parts of the text, including the content.
*/
export const replaceMatch = <C>(
text: string,
match: MatchResult,
content: C,
processPart: (txt: string) => Array<string | C>
): Array<string | C> => [
...processPart(beforeMatch(text, match)),
content,
...processPart(afterMatch(text, match)),
];

83
src/app/plugins/markdown/utils.ts Normal file
View file

@ -0,0 +1,83 @@
import { findAndReplace } from '../../utils/findAndReplace';
import { ESC_BLOCK_SEQ, UN_ESC_BLOCK_SEQ } from './block/rules';
import { EscapeRule, CAP_INLINE_SEQ } from './inline/rules';
import { runInlineRule } from './inline/runner';
import { replaceMatch } from './internal';
/**
* Removes escape sequences from markdown inline elements in the given plain-text.
* This function unescapes characters that are escaped with backslashes (e.g., `\*`, `\_`)
* in markdown syntax, returning the original plain-text with markdown characters in effect.
*
* @param text - The input markdown plain-text containing escape characters (e.g., `"some \*italic\*"`)
* @returns The plain-text with markdown escape sequences removed (e.g., `"some *italic*"`)
*/
export const unescapeMarkdownInlineSequences = (text: string): string =>
runInlineRule(text, EscapeRule, (t) => {
if (t === '') return t;
return unescapeMarkdownInlineSequences(t);
}) ?? text;
/**
* Recovers the markdown escape sequences in the given plain-text.
* This function adds backslashes (`\`) before markdown characters that may need escaping
* (e.g., `*`, `_`) to ensure they are treated as literal characters and not part of markdown formatting.
*
* @param text - The input plain-text that may contain markdown sequences (e.g., `"some *italic*"`)
* @returns The plain-text with markdown escape sequences added (e.g., `"some \*italic\*"`)
*/
export const escapeMarkdownInlineSequences = (text: string): string => {
const regex = new RegExp(`(${CAP_INLINE_SEQ})`, 'g');
const parts = findAndReplace(
text,
regex,
(match) => {
const [, g1] = match;
return `\\${g1}`;
},
(t) => t
);
return parts.join('');
};
/**
* Removes escape sequences from markdown block elements in the given plain-text.
* This function unescapes characters that are escaped with backslashes (e.g., `\>`, `\#`)
* in markdown syntax, returning the original plain-text with markdown characters in effect.
*
* @param {string} text - The input markdown plain-text containing escape characters (e.g., `\> block quote`).
* @param {function} processPart - It takes the plain-text as input and returns a modified version of it.
* @returns {string} The plain-text with markdown escape sequences removed and markdown formatting applied.
*/
export const unescapeMarkdownBlockSequences = (
text: string,
processPart: (text: string) => string
): string => {
const match = text.match(ESC_BLOCK_SEQ);
if (!match) return processPart(text);
const [, g1] = match;
return replaceMatch(text, match, g1, (t) => [processPart(t)]).join('');
};
/**
* Escapes markdown block elements by adding backslashes before markdown characters
* (e.g., `\>`, `\#`) that are normally interpreted as markdown syntax.
*
* @param {string} text - The input markdown plain-text that may contain markdown elements (e.g., `> block quote`).
* @param {function} processPart - It takes the plain-text as input and returns a modified version of it.
* @returns {string} The plain-text with markdown escape sequences added, preventing markdown formatting.
*/
export const escapeMarkdownBlockSequences = (
text: string,
processPart: (text: string) => string
): string => {
const match = text.match(UN_ESC_BLOCK_SEQ);
if (!match) return processPart(text);
const [, g1] = match;
return replaceMatch(text, match, `\\${g1}`, (t) => [processPart(t)]).join('');
};

4
src/app/plugins/react-custom-html-parser.tsx
View file

@ -21,7 +21,7 @@ import {
mxcUrlToHttp, mxcUrlToHttp,
} from '../utils/matrix'; } from '../utils/matrix';
import { getMemberDisplayName } from '../utils/room'; import { getMemberDisplayName } from '../utils/room';
import { EMOJI_PATTERN, URL_NEG_LB } from '../utils/regex'; import { EMOJI_PATTERN, sanitizeForRegex, URL_NEG_LB } from '../utils/regex';
import { getHexcodeForEmoji, getShortcodeFor } from './emoji'; import { getHexcodeForEmoji, getShortcodeFor } from './emoji';
import { findAndReplace } from '../utils/findAndReplace'; import { findAndReplace } from '../utils/findAndReplace';
import { import {
@ -171,7 +171,7 @@ export const scaleSystemEmoji = (text: string): (string | JSX.Element)[] =>
); );
export const makeHighlightRegex = (highlights: string[]): RegExp | undefined => { export const makeHighlightRegex = (highlights: string[]): RegExp | undefined => {
const pattern = highlights.join('|'); const pattern = highlights.map(sanitizeForRegex).join('|');
if (!pattern) return undefined; if (!pattern) return undefined;
return new RegExp(pattern, 'gi'); return new RegExp(pattern, 'gi');
}; };

19
src/app/plugins/utils.ts Normal file
View file

@ -0,0 +1,19 @@
import { SearchItemStrGetter } from '../hooks/useAsyncSearch';
import { PackImageReader } from './custom-emoji';
import { IEmoji } from './emoji';
export const getEmoticonSearchStr: SearchItemStrGetter<PackImageReader | IEmoji> = (item) => {
const shortcode = `:${item.shortcode}:`;
if (item instanceof PackImageReader) {
if (item.body) {
return [shortcode, item.body];
}
return shortcode;
}
const names = [shortcode, item.label];
if (Array.isArray(item.shortcodes)) {
return names.concat(item.shortcodes);
}
return names;
};

24
src/app/state/room/roomToUnread.ts
View file

@ -228,20 +228,18 @@ export const useBindRoomToUnreadAtom = (
useEffect(() => { useEffect(() => {
const handleReceipt = (mEvent: MatrixEvent, room: Room) => { const handleReceipt = (mEvent: MatrixEvent, room: Room) => {
if (mEvent.getType() === 'm.receipt') { const myUserId = mx.getUserId();
const myUserId = mx.getUserId(); if (!myUserId) return;
if (!myUserId) return; if (room.isSpaceRoom()) return;
if (room.isSpaceRoom()) return; const content = mEvent.getContent<ReceiptContent>();
const content = mEvent.getContent<ReceiptContent>();
const isMyReceipt = Object.keys(content).find((eventId) => const isMyReceipt = Object.keys(content).find((eventId) =>
(Object.keys(content[eventId]) as ReceiptType[]).find( (Object.keys(content[eventId]) as ReceiptType[]).find(
(receiptType) => content[eventId][receiptType][myUserId] (receiptType) => content[eventId][receiptType][myUserId]
) )
); );
if (isMyReceipt) { if (isMyReceipt) {
setUnreadAtom({ type: 'DELETE', roomId: room.roomId }); setUnreadAtom({ type: 'DELETE', roomId: room.roomId });
}
} }
}; };
mx.on(RoomEvent.Receipt, handleReceipt); mx.on(RoomEvent.Receipt, handleReceipt);

2
src/app/state/settings.ts
View file

@ -17,6 +17,7 @@ export interface Settings {
editorToolbar: boolean; editorToolbar: boolean;
twitterEmoji: boolean; twitterEmoji: boolean;
pageZoom: number; pageZoom: number;
hideActivity: boolean;
isPeopleDrawer: boolean; isPeopleDrawer: boolean;
memberSortFilterIndex: number; memberSortFilterIndex: number;
@ -45,6 +46,7 @@ const defaultSettings: Settings = {
editorToolbar: false, editorToolbar: false,
twitterEmoji: false, twitterEmoji: false,
pageZoom: 100, pageZoom: 100,
hideActivity: false,
isPeopleDrawer: true, isPeopleDrawer: true,
memberSortFilterIndex: 0, memberSortFilterIndex: 0,

29
src/app/state/spaceRooms.ts
View file

@ -23,32 +23,37 @@ const baseSpaceRoomsAtom = atomWithLocalStorage<Set<string>>(
type SpaceRoomsAction = type SpaceRoomsAction =
| { | {
type: 'PUT'; type: 'PUT';
roomId: string; roomIds: string[];
} }
| { | {
type: 'DELETE'; type: 'DELETE';
roomId: string; roomIds: string[];
}; };
export const spaceRoomsAtom = atom<Set<string>, [SpaceRoomsAction], undefined>( export const spaceRoomsAtom = atom<Set<string>, [SpaceRoomsAction], undefined>(
(get) => get(baseSpaceRoomsAtom), (get) => get(baseSpaceRoomsAtom),
(get, set, action) => { (get, set, action) => {
if (action.type === 'DELETE') { const current = get(baseSpaceRoomsAtom);
const { type, roomIds } = action;
if (type === 'DELETE' && roomIds.find((roomId) => current.has(roomId))) {
set( set(
baseSpaceRoomsAtom, baseSpaceRoomsAtom,
produce(get(baseSpaceRoomsAtom), (draft) => { produce(current, (draft) => {
draft.delete(action.roomId); roomIds.forEach((roomId) => draft.delete(roomId));
}) })
); );
return; return;
} }
if (action.type === 'PUT') { if (type === 'PUT') {
set( const newEntries = roomIds.filter((roomId) => !current.has(roomId));
baseSpaceRoomsAtom, if (newEntries.length > 0)
produce(get(baseSpaceRoomsAtom), (draft) => { set(
draft.add(action.roomId); baseSpaceRoomsAtom,
}) produce(current, (draft) => {
); newEntries.forEach((roomId) => draft.add(roomId));
})
);
} }
} }
); );

8
src/app/state/typingMembers.ts
View file

@ -2,6 +2,8 @@ import produce from 'immer';
import { atom, useSetAtom } from 'jotai'; import { atom, useSetAtom } from 'jotai';
import { MatrixClient, RoomMemberEvent, RoomMemberEventHandlerMap } from 'matrix-js-sdk'; import { MatrixClient, RoomMemberEvent, RoomMemberEventHandlerMap } from 'matrix-js-sdk';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useSetting } from './hooks/settings';
import { settingsAtom } from './settings';
export const TYPING_TIMEOUT_MS = 5000; // 5 seconds export const TYPING_TIMEOUT_MS = 5000; // 5 seconds
@ -127,12 +129,16 @@ export const useBindRoomIdToTypingMembersAtom = (
typingMembersAtom: typeof roomIdToTypingMembersAtom typingMembersAtom: typeof roomIdToTypingMembersAtom
) => { ) => {
const setTypingMembers = useSetAtom(typingMembersAtom); const setTypingMembers = useSetAtom(typingMembersAtom);
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
useEffect(() => { useEffect(() => {
const handleTypingEvent: RoomMemberEventHandlerMap[RoomMemberEvent.Typing] = ( const handleTypingEvent: RoomMemberEventHandlerMap[RoomMemberEvent.Typing] = (
event, event,
member member
) => { ) => {
if (hideActivity) {
return;
}
setTypingMembers({ setTypingMembers({
type: member.typing ? 'PUT' : 'DELETE', type: member.typing ? 'PUT' : 'DELETE',
roomId: member.roomId, roomId: member.roomId,
@ -145,5 +151,5 @@ export const useBindRoomIdToTypingMembersAtom = (
return () => { return () => {
mx.removeListener(RoomMemberEvent.Typing, handleTypingEvent); mx.removeListener(RoomMemberEvent.Typing, handleTypingEvent);
}; };
}, [mx, setTypingMembers]); }, [mx, setTypingMembers, hideActivity]);
}; };

6
src/app/utils/regex.ts
View file

@ -1,3 +1,9 @@
/**
* https://www.npmjs.com/package/escape-string-regexp
*/
export const sanitizeForRegex = (unsafeText: string): string =>
unsafeText.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d');
export const HTTP_URL_PATTERN = `https?:\\/\\/(?:www\\.)?(?:[^\\s)]*)(?<![.,:;!/?()[\\]\\s]+)`; export const HTTP_URL_PATTERN = `https?:\\/\\/(?:www\\.)?(?:[^\\s)]*)(?<![.,:;!/?()[\\]\\s]+)`;
export const URL_REG = new RegExp(HTTP_URL_PATTERN, 'g'); export const URL_REG = new RegExp(HTTP_URL_PATTERN, 'g');

13
src/app/utils/room.ts
View file

@ -4,6 +4,7 @@ import {
EventTimeline, EventTimeline,
EventTimelineSet, EventTimelineSet,
EventType, EventType,
IMentions,
IPushRule, IPushRule,
IPushRules, IPushRules,
JoinRule, JoinRule,
@ -430,3 +431,15 @@ export const getLatestEditableEvt = (
export const reactionOrEditEvent = (mEvent: MatrixEvent) => export const reactionOrEditEvent = (mEvent: MatrixEvent) =>
mEvent.getRelation()?.rel_type === RelationType.Annotation || mEvent.getRelation()?.rel_type === RelationType.Annotation ||
mEvent.getRelation()?.rel_type === RelationType.Replace; mEvent.getRelation()?.rel_type === RelationType.Replace;
export const getMentionContent = (userIds: string[], room: boolean): IMentions => {
const mMentions: IMentions = {};
if (userIds.length > 0) {
mMentions.user_ids = userIds;
}
if (room) {
mMentions.room = true;
}
return mMentions;
};

9
src/client/action/notifications.ts
View file

@ -1,6 +1,6 @@
import { MatrixClient } from "matrix-js-sdk"; import { MatrixClient, ReceiptType } from 'matrix-js-sdk';
export async function markAsRead(mx: MatrixClient, roomId: string) { export async function markAsRead(mx: MatrixClient, roomId: string, privateReceipt: boolean) {
const room = mx.getRoom(roomId); const room = mx.getRoom(roomId);
if (!room) return; if (!room) return;
@ -19,5 +19,8 @@ export async function markAsRead(mx: MatrixClient, roomId: string) {
const latestEvent = getLatestValidEvent(); const latestEvent = getLatestValidEvent();
if (latestEvent === null) return; if (latestEvent === null) return;
await mx.sendReadReceipt(latestEvent); await mx.sendReadReceipt(
latestEvent,
privateReceipt ? ReceiptType.ReadPrivate : ReceiptType.Read
);
} }

2
src/client/state/cons.js
View file

@ -1,5 +1,5 @@
const cons = { const cons = {
version: '4.3.2', version: '4.5.1',
secretKey: { secretKey: {
ACCESS_TOKEN: 'cinny_access_token', ACCESS_TOKEN: 'cinny_access_token',
DEVICE_ID: 'cinny_device_id', DEVICE_ID: 'cinny_device_id',