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

Refactor state & Custom editor (#1190)

Browse source 
* Fix eslint

* Enable ts strict mode

* install folds, jotai & immer

* Enable immer map/set

* change cross-signing alert anim to 30 iteration

* Add function to access matrix client

* Add new types

* Add disposable util

* Add room utils

* Add mDirect list atom

* Add invite list atom

* add room list atom

* add utils for jotai atoms

* Add room id to parents atom

* Add mute list atom

* Add room to unread atom

* Use hook to bind atoms with sdk

* Add settings atom

* Add settings hook

* Extract set settings hook

* Add Sidebar components

* WIP

* Add bind atoms hook

* Fix init muted room list atom

* add navigation atoms

* Add custom editor

* Fix hotkeys

* Update folds

* Add editor output function

* Add matrix client context

* Add tooltip to editor toolbar items

* WIP - Add editor to room input

* Refocus editor on toolbar item click

* Add Mentions - WIP

* update folds

* update mention focus outline

* rename emoji element type

* Add auto complete menu

* add autocomplete query functions

* add index file for editor

* fix bug in getPrevWord function

* Show room mention autocomplete

* Add async search function

* add use async search hook

* use async search in room mention autocomplete

* remove folds prefer font for now

* allow number array in async search

* reset search with empty query

* Autocomplete unknown room mention

* Autocomplete first room mention on tab

* fix roomAliasFromQueryText

* change mention color to primary

* add isAlive hook

* add getMxIdLocalPart to mx utils

* fix getRoomAvatarUrl size

* fix types

* add room members hook

* fix bug in room mention

* add user mention autocomplete

* Fix async search giving prev result after no match

* update folds

* add twemoji font

* add use state provider hook

* add prevent scroll with arrow key util

* add ts to custom-emoji and emoji files

* add types

* add hook for emoji group labels

* add hook for emoji group icons

* add emoji board with basic emoji

* add emojiboard in room input

* select multiple emoji with shift press

* display custom emoji in emojiboard

* Add emoji preview

* focus element on hover

* update folds

* position emojiboard properly

* convert recent-emoji.js to ts

* add use recent emoji hook

* add io.element.recent_emoji to account data evt

* Render recent emoji in emoji board

* show custom emoji from parent spaces

* show room emoji

* improve emoji sidebar

* update folds

* fix pack avatar and name fallback in emoji board

* add stickers to emoji board

* fix bug in emoji preview

* Add sticker icon in room input

* add debounce hook

* add search in emoji board

* Optimize emoji board

* fix emoji board sidebar divider

* sync emojiboard sidebar with scroll & update ui

* Add use throttle hook

* support custom emoji in editor

* remove duplicate emoji selection function

* fix emoji and mention spacing

* add emoticon autocomplete in editor

* fix string

* makes emoji size relative to font size in editor

* add option to render link element

* add spoiler in editor

* fix sticker in emoji board search using wrong type

* render custom placeholder

* update hotkey for block quote and block code

* add terminate search function in async search

* add getImageInfo to matrix utils

* send stickers

* add resize observer hook

* move emoji board component hooks in hooks dir

* prevent editor expand hides room timeline

* send typing notifications

* improve emoji style and performance

* fix imports

* add on paste param to editor

* add selectFile utils

* add file picker hook

* add file paste handler hook

* add file drop handler

* update folds

* Add file upload card

* add bytes to size util

* add blurHash util

* add await to js lib

* add browser-encrypt-attachment types

* add list atom

* convert mimetype file to ts

* add matrix types

* add matrix file util

* add file related dom utils

* add common utils

* add upload atom

* add room input draft atom

* add upload card renderer component

* add upload board component

* add support for file upload in editor

* send files with message / enter

* fix circular deps

* store editor toolbar state in local store

* move msg content util to separate file

* store msg draft on room switch

* fix following member not updating on msg sent

* add theme for folds component

* fix system default theme

* Add reply support in editor

* prevent initMatrix to init multiple time

* add state event hooks

* add async callback hook

* Show tombstone info for tombstone room

* fix room tombstone component border

* add power level hook

* Add room input placeholder component

* Show input placeholder for muted member
This commit is contained in:
Ajay Bura 2023-06-12 21:15:23 +10:00 • committed by GitHub
parent 2055d7a07f
commit 0b06bed1db
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
128 changed files with 8799 additions and 409 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/app/components/UseStateProvider.tsx Normal file
View file

@ -0,0 +1,9 @@
import { Dispatch, ReactElement, SetStateAction, useState } from 'react';
type UseStateProviderProps<T> = {
initial: T | (() => T);
children: (value: T, setter: Dispatch<SetStateAction<T>>) => ReactElement;
};
export function UseStateProvider<T>({ initial, children }: UseStateProviderProps<T>) {
return children(...useState(initial));
}

63
src/app/components/editor/Editor.css.ts Normal file
View file

@ -0,0 +1,63 @@
import { style } from '@vanilla-extract/css';
import { color, config, DefaultReset, toRem } from 'folds';
export const Editor = style([
DefaultReset,
{
backgroundColor: color.SurfaceVariant.Container,
color: color.SurfaceVariant.OnContainer,
boxShadow: `inset 0 0 0 ${config.borderWidth.B300} ${color.SurfaceVariant.ContainerLine}`,
borderRadius: config.radii.R400,
overflow: 'hidden',
},
]);
export const EditorOptions = style([
DefaultReset,
{
padding: config.space.S200,
},
]);
export const EditorTextareaScroll = style({});
export const EditorTextarea = style([
DefaultReset,
{
flexGrow: 1,
height: '100%',
padding: `${toRem(13)} 0`,
selectors: {
[`${EditorTextareaScroll}:first-child &`]: {
paddingLeft: toRem(13),
},
[`${EditorTextareaScroll}:last-child &`]: {
paddingRight: toRem(13),
},
},
},
]);
export const EditorPlaceholder = style([
DefaultReset,
{
position: 'absolute',
zIndex: 1,
opacity: config.opacity.Placeholder,
pointerEvents: 'none',
userSelect: 'none',
selectors: {
'&:not(:first-child)': {
display: 'none',
},
},
},
]);
export const EditorToolbar = style([
DefaultReset,
{
padding: config.space.S100,
},
]);

82
src/app/components/editor/Editor.preview.tsx Normal file
View file

@ -0,0 +1,82 @@
import React, { useState } from 'react';
import FocusTrap from 'focus-trap-react';
import {
config,
Icon,
IconButton,
Icons,
Line,
Modal,
Overlay,
OverlayBackdrop,
OverlayCenter,
} from 'folds';
import { CustomEditor, useEditor } from './Editor';
import { Toolbar } from './Toolbar';
export function EditorPreview() {
const [open, setOpen] = useState(false);
const editor = useEditor();
const [toolbar, setToolbar] = useState(false);
return (
<>
<IconButton variant="SurfaceVariant" onClick={() => setOpen(!open)}>
<Icon src={Icons.BlockQuote} />
</IconButton>
<Overlay open={open} backdrop={<OverlayBackdrop />}>
<OverlayCenter>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setOpen(false),
clickOutsideDeactivates: true,
}}
>
<Modal size="500">
<div style={{ padding: config.space.S400 }}>
<CustomEditor
editor={editor}
placeholder="Send a message..."
before={
<IconButton variant="SurfaceVariant" size="300" radii="300">
<Icon src={Icons.PlusCircle} />
</IconButton>
}
after={
<>
<IconButton
variant="SurfaceVariant"
size="300"
radii="300"
onClick={() => setToolbar(!toolbar)}
aria-pressed={toolbar}
>
<Icon src={toolbar ? Icons.AlphabetUnderline : Icons.Alphabet} />
</IconButton>
<IconButton variant="SurfaceVariant" size="300" radii="300">
<Icon src={Icons.Smile} />
</IconButton>
<IconButton variant="SurfaceVariant" size="300" radii="300">
<Icon src={Icons.Send} />
</IconButton>
</>
}
bottom={
toolbar && (
<div>
<Line variant="SurfaceVariant" size="300" />
<Toolbar />
</div>
)
}
/>
</div>
</Modal>
</FocusTrap>
</OverlayCenter>
</Overlay>
</>
);
}

151
src/app/components/editor/Editor.tsx Normal file
View file

@ -0,0 +1,151 @@
/* eslint-disable no-param-reassign */
import React, {
ClipboardEventHandler,
KeyboardEventHandler,
ReactNode,
forwardRef,
useCallback,
useState,
} from 'react';
import { Box, Scroll, Text } from 'folds';
import { Descendant, Editor, createEditor } from 'slate';
import {
Slate,
Editable,
withReact,
RenderLeafProps,
RenderElementProps,
RenderPlaceholderProps,
} from 'slate-react';
import { BlockType, RenderElement, RenderLeaf } from './Elements';
import { CustomElement } from './slate';
import * as css from './Editor.css';
import { toggleKeyboardShortcut } from './keyboard';
const initialValue: CustomElement[] = [
{
type: BlockType.Paragraph,
children: [{ text: '' }],
},
];
const withInline = (editor: Editor): Editor => {
const { isInline } = editor;
editor.isInline = (element) =>
[BlockType.Mention, BlockType.Emoticon, BlockType.Link].includes(element.type) ||
isInline(element);
return editor;
};
const withVoid = (editor: Editor): Editor => {
const { isVoid } = editor;
editor.isVoid = (element) =>
[BlockType.Mention, BlockType.Emoticon].includes(element.type) || isVoid(element);
return editor;
};
export const useEditor = (): Editor => {
const [editor] = useState(withInline(withVoid(withReact(createEditor()))));
return editor;
};
export type EditorChangeHandler = ((value: Descendant[]) => void) | undefined;
type CustomEditorProps = {
top?: ReactNode;
bottom?: ReactNode;
before?: ReactNode;
after?: ReactNode;
maxHeight?: string;
editor: Editor;
placeholder?: string;
onKeyDown?: KeyboardEventHandler;
onChange?: EditorChangeHandler;
onPaste?: ClipboardEventHandler;
};
export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
(
{
top,
bottom,
before,
after,
maxHeight = '50vh',
editor,
placeholder,
onKeyDown,
onChange,
onPaste,
},
ref
) => {
const renderElement = useCallback(
(props: RenderElementProps) => <RenderElement {...props} />,
[]
);
const renderLeaf = useCallback((props: RenderLeafProps) => <RenderLeaf {...props} />, []);
const handleKeydown: KeyboardEventHandler = useCallback(
(evt) => {
onKeyDown?.(evt);
toggleKeyboardShortcut(editor, evt);
},
[editor, onKeyDown]
);
const renderPlaceholder = useCallback(({ attributes, children }: RenderPlaceholderProps) => {
// drop style attribute as we use our custom placeholder css.
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { style, ...props } = attributes;
return (
<Text as="span" {...props} className={css.EditorPlaceholder} contentEditable={false}>
{children}
</Text>
);
}, []);
return (
<div className={css.Editor} ref={ref}>
<Slate editor={editor} value={initialValue} onChange={onChange}>
{top}
<Box alignItems="Start">
{before && (
<Box className={css.EditorOptions} alignItems="Center" gap="100" shrink="No">
{before}
</Box>
)}
<Scroll
className={css.EditorTextareaScroll}
variant="SurfaceVariant"
style={{ maxHeight }}
size="300"
visibility="Hover"
hideTrack
>
<Editable
className={css.EditorTextarea}
placeholder={placeholder}
renderPlaceholder={renderPlaceholder}
renderElement={renderElement}
renderLeaf={renderLeaf}
onKeyDown={handleKeydown}
onPaste={onPaste}
/>
</Scroll>
{after && (
<Box className={css.EditorOptions} alignItems="Center" gap="100" shrink="No">
{after}
</Box>
)}
</Box>
{bottom}
</Slate>
</div>
);
}
);

142
src/app/components/editor/Elements.css.ts Normal file
View file

