forked from rDrama/rDrama
Add to draft when selecting an emoji
parent
c6fe563dfc
commit
c0d8567013
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "chat",
|
"name": "chat",
|
||||||
"version": "0.1.15",
|
"version": "0.1.17",
|
||||||
"main": "./src/index.tsx",
|
"main": "./src/index.tsx",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
|
@ -6,6 +6,7 @@ import React, {
|
||||||
useRef,
|
useRef,
|
||||||
useMemo,
|
useMemo,
|
||||||
useState,
|
useState,
|
||||||
|
useEffect,
|
||||||
} from "react";
|
} from "react";
|
||||||
import { useChat, useDrawer, useEmojis } from "../../hooks";
|
import { useChat, useDrawer, useEmojis } from "../../hooks";
|
||||||
import { EmojiDrawer, QuickEmojis } from "../emoji";
|
import { EmojiDrawer, QuickEmojis } from "../emoji";
|
||||||
|
@ -13,7 +14,6 @@ import "./UserInput.css";
|
||||||
|
|
||||||
export function UserInput() {
|
export function UserInput() {
|
||||||
const { draft, sendMessage, updateDraft } = useChat();
|
const { draft, sendMessage, updateDraft } = useChat();
|
||||||
const { reveal, hide, open } = useDrawer();
|
|
||||||
const builtChatInput = useRef<HTMLTextAreaElement>(null);
|
const builtChatInput = useRef<HTMLTextAreaElement>(null);
|
||||||
const { visible, addQuery } = useEmojis();
|
const { visible, addQuery } = useEmojis();
|
||||||
const form = useRef<HTMLFormElement>(null);
|
const form = useRef<HTMLFormElement>(null);
|
||||||
|
@ -53,25 +53,6 @@ export function UserInput() {
|
||||||
},
|
},
|
||||||
[handleSendMessage]
|
[handleSendMessage]
|
||||||
);
|
);
|
||||||
const handleToggleEmojiDrawer = useCallback(() => {
|
|
||||||
if (open) {
|
|
||||||
builtChatInput.current?.focus();
|
|
||||||
hide();
|
|
||||||
} else {
|
|
||||||
reveal({
|
|
||||||
title: "Select an emoji",
|
|
||||||
content: (
|
|
||||||
<EmojiDrawer
|
|
||||||
onSelectEmoji={handleSelectEmoji}
|
|
||||||
onClose={() => builtChatInput.current?.focus()}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [open]);
|
|
||||||
const handleSelectEmoji = useCallback((emoji: string) => {
|
|
||||||
updateDraft((prev) => `${prev} :${emoji}: `);
|
|
||||||
}, []);
|
|
||||||
const handleInsertQuickEmoji = useCallback(
|
const handleInsertQuickEmoji = useCallback(
|
||||||
(emoji: string) => {
|
(emoji: string) => {
|
||||||
const [openEmojiToken, closeEmojiToken] = locateEmojiTokens(draft);
|
const [openEmojiToken, closeEmojiToken] = locateEmojiTokens(draft);
|
||||||
|
@ -88,6 +69,18 @@ export function UserInput() {
|
||||||
builtChatInput.current?.scrollIntoView({ behavior: "smooth" });
|
builtChatInput.current?.scrollIntoView({ behavior: "smooth" });
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
// Listen for changes from the Emoji Modal and reflect them in draft
|
||||||
|
useEffect(() => {
|
||||||
|
const handleEmojiInsert = (event: CustomEvent<{ emoji: string }>) =>
|
||||||
|
updateDraft((prev) => `${prev} ${event.detail.emoji} `);
|
||||||
|
|
||||||
|
document.addEventListener("emojiInserted", handleEmojiInsert);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener("emojiInserted", handleEmojiInsert);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form ref={form} className="UserInput" onSubmit={handleSendMessage}>
|
<form ref={form} className="UserInput" onSubmit={handleSendMessage}>
|
||||||
{quickEmojis.length > 0 && (
|
{quickEmojis.length > 0 && (
|
||||||
|
@ -122,6 +115,7 @@ export function UserInput() {
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
onKeyUp={handleKeyUp}
|
onKeyUp={handleKeyUp}
|
||||||
onFocus={handleFocus}
|
onFocus={handleFocus}
|
||||||
|
onInput={console.log}
|
||||||
placeholder="Message"
|
placeholder="Message"
|
||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
value={draft}
|
value={draft}
|
||||||
|
|
|
@ -345,6 +345,9 @@ function emojiAddToInput(event)
|
||||||
|
|
||||||
emojiInputTargetDOM.setRangeText(strToInsert);
|
emojiInputTargetDOM.setRangeText(strToInsert);
|
||||||
|
|
||||||
|
const emojiInsertedEvent = new CustomEvent("emojiInserted", { detail: { emoji: strToInsert } });
|
||||||
|
document.dispatchEvent(emojiInsertedEvent);
|
||||||
|
|
||||||
// Sir, come out and drink your Chromium complaint web
|
// Sir, come out and drink your Chromium complaint web
|
||||||
// I HATE CHROME. I HATE CHROME
|
// I HATE CHROME. I HATE CHROME
|
||||||
if(window.chrome !== undefined)
|
if(window.chrome !== undefined)
|
||||||
|
|
Loading…
Reference in New Issue