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 }) => { 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: , name: "bold", action: handleBoldClick }, { icon: , name: "italic", action: handleItalicClick }, // { // icon: , // name: 'underline', // action: handleUnderlineClick // }, { icon: , name: "hyperlink", action: handleLinkClick }, { icon: , name: "image", action: handleImageClick } ] }, [textareaRef] ) return (
{formattingActions.map(({ icon, name, action }) => (
) } export default FormattingIcons