@ -0,0 +1,142 @@
import { style } from '@vanilla-extract/css';
import { recipe } from '@vanilla-extract/recipes';
import { color, config, DefaultReset, toRem } from 'folds';
const MarginBottom = style({
marginBottom: config.space.S200,
selectors: {
'&:last-child': {
marginBottom: 0,
},
},
});
export const Paragraph = style([MarginBottom]);
export const Heading = style([MarginBottom]);
export const BlockQuote = style([
DefaultReset,
MarginBottom,
{
paddingLeft: config.space.S200,
borderLeft: `${config.borderWidth.B700} solid ${color.SurfaceVariant.ContainerLine}`,
fontStyle: 'italic',
},
]);
const BaseCode = style({
fontFamily: 'monospace',
color: color.Warning.OnContainer,
background: color.Warning.Container,
border: `${config.borderWidth.B300} solid ${color.Warning.ContainerLine}`,
borderRadius: config.radii.R300,
});
export const Code = style([
DefaultReset,
BaseCode,
{
padding: `0 ${config.space.S100}`,
},
]);
export const Spoiler = style([
DefaultReset,
{
padding: `0 ${config.space.S100}`,
backgroundColor: color.SurfaceVariant.ContainerActive,
borderRadius: config.radii.R300,
},
]);
export const CodeBlock = style([DefaultReset, BaseCode, MarginBottom]);
export const CodeBlockInternal = style({
padding: `${config.space.S200} ${config.space.S200} 0`,
});
export const List = style([
DefaultReset,
MarginBottom,
{
padding: `0 ${config.space.S100}`,
paddingLeft: config.space.S600,
},
]);
export const InlineChromiumBugfix = style({
fontSize: 0,
lineHeight: 0,
});
export const Mention = recipe({
base: [
DefaultReset,
{
backgroundColor: color.Secondary.Container,
color: color.Secondary.OnContainer,
boxShadow: `0 0 0 ${config.borderWidth.B300} ${color.Secondary.ContainerLine}`,
padding: `0 ${toRem(2)}`,
borderRadius: config.radii.R300,
fontWeight: config.fontWeight.W500,
},
],
variants: {
highlight: {
true: {
backgroundColor: color.Primary.Container,
color: color.Primary.OnContainer,
boxShadow: `0 0 0 ${config.borderWidth.B300} ${color.Primary.ContainerLine}`,
},
},
focus: {
true: {
boxShadow: `0 0 0 ${config.borderWidth.B300} ${color.SurfaceVariant.OnContainer}`,
},
},
},
});
export const EmoticonBase = style([
DefaultReset,
{
display: 'inline-block',
padding: '0.05rem',
height: '1em',
verticalAlign: 'middle',
},
]);
export const Emoticon = recipe({
base: [
DefaultReset,
{
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
height: '1em',
minWidth: '1em',
fontSize: '1.47em',
lineHeight: '1em',
verticalAlign: 'middle',
position: 'relative',
top: '-0.25em',
borderRadius: config.radii.R300,
},
],
variants: {
focus: {
true: {
boxShadow: `0 0 0 ${config.borderWidth.B300} ${color.SurfaceVariant.OnContainer}`,
},
},
},
});
export const EmoticonImg = style([
DefaultReset,
{
height: '1em',
cursor: 'default',
},
]);

254
src/app/components/editor/Elements.tsx Normal file
View file

@ -0,0 +1,254 @@
import { Scroll, Text } from 'folds';
import React from 'react';
import { RenderElementProps, RenderLeafProps, useFocused, useSelected } from 'slate-react';
import * as css from './Elements.css';
import { EmoticonElement, LinkElement, MentionElement } from './slate';
import { useMatrixClient } from '../../hooks/useMatrixClient';
export enum MarkType {
Bold = 'bold',
Italic = 'italic',
Underline = 'underline',
StrikeThrough = 'strikeThrough',
Code = 'code',
Spoiler = 'spoiler',
}
export enum BlockType {
Paragraph = 'paragraph',
Heading = 'heading',
CodeLine = 'code-line',
CodeBlock = 'code-block',
QuoteLine = 'quote-line',
BlockQuote = 'block-quote',
ListItem = 'list-item',
OrderedList = 'ordered-list',
UnorderedList = 'unordered-list',
Mention = 'mention',
Emoticon = 'emoticon',
Link = 'link',
}
// Put this at the start and end of an inline component to work around this Chromium bug:
// https://bugs.chromium.org/p/chromium/issues/detail?id=1249405
function InlineChromiumBugfix() {
return (
<span className={css.InlineChromiumBugfix} contentEditable={false}>
{String.fromCodePoint(160) /* Non-breaking space */}
</span>
);
}
function RenderMentionElement({
attributes,
element,
children,
}: { element: MentionElement } & RenderElementProps) {
const selected = useSelected();
const focused = useFocused();
return (
<span
{...attributes}
className={css.Mention({
highlight: element.highlight,
focus: selected && focused,
})}
contentEditable={false}
>
{element.name}
{children}
</span>
);
}
function RenderEmoticonElement({
attributes,
element,
children,
}: { element: EmoticonElement } & RenderElementProps) {
const mx = useMatrixClient();
const selected = useSelected();
const focused = useFocused();
return (
<span className={css.EmoticonBase} {...attributes}>
<span
className={css.Emoticon({
focus: selected && focused,
})}
contentEditable={false}
>
{element.key.startsWith('mxc://') ? (
<img
className={css.EmoticonImg}
src={mx.mxcUrlToHttp(element.key) ?? element.key}
alt={element.shortcode}
/>
) : (
element.key
)}
{children}
</span>
</span>
);
}
function RenderLinkElement({
attributes,
element,
children,
}: { element: LinkElement } & RenderElementProps) {
return (
<a href={element.href} {...attributes}>
<InlineChromiumBugfix />
{children}
</a>
);
}
export function RenderElement({ attributes, element, children }: RenderElementProps) {
switch (element.type) {
case BlockType.Paragraph:
return (
<Text {...attributes} className={css.Paragraph}>
{children}
</Text>
);
case BlockType.Heading:
if (element.level === 1)
return (
<Text className={css.Heading} as="h2" size="H2" {...attributes}>
{children}
</Text>
);
if (element.level === 2)
return (
<Text className={css.Heading} as="h3" size="H3" {...attributes}>
{children}
</Text>
);
if (element.level === 3)
return (
<Text className={css.Heading} as="h4" size="H4" {...attributes}>
{children}
</Text>
);
return (
<Text className={css.Heading} as="h3" size="H3" {...attributes}>
{children}
</Text>
);
case BlockType.CodeLine:
return <div {...attributes}>{children}</div>;
case BlockType.CodeBlock:
return (
<Text as="pre" className={css.CodeBlock} {...attributes}>
<Scroll direction="Horizontal" variant="Warning" size="300" visibility="Hover" hideTrack>
<div className={css.CodeBlockInternal}>{children}</div>
</Scroll>
</Text>
);
case BlockType.QuoteLine:
return <div {...attributes}>{children}</div>;
case BlockType.BlockQuote:
return (
<Text as="blockquote" className={css.BlockQuote} {...attributes}>
{children}
</Text>
);
case BlockType.ListItem:
return (
<Text as="li" {...attributes}>
{children}
</Text>
);
case BlockType.OrderedList:
return (
<ol className={css.List} {...attributes}>
{children}
</ol>
);
case BlockType.UnorderedList:
return (
<ul className={css.List} {...attributes}>
{children}
</ul>
);
case BlockType.Mention:
return (
<RenderMentionElement attributes={attributes} element={element}>
{children}
</RenderMentionElement>
);
case BlockType.Emoticon:
return (
<RenderEmoticonElement attributes={attributes} element={element}>
{children}
</RenderEmoticonElement>
);
case BlockType.Link:
return (
<RenderLinkElement attributes={attributes} element={element}>
{children}
</RenderLinkElement>
);
default:
return (
<Text className={css.Paragraph} {...attributes}>
{children}
</Text>
);
}
}
export function RenderLeaf({ attributes, leaf, children }: RenderLeafProps) {
let child = children;
if (leaf.bold)
child = (
<strong {...attributes}>
<InlineChromiumBugfix />
{child}
</strong>
);
if (leaf.italic)
child = (
<i {...attributes}>
<InlineChromiumBugfix />
{child}
</i>
);
if (leaf.underline)
child = (
<u {...attributes}>
<InlineChromiumBugfix />
{child}
</u>
);
if (leaf.strikeThrough)
child = (
<s {...attributes}>
<InlineChromiumBugfix />
{child}
</s>
);
if (leaf.code)
child = (
<code className={css.Code} {...attributes}>
<InlineChromiumBugfix />
{child}
</code>
);
if (leaf.spoiler)
child = (
<span className={css.Spoiler} {...attributes}>
<InlineChromiumBugfix />
{child}
</span>
);
if (child !== children) return child;
return <span {...attributes}>{child}</span>;
}

247
src/app/components/editor/Toolbar.tsx Normal file
View file

@ -0,0 +1,247 @@
import FocusTrap from 'focus-trap-react';
import {
Badge,
Box,
config,
Icon,
IconButton,
Icons,
IconSrc,
Line,
Menu,
PopOut,
Text,
Tooltip,
TooltipProvider,
toRem,
} from 'folds';
import React, { ReactNode, useState } from 'react';
import { ReactEditor, useSlate } from 'slate-react';
import { isBlockActive, isMarkActive, toggleBlock, toggleMark } from './common';
import * as css from './Editor.css';
import { BlockType, MarkType } from './Elements';
import { HeadingLevel } from './slate';
import { isMacOS } from '../../utils/user-agent';
import { KeySymbol } from '../../utils/key-symbol';
function BtnTooltip({ text, shortCode }: { text: string; shortCode?: string }) {
return (
<Tooltip style={{ padding: config.space.S300 }}>
<Box gap="200" direction="Column" alignItems="Center">
<Text align="Center">{text}</Text>
{shortCode && (
<Badge as="kbd" radii="300" size="500">
<Text size="T200" align="Center">
{shortCode}
</Text>
</Badge>
)}
</Box>
</Tooltip>
);
}
type MarkButtonProps = { format: MarkType; icon: IconSrc; tooltip: ReactNode };
export function MarkButton({ format, icon, tooltip }: MarkButtonProps) {
const editor = useSlate();
const handleClick = () => {
toggleMark(editor, format);
ReactEditor.focus(editor);
};
return (
<TooltipProvider tooltip={tooltip} delay={500}>
{(triggerRef) => (
<IconButton
ref={triggerRef}
variant="SurfaceVariant"
onClick={handleClick}
aria-pressed={isMarkActive(editor, format)}
size="300"
radii="300"
>
<Icon size="50" src={icon} />
</IconButton>
)}
</TooltipProvider>
);
}
type BlockButtonProps = {
format: BlockType;
icon: IconSrc;
tooltip: ReactNode;
};
export function BlockButton({ format, icon, tooltip }: BlockButtonProps) {
const editor = useSlate();
const handleClick = () => {
toggleBlock(editor, format, { level: 1 });
ReactEditor.focus(editor);
};
return (
<TooltipProvider tooltip={tooltip} delay={500}>
{(triggerRef) => (
<IconButton
ref={triggerRef}
variant="SurfaceVariant"
onClick={handleClick}
aria-pressed={isBlockActive(editor, format)}
size="300"
radii="300"
>
<Icon size="50" src={icon} />
</IconButton>
)}
</TooltipProvider>
);
}
export function HeadingBlockButton() {
const editor = useSlate();
const [level, setLevel] = useState<HeadingLevel>(1);
const [open, setOpen] = useState(false);
const isActive = isBlockActive(editor, BlockType.Heading);
const handleMenuSelect = (selectedLevel: HeadingLevel) => {
setOpen(false);
setLevel(selectedLevel);
toggleBlock(editor, BlockType.Heading, { level: selectedLevel });
ReactEditor.focus(editor);
};
return (
<PopOut
open={open}
align="Start"
position="Top"
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => setOpen(false),
clickOutsideDeactivates: true,
isKeyForward: (evt: KeyboardEvent) =>
evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
}}
>
<Menu style={{ padding: config.space.S100 }}>
<Box gap="100">
<IconButton onClick={() => handleMenuSelect(1)} size="300" radii="300">
<Icon size="100" src={Icons.Heading1} />
</IconButton>
<IconButton onClick={() => handleMenuSelect(2)} size="300" radii="300">
<Icon size="100" src={Icons.Heading2} />
</IconButton>
<IconButton onClick={() => handleMenuSelect(3)} size="300" radii="300">
<Icon size="100" src={Icons.Heading3} />
</IconButton>
</Box>
</Menu>
</FocusTrap>
}
>
{(ref) => (
<IconButton
style={{ width: 'unset' }}
ref={ref}
variant="SurfaceVariant"
onClick={() => (isActive ? toggleBlock(editor, BlockType.Heading) : setOpen(!open))}
aria-pressed={isActive}
size="300"
radii="300"
>
<Icon size="50" src={Icons[`Heading${level}`]} />
<Icon size="50" src={isActive ? Icons.Cross : Icons.ChevronBottom} />
</IconButton>
)}
</PopOut>
);
}
export function Toolbar() {
const editor = useSlate();
const allowInline = !isBlockActive(editor, BlockType.CodeBlock);
const modKey = isMacOS() ? KeySymbol.Command : 'Ctrl';
return (
<Box className={css.EditorToolbar} alignItems="Center" gap="300">
<Box gap="100">
<HeadingBlockButton />
<BlockButton
format={BlockType.OrderedList}
icon={Icons.OrderList}
tooltip={
<BtnTooltip text="Ordered List" shortCode={`${modKey} + ${KeySymbol.Shift} + 0`} />
}
/>
<BlockButton
format={BlockType.UnorderedList}
icon={Icons.UnorderList}
tooltip={
<BtnTooltip text="Unordered List" shortCode={`${modKey} + ${KeySymbol.Shift} + 8`} />
}
/>
<BlockButton
format={BlockType.BlockQuote}
icon={Icons.BlockQuote}
tooltip={
<BtnTooltip text="Block Quote" shortCode={`${modKey} + ${KeySymbol.Shift} + '`} />
}
/>
<BlockButton
format={BlockType.CodeBlock}
icon={Icons.BlockCode}
tooltip={
<BtnTooltip text="Block Code" shortCode={`${modKey} + ${KeySymbol.Shift} + ;`} />
}
/>
</Box>
{allowInline && (
<>
<Line variant="SurfaceVariant" direction="Vertical" style={{ height: toRem(12) }} />
<Box gap="100">
<MarkButton
format={MarkType.Bold}
icon={Icons.Bold}
tooltip={<BtnTooltip text="Bold" shortCode={`${modKey} + B`} />}
/>
<MarkButton
format={MarkType.Italic}
icon={Icons.Italic}
tooltip={<BtnTooltip text="Italic" shortCode={`${modKey} + I`} />}
/>
<MarkButton
format={MarkType.Underline}
icon={Icons.Underline}
tooltip={<BtnTooltip text="Underline" shortCode={`${modKey} + U`} />}
/>
<MarkButton
format={MarkType.StrikeThrough}
icon={Icons.Strike}
tooltip={
<BtnTooltip
text="Strike Through"
shortCode={`${modKey} + ${KeySymbol.Shift} + U`}
/>
}
/>
<MarkButton
format={MarkType.Code}
icon={Icons.Code}
tooltip={<BtnTooltip text="Inline Code" shortCode={`${modKey} + [`} />}
/>
<MarkButton
format={MarkType.Spoiler}
icon={Icons.EyeBlind}
tooltip={<BtnTooltip text="Spoiler" shortCode={`${modKey} + H`} />}
/>
</Box>
</>
)}
</Box>
);
}

