CoastalCommitsPastes/client/components/edit-document/formatting-icons/index.tsx
2022-11-09 18:38:05 -08:00

86 lines
2.1 KiB
TypeScript

import Bold from "@geist-ui/icons/bold"
import Italic from "@geist-ui/icons/italic"
import Link from "@geist-ui/icons/link"
import Code from "@geist-ui/icons/code"
import List from "@geist-ui/icons/list"
import ImageIcon from "@geist-ui/icons/image"
import { RefObject, useMemo } from "react"
import styles from "../document.module.css"
import { Button, ButtonGroup, Tooltip } from "@geist-ui/core/dist"
import { TextareaMarkdownRef } from "textarea-markdown-editor"
// TODO: clean up
const FormattingIcons = ({
textareaRef
}: {
textareaRef?: RefObject<TextareaMarkdownRef>
}) => {
const formattingActions = useMemo(() => {
const handleBoldClick = () => textareaRef?.current?.trigger("bold")
const handleItalicClick = () => textareaRef?.current?.trigger("italic")
const handleLinkClick = () => textareaRef?.current?.trigger("link")
const handleImageClick = () => textareaRef?.current?.trigger("image")
const handleCodeClick = () => textareaRef?.current?.trigger("code")
const handleListClick = () =>
textareaRef?.current?.trigger("unordered-list")
return [
{
icon: <Bold />,
name: "bold",
action: handleBoldClick
},
{
icon: <Italic />,
name: "italic",
action: handleItalicClick
},
{
icon: <Link />,
name: "hyperlink",
action: handleLinkClick
},
{
icon: <ImageIcon />,
name: "image",
action: handleImageClick
},
{
icon: <Code />,
name: "code",
action: handleCodeClick
},
{
icon: <List />,
name: "unordered-list",
action: handleListClick
}
]
}, [textareaRef])
return (
<div className={styles.actionWrapper}>
<ButtonGroup className={styles.actions}>
{formattingActions.map(({ icon, name, action }) => (
<Tooltip
text={name[0].toUpperCase() + name.slice(1).replace("-", " ")}
key={name}
>
<Button
auto
scale={2 / 3}
px={0.6}
aria-label={name}
icon={icon}
onMouseDown={(e) => e.preventDefault()}
onClick={action}
/>
</Tooltip>
))}
</ButtonGroup>
</div>
)
}
export default FormattingIcons