CoastalCommitsPastes/client/components/edit-document/formatting-icons/index.tsx

78 lines
1.7 KiB
TypeScript
Raw Normal View History

2022-04-09 20:48:19 -04:00
import Bold from "@geist-ui/icons/bold"
import Italic from "@geist-ui/icons/italic"
import Link from "@geist-ui/icons/link"
import ImageIcon from "@geist-ui/icons/image"
2022-03-08 03:37:18 -05:00
import { RefObject, useCallback, useMemo } from "react"
2022-04-09 20:48:19 -04:00
import styles from "../document.module.css"
import { Button, ButtonGroup } from "@geist-ui/core"
import { TextareaMarkdownRef } from "textarea-markdown-editor"
2022-03-08 03:37:18 -05:00
// TODO: clean up
2022-04-09 20:48:19 -04:00
const FormattingIcons = ({
textareaRef,
}: {
textareaRef?: RefObject<TextareaMarkdownRef>
2022-04-09 20:48:19 -04:00
}) => {
2022-03-08 03:37:18 -05:00
2022-03-08 16:19:42 -05:00
2022-04-09 20:48:19 -04:00
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")
return [
{
icon: <Bold />,
name: "bold",
action: handleBoldClick
},
{
icon: <Italic />,
name: "italic",
action: handleItalicClick
},
// {
// icon: <Underline />,
// name: 'underline',
// action: handleUnderlineClick
// },
{
icon: <Link />,
name: "hyperlink",
action: handleLinkClick
},
{
icon: <ImageIcon />,
name: "image",
action: handleImageClick
}
]
},
[textareaRef]
2022-04-09 20:48:19 -04:00
)
2022-03-08 03:37:18 -05:00
2022-04-09 20:48:19 -04:00
return (
<div className={styles.actionWrapper}>
<ButtonGroup className={styles.actions}>
{formattingActions.map(({ icon, name, action }) => (
<Button
auto
scale={2 / 3}
px={0.6}
aria-label={name}
key={name}
icon={icon}
onMouseDown={(e) => e.preventDefault()}
onClick={action}
/>
))}
</ButtonGroup>
</div>
)
2022-03-08 03:37:18 -05:00
}
export default FormattingIcons