35
src/app/components/editor/autocomplete/AutocompleteMenu.css.tsx Normal file
View file

@ -0,0 +1,35 @@
import { style } from '@vanilla-extract/css';
import { DefaultReset, config } from 'folds';
export const AutocompleteMenuBase = style([
DefaultReset,
{
position: 'relative',
},
]);
export const AutocompleteMenuContainer = style([
DefaultReset,
{
position: 'absolute',
bottom: config.space.S200,
left: 0,
right: 0,
zIndex: config.zIndex.Max,
},
]);
export const AutocompleteMenu = style([
DefaultReset,
{
maxHeight: '30vh',
height: '100%',
display: 'flex',
flexDirection: 'column',
},
]);
export const AutocompleteMenuHeader = style([
DefaultReset,
{ padding: `0 ${config.space.S300}`, flexShrink: 0 },
]);

40
src/app/components/editor/autocomplete/AutocompleteMenu.tsx Normal file
View file

@ -0,0 +1,40 @@
import React, { ReactNode } from 'react';
import FocusTrap from 'focus-trap-react';
import isHotkey from 'is-hotkey';
import { Header, Menu, Scroll, config } from 'folds';
import * as css from './AutocompleteMenu.css';
import { preventScrollWithArrowKey } from '../../../utils/keyboard';
type AutocompleteMenuProps = {
requestClose: () => void;
headerContent: ReactNode;
children: ReactNode;
};
export function AutocompleteMenu({ headerContent, requestClose, children }: AutocompleteMenuProps) {
return (
<div className={css.AutocompleteMenuBase}>
<div className={css.AutocompleteMenuContainer}>
<FocusTrap
focusTrapOptions={{
initialFocus: false,
onDeactivate: () => requestClose(),
clickOutsideDeactivates: true,
allowOutsideClick: true,
isKeyForward: (evt: KeyboardEvent) => isHotkey('arrowdown', evt),
isKeyBackward: (evt: KeyboardEvent) => isHotkey('arrowup', evt),
}}
>
<Menu className={css.AutocompleteMenu}>
<Header className={css.AutocompleteMenuHeader} size="400">
{headerContent}
</Header>
<Scroll style={{ flexGrow: 1 }} onKeyDown={preventScrollWithArrowKey}>
<div style={{ padding: config.space.S200 }}>{children}</div>
</Scroll>
</Menu>
</FocusTrap>
</div>
</div>
);
}

129
src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx Normal file
View file

@ -0,0 +1,129 @@
import React, { KeyboardEvent as ReactKeyboardEvent, useEffect, useMemo } from 'react';
import { Editor } from 'slate';
import { Box, MenuItem, Text, toRem } from 'folds';
import { Room } from 'matrix-js-sdk';
import { AutocompleteQuery } from './autocompleteQuery';
import { AutocompleteMenu } from './AutocompleteMenu';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import {
SearchItemStrGetter,
UseAsyncSearchOptions,
useAsyncSearch,
} from '../../../hooks/useAsyncSearch';
import { onTabPress } from '../../../utils/keyboard';
import { createEmoticonElement, moveCursor, replaceWithElement } from '../common';
import { useRecentEmoji } from '../../../hooks/useRecentEmoji';
import { useRelevantImagePacks } from '../../../hooks/useImagePacks';
import { IEmoji, emojis } from '../../../plugins/emoji';
import { ExtendedPackImage, PackUsage } from '../../../plugins/custom-emoji';
import { useKeyDown } from '../../../hooks/useKeyDown';
type EmoticonCompleteHandler = (key: string, shortcode: string) => void;
type EmoticonSearchItem = ExtendedPackImage | IEmoji;
type EmoticonAutocompleteProps = {
imagePackRooms: Room[];
editor: Editor;
query: AutocompleteQuery<string>;
requestClose: () => void;
};
const SEARCH_OPTIONS: UseAsyncSearchOptions = {
limit: 20,
matchOptions: {
contain: true,
},
};
const getEmoticonStr: SearchItemStrGetter<EmoticonSearchItem> = (emoticon) => [
`:${emoticon.shortcode}:`,
];
export function EmoticonAutocomplete({
imagePackRooms,
editor,
query,
requestClose,
}: EmoticonAutocompleteProps) {
const mx = useMatrixClient();
const imagePacks = useRelevantImagePacks(mx, PackUsage.Emoticon, imagePackRooms);
const recentEmoji = useRecentEmoji(mx, 20);
const searchList = useMemo(() => {
const list: Array<EmoticonSearchItem> = [];
return list.concat(
imagePacks.flatMap((pack) => pack.getImagesFor(PackUsage.Emoticon)),
emojis
);
}, [imagePacks]);
const [result, search] = useAsyncSearch(searchList, getEmoticonStr, SEARCH_OPTIONS);
const autoCompleteEmoticon = result ? result.items : recentEmoji;
useEffect(() => {
search(query.text);
}, [query.text, search]);
const handleAutocomplete: EmoticonCompleteHandler = (key, shortcode) => {
const emoticonEl = createEmoticonElement(key, shortcode);
replaceWithElement(editor, query.range, emoticonEl);
moveCursor(editor, true);
requestClose();
};
useKeyDown(window, (evt: KeyboardEvent) => {
onTabPress(evt, () => {
if (autoCompleteEmoticon.length === 0) return;
const emoticon = autoCompleteEmoticon[0];
const key = 'url' in emoticon ? emoticon.url : emoticon.unicode;
handleAutocomplete(key, emoticon.shortcode);
});
});
return autoCompleteEmoticon.length === 0 ? null : (
<AutocompleteMenu headerContent={<Text size="L400">Emojis</Text>} requestClose={requestClose}>
{autoCompleteEmoticon.map((emoticon) => {
const isCustomEmoji = 'url' in emoticon;
const key = isCustomEmoji ? emoticon.url : emoticon.unicode;
return (
<MenuItem
key={emoticon.shortcode + key}
as="button"
radii="300"
onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
onTabPress(evt, () => handleAutocomplete(key, emoticon.shortcode))
}
onClick={() => handleAutocomplete(key, emoticon.shortcode)}
before={
isCustomEmoji ? (
<Box
shrink="No"
as="img"
src={mx.mxcUrlToHttp(key) || key}
alt={emoticon.shortcode}
style={{ width: toRem(24), height: toRem(24) }}
/>
) : (
<Box
shrink="No"
as="span"
display="InlineFlex"
style={{ fontSize: toRem(24), lineHeight: toRem(24) }}
>
{key}
</Box>
)
}
>
<Text style={{ flexGrow: 1 }} size="B400" truncate>
:{emoticon.shortcode}:
</Text>
</MenuItem>
);
})}
</AutocompleteMenu>
);
}

181
src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx Normal file
View file

@ -0,0 +1,181 @@
import React, { KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect, useMemo } from 'react';
import { Editor } from 'slate';
import { Avatar, AvatarFallback, AvatarImage, Icon, Icons, MenuItem, Text, color } from 'folds';
import { MatrixClient } from 'matrix-js-sdk';
import { createMentionElement, moveCursor, replaceWithElement } from '../common';
import { getRoomAvatarUrl, joinRuleToIconSrc } from '../../../utils/room';
import { roomIdByActivity } from '../../../../util/sort';
import initMatrix from '../../../../client/initMatrix';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { AutocompleteQuery } from './autocompleteQuery';
import { AutocompleteMenu } from './AutocompleteMenu';
import { getMxIdServer, validMxId } from '../../../utils/matrix';
import { UseAsyncSearchOptions, useAsyncSearch } from '../../../hooks/useAsyncSearch';
import { onTabPress } from '../../../utils/keyboard';
import { useKeyDown } from '../../../hooks/useKeyDown';
type MentionAutoCompleteHandler = (roomAliasOrId: string, name: string) => void;
const roomAliasFromQueryText = (mx: MatrixClient, text: string) =>
validMxId(`#${text}`)
? `#${text}`
: `#${text}${text.endsWith(':') ? '' : ':'}${getMxIdServer(mx.getUserId() ?? '')}`;
function UnknownRoomMentionItem({
query,
handleAutocomplete,
}: {
query: AutocompleteQuery<string>;
handleAutocomplete: MentionAutoCompleteHandler;
}) {
const mx = useMatrixClient();
const roomAlias: string = roomAliasFromQueryText(mx, query.text);
return (
<MenuItem
as="button"
radii="300"
onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
onTabPress(evt, () => handleAutocomplete(roomAlias, roomAlias))
}
onClick={() => handleAutocomplete(roomAlias, roomAlias)}
before={
<Avatar size="200">
<Icon src={Icons.Hash} size="100" />
</Avatar>
}
>
<Text style={{ flexGrow: 1 }} size="B400">
{roomAlias}
</Text>
</MenuItem>
);
}
type RoomMentionAutocompleteProps = {
roomId: string;
editor: Editor;
query: AutocompleteQuery<string>;
requestClose: () => void;
};
const SEARCH_OPTIONS: UseAsyncSearchOptions = {
limit: 20,
matchOptions: {
contain: true,
},
};
export function RoomMentionAutocomplete({
roomId,
editor,
query,
requestClose,
}: RoomMentionAutocompleteProps) {
const mx = useMatrixClient();
const dms: Set<string> = initMatrix.roomList?.directs ?? new Set();
const allRoomId: string[] = useMemo(() => {
const { spaces = [], rooms = [], directs = [] } = initMatrix.roomList ?? {};
return [...spaces, ...rooms, ...directs].sort(roomIdByActivity);
}, []);
const [result, search] = useAsyncSearch(
allRoomId,
useCallback(
(rId) => {
const r = mx.getRoom(rId);
if (!r) return 'Unknown Room';
const alias = r.getCanonicalAlias();
if (alias) return [r.name, alias];
return r.name;
},
[mx]
),
SEARCH_OPTIONS
);
const autoCompleteRoomIds = result ? result.items : allRoomId.slice(0, 20);
useEffect(() => {
search(query.text);
}, [query.text, search]);
const handleAutocomplete: MentionAutoCompleteHandler = (roomAliasOrId, name) => {
const mentionEl = createMentionElement(
roomAliasOrId,
name.startsWith('#') ? name : `#${name}`,
roomId === roomAliasOrId || mx.getRoom(roomId)?.getCanonicalAlias() === roomAliasOrId
);
replaceWithElement(editor, query.range, mentionEl);
moveCursor(editor, true);
requestClose();
};
useKeyDown(window, (evt: KeyboardEvent) => {
onTabPress(evt, () => {
if (autoCompleteRoomIds.length === 0) {
const alias = roomAliasFromQueryText(mx, query.text);
handleAutocomplete(alias, alias);
return;
}
const rId = autoCompleteRoomIds[0];
const name = mx.getRoom(rId)?.name ?? rId;
handleAutocomplete(rId, name);
});
});
return (
<AutocompleteMenu headerContent={<Text size="L400">Rooms</Text>} requestClose={requestClose}>
{autoCompleteRoomIds.length === 0 ? (
<UnknownRoomMentionItem query={query} handleAutocomplete={handleAutocomplete} />
) : (
autoCompleteRoomIds.map((rId) => {
const room = mx.getRoom(rId);
if (!room) return null;
const dm = dms.has(room.roomId);
const avatarUrl = getRoomAvatarUrl(mx, room);
const iconSrc = !dm && joinRuleToIconSrc(Icons, room.getJoinRule(), room.isSpaceRoom());
return (
<MenuItem
key={rId}
as="button"
radii="300"
onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
onTabPress(evt, () => handleAutocomplete(rId, room.name))
}
onClick={() => handleAutocomplete(rId, room.name)}
after={
<Text size="T200" priority="300" truncate>
{room.getCanonicalAlias() ?? ''}
</Text>
}
before={
<Avatar size="200">
{iconSrc && <Icon src={iconSrc} size="100" />}
{avatarUrl && !iconSrc && <AvatarImage src={avatarUrl} alt={room.name} />}
{!avatarUrl && !iconSrc && (
<AvatarFallback
style={{
backgroundColor: color.Secondary.Container,
color: color.Secondary.OnContainer,
}}
>
<Text size="H6">{room.name[0]}</Text>
</AvatarFallback>
)}
</Avatar>
}
>
<Text style={{ flexGrow: 1 }} size="B400" truncate>
{room.name}
</Text>
</MenuItem>
);
})
)}
</AutocompleteMenu>
);
}

