From cb6d5a3828e4ee17652a898bcf469db180e7b7fd Mon Sep 17 00:00:00 2001 From: Paul Makles Date: Sat, 9 Jul 2022 17:53:40 +0100 Subject: [PATCH] feat: update emoji picker; move settings bhnd expr --- external/lang | 2 +- package.json | 2 +- .../common/messaging/MessageBox.tsx | 80 +++++++++++++------ src/mobx/stores/Experiments.ts | 5 +- src/pages/settings/ServerSettings.tsx | 3 + src/pages/settings/server/Emojis.tsx | 13 ++- yarn.lock | 10 +-- 7 files changed, 78 insertions(+), 37 deletions(-) diff --git a/external/lang b/external/lang index d4bc47b7..58408da6 160000 --- a/external/lang +++ b/external/lang @@ -1 +1 @@ -Subproject commit d4bc47b729c7e69ce97216469692b39f4cd1640e +Subproject commit 58408da6c4090dd3a7808a663eaa95b8b1da7603 diff --git a/package.json b/package.json index 2c8aa384..7e89c29a 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "@hcaptcha/react-hcaptcha": "^0.3.6", "@insertish/vite-plugin-babel-macros": "^1.0.5", "@preact/preset-vite": "^2.0.0", - "@revoltchat/ui": "1.0.70", + "@revoltchat/ui": "1.0.72", "@rollup/plugin-replace": "^2.4.2", "@styled-icons/boxicons-logos": "^10.38.0", "@styled-icons/boxicons-regular": "^10.38.0", diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx index 02fb1560..7b76aef9 100644 --- a/src/components/common/messaging/MessageBox.tsx +++ b/src/components/common/messaging/MessageBox.tsx @@ -22,7 +22,7 @@ import { SMOOTH_SCROLL_ON_RECEIVE, } from "../../../lib/renderer/Singleton"; -import { useApplicationState } from "../../../mobx/State"; +import { state, useApplicationState } from "../../../mobx/State"; import { Reply } from "../../../mobx/stores/MessageQueue"; import { emojiDictionary } from "../../../assets/emojis"; @@ -34,8 +34,8 @@ import { uploadFile, } from "../../../controllers/client/jsx/legacy/FileUploads"; import { modalController } from "../../../controllers/modals/ModalController"; +import { RenderEmoji } from "../../markdown/plugins/emoji"; import AutoComplete, { useAutoComplete } from "../AutoComplete"; -import Emoji from "../Emoji"; import { PermissionTooltip } from "../Tooltip"; import FilePreview from "./bars/FilePreview"; import ReplyBar from "./bars/ReplyBar"; @@ -143,6 +143,56 @@ const RE_SED = new RegExp("^s/([^])*/([^])*$"); // Tests for code block delimiters (``` at start of line) const RE_CODE_DELIMITER = new RegExp("^```", "gm"); +const HackAlertThisFileWillBeReplaced = observer(({ channel }: Props) => { + const renderEmoji = useMemo( + () => + memo(({ emoji }: { emoji: string }) => ( + { + const v = state.draft.get(channel._id); + state.draft.set( + channel._id, + `${v ? `${v} ` : ""}:${emoji}:`, + ); + }}> + + + )), + [], + ); + + const emojis: Record = { + default: Object.keys(emojiDictionary), + }; + + // ! FIXME: also expose typing from component + const categories: any[] = []; + + for (const server of state.ordering.orderedServers) { + // ! FIXME: add a separate map on each server for emoji + const list = [...channel.client.emojis.values()] + .filter((emoji) => emoji.parent.id === server._id) + .map((x) => x._id); + + if (list.length > 0) { + emojis[server._id] = list; + categories.push({ + id: server._id, + name: server.name, + iconURL: server.generateIconURL({ max_side: 256 }), + }); + } + } + + return ( + + ); +}); + // ! FIXME: add to app config and load from app config export const CAN_UPLOAD_AT_ONCE = 5; @@ -306,6 +356,7 @@ export default observer(({ channel }: Props) => { async function sendFile(content: string) { if (uploadState.type !== "attached") return; const attachments: string[] = []; + setMessage; const cancel = Axios.CancelToken.source(); const files = uploadState.files; @@ -464,26 +515,6 @@ export default observer(({ channel }: Props) => { : undefined, }); - const renderEmoji = useMemo( - () => - memo(({ emoji }: { emoji: string }) => ( - { - const v = state.draft.get(channel._id); - setMessage(`${v ? `${v} ` : ""}:${emoji}:`); - }}> - - - )), - [], - ); - return ( <> @@ -527,10 +558,7 @@ export default observer(({ channel }: Props) => { /> {picker && ( - + )} diff --git a/src/mobx/stores/Experiments.ts b/src/mobx/stores/Experiments.ts index a91318a5..c37ad5d6 100644 --- a/src/mobx/stores/Experiments.ts +++ b/src/mobx/stores/Experiments.ts @@ -43,8 +43,9 @@ export const EXPERIMENTS: { "This will enable the experimental plugin API. Only touch this if you know what you're doing.", }, picker: { - title: "Emoji Picker", - description: "This will enable a work-in-progress emoji picker.", + title: "Custom Emoji", + description: + "This will enable a work-in-progress emoji picker and custom emoji settings.", }, }; diff --git a/src/pages/settings/ServerSettings.tsx b/src/pages/settings/ServerSettings.tsx index 53a0780c..6cd688a7 100644 --- a/src/pages/settings/ServerSettings.tsx +++ b/src/pages/settings/ServerSettings.tsx @@ -16,6 +16,8 @@ import { Text } from "preact-i18n"; import { LineDivider } from "@revoltchat/ui"; +import { state } from "../../mobx/State"; + import ButtonItem from "../../components/navigation/items/ButtonItem"; import { useClient } from "../../controllers/client/ClientController"; import RequiresOnline from "../../controllers/client/jsx/RequiresOnline"; @@ -77,6 +79,7 @@ export default observer(() => { id: "emojis", icon: , title: , + hidden: !state.experiments.isEnabled("picker"), }, { category: ( diff --git a/src/pages/settings/server/Emojis.tsx b/src/pages/settings/server/Emojis.tsx index 9cdabfed..6acaa453 100644 --- a/src/pages/settings/server/Emojis.tsx +++ b/src/pages/settings/server/Emojis.tsx @@ -2,6 +2,8 @@ import { observer } from "mobx-react-lite"; import { Server } from "revolt.js"; import styled from "styled-components"; +import { Text } from "preact-i18n"; + import { Button, Column, Row, Stacked } from "@revoltchat/ui"; import UserShort from "../../../components/common/user/UserShort"; @@ -48,7 +50,11 @@ export const Emojis = observer(({ server }: Props) => { return ( -

