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