191
src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx Normal file
View file

@ -0,0 +1,191 @@
import React, { useEffect, KeyboardEvent as ReactKeyboardEvent } from 'react';
import { Editor } from 'slate';
import { Avatar, AvatarFallback, AvatarImage, MenuItem, Text, color } from 'folds';
import { MatrixClient, RoomMember } from 'matrix-js-sdk';
import { AutocompleteQuery } from './autocompleteQuery';
import { AutocompleteMenu } from './AutocompleteMenu';
import { useRoomMembers } from '../../../hooks/useRoomMembers';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import {
SearchItemStrGetter,
UseAsyncSearchOptions,
useAsyncSearch,
} from '../../../hooks/useAsyncSearch';
import { onTabPress } from '../../../utils/keyboard';
import { createMentionElement, moveCursor, replaceWithElement } from '../common';
import { useKeyDown } from '../../../hooks/useKeyDown';
import { getMxIdLocalPart, getMxIdServer, validMxId } from '../../../utils/matrix';
type MentionAutoCompleteHandler = (userId: string, name: string) => void;
const userIdFromQueryText = (mx: MatrixClient, text: string) =>
validMxId(`@${text}`)
? `@${text}`
: `@${text}${text.endsWith(':') ? '' : ':'}${getMxIdServer(mx.getUserId() ?? '')}`;
function UnknownMentionItem({
query,
userId,
name,
handleAutocomplete,
}: {
query: AutocompleteQuery<string>;
userId: string;
name: string;
handleAutocomplete: MentionAutoCompleteHandler;
}) {
return (
<MenuItem
as="button"
radii="300"
onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
onTabPress(evt, () => handleAutocomplete(userId, name))
}
onClick={() => handleAutocomplete(userId, name)}
before={
<Avatar size="200">
<AvatarFallback
style={{
backgroundColor: color.Secondary.Container,
color: color.Secondary.OnContainer,
}}
>
<Text size="H6">{query.text[0]}</Text>
</AvatarFallback>
</Avatar>
}
>
<Text style={{ flexGrow: 1 }} size="B400">
{name}
</Text>
</MenuItem>
);
}
type UserMentionAutocompleteProps = {
roomId: string;
editor: Editor;
query: AutocompleteQuery<string>;
requestClose: () => void;
};
const SEARCH_OPTIONS: UseAsyncSearchOptions = {
limit: 20,
matchOptions: {
contain: true,
},
};
const getRoomMemberStr: SearchItemStrGetter<RoomMember> = (roomMember) => [
roomMember.name,
getMxIdLocalPart(roomMember.userId) ?? roomMember.userId,
roomMember.userId,
];
export function UserMentionAutocomplete({
roomId,
editor,
query,
requestClose,
}: UserMentionAutocompleteProps) {
const mx = useMatrixClient();
const room = mx.getRoom(roomId);
const roomAliasOrId = room?.getCanonicalAlias() || roomId;
const members = useRoomMembers(mx, roomId);
const [result, search] = useAsyncSearch(members, getRoomMemberStr, SEARCH_OPTIONS);
const autoCompleteMembers = result ? result.items : members.slice(0, 20);
useEffect(() => {
search(query.text);
}, [query.text, search]);
const handleAutocomplete: MentionAutoCompleteHandler = (uId, name) => {
const mentionEl = createMentionElement(
uId,
name.startsWith('@') ? name : `@${name}`,
mx.getUserId() === uId || roomAliasOrId === uId
);
replaceWithElement(editor, query.range, mentionEl);
moveCursor(editor, true);
requestClose();
};
useKeyDown(window, (evt: KeyboardEvent) => {
onTabPress(evt, () => {
if (query.text === 'room') {
handleAutocomplete(roomAliasOrId, '@room');
return;
}
if (autoCompleteMembers.length === 0) {
const userId = userIdFromQueryText(mx, query.text);
handleAutocomplete(userId, userId);
return;
}
const roomMember = autoCompleteMembers[0];
handleAutocomplete(roomMember.userId, roomMember.name);
});
});
return (
<AutocompleteMenu headerContent={<Text size="L400">Mentions</Text>} requestClose={requestClose}>
{query.text === 'room' && (
<UnknownMentionItem
query={query}
userId={roomAliasOrId}
name="@room"
handleAutocomplete={handleAutocomplete}
/>
)}
{autoCompleteMembers.length === 0 ? (
<UnknownMentionItem
query={query}
userId={userIdFromQueryText(mx, query.text)}
name={userIdFromQueryText(mx, query.text)}
handleAutocomplete={handleAutocomplete}
/>
) : (
autoCompleteMembers.map((roomMember) => {
const avatarUrl = roomMember.getAvatarUrl(mx.baseUrl, 32, 32, 'crop', undefined, false);
return (
<MenuItem
key={roomMember.userId}
as="button"
radii="300"
onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
onTabPress(evt, () => handleAutocomplete(roomMember.userId, roomMember.name))
}
onClick={() => handleAutocomplete(roomMember.userId, roomMember.name)}
after={
<Text size="T200" priority="300" truncate>
{roomMember.userId}
</Text>
}
before={
<Avatar size="200">
{avatarUrl ? (
<AvatarImage src={avatarUrl} alt={roomMember.userId} />
) : (
<AvatarFallback
style={{
backgroundColor: color.Secondary.Container,
color: color.Secondary.OnContainer,
}}
>
<Text size="H6">{roomMember.name[0] || roomMember.userId[1]}</Text>
</AvatarFallback>
)}
</Avatar>
}
>
<Text style={{ flexGrow: 1 }} size="B400" truncate>
{roomMember.name}
</Text>
</MenuItem>
);
})
)}
</AutocompleteMenu>
);
}

46
src/app/components/editor/autocomplete/autocompleteQuery.ts Normal file
View file

@ -0,0 +1,46 @@
import { BaseRange, Editor } from 'slate';
export enum AutocompletePrefix {
RoomMention = '#',
UserMention = '@',
Emoticon = ':',
}
export const AUTOCOMPLETE_PREFIXES: readonly AutocompletePrefix[] = [
AutocompletePrefix.RoomMention,
AutocompletePrefix.UserMention,
AutocompletePrefix.Emoticon,
];
export type AutocompleteQuery<TPrefix extends string> = {
range: BaseRange;
prefix: TPrefix;
text: string;
};
export const getAutocompletePrefix = <TPrefix extends string>(
editor: Editor,
queryRange: BaseRange,
validPrefixes: readonly TPrefix[]
): TPrefix | undefined => {
const world = Editor.string(editor, queryRange);
const prefix = world[0] as TPrefix | undefined;
if (!prefix) return undefined;
return validPrefixes.includes(prefix) ? prefix : undefined;
};
export const getAutocompleteQueryText = (editor: Editor, queryRange: BaseRange): string =>
Editor.string(editor, queryRange).slice(1);
export const getAutocompleteQuery = <TPrefix extends string>(
editor: Editor,
queryRange: BaseRange,
validPrefixes: readonly TPrefix[]
): AutocompleteQuery<TPrefix> | undefined => {
const prefix = getAutocompletePrefix(editor, queryRange, validPrefixes);
if (!prefix) return undefined;
return {
range: queryRange,
prefix,
text: getAutocompleteQueryText(editor, queryRange),
};
};

5
src/app/components/editor/autocomplete/index.ts Normal file
View file

@ -0,0 +1,5 @@
export * from './AutocompleteMenu';
export * from './autocompleteQuery';
export * from './RoomMentionAutocomplete';
export * from './UserMentionAutocomplete';
export * from './EmoticonAutocomplete';

194
src/app/components/editor/common.ts Normal file
View file

@ -0,0 +1,194 @@
import { BasePoint, BaseRange, Editor, Element, Point, Range, Transforms } from 'slate';
import { BlockType, MarkType } from './Elements';
import { EmoticonElement, FormattedText, HeadingLevel, LinkElement, MentionElement } from './slate';
export const isMarkActive = (editor: Editor, format: MarkType) => {
const marks = Editor.marks(editor);
return marks ? marks[format] === true : false;
};
export const toggleMark = (editor: Editor, format: MarkType) => {
const isActive = isMarkActive(editor, format);
if (isActive) {
Editor.removeMark(editor, format);
} else {
Editor.addMark(editor, format, true);
}
};
export const isBlockActive = (editor: Editor, format: BlockType) => {
const [match] = Editor.nodes(editor, {
match: (node) => Element.isElement(node) && node.type === format,
});
return !!match;
};
type BlockOption = { level: HeadingLevel };
const NESTED_BLOCK = [
BlockType.OrderedList,
BlockType.UnorderedList,
BlockType.BlockQuote,
BlockType.CodeBlock,
];
export const toggleBlock = (editor: Editor, format: BlockType, option?: BlockOption) => {
const isActive = isBlockActive(editor, format);
Transforms.unwrapNodes(editor, {
match: (node) => Element.isElement(node) && NESTED_BLOCK.includes(node.type),
split: true,
});
if (isActive) {
Transforms.setNodes(editor, {
type: BlockType.Paragraph,
});
return;
}
if (format === BlockType.OrderedList || format === BlockType.UnorderedList) {
Transforms.setNodes(editor, {
type: BlockType.ListItem,
});
const block = {
type: format,
children: [],
};
Transforms.wrapNodes(editor, block);
return;
}
if (format === BlockType.CodeBlock) {
Transforms.setNodes(editor, {
type: BlockType.CodeLine,
});
const block = {
type: format,
children: [],
};
Transforms.wrapNodes(editor, block);
return;
}
if (format === BlockType.BlockQuote) {
Transforms.setNodes(editor, {
type: BlockType.QuoteLine,
});
const block = {
type: format,
children: [],
};
Transforms.wrapNodes(editor, block);
return;
}
if (format === BlockType.Heading) {
Transforms.setNodes(editor, {
type: format,
level: option?.level ?? 1,
});
}
Transforms.setNodes(editor, {
type: format,
});
};
export const resetEditor = (editor: Editor) => {
Transforms.delete(editor, {
at: {
anchor: Editor.start(editor, []),
focus: Editor.end(editor, []),
},
});
toggleBlock(editor, BlockType.Paragraph);
};
export const createMentionElement = (
id: string,
name: string,
highlight: boolean
): MentionElement => ({
type: BlockType.Mention,
id,
highlight,
name,
children: [{ text: '' }],
});
export const createEmoticonElement = (key: string, shortcode: string): EmoticonElement => ({
type: BlockType.Emoticon,
key,
shortcode,
children: [{ text: '' }],
});
export const createLinkElement = (
href: string,
children: string | FormattedText[]
): LinkElement => ({
type: BlockType.Link,
href,
children: typeof children === 'string' ? [{ text: children }] : children,
});
export const replaceWithElement = (editor: Editor, selectRange: BaseRange, element: Element) => {
Transforms.select(editor, selectRange);
Transforms.insertNodes(editor, element);
};
export const moveCursor = (editor: Editor, withSpace?: boolean) => {
// without timeout it works properly when we select autocomplete with Tab or Space
setTimeout(() => {
Transforms.move(editor);
if (withSpace) editor.insertText(' ');
}, 1);
};
interface PointUntilCharOptions {
match: (char: string) => boolean;
reverse?: boolean;
}
export const getPointUntilChar = (
editor: Editor,
cursorPoint: BasePoint,
options: PointUntilCharOptions
): BasePoint | undefined => {
let targetPoint: BasePoint | undefined;
let prevPoint: BasePoint | undefined;
let char: string | undefined;
const pointItr = Editor.positions(editor, {
at: {
anchor: Editor.start(editor, []),
focus: Editor.point(editor, cursorPoint, { edge: 'start' }),
},
unit: 'character',
reverse: options.reverse,
});
// eslint-disable-next-line no-restricted-syntax
for (const point of pointItr) {
if (!Point.equals(point, cursorPoint) && prevPoint) {
char = Editor.string(editor, { anchor: point, focus: prevPoint });
if (options.match(char)) break;
targetPoint = point;
}
prevPoint = point;
}
return targetPoint;
};
export const getPrevWorldRange = (editor: Editor): BaseRange | undefined => {
const { selection } = editor;
if (!selection || !Range.isCollapsed(selection)) return undefined;
const [cursorPoint] = Range.edges(selection);
const worldStartPoint = getPointUntilChar(editor, cursorPoint, {
reverse: true,
match: (char) => char === ' ',
});
return worldStartPoint && Editor.range(editor, worldStartPoint, cursorPoint);
};

7
src/app/components/editor/index.ts Normal file
View file

@ -0,0 +1,7 @@
export * from './autocomplete';
export * from './common';
export * from './Editor';
export * from './Elements';
export * from './keyboard';
export * from './output';
export * from './Toolbar';

40
src/app/components/editor/keyboard.ts Normal file
View file

