ekzyis/stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Link and remove image

Browse Source
This commit is contained in:
ekzyis 2023-10-19 03:51:13 +02:00 committed by ekzyis
parent d2b93502bc
commit 9ac774c0e7
1 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/form.js
View File

@ -26,6 +26,7 @@ import ReactDatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css' import 'react-datepicker/dist/react-datepicker.css'
import { debounce } from './use-debounce-callback' import { debounce } from './use-debounce-callback'
import { ImageUpload } from './image' import { ImageUpload } from './image'
import LinkIcon from '../svgs/link.svg'
export function SubmitButton ({ export function SubmitButton ({
children, variant, value, onClick, disabled, cost, ...props 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 ( return (
<span className='d-flex align-items-center'> <span className='d-flex align-items-center text-muted'>
<img className='me-1' src={window.URL.createObjectURL(file)} width={32} height={32} style={{ 'object-fit': 'contain' }} /> <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> <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> </span>
) )
} }
@ -221,6 +230,9 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setH
}, [innerRef, helpers?.setValue, setSelectionRange, onKeyDown]) }, [innerRef, helpers?.setValue, setSelectionRange, onKeyDown])
const [uploadedImages, setUploadedImages] = useState([]) const [uploadedImages, setUploadedImages] = useState([])
const removeUploadedImage = useCallback((i) => {
setUploadedImages(prev => prev.slice(0, i).concat(prev.slice(i + 1)))
}, [setUploadedImages])
return ( return (
<FormGroup label={label} className={groupClassName}> <FormGroup label={label} className={groupClassName}>
@ -263,7 +275,7 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setH
/>)} />)}
</UserSuggest> </UserSuggest>
{uploadedImages.map((props, i) => { {uploadedImages.map((props, i) => {
return <ImageSelector {...props} key={i} /> return <ImageSelector key={i} {...props} text={meta.value} setText={helpers.setValue} onRemove={() => removeUploadedImage(i)} />
})} })}
</div> </div>
{tab !== 'write' && {tab !== 'write' &&