Skip to content

Commit

Permalink
🎨 style(Textarea): Message Edit Textarea Styling (#3009)
Browse files Browse the repository at this point in the history
  • Loading branch information
ohneda authored Jun 10, 2024
1 parent 2e55913 commit ef76cc1
Showing 1 changed file with 36 additions and 30 deletions.
66 changes: 36 additions & 30 deletions client/src/components/Chat/Messages/Content/EditMessage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { EModelEndpoint } from 'librechat-data-provider';
import { useState, useRef, useEffect, useCallback } from 'react';
import { useUpdateMessageMutation } from 'librechat-data-provider/react-query';
import type { TEditProps } from '~/common';
import { cn, removeFocusOutlines } from '~/utils';
import { cn, removeFocusRings } from '~/utils';
import { useChatContext } from '~/Providers';
import { useLocalize } from '~/hooks';
import Container from './Container';
Expand Down Expand Up @@ -111,36 +111,42 @@ const EditMessage = ({

return (
<Container message={message}>
<TextareaAutosize
ref={textAreaRef}
onChange={(e) => {
setEditedText(e.target.value);
}}
onKeyDown={handleKeyDown}
data-testid="message-text-editor"
className={cn(
'markdown prose dark:prose-invert light whitespace-pre-wrap break-words dark:text-gray-20',
'm-0 w-full resize-none border-0 bg-transparent p-0',
removeFocusOutlines,
)}
onPaste={(e) => {
e.preventDefault();
<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">
<TextareaAutosize
ref={textAreaRef}
onChange={(e) => {
setEditedText(e.target.value);
}}
onKeyDown={handleKeyDown}
data-testid="message-text-editor"
className={cn(
'markdown prose dark:prose-invert light whitespace-pre-wrap break-words',
'pl-3 md:pl-4',
'm-0 w-full resize-none border-0 bg-transparent py-[10px]',
'placeholder-black/50 focus:ring-0 focus-visible:ring-0 dark:bg-transparent dark:placeholder-white/50 md:py-3.5 ',
'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 textArea = textAreaRef.current;
if (!textArea) {
return;
}
const start = textArea.selectionStart;
const end = textArea.selectionEnd;
const newValue =
textArea.value.substring(0, start) + pastedData + textArea.value.substring(end);
setEditedText(newValue);
}}
contentEditable={true}
value={editedText}
suppressContentEditableWarning={true}
/>
const pastedData = e.clipboardData.getData('text/plain');
const textArea = textAreaRef.current;
if (!textArea) {
return;
}
const start = textArea.selectionStart;
const end = textArea.selectionEnd;
const newValue =
textArea.value.substring(0, start) + pastedData + textArea.value.substring(end);
setEditedText(newValue);
}}
contentEditable={true}
value={editedText}
suppressContentEditableWarning={true}
/>
</div>
<div className="mt-2 flex w-full justify-center text-center">
<button
className="btn btn-primary relative mr-2"
Expand Down

0 comments on commit ef76cc1

Please sign in to comment.