manifold/web/components/file-upload-button.tsx
Sinclair Chen 9a11f55762
Rich content (#620)
* Add TipTap editor and renderer components

* Change market description editor to rich text

* Type description as JSON, fix string-based logic

- Delete make-predictions.tsx
- Delete feed logic that showed descriptions

* wip Fix API validation

* fix type error

* fix extension import (backend)

In firebase, typescript compiles imports into common js imports
like `const StarterKit = require("@tiptap/starter-kit")`

Even though StarterKit is exported from the cjs file, it gets imported
as undefined. But it magically works if we import *

If you're reading this in the future, consider replacing StarterKit with
the entire list of extensions.

* Stop load on fail create market, improve warning

* Refactor editor as hook / fix infinite submit bug

Move state of editor back up to parent
We have to do this later anyways to allow parent to edit

* Add images - display, paste + uploading

* add uploading state of image

* Fix placeholder, misc styling

min height, quote

* Fix appending to description

* code review fixes: rename, refactor, chop carets

* Add hint & upload button on new lines

- bump to Tailwind 3.1 for arbitrary variants

* clean up, run prettier

* rename FileButton to FileUploadButton

* add image extension as functions dependency
2022-07-13 11:58:22 -07:00

27 lines
668 B
TypeScript

import { useRef } from 'react'
/** button that opens file upload window */
export function FileUploadButton(props: {
onFiles: (files: File[]) => void
className?: string
children?: React.ReactNode
}) {
const { onFiles, className, children } = props
const ref = useRef<HTMLInputElement>(null)
return (
<>
<button className={className} onClick={() => ref.current?.click()}>
{children}
</button>
<input
ref={ref}
type="file"
accept=".gif,.jpg,.jpeg,.png,.webp, image/*"
multiple
className="hidden"
onChange={(e) => onFiles(Array.from(e.target.files || []))}
/>
</>
)
}