Author SHA1 Message Date
SalastilandClaude Sonnet 5.5 d2f61cc9d4 Merge development into master: 1.3.3
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-23 16:26:33 -04:00
SalastilandClaude Sonnet 5.5 482e7bf326 1.3.3: Telegram QR sign-in, folders, stickers and links; Discord safeguards and the new-member lock; CHANGELOG
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-23 16:26:28 -04:00
SalastilandClaude Sonnet 5.5 5f10ae68bc nobilis pointer: Discord new-member badge lock
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-23 12:27:23 -04:00
SalastilandClaude Sonnet 5.5 b6b308df0b Telegram links open in moho: tg:// is moho's to handle (the View in Telegram button of a web post), and a t.me link in a message goes to the chat and the post; nobilis pointer
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-23 11:56:24 -04:00
SalastilandClaude Sonnet 5.5 c4b6c2a226 nobilis pointer: Telegram folder refusal wording
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-23 11:27:07 -04:00
SalastilandClaude Sonnet 5.5 b481fb8126 Telegram (#26): stickers, QR sign-in, folders as categories both ways, topic unread seeds; nobilis pointer
- the sticker button and tab for Telegram accounts (listTelegramStickers / sendTelegramSticker)
- "Sign in with a QR code" in the Telegram form, needing only the api_id and api_hash
- a Telegram account's page draws its chat folders as categories, in Telegram's order, and what is done to
  them is done on Telegram: filing a conversation (drag), putting headings in order, making (a category is a
  folder once it has a conversation in it), renaming, deleting; a folder changed on another device turns up
- a conversation's unreadSeed / mentionsSeed start the window's unread count where the service keeps its own
- harness checks for the folders page and the QR button

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-23 11:19:45 -04:00
SalastilandClaude Sonnet 5.5 5776ca8dc9 Discord safeguards from Discordo, Endcord and Concord (#338 H1-H12); nobilis pointer
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-22 22:44:13 -04:00
SalastilandClaude Sonnet 5.5 d1361e080b Discord (#338): acks while the newest line is read at the bottom of a window in front; nobilis pointer
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-22 21:55:58 -04:00
SalastilandClaude Sonnet 5.5 ad1d5be6aa nobilis pointer: a join message is not a first word
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-22 20:41:08 -04:00
SalastilandClaude Sonnet 5.5 3561a9d511 Merge development into master: 1.3.2
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-21 23:36:07 -04:00
SalastilandClaude Sonnet 5.5 abc2c9adc2 1.3.2: Discord safeguards from Dissent's; reply quotes; CHANGELOG
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-21 23:36:04 -04:00
SalastilandClaude Sonnet 5.5 74f2c4750f Discord safeguards (#338): typing off by default, acks only while the window is looked at, a notice of the risk when adding an account; nobilis pointer
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-21 23:23:17 -04:00
SalastilandClaude Sonnet 5.5 df818a13bb A reply's quote draws what it quotes: emotes, emoji and stickers as pictures, not their codes, in the line over a reply and in the bar over the box, on every service
Twitch's parent text has no emotes, so the original on screen is quoted where it is there.

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-21 22:07:16 -04:00
SalastilandClaude Sonnet 5.5 75a49c4f75 Merge development into master: 1.3.1
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-21 21:03:52 -04:00
SalastilandClaude Sonnet 5.5 10f0180aab 1.3.1: Discord first-word lock; CHANGELOG
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-21 21:03:45 -04:00
SalastilandClaude Sonnet 5.5 b04189ad6b Discord: first-word lock, nonce, upload limit and send pacing; window banner and check; nobilis pointer
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-21 20:42:43 -04:00
SalastilandClaude Sonnet 5.5 5b438be371 The message box: bold, italic, underline and strikethrough are the browser's own, which toggle off from all of the box and keep its undo; the others are put back without the browser re-applying what it replaced
Select all then bold twice left the box bold: the browser keeps the formatting of the run it replaces when the selection is everything in it.

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-21 20:01:48 -04:00
SalastilandClaude Sonnet 5.5 a39dad3ac3 Merge development into master: 1.3.0, Telegram
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-21 19:28:47 -04:00
SalastilandClaude Sonnet 5.5 0c331abf2c The GIF check shows IRC as a Matrix account to reach the picker (IRC has none); CHANGELOG: search and formatting
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-21 19:28:39 -04:00
SalastilandClaude Sonnet 5.5 4233439565 Search the web for selected text: in a message's menu and the box's, with the engine chosen in Settings > General
DuckDuckGo (default), Google, Bing, Brave, Startpage, Ecosia, Qwant, Yandex, Kagi, or an address of one's own with %s; opened in the default browser.

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-21 19:18:28 -04:00
SalastilandClaude Sonnet 5.5 496d18f6fd The message box: a format toggles off, over a whole run, part of one or a mixed selection, and undo steps back over it with the selection kept
Worked out on a copy of the box and put back with one insertHTML (one undo step, and the browser no longer re-applies the format of what it replaced); undo and redo put back the selection that was there.

Fixes #336

Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-21 19:18:28 -04:00
SalastilandClaude Sonnet 5.5 c3f1f1c413 Merge development into master: 1.3.0, Telegram
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-21 19:03:07 -04:00
SalastilandClaude Sonnet 5.5 6bc4db8880 1.3.0: Telegram; CHANGELOG
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-21 19:02:55 -04:00
SalastilandClaude Sonnet 5.5 3a6c8da6ed Discord install headers; nobilis pointer
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-21 18:49:19 -04:00
SalastilandClaude Sonnet 5.5 ab8f40f53e Discord session resume, catch-up and throttles; nobilis pointer
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-21 18:19:27 -04:00
SalastilandClaude Sonnet 5.5 8f62f44517 Discord: the Connect anyway button; nobilis pointer
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-20 23:52:43 -04:00
SalastilandClaude Sonnet 5.5 59f978d03b Discord login limit; nobilis pointer
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-20 23:41:57 -04:00
SalastilandClaude Sonnet 5.5 de8674683e Telegram GIF picker; nobilis pointer
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-20 18:41:46 -04:00
SalastilandClaude Sonnet 5.5 7a2fda095e No GIF picker on IRC or Telegram
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-20 18:36:35 -04:00
SalastilandClaude Sonnet 5.5 40505af989 The GIF picker is offered only where a GIF link shows as a picture: not Steam, Twitch or Sneedchat
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-20 18:33:19 -04:00
Salastil b3a9077887 Merge development into master: Telegram
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>

# Conflicts:
#	nobilis
2026-10-19 22:47:52 -04:00
SalastilandClaude Sonnet 5.5 b81810f5cc Merge development into master: 1.2.1, Steam identity
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-15 17:14:25 -04:00
SalastilandClaude Sonnet 5.5 44208364cd Merge development into master: 1.2.0, Twitch
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-14 21:55:18 -04:00
SalastilandClaude Sonnet 5.5 335ac8b59d Merge development into master: 1.1.0, Steam
Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-13 15:49:35 -04:00
42 changed files with 2271 additions and 102 deletions

No files matched your search

+23
View File
@@ -0,0 +1,23 @@
# On a merge, .gitmodules keeps the answer this branch already has.
#
# master names the daemon at github.com because master is what a stranger
# clones, and development names it at the Gitea instance where the work
# happens. Without this, a merge that touched .gitmodules on both sides would
# stop and ask which host is right - and the answer is always "the one the
# branch being merged into already said".
#
# `merge=ours` needs a driver by that name, which is one line per clone and
# not something a repository can carry for you:
#
# git config merge.ours.driver true
#
# Without it git falls back to an ordinary merge, which conflicts rather than
# doing the wrong thing quietly - so a clone that has not run it is no worse
# off than before this file existed.
#
# The edge, because it is a real one: this keeps the *whole file*, not just the
# URL. If development ever adds a second submodule, master takes none of that
# entry while still taking the gitlink the merge brings with it - a submodule
# with nothing in .gitmodules to say where it comes from. Adding a submodule is
# therefore a thing to re-do by hand on master, and the only such thing.
/.gitmodules merge=ours
+55
View File
@@ -17,6 +17,61 @@ Each section has two parts:
that made it, including dependency updates
(`node scripts/changelog-deps.mjs <previous tag>` lists those).
## [1.3.3]
### Fixes, patches and changes
- Telegram sign-in by QR code: scan it with Telegram on a phone that is already signed in (Settings, Devices, Link Desktop Device), with no phone number or code; the code is renewed as Telegram says, an account kept in another datacenter is followed there, and a cloud password is asked for after the scan ([moho `b481fb8`](https://github.com/Moho-Chat/moho/commit/b481fb8), [nobilis `430e89f`](https://github.com/Moho-Chat/nobilis/commit/430e89f))
- Telegram chat folders are the categories of the account's page, kept in step both ways: a folder made, renamed, deleted or put in another order on Telegram turns up as the category, and the same done to a category here is done on Telegram, including filing a conversation by dragging it (a category becomes a folder when its first conversation is filed in, since Telegram keeps no empty folder) ([moho `b481fb8`](https://github.com/Moho-Chat/moho/commit/b481fb8), [nobilis `430e89f`](https://github.com/Moho-Chat/nobilis/commit/430e89f), [nobilis `c9c98de`](https://github.com/Moho-Chat/nobilis/commit/c9c98de))
- Telegram stickers can be sent, from the Stickers tab (recent, favourites and the installed packs); a group's bots offer their commands in the slash menu, written as `/command@bot` where two bots share a name; and a topic's own unread and mention counts start its badge ([moho `b481fb8`](https://github.com/Moho-Chat/moho/commit/b481fb8), [nobilis `430e89f`](https://github.com/Moho-Chat/nobilis/commit/430e89f))
- Telegram links open in moho: moho takes over `tg://` links, which is what the "View in Telegram" button on a post's web page opens, and a t.me link in a message goes to the chat and the post, joining the channel if the account is not in it ([moho `b6b308d`](https://github.com/Moho-Chat/moho/commit/b6b308d), [nobilis `64a13fa`](https://github.com/Moho-Chat/nobilis/commit/64a13fa))
- Discord is held back further from what gets an account flagged: no request after a 401 or three refusals on a route, a captcha closes its place instead of being answered, the server's own rules (verification level, onboarding, timeout, slowmode) are checked before a send, a direct message needs five of the account's own messages from Discord's own apps first and an empty channel is not written into first, history is asked once, uploads go in two steps as the official client does, one message at a time is sent to a channel, and the login is the official shape with the gateway stream compressed ([moho `5776ca8`](https://github.com/Moho-Chat/moho/commit/5776ca8), [nobilis `3557335`](https://github.com/Moho-Chat/nobilis/commit/3557335), [nobilis `2638938`](https://github.com/Moho-Chat/nobilis/commit/2638938))
- The message box of a Discord server is closed while the green new-member badge shows by your name there (taken to be the first week after joining), since what is sent from another client in that time is treated as spam; it opens again by itself ([moho `5f10ae6`](https://github.com/Moho-Chat/moho/commit/5f10ae6), [nobilis `b1862bb`](https://github.com/Moho-Chat/nobilis/commit/b1862bb))
## [1.3.2]
### Fixes, patches and changes
- Discord is asked for less and more politely, after what Dissent does to avoid being flagged as a third-party client: reads wait out a rate limit and let an empty bucket refill instead of treating a refusal as an answer; no history is fetched at login (a conversation is read the first time it is opened, 30 messages); a member list is subscribed to once a connection and no longer again at every join and leave; our own membership of each server comes from login and is not asked for; a read mark is sent only while the window is in front, never for a conversation whose last word is yours, and not again after another device sent it; text Discord would refuse (over 2,000 characters, 4,000 with Nitro, or empty) is refused before it is sent; the login declares the capabilities of a user client; the first reconnect wait is four seconds ([moho `74f2c47`](https://github.com/Moho-Chat/moho/commit/74f2c47), [nobilis `7943767`](https://github.com/Moho-Chat/nobilis/commit/7943767))
- The typing notice to Discord is off unless you turn it on in Settings > Discord, and adding a Discord account says plainly that third-party clients are against Discord's terms and what moho does about that ([moho `74f2c47`](https://github.com/Moho-Chat/moho/commit/74f2c47))
- A reply's quote, in the line over a reply and in the bar over the box, draws what it quotes - emotes, emoji and stickers as pictures instead of their codes - on every service ([moho `df818a1`](https://github.com/Moho-Chat/moho/commit/df818a1))
## [1.3.1]
### Fixes, patches and changes
- Discord is not spoken to first from here: a server where your account has not said anything since it joined, and a conversation with nothing in it, are locked with a note to send the first message from Discord's own app or website, after Discord flagged accounts for exactly that. Whether you have spoken is looked for in what moho keeps and then in Discord's search (one request a server, remembered), the lock lifts by itself once there is a message of yours there, and a message sent from moho does not count ([moho `b04189a`](https://github.com/Moho-Chat/moho/commit/b04189a), [nobilis `b9a79e4`](https://github.com/Moho-Chat/nobilis/commit/b9a79e4))
- Discord messages carry a nonce and an explicit list of who may be mentioned, as Discord's own clients send them; a file is checked against what the account may upload before any of it is sent, and waits a few seconds after a message instead of following straight on ([moho `b04189a`](https://github.com/Moho-Chat/moho/commit/b04189a), [nobilis `b9a79e4`](https://github.com/Moho-Chat/nobilis/commit/b9a79e4))
- Taking bold, italic, underline or strikethrough off all of the message box (select all, then the same button or key) works, and undo and redo step over formatting and leave the selection where it was ([moho `5b438be`](https://github.com/Moho-Chat/moho/commit/5b438be))
## [1.3.0]
### Major features
- **Telegram, ported:** your chats, groups, channels and bots in the same window as everything else. Sign in with your phone number, the code Telegram sends and your two-step password if you have one, using your own API id and hash from my.telegram.org (one is enough for every client you use); the session is kept, so a restart does not sign in again.
- **Telegram conversations:** private chats and bots as direct messages, groups and supergroups on the server rail like Discord's servers, channels with their posts, and a group's forum topics as conversations of their own. A horn marks a broadcast channel and a robot a bot. History loads as you scroll, new messages, edits and deletions arrive live, and messages you send, edit and delete go out the same way.
- **Telegram messages:** formatting, replies (with the quote shown above and a click to the original, even in another channel), forwards with a link back to where they came from, pictures, videos, files and voice messages drawn as they arrive and fetched when played, link cards, and Instant View articles opened in a window of their own.
- **Telegram on top of the chat:** reactions, pinned messages, polls (voting and making them), search, comments and thread counts on channel posts, a member list with moderation where you have the rights, muting, joining by link, and the GIF picker with your saved GIFs and Telegram's own search.
- **Telegram bots:** a bot's inline buttons are drawn under its message and pressed from the window, and the Menu button opens the bot's own command list.
- **Discord stays signed in:** a restart within a couple of minutes resumes the session Discord is already holding instead of logging in again, only the conversations that have something new are asked about, and a limit on fresh logins (3 an hour, 8 a day) holds the connection and says why, with a Connect anyway button when you mean it.
- **One video player on every service:** play, seek, a volume slider that opens on hover, elapsed or remaining time, speed, full screen, save, and edit on your own messages.
### Fixes, patches and changes
- Select text in a message or in the message box, right-click it and search the web for it, in your default browser, with the engine chosen in Settings > General: DuckDuckGo, Google, Bing, Brave Search, Startpage, Ecosia, Qwant, Yandex, Kagi, or an address of your own ([moho `4233439`](https://github.com/Moho-Chat/moho/commit/4233439))
- Formatting in the message box can be taken off again with the same button or key, over a whole run, part of one or a mixed selection, and undo and redo step over each change and leave the selection where it was ([moho `496d18f`](https://github.com/Moho-Chat/moho/commit/496d18f))
- Discord sends this install's id, language and timezone with its requests, as its own clients do; it still says it is moho ([moho `3a6c8da`](https://github.com/Moho-Chat/moho/commit/3a6c8da), [nobilis `3bf68e7`](https://github.com/Moho-Chat/nobilis/commit/3bf68e7))
- Discord resumes its session after a restart, asks only about conversations that moved on, posts typing at most every eight seconds and does not repeat a read mark ([moho `ab8f40f`](https://github.com/Moho-Chat/moho/commit/ab8f40f), [nobilis `e8b25d9`](https://github.com/Moho-Chat/nobilis/commit/e8b25d9))
- Discord limits fresh logins per account, holds the connection when it is over, and lets you through with Connect anyway ([moho `59f978d`](https://github.com/Moho-Chat/moho/commit/59f978d), [nobilis `8a7d733`](https://github.com/Moho-Chat/nobilis/commit/8a7d733), [moho `8f62f44`](https://github.com/Moho-Chat/moho/commit/8f62f44), [nobilis `58bf5ac`](https://github.com/Moho-Chat/nobilis/commit/58bf5ac))
- Discord's membership-screening dialog is drawn as Discord draws it, with the rules, the questions and the answers sent ([moho `23afcb6`](https://github.com/Moho-Chat/moho/commit/23afcb6), [nobilis `63093e1`](https://github.com/Moho-Chat/nobilis/commit/63093e1))
- Discord messages made of layout components (containers, sections, text, pictures) are drawn as cards with their buttons ([moho `c64812c`](https://github.com/Moho-Chat/moho/commit/c64812c), [nobilis `41c2780`](https://github.com/Moho-Chat/nobilis/commit/41c2780))
- Discord's APP mark on bots and applications, a check on verified ones, and OFFICIAL on the platform's own account and its messages; badges sit between the name and the time ([moho `2f4c204`](https://github.com/Moho-Chat/moho/commit/2f4c204), [nobilis `dba7731`](https://github.com/Moho-Chat/nobilis/commit/dba7731), [moho `510627f`](https://github.com/Moho-Chat/moho/commit/510627f), [nobilis `5501675`](https://github.com/Moho-Chat/nobilis/commit/5501675), [moho `5d2d0fe`](https://github.com/Moho-Chat/moho/commit/5d2d0fe))
- Discord: an emoji picked from another server's section goes in as its token and not the number that names it, and the hover toolbar and recent list no longer show bare numbers ([moho `9a86141`](https://github.com/Moho-Chat/moho/commit/9a86141), [moho `f1bf63a`](https://github.com/Moho-Chat/moho/commit/f1bf63a))
- Discord reads a backslash before punctuation as an escape in messages, link previews and embed field values ([moho `eb549f7`](https://github.com/Moho-Chat/moho/commit/eb549f7), [moho `a2a8949`](https://github.com/Moho-Chat/moho/commit/a2a8949))
- Videos go full screen by themselves on every service, filling the screen, with no second expand button and no viewer ([moho `bf5c33d`](https://github.com/Moho-Chat/moho/commit/bf5c33d), [moho `1387907`](https://github.com/Moho-Chat/moho/commit/1387907), [moho `aab10c7`](https://github.com/Moho-Chat/moho/commit/aab10c7), [moho `72d5b83`](https://github.com/Moho-Chat/moho/commit/72d5b83))
- A left click on the tray icon puts the window away when it is showing and brings it back when it is not ([moho `4ebabb2`](https://github.com/Moho-Chat/moho/commit/4ebabb2))
- The GIF picker is offered only where a GIF link shows as a picture: not on Steam, Twitch, Sneedchat or IRC ([moho `40505af`](https://github.com/Moho-Chat/moho/commit/40505af), [moho `7a2fda0`](https://github.com/Moho-Chat/moho/commit/7a2fda0))
## [1.2.1]
### Fixes, patches and changes
+1 -2
View File
@@ -1,8 +1,7 @@
# Maintainer: Salastil <[email protected]>
pkgname=moho-git
pkgver=r1.268751e
pkgrel=1
pkgdesc="Unified desktop chat client for IRC, Discord, Sneedchat and Matrix"
pkgdesc="Unified desktop chat client for IRC, Discord, Matrix, Kick, Sneedchat and Steam"
arch=('x86_64')
url="https://github.com/Moho-Chat/moho"
license=('GPL3')
+1 -1
Submodule nobilis updated: ad597ea2d2...9382bc04ea.
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "moho",
"version": "1.2.1",
"version": "1.3.3",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "moho",
"version": "1.2.1",
"version": "1.3.3",
"license": "GPL-3.0-or-later",
"dependencies": {
"@electron-toolkit/preload": "^3.0.1",
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "moho",
"version": "1.2.1",
"version": "1.3.3",
"description": "Unified desktop chat client for IRC, Discord, Sneedchat and Matrix",
"author": "Salastil <[email protected]>",
"license": "GPL-3.0-or-later",
+225
View File
@@ -0,0 +1,225 @@
#!/usr/bin/env node
/**
* Formatting in the message box, in a scratch moho with injected state (nothing is contacted): a format applied
* to a selection can be taken off again - by the keyboard shortcut or the strip's button, over the whole run,
* over part of it, or over a selection reaching past it - and each step can be undone with the box's own undo.
*
* node scripts/check-composer-format.mjs (SERVICE=sneedchat to try another service's box)
*/
import { launchApp, sleep } from './lib/harness.mjs'
const SERVICE = process.env.SERVICE ?? 'discord'
const { page, stop } = await launchApp({ env: { MOHO_UI_SHOTS: '1' } })
const ev = (code) => page.evaluate(code)
const results = []
const check = (what, ok, detail = '') => {
results.push(ok)
console.log(ok ? ' ok ' : ' FAIL', what, ok ? '' : detail)
}
const BOX = '.composer-input'
const html = () => ev(`document.querySelector(${JSON.stringify(BOX)}).innerHTML.replace(/ data-[a-z-]+="[^"]*"/g, (m) => m.startsWith(' data-fmt') ? m : '')`)
/** The text the box would send, with the markers of what is bold, italic, and so on in it. */
const marked = () =>
ev(`(() => {
const mark = { bold: '**', italic: '_', underline: '__', strike: '~~', code: '\`', spoiler: '||', quote: '> ' }
const native = { B: 'bold', STRONG: 'bold', I: 'italic', EM: 'italic', U: 'underline', S: 'strike', STRIKE: 'strike' }
const walk = (n) => {
if (n.nodeType === 3) return n.nodeValue
const kind = n instanceof HTMLElement ? (n.dataset.fmt ?? native[n.nodeName]) : null
const inner = [...n.childNodes].map(walk).join('')
return kind ? (mark[kind] ?? '') + inner + (kind === 'quote' ? '' : mark[kind] ?? '') : inner
}
return walk(document.querySelector(${JSON.stringify(BOX)}))
})()`)
const type = async (text) => {
await ev(`(() => { const b = document.querySelector(${JSON.stringify(BOX)}); b.focus(); b.innerHTML = '' })()`)
await page.call('Input.insertText', { text })
}
const select = (needle, nth = 0) =>
ev(`(() => {
const box = document.querySelector(${JSON.stringify(BOX)})
const text = []
const w = document.createTreeWalker(box, NodeFilter.SHOW_TEXT)
for (let n; (n = w.nextNode()); ) text.push(n)
const all = text.map((t) => t.nodeValue).join('')
let at = -1
for (let i = 0; i <= ${nth}; i++) at = all.indexOf(${JSON.stringify(needle)}, at + 1)
if (at < 0) return false
const locate = (offset) => { let seen = 0; for (const t of text) { if (offset <= seen + t.nodeValue.length) return [t, offset - seen]; seen += t.nodeValue.length } }
const [a, ao] = locate(at)
const [b, bo] = locate(at + ${JSON.stringify(needle)}.length)
const r = document.createRange()
r.setStart(a, ao); r.setEnd(b, bo)
const s = getSelection(); s.removeAllRanges(); s.addRange(r)
box.focus()
return true
})()`)
const key = (k, { ctrl = false, commands } = {}) =>
page.call('Input.dispatchKeyEvent', { type: 'keyDown', key: k, code: 'Key' + k.toUpperCase(), windowsVirtualKeyCode: k.toUpperCase().charCodeAt(0), modifiers: ctrl ? 2 : 0, commands })
const bold = () => key('b', { ctrl: true })
const undo = () => key('z', { ctrl: true, commands: ['undo'] })
const redo = () => key('z', { ctrl: true, commands: ['redo'] })
const strip = async (title) => {
await sleep(150)
return ev(`(() => { const b = [...document.querySelectorAll('.format-bar button')].find((x) => x.title === ${JSON.stringify(title)}); if (!b) return false; b.click(); return true })()`)
}
try {
await sleep(2500)
await page.call('Emulation.setDeviceMetricsOverride', { width: 1280, height: 800, deviceScaleFactor: 1, mobile: false })
await ev(`(() => {
const s = window.__mohoShots.store
const acct = { id: '${SERVICE}:me', service: '${SERVICE}', name: 'me', host: '', port: 0, state: 'connected', hasPassword: true, nick: 'me' }
const buf = { id: '${SERVICE}:me|chat', accountId: '${SERVICE}:me', kind: 'channel', name: 'chat', lastActivityTs: 5, category: 'Channels', groupId: 'account:${SERVICE}:me' }
s.set({ accounts: [acct], groups: [{ id: 'account:${SERVICE}:me', accountId: '${SERVICE}:me', service: '${SERVICE}', kind: 'account', name: 'me', position: 0 }], buffers: [buf], messagesByBuffer: { '${SERVICE}:me|chat': [] }, activeBufferId: '${SERVICE}:me|chat' })
s.selectGroup('account:${SERVICE}:me')
})()`)
await sleep(1200)
console.log('Applying and taking off')
await type('one two three four')
await select('two')
await bold()
check('bold goes on', (await marked()) === 'one **two** three four', await marked())
await bold()
check('the same key again takes it off', (await marked()) === 'one two three four', await marked())
await bold()
check('and again puts it back', (await marked()) === 'one **two** three four', await marked())
console.log('Undo')
await undo()
check('undo takes the bold back off', (await marked()) === 'one two three four', await marked())
await redo()
check('redo puts it on again', (await marked()) === 'one **two** three four', await marked())
check('redo leaves the word selected, not the whole message', (await ev(`String(getSelection())`)) === 'two', await ev(`String(getSelection())`))
await bold()
await undo()
check('undo puts it back after it was taken off', (await marked()) === 'one **two** three four', await marked())
check('and leaves the word selected', (await ev(`String(getSelection())`)) === 'two', await ev(`String(getSelection())`))
console.log('All of the box')
await type('one two three')
await ev(`(() => { const b = document.querySelector(${JSON.stringify(BOX)}); b.focus(); getSelection().selectAllChildren(b) })()`)
await bold()
check('everything goes bold (select all, then the key)', (await marked()) === '**one two three**', await marked())
await bold()
check('and the key again takes it all off', (await marked()) === 'one two three', await marked())
await bold()
await undo()
check('and undo puts the box back as it was', (await marked()) === 'one two three', await marked())
await ev(`(() => { const b = document.querySelector(${JSON.stringify(BOX)}); b.focus(); getSelection().selectAllChildren(b) })()`)
await sleep(250)
await strip('Bold')
await sleep(250)
check('everything goes bold from the strip', (await marked()) === '**one two three**', await marked())
await strip('Bold')
check('and the strip again takes it all off', (await marked()) === 'one two three', await marked())
for (const [title, m] of [['Code', '`'], ['Spoiler', '||'], ['Italic', '_']]) {
await ev(`(() => { const b = document.querySelector(${JSON.stringify(BOX)}); b.focus(); getSelection().selectAllChildren(b) })()`)
await sleep(250)
await strip(title)
const on = await marked()
await sleep(250)
await strip(title)
check(`${title}: all of the box goes on and comes off again`, on === `${m}one two three${m}` && (await marked()) === 'one two three', `${on} -> ${await marked()}`)
}
console.log('Formats the window makes itself (code, spoiler) undo as well')
for (const [title, m] of [['Code', '`'], ['Spoiler', '||']]) {
await type('one two three four')
await select('two')
await sleep(250)
await strip(title)
const on = await marked()
await undo()
const off = await marked()
const kept = await ev(`String(getSelection())`)
await redo()
check(`${title}: on, undo takes it off with the word still selected, redo puts it on`, on === `one ${m}two${m} three four` && off === 'one two three four' && kept === 'two' && (await marked()) === on, `${on} | ${off} | ${kept} | ${await marked()}`)
await ev(`(() => { const b = document.querySelector(${JSON.stringify(BOX)}); b.focus(); getSelection().selectAllChildren(b) })()`)
await sleep(250)
await strip(title)
await strip(title)
await undo()
check(`${title}: over all of the box, taken off and undone`, (await marked()).replace(/[\`|]/g, '') === 'one two three four' && (await marked()).includes(m), await marked())
}
console.log('Undo leaves a selection that is safe to type over')
await type('one two three four')
await select('two')
await bold()
await undo()
check('after undo the word is selected, not the whole message', (await ev(`String(getSelection())`)) === 'two', await ev(`String(getSelection())`))
console.log('The ends of the box')
await type('one two')
await select('one')
await bold()
check('the first word goes bold', (await marked()) === '**one** two', await marked())
await bold()
check('and comes off', (await marked()) === 'one two', await marked())
await select('two')
await bold()
check('the last word goes bold', (await marked()) === 'one **two**', await marked())
await bold()
check('and comes off', (await marked()) === 'one two', await marked())
console.log('Other formats')
await type('one two three')
await select('two')
await key('i', { ctrl: true })
check('italic goes on', (await marked()) === 'one _two_ three', await marked())
await select('one two thr')
await bold()
check('bold over italic keeps both', (await marked()) === '**one _two_ thr**ee', await marked())
await key('i', { ctrl: true })
check('italic over text that is only partly italic makes all of it italic', (await marked()) === '**_one two thr_**ee', await marked())
await key('i', { ctrl: true })
check('and again takes italic off all of it, leaving the bold', (await marked()) === '**one two thr**ee', await marked())
console.log('Lines')
await type('first line')
await page.call('Input.dispatchKeyEvent', { type: 'keyDown', key: 'Enter', code: 'Enter', windowsVirtualKeyCode: 13, modifiers: 8 })
await page.call('Input.insertText', { text: 'second line' })
if (!(await select('line\nsecond'))) await select('linesecond')
await bold()
const lines = await ev(`document.querySelector(${JSON.stringify(BOX)}).innerHTML`)
check('a selection over two lines is bold, and the break is still there', /<b>|data-fmt="bold"/.test(lines) && (/<br/.test(lines) || /\n/.test(lines)) && (await marked()).replace(/\n/g, '').includes('**'), lines)
await bold()
check('and comes off whole', !/data-fmt|<b>/.test(await html()), await html())
console.log('Part of a run')
await type('one two three four')
await select('two three')
await bold()
await select('wo th')
await bold()
check('part of a run is taken off, the rest stays', (await marked()) === 'one **t**wo th**ree** four', await marked())
console.log('Reaching past a run')
await type('one two three four')
await select('two')
await bold()
await select('one two thr')
await bold()
check('a selection partly bold is made all bold, not doubled', (await marked()) === '**one two thr**ee four', await marked())
await bold()
check('and the next press takes it all off', (await marked()) === 'one two three four', await marked())
console.log('The strip')
await type('one two three four')
await select('three')
await sleep(300)
check('the strip offers bold', await strip('Bold'))
check('and it goes on', (await marked()) === 'one two **three** four', await marked())
await sleep(300)
check('the strip button again takes it off', (await strip('Bold')) && (await marked()) === 'one two three four', await marked())
await undo()
check('and undo puts it back', (await marked()) === 'one two **three** four', await marked())
} catch (e) {
console.log(' FAIL', e.message)
results.push(false)
} finally {
await stop()
}
process.exit(results.every(Boolean) ? 0 : 1)
+50
View File
@@ -0,0 +1,50 @@
#!/usr/bin/env node
/**
* The message box in a Discord server (or conversation) the account has not spoken in: replaced by the reason, in a
* scratch moho with injected state (nothing is contacted). The daemon decides the lock; this checks what the window
* makes of the `readOnly` it is given.
*
* node scripts/check-first-word-lock.mjs [output directory]
*/
import fs from 'node:fs'
import path from 'node:path'
import { launchApp, sleep } from './lib/harness.mjs'
const out = process.argv[2]
if (out) fs.mkdirSync(out, { recursive: true })
const { page, stop } = await launchApp({ env: { MOHO_UI_SHOTS: '1' } })
const ev = (code) => page.evaluate(code)
const results = []
const check = (what, ok, detail = '') => {
results.push(ok)
console.log(ok ? ' ok ' : ' FAIL', what, ok ? '' : detail)
}
const REASON = "Send your first message in this server from Discord's own app or website. Discord flags accounts that start talking in a server from another client."
try {
await sleep(2500)
await page.call('Emulation.setDeviceMetricsOverride', { width: 1280, height: 800, deviceScaleFactor: 1, mobile: false })
await ev(`(() => {
const s = window.__mohoShots.store
const acct = { id: 'discord:me', service: 'discord', name: 'me', host: '', port: 0, state: 'connected', hasPassword: true, nick: 'me' }
const mk = (name, readOnly) => ({ id: 'discord:me|' + name, accountId: 'discord:me', kind: 'channel', name, lastActivityTs: 5, category: 'Channels', groupId: 'account:discord:me', ...(readOnly ? { readOnly } : {}) })
s.set({ accounts: [acct], groups: [{ id: 'account:discord:me', accountId: 'discord:me', service: 'discord', kind: 'account', name: 'me', position: 0 }], buffers: [mk('chasm/#general', ${JSON.stringify(REASON)}), mk('chasm/#open')], messagesByBuffer: { 'discord:me|chasm/#general': [], 'discord:me|chasm/#open': [] }, activeBufferId: 'discord:me|chasm/#general' })
s.selectGroup('account:discord:me')
})()`)
await sleep(1000)
check('a locked server shows the reason where the box would be', (await ev(`document.querySelector('.composer-readonly')?.innerText ?? ''`)).includes('first message in this server'))
check('with a line saying moho opens it by itself', (await ev(`document.querySelector('.composer-readonly')?.innerText ?? ''`)).includes('opens this up by itself'))
check('and no message box to type in', !(await ev(`!!document.querySelector('.composer-input')`)))
if (out) {
const { data } = await page.call('Page.captureScreenshot', { format: 'png' })
fs.writeFileSync(path.join(out, 'first-word-lock.png'), Buffer.from(data, 'base64'))
}
await ev(`(() => { const s = window.__mohoShots.state(); window.__mohoShots.patch({ buffers: s.buffers.map((b) => ({ ...b, readOnly: undefined })) }) })()`)
await sleep(500)
check('once the lock is lifted the box is back', await ev(`!!document.querySelector('.composer-input')`))
} catch (e) {
console.log(' FAIL', e.message)
results.push(false)
} finally {
await stop()
}
process.exit(results.every(Boolean) ? 0 : 1)
+85
View File
@@ -0,0 +1,85 @@
#!/usr/bin/env node
/**
* The line above a reply, and the bar over the box while one is written, in a scratch moho with injected state
* (nothing is contacted): what the reply quotes is drawn as the original is - an emote or emoji as its picture, not
* its code - on every service that has such codes, and text that has none is untouched.
*
* node scripts/check-reply-emotes.mjs [output directory]
*/
import fs from 'node:fs'
import path from 'node:path'
import { launchApp, sleep } from './lib/harness.mjs'
const out = process.argv[2]
if (out) fs.mkdirSync(out, { recursive: true })
const { page, stop } = await launchApp({ env: { MOHO_UI_SHOTS: '1' } })
const ev = (code) => page.evaluate(code)
const results = []
const check = (what, ok, detail = '') => {
results.push(ok)
console.log(ok ? ' ok ' : ' FAIL', what, ok ? '' : detail)
}
// What each service's stored text carries for a picture, and what must not be left on screen.
const CASES = [
{ service: 'kick', body: '[emote:5756632:SUSSY][emote:5756632:SUSSY] lol', code: '[emote:', pictures: 2 },
{ service: 'discord', body: 'nice <:pog:123456789012345678> yes', code: '<:pog', pictures: 1 },
{ service: 'twitch', body: '[twitch:emote:25:Kappa] hello', code: '[twitch:', pictures: 1 },
// Twitch quotes the parent as plain text, with no word of which are emotes: the original on screen has them.
{ service: 'twitch', body: '[twitch:emote:25:Kappa] hello', quotedAs: 'Kappa hello', code: '[twitch:', pictures: 1 },
{ service: 'steam', body: '[steam:emote:steamhappy] hi', code: '[steam:', pictures: 1 },
{ service: 'sneedchat', body: 'hello :smile: there', code: null, pictures: 0 },
{ service: 'matrix', body: 'plain 😀 words', code: null, pictures: 0 },
{ service: 'irc', body: 'plain 😀 words', code: null, pictures: 0 },
{ service: 'telegram', body: 'plain 😀 words', code: null, pictures: 0 }
]
try {
await sleep(2500)
await page.call('Emulation.setDeviceMetricsOverride', { width: 1280, height: 800, deviceScaleFactor: 1, mobile: false })
for (const c of CASES) {
console.log(c.service)
await ev(`(() => {
const s = window.__mohoShots.store
const id = ${JSON.stringify(c.service + ':me')}
const acct = { id, service: ${JSON.stringify(c.service)}, name: 'me', host: '', port: 0, state: 'connected', hasPassword: true, nick: 'me' }
const buf = { id: id + '|room', accountId: id, kind: 'channel', name: 'room', lastActivityTs: 5, category: 'Channels', groupId: 'account:' + id }
const t = Math.floor(Date.now() / 1000) - 600
const base = { bufferId: buf.id, ts: t, kind: 'chat', isAction: false, isHighlight: false, isOwn: false, edited: false }
const messages = [
{ ...base, id: 'o1', from: 'TAYL31GH', senderId: 't', body: ${JSON.stringify(c.body)} },
{ ...base, id: 'r1', from: 'RildWandy', senderId: 'r', ts: t + 30, body: 'I shit you not lol', replyTo: { id: 'o1', from: 'TAYL31GH', body: ${JSON.stringify(c.quotedAs ?? c.body)}${c.service === 'telegram' ? ", chat: ''" : ''} } }
]
s.set({ accounts: [acct], groups: [{ id: 'account:' + id, accountId: id, service: ${JSON.stringify(c.service)}, kind: 'account', name: 'me', position: 0 }], buffers: [buf], messagesByBuffer: { [buf.id]: messages }, activeBufferId: buf.id })
s.selectGroup('account:' + id)
})()`)
await sleep(900)
const preview = await ev(`(() => {
const el = document.querySelector('.reply-preview, .tg-quote-body')
return el ? { text: el.innerText, pictures: el.querySelectorAll('img.custom-emoji, img.smilie, .custom-emoji-gone').length, html: el.innerHTML.slice(0, 200) } : null
})()`)
check(`${c.service}: the reply shows what it answers`, !!preview)
if (!preview) continue
if (c.code) check(`${c.service}: and not the emote's code`, !preview.text.includes(c.code) && !preview.html.includes(c.code), JSON.stringify(preview))
if (c.pictures) check(`${c.service}: as ${c.pictures} picture(s)`, preview.pictures === c.pictures, JSON.stringify(preview))
else check(`${c.service}: its words are kept`, /plain|hello/.test(preview.text), JSON.stringify(preview))
if (c.service === 'kick') {
console.log('The bar over the box')
await ev(`window.__mohoShots.store.startReply('o1', 'TAYL31GH', '[emote:5756632:SUSSY] lol')`)
await sleep(600)
const bar = await ev(`(() => { const el = document.querySelector('.composer-reply'); return el ? { text: el.innerText, pictures: el.querySelectorAll('img.custom-emoji, .custom-emoji-gone').length } : null })()`)
check('the bar over the box draws the emote too', !!bar && bar.pictures === 1 && !bar.text.includes('[emote:'), JSON.stringify(bar))
await ev(`window.__mohoShots.store.set({ replyingTo: null })`)
}
if (c.service === 'kick' && out) {
const { data } = await page.call('Page.captureScreenshot', { format: 'png' })
fs.writeFileSync(path.join(out, 'reply-emotes-kick.png'), Buffer.from(data, 'base64'))
}
}
} catch (e) {
console.log(' FAIL', e.message)
results.push(false)
} finally {
await stop()
}
process.exit(results.every(Boolean) ? 0 : 1)
+149
View File
@@ -0,0 +1,149 @@
#!/usr/bin/env node
/**
* Searching the web for selected text, in a scratch moho with injected state (nothing is contacted): the message
* menu offers it for a selection only, names the engine chosen in Settings > General, follows a change of engine,
* and Settings shows the drop-down (and the address field for an engine of one's own).
*
* node scripts/check-search-menu.mjs [output directory]
*/
import fs from 'node:fs'
import path from 'node:path'
import { launchApp, sleep } from './lib/harness.mjs'
const out = process.argv[2]
if (out) fs.mkdirSync(out, { recursive: true })
const { page, stop } = await launchApp({ env: { MOHO_UI_SHOTS: '1' } })
const ev = (code) => page.evaluate(code)
const results = []
const check = (what, ok, detail = '') => {
results.push(ok)
console.log(ok ? ' ok ' : ' FAIL', what, ok ? '' : detail)
}
const shot = async (name) => {
if (!out) return
const { data } = await page.call('Page.captureScreenshot', { format: 'png' })
fs.writeFileSync(path.join(out, name), Buffer.from(data, 'base64'))
}
const mouse = (type, x, y, button = 'left') => page.call('Input.dispatchMouseEvent', { type, x, y, button, buttons: type === 'mouseReleased' ? 0 : button === 'right' ? 2 : 1, clickCount: 1 })
const menuLabels = () => ev(`[...document.querySelectorAll('.context-menu .context-menu-item')].map((e) => e.innerText.trim().split('\\n').pop())`)
/** Sets a field the way a person's edit does, so the window's own handlers run. */
const setField = (selector, value, how) => ev(`(async () => {
const el = document.querySelector(${JSON.stringify(selector)})
if (!el) return false
if (${JSON.stringify(how)} === 'input') el.focus()
const proto = el instanceof HTMLSelectElement ? HTMLSelectElement.prototype : HTMLInputElement.prototype
Object.getOwnPropertyDescriptor(proto, 'value').set.call(el, ${JSON.stringify(value)})
el.dispatchEvent(new Event(${JSON.stringify(how)}, { bubbles: true }))
// Time for the window to take the edit before the field is left, as it has when a person types.
if (${JSON.stringify(how)} === 'input') { await new Promise((r) => setTimeout(r, 200)); el.blur() }
return true
})()`)
const openGeneral = async () => {
await ev(`window.__mohoShots.store.setActivePanel('settings')`)
await sleep(500)
await ev(`(() => { const b = [...document.querySelectorAll('button, [role=tab], a')].find((e) => e.innerText.trim() === 'General'); b?.click() })()`)
await sleep(500)
}
const closeMenu = async () => {
await page.call('Input.dispatchKeyEvent', { type: 'keyDown', key: 'Escape', code: 'Escape', windowsVirtualKeyCode: 27 })
await sleep(200)
}
/** Selects `needle` in the first message and right-clicks on it. */
const rightClickOn = async (needle) => {
const at = await ev(`(() => {
const body = document.querySelector('.message-body') ?? document.querySelector('[data-msg-id]')
const w = document.createTreeWalker(body, NodeFilter.SHOW_TEXT)
for (let n; (n = w.nextNode()); ) {
const i = n.nodeValue.indexOf(${JSON.stringify(needle)})
if (i < 0) continue
const r = document.createRange()
r.setStart(n, i); r.setEnd(n, i + ${JSON.stringify(needle)}.length)
const s = getSelection(); s.removeAllRanges(); s.addRange(r)
const b = r.getBoundingClientRect()
return { x: b.left + b.width / 2, y: b.top + b.height / 2 }
}
return null
})()`)
if (!at) return false
await mouse('mouseMoved', at.x, at.y)
await mouse('mousePressed', at.x, at.y, 'right')
await mouse('mouseReleased', at.x, at.y, 'right')
await sleep(400)
return true
}
try {
await sleep(2500)
await page.call('Emulation.setDeviceMetricsOverride', { width: 1280, height: 800, deviceScaleFactor: 1, mobile: false })
await ev(`(() => {
const s = window.__mohoShots.store
const acct = { id: 'discord:me', service: 'discord', name: 'me', host: '', port: 0, state: 'connected', hasPassword: true, nick: 'me' }
const buf = { id: 'discord:me|chat', accountId: 'discord:me', kind: 'channel', name: 'chat', lastActivityTs: 5, category: 'Channels', groupId: 'account:discord:me' }
const t = Math.floor(Date.now() / 1000) - 600
const messages = [{ id: 'm1', bufferId: 'discord:me|chat', from: 'ada', body: 'the Antikythera mechanism is older than anyone expected', ts: t, kind: 'chat', isAction: false, isHighlight: false, isOwn: false, edited: false }]
s.set({ accounts: [acct], groups: [{ id: 'account:discord:me', accountId: 'discord:me', service: 'discord', kind: 'account', name: 'me', position: 0 }], buffers: [buf], messagesByBuffer: { 'discord:me|chat': messages }, activeBufferId: 'discord:me|chat' })
s.selectGroup('account:discord:me')
})()`)
await sleep(1200)
console.log('Message menu')
check('a message with a word selected', await rightClickOn('Antikythera mechanism'))
let labels = await menuLabels()
check('offers a search for it, by the default engine', labels.some((l) => l === 'Search DuckDuckGo for “Antikythera mechanism”'), JSON.stringify(labels))
await shot('search-menu.png')
await closeMenu()
await openGeneral()
check('Settings > General has the engine drop-down', await setField('select[aria-label="Search engine"]', 'google', 'change'))
await sleep(300)
await ev(`window.__mohoShots.store.setActivePanel('')`)
await sleep(500)
await rightClickOn('Antikythera mechanism is older')
labels = await menuLabels()
check('names the engine chosen in Settings, and shortens a long selection', labels.some((l) => /^Search Google for “Antikythera mechanism is ol…”$/.test(l)), JSON.stringify(labels))
await closeMenu()
await openGeneral()
await setField('select[aria-label="Search engine"]', 'custom', 'change')
await sleep(300)
check('an own engine asks for an address', await setField('input[placeholder="https://example.org/search?q=%s"]', 'https://www.example.org/find?q=%s', 'input'))
await shot('search-settings.png')
await sleep(300)
await ev(`window.__mohoShots.store.setActivePanel('')`)
await sleep(500)
await rightClickOn('Antikythera')
labels = await menuLabels()
check('an engine of one’s own is named by its host', labels.some((l) => l === 'Search example.org for “Antikythera”'), JSON.stringify(labels))
await closeMenu()
await openGeneral()
await setField('input[placeholder="https://example.org/search?q=%s"]', 'nonsense', 'input')
await sleep(300)
await ev(`window.__mohoShots.store.setActivePanel('')`)
await sleep(500)
await rightClickOn('Antikythera')
labels = await menuLabels()
check('an address that cannot be searched is not offered', !labels.some((l) => l.startsWith('Search ')), JSON.stringify(labels))
await closeMenu()
await openGeneral()
await setField('select[aria-label="Search engine"]', 'duckduckgo', 'change')
await sleep(300)
await ev(`window.__mohoShots.store.setActivePanel('')`)
await sleep(500)
await ev(`getSelection().removeAllRanges()`)
const row = await ev(`(() => { const r = document.querySelector('[data-msg-id]').getBoundingClientRect(); return { x: r.right - 20, y: r.top + r.height / 2 } })()`)
await mouse('mouseMoved', row.x, row.y)
await mouse('mousePressed', row.x, row.y, 'right')
await mouse('mouseReleased', row.x, row.y, 'right')
await sleep(400)
labels = await menuLabels()
check('without a selection there is no search entry', labels.length > 0 && !labels.some((l) => l.startsWith('Search ')), JSON.stringify(labels))
await closeMenu()
} catch (e) {
console.log(' FAIL', e.message)
results.push(false)
} finally {
await stop()
}
process.exit(results.every(Boolean) ? 0 : 1)
+186
View File
@@ -0,0 +1,186 @@
#!/usr/bin/env node
/**
* A Telegram account's page with its conversations under the account's chat folders, and the changes the window asks
* Telegram for: filing a conversation by dragging it to another folder, putting the folders in another order, making a
* category (which is a folder once it has a conversation in it), renaming and deleting one - and that what Telegram
* says next is what is drawn. The daemon's answers are stood in for here, in a scratch home on a fake IRC server.
*
* node scripts/check-telegram-folders-ui.mjs <output directory>
*/
import fs from 'node:fs'
import path from 'node:path'
import { fakeIrc, launchApp, openIrcChannel, sleep } from './lib/harness.mjs'
const out = process.argv[2] ?? '.'
fs.mkdirSync(out, { recursive: true })
const irc = await fakeIrc({ people: ['alice'], onJoin: (c, _n, send) => send(`:alice!u@h PRIVMSG ${c} :hello there`) })
const { page, stop } = await launchApp({ env: { MOHO_UI_SHOTS: '1' } })
const ev = (code) => page.evaluate(code)
const shot = async (name) => {
const { data } = await page.call('Page.captureScreenshot', { format: 'png' })
fs.writeFileSync(path.join(out, name), Buffer.from(data, 'base64'))
}
const results = []
const check = (what, ok, detail = '') => {
results.push(ok)
console.log(ok ? ' ok ' : ' FAIL', what, detail)
}
const headings = () => ev(`[...document.querySelectorAll('.bufferlist .category')].map((c) => ({ head: (c.querySelector('.category-head')?.textContent || '').replace('expand_more', '').replace('chevron_right', '').trim(), rows: [...c.querySelectorAll('[draggable=true]')].filter((r) => !r.classList.contains('category-head')).map((r) => r.textContent.trim()) }))`)
/** Holds a conversation (or a heading) over a heading and lets go. */
const drag = (from, to) =>
ev(`(async () => {
const row = [...document.querySelectorAll('.bufferlist [draggable=true]')].find((e) => e.textContent.replace(/[a-z_]+(?=[A-Z])/, '').trim().endsWith(${JSON.stringify(from)}) && e.textContent.trim().length < 40)
const head = [...document.querySelectorAll('.bufferlist .category-head')].find((e) => e.textContent.includes(${JSON.stringify(to)}))
if (!row || !head) return { row: !!row, head: !!head }
const dt = new DataTransfer()
const wait = () => new Promise((r) => setTimeout(r, 120))
row.dispatchEvent(new DragEvent('dragstart', { bubbles: true, dataTransfer: dt }))
await wait()
head.dispatchEvent(new DragEvent('dragenter', { bubbles: true, cancelable: true, dataTransfer: dt }))
head.dispatchEvent(new DragEvent('dragover', { bubbles: true, cancelable: true, dataTransfer: dt }))
await wait()
head.dispatchEvent(new DragEvent('drop', { bubbles: true, cancelable: true, dataTransfer: dt }))
row.dispatchEvent(new DragEvent('dragend', { bubbles: true, dataTransfer: dt }))
await wait()
return { dragged: true }
})()`)
try {
await openIrcChannel(page, { port: irc.address().port, nick: 'checker', channels: ['#ui'], waitFor: 'hello there' })
await page.call('Emulation.setDeviceMetricsOverride', { width: 1280, height: 800, deviceScaleFactor: 1, mobile: false })
// A window that is not focused takes a field's focus away again as soon as it is given.
await page.call('Emulation.setFocusEmulationEnabled', { enabled: true })
await ev(`(() => {
const s = window.__mohoShots
const st = s.state()
const irc = st.accounts[0]
const ircGroup = st.groups.find((g) => g.kind === 'account')
const channel = st.buffers.find((b) => b.id.endsWith('|#ui'))
const account = { ...irc, id: 'telegram:7', service: 'telegram', displayName: 'me', state: 'connected' }
const group = { ...ircGroup, id: 'account:telegram:7', accountId: 'telegram:7', service: 'telegram', name: 'Telegram - me' }
const chat = (name, id, category) => ({ ...channel, id: 'telegram:7|' + name, accountId: 'telegram:7', name, kind: 'dm', remoteId: id, groupId: group.id, category, position: 0, unread: 0, highlight: false, mentions: 0 })
const buffers = [
chat('Alice', '101', 'Direct Messages'), chat('Bob', '102', 'Direct Messages'), chat('Carol', '103', 'Direct Messages'),
chat('HelperBot', '201', 'Bots'), chat('News', '-1001', 'Channels')
]
window.__calls = []
const store = s.store
for (const name of ['fileTelegramChat', 'renameTelegramFolder', 'deleteTelegramFolder', 'reorderTelegramFolders']) {
store[name] = (...a) => { window.__calls.push([name, ...a]) }
}
store.createTelegramFolder = async (...a) => { window.__calls.push(['createTelegramFolder', ...a]); return true }
s.patch({
accounts: [...st.accounts, account],
groups: [...st.groups, group],
buffers: [...st.buffers, ...buffers],
telegramFolders: { 'telegram:7': [
{ id: 3, name: 'Work', members: ['101', '102'] },
{ id: 2, name: 'Bots', members: ['201'] }
] },
activeGroupId: group.id, activeBufferId: buffers[0].id
})
})()`)
await sleep(1200)
await ev(`window.__mohoShots.patch({ telegramFolders: { 'telegram:7': [{ id: 3, name: 'Work', members: ['101', '102'] }, { id: 2, name: 'Bots', members: ['201'] }] } })`)
await sleep(500)
let h = await headings()
console.log(JSON.stringify(h))
check('the account page has a category for each folder, in Telegram’s order', h.findIndex((x) => x.head === 'Work') >= 0 && h.findIndex((x) => x.head === 'Work') < h.findIndex((x) => x.head === 'Bots'))
check('conversations sit under the folder that holds them', h.find((x) => x.head === 'Work')?.rows.length === 2 && h.find((x) => x.head === 'Bots')?.rows.length === 1)
await shot('telegram-folders.png')
await drag('Alice', 'Bots')
const filed = await ev(`window.__calls.filter((c) => c[0] === 'fileTelegramChat')`)
check('dragging a conversation to another folder asks Telegram to move it there', JSON.stringify(filed) === JSON.stringify([['fileTelegramChat', 'telegram:7|Alice', 2]]), JSON.stringify(filed))
h = await headings()
check('and nothing moves here until Telegram says so', h.find((x) => x.head === 'Work')?.rows.length === 2)
// Telegram says it did.
await ev(`window.__mohoShots.patch({ telegramFolders: { 'telegram:7': [{ id: 3, name: 'Work', members: ['102'] }, { id: 2, name: 'Bots', members: ['201', '101'] }] } })`)
await sleep(400)
h = await headings()
check('what Telegram says is what is drawn', h.find((x) => x.head === 'Work')?.rows.length === 1 && h.find((x) => x.head === 'Bots')?.rows.length === 2)
// A folder added on another of the account's apps turns up.
await ev(`window.__mohoShots.patch({ telegramFolders: { 'telegram:7': [{ id: 3, name: 'Work', members: ['102'] }, { id: 2, name: 'Bots', members: ['201', '101'] }, { id: 4, name: 'Family', members: ['103'] }] } })`)
await sleep(400)
h = await headings()
check('a folder made on another device turns up as a category', h.some((x) => x.head === 'Family' && x.rows.length === 1))
// The order, by dragging a heading.
await ev(`(async () => {
const heads = [...document.querySelectorAll('.bufferlist .category-head')]
const from = heads.find((e) => e.textContent.includes('Family'))
const to = heads.find((e) => e.textContent.includes('Work'))
const dt = new DataTransfer()
const wait = () => new Promise((r) => setTimeout(r, 120))
from.dispatchEvent(new DragEvent('dragstart', { bubbles: true, dataTransfer: dt }))
await wait()
to.dispatchEvent(new DragEvent('dragenter', { bubbles: true, cancelable: true, dataTransfer: dt }))
to.dispatchEvent(new DragEvent('dragover', { bubbles: true, cancelable: true, dataTransfer: dt }))
await wait()
to.dispatchEvent(new DragEvent('drop', { bubbles: true, cancelable: true, dataTransfer: dt }))
from.dispatchEvent(new DragEvent('dragend', { bubbles: true, dataTransfer: dt }))
})()`)
await sleep(400)
const reordered = await ev(`window.__calls.filter((c) => c[0] === 'reorderTelegramFolders')`)
check('dragging a heading puts the folders in that order on Telegram', reordered.length >= 1 && JSON.stringify(reordered.at(-1)) === JSON.stringify(['reorderTelegramFolders', 'telegram:7', [4, 3, 2]]), JSON.stringify(reordered))
// A new category is only drawn until a conversation is put in it. (A click with a mouse takes focus off the message
// box; these do not, and the menu would give it back to the box as it closed, taking it from the name field.)
await ev(`document.activeElement?.blur()`)
await ev(`(() => { const t = [...document.querySelectorAll('.bufferlist button')].find((b) => b.textContent.includes('Telegram - me')); t && t.click() })()`)
await sleep(300)
await ev(`(() => { const i = [...document.querySelectorAll('.context-menu button, .context-menu [role=menuitem]')].find((e) => e.textContent.includes('New category')); i && i.click() })()`)
await sleep(100)
h = await headings()
const naming = await ev(`!!document.querySelector('.category-name-field')`)
console.log('naming field right after:', naming, JSON.stringify(h.map((x) => x.head)))
check('a new category is drawn where it was asked for, empty', naming || h.some((x) => x.head === 'New category' && x.rows.length === 0))
check('and nothing has been asked of Telegram', !(await ev(`window.__calls.some((c) => c[0] === 'createTelegramFolder')`)))
// Named by typing over the name it opened with.
if (naming) {
await ev(`(() => { const inp = document.querySelector('.category-name-field'); const set = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set; set.call(inp, 'Raiders'); inp.dispatchEvent(new Event('input', { bubbles: true })); inp.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })) })()`)
await sleep(300)
}
h = await headings()
console.log(JSON.stringify(h.map((x) => x.head)))
await shot('telegram-folders-new.png')
const pendingName = h.find((x) => x.head === 'Raiders') ? 'Raiders' : 'New category'
await drag('Carol', pendingName)
const made = await ev(`window.__calls.filter((c) => c[0] === 'createTelegramFolder')`)
check('the first conversation put in it makes it a folder', made.length === 1 && made[0][1] === 'telegram:7|Carol' && made[0][2] === pendingName, JSON.stringify(made))
// Rename and delete, from the heading's menu.
const menu = async (head, label) => {
await ev(`(() => { const e = [...document.querySelectorAll('.bufferlist .category-head')].find((x) => x.textContent.includes(${JSON.stringify(head)})); e.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, cancelable: true, clientX: 100, clientY: 100 })) })()`)
await sleep(300)
await ev(`(() => { const i = [...document.querySelectorAll('.context-menu button, .context-menu [role=menuitem]')].find((e) => e.textContent.includes(${JSON.stringify(label)})); i && i.click() })()`)
await sleep(300)
}
await menu('Bots', 'Remove')
check('removing a category deletes the folder on Telegram', JSON.stringify(await ev(`window.__calls.filter((c) => c[0] === 'deleteTelegramFolder')`)) === JSON.stringify([['deleteTelegramFolder', 'telegram:7', 2]]))
await ev(`document.activeElement?.blur()`)
// Renamed: typed over as soon as the field is there (a window that is not focused takes it away again).
await ev(`(async () => {
const e = [...document.querySelectorAll('.bufferlist .category-head')].find((x) => x.textContent.includes('Work'))
e.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, cancelable: true, clientX: 100, clientY: 100 }))
await new Promise((r) => setTimeout(r, 200))
const i = [...document.querySelectorAll('.context-menu button, .context-menu [role=menuitem]')].find((x) => x.textContent.includes('Rename'))
i.click()
await new Promise((r) => setTimeout(r, 30))
const inp = document.querySelector('.category-name-field')
if (!inp) return
const set = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set
set.call(inp, 'Job')
inp.dispatchEvent(new Event('input', { bubbles: true }))
inp.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
})()`)
await sleep(300)
const renamed = await ev(`window.__calls.filter((c) => c[0] === 'renameTelegramFolder')`)
check('renaming one renames the folder on Telegram', renamed.some((c) => c[1] === 'telegram:7' && c[2] === 3 && c[3] === 'Job'), JSON.stringify(renamed))
} finally {
await stop()
irc.close()
console.log(results.every(Boolean) ? 'ALL OK' : 'SOME FAILED')
process.exitCode = results.every(Boolean) ? 0 : 1
}
+4
View File
@@ -36,6 +36,9 @@ try {
const form = await ev(`(() => { const f = document.querySelector('.add-form'); return f ? f.innerText : '' })()`)
check('the form says where the api_id comes from', /my\.telegram\.org\/apps/.test(form), form.slice(0, 120))
check('it asks for the api_id, the api_hash and the phone number', /api_id/.test(form) && /api_hash/.test(form) && /Phone number/.test(form))
const qrDisabled = () => ev(`[...document.querySelectorAll('.add-form button')].find((b) => /QR code/.test(b.textContent))?.disabled`)
check('a QR code is offered as the other way in', (await qrDisabled()) !== undefined)
check('and waits for the api_id and the api_hash, which it needs, but not for a phone number', (await qrDisabled()) === true)
const disabled = () => ev(`[...document.querySelectorAll('.add-form button.primary')].find((b) => /Send the code/.test(b.textContent))?.disabled`)
check('nothing can be sent while the form is empty', (await disabled()) === true)
const fill = (placeholderOrLabel, value) => ev(`(() => {
@@ -48,6 +51,7 @@ try {
await fill('api_id', '12345')
await fill('api_hash', 'abcdef')
check('two of three are not enough', (await disabled()) === true)
check('the QR code needs only those two', (await qrDisabled()) === false)
await fill('Phone number', '+1 555 123 4567')
await sleep(200)
check('all three turn the button on', (await disabled()) === false)
+13 -3
View File
@@ -101,8 +101,18 @@ try {
const klipy = rows.find((r) => r.text.includes('klipy.com'))
check(!!klipy && klipy.videos.length === 0, 'a Klipy page nothing could read stays a link', JSON.stringify(klipy))
// The picker.
check(await page.evaluate('!!document.querySelector(\'button[title="GIFs"]\')'), 'a GIF button is offered where there is a Discord account')
// The picker. It is offered only where a GIF link shows as a picture - Discord, Matrix, Kick - and none of those can be
// stood up here, so the IRC account is shown to the window as a Matrix one: the picker appears, and what it sends still
// goes through the daemon to the fake IRC server.
check(!(await page.evaluate('!!document.querySelector(\'button[title="GIFs"]\')')), 'no GIF button on an IRC conversation, which would show a GIF link as a link')
await page.evaluate(`(() => {
const shots = window.__mohoShots
const s = shots.state()
const account = s.accounts.find((a) => a.id === s.buffers.find((b) => b.id === s.activeBufferId)?.accountId)
shots.patch({ accounts: s.accounts.map((a) => (a === account ? { ...a, service: 'matrix' } : a)) })
})()`)
await sleep(500)
check(await page.evaluate('!!document.querySelector(\'button[title="GIFs"]\')'), 'a GIF button is offered where a GIF link shows as a picture')
await page.evaluate(click('button[title="GIFs"]'))
await until(page, 'document.querySelector(".gif-picker")', 'the picker')
check((await page.evaluate('document.querySelectorAll(".gif-cell").length')) === 3, 'it lists what it was given')
@@ -117,7 +127,7 @@ try {
// Choosing one sends it - to IRC, the file, which anything can show as a link.
await page.evaluate(`document.querySelector('.gif-cell[title="cat dancing"]').click()`)
await sleep(1200)
check(sent.some((l) => /PRIVMSG #lobby :?http:\/\/127\.0\.0\.1:9\/a\.gif/.test(l)), 'choosing one sends the file to a service that is not Discord', JSON.stringify(sent))
check(sent.some((l) => /PRIVMSG #lobby :?http:\/\/127\.0\.0\.1:9\/a\.gif/.test(l)), 'choosing one sends the file to a service that is not Discord (here IRC\'s wire, dressed as Matrix)', JSON.stringify(sent))
check(!(await page.evaluate('!!document.querySelector(".gif-picker")')), 'and the picker closes')
} catch (e) {
console.log('FAIL', e.message)
+2 -2
View File
@@ -71,9 +71,9 @@ Exec=$BIN_DIR/$APP_ID.AppImage %U
Icon=$APP_ID
Terminal=false
Categories=Network;InstantMessaging;Chat;
# What makes an irc:// link in a browser offer moho at all. Exec already takes
# What makes an irc:// or tg:// (Telegram) link in a browser offer moho at all. Exec already takes
# %U, so the desktop has somewhere to put the URL once it decides to.
MimeType=x-scheme-handler/irc;x-scheme-handler/ircs;
MimeType=x-scheme-handler/irc;x-scheme-handler/ircs;x-scheme-handler/tg;
Keywords=chat;irc;discord;matrix;sneedchat;messaging;
StartupWMClass=moho
StartupNotify=true
+2 -1
View File
@@ -356,7 +356,8 @@ function wireEditMenu(win: BrowserWindow): void {
delete: f.canDelete,
selectAll: f.canSelectAll
},
hasSelection: params.selectionText.length > 0
hasSelection: params.selectionText.length > 0,
selection: params.selectionText.slice(0, 1000)
} satisfies EditMenuRequest)
})
}
+5
View File
@@ -6264,6 +6264,11 @@ video.lightbox-media {
overflow: hidden;
white-space: normal;
}
/* A held login is explained in full: the time it will connect is at the end. */
.account-detail.held {
-webkit-line-clamp: unset;
display: block;
}
/* --- presence on avatars ---------------------------------------------- */
+73 -2
View File
@@ -332,6 +332,7 @@ function AccountRow({ account }: { account: Account }): JSX.Element {
// What the daemon last said about why. Only meaningful while something is
// wrong, which is exactly when the state line alone explains nothing.
const detail = useConnectionDetail(account.id)
const held = account.service === 'discord' && !!detail?.startsWith('Holding the Discord connection')
const call = (method: string, params: Record<string, unknown>): void => {
void window.moho
@@ -353,7 +354,20 @@ function AccountRow({ account }: { account: Account }): JSX.Element {
<div className="small muted">
{serviceLabel(account.service)} · {account.state}
</div>
{detail && <div className="small muted ellipsis account-detail" title={detail}>{detail}</div>}
{detail && <div className={classes('small muted account-detail', held && 'held')} title={detail}>{detail}</div>}
{/* Held for having logged in too often (see nobilis's identify_budget): said in full, with the way past it. */}
{held && (
<div>
<button
type="button"
className="button subtle"
title="Many fresh logins can get an account flagged as spam by Discord. This one is counted."
onClick={() => call('connectDiscordAnyway', { accountId: account.id })}
>
Connect anyway
</button>
</div>
)}
</div>
<button
type="button"
@@ -981,6 +995,16 @@ function DiscordForm({ accountId }: { accountId?: string }): JSX.Element {
return (
<div className="add-form">
{/* Said before anything is entered, the way Dissent's README says it: this is the risk, and what moho does and does
not do about it. */}
{!accountId && (
<p className="small muted discord-risk" role="note">
Discord does not allow third-party clients, and an account using one can be flagged and logged out, or banned.
moho is careful - it says what it is, makes few requests, and will not send the first message to a server or a
person - but nothing it does can make that risk nothing. Use an account you can afford to lose, and see the
first message in each new place from Discord&apos;s own app.
</p>
)}
{!accountId && <TorSwitch service="discord" on={useTor} onChange={setUseTor} />}
<div className="setting-segmented">
<button
@@ -1496,6 +1520,8 @@ function TelegramForm({ onDone }: { onDone: () => void }): JSX.Element {
const [detail, setDetail] = useState('')
const [needs, setNeeds] = useState<{ step: 'code' | 'password'; hint?: string; error?: string } | null>(null)
const [typed, setTyped] = useState('')
/** A QR code to scan, and when it was drawn (Telegram renews it about every half minute). */
const [qr, setQr] = useState<{ path: string; at: number } | null>(null)
// Held in a ref as well: the first event can be handled before the render that follows the answer that started the
// sign-in. Nothing else is signing in from this form, so an event with no id known yet is this one's.
@@ -1512,12 +1538,18 @@ function TelegramForm({ onDone }: { onDone: () => void }): JSX.Element {
if (current.current && d.loginId !== current.current) return
if (e.event === 'telegramLoginStatus') {
setDetail(d.text || '')
} else if (e.event === 'telegramLoginQr') {
const q = e.data as { path?: string }
if (q.path) setQr({ path: q.path, at: Date.now() })
setDetail('')
} else if (e.event === 'telegramLoginNeeds') {
setQr(null)
setNeeds({ step: d.step ?? 'code', hint: d.hint ?? undefined, error: d.error ?? undefined })
setTyped('')
setDetail('')
} else if (e.event === 'telegramLoginResult') {
setNeeds(null)
setQr(null)
setId('')
setBusy(false)
setDetail('')
@@ -1555,6 +1587,21 @@ function TelegramForm({ onDone }: { onDone: () => void }): JSX.Element {
})
}
const beginQr = (): void => {
setBusy(true)
setDetail('')
setNeeds(null)
setQr(null)
current.current = ''
void window.moho
.rpc<{ loginId: string }>('addTelegramAccountQr', { apiId: apiId.trim(), apiHash: apiHash.trim(), useTor })
.then((r) => setId(r.loginId))
.catch((e: Error) => {
setBusy(false)
store.toast('error', e.message)
})
}
const send = (): void => {
const value = needs?.step === 'password' ? typed : typed.trim()
if (!value || !loginId || !needs) return
@@ -1568,10 +1615,31 @@ function TelegramForm({ onDone }: { onDone: () => void }): JSX.Element {
if (current.current) void window.moho.rpc('cancelTelegramLogin', { loginId: current.current }).catch(() => {})
setId('')
setNeeds(null)
setQr(null)
setDetail('')
setBusy(false)
}
if (qr && !needs) {
return (
<div className="add-form">
<p>Scan this with Telegram on your phone.</p>
<p className="small muted">
In the app, open Settings, then Devices, then Link Desktop Device, and point the phone at the code. The code
changes about every half minute, and the picture here changes with it. If the account has a cloud password,
it is asked for next.
</p>
<img className="qr-image" src={resolveMediaUrl(`file://${qr.path}#${qr.at}`)} alt="Telegram sign-in QR code" />
{detail && <p className="small muted">{detail}…</p>}
<div className="field-row">
<button type="button" className="button" onClick={cancel}>
Cancel sign-in
</button>
</div>
</div>
)
}
if (needs) {
const password = needs.step === 'password'
return (
@@ -1656,7 +1724,7 @@ function TelegramForm({ onDone }: { onDone: () => void }): JSX.Element {
</label>
</div>
<label className="field">
<span className="small muted">Phone number, with its country code</span>
<span className="small muted">Phone number, with its country code (not needed for a QR code)</span>
<input
className="text-field"
autoComplete="off"
@@ -1673,6 +1741,9 @@ function TelegramForm({ onDone }: { onDone: () => void }): JSX.Element {
<button type="button" className="button primary" disabled={busy || !ready} onClick={begin}>
{busy ? 'Signing in…' : 'Send the code'}
</button>
<button type="button" className="button" disabled={busy || apiId.trim() === '' || apiHash.trim() === ''} onClick={beginQr}>
Sign in with a QR code
</button>
{busy && (
<button type="button" className="button" onClick={cancel}>
Cancel
+69 -9
View File
@@ -12,6 +12,14 @@ import { presenceClass, presenceLabel } from '../lib/presence'
import { activityLabel, dmActivity } from '../lib/activity'
import { ActivityLine } from './ActivityLine'
import { steamCategoryId, parseSteamCategory } from '../lib/steamgroups'
import {
folderAssignment,
folderCategories,
folderOrder,
isPendingCategory,
parseTelegramCategory,
pendingCategoryId
} from '../lib/telegramfolders'
import { NamePrompt } from './NamePrompt'
import { useChat, useComfy, useIdSetPref, useInvitations, useMapPref, usePref, useStore } from '../state/hooks'
import {
@@ -170,6 +178,9 @@ export function BufferList(): JSX.Element {
const isDmPage = activeGroup?.id === DM_GROUP_ID
// A Steam account's own page: its friends sit under the folders Steam keeps for the account.
const steamPage = activeGroup?.kind === 'account' && accounts.find((a) => a.id === activeGroup.accountId)?.service === 'steam'
// A Telegram account's own page: its conversations sit under the chat folders the account keeps, which are kept in step
// with the categories both ways.
const telegramPage = activeGroup?.kind === 'account' && accounts.find((a) => a.id === activeGroup.accountId)?.service === 'telegram'
/**
* Whose identity the plaque shows.
*
@@ -264,8 +275,23 @@ export function BufferList(): JSX.Element {
: [],
[steamPage, activeGroup, steamGroups]
)
const myCategories = steamPage ? steamFolders : activeGroup ? (customCats[activeGroup.id] ?? []) : []
const telegramFolders = useChat((s) => s.telegramFolders)
/** Categories made on this page that are not Telegram folders yet: Telegram keeps no empty one. */
const [pendingFolders, setPendingFolders] = useState<CustomCategory[]>([])
const tgFolders = useMemo(() => (telegramPage && activeGroup ? (telegramFolders[activeGroup.accountId] ?? []) : []), [telegramPage, activeGroup, telegramFolders])
const myCategories = useMemo(
() =>
steamPage
? steamFolders
: telegramPage && activeGroup
? [...folderCategories(activeGroup.accountId, tgFolders), ...pendingFolders.filter((p) => p.id.startsWith(`tfnew:${activeGroup.accountId}:`))]
: activeGroup
? (customCats[activeGroup.id] ?? [])
: [],
[steamPage, steamFolders, telegramPage, activeGroup, tgFolders, pendingFolders, customCats]
)
const viewAssignment = useMemo(() => {
if (telegramPage && activeGroup) return folderAssignment(activeGroup.accountId, tgFolders, groupBuffers)
if (!steamPage || !activeGroup) return assignment
const folders = [...(steamGroups[activeGroup.accountId] ?? [])].sort((a, b) => a.id - b.id)
const next = { ...assignment }
@@ -276,16 +302,30 @@ export function BufferList(): JSX.Element {
else delete next[b.id]
}
return next
}, [steamPage, activeGroup, steamGroups, assignment, groupBuffers])
/** Files a conversation under a heading: on Steam for a Steam page, in the preferences for the rest. */
}, [steamPage, telegramPage, tgFolders, activeGroup, steamGroups, assignment, groupBuffers])
/** Files a conversation under a heading: on Steam for a Steam page, on Telegram for a Telegram one, in the preferences for the rest. */
const fileBuffer = (bufferId: string, categoryId: string): void => {
if (steamPage) store.moveSteamFriend(bufferId, parseSteamCategory(categoryId)?.groupId ?? null)
else setAssignment(bufferId, categoryId)
if (steamPage) {
store.moveSteamFriend(bufferId, parseSteamCategory(categoryId)?.groupId ?? null)
} else if (telegramPage) {
const pending = pendingFolders.find((p) => p.id === categoryId)
if (pending) {
// The first conversation in it is what makes it a folder on Telegram.
void store.createTelegramFolder(bufferId, pending.name).then((made) => {
if (made) setPendingFolders((list) => list.filter((p) => p.id !== categoryId))
})
} else {
store.fileTelegramChat(bufferId, parseTelegramCategory(categoryId)?.folderId ?? null)
}
} else {
setAssignment(bufferId, categoryId)
}
}
const grouped = useMemo(() => {
if (!activeGroup) return null
const list = sections(groupBuffers, myCategories, viewAssignment, categoryOrder[activeGroup.id] ?? [])
// Telegram's own order stands on its page: a heading dragged here is moved there, and comes back in that order.
const list = sections(groupBuffers, myCategories, viewAssignment, telegramPage ? [] : (categoryOrder[activeGroup.id] ?? []))
if (!isPinnedPage && !isDmPage) {
for (const s of list) {
s.buffers.sort((a, b) => (a.position || 0) - (b.position || 0))
@@ -295,7 +335,7 @@ export function BufferList(): JSX.Element {
// they just made it, and a heading that vanishes until something is put
// in it cannot have anything put in it.
return list.filter((s) => s.custom || s.buffers.length > 0)
}, [activeGroup, isPinnedPage, isDmPage, steamPage, groupBuffers, myCategories, viewAssignment, categoryOrder])
}, [activeGroup, isPinnedPage, isDmPage, steamPage, telegramPage, groupBuffers, myCategories, viewAssignment, categoryOrder])
// The menu still toggles a buffer's *own* flag independently of a muted
// rail entry above it, the same way muting a channel inside an
@@ -416,7 +456,7 @@ export function BufferList(): JSX.Element {
lifted={dragging?.kind === 'buffer' && dragging.id === b.id}
onDragStart={() => beginDrag('buffer', b.id)}
onDragEnd={endDrag}
filed={!!assignment[b.id] && myCategories.some((c) => c.id === assignment[b.id])}
filed={telegramPage ? !!viewAssignment[b.id] : !!assignment[b.id] && myCategories.some((c) => c.id === assignment[b.id])}
/>
)
@@ -463,7 +503,9 @@ export function BufferList(): JSX.Element {
if (!held || !grouped || !activeGroup) return
if (held.kind === 'category') {
if (held.id === section.key) return
setCategoryOrder(activeGroup.id, reorderCategories(grouped, held.id, section.key))
const order = reorderCategories(grouped, held.id, section.key)
if (telegramPage) store.reorderTelegramFolders(activeGroup.accountId, folderOrder(order))
else setCategoryOrder(activeGroup.id, order)
return
}
if (!section.custom) return
@@ -619,6 +661,14 @@ export function BufferList(): JSX.Element {
if (name && steamPage && activeGroup) {
const group = parseSteamCategory(naming.id)?.groupId
if (group !== undefined) store.renameSteamFolder(activeGroup.accountId, group, name)
} else if (name && telegramPage && activeGroup) {
// A category not yet a folder is only named; a folder is renamed on Telegram.
if (isPendingCategory(naming.id)) setPendingFolders((list) => list.map((p) => (p.id === naming.id ? { ...p, name } : p)))
else {
const folder = parseTelegramCategory(naming.id)?.folderId
// The same name is not a change: nothing is asked of Telegram.
if (folder !== undefined && name !== section.name) store.renameTelegramFolder(activeGroup.accountId, folder, name)
}
} else if (name) {
writeCategories(
myCategories.map((c) => (c.id === naming.id ? { ...c, name } : c))
@@ -750,6 +800,13 @@ export function BufferList(): JSX.Element {
setMakingFolder(true)
return
}
// On Telegram it is made there with its first conversation, so until then it is only drawn.
if (telegramPage) {
const id = pendingCategoryId(activeGroup.accountId)
setPendingFolders((list) => [...list, { id, name: 'New category' }])
setNaming({ id, name: 'New category' })
return
}
const id = `cat-${Date.now().toString(36)}`
// At the top, not the end. The command was given from the
// group's own title at the top of this list, and a heading
@@ -800,7 +857,10 @@ export function BufferList(): JSX.Element {
// to wherever the service filed them.
onClick: () => {
const group = parseSteamCategory(catMenu.section.key)
const folder = parseTelegramCategory(catMenu.section.key)
if (steamPage && activeGroup && group) store.deleteSteamFolder(activeGroup.accountId, group.groupId)
else if (telegramPage && activeGroup && isPendingCategory(catMenu.section.key)) setPendingFolders((list) => list.filter((p) => p.id !== catMenu.section.key))
else if (telegramPage && activeGroup && folder) store.deleteTelegramFolder(activeGroup.accountId, folder.folderId)
else writeCategories(myCategories.filter((c) => c.id !== catMenu.section.key))
}
}
+43 -10
View File
@@ -1,6 +1,6 @@
import { FormatBar } from './FormatBar'
import { formatsFor, serialize, type FormatKind } from '../lib/composeFormat'
import { applyFormat } from '../lib/composeFormatDom'
import { applyFormat, restoreSelectionAfterHistory } from '../lib/composeFormatDom'
import { useMediaUrl } from '../lib/route'
import { useEffect, useMemo, useRef, useState } from 'react'
import { Icon, IconButton, MaskIcon } from './Icon'
@@ -10,6 +10,7 @@ import { PollComposer } from './PollComposer'
import { Avatar } from './Avatar'
import { COMMON_EMOJI, emojiToken, EmojiPicker, type StickerEntry } from './EmojiPicker'
import { GifPicker } from './GifPicker'
import { ReplyBody } from './ReplyBody'
import { PlaceField } from './PlaceField'
import { VoiceRecorder } from './VoiceRecorder'
import { useActiveBuffer, useChat, useStore } from '../state/hooks'
@@ -51,6 +52,9 @@ interface StagedAttachment {
*/
const TYPING_REPEAT_MS = 4000
/** The services whose conversations can take a GIF: the picker sends a link, and these show it as the picture. */
const GIF_SERVICES = new Set(['discord', 'matrix', 'kick'])
/**
* What the box holds, as the text that will be sent.
*
@@ -136,6 +140,7 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
const [stickers, setStickers] = useState<StickerEntry[]>([])
const [stickerPicker, setStickerPicker] = useState(false)
const [gifPicker, setGifPicker] = useState(false)
const [discordTyping] = usePref<boolean>('discord.sendTyping', false)
/**
* What to do with files dropped on the window: they land in the tray, to be
* looked over and sent with the next message rather than going out on the
@@ -242,7 +247,7 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
const route = useChat((s) => s.route)
const routed = tunnelAll || !!account?.useTor
const media = useMediaUrl(account?.id)
const hasStickers = service === 'matrix' || service === 'discord' || service === 'steam'
const hasStickers = service === 'matrix' || service === 'discord' || service === 'steam' || service === 'telegram'
const formats = formatsFor(service)
/**
* The account's stickers, asked for when the picker opens - from either
@@ -252,7 +257,16 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
const loadStickers = (): void => {
if (!hasStickers || !buffer) return
void window.moho
.rpc<StickerEntry[]>(service === 'discord' ? 'listDiscordStickers' : service === 'steam' ? 'listSteamStickers' : 'listMatrixStickers', { bufferId: buffer.id })
.rpc<StickerEntry[]>(
service === 'discord'
? 'listDiscordStickers'
: service === 'steam'
? 'listSteamStickers'
: service === 'telegram'
? 'listTelegramStickers'
: 'listMatrixStickers',
{ bufferId: buffer.id }
)
.then(setStickers)
.catch(() => setStickers([]))
}
@@ -445,6 +459,9 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
* it on services with no such notion, so there is nothing to check here.
*/
const noteTyping = (): void => {
// Not on Discord unless asked for: its own clients send it, but a third-party client that does is one more thing
// Discord can tell it apart by, and Dissent does without it altogether. A setting in Settings > Discord.
if (service === 'discord' && !discordTyping) return
const now = Date.now()
if (now - typingSentAt.current < TYPING_REPEAT_MS) return
typingSentAt.current = now
@@ -874,6 +891,8 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
// A channel's comments are written to its discussion group, which the channel's own lock says nothing about.
if (buffer.readOnly && !(thread && service === 'telegram')) {
const official = buffer.readOnly.includes('official Discord')
// Discord's first-word lock: the daemon opens it by itself once the account has spoken there.
const firstWord = buffer.readOnly.includes("Discord's own app")
return (
<div className="composer">
<div className="divider-h" />
@@ -884,6 +903,7 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
{official && (
<span className="small">Discord will never ask you for your password or account token.</span>
)}
{firstWord && <span className="small">moho notices when you have, and opens this up by itself.</span>}
</div>
</div>
</div>
@@ -1036,7 +1056,14 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
{repliedTo?.avatarUrl && <img className="reply-avatar" src={media(repliedTo.avatarUrl)} alt="" />}
<span className="ellipsis">
Replying to <strong>{replyingTo.from}</strong>
{replyingTo.body ? <span className="muted">{`: ${replyingTo.body}`}</span> : ''}
{replyingTo.body ? (
<span className="muted">
{': '}
<ReplyBody text={replyingTo.body} service={service} />
</span>
) : (
''
)}
</span>
{/* Whether the one answered is told, as Discord's own bar has it.
Only there: nothing else here can say it. */}
@@ -1178,6 +1205,7 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
aria-multiline="true"
aria-label={thread ? 'Reply in thread' : `Message ${bufferDisplayName(buffer.name)}`}
onInput={(e) => {
restoreSelectionAfterHistory(e.currentTarget, (e.nativeEvent as InputEvent).inputType)
setText(composerText(e.currentTarget))
noteTyping()
noteMention()
@@ -1343,10 +1371,12 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
<Icon name="mood" size={18} />
</button>
{/* GIFs, wherever there is a Discord account to ask for them: the
picker borrows that account's way of looking, and what it finds can
be sent in any conversation - except Twitch's, whose chat takes no pictures. */}
{!thread && service !== 'steam' && service !== 'twitch' && accounts.some((a) => a.service === 'discord') && (
{/* GIFs, wherever there is a Discord account to ask for them: the picker borrows that account's way of looking.
What it finds is sent as a link, so it is offered only on the services that show a link to one as a picture
(GIF_SERVICES): not IRC, Steam, Twitch or Sneedchat, which take none. Telegram has GIFs of its own - the account's
saved ones and Telegram's GIF search - and gets the picker with those, asking Telegram rather than Discord. A service not on the list is
one nobody has checked, and gets no button. */}
{!thread && ((GIF_SERVICES.has(service ?? '') && accounts.some((a) => a.service === 'discord')) || service === 'telegram') && (
<button
ref={gifButtonRef}
type="button"
@@ -1366,7 +1396,7 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
gesture: an emoji goes into the line being written and a sticker
is the message. Only where the service has them: Matrix, where a
pack supplies them, and Discord, where each guild has its own. */}
{!thread && (service === 'matrix' || service === 'discord' || service === 'steam') && (
{!thread && hasStickers && (
<button
ref={stickerButtonRef}
type="button"
@@ -1426,6 +1456,7 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
bufferId={buffer.id}
accountId={buffer.accountId}
discord={service === 'discord'}
telegram={service === 'telegram'}
onClose={() => setGifPicker(false)}
/>
)}
@@ -1450,7 +1481,9 @@ export function Composer({ thread = false }: { thread?: boolean } = {}): JSX.Ele
const sent =
service === 'steam'
? window.moho.rpc('sendSteamSticker', { bufferId: buffer.id, name: sticker.name })
: sticker.id
: service === 'telegram'
? window.moho.rpc('sendTelegramSticker', { bufferId: buffer.id, id: sticker.id })
: sticker.id
? window.moho.rpc('sendDiscordSticker', { bufferId: buffer.id, stickerId: sticker.id })
: window.moho.rpc('sendMatrixSticker', { bufferId: buffer.id, mxc: sticker.mxc, body: sticker.body })
void sent.catch((e: Error) => store.toast('error', e.message))
+16
View File
@@ -1,6 +1,8 @@
import { useEffect, useRef, useState } from 'react'
import { ContextMenu, type MenuEntry } from './ContextMenu'
import type { EditAction, EditMenuRequest } from '../../../shared/ipc'
import { usePref } from '../state/hooks'
import { DEFAULT_SEARCH_ENGINE, engineName, searchUrl, shortened } from '../lib/searchengines'
/**
* The right-click menu for anywhere text is typed: the message box, and every
@@ -14,6 +16,8 @@ import type { EditAction, EditMenuRequest } from '../../../shared/ipc'
export function EditMenu(): JSX.Element | null {
const [menu, setMenu] = useState<EditMenuRequest | null>(null)
const focus = useRef<{ element: HTMLElement | null; range: Range | null }>({ element: null, range: null })
const [searchEngine] = usePref<string>('search.engine', DEFAULT_SEARCH_ENGINE)
const [searchCustom] = usePref<string>('search.customUrl', '')
useEffect(
() =>
@@ -79,6 +83,18 @@ export function EditMenu(): JSX.Element | null {
{ separator: true },
{ label: 'Select all', icon: 'select_all', disabled: !menu.can.selectAll, onClick: act('selectAll') }
)
// Looking up what is selected, in the browser the person already uses.
const address = searchUrl(menu.selection ?? '', searchEngine, searchCustom)
if (address) {
entries.push(
{ separator: true },
{
label: `Search ${engineName(searchEngine, searchCustom)} for “${shortened(menu.selection)}”`,
icon: 'search',
onClick: () => void window.moho.openExternal(address)
}
)
}
return <ContextMenu x={menu.x} y={menu.y} entries={entries} onClose={() => setMenu(null)} />
}
+10 -2
View File
@@ -43,6 +43,7 @@ export function GifPicker({
bufferId,
accountId,
discord,
telegram,
onClose
}: {
anchor: HTMLElement | null
@@ -50,6 +51,8 @@ export function GifPicker({
accountId: string
/** Whether the conversation is on Discord, which decides what is sent. */
discord: boolean
/** Whether the conversation is on Telegram, which has GIFs of its own: the account's saved ones, and its GIF search. */
telegram?: boolean
onClose: () => void
}): JSX.Element {
const store = useStore()
@@ -116,7 +119,7 @@ export function GifPicker({
const wait = setTimeout(
() => {
window.moho
.rpc<{ gifs: GifEntry[]; categories: GifCategory[] }>('listGifs', { query: query.trim() })
.rpc<{ gifs: GifEntry[]; categories: GifCategory[] }>(telegram ? 'listTelegramGifs' : 'listGifs', telegram ? { bufferId, query: query.trim() } : { query: query.trim() })
.then((answer) => {
if (!current) return
setGifs(answer.gifs)
@@ -135,10 +138,15 @@ export function GifPicker({
current = false
clearTimeout(wait)
}
}, [query])
}, [query, telegram, bufferId])
const pick = (gif: GifEntry): void => {
onClose()
// Telegram's are files on Telegram: sending one is sending that file, not a link to it.
if (telegram) {
void window.moho.rpc('sendTelegramGif', { bufferId, id: gif.id }).catch((e: Error) => store.toast('error', e.message))
return
}
// Discord's own client sends the link, which Discord turns into the GIF.
// Everything else is sent the file, since a page address would be only
// that.
@@ -321,6 +321,15 @@ export function MessageList(): JSX.Element {
const scrollRef = useRef<HTMLDivElement>(null)
const contentRef = useRef<HTMLDivElement>(null)
const [anchored, setAnchored] = useState(true)
// Read as far as the newest line, while it is on screen at the bottom of a window that is looked at: a moment after
// it arrives, so one that is scrolled past at once is not reported as read.
const newestId = messages[messages.length - 1]?.id
useEffect(() => {
if (!anchored || !newestId) return
const timer = setTimeout(() => store.ackIfReading(bufferId), 1500)
return () => clearTimeout(timer)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [anchored, newestId, bufferId])
const [missedCount, setMissedCount] = useState(0)
/** How many of the newest messages are built as rows. */
const [shown, setShown] = useState(RENDER_WINDOW)
+30 -3
View File
@@ -15,7 +15,9 @@ import { COMMON_EMOJI, EmojiPicker, readRecent, type StickerEntry } from './Emoj
import { reactionLabel, reactorsSentence } from '../lib/reactions'
import { UploadMeter } from './UploadMeter'
import { RichText } from '../lib/richtext'
import { ReplyBody } from './ReplyBody'
import { useChat, usePref, useStore } from '../state/hooks'
import { DEFAULT_SEARCH_ENGINE, engineName, searchUrl, shortened } from '../lib/searchengines'
import { useTick } from '../lib/clock'
import { useSniffedTypes, sniffUrl } from '../lib/sniff'
import { useMediaUrl, useStrictRoute } from '../lib/route'
@@ -381,6 +383,9 @@ function MessageRowBody({
const twitchModerator = useChat((s) => s.twitchRights[bufferId] === true)
const twitchBlocker = useChat((s) => s.accounts.find((a) => bufferId.startsWith(`${a.id}|`))?.moderation === true)
const original = useChat((s) => (replyId ? s.messagesByBuffer[bufferId]?.find((m) => m.id === replyId) : undefined))
// What a reply quotes. Twitch sends the parent's words as plain text, with no word of which are emotes; where the
// original is on screen it has them, as it was drawn, so that is what is quoted.
const quoted = service === 'twitch' && original?.body ? original.body : message.replyTo?.body ?? ''
// Which message is open for editing is the window's, not each row's, so
// Up arrow in the message box can open the last one.
const editing = useChat((s) => s.editingId === message.id)
@@ -567,6 +572,12 @@ function MessageRowBody({
// have let go of the selection.
const selectedRef = useRef('')
const selected = selectedRef.current
const [searchEngine] = usePref<string>('search.engine', DEFAULT_SEARCH_ENGINE)
const [searchCustom] = usePref<string>('search.customUrl', '')
const searchAddress = selected ? searchUrl(selected, searchEngine, searchCustom) : null
const search = searchAddress
? { url: searchAddress, name: engineName(searchEngine, searchCustom), shown: shortened(selected) }
: null
const canOpenProfile = !!message.from && !isSystem && !message.isOwn
const openProfile = (): void => store.showProfile(bufferId, message.from, message.senderId)
// Back to what this answers, bringing it into view first if it is a long
@@ -618,6 +629,12 @@ function MessageRowBody({
...(selected
? ([{ label: 'Copy', icon: 'content_copy', onClick: () => void window.moho.copyText(selected) }] as MenuEntry[])
: []),
// Looking up what is selected: in the browser the person already uses, with
// the engine they chose in Settings. Only for a selection - there is no
// sensible thing to search for in a whole message.
...(search
? ([{ label: `Search ${search.name} for “${search.shown}”`, icon: 'search', onClick: () => void window.moho.openExternal(search.url) }] as MenuEntry[])
: []),
...(message.body && !isSystem
? ([{ label: 'Copy text', icon: 'content_copy', onClick: () => void window.moho.copyText(message.body) }] as MenuEntry[])
: []),
@@ -1086,7 +1103,11 @@ function MessageRowBody({
>
<Icon name="forum" size={13} />
<span>In thread</span>
{message.replyTo.body && <span className="ellipsis">{message.replyTo.body}</span>}
{message.replyTo.body && (
<span className="ellipsis">
<ReplyBody text={message.replyTo.body} service={service} channels={channels} />
</span>
)}
</button>
) : service === 'telegram' && message.replyTo.forwarded ? (
// Where a forwarded message came from, as Telegram says it: "Forwarded from" and the source, which is
@@ -1148,7 +1169,11 @@ function MessageRowBody({
{message.replyTo.chat && <Icon name="campaign" size={13} />}
{message.replyTo.from || 'Message'}
</div>
{message.replyTo.body && <div className="tg-quote-body">{message.replyTo.body}</div>}
{message.replyTo.body && (
<div className="tg-quote-body">
<ReplyBody text={message.replyTo.body} service={service} channels={channels} />
</div>
)}
<Icon name="format_quote" size={16} className="tg-quote-mark" />
</div>
) : (
@@ -1187,7 +1212,9 @@ function MessageRowBody({
>
{message.replyTo.from}
</span>
<span className="ellipsis">{message.replyTo.body}</span>
<span className="ellipsis">
<ReplyBody text={quoted} service={service} channels={channels} />
</span>
{/* Kick groups a chain of replies under the message it began
with; a reply is a way into that conversation. */}
{!inThread && message.replyTo.threadRoot && (
+18
View File
@@ -0,0 +1,18 @@
import { useMemo } from 'react'
import { RichText } from '../lib/richtext'
import { replyPreviewHtml } from '../lib/replypreview'
import { useChat, usePref } from '../state/hooks'
import type { ChannelIndex } from '../lib/format'
/**
* What a reply is answering, as words: the original's text drawn the way its own line is - its emotes, emoji and
* stickers as pictures, not as the codes they travel as.
*/
export function ReplyBody({ text, service, channels }: { text: string; service?: string; channels?: ChannelIndex }): JSX.Element {
const smilies = useChat((s) => s.smilieIndex)
const [ircColours] = usePref<boolean>('irc.renderColours', true)
const html = useMemo(() => replyPreviewHtml(text, { service, smilies, channels, ircColours }), [text, service, smilies, channels, ircColours])
// Ours: the markup is what the formatter built from the text, so the pictures it names are public emote and emoji
// addresses. A link is not followed from here, and a spoiler is not opened.
return <RichText html={html} ownMarkup onRevealSpoiler={() => {}} onOpenChannel={() => {}} onOpenLink={() => {}} />
}
@@ -6,6 +6,7 @@ import {
DirectorySetting,
SavedMark,
SettingsSection,
DropdownSetting,
SelectionSetting,
StringSetting,
ToggleSetting,
@@ -17,6 +18,7 @@ import { acceleratorLabel, acceleratorOf } from '../../lib/accelerator'
import { AccountsPanel } from '../AccountsPanel'
import { DownloadsPanel } from '../DownloadsPanel'
import { humanBytes } from '../../lib/util'
import { DEFAULT_SEARCH_ENGINE, SEARCH_ENGINES, validTemplate } from '../../lib/searchengines'
import { TunnelAllSwitch, useNetSettings } from './Tunnel'
import type { Account, DccPrefs } from '../../../../shared/wire'
@@ -846,6 +848,41 @@ function AppearanceSettings(): JSX.Element {
)
}
/**
* Which search engine "Search for…" uses on selected text. The search opens in
* the system's default browser, so moho sends the engine nothing itself - and
* neither Tor nor a proxy set up here applies to it.
*/
function SearchSettings(): JSX.Element {
const [engine] = usePref<string>('search.engine', DEFAULT_SEARCH_ENGINE)
const [custom] = usePref<string>('search.customUrl', '')
return (
<SettingsSection
title="Search"
description="Select text in a message, right-click it and search for it on the web. The search opens in your default browser, outside moho, so it does not go through Tor or a proxy set here."
>
<DropdownSetting
settingKey="search.engine"
label="Search engine"
defaultValue={DEFAULT_SEARCH_ENGINE}
options={SEARCH_ENGINES.map((e) => ({ label: e.label, value: e.id }))}
/>
{engine === 'custom' && (
<StringSetting
settingKey="search.customUrl"
label="Address"
description={
custom && !validTemplate(custom)
? 'Not usable yet: it has to start with http:// or https:// and contain %s where the search goes.'
: 'A web address with %s where the search goes, for example https://example.org/search?q=%s'
}
placeholder="https://example.org/search?q=%s"
/>
)}
</SettingsSection>
)
}
function GeneralSettings(): JSX.Element {
const [defaultDir, setDefaultDir] = useState('')
useEffect(() => {
@@ -891,6 +928,8 @@ function GeneralSettings(): JSX.Element {
/>
</SettingsSection>
<SearchSettings />
<SettingsSection title="Media">
<ToggleSetting
settingKey="media.autoplay"
@@ -1493,6 +1532,18 @@ function DiscordSettings(): JSX.Element {
}
return (
<>
<SettingsSection
title="Typing"
description="Discord's own apps tell others when you are typing. A client that is not Discord's own is told apart from them by exactly this kind of traffic, and accounts using one have been flagged, so moho does not send it unless you turn it on. You still see when other people are typing."
>
<ToggleSetting
settingKey="discord.sendTyping"
label="Tell others when I am typing"
description="Sends Discord's typing notice, at most once every eight seconds in a conversation."
defaultValue={false}
/>
</SettingsSection>
<SettingsSection
title="Scrollback"
description="Re-reads the last 50 messages of every Discord conversation on every account and stores any that are missing here. Nothing already stored is changed. A conversation takes about a third of a second, so a large account takes a few minutes."
@@ -1505,6 +1556,7 @@ function DiscordSettings(): JSX.Element {
</div>
{result && <p className="small muted">{result}</p>}
</SettingsSection>
</>
)
}
@@ -158,6 +158,40 @@ export function SelectionSetting({
)
}
/** A choice among too many to lay out as buttons: a drop-down of them. */
export function DropdownSetting({
settingKey,
label,
description,
defaultValue,
options
}: {
settingKey: string
label: string
description?: string
defaultValue: string
options: { label: string; value: string }[]
}): JSX.Element {
const [value, setValue] = usePref<string>(settingKey, defaultValue)
return (
<div className="setting-row">
<div className="setting-text">
<div>{label}</div>
{description && <div className="small muted">{description}</div>}
</div>
<div className="setting-actions">
<select className="text-field" value={value} aria-label={label} onChange={(e) => setValue(e.target.value)}>
{options.map((opt) => (
<option key={opt.value} value={opt.value}>
{opt.label}
</option>
))}
</select>
</div>
</div>
)
}
/**
* A folder chosen through the system picker, with the platform default shown
* (and used) until the user overrides it.
@@ -69,6 +69,21 @@ describe('serialising the box', () => {
})
})
describe('what the browser makes in the box', () => {
it('reads its own bold, italic, underline and strikethrough as ours', () => {
const made = box(el('B', [text('b')]), text(' '), el('I', [text('i')]), text(' '), el('U', [text('u')]), text(' '), el('STRIKE', [text('s')]))
expect(serialize(made, 'discord')).toBe('**b** *i* __u__ ~~s~~')
expect(serialize(made, 'sneedchat')).toBe('[b]b[/b] [i]i[/i] [u]u[/u] [s]s[/s]')
})
it('sees through the plain wrapper put round content when a format is taken off', () => {
const wrapped = box(el('SPAN', [text('one '), fmt('bold', [text('two')]), text(' three')], { plain: '' }))
expect(serialize(wrapped, 'discord')).toBe('one **two** three')
})
it('does not say bold twice for bold inside bold', () => {
expect(serialize(box(el('B', [fmt('bold', [text('x')])])), 'discord')).toBe('**x**')
})
})
describe('markup details', () => {
it('fences code with more backticks than it holds', () => {
expect(wrap('discord', 'code', 'a`b')).toBe('``a`b``')
@@ -0,0 +1,126 @@
// @vitest-environment happy-dom
import { describe, expect, it } from 'vitest'
import { textNodes, transformFormat } from './composeFormatDom'
import type { FormatKind } from './composeFormat'
/** What the box says, with the formats marked as they would be on Discord. */
function marked(root: Node): string {
const mark: Record<string, string> = { bold: '**', italic: '_', underline: '__', strike: '~~', code: '`', spoiler: '||', quote: '> ' }
return Array.from(root.childNodes)
.map((n) => {
if (n.nodeType === 3) return n.nodeValue
if (n instanceof HTMLElement && n.dataset.fmt === 'color') return `{${n.dataset.color}:${marked(n)}}`
if (n instanceof HTMLElement && n.dataset.fmt) return `${mark[n.dataset.fmt]}${marked(n)}${mark[n.dataset.fmt]}`
return marked(n)
})
.join('')
}
/** A box holding `html`, with `needle` selected in its text. */
function box(html: string, needle: string): { root: HTMLElement; range: Range } {
const root = document.createElement('div')
root.innerHTML = html
const nodes = textNodes(root)
const all = nodes.map((n) => n.nodeValue).join('')
const at = all.indexOf(needle)
expect(at).toBeGreaterThanOrEqual(0)
const locate = (offset: number, preferEnd: boolean): [Text, number] => {
let seen = 0
for (const n of nodes) {
const len = n.nodeValue!.length
if (preferEnd ? offset <= seen + len : offset < seen + len) return [n, offset - seen]
seen += len
}
throw new Error('outside')
}
const range = document.createRange()
range.setStart(...locate(at, false))
range.setEnd(...locate(at + needle.length, true))
return { root, range }
}
function run(html: string, needle: string, kind: FormatKind, colour?: string): { text: string; selected: string; done: boolean } {
const { root, range } = box(html, needle)
const done = transformFormat(root, range, kind, colour)
return { text: marked(root), selected: range.toString(), done }
}
const B = (s: string): string => `<span data-fmt="bold">${s}</span>`
describe('putting a format on', () => {
it('wraps the selection and leaves it selected', () => {
expect(run('one two three', 'two', 'bold')).toEqual({ text: 'one **two** three', selected: 'two', done: true })
})
it('makes a selection that is partly bold all bold, once', () => {
const r = run(`one ${B('two')} three four`, 'one two thr', 'bold')
expect(r.text).toBe('**one two thr**ee four')
expect(r.selected).toBe('one two thr')
})
it('joins a run that ends where the new one begins', () => {
expect(run(`${B('ab')}cd`, 'cd', 'bold').text).toBe('**abcd**')
expect(run(`ab${B('cd')}`, 'ab', 'bold').text).toBe('**abcd**')
})
it('stacks on another format without breaking it', () => {
const r = run('one <span data-fmt="italic">two three</span> four', 'three four', 'bold')
expect(r.text).toBe('one _two _**_three_ four**')
})
it('does nothing with nothing selected', () => {
const { root, range } = box('one two', 'two')
range.collapse(true)
expect(transformFormat(root, range, 'bold')).toBe(false)
expect(marked(root)).toBe('one two')
})
})
describe('taking a format off', () => {
it('takes it off a whole run', () => {
expect(run(`one ${B('two')} three`, 'two', 'bold')).toEqual({ text: 'one two three', selected: 'two', done: true })
})
it('takes it off part of a run and leaves the rest of the run bold', () => {
const r = run(`one ${B('two three')} four`, 'wo th', 'bold')
expect(r.text).toBe('one **t**wo th**ree** four')
expect(r.selected).toBe('wo th')
})
it('takes it off the end of a run', () => {
expect(run(`one ${B('two three')}`, 'three', 'bold').text).toBe('one **two **three')
})
it('takes it off from two runs side by side when all of the selection has it', () => {
expect(run(`${B('one')}${B('two')}`, 'netw', 'bold').text).toBe('**o**ne' + 'tw' + '**o**')
})
it('does not take it off a selection that reaches a space which is not bold: that is put on instead', () => {
expect(run(`${B('one')} ${B('two')}`, 'e t', 'bold').text).toBe('**one two**')
})
it('only the format asked for', () => {
const r = run('<span data-fmt="bold"><span data-fmt="italic">two</span></span>', 'two', 'bold')
expect(r.text).toBe('_two_')
})
})
describe('colour', () => {
it('puts a colour on, and a different one replaces it', () => {
const on = box('one two', 'two')
expect(transformFormat(on.root, on.range, 'color', '#ff0000')).toBe(true)
expect(marked(on.root)).toBe('one {#ff0000:two}')
expect(transformFormat(on.root, on.range, 'color', '#00ff00')).toBe(true)
expect(marked(on.root)).toBe('one {#00ff00:two}')
expect(transformFormat(on.root, on.range, 'color')).toBe(true)
expect(marked(on.root)).toBe('one two')
})
it('takes no colour that is not a plain hex value', () => {
expect(run('one two', 'two', 'color', 'red; background:url(x)').done).toBe(false)
})
it('has nothing to take off when there is no colour', () => {
expect(run('one two', 'two', 'color').done).toBe(false)
})
})
+314 -55
View File
@@ -1,68 +1,327 @@
import type { FormatKind } from './composeFormat'
/** The nearest enclosing element in the box that stands for `kind`, if any. */
function holderOf(node: Node | null, root: HTMLElement, kind: FormatKind): HTMLElement | null {
for (let n: Node | null = node; n && n !== root; n = n.parentNode) {
if (n instanceof HTMLElement && n.dataset.fmt === kind) return n
}
return null
}
/** Colours reach a style attribute, so only a plain hex value gets there. */
const HEX = /^#[0-9a-fA-F]{6}$/
const isRun = (node: Node | null): node is HTMLElement => node instanceof HTMLElement && node.dataset.fmt !== undefined
const isKind = (node: Node | null, kind: FormatKind): node is HTMLElement => isRun(node) && node.dataset.fmt === kind
const isMarker = (node: Node | null): boolean => node instanceof HTMLElement && node.dataset.mark !== undefined
const sameRun = (a: HTMLElement, b: HTMLElement): boolean => a.dataset.fmt === b.dataset.fmt && a.dataset.color === b.dataset.color
function nearestRun(from: Node, root: Node, kind: FormatKind): HTMLElement | null {
for (let n: Node | null = from.parentNode; n && n !== root; n = n.parentNode) {
if (isKind(n, kind)) return n
}
return null
}
function marker(which: 's' | 'e'): HTMLElement {
const m = document.createElement('i')
m.dataset.mark = which
return m
}
/**
* Applies a format to what is selected in the box, or takes it off again if
* the selection is exactly that format already. Returns whether it did
* anything.
*
* Goes through `insertHTML` rather than rearranging nodes, so the box's own
* undo still steps back over it.
* Takes a marker out of every run of `kind` around it, splitting each run in
* two at the marker. A start marker ends up in front of the second half and
* an end marker behind the first, so what lies between the two markers is
* never inside a run that reaches beyond it.
*/
export function applyFormat(root: HTMLElement, kind: FormatKind, colour?: string): boolean {
const selection = window.getSelection()
if (!selection || selection.rangeCount === 0) return false
const range = selection.getRangeAt(0)
if (range.collapsed || !root.contains(range.commonAncestorContainer)) return false
root.focus()
// The selection can be a whole formatted run (it is, right after one is
// applied, so another can be stacked on), which names the run's parent as
// its ancestor and the run itself only by position.
const whole =
range.startContainer === range.endContainer && range.endOffset - range.startOffset === 1
? range.startContainer.childNodes[range.startOffset]
: null
const holder = holderOf(whole ?? range.commonAncestorContainer, root, kind)
if (holder && (kind === 'color' ? !colour : holder.textContent === range.toString())) {
const around = document.createRange()
around.selectNode(holder)
selection.removeAllRanges()
selection.addRange(around)
document.execCommand('insertHTML', false, holder.innerHTML)
return true
function lift(root: Node, point: HTMLElement, kind: FormatKind, atStart: boolean): void {
for (let run = nearestRun(point, root, kind); run; run = nearestRun(point, root, kind)) {
const rest = document.createRange()
if (atStart) rest.setStartBefore(point)
else rest.setStartAfter(point)
rest.setEnd(run, run.childNodes.length)
const tail = run.cloneNode(false) as HTMLElement
tail.append(rest.extractContents())
run.after(tail)
if (atStart) tail.before(point)
else run.after(point)
}
if (kind === 'color' && !(colour && HEX.test(colour))) return false
}
const scratch = document.createElement('div')
scratch.appendChild(range.cloneContents())
const colourAttrs = kind === 'color' ? ` data-color="${colour}" style="color:${colour}"` : ''
document.execCommand(
'insertHTML',
false,
`<span data-fmt="${kind}"${colourAttrs} data-new="1">${scratch.innerHTML}</span>`
/** Every text node under `node`, in document order. */
export function textNodes(node: Node, into: Text[] = []): Text[] {
for (const child of Array.from(node.childNodes)) {
if (child.nodeType === 3) into.push(child as Text)
else textNodes(child, into)
}
return into
}
/** Text between two markers, in document order. */
function textBetween(root: Node, from: Node, to: Node): Text[] {
return textNodes(root).filter(
(n) =>
n.nodeValue &&
from.compareDocumentPosition(n) & Node.DOCUMENT_POSITION_FOLLOWING &&
to.compareDocumentPosition(n) & Node.DOCUMENT_POSITION_PRECEDING
)
// Left selected, so another format can be stacked on without selecting again.
const made = root.querySelector('[data-new]')
if (made) {
made.removeAttribute('data-new')
// The run itself rather than its contents: Chromium replaces the whole
// element when what is selected is all of what is inside it, which would
// swallow the format just applied.
const around = document.createRange()
around.selectNode(made)
selection.removeAllRanges()
selection.addRange(around)
}
function charactersBefore(root: Node, point: Node): number {
return textNodes(root).reduce((sum, n) => sum + (point.compareDocumentPosition(n) & Node.DOCUMENT_POSITION_PRECEDING ? n.nodeValue!.length : 0), 0)
}
/** The point in the text that `count` characters in: a start prefers the beginning of the next piece, an end the finish of the last. */
function place(root: Node, count: number, atStart: boolean): [Node, number] {
const text = textNodes(root)
let seen = 0
for (const n of text) {
const length = n.nodeValue!.length
if (atStart ? count < seen + length : count <= seen + length) return [n, count - seen]
seen += length
}
const last = text[text.length - 1]
return last ? [last, last.nodeValue!.length] : [root, 0]
}
function unwrap(run: HTMLElement): void {
run.replaceWith(...Array.from(run.childNodes))
}
/** Splits leave runs and wrappers with nothing in them; they would serialise as stray markers. */
function dropEmpty(parent: Node): void {
for (const child of Array.from(parent.childNodes)) {
if (child.nodeType === 3) {
if (!child.nodeValue) child.remove()
} else if (child instanceof HTMLElement && !isMarker(child)) {
dropEmpty(child)
if (!child.hasChildNodes() && child.nodeName !== 'BR' && child.nodeName !== 'IMG') child.remove()
}
}
}
/** Two runs of one format side by side are one run, or they would be marked up twice. Markers between them stay in order. */
function mergeRuns(parent: Node): void {
let child = parent.firstChild
while (child) {
if (isRun(child)) {
const between: Node[] = []
let next = child.nextSibling
while (next && (isMarker(next) || (next.nodeType === 3 && !next.nodeValue))) {
between.push(next)
next = next.nextSibling
}
if (isRun(next) && sameRun(child, next)) {
child.append(...between, ...Array.from(next.childNodes))
next.remove()
continue
}
}
child = child.nextSibling
}
for (const element of Array.from(parent.childNodes)) if (element instanceof HTMLElement && !isMarker(element)) mergeRuns(element)
}
/**
* The selection of `range` with `kind` put on - or taken off, if all of it
* already has it. Works on `root` (a copy of the box, in practice) and
* leaves `range` on the same text afterwards. False when there was nothing
* to do.
*
* Applying over text that is part bold makes all of it bold, once, and
* taking it off from the middle of a run leaves the rest of the run as it was;
* both come from cutting every run of the kind at the selection's ends first.
*/
export function transformFormat(root: HTMLElement, range: Range, kind: FormatKind, colour?: string): boolean {
if (kind === 'color' && colour && !HEX.test(colour)) return false
const start = marker('s')
const end = marker('e')
const atEnd = range.cloneRange()
atEnd.collapse(false)
atEnd.insertNode(end)
const atStart = range.cloneRange()
atStart.collapse(true)
atStart.insertNode(start)
const leave = (done: boolean): boolean => {
start.remove()
end.remove()
return done
}
if (textBetween(root, start, end).length === 0) return leave(false)
lift(root, end, kind, false)
lift(root, start, kind, true)
const text = textBetween(root, start, end)
const runs = Array.from(root.querySelectorAll<HTMLElement>(`[data-fmt="${kind}"]`)).filter(
(run) => start.compareDocumentPosition(run) & Node.DOCUMENT_POSITION_FOLLOWING && end.compareDocumentPosition(run) & Node.DOCUMENT_POSITION_PRECEDING
)
const covered = text.every((t) => {
for (let n: Node | null = t.parentNode; n && n !== root; n = n.parentNode) if (isKind(n, kind)) return true
return false
})
if (kind === 'color' && !colour) {
if (runs.length === 0) return leave(false)
}
// A colour is never toggled by choosing it again: a different one replaces.
const off = kind === 'color' ? !colour : covered
for (const run of runs) unwrap(run)
if (!off) {
const around = document.createRange()
around.setStartAfter(start)
around.setEndBefore(end)
const span = document.createElement('span')
span.dataset.fmt = kind
if (kind === 'color' && colour) {
span.dataset.color = colour
span.style.color = colour
}
span.append(around.extractContents())
around.insertNode(span)
}
dropEmpty(root)
mergeRuns(root)
// The markers say where the selection was, as a count of characters; the
// text nodes are about to be joined, and a count survives that.
const from = charactersBefore(root, start)
const to = charactersBefore(root, end)
start.remove()
end.remove()
root.normalize()
range.setStart(...place(root, from, true))
range.setEnd(...place(root, to, false))
return true
}
/** The formats the browser can make and unmake itself, and its name for each. */
const NATIVE: Partial<Record<FormatKind, string>> = { bold: 'bold', italic: 'italic', underline: 'underline', strike: 'strikeThrough' }
/** Where a point in the box is, by child positions from the box down, so it can be found again in a copy. */
function pathOf(root: Node, node: Node, offset: number): number[] {
const path = [offset]
for (let n: Node = node; n !== root; n = n.parentNode as Node) {
path.unshift(Array.prototype.indexOf.call((n.parentNode as Node).childNodes, n))
}
return path
}
function resolve(root: Node, path: number[]): [Node, number] {
let node = root
for (const index of path.slice(0, -1)) node = node.childNodes[index]
return [node, path[path.length - 1]]
}
/**
* Applies a format to what is selected in the box, or takes it off again if
* all of the selection already has it. Returns whether it did anything.
*
* The change is worked out on a copy of the box and put back by replacing the
* box's contents with one `insertHTML`, so it is a single step of the box's
* own undo - and so the browser's habit of keeping the formatting of what a
* replacement lands in cannot put back a format that was just taken off.
*/
export function applyFormat(root: HTMLElement, kind: FormatKind, colour?: string): boolean {
const native = NATIVE[kind]
if (native) {
// The browser's own bold, italic, underline and strikethrough: it knows how to take them off again from all of a
// selection, part of one or the whole box - the last of which the replacement below cannot do, because the
// browser keeps the formatting of what it replaces when that is everything in the box - and its undo steps over
// them and puts the selection back by itself. Serialising reads the elements it makes as it does ours.
root.focus()
document.execCommand('styleWithCSS', false, 'false')
return document.execCommand(native)
}
const before = root.innerHTML
const beforeSelection = currentSelection(root)
const selection = window.getSelection()
if (!selection || selection.rangeCount === 0) return false
const picked = selection.getRangeAt(0)
if (picked.collapsed || !root.contains(picked.commonAncestorContainer)) return false
root.focus()
const copy = root.cloneNode(true) as HTMLElement
// Content that begins with plain text is put in a wrapper of its own. The browser keeps the formatting of whatever
// it replaces when the replacement is text and the selection is everything inside one formatted run - so taking a
// format off all of the box put it straight back - and does not when the replacement starts with an element.
const wrapped = copy.firstChild?.nodeType === 3
const shift = (path: number[]): number[] => (wrapped ? [0, ...path] : path)
if (wrapped) {
const wrapper = document.createElement('span')
wrapper.dataset.plain = ''
wrapper.append(...Array.from(copy.childNodes))
copy.append(wrapper)
}
const range = document.createRange()
range.setStart(...resolve(copy, shift(pathOf(root, picked.startContainer, picked.startOffset))))
range.setEnd(...resolve(copy, shift(pathOf(root, picked.endContainer, picked.endOffset))))
if (!transformFormat(copy, range, kind, colour)) return false
const start = pathOf(copy, range.startContainer, range.startOffset)
const end = pathOf(copy, range.endContainer, range.endOffset)
selection.selectAllChildren(root)
document.execCommand('insertHTML', false, copy.innerHTML)
// Left selected, so another format can be stacked on without selecting again.
select(root, { start, end })
if (beforeSelection) remember({ before, beforeSelection, after: root.innerHTML, afterSelection: { start, end } })
return true
}
interface Picked {
start: number[]
end: number[]
}
/** What the box held and had selected either side of a format, so undo and redo can put the selection back. */
interface Edit {
before: string
beforeSelection: Picked
after: string
afterSelection: Picked
}
const edits: Edit[] = []
function remember(edit: Edit): void {
edits.push(edit)
if (edits.length > 100) edits.shift()
}
function currentSelection(root: HTMLElement): Picked | null {
const selection = window.getSelection()
if (!selection || selection.rangeCount === 0) return null
const range = selection.getRangeAt(0)
if (!root.contains(range.startContainer) || !root.contains(range.endContainer)) return null
return { start: pathOf(root, range.startContainer, range.startOffset), end: pathOf(root, range.endContainer, range.endOffset) }
}
function select(root: HTMLElement, picked: Picked): void {
const selection = window.getSelection()
if (!selection) return
try {
const range = document.createRange()
range.setStart(...resolve(root, picked.start))
range.setEnd(...resolve(root, picked.end))
selection.removeAllRanges()
selection.addRange(range)
} catch {
/* the contents are not built the way they were; the caret is wherever the browser left it */
}
}
/**
* Undo and redo step over a format as the whole box being replaced, and the
* browser leaves everything selected afterwards - where the next key typed
* would replace the message. Called after either, this puts back the
* selection that was there at that point, when the box holds exactly what it
* held then.
*/
export function restoreSelectionAfterHistory(root: HTMLElement, inputType: string): void {
const undo = inputType === 'historyUndo'
if (!undo && inputType !== 'historyRedo') return
const now = root.innerHTML
for (let i = edits.length - 1; i >= 0; i--) {
const edit = edits[i]
if ((undo ? edit.before : edit.after) === now) {
select(root, undo ? edit.beforeSelection : edit.afterSelection)
return
}
}
}
+46
View File
@@ -0,0 +1,46 @@
import { describe, expect, it } from 'vitest'
import { replyPreviewHtml } from './replypreview'
describe('what a reply quotes, as words', () => {
it('draws a Kick emote as its picture, not its code', () => {
const html = replyPreviewHtml('[emote:5756632:SUSSY][emote:5756632:SUSSY]', { service: 'kick' })
expect(html).not.toContain('[emote:')
expect(html.match(/<img /g)).toHaveLength(2)
expect(html).toContain('alt=":SUSSY:"')
})
it('draws a Discord custom emoji', () => {
const html = replyPreviewHtml('nice <:pog:123456789012345678> and <a:spin:223456789012345678>', { service: 'discord' })
expect(html).not.toContain('&lt;:pog')
expect(html.match(/<img /g)).toHaveLength(2)
})
it('draws Twitch and Steam emotes and stickers', () => {
expect(replyPreviewHtml('[twitch:emote:25:Kappa] hi', { service: 'twitch' })).toMatch(/<img [^>]*alt="Kappa"/)
expect(replyPreviewHtml('[twitch:aemote:300:LUL]', { service: 'twitch' })).toContain('<img ')
expect(replyPreviewHtml('[steam:emote:steamhappy]', { service: 'steam' })).toContain('<img ')
})
it('draws a Sneedchat smilie when it is known', () => {
const smilies = { regex: /:smile:/, byAlias: { ':smile:': { url: 'x.png' } } } as never
expect(replyPreviewHtml(':smile: ok', { service: 'sneedchat', smilies })).toContain('<img src="x.png"')
})
it('leaves plain words plain, and escapes what is not markup', () => {
expect(replyPreviewHtml('just words', {})).toBe('just words')
expect(replyPreviewHtml('<img src=x onerror=alert(1)>', {})).not.toContain('<img')
})
it('shows a link as its words and keeps a spoiler hidden', () => {
const link = replyPreviewHtml('see https://example.org/page now', {})
expect(link).not.toContain('<a ')
expect(link).toContain('example.org/page')
const spoiler = replyPreviewHtml('||secret||', {})
expect(spoiler).toContain('spoiler')
expect(spoiler).not.toContain('revealed')
})
it('has nothing for nothing', () => {
expect(replyPreviewHtml('', {})).toBe('')
})
})
+27
View File
@@ -0,0 +1,27 @@
import { formatMessage, normalizeBBCode, type ChannelIndex, type SmilieIndex } from './format'
/**
* The words of a message as they read in the line that quotes it - the one above a reply, or in the bar over the
* box while one is being written.
*
* Those lines showed the original's text as it was stored, so an emote was its code (`[emote:5756632:SUSSY]`), a
* custom emoji its token, a Steam sticker its name in brackets. Run through the formatter every message is, they
* draw as what they are. What is left out is what a quote has no room or use for: a link is its words and not
* something to follow (the line is the way to the original), and a hidden spoiler stays hidden.
*/
export function replyPreviewHtml(
text: string,
options: { service?: string; smilies?: SmilieIndex | null; channels?: ChannelIndex | null; ircColours?: boolean } = {}
): string {
if (!text) return ''
const sneedchat = options.service === 'sneedchat'
const html = formatMessage(sneedchat ? normalizeBBCode(text) : text, {
isSneedchat: sneedchat,
smilies: options.smilies,
channels: options.channels,
markdownEscapes: options.service === 'discord',
ircFormatting: options.service === 'irc' && options.ircColours ? 'render' : 'strip'
})
// Anchors that are not spoilers: their words, with no link.
return html.replace(/<a href="(?!spoiler:)[^"]*"[^>]*>([\s\S]*?)<\/a>/g, '$1')
}
@@ -0,0 +1,68 @@
import { describe, expect, it } from 'vitest'
import { SEARCH_ENGINES, cleanQuery, engineName, searchUrl, shortened, validTemplate } from './searchengines'
describe('where a search goes', () => {
it('encodes the selection into the engine the person chose', () => {
expect(searchUrl('hello world & more', 'google')).toBe('https://www.google.com/search?q=hello%20world%20%26%20more')
expect(searchUrl('café', 'duckduckgo')).toBe('https://duckduckgo.com/?q=caf%C3%A9')
expect(searchUrl('x', 'yandex')).toBe('https://yandex.com/search/?text=x')
})
it('falls back to the first engine for one it does not know', () => {
expect(searchUrl('x', 'nonsense')).toBe(searchUrl('x', SEARCH_ENGINES[0].id))
})
it('has every engine ask for the query once', () => {
for (const e of SEARCH_ENGINES.filter((e) => e.id !== 'custom')) {
expect(e.template.split('%s')).toHaveLength(2)
expect(e.template.startsWith('https://')).toBe(true)
}
})
it('searches nothing for nothing', () => {
expect(searchUrl(' \n ', 'google')).toBeNull()
})
it('keeps a replacement pattern in the query as the text it is', () => {
expect(searchUrl('$& $1', 'google')).toBe('https://www.google.com/search?q=%24%26%20%241')
})
})
describe('the query', () => {
it('is one line, trimmed', () => {
expect(cleanQuery(' two\n\nlines\there ')).toBe('two lines here')
})
it('is cut short rather than sent whole', () => {
expect(cleanQuery('a'.repeat(1000)).length).toBe(300)
})
it('is shortened for a menu entry', () => {
expect(shortened('short')).toBe('short')
expect(shortened('a very long selected sentence that goes on and on')).toMatch(/^a very long.*…$/)
expect(shortened('a very long selected sentence that goes on and on').length).toBeLessThanOrEqual(28)
})
})
describe('an engine of the person’s own', () => {
it('needs a web address with a place for the query', () => {
expect(validTemplate('https://example.org/s?q=%s')).toBe(true)
expect(validTemplate('http://example.org/%s')).toBe(true)
expect(validTemplate('https://example.org/s')).toBe(false)
expect(validTemplate('javascript:alert(%s)')).toBe(false)
expect(validTemplate('file:///etc/passwd?%s')).toBe(false)
expect(validTemplate('')).toBe(false)
})
it('is used when valid and refuses to send anywhere when not', () => {
expect(searchUrl('a b', 'custom', 'https://example.org/s?q=%s')).toBe('https://example.org/s?q=a%20b')
expect(searchUrl('a b', 'custom', 'not a url')).toBeNull()
expect(searchUrl('a b', 'custom')).toBeNull()
})
it('is named by its host', () => {
expect(engineName('custom', 'https://www.example.org/s?q=%s')).toBe('example.org')
expect(engineName('custom', 'garbage')).toBe('the web')
expect(engineName('google', '')).toBe('Google')
})
})
+73
View File
@@ -0,0 +1,73 @@
/**
* The web search engines "Search for…" can send selected text to. Each is a
* template with `%s` where the (percent-encoded) query goes; the person picks
* one in Settings > General, or gives a template of their own.
*/
export interface SearchEngine {
id: string
label: string
/** Where the query goes; `%s` is replaced. Empty for the custom entry, whose template is the person's own. */
template: string
}
export const SEARCH_ENGINES: SearchEngine[] = [
{ id: 'duckduckgo', label: 'DuckDuckGo', template: 'https://duckduckgo.com/?q=%s' },
{ id: 'google', label: 'Google', template: 'https://www.google.com/search?q=%s' },
{ id: 'bing', label: 'Bing', template: 'https://www.bing.com/search?q=%s' },
{ id: 'brave', label: 'Brave Search', template: 'https://search.brave.com/search?q=%s' },
{ id: 'startpage', label: 'Startpage', template: 'https://www.startpage.com/do/search?q=%s' },
{ id: 'ecosia', label: 'Ecosia', template: 'https://www.ecosia.org/search?q=%s' },
{ id: 'qwant', label: 'Qwant', template: 'https://www.qwant.com/?q=%s' },
{ id: 'yandex', label: 'Yandex', template: 'https://yandex.com/search/?text=%s' },
{ id: 'kagi', label: 'Kagi', template: 'https://kagi.com/search?q=%s' },
{ id: 'custom', label: 'Other…', template: '' }
]
export const DEFAULT_SEARCH_ENGINE = 'duckduckgo'
/** The longest query sent: a whole pasted wall of text is not a search, and a URL has limits. */
const MAX_QUERY = 300
/** A custom template is usable if it is a web address with a place for the query. */
export function validTemplate(template: string): boolean {
return /^https?:\/\/[^\s%]+/i.test(template.trim()) && template.includes('%s')
}
/** What the person chose, as a template - or null if it is custom and not (yet) usable. */
function templateFor(engineId: string, custom: string): string | null {
const engine = SEARCH_ENGINES.find((e) => e.id === engineId) ?? SEARCH_ENGINES[0]
if (engine.id === 'custom') return validTemplate(custom) ? custom.trim() : null
return engine.template
}
/** The name shown on the menu entry: the engine's, or the custom address's host. */
export function engineName(engineId: string, custom: string): string {
const engine = SEARCH_ENGINES.find((e) => e.id === engineId) ?? SEARCH_ENGINES[0]
if (engine.id !== 'custom') return engine.label
try {
return new URL(custom.trim().replace('%s', 'x')).hostname.replace(/^www\./, '') || 'the web'
} catch {
return 'the web'
}
}
/** The query as it will be sent: one line, trimmed, and not absurdly long. */
export function cleanQuery(text: string): string {
const one = text.replace(/\s+/g, ' ').trim()
return one.length > MAX_QUERY ? one.slice(0, MAX_QUERY).trimEnd() : one
}
/** The address to open to search for `text`, or null if there is nothing to search for or nowhere to send it. */
export function searchUrl(text: string, engineId: string, custom = ''): string | null {
const query = cleanQuery(text)
const template = templateFor(engineId, custom)
if (!query || !template) return null
// Split rather than replaced: a `$&` in the query is not a replacement pattern.
return template.split('%s').join(encodeURIComponent(query))
}
/** A selection shortened to fit a menu entry. */
export function shortened(text: string, max = 28): string {
const one = cleanQuery(text)
return one.length > max ? `${one.slice(0, max - 1).trimEnd()}…` : one
}
@@ -0,0 +1,54 @@
import { describe, expect, it } from 'vitest'
import {
folderAssignment,
folderCategories,
folderOrder,
isPendingCategory,
parseTelegramCategory,
pendingCategoryId,
telegramCategoryId
} from './telegramfolders'
const folders = [
{ id: 3, name: 'Work', members: ['100', '101'] },
{ id: 2, name: 'Bots', members: ['101', '200'] }
]
describe('a Telegram folder as a category', () => {
it('is named by its account and folder, and read back', () => {
const id = telegramCategoryId('telegram:12345', 3)
expect(id).toBe('tf:telegram:12345:3')
expect(parseTelegramCategory(id)).toEqual({ accountId: 'telegram:12345', folderId: 3 })
expect(parseTelegramCategory('sg:steam:1:2')).toBeNull()
expect(parseTelegramCategory('tf:nonsense')).toBeNull()
})
it('keeps Telegram’s order and names', () => {
expect(folderCategories('telegram:1', folders)).toEqual([
{ id: 'tf:telegram:1:3', name: 'Work' },
{ id: 'tf:telegram:1:2', name: 'Bots' }
])
})
it('draws a conversation under the first folder that holds it', () => {
const got = folderAssignment('telegram:1', folders, [
{ id: 'a', remoteId: '100' },
{ id: 'b', remoteId: '101' },
{ id: 'c', remoteId: '200' },
{ id: 'd', remoteId: '999' },
{ id: 'e', remoteId: null }
])
expect(got).toEqual({ a: 'tf:telegram:1:3', b: 'tf:telegram:1:3', c: 'tf:telegram:1:2' })
})
it('turns the categories’ order into the folders’ numbers, leaving out what is not a folder', () => {
expect(folderOrder(['tf:telegram:1:2', 'svc:Groups', 'tfnew:telegram:1:x', 'tf:telegram:1:3'])).toEqual([2, 3])
})
it('knows a category that is not a folder yet', () => {
const id = pendingCategoryId('telegram:1')
expect(isPendingCategory(id)).toBe(true)
expect(parseTelegramCategory(id)).toBeNull()
expect(isPendingCategory('tf:telegram:1:2')).toBe(false)
})
})
+78
View File
@@ -0,0 +1,78 @@
import type { CustomCategory } from './categories'
/**
* Telegram's chat folders, as the categories of the account's page.
*
* A folder is a tab of chats on Telegram, and it is drawn here as a category with the conversations on the account's
* page that it holds. Both sides change the other: a folder made, renamed, deleted or reordered on Telegram turns up
* here, and the same done to a category here is done on Telegram. The daemon works out what each folder holds (a folder
* can take chats by kind - every bot, every group - as well as by name) and says it as the list of conversations; this
* only draws that, so what is shown is what Telegram says.
*
* A conversation is under one category here and can be in several folders there. It is drawn under the first folder,
* in Telegram's order, that holds it.
*/
export interface TelegramFolder {
id: number
name: string
emoticon?: string | null
/** The conversations it holds, by their Telegram ids (a conversation's `remoteId`). */
members: string[]
/** A folder shared by link: it has no rules and no exceptions. */
shared?: boolean
}
const PREFIX = 'tf:'
const PENDING = 'tfnew:'
/** The category that stands for one of an account's folders. Stable across renames. */
export function telegramCategoryId(accountId: string, folderId: number): string {
return `${PREFIX}${accountId}:${folderId}`
}
/** Which account and folder a category stands for, if it stands for one. */
export function parseTelegramCategory(id: string): { accountId: string; folderId: number } | null {
if (!id.startsWith(PREFIX)) return null
const rest = id.slice(PREFIX.length)
const colon = rest.lastIndexOf(':')
const folderId = Number(rest.slice(colon + 1))
return colon > 0 && Number.isInteger(folderId) ? { accountId: rest.slice(0, colon), folderId } : null
}
/**
* A category made here that is not a folder yet. Telegram keeps no empty folder, so it is made on Telegram when the
* first conversation is filed into it; until then it is only drawn.
*/
export function pendingCategoryId(accountId: string): string {
return `${PENDING}${accountId}:${Date.now().toString(36)}`
}
export function isPendingCategory(id: string): boolean {
return id.startsWith(PENDING)
}
/** The categories for an account's folders, in Telegram's order. */
export function folderCategories(accountId: string, folders: TelegramFolder[]): CustomCategory[] {
return folders.map((f) => ({ id: telegramCategoryId(accountId, f.id), name: f.name }))
}
/** Which category each conversation is drawn under: the first folder, in order, that holds it. */
export function folderAssignment(
accountId: string,
folders: TelegramFolder[],
buffers: { id: string; remoteId?: string | null }[]
): Record<string, string> {
const out: Record<string, string> = {}
for (const b of buffers) {
if (!b.remoteId) continue
const home = folders.find((f) => f.members.includes(b.remoteId!))
if (home) out[b.id] = telegramCategoryId(accountId, home.id)
}
return out
}
/** The folders' numbers in the order the categories are now drawn in. */
export function folderOrder(keys: string[]): number[] {
return keys.map((k) => parseTelegramCategory(k)?.folderId).filter((n): n is number => n !== undefined)
}
+32
View File
@@ -56,3 +56,35 @@ describe('scrolling to the top of a conversation', () => {
expect(rpc).toHaveBeenCalledTimes(2)
})
})
describe('a conversation whose service keeps its own unread count', () => {
it('starts the count from it when it first appears', () => {
// A conversation new to the window is subscribed to, which asks the daemon.
vi.stubGlobal('window', { moho: { rpc: vi.fn().mockResolvedValue(undefined) } })
const store = new ChatStore() as unknown as { state: { buffers: Record<string, unknown>[] }; handleBufferListChange: (data: unknown) => void }
store.handleBufferListChange({ id: 't|g:5', accountId: 't', kind: 'channel', name: 'Group/#Topic', lastActivityTs: 0, unreadSeed: 7, mentionsSeed: 2 })
const b = store.state.buffers.find((x) => x.id === 't|g:5')!
expect([b.unread, b.mentions, b.highlight]).toEqual([7, 2, true])
vi.unstubAllGlobals()
})
it('sets the count when the service moves it, and leaves it alone when it has not', () => {
const seeded = { unreadSeed: 7, mentionsSeed: 2, unread: 9, mentions: 3, highlight: true }
// Two more were heard since the service last said seven: not a change, so the window keeps counting.
let b = after({ unreadSeed: 7, mentionsSeed: 2 }, seeded)
expect([b.unread, b.mentions]).toEqual([9, 3])
// The service says it was all read elsewhere: the seed goes away and so does the count.
b = after({}, seeded)
expect([b.unread, b.mentions, b.highlight, b.unreadSeed]).toEqual([0, 0, false, 0])
// The service says there are now ten.
b = after({ unreadSeed: 10 }, seeded)
expect([b.unread, b.mentions, b.highlight]).toEqual([10, 0, false])
})
it('does not put a count on the conversation being read', () => {
const store = new ChatStore() as unknown as { state: { buffers: Record<string, unknown>[]; activeBufferId: string | null }; handleBufferListChange: (data: unknown) => void }
store.state = { ...store.state, activeBufferId: 'm|!r', buffers: [{ id: 'm|!r', accountId: 'm', kind: 'channel', name: '!r', lastActivityTs: 0, unread: 0, highlight: false, mentions: 0 }] }
store.handleBufferListChange({ id: 'm|!r', accountId: 'm', kind: 'channel', name: '!r', lastActivityTs: 0, unreadSeed: 4 })
expect(store.state.buffers[0].unread).toBe(0)
})
})
+163 -5
View File
@@ -25,6 +25,7 @@ import type {
import { addToast, type ToastAction, type ToastItem } from '../lib/toasts'
import { ALL_STATUSES, statusesFor, supportsStatus } from '../lib/status'
import type { SteamGroup, GroupCall } from '../lib/steamgroups'
import type { TelegramFolder } from '../lib/telegramfolders'
import { buildSmilieIndex, sneedSameText, steamSameText, type SmilieEntry, type SmilieIndex } from '../lib/format'
import { bufferDisplayName, isChatKind, isImageFile, resolveMediaUrl } from '../lib/util'
import { runExport } from '../lib/exporter'
@@ -738,6 +739,8 @@ export interface ChatState {
profile: Profile | null
/** Each Steam account's friend groups as Steam last said them; absent until it has. */
steamGroups: Record<string, SteamGroup[]>
/** Each Telegram account's chat folders as Telegram last said them, in its order; absent until it has. */
telegramFolders: Record<string, TelegramFolder[]>
replyingTo: { id: string; from: string; body: string } | null
/** Whether answering pings the author (Discord's "@ ON"): on for every new reply. */
replyPing: boolean
@@ -862,6 +865,7 @@ const INITIAL: ChatState = {
steamDialog: null,
profile: null,
steamGroups: {},
telegramFolders: {},
replyingTo: null,
replyPing: true,
editingId: '',
@@ -1047,6 +1051,24 @@ function canFetchAround(bufferId: string): boolean {
return bufferId.startsWith('discord:') || bufferId.startsWith('matrix:') || bufferId.startsWith('telegram:')
}
/**
* What a re-broadcast of a conversation does to its unread count: when the service's own count changed, the count is
* set to it, and otherwise it is left to follow the messages heard. A conversation being read is not given a count.
* The seeds are taken as sent, absent meaning none, since the daemon leaves a zero out.
*/
function seededCount(
before: BufferEntry,
data: WireBuffer,
active: string | null
): Pick<BufferEntry, 'unreadSeed' | 'mentionsSeed'> & Partial<Pick<BufferEntry, 'unread' | 'mentions' | 'highlight'>> {
const unreadSeed = data.unreadSeed ?? 0
const mentionsSeed = data.mentionsSeed ?? 0
const changed = unreadSeed !== (before.unreadSeed ?? 0) || mentionsSeed !== (before.mentionsSeed ?? 0)
if (!changed) return { unreadSeed, mentionsSeed }
if (data.id === active) return { unreadSeed, mentionsSeed }
return { unreadSeed, mentionsSeed, unread: unreadSeed, mentions: mentionsSeed, highlight: mentionsSeed > 0 }
}
function bestEffort(work: Promise<unknown>, what: string): void {
void work.catch((e: Error) => console.debug(`[moho] ${what}:`, e.message))
}
@@ -1349,6 +1371,12 @@ export class ChatStore {
this.set({ activeBufferId: initialBufferId, activeGroupId: initialGroupId })
void this.refreshNetSettings()
const looked = (): void => {
const id = this.ackPending
if (id && id === this.state.activeBufferId && this.windowIsActive()) bestEffort(this.ackRead(id), 'ack read')
}
window.addEventListener('focus', looked)
document.addEventListener('visibilitychange', looked)
void window.moho.popout.list().then((popouts) => this.set({ popouts }))
window.moho.popout.onChange((popouts) => this.set({ popouts }))
@@ -2220,6 +2248,12 @@ export class ChatStore {
return
}
// A Telegram link goes to wherever it points: the chat, joined if the account is not in it, and the post.
if (link.service === 'telegram') {
void this.openTelegramLink(link.url)
return
}
// A kick.com link names a streamer, and clicking one means both things:
// the stream goes to the browser, which is where video is watched, and
// the chat opens here, which is what this client is for. Doing only the
@@ -2277,6 +2311,36 @@ export class ChatStore {
this.awaitBuffer(existing.id, link.channels[0])
}
/**
* Follows a link to a Telegram chat or post, from a message or from the browser's "View in Telegram" button: the
* daemon finds (or joins) the chat, and this opens its conversation and goes to the post.
*
* With no Telegram account to open it in, a web address goes on to the browser as it would have, and an app link
* says what is missing.
*/
async openTelegramLink(url: string): Promise<void> {
const accounts = this.state.accounts.filter((a) => a.service === 'telegram')
if (accounts.length === 0) {
if (/^https?:/i.test(url)) void window.moho.openExternal(url)
else this.toast('info', 'Add a Telegram account to open that link here')
return
}
// Brought to the front by the click that came from the browser; a link followed in a message is already here.
this.set({ activePanel: '' })
try {
const where = await window.moho.rpc<{ accountId: string; bufferId: string; messageId: string | null }>('openTelegramLink', {
url,
// The account in front, when it is a Telegram one; otherwise the daemon takes the first that is connected.
accountId: accounts.find((a) => this.state.activeBufferId?.startsWith(`${a.id}|`))?.id
})
await this.refreshBuffers()
await this.selectBuffer(where.bufferId, true)
if (where.messageId && (await this.jumpToMessage(where.bufferId, where.messageId))) this.setJumpTarget(where.messageId)
} catch (e) {
this.toast('error', `Couldn't open that Telegram link: ${(e as Error).message}`)
}
}
/**
* Sends a private message to one person on Sneedchat.
*
@@ -2580,9 +2644,9 @@ export class ChatStore {
const wire = await window.moho.rpc<WireBuffer[]>('listBuffers')
const existing = new Map(this.state.buffers.map((b) => [b.id, b]))
const buffers = wire.map((b) => ({
unread: existing.get(b.id)?.unread ?? 0,
highlight: existing.get(b.id)?.highlight ?? false,
mentions: existing.get(b.id)?.mentions ?? 0,
unread: existing.get(b.id)?.unread ?? b.unreadSeed ?? 0,
highlight: existing.get(b.id)?.highlight ?? (b.mentionsSeed ?? 0) > 0,
mentions: existing.get(b.id)?.mentions ?? b.mentionsSeed ?? 0,
...b
}))
this.set({ buffers })
@@ -2605,6 +2669,29 @@ export class ChatStore {
// --- push events ----------------------------------------------------
/** The conversation to be told is read as soon as the window is looked at. */
private ackPending: string | null = null
/** When each conversation was last told it is read, so a busy one is told every few seconds and not every line. */
private ackedAt = new Map<string, number>()
/**
* What is on screen has been read to its end: the window is in front, the conversation is the open one, and the
* list is at its bottom (the caller says so). Told to the service, but not oftener than every few seconds - the
* newer of a run of messages covers the older - and never for a conversation that is not being looked at.
*/
ackIfReading(bufferId: string): void {
if (bufferId !== this.state.activeBufferId || !this.windowIsActive()) return
const now = Date.now()
if (now - (this.ackedAt.get(bufferId) ?? 0) < 5000) return
this.ackedAt.set(bufferId, now)
bestEffort(this.ackRead(bufferId), 'ack read')
}
private windowIsActive(): boolean {
return document.visibilityState === 'visible' && document.hasFocus()
}
/**
* Tells the service a conversation has been read.
*
@@ -2618,6 +2705,14 @@ export class ChatStore {
* leave a room read here unread on your phone forever.
*/
private async ackRead(bufferId: string): Promise<void> {
// Only what is being read. A window that is hidden, or is not the one in front, is not reading anything: a
// conversation opened at startup behind other windows, or selected from a notification, is not read by anybody.
// Said when the window is next looked at (`ackPending`), and only if that is still the conversation on screen.
if (!this.windowIsActive()) {
this.ackPending = bufferId
return
}
this.ackPending = null
const prefs = await window.moho.prefs.getAll()
await window.moho.rpc('markBufferRead', {
bufferId,
@@ -2757,6 +2852,57 @@ export class ChatStore {
}
}
/** Asks what folders a Telegram account has, for when it has just connected. */
loadTelegramFolders(accountId: string): void {
void window.moho
.rpc<TelegramFolder[]>('telegramFolders', { accountId })
.then((folders) => this.set({ telegramFolders: { ...this.state.telegramFolders, [accountId]: folders } }))
.catch(() => {})
}
/**
* Files a Telegram conversation under a folder, or under none: a change to the account on Telegram, out of the folder it
* is drawn under and into the one chosen. Nothing moves here until Telegram has agreed and said so.
*/
fileTelegramChat(bufferId: string, folderId: number | null): void {
void window.moho
.rpc('fileTelegramChat', { bufferId, folderId })
.catch((e: Error) => this.toast('error', `Telegram did not move the chat: ${e.message}`))
}
/**
* Makes a Telegram folder with one conversation in it, which is how a category made here comes to exist there: a
* folder needs a chat in it. Resolves when it is made.
*/
async createTelegramFolder(bufferId: string, name: string): Promise<boolean> {
try {
await window.moho.rpc('createTelegramFolder', { bufferId, name })
return true
} catch (e) {
this.toast('error', `Telegram did not make the folder: ${(e as Error).message}`)
return false
}
}
renameTelegramFolder(accountId: string, folderId: number, name: string): void {
void window.moho
.rpc('renameTelegramFolder', { accountId, folderId, name })
.catch((e: Error) => this.toast('error', `Telegram did not rename the folder: ${e.message}`))
}
/** Deletes a folder: the chats in it stay where they are, in whatever other folders they are in. */
deleteTelegramFolder(accountId: string, folderId: number): void {
void window.moho
.rpc('deleteTelegramFolder', { accountId, folderId })
.catch((e: Error) => this.toast('error', `Telegram did not delete the folder: ${e.message}`))
}
reorderTelegramFolders(accountId: string, order: number[]): void {
void window.moho
.rpc('reorderTelegramFolders', { accountId, order })
.catch((e: Error) => this.toast('error', `Telegram did not reorder the folders: ${e.message}`))
}
/**
* Whether an IRC account rejoins this channel when it connects.
*
@@ -3916,6 +4062,12 @@ export class ChatStore {
break
}
// Telegram says what folders an account has, or that they changed.
case 'telegramFolders': {
this.set({ telegramFolders: { ...this.state.telegramFolders, [data.accountId as string]: (data.folders ?? []) as TelegramFolder[] } })
break
}
case 'profile': {
const answer = data as unknown as Profile
const open = this.state.profile
@@ -4287,7 +4439,8 @@ export class ChatStore {
favourite: data.favourite ?? false,
lowPriority: data.lowPriority ?? false,
readOnly: data.readOnly,
forum: data.forum ?? false
forum: data.forum ?? false,
...seededCount(b, data, this.state.activeBufferId)
}
: b
)
@@ -4295,7 +4448,12 @@ export class ChatStore {
this.followPeekJoin(data)
return
}
this.set({ buffers: [...buffers, { unread: 0, highlight: false, mentions: 0, ...data }] })
this.set({
buffers: [
...buffers,
{ unread: data.unreadSeed ?? 0, highlight: (data.mentionsSeed ?? 0) > 0, mentions: data.mentionsSeed ?? 0, ...data }
]
})
// Filed under a rail entry this window has never been told of. An
// account's own entry is not announced when the account is made - the
// daemon lists one for every account when asked - so the first
@@ -38,6 +38,12 @@ export function useDmCategories(): void {
for (const id of connectedSteam.split(',').filter(Boolean)) store.loadSteamGroups(id)
}, [connectedSteam, store])
// The same for a Telegram account's folders, which the account's page draws as its categories.
const connectedTelegram = accounts.filter((a) => a.service === 'telegram' && a.state === 'connected').map((a) => a.id).join(',')
useEffect(() => {
for (const id of connectedTelegram.split(',').filter(Boolean)) store.loadTelegramFolders(id)
}, [connectedTelegram, store])
useEffect(() => {
if (!ready) return
// The account headings first, then the Steam groups on top of what they
+46
View File
@@ -0,0 +1,46 @@
import { describe, expect, it } from 'vitest'
import { isDeepLink, isTelegramLink, parseDeepLink } from './deeplink'
describe('a Telegram link', () => {
it('is what the View in Telegram button of a post opens, and what a message says', () => {
for (const url of [
'tg://resolve?domain=disclosetv&post=21953',
'https://t.me/disclosetv/21953',
'https://t.me/disclosetv',
'https://telegram.me/disclosetv/5',
'https://t.me/+AbC_d-123',
'https://t.me/joinchat/AbC_d-123',
'tg://join?invite=AbC_d-123',
'https://t.me/c/1234567/89',
'tg://privatepost?channel=1234567&post=89'
]) {
expect(isTelegramLink(url), url).toBe(true)
expect(isDeepLink(url), url).toBe(true)
expect(parseDeepLink(url)).toEqual({ service: 'telegram', url })
}
})
it('is not a page about something else, another host, or another tg: link', () => {
for (const url of [
'https://t.me/addstickers/Pack',
'https://t.me/s/disclosetv',
'https://t.me/proxy?server=a&port=1',
'https://t.me/',
'https://example.com/disclosetv/1',
'https://t.me.example.com/disclosetv/1',
'tg://login?token=abc',
'tg://resolve?domain=telegrampassport',
'tg://addstickers?set=x'
]) {
expect(isTelegramLink(url), url).toBe(false)
expect(isDeepLink(url), url).toBe(false)
}
})
it('does not turn an irc link into one, nor the other way round', () => {
expect(parseDeepLink('irc://irc.libera.chat/moho')?.service).toBe('irc')
expect(isDeepLink('irc://irc.libera.chat/moho')).toBe(true)
expect(parseDeepLink('tg://login?token=abc')).toBeNull()
expect(parseDeepLink('https://kick.com/xqc')?.service).toBe('kick')
})
})
+56 -4
View File
@@ -27,7 +27,16 @@ export interface KickLink {
handle: string
}
export type DeepLink = IrcLink | KickLink
/**
* A link to a Telegram chat or a post in one, as a `tg://` link (what the "View in Telegram" button on a web preview
* opens) or a t.me address in a message. The daemon reads it: this only recognises one, and passes it on whole.
*/
export interface TelegramLink {
service: 'telegram'
url: string
}
export type DeepLink = IrcLink | KickLink | TelegramLink
/**
* Schemes moho asks the desktop to send it.
@@ -36,12 +45,54 @@ export type DeepLink = IrcLink | KickLink
* link is an ordinary web address, and registering for `https` would mean
* volunteering to be the system browser.
*/
export const DEEP_LINK_SCHEMES = ['irc', 'ircs']
export const DEEP_LINK_SCHEMES = ['irc', 'ircs', 'tg']
/** Whether a string is a link this client would act on. */
export function isDeepLink(value: string): boolean {
const lower = value.toLowerCase()
return DEEP_LINK_SCHEMES.some((s) => lower.startsWith(`${s}:`)) || !!kickHandle(value)
return DEEP_LINK_SCHEMES.some((s) => lower.startsWith(`${s}:`)) ? isTelegramOrIrc(value) : !!kickHandle(value) || isTelegramLink(value)
}
/** A `tg:` link is only one of ours if it is a kind that opens a chat; the others (login, proxy, themes) are not. */
function isTelegramOrIrc(value: string): boolean {
return value.toLowerCase().startsWith('tg:') ? isTelegramLink(value) : true
}
/** Pages on t.me that are about something other than a chat. */
const TELEGRAM_PAGES = ['s', 'addstickers', 'addemoji', 'setlanguage', 'proxy', 'socks', 'share', 'login', 'iv', 'addtheme', 'bg', 'boost', 'm', 'addlist', 'invoice', 'giftcode', 'contact']
/**
* Whether a string is a link to a Telegram chat, a post, or a private invite: `tg://resolve`, `tg://privatepost`,
* `tg://join`, and t.me, telegram.me and telegram.dog addresses that name one. The same reading the daemon makes
* (nobilis backend/telegram/links.rs), which has the last word.
*/
export function isTelegramLink(value: string): boolean {
let url: URL
try {
url = new URL(value.trim())
} catch {
return false
}
if (url.protocol === 'tg:') {
const params = url.searchParams
if (url.hostname === 'resolve') {
const domain = params.get('domain') ?? ''
return /^[A-Za-z][A-Za-z0-9_]{4,31}$/.test(domain) && domain !== 'telegrampassport'
}
if (url.hostname === 'privatepost') return /^\d+$/.test(params.get('channel') ?? '')
if (url.hostname === 'join') return /^[A-Za-z0-9_-]+$/.test(params.get('invite') ?? '')
return false
}
if (!/^https?:$/.test(url.protocol)) return false
if (!['t.me', 'telegram.me', 'telegram.dog'].includes(url.hostname.replace(/^www\./, ''))) return false
const parts = url.pathname.split('/').filter(Boolean)
const first = parts[0]
if (!first) return false
if (first.startsWith('+')) return /^[A-Za-z0-9_-]+$/.test(first.slice(1))
if (first === 'joinchat') return /^[A-Za-z0-9_-]+$/.test(parts[1] ?? '')
if (first === 'c') return /^\d+$/.test(parts[1] ?? '')
if (TELEGRAM_PAGES.includes(first)) return false
return /^[A-Za-z][A-Za-z0-9_]{4,31}$/.test(first)
}
/**
@@ -91,6 +142,7 @@ export function kickHandle(value: string): string | null {
export function parseDeepLink(value: string): DeepLink | null {
const kick = kickHandle(value)
if (kick) return { service: 'kick', handle: kick }
if (isTelegramLink(value)) return { service: 'telegram', url: value.trim() }
let url: URL
try {
@@ -100,7 +152,7 @@ export function parseDeepLink(value: string): DeepLink | null {
}
const scheme = url.protocol.replace(/:$/, '').toLowerCase()
if (!DEEP_LINK_SCHEMES.includes(scheme)) return null
if (scheme !== 'irc' && scheme !== 'ircs') return null
const host = url.hostname
if (!host) return null
+2
View File
@@ -119,4 +119,6 @@ export interface EditMenuRequest {
suggestions: string[]
can: Record<EditAction, boolean>
hasSelection: boolean
/** What is selected, for searching the web for it. */
selection: string
}
+7
View File
@@ -118,6 +118,13 @@ export interface Buffer {
readOnly?: string
/** A Discord forum: a list of posts, each a thread, not a conversation. */
forum?: boolean
/**
* What the service counts as unread here, where it keeps a count this window could not work out (a Telegram topic
* never opened here): a starting point for the count, which then follows live messages.
*/
unreadSeed?: number
/** How many of those mention this account. */
mentionsSeed?: number
/** Matrix only - absent, not false, for protocols with no encryption concept. */
encrypted?: boolean
/**