Link and remove image

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 (
-    <span className='d-flex align-items-center'>
-      <img className='me-1' src={window.URL.createObjectURL(file)} width={32} height={32} style={{ 'object-fit': 'contain' }} />
+    <span className='d-flex align-items-center text-muted'>
+      <img className='me-1' src={window.URL.createObjectURL(file)} width={32} height={32} style={{ objectFit: 'contain' }} />
       <a href={url} target='_blank' rel='noreferrer'>{file.name}</a>
+      <LinkIcon className='ms-auto me-1' width={18} height={18} onClick={onLink} style={{ cursor: 'pointer' }} />
+      <CloseIcon width={18} height={18} onClick={onRemove} style={{ cursor: 'pointer' }} />
     </span>
   )
 }
@@ -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 (
     <FormGroup label={label} className={groupClassName}>
@@ -263,7 +275,7 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setH
             />)}
           </UserSuggest>
           {uploadedImages.map((props, i) => {
-            return <ImageSelector {...props} key={i} />
+            return <ImageSelector key={i} {...props} text={meta.value} setText={helpers.setValue} onRemove={() => removeUploadedImage(i)} />
           })}
         </div>
         {tab !== 'write' &&