mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-13 18:50:29 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add ESC btn to toolbar to quickly exit formatting (#1283)

Browse source 
* Add ESC btn to toolbar to quickly exit formatting

* add horizontal scroll to toolbar item

* make editor toolbar usable in touch device

* fix editor hotkeys not working in window

* remove unused import
This commit is contained in:
Ajay Bura 2023-06-16 11:09:09 +10:00 • committed by GitHub
parent 2883b4c35b
commit bc5e7445d9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 210 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/app/organisms/room/RoomInput.tsx
View file

@ -19,6 +19,7 @@ import {
Icon,
IconButton,
Icons,
Line,
Overlay,
OverlayBackdrop,
OverlayCenter,
@ -95,6 +96,7 @@ import { MessageReply } from '../../molecules/message/Message';
import colorMXID from '../../../util/colorMXID';
import { parseReplyBody, parseReplyFormattedBody } from '../../utils/room';
import { sanitizeText } from '../../utils/sanitize';
import { getResizeObserverEntry, useResizeObserver } from '../../hooks/useResizeObserver';
interface RoomInputProps {
roomViewRef: RefObject<HTMLElement>;
@ -158,6 +160,16 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
const handlePaste = useFilePasteHandler(handleFiles);
const dropZoneVisible = useFileDropZone(roomViewRef, handleFiles);
const [mobile, setMobile] = useState(document.body.clientWidth < 500);
useResizeObserver(
document.body,
useCallback((entries) => {
const bodyEntry = getResizeObserverEntry(document.body, entries);
if (bodyEntry && bodyEntry.contentRect.width < 500) setMobile(true);
else setMobile(false);
}, [])
);
useEffect(() => {
Transforms.insertFragment(editor, msgDraft);
}, [editor, msgDraft]);
@ -500,27 +512,36 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
>
{(anchorRef) => (
<>
<IconButton
aria-pressed={emojiBoardTab === EmojiBoardTab.Sticker}
onClick={() => setEmojiBoardTab(EmojiBoardTab.Sticker)}
variant="SurfaceVariant"
size="300"
radii="300"
>
<Icon
src={Icons.Sticker}
filled={emojiBoardTab === EmojiBoardTab.Sticker}
/>
</IconButton>
{!mobile && (
<IconButton
aria-pressed={emojiBoardTab === EmojiBoardTab.Sticker}
onClick={() => setEmojiBoardTab(EmojiBoardTab.Sticker)}
variant="SurfaceVariant"
size="300"
radii="300"
>
<Icon
src={Icons.Sticker}
filled={emojiBoardTab === EmojiBoardTab.Sticker}
/>
</IconButton>
)}
<IconButton
ref={anchorRef}
aria-pressed={emojiBoardTab === EmojiBoardTab.Emoji}
aria-pressed={
mobile ? !!emojiBoardTab : emojiBoardTab === EmojiBoardTab.Emoji
}
onClick={() => setEmojiBoardTab(EmojiBoardTab.Emoji)}
variant="SurfaceVariant"
size="300"
radii="300"
>
<Icon src={Icons.Smile} filled={emojiBoardTab === EmojiBoardTab.Emoji} />
<Icon
src={Icons.Smile}
filled={
mobile ? !!emojiBoardTab : emojiBoardTab === EmojiBoardTab.Emoji
}
/>
</IconButton>
</>
)}
@ -532,7 +553,14 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
</IconButton>
</>
}
bottom={toolbar && <Toolbar />}
bottom={
toolbar && (
<div>
<Line variant="SurfaceVariant" size="300" />
<Toolbar />
</div>
)
}
/>
</div>
);