Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-19 18:00:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

🛠️ fix: Merge Textarea Ref with Form for Simplified Handling (#2456)

Browse source 
* share ref correctly

* chore: remove extraneous textarea handlers and add excel text data
This commit is contained in:
Danny Avila 2024-04-18 08:19:52 -04:00 • committed by GitHub
parent 26ea990045
commit 692ce3b346
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 33 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

76
client/src/hooks/Input/useTextarea.ts
View file

@ -3,9 +3,8 @@ import { useRecoilValue } from 'recoil';
import { EModelEndpoint } from 'librechat-data-provider';
import React, { useEffect, useRef, useCallback } from 'react';
import type { TEndpointOption } from 'librechat-data-provider';
import type { UseFormSetValue } from 'react-hook-form';
import type { KeyboardEvent } from 'react';
import { forceResize, insertTextAtCursor, trimUndoneRange, getAssistantName } from '~/utils';
import { forceResize, insertTextAtCursor, getAssistantName } from '~/utils';
import { useAssistantsMapContext } from '~/Providers/AssistantsMapContext';
import useGetSender from '~/hooks/Conversations/useGetSender';
import useFileHandling from '~/hooks/Files/useFileHandling';
@ -18,14 +17,10 @@ type KeyEvent = KeyboardEvent<HTMLTextAreaElement>;
export default function useTextarea({
textAreaRef,
submitButtonRef,
setValue,
getValues,
disabled = false,
}: {
textAreaRef: React.RefObject<HTMLTextAreaElement>;
submitButtonRef: React.RefObject<HTMLButtonElement>;
setValue: UseFormSetValue<{ text: string }>;
getValues: (field: string) => string;
disabled?: boolean;
}) {
const assistantMap = useAssistantsMapContext();
@ -166,33 +161,6 @@ export default function useTextarea({
[isSubmitting, filesLoading, enterToSend, textAreaRef, submitButtonRef],
);
const handleKeyUp = (e: KeyEvent) => {
const target = e.target as HTMLTextAreaElement;
const isUndo = e.key === 'z' && (e.ctrlKey || e.metaKey);
if (isUndo && target.value.trim() === '') {
textAreaRef.current?.setRangeText('', 0, textAreaRef.current?.value?.length, 'end');
setValue('text', '', { shouldValidate: true });
forceResize(textAreaRef);
} else if (isUndo) {
trimUndoneRange(textAreaRef);
setValue('text', '', { shouldValidate: true });
forceResize(textAreaRef);
}
if ((e.keyCode === 8 || e.key === 'Backspace') && target.value.trim() === '') {
textAreaRef.current?.setRangeText('', 0, textAreaRef.current?.value?.length, 'end');
}
if (e.key === 'Enter' && e.shiftKey) {
return console.log('Enter + Shift');
}
if (isSubmitting) {
return;
}
};
const handleCompositionStart = () => {
isComposing.current = true;
};
@ -201,36 +169,31 @@ export default function useTextarea({
isComposing.current = false;
};
/** Necessary handler to update form state when paste doesn't fire textArea input event */
const setPastedValue = useCallback(
(textArea: HTMLTextAreaElement, pastedData: string) => {
const currentTextValue = getValues('text') || '';
const { selectionStart, selectionEnd } = textArea;
const newValue =
currentTextValue.substring(0, selectionStart) +
pastedData +
currentTextValue.substring(selectionEnd);
setValue('text', newValue, { shouldValidate: true });
},
[getValues, setValue],
);
const handlePaste = useCallback(
(e: React.ClipboardEvent<HTMLTextAreaElement>) => {
e.preventDefault();
const textArea = textAreaRef.current;
if (!textArea) {
return;
}
const pastedData = e.clipboardData.getData('text/plain');
setPastedValue(textArea, pastedData);
insertTextAtCursor(textArea, pastedData);
forceResize(textAreaRef);
if (!e.clipboardData) {
return;
}
if (e.clipboardData && e.clipboardData.files.length > 0) {
let includedText = '';
const { types } = e.clipboardData;
if (types.indexOf('text/rtf') !== -1 || types.indexOf('Files') !== -1) {
e.preventDefault();
includedText = e.clipboardData.getData('text/plain');
}
if (includedText && e.clipboardData.files.length > 0) {
insertTextAtCursor(textAreaRef.current, includedText);
forceResize(textAreaRef);
}
if (e.clipboardData.files.length > 0) {
setFilesLoading(true);
const timestampedFiles: File[] = [];
for (const file of e.clipboardData.files) {
@ -242,14 +205,13 @@ export default function useTextarea({
handleFiles(timestampedFiles);
}
},
[handleFiles, setFilesLoading, setPastedValue, textAreaRef],
[handleFiles, setFilesLoading, textAreaRef],
);
return {
textAreaRef,
handleKeyDown,
handleKeyUp,
handlePaste,
handleKeyDown,
handleCompositionStart,
handleCompositionEnd,
};