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 cd9d4b8c..6efa2284 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 e177736c..7e8ecd17 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> &middot;