From 31d4164e5125a61a1590126b45d46174e5f8491c Mon Sep 17 00:00:00 2001 From: Tulir Asokan Date: Sat, 12 Oct 2024 15:37:26 +0300 Subject: [PATCH] web/composer: add support for multiline input --- web/src/ui/MessageComposer.css | 18 ++++++++++++++++++ web/src/ui/MessageComposer.tsx | 14 ++++++++++---- web/src/ui/RoomView.css | 10 ++-------- 3 files changed, 30 insertions(+), 12 deletions(-) create mode 100644 web/src/ui/MessageComposer.css diff --git a/web/src/ui/MessageComposer.css b/web/src/ui/MessageComposer.css new file mode 100644 index 0000000..81d7972 --- /dev/null +++ b/web/src/ui/MessageComposer.css @@ -0,0 +1,18 @@ +div.message-composer { + display: flex; + border-top: 1px solid #ccc; + > textarea { + flex: 1; + resize: none; + font-family: sans-serif; + height: auto; + padding: .5rem; + border: none; + outline: none; + } + > button { + padding: .5rem; + border: none; + background: none; + } +} diff --git a/web/src/ui/MessageComposer.tsx b/web/src/ui/MessageComposer.tsx index fe2f95b..d4b813d 100644 --- a/web/src/ui/MessageComposer.tsx +++ b/web/src/ui/MessageComposer.tsx @@ -16,6 +16,7 @@ import React, { use, useCallback, useState } from "react" import { RoomStateStore } from "../api/statestore.ts" import { ClientContext } from "./ClientContext.ts" +import "./MessageComposer.css" interface MessageComposerProps { room: RoomStateStore @@ -30,16 +31,21 @@ const MessageComposer = ({ room }: MessageComposerProps) => { client.rpc.sendMessage(room.roomID, text) .catch(err => window.alert("Failed to send message: " + err)) }, [text, room, client]) - return
- +