@ -0,0 +1,40 @@
import { isHotkey } from 'is-hotkey';
import { KeyboardEvent } from 'react';
import { Editor } from 'slate';
import { isBlockActive, toggleBlock, toggleMark } from './common';
import { BlockType, MarkType } from './Elements';
export const INLINE_HOTKEYS: Record<string, MarkType> = {
'mod+b': MarkType.Bold,
'mod+i': MarkType.Italic,
'mod+u': MarkType.Underline,
'mod+shift+u': MarkType.StrikeThrough,
'mod+[': MarkType.Code,
'mod+h': MarkType.Spoiler,
};
const INLINE_KEYS = Object.keys(INLINE_HOTKEYS);
export const BLOCK_HOTKEYS: Record<string, BlockType> = {
'mod+shift+0': BlockType.OrderedList,
'mod+shift+8': BlockType.UnorderedList,
"mod+shift+'": BlockType.BlockQuote,
'mod+shift+;': BlockType.CodeBlock,
};
const BLOCK_KEYS = Object.keys(BLOCK_HOTKEYS);
export const toggleKeyboardShortcut = (editor: Editor, event: KeyboardEvent<Element>) => {
BLOCK_KEYS.forEach((hotkey) => {
if (isHotkey(hotkey, event)) {
event.preventDefault();
toggleBlock(editor, BLOCK_HOTKEYS[hotkey]);
}
});
if (!isBlockActive(editor, BlockType.CodeBlock))
INLINE_KEYS.forEach((hotkey) => {
if (isHotkey(hotkey, event)) {
event.preventDefault();
toggleMark(editor, INLINE_HOTKEYS[hotkey]);
}
});
};

95
src/app/components/editor/output.ts Normal file
View file

@ -0,0 +1,95 @@
import { Descendant, Text } from 'slate';
import { sanitizeText } from '../../utils/sanitize';
import { BlockType } from './Elements';
import { CustomElement, FormattedText } from './slate';
const textToCustomHtml = (node: FormattedText): string => {
let string = sanitizeText(node.text);
if (node.bold) string = `<strong>${string}</strong>`;
if (node.italic) string = `<i>${string}</i>`;
if (node.underline) string = `<u>${string}</u>`;
if (node.strikeThrough) string = `<s>${string}</s>`;
if (node.code) string = `<code>${string}</code>`;
if (node.spoiler) string = `<span data-mx-spoiler>${string}</span>`;
return string;
};
const elementToCustomHtml = (node: CustomElement, children: string): string => {
switch (node.type) {
case BlockType.Paragraph:
return `<p>${children}</p>`;
case BlockType.Heading:
return `<h${node.level}>${children}</h${node.level}>`;
case BlockType.CodeLine:
return `${children}\n`;
case BlockType.CodeBlock:
return `<pre><code>${children}</code></pre>`;
case BlockType.QuoteLine:
return `<p>${children}</p>`;
case BlockType.BlockQuote:
return `<blockquote>${children}</blockquote>`;
case BlockType.ListItem:
return `<li><p>${children}</p></li>`;
case BlockType.OrderedList:
return `<ol>${children}</ol>`;
case BlockType.UnorderedList:
return `<ul>${children}</ul>`;
case BlockType.Mention:
return `<a href="https://matrix.to/#/${node.id}">${node.name}</a>`;
case BlockType.Emoticon:
return node.key.startsWith('mxc://')
? `<img data-mx-emoticon src="${node.key}" alt="${node.shortcode}" title="${node.shortcode}" height="32">`
: node.key;
case BlockType.Link:
return `<a href="${node.href}">${node.children}</a>`;
default:
return children;
}
};
export const toMatrixCustomHTML = (node: Descendant | Descendant[]): string => {
if (Array.isArray(node)) return node.map((n) => toMatrixCustomHTML(n)).join('');
if (Text.isText(node)) return textToCustomHtml(node);
const children = node.children.map((n) => toMatrixCustomHTML(n)).join('');
return elementToCustomHtml(node, children);
};
const elementToPlainText = (node: CustomElement, children: string): string => {
switch (node.type) {
case BlockType.Paragraph:
return `${children}\n`;
case BlockType.Heading:
return `${children}\n`;
case BlockType.CodeLine:
return `${children}\n`;
case BlockType.CodeBlock:
return `${children}\n`;
case BlockType.QuoteLine:
return `| ${children}\n`;
case BlockType.BlockQuote:
return `${children}\n`;
case BlockType.ListItem:
return `- ${children}\n`;
case BlockType.OrderedList:
return `${children}\n`;
case BlockType.UnorderedList:
return `${children}\n`;
case BlockType.Mention:
return node.id;
case BlockType.Emoticon:
return node.key.startsWith('mxc://') ? `:${node.shortcode}:` : node.key;
case BlockType.Link:
return `[${node.children}](${node.href})`;
default:
return children;
}
};
export const toPlainText = (node: Descendant | Descendant[]): string => {
if (Array.isArray(node)) return node.map((n) => toPlainText(n)).join('');
if (Text.isText(node)) return sanitizeText(node.text);
const children = node.children.map((n) => toPlainText(n)).join('');
return elementToPlainText(node, children);
};

107
src/app/components/editor/slate.d.ts vendored Normal file
View file

@ -0,0 +1,107 @@
import { BaseEditor } from 'slate';
import { ReactEditor } from 'slate-react';
import { BlockType } from './Elements';
export type HeadingLevel = 1 | 2 | 3;
export type Editor = BaseEditor & ReactEditor;
export type Text = {
text: string;
};
export type FormattedText = Text & {
bold?: boolean;
italic?: boolean;
underline?: boolean;
strikeThrough?: boolean;
code?: boolean;
spoiler?: boolean;
};
export type LinkElement = {
type: BlockType.Link;
href: string;
children: FormattedText[];
};
export type SpoilerElement = {
type: 'spoiler';
alert?: string;
children: FormattedText[];
};
export type MentionElement = {
type: BlockType.Mention;
id: string;
highlight: boolean;
name: string;
children: Text[];
};
export type EmoticonElement = {
type: BlockType.Emoticon;
key: string;
shortcode: string;
children: Text[];
};
export type ParagraphElement = {
type: BlockType.Paragraph;
children: FormattedText[];
};
export type HeadingElement = {
type: BlockType.Heading;
level: HeadingLevel;
children: FormattedText[];
};
export type CodeLineElement = {
type: BlockType.CodeLine;
children: Text[];
};
export type CodeBlockElement = {
type: BlockType.CodeBlock;
children: CodeLineElement[];
};
export type QuoteLineElement = {
type: BlockType.QuoteLine;
children: FormattedText[];
};
export type BlockQuoteElement = {
type: BlockType.BlockQuote;
children: QuoteLineElement[];
};
export type ListItemElement = {
type: BlockType.ListItem;
children: FormattedText[];
};
export type OrderedListElement = {
type: BlockType.OrderedList;
children: ListItemElement[];
};
export type UnorderedListElement = {
type: BlockType.UnorderedList;
children: ListItemElement[];
};
export type CustomElement =
| LinkElement
// | SpoilerElement
| MentionElement
| EmoticonElement
| ParagraphElement
| HeadingElement
| CodeLineElement
| CodeBlockElement
| QuoteLineElement
| BlockQuoteElement
| ListItemElement
| OrderedListElement
| UnorderedListElement;
export type CustomEditor = BaseEditor & ReactEditor;
declare module 'slate' {
interface CustomTypes {
Editor: BaseEditor & ReactEditor;
Element: CustomElement;
Text: FormattedText & Text;
}
}

134
src/app/components/emoji-board/EmojiBoard.css.tsx Normal file
View file

@ -0,0 +1,134 @@
import { style } from '@vanilla-extract/css';
import { DefaultReset, FocusOutline, color, config, toRem } from 'folds';
export const Base = style({
maxWidth: toRem(432),
width: `calc(100vw - 2 * ${config.space.S400})`,
height: toRem(450),
backgroundColor: color.Surface.Container,
color: color.Surface.OnContainer,
border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
borderRadius: config.radii.R400,
boxShadow: config.shadow.E200,
overflow: 'hidden',
});
export const Sidebar = style({
width: toRem(54),
backgroundColor: color.Surface.Container,
color: color.Surface.OnContainer,
position: 'relative',
});
export const SidebarContent = style({
padding: `${config.space.S200} 0`,
});
export const SidebarStack = style({
width: '100%',
backgroundColor: color.Surface.Container,
});
export const NativeEmojiSidebarStack = style({
position: 'sticky',
bottom: '-67%',
zIndex: 1,
});
export const SidebarDivider = style({
width: toRem(18),
});
export const Header = style({
padding: config.space.S300,
paddingBottom: 0,
});
export const EmojiBoardTab = style({
cursor: 'pointer',
});
export const Footer = style({
padding: config.space.S200,
margin: config.space.S300,
marginTop: 0,
minHeight: toRem(40),
borderRadius: config.radii.R400,
backgroundColor: color.SurfaceVariant.Container,
color: color.SurfaceVariant.OnContainer,
});
export const EmojiGroup = style({
padding: `${config.space.S300} 0`,
});
export const EmojiGroupLabel = style({
position: 'sticky',
top: config.space.S200,
zIndex: 1,
margin: 'auto',
padding: `${config.space.S100} ${config.space.S200}`,
borderRadius: config.radii.Pill,
backgroundColor: color.SurfaceVariant.Container,
color: color.SurfaceVariant.OnContainer,
});
export const EmojiGroupContent = style([
DefaultReset,
{
padding: `0 ${config.space.S200}`,
},
]);
export const EmojiPreview = style([
DefaultReset,
{
width: toRem(32),
height: toRem(32),
fontSize: toRem(32),
lineHeight: toRem(32),
},
]);
export const EmojiItem = style([
DefaultReset,
FocusOutline,
{
width: toRem(48),
height: toRem(48),
fontSize: toRem(32),
lineHeight: toRem(32),
borderRadius: config.radii.R400,
cursor: 'pointer',
':hover': {
backgroundColor: color.Surface.ContainerHover,
},
},
]);
export const StickerItem = style([
EmojiItem,
{
width: toRem(112),
height: toRem(112),
},
]);
export const CustomEmojiImg = style([
DefaultReset,
{
width: toRem(32),
height: toRem(32),
},
]);
export const StickerImg = style([
DefaultReset,
{
width: toRem(96),
height: toRem(96),
},
]);

860
src/app/components/emoji-board/EmojiBoard.tsx Normal file
View file

