Add shift+click to mention a user in the textarea

This commit is contained in:
brecert 2021-09-07 08:14:22 -04:00
parent 4787a2166f
commit 2966e77917
No known key found for this signature in database
GPG key ID: 1B2E56B9EC985B96
3 changed files with 68 additions and 28 deletions

View file

@ -25,6 +25,7 @@ import Attachment from "./attachments/Attachment";
import { MessageReply } from "./attachments/MessageReply";
import Embed from "./embed/Embed";
import InviteList from "./embed/EmbedInvite";
import { internalEmit } from "../../../lib/eventEmitter";
interface Props {
attachContext?: boolean;
@ -61,15 +62,28 @@ const Message = observer(
// bree: Fatal please...
const userContext = attachContext
? (attachContextMenu("Menu", {
user: message.author_id,
contextualChannel: message.channel_id,
// eslint-disable-next-line
}) as any)
user: message.author_id,
contextualChannel: message.channel_id,
// eslint-disable-next-line
}) as any)
: undefined;
const openProfile = () =>
openScreen({ id: "profile", user_id: message.author_id });
const handleUserClick = (e: MouseEvent) => {
if (e.shiftKey && user?._id) {
internalEmit(
"MessageBox",
"append",
`<@${user._id}>`,
"mention",
);
} else {
openProfile()
}
}
// ! FIXME(?): animate on hover
const [animate, setAnimate] = useState(false);
@ -91,11 +105,11 @@ const Message = observer(
hideReply
? false
: (head &&
!(
message.reply_ids &&
message.reply_ids.length > 0
)) ??
false
!(
message.reply_ids &&
message.reply_ids.length > 0
)) ??
false
}
contrast={contrast}
sending={typeof queued !== "undefined"}
@ -104,10 +118,10 @@ const Message = observer(
onContextMenu={
attachContext
? attachContextMenu("Menu", {
message,
contextualChannel: message.channel_id,
queued,
})
message,
contextualChannel: message.channel_id,
queued,
})
: undefined
}
onMouseEnter={() => setAnimate(true)}
@ -118,7 +132,7 @@ const Message = observer(
target={user}
size={36}
onContextMenu={userContext}
onClick={openProfile}
onClick={handleUserClick}
animate={animate}
showServerIdentity
/>
@ -133,7 +147,7 @@ const Message = observer(
className="author"
user={user}
onContextMenu={userContext}
onClick={openProfile}
onClick={handleUserClick}
showServerIdentity
/>
<MessageDetail

View file

@ -9,6 +9,7 @@ import { useIntermediate } from "../../../context/intermediate/Intermediate";
import { useClient } from "../../../context/revoltjs/RevoltClient";
import UserIcon from "./UserIcon";
import { internalEmit } from "../../../lib/eventEmitter";
const BotBadge = styled.div`
display: inline-block;
@ -25,17 +26,18 @@ const BotBadge = styled.div`
border-radius: calc(var(--border-radius) / 2);
`;
type UsernameProps = JSX.HTMLAttributes<HTMLElement> & {
user?: User;
prefixAt?: boolean;
showServerIdentity?: boolean;
}
export const Username = observer(
({
user,
prefixAt,
showServerIdentity,
...otherProps
}: {
user?: User;
prefixAt?: boolean;
showServerIdentity?: boolean;
} & JSX.HTMLAttributes<HTMLElement>) => {
}: UsernameProps) => {
let username = user?.username;
let color;
@ -108,18 +110,32 @@ export default function UserShort({
const openProfile = () =>
user && openScreen({ id: "profile", user_id: user._id });
const handleUserClick = (e: MouseEvent) => {
if (e.shiftKey && user?._id) {
e.preventDefault()
internalEmit(
"MessageBox",
"append",
`<@${user?._id}>`,
"mention",
);
} else {
openProfile()
}
}
return (
<>
<UserIcon
size={size ?? 24}
target={user}
onClick={openProfile}
onClick={handleUserClick}
showServerIdentity={showServerIdentity}
/>
<Username
user={user}
showServerIdentity={showServerIdentity}
onClick={openProfile}
onClick={handleUserClick}
prefixAt={prefixAt}
/>
</>

View file

@ -12,6 +12,7 @@ import {
} from "../../../context/intermediate/Intermediate";
import { UserButton } from "../items/ButtonItem";
import { internalEmit } from "../../../lib/eventEmitter";
export type MemberListGroup = {
type: "online" | "offline" | "role";
@ -53,12 +54,21 @@ const ItemContent = memo(
user={item}
margin
context={context}
onClick={() =>
openScreen({
id: "profile",
user_id: item._id,
})
}
onClick={e => {
if (e.shiftKey) {
internalEmit(
"MessageBox",
"append",
`<@${item._id}>`,
"mention",
);
} else[
openScreen({
id: "profile",
user_id: item._id,
})
]
}}
/>
),
);