From a628b0acd17709355df1badfe1b1b5b9ae534f95 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Sat, 3 Jul 2021 23:42:05 +0100
Subject: [PATCH] Add auto-complete to message editor.
---
.../common/messaging/MessageBase.tsx | 2 +-
src/pages/channels/messaging/MessageEditor.tsx | 18 +++++++++++++++++-
2 files changed, 18 insertions(+), 2 deletions(-)
diff --git a/src/components/common/messaging/MessageBase.tsx b/src/components/common/messaging/MessageBase.tsx
index cd9d4b8..6efa228 100644
--- a/src/components/common/messaging/MessageBase.tsx
+++ b/src/components/common/messaging/MessageBase.tsx
@@ -133,7 +133,7 @@ export const MessageContent = styled.div`
min-width: 0;
flex-grow: 1;
display: flex;
- overflow: hidden;
+ // overflow: hidden;
font-size: .875rem;
flex-direction: column;
justify-content: center;
diff --git a/src/pages/channels/messaging/MessageEditor.tsx b/src/pages/channels/messaging/MessageEditor.tsx
index e177736..7e8ecd1 100644
--- a/src/pages/channels/messaging/MessageEditor.tsx
+++ b/src/pages/channels/messaging/MessageEditor.tsx
@@ -5,6 +5,7 @@ import { useContext, useEffect, useState } from "preact/hooks";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
import { IntermediateContext, useIntermediate } from "../../../context/intermediate/Intermediate";
+import AutoComplete, { useAutoComplete } from "../../../components/common/AutoComplete";
const EditorBase = styled.div`
display: flex;
@@ -13,6 +14,7 @@ const EditorBase = styled.div`
textarea {
resize: none;
padding: 12px;
+ font-size: .875rem;
border-radius: 3px;
white-space: pre-wrap;
background: var(--secondary-header);
@@ -70,16 +72,27 @@ export default function MessageEditor({ message, finish }: Props) {
return () => document.body.removeEventListener("keyup", keyUp);
}, [focusTaken]);
+ const { onChange, onKeyUp, onKeyDown, onFocus, onBlur, ...autoCompleteProps } =
+ useAutoComplete(v => setContent(v ?? ''), {
+ users: { type: 'all' }
+ });
+
return (
<EditorBase>
+ <AutoComplete detached {...autoCompleteProps} />
<TextAreaAutoSize
forceFocus
maxRows={3}
padding={12}
value={content}
maxLength={2000}
- onChange={ev => setContent(ev.currentTarget.value)}
+ onChange={ev => {
+ onChange(ev);
+ setContent(ev.currentTarget.value)
+ }}
onKeyDown={e => {
+ if (onKeyDown(e)) return;
+
if (
!e.shiftKey &&
e.key === "Enter" &&
@@ -89,6 +102,9 @@ export default function MessageEditor({ message, finish }: Props) {
save();
}
}}
+ onKeyUp={onKeyUp}
+ onFocus={onFocus}
+ onBlur={onBlur}
/>
<span className="caption">
escape to <a onClick={finish}>cancel</a> ·
--
GitLab