@ -0,0 +1,860 @@
import React, {
ChangeEventHandler,
FocusEventHandler,
MouseEventHandler,
UIEventHandler,
ReactNode,
memo,
useCallback,
useEffect,
useMemo,
useRef,
} from 'react';
import {
Badge,
Box,
Icon,
IconButton,
Icons,
Input,
Line,
Scroll,
Text,
Tooltip,
TooltipProvider,
as,
config,
toRem,
} from 'folds';
import FocusTrap from 'focus-trap-react';
import isHotkey from 'is-hotkey';
import classNames from 'classnames';
import { MatrixClient, Room } from 'matrix-js-sdk';
import { atom, useAtomValue, useSetAtom } from 'jotai';
import * as css from './EmojiBoard.css';
import { EmojiGroupId, IEmoji, IEmojiGroup, emojiGroups, emojis } from '../../plugins/emoji';
import { IEmojiGroupLabels, useEmojiGroupLabels } from './useEmojiGroupLabels';
import { IEmojiGroupIcons, useEmojiGroupIcons } from './useEmojiGroupIcons';
import { preventScrollWithArrowKey } from '../../utils/keyboard';
import { useRelevantImagePacks } from '../../hooks/useImagePacks';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { useRecentEmoji } from '../../hooks/useRecentEmoji';
import { ExtendedPackImage, ImagePack, PackUsage } from '../../plugins/custom-emoji';
import { isUserId } from '../../utils/matrix';
import { editableActiveElement, inVisibleScrollArea, targetFromEvent } from '../../utils/dom';
import { useAsyncSearch, UseAsyncSearchOptions } from '../../hooks/useAsyncSearch';
import { useDebounce } from '../../hooks/useDebounce';
import { useThrottle } from '../../hooks/useThrottle';
const RECENT_GROUP_ID = 'recent_group';
const SEARCH_GROUP_ID = 'search_group';
export enum EmojiBoardTab {
Emoji = 'Emoji',
Sticker = 'Sticker',
}
enum EmojiType {
Emoji = 'emoji',
CustomEmoji = 'customEmoji',
Sticker = 'sticker',
}
export type EmojiItemInfo = {
type: EmojiType;
data: string;
shortcode: string;
};
const getDOMGroupId = (id: string): string => `EmojiBoardGroup-${id}`;
const getEmojiItemInfo = (element: Element): EmojiItemInfo | undefined => {
const type = element.getAttribute('data-emoji-type') as EmojiType | undefined;
const data = element.getAttribute('data-emoji-data');
const shortcode = element.getAttribute('data-emoji-shortcode');
if (type && data && shortcode)
return {
type,
data,
shortcode,
};
return undefined;
};
const activeGroupIdAtom = atom<string | undefined>(undefined);
function Sidebar({ children }: { children: ReactNode }) {
return (
<Box className={css.Sidebar} shrink="No">
<Scroll size="0">
<Box className={css.SidebarContent} direction="Column" alignItems="Center" gap="100">
{children}
</Box>
</Scroll>
</Box>
);
}
const SidebarStack = as<'div'>(({ className, children, ...props }, ref) => (
<Box
className={classNames(css.SidebarStack, className)}
direction="Column"
alignItems="Center"
gap="100"
{...props}
ref={ref}
>
{children}
</Box>
));
function SidebarDivider() {
return <Line className={css.SidebarDivider} size="300" variant="Surface" />;
}
function Header({ children }: { children: ReactNode }) {
return (
<Box className={css.Header} direction="Column" shrink="No">
{children}
</Box>
);
}
function Content({ children }: { children: ReactNode }) {
return <Box grow="Yes">{children}</Box>;
}
function Footer({ children }: { children: ReactNode }) {
return (
<Box shrink="No" className={css.Footer} gap="300" alignItems="Center">
{children}
</Box>
);
}
const EmojiBoardLayout = as<
'div',
{
header: ReactNode;
sidebar?: ReactNode;
footer?: ReactNode;
children: ReactNode;
}
>(({ className, header, sidebar, footer, children, ...props }, ref) => (
<Box
display="InlineFlex"
className={classNames(css.Base, className)}
direction="Row"
{...props}
ref={ref}
>
<Box direction="Column" grow="Yes">
{header}
{children}
{footer}
</Box>
<Line size="300" direction="Vertical" />
{sidebar}
</Box>
));
function EmojiBoardTabs({
tab,
onTabChange,
}: {
tab: EmojiBoardTab;
onTabChange: (tab: EmojiBoardTab) => void;
}) {
return (
<Box gap="100">
<Badge
className={css.EmojiBoardTab}
as="button"
variant="Secondary"
fill={tab === EmojiBoardTab.Emoji ? 'Solid' : 'None'}
size="500"
onClick={() => onTabChange(EmojiBoardTab.Emoji)}
>
<Text as="span" size="L400">
Emoji
</Text>
</Badge>
<Badge
className={css.EmojiBoardTab}
as="button"
variant="Secondary"
fill={tab === EmojiBoardTab.Sticker ? 'Solid' : 'None'}
size="500"
onClick={() => onTabChange(EmojiBoardTab.Sticker)}
>
<Text as="span" size="L400">
Sticker
</Text>
</Badge>
</Box>
);
}
export function SidebarBtn<T extends string>({
active,
label,
id,
onItemClick,
children,
}: {
active?: boolean;
label: string;
id: T;
onItemClick: (id: T) => void;
children: ReactNode;
}) {
return (
<TooltipProvider
delay={500}
position="Left"
tooltip={
<Tooltip id={`SidebarStackItem-${id}-label`}>
<Text size="T300">{label}</Text>
</Tooltip>
}
>
{(ref) => (
<IconButton
aria-pressed={active}
aria-labelledby={`SidebarStackItem-${id}-label`}
ref={ref}
onClick={() => onItemClick(id)}
size="400"
radii="300"
variant="Surface"
>
{children}
</IconButton>
)}
</TooltipProvider>
);
}
export const EmojiGroup = as<
'div',
{
id: string;
label: string;
children: ReactNode;
}
>(({ className, id, label, children, ...props }, ref) => (
<Box
id={getDOMGroupId(id)}
data-group-id={id}
className={classNames(css.EmojiGroup, className)}
direction="Column"
gap="200"
{...props}
ref={ref}
>
<Text id={`EmojiGroup-${id}-label`} as="label" className={css.EmojiGroupLabel} size="O400">
{label}
</Text>
<div aria-labelledby={`EmojiGroup-${id}-label`} className={css.EmojiGroupContent}>
<Box wrap="Wrap" justifyContent="Center">
{children}
</Box>
</div>
</Box>
));
export function EmojiItem({
label,
type,
data,
shortcode,
children,
}: {
label: string;
type: EmojiType;
data: string;
shortcode: string;
children: ReactNode;
}) {
return (
<Box
as="button"
className={css.EmojiItem}
type="button"
alignItems="Center"
justifyContent="Center"
title={label}
aria-label={`${label} emoji`}
data-emoji-type={type}
data-emoji-data={data}
data-emoji-shortcode={shortcode}
>
{children}
</Box>
);
}
export function StickerItem({
label,
type,
data,
shortcode,
children,
}: {
label: string;
type: EmojiType;
data: string;
shortcode: string;
children: ReactNode;
}) {
return (
<Box
as="button"
className={css.StickerItem}
type="button"
alignItems="Center"
justifyContent="Center"
title={label}
aria-label={`${label} sticker`}
data-emoji-type={type}
data-emoji-data={data}
data-emoji-shortcode={shortcode}
>
{children}
</Box>
);
}
function RecentEmojiSidebarStack({ onItemClick }: { onItemClick: (id: string) => void }) {
const activeGroupId = useAtomValue(activeGroupIdAtom);
return (
<SidebarStack>
<SidebarBtn
active={activeGroupId === RECENT_GROUP_ID}
id={RECENT_GROUP_ID}
label="Recent"
onItemClick={() => onItemClick(RECENT_GROUP_ID)}
>
<Icon src={Icons.RecentClock} filled={activeGroupId === RECENT_GROUP_ID} />
</SidebarBtn>
</SidebarStack>
);
}
function ImagePackSidebarStack({
mx,
packs,
usage,
onItemClick,
}: {
mx: MatrixClient;
packs: ImagePack[];
usage: PackUsage;
onItemClick: (id: string) => void;
}) {
const activeGroupId = useAtomValue(activeGroupIdAtom);
return (
<SidebarStack>
{usage === PackUsage.Emoticon && <SidebarDivider />}
{packs.map((pack) => {
let label = pack.displayName;
if (!label) label = isUserId(pack.id) ? 'Personal Pack' : mx.getRoom(pack.id)?.name;
return (
<SidebarBtn
active={activeGroupId === pack.id}
key={pack.id}
id={pack.id}
label={label || 'Unknown Pack'}
onItemClick={onItemClick}
>
<img
style={{
width: toRem(24),
height: toRem(24),
}}
src={mx.mxcUrlToHttp(pack.getPackAvatarUrl(usage) ?? '') || pack.avatarUrl}
alt={label || 'Unknown Pack'}
/>
</SidebarBtn>
);
})}
</SidebarStack>
);
}
function NativeEmojiSidebarStack({
groups,
icons,
labels,
onItemClick,
}: {
groups: IEmojiGroup[];
icons: IEmojiGroupIcons;
labels: IEmojiGroupLabels;
onItemClick: (id: EmojiGroupId) => void;
}) {
const activeGroupId = useAtomValue(activeGroupIdAtom);
return (
<SidebarStack className={css.NativeEmojiSidebarStack}>
<SidebarDivider />
{groups.map((group) => (
<SidebarBtn
key={group.id}
active={activeGroupId === group.id}
id={group.id}
label={labels[group.id]}
onItemClick={onItemClick}
>
<Icon src={icons[group.id]} filled={activeGroupId === group.id} />
</SidebarBtn>
))}
</SidebarStack>
);
}
export function RecentEmojiGroup({
label,
id,
emojis: recentEmojis,
}: {
label: string;
id: string;
emojis: IEmoji[];
}) {
return (
<EmojiGroup key={id} id={id} label={label}>
{recentEmojis.map((emoji) => (
<EmojiItem
key={emoji.unicode}
label={emoji.label}
type={EmojiType.Emoji}
data={emoji.unicode}
shortcode={emoji.shortcode}
>
{emoji.unicode}
</EmojiItem>
))}
</EmojiGroup>
);
}
export function SearchEmojiGroup({
mx,
tab,
label,
id,
emojis: searchResult,
}: {
mx: MatrixClient;
tab: EmojiBoardTab;
label: string;
id: string;
emojis: Array<ExtendedPackImage | IEmoji>;
}) {
return (
<EmojiGroup key={id} id={id} label={label}>
{tab === EmojiBoardTab.Emoji
? searchResult.map((emoji) =>
'unicode' in emoji ? (
<EmojiItem
key={emoji.unicode}
label={emoji.label}
type={EmojiType.Emoji}
data={emoji.unicode}
shortcode={emoji.shortcode}
>
{emoji.unicode}
</EmojiItem>
) : (
<EmojiItem
key={emoji.shortcode}
label={emoji.body || emoji.shortcode}
type={EmojiType.CustomEmoji}
data={emoji.url}
shortcode={emoji.shortcode}
>
<img
loading="lazy"
className={css.CustomEmojiImg}
alt={emoji.body || emoji.shortcode}
src={mx.mxcUrlToHttp(emoji.url) ?? emoji.url}
/>
</EmojiItem>
)
)
: searchResult.map((emoji) =>
'unicode' in emoji ? null : (
<StickerItem
key={emoji.shortcode}
label={emoji.body || emoji.shortcode}
type={EmojiType.Sticker}
data={emoji.url}
shortcode={emoji.shortcode}
>
<img
loading="lazy"
className={css.StickerImg}
alt={emoji.body || emoji.shortcode}
src={mx.mxcUrlToHttp(emoji.url) ?? emoji.url}
/>
</StickerItem>
)
)}
</EmojiGroup>
);
}
export const CustomEmojiGroups = memo(
({ mx, groups }: { mx: MatrixClient; groups: ImagePack[] }) => (
<>
{groups.map((pack) => (
<EmojiGroup key={pack.id} id={pack.id} label={pack.displayName || 'Unknown'}>
{pack.getEmojis().map((image) => (
<EmojiItem
key={image.shortcode}
label={image.body || image.shortcode}
type={EmojiType.CustomEmoji}
data={image.url}
shortcode={image.shortcode}
>
<img
loading="lazy"
className={css.CustomEmojiImg}
alt={image.body || image.shortcode}
src={mx.mxcUrlToHttp(image.url) ?? image.url}
/>
</EmojiItem>
))}
</EmojiGroup>
))}
</>
)
);
export const StickerGroups = memo(({ mx, groups }: { mx: MatrixClient; groups: ImagePack[] }) => (
<>
{groups.length === 0 && (
<Box
style={{ padding: `${toRem(60)} ${config.space.S500}` }}
alignItems="Center"
justifyContent="Center"
direction="Column"
gap="300"
>
<Icon size="600" src={Icons.Sticker} />
<Box direction="Inherit">
<Text align="Center">No Sticker Packs!</Text>
<Text priority="300" align="Center" size="T200">
Add stickers from user, room or space settings.
</Text>
</Box>
</Box>
)}
{groups.map((pack) => (
<EmojiGroup key={pack.id} id={pack.id} label={pack.displayName || 'Unknown'}>
{pack.getStickers().map((image) => (
<StickerItem
key={image.shortcode}
label={image.body || image.shortcode}
type={EmojiType.Sticker}
data={image.url}
shortcode={image.shortcode}
>
<img
loading="lazy"
className={css.StickerImg}
alt={image.body || image.shortcode}
src={mx.mxcUrlToHttp(image.url) ?? image.url}
/>
</StickerItem>
))}
</EmojiGroup>
))}
</>
));
export const NativeEmojiGroups = memo(
({ groups, labels }: { groups: IEmojiGroup[]; labels: IEmojiGroupLabels }) => (
<>
{groups.map((emojiGroup) => (
<EmojiGroup key={emojiGroup.id} id={emojiGroup.id} label={labels[emojiGroup.id]}>
{emojiGroup.emojis.map((emoji) => (
<EmojiItem
key={emoji.unicode}
label={emoji.label}
type={EmojiType.Emoji}
data={emoji.unicode}
shortcode={emoji.shortcode}
>
{emoji.unicode}
</EmojiItem>
))}
</EmojiGroup>
))}
</>
)
);
const getSearchListItemStr = (item: ExtendedPackImage | IEmoji) => `:${item.shortcode}:`;
const SEARCH_OPTIONS: UseAsyncSearchOptions = {
limit: 26,
matchOptions: {
contain: true,
},
};
export function EmojiBoard({
tab = EmojiBoardTab.Emoji,
onTabChange,
imagePackRooms,
requestClose,
returnFocusOnDeactivate,
onEmojiSelect,
onCustomEmojiSelect,
onStickerSelect,
}: {
tab?: EmojiBoardTab;
onTabChange?: (tab: EmojiBoardTab) => void;
imagePackRooms: Room[];
requestClose: () => void;
returnFocusOnDeactivate?: boolean;
onEmojiSelect?: (unicode: string, shortcode: string) => void;
onCustomEmojiSelect?: (mxc: string, shortcode: string) => void;
onStickerSelect?: (mxc: string, shortcode: string) => void;
}) {
const emojiTab = tab === EmojiBoardTab.Emoji;
const stickerTab = tab === EmojiBoardTab.Sticker;
const usage = emojiTab ? PackUsage.Emoticon : PackUsage.Sticker;
const setActiveGroupId = useSetAtom(activeGroupIdAtom);
const mx = useMatrixClient();
const emojiGroupLabels = useEmojiGroupLabels();
const emojiGroupIcons = useEmojiGroupIcons();
const imagePacks = useRelevantImagePacks(mx, usage, imagePackRooms);
const recentEmojis = useRecentEmoji(mx, 21);
const contentScrollRef = useRef<HTMLDivElement>(null);
const emojiPreviewRef = useRef<HTMLDivElement>(null);
const emojiPreviewTextRef = useRef<HTMLParagraphElement>(null);
const searchList = useMemo(() => {
let list: Array<ExtendedPackImage | IEmoji> = [];
list = list.concat(imagePacks.flatMap((pack) => pack.getImagesFor(usage)));
if (emojiTab) list = list.concat(emojis);
return list;
}, [emojiTab, usage, imagePacks]);
const [result, search] = useAsyncSearch(searchList, getSearchListItemStr, SEARCH_OPTIONS);
const handleOnChange: ChangeEventHandler<HTMLInputElement> = useDebounce(
useCallback(
(evt) => {
const term = evt.target.value;
search(term);
},
[search]
),
{ wait: 200 }
);
const syncActiveGroupId = useCallback(() => {
const targetEl = contentScrollRef.current;
if (!targetEl) return;
const groupEls = [...targetEl.querySelectorAll('div[data-group-id]')] as HTMLElement[];
const groupEl = groupEls.find((el) => inVisibleScrollArea(targetEl, el));
const groupId = groupEl?.getAttribute('data-group-id') ?? undefined;
setActiveGroupId(groupId);
}, [setActiveGroupId]);
const handleOnScroll: UIEventHandler<HTMLDivElement> = useThrottle(syncActiveGroupId, {
wait: 500,
});
const handleScrollToGroup = (groupId: string) => {
setActiveGroupId(groupId);
const groupElement = document.getElementById(getDOMGroupId(groupId));
groupElement?.scrollIntoView();
};
const handleEmojiClick: MouseEventHandler = (evt) => {
const targetEl = targetFromEvent(evt.nativeEvent, 'button');
if (!targetEl) return;
const emojiInfo = getEmojiItemInfo(targetEl);
if (!emojiInfo) return;
if (emojiInfo.type === EmojiType.Emoji) {
onEmojiSelect?.(emojiInfo.data, emojiInfo.shortcode);
if (!evt.altKey && !evt.shiftKey) requestClose();
}
if (emojiInfo.type === EmojiType.CustomEmoji) {
onCustomEmojiSelect?.(emojiInfo.data, emojiInfo.shortcode);
if (!evt.altKey && !evt.shiftKey) requestClose();
}
if (emojiInfo.type === EmojiType.Sticker) {
onStickerSelect?.(emojiInfo.data, emojiInfo.shortcode);
if (!evt.altKey && !evt.shiftKey) requestClose();
}
};
const handleEmojiPreview = useCallback(
(element: HTMLButtonElement) => {
const emojiInfo = getEmojiItemInfo(element);
if (!emojiInfo || !emojiPreviewTextRef.current) return;
if (emojiInfo.type === EmojiType.Emoji && emojiPreviewRef.current) {
emojiPreviewRef.current.textContent = emojiInfo.data;
} else if (emojiInfo.type === EmojiType.CustomEmoji && emojiPreviewRef.current) {
const img = document.createElement('img');
img.className = css.CustomEmojiImg;
img.setAttribute('src', mx.mxcUrlToHttp(emojiInfo.data) || emojiInfo.data);
img.setAttribute('alt', emojiInfo.shortcode);
emojiPreviewRef.current.textContent = '';
emojiPreviewRef.current.appendChild(img);
}
emojiPreviewTextRef.current.textContent = `:${emojiInfo.shortcode}:`;
},
[mx]
);
const throttleEmojiHover = useThrottle(handleEmojiPreview, {
wait: 200,
immediate: true,
});
const handleEmojiHover: MouseEventHandler = (evt) => {
const targetEl = targetFromEvent(evt.nativeEvent, 'button') as HTMLButtonElement | undefined;
if (!targetEl) return;
throttleEmojiHover(targetEl);
};
const handleEmojiFocus: FocusEventHandler = (evt) => {
const targetEl = evt.target as HTMLButtonElement;
handleEmojiPreview(targetEl);
};
// Reset scroll top on search and tab change
useEffect(() => {
syncActiveGroupId();
contentScrollRef.current?.scrollTo({
top: 0,
});
}, [result, emojiTab, syncActiveGroupId]);
return (
<FocusTrap
focusTrapOptions={{
returnFocusOnDeactivate,
initialFocus: false,
onDeactivate: requestClose,
clickOutsideDeactivates: true,
allowOutsideClick: true,
isKeyForward: (evt: KeyboardEvent) =>
!editableActiveElement() && isHotkey(['arrowdown', 'arrowright'], evt),
isKeyBackward: (evt: KeyboardEvent) =>
!editableActiveElement() && isHotkey(['arrowup', 'arrowleft'], evt),
}}
>
<EmojiBoardLayout
header={
<Header>
<Box direction="Column" gap="200">
{onTabChange && <EmojiBoardTabs tab={tab} onTabChange={onTabChange} />}
<Input
variant="SurfaceVariant"
size="400"
placeholder="Search"
maxLength={50}
after={<Icon src={Icons.Search} size="50" />}
onChange={handleOnChange}
autoFocus
/>
</Box>
</Header>
}
sidebar={
<Sidebar>
{emojiTab && recentEmojis.length > 0 && (
<RecentEmojiSidebarStack onItemClick={handleScrollToGroup} />
)}
{imagePacks.length > 0 && (
<ImagePackSidebarStack
mx={mx}
usage={usage}
packs={imagePacks}
onItemClick={handleScrollToGroup}
/>
)}
{emojiTab && (
<NativeEmojiSidebarStack
groups={emojiGroups}
icons={emojiGroupIcons}
labels={emojiGroupLabels}
onItemClick={handleScrollToGroup}
/>
)}
</Sidebar>
}
footer={
emojiTab ? (
<Footer>
<Box
display="InlineFlex"
ref={emojiPreviewRef}
className={css.EmojiPreview}
alignItems="Center"
justifyContent="Center"
>
😃
</Box>
<Text ref={emojiPreviewTextRef} size="H5" truncate>
:smiley:
</Text>
</Footer>
) : (
imagePacks.length > 0 && (
<Footer>
<Text ref={emojiPreviewTextRef} size="H5" truncate>
:smiley:
</Text>
</Footer>
)
)
}
>
<Content>
<Scroll
ref={contentScrollRef}
size="400"
onScroll={handleOnScroll}
onKeyDown={preventScrollWithArrowKey}
hideTrack
>
<Box
onClick={handleEmojiClick}
onMouseMove={handleEmojiHover}
onFocus={handleEmojiFocus}
direction="Column"
gap="200"
>
{result && (
<SearchEmojiGroup
mx={mx}
tab={tab}
id={SEARCH_GROUP_ID}
label={result.items.length ? 'Search Results' : 'No Results found'}
emojis={result.items}
/>
)}
{emojiTab && recentEmojis.length > 0 && (
<RecentEmojiGroup id={RECENT_GROUP_ID} label="Recent" emojis={recentEmojis} />
)}
{emojiTab && <CustomEmojiGroups mx={mx} groups={imagePacks} />}
{stickerTab && <StickerGroups mx={mx} groups={imagePacks} />}
{emojiTab && <NativeEmojiGroups groups={emojiGroups} labels={emojiGroupLabels} />}
</Box>
</Scroll>
</Content>
</EmojiBoardLayout>
</FocusTrap>
);
}

