diff --git a/components/form.js b/components/form.js index c5b3e24e..35dc277c 100644 --- a/components/form.js +++ b/components/form.js @@ -26,6 +26,7 @@ import ReactDatePicker from 'react-datepicker' import 'react-datepicker/dist/react-datepicker.css' import { debounce } from './use-debounce-callback' import { ImageUpload } from './image' +import LinkIcon from '../svgs/link.svg' export function SubmitButton ({ children, variant, value, onClick, disabled, cost, ...props @@ -94,11 +95,19 @@ export function InputSkeleton ({ label, hint }) { ) } -function ImageSelector ({ file, url }) { +function ImageSelector ({ file, url, text, setText, onRemove }) { + const onLink = () => { + let newText = text ? text + '\n\n' : '' + newText += url + setText(newText) + } + return ( - - + + {file.name} + + ) } @@ -221,6 +230,9 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setH }, [innerRef, helpers?.setValue, setSelectionRange, onKeyDown]) const [uploadedImages, setUploadedImages] = useState([]) + const removeUploadedImage = useCallback((i) => { + setUploadedImages(prev => prev.slice(0, i).concat(prev.slice(i + 1))) + }, [setUploadedImages]) return ( @@ -263,7 +275,7 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setH />)} {uploadedImages.map((props, i) => { - return + return removeUploadedImage(i)} /> })} {tab !== 'write' &&