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

🎨 style(Textarea): Message Edit Textarea Styling (#3009)

Browse source
This commit is contained in:
Yuichi Oneda 2024-06-10 10:01:07 -07:00 • committed by GitHub
parent 2e559137ae
commit ef76cc195e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 36 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

66
client/src/components/Chat/Messages/Content/EditMessage.tsx
View file

@ -3,7 +3,7 @@ import { EModelEndpoint } from 'librechat-data-provider';
import { useState, useRef, useEffect, useCallback } from 'react'; import { useState, useRef, useEffect, useCallback } from 'react';
import { useUpdateMessageMutation } from 'librechat-data-provider/react-query'; import { useUpdateMessageMutation } from 'librechat-data-provider/react-query';
import type { TEditProps } from '~/common'; import type { TEditProps } from '~/common';
import { cn, removeFocusOutlines } from '~/utils'; import { cn, removeFocusRings } from '~/utils';
import { useChatContext } from '~/Providers'; import { useChatContext } from '~/Providers';
import { useLocalize } from '~/hooks'; import { useLocalize } from '~/hooks';
import Container from './Container'; import Container from './Container';
@ -111,36 +111,42 @@ const EditMessage = ({
return ( return (
<Container message={message}> <Container message={message}>
<TextareaAutosize <div className="bg-token-main-surface-primary relative flex w-full flex-grow flex-col overflow-hidden rounded-2xl border dark:border-gray-600 dark:text-white [&:has(textarea:focus)]:border-gray-300 [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)] dark:[&:has(textarea:focus)]:border-gray-500">
ref={textAreaRef} <TextareaAutosize
onChange={(e) => { ref={textAreaRef}
setEditedText(e.target.value); onChange={(e) => {
}} setEditedText(e.target.value);
onKeyDown={handleKeyDown} }}
data-testid="message-text-editor" onKeyDown={handleKeyDown}
className={cn( data-testid="message-text-editor"
'markdown prose dark:prose-invert light whitespace-pre-wrap break-words dark:text-gray-20', className={cn(
'm-0 w-full resize-none border-0 bg-transparent p-0', 'markdown prose dark:prose-invert light whitespace-pre-wrap break-words',
removeFocusOutlines, 'pl-3 md:pl-4',
)} 'm-0 w-full resize-none border-0 bg-transparent py-[10px]',
onPaste={(e) => { 'placeholder-black/50 focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:placeholder-white/50 md:py-3.5 ',
e.preventDefault(); 'pr-3 md:pr-4',
'max-h-[65vh] md:max-h-[75vh]',
removeFocusRings,
)}
onPaste={(e) => {
e.preventDefault();
const pastedData = e.clipboardData.getData('text/plain'); const pastedData = e.clipboardData.getData('text/plain');
const textArea = textAreaRef.current; const textArea = textAreaRef.current;
if (!textArea) { if (!textArea) {
return; return;
} }
const start = textArea.selectionStart; const start = textArea.selectionStart;
const end = textArea.selectionEnd; const end = textArea.selectionEnd;
const newValue = const newValue =
textArea.value.substring(0, start) + pastedData + textArea.value.substring(end); textArea.value.substring(0, start) + pastedData + textArea.value.substring(end);
setEditedText(newValue); setEditedText(newValue);
}} }}
contentEditable={true} contentEditable={true}
value={editedText} value={editedText}
suppressContentEditableWarning={true} suppressContentEditableWarning={true}
/> />
</div>
<div className="mt-2 flex w-full justify-center text-center"> <div className="mt-2 flex w-full justify-center text-center">
<button <button
className="btn btn-primary relative mr-2" className="btn btn-primary relative mr-2"