71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
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"
|
|
import { RefObject, useCallback, useMemo } from "react"
|
|
import styles from "../document.module.css"
|
|
import { Button, ButtonGroup } from "@geist-ui/core"
|
|
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")
|
|
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])
|
|
|
|
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>
|
|
)
|
|
}
|
|
|
|
export default FormattingIcons
|