Emojis – {emoji.length}

+

+ + {" – "} + {emoji.length} +

{emoji.map((emoji) => ( @@ -64,7 +70,10 @@ export const Emojis = observer(({ server }: Props) => { onClick={() => modalController.writeText(emoji._id) }> - Copy ID + + + ))} diff --git a/yarn.lock b/yarn.lock index e01c1ac8..61a6f15f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2240,9 +2240,9 @@ __metadata: languageName: node linkType: hard -"@revoltchat/ui@npm:1.0.70": - version: 1.0.70 - resolution: "@revoltchat/ui@npm:1.0.70" +"@revoltchat/ui@npm:1.0.72": + version: 1.0.72 + resolution: "@revoltchat/ui@npm:1.0.72" dependencies: "@styled-icons/boxicons-logos": ^10.38.0 "@styled-icons/boxicons-regular": ^10.38.0 @@ -2256,7 +2256,7 @@ __metadata: react-virtuoso: ^2.12.0 peerDependencies: revolt.js: "*" - checksum: 70eba00f8b2d4fed3f83cdd64488ab4eb99acc9dd0427333a41f203912d9664f878ec04300bc3eaea2a67fef1620472cce9ff7048ef1280f950825593cf316a7 + checksum: 8ca6d68709591a9505cc62089ab42fe887fcd4ceaac81c7f673b41b7be1d850ba852d0c2dc09bb77c8e1bce22b3255ebfbf95922d57aa2c3d2288aacd7819a25 languageName: node linkType: hard @@ -3626,7 +3626,7 @@ __metadata: "@hcaptcha/react-hcaptcha": ^0.3.6 "@insertish/vite-plugin-babel-macros": ^1.0.5 "@preact/preset-vite": ^2.0.0 - "@revoltchat/ui": 1.0.70 + "@revoltchat/ui": 1.0.72 "@rollup/plugin-replace": ^2.4.2 "@styled-icons/boxicons-logos": ^10.38.0 "@styled-icons/boxicons-regular": ^10.38.0