zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Split image cropping into secondary step (#473)

Browse source 
* Split image cropping into secondary step

* Use ImageModel and GalleryModel

* Add fix for pasting image URLs

* Move models to state folder

* Fix things that broke after rebase

* Latest -- has image display bug

* Remove contentFit

* Fix iOS display in gallery

* Tuneup the api signatures and implement compress/resize on web

* Fix await

* Lint fix and remove unused function

* Fix android image pathing

* Fix external embed x button on android

* Remove min-height from composer (no longer useful and was mispositioning the composer on android)

* Fix e2e picker

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>
This commit is contained in:
Ollie Hsieh 2023-04-17 15:41:44 -07:00 • committed by GitHub
parent 91fadadb58
commit 2509290fdd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 875 additions and 833 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/view/com/composer/text-input/TextInput.web.tsx
View file

@ -12,6 +12,7 @@ import isEqual from 'lodash.isequal'
import {UserAutocompleteModel} from 'state/models/discovery/user-autocomplete'
import {createSuggestion} from './web/Autocomplete'
import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
import {isUriImage, blobToDataUri} from 'lib/media/util'
export interface TextInputRef {
focus: () => void
@ -37,7 +38,7 @@ export const TextInput = React.forwardRef(
suggestedLinks,
autocompleteView,
setRichText,
// onPhotoPasted, TODO
onPhotoPasted,
onSuggestedLinksChanged,
}: // onError, TODO
TextInputProps,
@ -72,6 +73,15 @@ export const TextInput = React.forwardRef(
attributes: {
class: modeClass,
},
handlePaste: (_, event) => {
const items = event.clipboardData?.items
if (items === undefined) {
return
}
getImageFromUri(items, onPhotoPasted)
},
},
content: richtext.text.toString(),
autofocus: true,
@ -147,3 +157,33 @@ const styles = StyleSheet.create({
marginBottom: 10,
},
})
function getImageFromUri(
items: DataTransferItemList,
callback: (uri: string) => void,
) {
for (let index = 0; index < items.length; index++) {
const item = items[index]
const {kind, type} = item
if (type === 'text/plain') {
item.getAsString(async itemString => {
if (isUriImage(itemString)) {
const response = await fetch(itemString)
const blob = await response.blob()
blobToDataUri(blob).then(callback, err => console.error(err))
}
})
}
if (kind === 'file') {
const file = item.getAsFile()
if (file instanceof Blob) {
blobToDataUri(new Blob([file], {type: item.type})).then(callback, err =>
console.error(err),
)
}
}
}
}