Update editor style for send button

This commit is contained in:
Sinclair Chen 2022-08-03 15:43:03 -07:00
parent adda267b5b
commit f9ee5031fd
2 changed files with 16 additions and 29 deletions

View File

@ -50,7 +50,7 @@ export function useTextEditor(props: {
const editorClass = clsx(
proseClass,
!simple && 'min-h-[6em]',
'resize-none outline-none border-none pt-3 px-4 focus:ring-0'
'outline-none pt-2 px-4'
)
const editor = useEditor(
@ -123,8 +123,9 @@ function isValidIframe(text: string) {
export function TextEditor(props: {
editor: Editor | null
upload: ReturnType<typeof useUploadMutation>
children?: React.ReactNode // additional toolbar buttons
}) {
const { editor, upload } = props
const { editor, upload, children } = props
const [iframeOpen, setIframeOpen] = useState(false)
return (
@ -146,20 +147,10 @@ export function TextEditor(props: {
images!
</FloatingMenu>
)}
<div className="overflow-hidden rounded-lg border border-gray-300 shadow-sm focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500">
<div className="rounded-lg border border-gray-300 shadow-sm focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500">
<EditorContent editor={editor} />
{/* Spacer element to match the height of the toolbar */}
<div className="py-2" aria-hidden="true">
{/* Matches height of button in toolbar (1px border + 36px content height) */}
<div className="py-px">
<div className="h-9" />
</div>
</div>
</div>
{/* Toolbar, with buttons for image and embeds */}
<div className="absolute inset-x-0 bottom-0 flex justify-between py-2 pl-3 pr-2">
<div className="flex items-center space-x-5">
{/* Toolbar, with buttons for images and embeds */}
<div className="flex h-9 items-center gap-5 pl-4 pr-1">
<div className="flex items-center">
<FileUploadButton
onFiles={upload.mutate}
@ -184,6 +175,8 @@ export function TextEditor(props: {
<span className="sr-only">Embed an iframe</span>
</button>
</div>
<div className="ml-auto" />
{children}
</div>
</div>
</div>

View File

@ -505,29 +505,23 @@ export function CommentInputTextArea(props: {
return (
<>
<Row className="gap-1.5 text-gray-700">
<TextEditor editor={editor} upload={upload} />
<Col className={clsx('relative justify-end')}>
<div>
<TextEditor editor={editor} upload={upload}>
{user && !isSubmitting && (
<button
className={clsx(
'btn btn-ghost btn-sm absolute right-2 bottom-2 flex-row pl-2 capitalize',
(!editor || editor.isEmpty) &&
'pointer-events-none text-gray-500'
)}
className="btn btn-ghost btn-sm px-2 disabled:bg-inherit disabled:text-gray-300"
disabled={!editor || editor.isEmpty}
onClick={submit}
>
<PaperAirplaneIcon
className={'m-0 min-w-[22px] rotate-90 p-0 '}
height={25}
/>
<PaperAirplaneIcon className="m-0 h-[25px] min-w-[22px] rotate-90 p-0" />
</button>
)}
{isSubmitting && (
<LoadingIndicator spinnerClassName={'border-gray-500'} />
)}
</Col>
</Row>
</TextEditor>
</div>
<Row>
{!user && (
<button