1
src/app/components/emoji-board/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './EmojiBoard';

21
src/app/components/emoji-board/useEmojiGroupIcons.ts Normal file
View file

@ -0,0 +1,21 @@
import { useMemo } from 'react';
import { IconSrc, Icons } from 'folds';
import { EmojiGroupId } from '../../plugins/emoji';
export type IEmojiGroupIcons = Record<EmojiGroupId, IconSrc>;
export const useEmojiGroupIcons = (): IEmojiGroupIcons =>
useMemo(
() => ({
[EmojiGroupId.People]: Icons.Smile,
[EmojiGroupId.Nature]: Icons.Leaf,
[EmojiGroupId.Food]: Icons.Cup,
[EmojiGroupId.Activity]: Icons.Ball,
[EmojiGroupId.Travel]: Icons.Photo,
[EmojiGroupId.Object]: Icons.Bulb,
[EmojiGroupId.Symbol]: Icons.Peace,
[EmojiGroupId.Flag]: Icons.Flag,
}),
[]
);

19
src/app/components/emoji-board/useEmojiGroupLabels.ts Normal file
View file

@ -0,0 +1,19 @@
import { useMemo } from 'react';
import { EmojiGroupId } from '../../plugins/emoji';
export type IEmojiGroupLabels = Record<EmojiGroupId, string>;
export const useEmojiGroupLabels = (): IEmojiGroupLabels =>
useMemo(
() => ({
[EmojiGroupId.People]: 'Smileys & People',
[EmojiGroupId.Nature]: 'Animals & Nature',
[EmojiGroupId.Food]: 'Food & Drinks',
[EmojiGroupId.Activity]: 'Activity',
[EmojiGroupId.Travel]: 'Travel & Places',
[EmojiGroupId.Object]: 'Objects',
[EmojiGroupId.Symbol]: 'Symbols',
[EmojiGroupId.Flag]: 'Flags',
}),
[]
);

111
src/app/components/sidebar/Sidebar.css.ts Normal file
View file

@ -0,0 +1,111 @@
import { style } from '@vanilla-extract/css';
import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
import { color, config, DefaultReset, toRem } from 'folds';
export const Sidebar = style([
DefaultReset,
{
width: toRem(66),
backgroundColor: color.Background.Container,
borderRight: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
display: 'flex',
flexDirection: 'column',
color: color.Background.OnContainer,
},
]);
export const SidebarStack = style([
DefaultReset,
{
width: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
gap: config.space.S300,
padding: `${config.space.S300} 0`,
},
]);
const PUSH_X = 2;
export const SidebarAvatarBox = recipe({
base: [
DefaultReset,
{
display: 'flex',
alignItems: 'center',
position: 'relative',
transition: 'transform 200ms cubic-bezier(0, 0.8, 0.67, 0.97)',
selectors: {
'&:hover': {
transform: `translateX(${toRem(PUSH_X)})`,
},
'&::before': {
content: '',
display: 'none',
position: 'absolute',
left: toRem(-11.5 - PUSH_X),
width: toRem(3 + PUSH_X),
height: toRem(16),
borderRadius: `0 ${toRem(4)} ${toRem(4)} 0`,
background: 'CurrentColor',
transition: 'height 200ms linear',
},
'&:hover::before': {
display: 'block',
width: toRem(3),
},
},
},
],
variants: {
active: {
true: {
selectors: {
'&::before': {
display: 'block',
height: toRem(24),
},
'&:hover::before': {
width: toRem(3 + PUSH_X),
},
},
},
},
},
});
export type SidebarAvatarBoxVariants = RecipeVariants<typeof SidebarAvatarBox>;
export const SidebarBadgeBox = recipe({
base: [
DefaultReset,
{
position: 'absolute',
zIndex: 1,
},
],
variants: {
hasCount: {
true: {
top: toRem(-6),
right: toRem(-6),
},
false: {
top: toRem(-2),
right: toRem(-2),
},
},
},
defaultVariants: {
hasCount: false,
},
});
export type SidebarBadgeBoxVariants = RecipeVariants<typeof SidebarBadgeBox>;
export const SidebarBadgeOutline = style({
boxShadow: `0 0 0 ${config.borderWidth.B500} ${color.Background.Container}`,
});

8
src/app/components/sidebar/Sidebar.tsx Normal file
View file

@ -0,0 +1,8 @@
import classNames from 'classnames';
import { as } from 'folds';
import React from 'react';
import * as css from './Sidebar.css';
export const Sidebar = as<'div'>(({ as: AsSidebar = 'div', className, ...props }, ref) => (
<AsSidebar className={classNames(css.Sidebar, className)} {...props} ref={ref} />
));

75
src/app/components/sidebar/SidebarAvatar.tsx Normal file
View file

@ -0,0 +1,75 @@
import classNames from 'classnames';
import { as, Avatar, Box, color, config, Text, Tooltip, TooltipProvider } from 'folds';
import React, { forwardRef, MouseEventHandler, ReactNode } from 'react';
import * as css from './Sidebar.css';
const SidebarAvatarBox = as<'div', css.SidebarAvatarBoxVariants>(
({ as: AsSidebarAvatarBox = 'div', className, active, ...props }, ref) => (
<AsSidebarAvatarBox
className={classNames(css.SidebarAvatarBox({ active }), className)}
{...props}
ref={ref}
/>
)
);
export const SidebarAvatar = forwardRef<
HTMLDivElement,
css.SidebarAvatarBoxVariants &
css.SidebarBadgeBoxVariants & {
outlined?: boolean;
avatarChildren: ReactNode;
tooltip: ReactNode | string;
notificationBadge?: (badgeClassName: string) => ReactNode;
onClick?: MouseEventHandler<HTMLButtonElement>;
onContextMenu?: MouseEventHandler<HTMLButtonElement>;
}
>(
(
{
active,
hasCount,
outlined,
avatarChildren,
tooltip,
notificationBadge,
onClick,
onContextMenu,
},
ref
) => (
<SidebarAvatarBox active={active} ref={ref}>
<TooltipProvider
delay={0}
position="Right"
tooltip={
<Tooltip>
<Text size="T300">{tooltip}</Text>
</Tooltip>
}
>
{(avRef) => (
<Avatar
ref={avRef}
as="button"
onClick={onClick}
onContextMenu={onContextMenu}
style={{
border: outlined
? `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`
: undefined,
cursor: 'pointer',
}}
>
{avatarChildren}
</Avatar>
)}
</TooltipProvider>
{notificationBadge && (
<Box className={css.SidebarBadgeBox({ hasCount })}>
{notificationBadge(css.SidebarBadgeOutline)}
</Box>
)}
</SidebarAvatarBox>
)
);

