From f724cfdf4f84b4189586ca9b269a73924a9d23b0 Mon Sep 17 00:00:00 2001 From: Paul Date: Tue, 22 Jun 2021 13:28:03 +0100 Subject: [PATCH] Add auto complete back. --- src/components/common/AutoComplete.tsx | 364 ++++++++++++++++++ src/components/{markdown => common}/Emoji.tsx | 2 +- src/components/common/messaging/Message.tsx | 6 +- .../common/messaging/MessageBox.tsx | 11 +- src/components/markdown/Renderer.tsx | 5 +- src/context/revoltjs/RevoltClient.tsx | 5 + src/pages/settings/panes/Languages.tsx | 2 +- 7 files changed, 389 insertions(+), 6 deletions(-) create mode 100644 src/components/common/AutoComplete.tsx rename src/components/{markdown => common}/Emoji.tsx (92%) diff --git a/src/components/common/AutoComplete.tsx b/src/components/common/AutoComplete.tsx new file mode 100644 index 00000000..5908dcb6 --- /dev/null +++ b/src/components/common/AutoComplete.tsx @@ -0,0 +1,364 @@ +import { StateUpdater, useContext, useState } from "preact/hooks"; +import { AppContext } from "../../context/revoltjs/RevoltClient"; +import { emojiDictionary } from "../../assets/emojis"; +import UserIcon from "./user/UserIcon"; +import styled from "styled-components"; +import { SYSTEM_USER_ID, User } from "revolt.js"; +import Emoji from "./Emoji"; + +export type AutoCompleteState = + | { type: "none" } + | { + type: "emoji"; + matches: string[]; + selected: number; + within: boolean; + } + | { + type: "user"; + matches: User[]; + selected: number; + within: boolean; + }; + +export type SearchClues = { + users?: { type: 'channel', id: string } | { type: 'all' } +}; + +export type AutoCompleteProps = { + state: AutoCompleteState, + setState: StateUpdater, + + onKeyUp: (ev: KeyboardEvent) => void, + onKeyDown: (ev: KeyboardEvent) => boolean, + onChange: (ev: JSX.TargetedEvent) => void, + onClick: JSX.MouseEventHandler, + onFocus: JSX.FocusEventHandler, + onBlur: JSX.FocusEventHandler +} + +export function useAutoComplete(setValue: (v?: string) => void, searchClues?: SearchClues): AutoCompleteProps { + const [state, setState] = useState({ type: 'none' }); + const [focused, setFocused] = useState(false); + const client = useContext(AppContext); + + function findSearchString( + el: HTMLTextAreaElement + ): ["emoji" | "user", string, number] | undefined { + if (el.selectionStart === el.selectionEnd) { + let cursor = el.selectionStart; + let content = el.value.slice(0, cursor); + + let valid = /\w/; + + let j = content.length - 1; + if (content[j] === '@') { + return [ + "user", + "", + j + ]; + } + + while (j >= 0 && valid.test(content[j])) { + j--; + } + + if (j === -1) return; + let current = content[j]; + + if (current === ":" || current === "@") { + let search = content.slice(j + 1, content.length); + if (search.length > 0) { + return [ + current === ":" ? "emoji" : "user", + search.toLowerCase(), + j + 1 + ]; + } + } + } + } + + function onChange(ev: JSX.TargetedEvent) { + const el = ev.currentTarget; + + let result = findSearchString(el); + if (result) { + let [type, search] = result; + const regex = new RegExp(search, 'i'); + + if (type === "emoji") { + // ! FIXME: we should convert it to a Binary Search Tree and use that + let matches = Object.keys(emojiDictionary) + .filter((emoji: string) => emoji.match(regex)) + .splice(0, 5); + + if (matches.length > 0) { + let currentPosition = + state.type !== "none" + ? state.selected + : 0; + + setState({ + type: "emoji", + matches, + selected: Math.min(currentPosition, matches.length - 1), + within: false + }); + + return; + } + } + + if (type === "user" && searchClues?.users) { + let users: User[] = []; + switch (searchClues.users.type) { + case 'all': users = client.users.toArray(); break; + case 'channel': { + let channel = client.channels.get(searchClues.users.id); + switch (channel?.channel_type) { + case 'Group': + case 'DirectMessage': + users = client.users.mapKeys(channel.recipients) + .filter(x => typeof x !== 'undefined') as User[]; + break; + case 'TextChannel': + const server = channel.server; + users = client.servers.members.toArray() + .filter(x => x._id.substr(0, 26) === server) + .map(x => client.users.get(x._id.substr(26))) + .filter(x => typeof x !== 'undefined') as User[]; + break; + default: return; + } + } + } + + users = users.filter(x => x._id !== SYSTEM_USER_ID); + + let matches = (search.length > 0 ? users.filter(user => user?.username.toLowerCase().match(regex)) : users) + .splice(0, 5) + .filter(x => typeof x !== "undefined"); + + if (matches.length > 0) { + let currentPosition = + state.type !== "none" + ? state.selected + : 0; + + setState({ + type: "user", + matches, + selected: Math.min(currentPosition, matches.length - 1), + within: false + }); + + return; + } + } + } + + if (state.type !== "none") { + setState({ type: "none" }); + } + } + + function selectCurrent(el: HTMLTextAreaElement) { + if (state.type !== "none") { + let result = findSearchString(el); + if (result) { + let [_type, search, index] = result; + + let content = el.value.split(""); + if (state.type === "emoji") { + content.splice( + index, + search.length, + state.matches[state.selected], + ": " + ); + } else { + content.splice( + index - 1, + search.length + 1, + "<@", + state.matches[state.selected]._id, + "> " + ); + } + + setValue(content.join("")); + } + } + } + + function onClick(ev: JSX.TargetedMouseEvent) { + ev.preventDefault(); + selectCurrent(document.querySelector("#message")!); + } + + function onKeyDown(e: KeyboardEvent) { + if (focused && state.type !== 'none') { + if (e.key === "ArrowUp") { + e.preventDefault(); + if (state.selected > 0) { + setState({ + ...state, + selected: state.selected - 1 + }); + } + + return true; + } + + if (e.key === "ArrowDown") { + e.preventDefault(); + if (state.selected < state.matches.length - 1) { + setState({ + ...state, + selected: state.selected + 1 + }); + } + + return true; + } + + if (e.key === "Enter" || e.key === "Tab") { + e.preventDefault(); + selectCurrent( + e.currentTarget as HTMLTextAreaElement + ); + + return true; + } + } + + return false; + } + + function onKeyUp(e: KeyboardEvent) { + if (e.currentTarget !== null) { + // @ts-expect-error + onChange(e); + } + } + + function onFocus(ev: JSX.TargetedFocusEvent) { + setFocused(true); + onChange(ev); + } + + function onBlur() { + if (state.type !== 'none' && state.within) return; + setFocused(false); + } + + return { + state: focused ? state : { type: 'none' }, + setState, + + onClick, + onChange, + onKeyUp, + onKeyDown, + onFocus, + onBlur + } +} + +const Base = styled.div` + position: relative; + + > div { + bottom: 0; + width: 100%; + position: absolute; + background: var(--primary-header); + } + + button { + gap: 8px; + margin: 4px; + padding: 6px; + border: none; + display: flex; + cursor: pointer; + border-radius: 6px; + flex-direction: row; + background: transparent; + color: var(--foreground); + width: calc(100% - 12px); + + span { + display: grid; + place-items: center; + } + + &.active { + background: var(--primary-background); + } + } +`; + +export default function AutoComplete({ state, setState, onClick }: Pick) { + return ( + +
+ {state.type === "emoji" && + state.matches.map((match, i) => ( + + ))} + {state.type === "user" && + state.matches.map((match, i) => ( + + ))} +
+ + ) +} diff --git a/src/components/markdown/Emoji.tsx b/src/components/common/Emoji.tsx similarity index 92% rename from src/components/markdown/Emoji.tsx rename to src/components/common/Emoji.tsx index b7043e7f..74e381b5 100644 --- a/src/components/markdown/Emoji.tsx +++ b/src/components/common/Emoji.tsx @@ -24,7 +24,7 @@ function parseEmoji(emoji: string) { return `https://static.revolt.chat/emoji/${EMOJI_PACK}/${codepoint}.svg?rev=${REVISION}`; } -export function Emoji({ emoji, size }: { emoji: string, size?: number }) { +export default function Emoji({ emoji, size }: { emoji: string, size?: number }) { return ( {emoji} diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx index e938e73c..4260bdea 100644 --- a/src/components/common/messaging/MessageBox.tsx +++ b/src/components/common/messaging/MessageBox.tsx @@ -20,6 +20,7 @@ import { SingletonMessageRenderer, SMOOTH_SCROLL_ON_RECEIVE } from "../../../lib import FilePreview from './bars/FilePreview'; import { debounce } from "../../../lib/debounce"; +import AutoComplete, { useAutoComplete } from "../AutoComplete"; type Props = WithDispatcher & { channel: Channel; @@ -226,9 +227,11 @@ function MessageBox({ channel, draft, dispatcher }: Props) { } const debouncedStopTyping = useCallback(debounce(stopTyping, 1000), [ channel._id ]); + const { onChange, onKeyUp, onKeyDown, onFocus, onBlur, ...autoCompleteProps } = useAutoComplete(setMessage, { users: { type: 'channel', id: channel._id } }); return ( <> + uploadState.type === 'attached' && grabFiles(20_000_000, files => setUploadState({ type: 'attached', files: [ ...uploadState.files, ...files ] }), () => openScreen({ id: "error", error: "FileTooLarge" }), true)} @@ -271,7 +274,10 @@ function MessageBox({ channel, draft, dispatcher }: Props) { padding={14} id="message" value={draft ?? ''} + onKeyUp={onKeyUp} onKeyDown={e => { + if (onKeyDown(e)) return; + if ( e.key === "ArrowUp" && (!draft || draft.length === 0) @@ -298,7 +304,10 @@ function MessageBox({ channel, draft, dispatcher }: Props) { onChange={e => { setMessage(e.currentTarget.value); startTyping(); - }} /> + onChange(e); + }} + onFocus={onFocus} + onBlur={onBlur} /> diff --git a/src/components/markdown/Renderer.tsx b/src/components/markdown/Renderer.tsx index c2a85929..287bb4a5 100644 --- a/src/components/markdown/Renderer.tsx +++ b/src/components/markdown/Renderer.tsx @@ -1,10 +1,11 @@ import MarkdownIt from "markdown-it"; import { RE_MENTIONS } from "revolt.js"; -import { generateEmoji } from "./Emoji"; import { useContext } from "preact/hooks"; import { MarkdownProps } from "./Markdown"; import styles from "./Markdown.module.scss"; +import { generateEmoji } from "../common/Emoji"; import { internalEmit } from "../../lib/eventEmitter"; +import { emojiDictionary } from "../../assets/emojis"; import { AppContext } from "../../context/revoltjs/RevoltClient"; import Prism from "prismjs"; @@ -47,7 +48,7 @@ export const md: MarkdownIt = MarkdownIt({ } }) .disable("image") -.use(MarkdownEmoji/*, { defs: emojiDictionary }*/) +.use(MarkdownEmoji, { defs: emojiDictionary }) .use(MarkdownSpoilers) .use(MarkdownSup) .use(MarkdownSub) diff --git a/src/context/revoltjs/RevoltClient.tsx b/src/context/revoltjs/RevoltClient.tsx index da9c1571..26c90bc7 100644 --- a/src/context/revoltjs/RevoltClient.tsx +++ b/src/context/revoltjs/RevoltClient.tsx @@ -113,6 +113,11 @@ function Context({ auth, sync, children, dispatcher }: Props) { dispatcher({ type: "LOGOUT" }); delete client.user; + // ! FIXME: write procedure client.clear(); + client.users.clear(); + client.channels.clear(); + client.servers.clear(); + client.servers.members.clear(); dispatcher({ type: "RESET" }); openScreen({ id: "none" }); diff --git a/src/pages/settings/panes/Languages.tsx b/src/pages/settings/panes/Languages.tsx index 3c58b23f..7e5566b3 100644 --- a/src/pages/settings/panes/Languages.tsx +++ b/src/pages/settings/panes/Languages.tsx @@ -1,10 +1,10 @@ import { Text } from "preact-i18n"; import styles from "./Panes.module.scss"; import Tip from "../../../components/ui/Tip"; +import Emoji from "../../../components/common/Emoji"; import Checkbox from "../../../components/ui/Checkbox"; import { connectState } from "../../../redux/connector"; import { WithDispatcher } from "../../../redux/reducers"; -import { Emoji } from "../../../components/markdown/Emoji"; import { Language, LanguageEntry, Languages as Langs } from "../../../context/Locale"; interface Props {