86 lines
2.1 KiB
TypeScript
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
|