21
src/app/components/sidebar/SidebarContent.tsx Normal file
View file

@ -0,0 +1,21 @@
import React, { ReactNode } from 'react';
import { Box, Scroll } from 'folds';
type SidebarContentProps = {
scrollable: ReactNode;
sticky: ReactNode;
};
export function SidebarContent({ scrollable, sticky }: SidebarContentProps) {
return (
<>
<Box direction="Column" grow="Yes">
<Scroll variant="Background" size="0">
{scrollable}
</Scroll>
</Box>
<Box direction="Column" shrink="No">
{sticky}
</Box>
</>
);
}

10
src/app/components/sidebar/SidebarStack.tsx Normal file
View file

@ -0,0 +1,10 @@
import React from 'react';
import classNames from 'classnames';
import { as } from 'folds';
import * as css from './Sidebar.css';
export const SidebarStack = as<'div'>(
({ as: AsSidebarStack = 'div', className, ...props }, ref) => (
<AsSidebarStack className={classNames(css.SidebarStack, className)} {...props} ref={ref} />
)
);

13
src/app/components/sidebar/SidebarStackSeparator.tsx Normal file
View file

@ -0,0 +1,13 @@
import React from 'react';
import { Line, toRem } from 'folds';
export function SidebarStackSeparator() {
return (
<Line
role="separator"
style={{ width: toRem(24), margin: '0 auto' }}
variant="Background"
size="300"
/>
);
}

5
src/app/components/sidebar/index.ts Normal file
View file

@ -0,0 +1,5 @@
export * from './Sidebar';
export * from './SidebarAvatar';
export * from './SidebarContent';
export * from './SidebarStack';
export * from './SidebarStackSeparator';

46
src/app/components/upload-board/UploadBoard.css.ts Normal file
View file

@ -0,0 +1,46 @@
import { style } from '@vanilla-extract/css';
import { DefaultReset, color, config, toRem } from 'folds';
export const UploadBoardBase = style([
DefaultReset,
{
position: 'relative',
pointerEvents: 'none',
},
]);
export const UploadBoardContainer = style([
DefaultReset,
{
position: 'absolute',
bottom: config.space.S200,
left: 0,
right: 0,
zIndex: config.zIndex.Max,
},
]);
export const UploadBoard = style({
maxWidth: toRem(400),
width: '100%',
maxHeight: toRem(450),
height: '100%',
backgroundColor: color.Surface.Container,
color: color.Surface.OnContainer,
borderRadius: config.radii.R400,
boxShadow: config.shadow.E200,
border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
overflow: 'hidden',
pointerEvents: 'all',
});
export const UploadBoardHeaderContent = style({
height: '100%',
padding: `0 ${config.space.S200}`,
});
export const UploadBoardContent = style({
padding: config.space.S200,
paddingBottom: 0,
paddingRight: 0,
});

145
src/app/components/upload-board/UploadBoard.tsx Normal file
View file

@ -0,0 +1,145 @@
import React, { MutableRefObject, ReactNode, useImperativeHandle, useRef } from 'react';
import { Badge, Box, Chip, Header, Icon, Icons, Spinner, Text, as, percent } from 'folds';
import classNames from 'classnames';
import { useAtomValue } from 'jotai';
import * as css from './UploadBoard.css';
import { TUploadFamilyObserverAtom, Upload, UploadStatus, UploadSuccess } from '../../state/upload';
type UploadBoardProps = {
header: ReactNode;
};
export const UploadBoard = as<'div', UploadBoardProps>(({ header, children, ...props }, ref) => (
<Box className={css.UploadBoardBase} {...props} ref={ref}>
<Box className={css.UploadBoardContainer} justifyContent="End">
<Box className={classNames(css.UploadBoard)} direction="Column">
<Box grow="Yes" direction="Column">
{children}
</Box>
<Box direction="Column" shrink="No">
{header}
</Box>
</Box>
</Box>
</Box>
));
export type UploadBoardImperativeHandlers = { handleSend: () => Promise<void> };
type UploadBoardHeaderProps = {
open: boolean;
onToggle: () => void;
uploadFamilyObserverAtom: TUploadFamilyObserverAtom;
onCancel: (uploads: Upload[]) => void;
onSend: (uploads: UploadSuccess[]) => Promise<void>;
imperativeHandlerRef: MutableRefObject<UploadBoardImperativeHandlers | undefined>;
};
export function UploadBoardHeader({
open,
onToggle,
uploadFamilyObserverAtom,
onCancel,
onSend,
imperativeHandlerRef,
}: UploadBoardHeaderProps) {
const sendingRef = useRef(false);
const uploads = useAtomValue(uploadFamilyObserverAtom);
const isSuccess = uploads.every((upload) => upload.status === UploadStatus.Success);
const isError = uploads.some((upload) => upload.status === UploadStatus.Error);
const progress = uploads.reduce(
(acc, upload) => {
acc.total += upload.file.size;
if (upload.status === UploadStatus.Loading) {
acc.loaded += upload.progress.loaded;
}
if (upload.status === UploadStatus.Success) {
acc.loaded += upload.file.size;
}
return acc;
},
{ loaded: 0, total: 0 }
);
const handleSend = async () => {
if (sendingRef.current) return;
sendingRef.current = true;
await onSend(
uploads.filter((upload) => upload.status === UploadStatus.Success) as UploadSuccess[]
);
sendingRef.current = false;
};
useImperativeHandle(imperativeHandlerRef, () => ({
handleSend,
}));
const handleCancel = () => onCancel(uploads);
return (
<Header size="400">
<Box
as="button"
style={{ cursor: 'pointer' }}
onClick={onToggle}
className={css.UploadBoardHeaderContent}
alignItems="Center"
grow="Yes"
gap="100"
>
<Icon src={open ? Icons.ChevronTop : Icons.ChevronRight} size="50" />
<Text size="H6">Files</Text>
</Box>
<Box className={css.UploadBoardHeaderContent} alignItems="Center" gap="100">
{isSuccess && (
<Chip
as="button"
onClick={handleSend}
variant="Primary"
radii="Pill"
outlined
after={<Icon src={Icons.Send} size="50" filled />}
>
<Text size="B300">Send</Text>
</Chip>
)}
{isError && !open && (
<Badge variant="Critical" fill="Solid" radii="300">
<Text size="L400">Upload Failed</Text>
</Badge>
)}
{!isSuccess && !isError && !open && (
<>
<Badge variant="Secondary" fill="Solid" radii="Pill">
<Text size="L400">{Math.round(percent(0, progress.total, progress.loaded))}%</Text>
</Badge>
<Spinner variant="Secondary" size="200" />
</>
)}
{!isSuccess && open && (
<Chip
as="button"
onClick={handleCancel}
variant="SurfaceVariant"
radii="Pill"
after={<Icon src={Icons.Cross} size="50" />}
>
<Text size="B300">{uploads.length === 1 ? 'Remove' : 'Remove All'}</Text>
</Chip>
)}
</Box>
</Header>
);
}
export const UploadBoardContent = as<'div'>(({ className, children, ...props }, ref) => (
<Box
className={classNames(css.UploadBoardContent, className)}
direction="Column"
gap="200"
{...props}
ref={ref}
>
{children}
</Box>
));

1
src/app/components/upload-board/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './UploadBoard';

24
src/app/components/upload-card/UploadCard.css.ts Normal file
View file

@ -0,0 +1,24 @@
import { style } from '@vanilla-extract/css';
import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
import { RadiiVariant, color, config } from 'folds';
export const UploadCard = recipe({
base: {
padding: config.space.S300,
backgroundColor: color.SurfaceVariant.Container,
color: color.SurfaceVariant.OnContainer,
},
variants: {
radii: RadiiVariant,
},
defaultVariants: {
radii: '400',
},
});
export type UploadCardVariant = RecipeVariants<typeof UploadCard>;
export const UploadCardError = style({
padding: `0 ${config.space.S100}`,
color: color.Critical.Main,
});

63
src/app/components/upload-card/UploadCard.tsx Normal file
View file

@ -0,0 +1,63 @@
import { Badge, Box, Icon, Icons, ProgressBar, Text, percent } from 'folds';
import React, { ReactNode, forwardRef } from 'react';
import * as css from './UploadCard.css';
import { bytesToSize } from '../../utils/common';
type UploadCardProps = {
before?: ReactNode;
children: ReactNode;
after?: ReactNode;
bottom?: ReactNode;
};
export const UploadCard = forwardRef<HTMLDivElement, UploadCardProps & css.UploadCardVariant>(
({ before, after, children, bottom, radii }, ref) => (
<Box className={css.UploadCard({ radii })} direction="Column" gap="200" ref={ref}>
<Box alignItems="Center" gap="200">
{before}
<Box alignItems="Center" grow="Yes" gap="200">
{children}
</Box>
{after}
</Box>
{bottom}
</Box>
)
);
type UploadCardProgressProps = {
sentBytes: number;
totalBytes: number;
};
export function UploadCardProgress({ sentBytes, totalBytes }: UploadCardProgressProps) {
return (
<Box direction="Column" gap="200">
<ProgressBar variant="Secondary" size="300" min={0} max={totalBytes} value={sentBytes} />
<Box alignItems="Center" justifyContent="SpaceBetween">
<Badge variant="Secondary" fill="Solid" radii="Pill">
<Text size="L400">{`${Math.round(percent(0, totalBytes, sentBytes))}%`}</Text>
</Badge>
<Badge variant="Secondary" fill="Soft" radii="Pill">
<Text size="L400">
{bytesToSize(sentBytes)} / {bytesToSize(totalBytes)}
</Text>
</Badge>
</Box>
</Box>
);
}
type UploadCardErrorProps = {
children: ReactNode;
};
export function UploadCardError({ children }: UploadCardErrorProps) {
return (
<Box className={css.UploadCardError} alignItems="Center" gap="300">
<Icon src={Icons.Warning} size="50" />
{children}
</Box>
);
}

89
src/app/components/upload-card/UploadCardRenderer.tsx Normal file
View file

@ -0,0 +1,89 @@
import React from 'react';
import { Chip, Icon, IconButton, Icons, Text, color } from 'folds';
import { UploadCard, UploadCardError, UploadCardProgress } from './UploadCard';
import { TUploadAtom, UploadStatus, useBindUploadAtom } from '../../state/upload';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { TUploadContent } from '../../utils/matrix';
import { getFileTypeIcon } from '../../utils/common';
type UploadCardRendererProps = {
file: TUploadContent;
isEncrypted?: boolean;
uploadAtom: TUploadAtom;
onRemove: (file: TUploadContent) => void;
};
export function UploadCardRenderer({
file,
isEncrypted,
uploadAtom,
onRemove,
}: UploadCardRendererProps) {
const mx = useMatrixClient();
const { upload, startUpload, cancelUpload } = useBindUploadAtom(
mx,
file,
uploadAtom,
isEncrypted
);
if (upload.status === UploadStatus.Idle) startUpload();
const removeUpload = () => {
cancelUpload();
onRemove(file);
};
return (
<UploadCard
radii="300"
before={<Icon src={getFileTypeIcon(Icons, file.type)} />}
after={
<>
{upload.status === UploadStatus.Error && (
<Chip
as="button"
onClick={startUpload}
aria-label="Retry Upload"
variant="Critical"
radii="Pill"
outlined
>
<Text size="B300">Retry</Text>
</Chip>
)}
<IconButton
onClick={removeUpload}
aria-label="Cancel Upload"
variant="SurfaceVariant"
radii="Pill"
size="300"
>
<Icon src={Icons.Cross} size="200" />
</IconButton>
</>
}
bottom={
<>
{upload.status === UploadStatus.Idle && (
<UploadCardProgress sentBytes={0} totalBytes={file.size} />
)}
{upload.status === UploadStatus.Loading && (
<UploadCardProgress sentBytes={upload.progress.loaded} totalBytes={file.size} />
)}
{upload.status === UploadStatus.Error && (
<UploadCardError>
<Text size="T200">{upload.error.message}</Text>
</UploadCardError>
)}
</>
}
>
<Text size="H6" truncate>
{file.name}
</Text>
{upload.status === UploadStatus.Success && (
<Icon style={{ color: color.Success.Main }} src={Icons.Check} size="100" />
)}
</UploadCard>
);
}

2
src/app/components/upload-card/index.ts Normal file
View file

@ -0,0 +1,2 @@
export * from './UploadCard';
export * from './UploadCardRenderer';