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" // TODO: clean up const FormattingIcons = ({ textareaRef, setText }: { textareaRef?: RefObject, setText?: (text: string) => void }) => { // const { textBefore, textAfter, selectedText } = useMemo(() => { // if (textareaRef && textareaRef.current) { // const textarea = textareaRef.current // const text = textareaRef.current.value // const selectionStart = textarea.selectionStart // const selectionEnd = textarea.selectionEnd // const textBefore = text.substring(0, selectionStart) // const textAfter = text.substring(selectionEnd) // const selectedText = text.substring(selectionStart, selectionEnd) // return { textBefore, textAfter, selectedText } // } // return { textBefore: '', textAfter: '' } // }, [textareaRef,]) const handleBoldClick = useCallback(() => { if (textareaRef?.current && setText) { const selectionStart = textareaRef.current.selectionStart const selectionEnd = textareaRef.current.selectionEnd const text = textareaRef.current.value const before = text.substring(0, selectionStart) const after = text.substring(selectionEnd) const selectedText = text.substring(selectionStart, selectionEnd) const newText = `${before}**${selectedText}**${after}` setText(newText) } }, [setText, textareaRef]) const handleItalicClick = useCallback(() => { if (textareaRef?.current && setText) { const selectionStart = textareaRef.current.selectionStart const selectionEnd = textareaRef.current.selectionEnd const text = textareaRef.current.value const before = text.substring(0, selectionStart) const after = text.substring(selectionEnd) const selectedText = text.substring(selectionStart, selectionEnd) const newText = `${before}*${selectedText}*${after}` setText(newText) } }, [setText, textareaRef]) const handleLinkClick = useCallback(() => { if (textareaRef?.current && setText) { const selectionStart = textareaRef.current.selectionStart const selectionEnd = textareaRef.current.selectionEnd const text = textareaRef.current.value const before = text.substring(0, selectionStart) const after = text.substring(selectionEnd) const selectedText = text.substring(selectionStart, selectionEnd) let formattedText = ''; if (selectedText.includes('http')) { formattedText = `[](${selectedText})` } else { formattedText = `[${selectedText}](https://)` } const newText = `${before}${formattedText}${after}` setText(newText) } }, [setText, textareaRef]) const handleImageClick = useCallback(() => { if (textareaRef?.current && setText) { const selectionStart = textareaRef.current.selectionStart const selectionEnd = textareaRef.current.selectionEnd const text = textareaRef.current.value const before = text.substring(0, selectionStart) const after = text.substring(selectionEnd) const selectedText = text.substring(selectionStart, selectionEnd) let formattedText = ''; if (selectedText.includes('http')) { formattedText = `![](${selectedText})` } else { formattedText = `![${selectedText}](https://)` } const newText = `${before}${formattedText}${after}` setText(newText) } }, [setText, textareaRef]) const formattingActions = useMemo(() => [ { 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 } ], [handleBoldClick, handleImageClick, handleItalicClick, handleLinkClick]) return (
{formattingActions.map(({ icon, name, action }) => (
) } export default FormattingIcons