🛠️ fix: Correct Unwanted Newlines after Undo in Textarea (#2289)

* docs: edit docker_override note for deploy-compose

* 🛠️  fix: Correct Unwanted Newlines after Undo in Textarea
This commit is contained in:
Danny Avila 2024-04-02 12:14:42 -04:00 committed by GitHub
parent f146db5c59
commit 7bd03a6e70
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 39 additions and 9 deletions

View file

@ -4,7 +4,7 @@ import { EModelEndpoint } from 'librechat-data-provider';
import type { TEndpointOption } from 'librechat-data-provider'; import type { TEndpointOption } from 'librechat-data-provider';
import type { UseFormSetValue } from 'react-hook-form'; import type { UseFormSetValue } from 'react-hook-form';
import type { KeyboardEvent } from 'react'; import type { KeyboardEvent } from 'react';
import { forceResize, insertTextAtCursor, getAssistantName } from '~/utils'; import { forceResize, insertTextAtCursor, trimUndoneRange, getAssistantName } from '~/utils';
import { useAssistantsMapContext } from '~/Providers/AssistantsMapContext'; import { useAssistantsMapContext } from '~/Providers/AssistantsMapContext';
import useGetSender from '~/hooks/Conversations/useGetSender'; import useGetSender from '~/hooks/Conversations/useGetSender';
import useFileHandling from '~/hooks/Files/useFileHandling'; import useFileHandling from '~/hooks/Files/useFileHandling';
@ -157,7 +157,16 @@ export default function useTextarea({
const handleKeyUp = (e: KeyEvent) => { const handleKeyUp = (e: KeyEvent) => {
const target = e.target as HTMLTextAreaElement; const target = e.target as HTMLTextAreaElement;
if (e.keyCode === 8 && target.value.trim() === '') { const isUndo = e.key === 'z' && (e.ctrlKey || e.metaKey);
if (isUndo && target.value.trim() === '') {
textAreaRef.current?.setRangeText('', 0, textAreaRef.current?.value?.length, 'end');
forceResize(textAreaRef);
} else if (isUndo) {
trimUndoneRange(textAreaRef);
forceResize(textAreaRef);
}
if ((e.keyCode === 8 || e.key === 'Backspace') && target.value.trim() === '') {
textAreaRef.current?.setRangeText('', 0, textAreaRef.current?.value?.length, 'end'); textAreaRef.current?.setRangeText('', 0, textAreaRef.current?.value?.length, 'end');
} }

View file

@ -32,9 +32,28 @@ export function insertTextAtCursor(element: HTMLTextAreaElement, textToInsert: s
3) Reseting back to scrollHeight reads and applies the ideal height for the current content dynamically 3) Reseting back to scrollHeight reads and applies the ideal height for the current content dynamically
*/ */
export const forceResize = (textAreaRef: React.RefObject<HTMLTextAreaElement>) => { export const forceResize = (textAreaRef: React.RefObject<HTMLTextAreaElement>) => {
if (textAreaRef.current) { if (!textAreaRef.current) {
textAreaRef.current.style.height = 'auto'; return;
textAreaRef.current.offsetHeight;
textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
} }
textAreaRef.current.style.height = 'auto';
textAreaRef.current.offsetHeight;
textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
};
/**
* Necessary undo event helper for edge cases where undoing pasted content leaves newlines filling the previous container height.
*/
export const trimUndoneRange = (textAreaRef: React.RefObject<HTMLTextAreaElement>) => {
if (!textAreaRef.current) {
return;
}
const { value, selectionStart, selectionEnd } = textAreaRef.current;
const afterCursor = value.substring(selectionEnd).trim();
if (afterCursor.length) {
return;
}
const beforeCursor = value.substring(0, selectionStart);
const newValue = beforeCursor + afterCursor;
textAreaRef.current.value = newValue;
textAreaRef.current.setSelectionRange(selectionStart, selectionStart);
}; };

View file

@ -109,11 +109,13 @@ The npm commands for "deployed" do this for you but they do not account for over
"stop:deployed": "docker compose -f ./deploy-compose.yml down", "stop:deployed": "docker compose -f ./deploy-compose.yml down",
``` ```
For example, if you use `deploy-compose.yml` as your main Docker Compose configuration and you have an override file named `deploy-compose.override.yml` (you can name the override file whatever you want), you would run Docker Compose commands like so: I would include the default override file in these commands, but doing so would require one to exist for every setup.
If you use `deploy-compose.yml` as your main Docker Compose configuration and you have an override file named `docker-compose.override.yml` (you can name the override file whatever you want, but you may have this specific file already), you would run Docker Compose commands like so:
```bash ```bash
docker compose -f deploy-compose.yml -f deploy-compose.override.yml pull docker compose -f deploy-compose.yml -f docker-compose.override.yml pull
docker compose -f deploy-compose.yml -f deploy-compose.override.yml up docker compose -f deploy-compose.yml -f docker-compose.override.yml up
``` ```
## MongoDB Authentication ## MongoDB Authentication