diff --git a/components/Editor.js b/components/Editor.js
index f190629..ea802d9 100644
--- a/components/Editor.js
+++ b/components/Editor.js
@@ -38,6 +38,8 @@ const BackgroundSelect = dynamic(() => import('./BackgroundSelect'), {
loading: () => null
})
+const getConfig = omit(['code'])
+
class Editor extends React.Component {
static contextType = ApiContext
@@ -326,7 +328,7 @@ class Editor extends React.Component {
exportSize
} = this.state
- const config = omit(this.state, ['code'])
+ const config = getConfig(this.state)
const theme = this.getTheme()
diff --git a/components/EditorContainer.js b/components/EditorContainer.js
index 6df5085..e43402a 100644
--- a/components/EditorContainer.js
+++ b/components/EditorContainer.js
@@ -16,7 +16,7 @@ function EditorContainer(props) {
}, [])
React.useEffect(() => {
- saveThemes(localStorage, themes.filter(({ custom }) => custom))
+ saveThemes(themes.filter(({ custom }) => custom))
}, [themes])
return
diff --git a/components/ImagePicker.js b/components/ImagePicker.js
index 34cad37..ce5cb15 100644
--- a/components/ImagePicker.js
+++ b/components/ImagePicker.js
@@ -40,7 +40,8 @@ const INITIAL_STATE = {
crop: null,
imageAspectRatio: null,
pixelCrop: null,
- photographer: null
+ photographer: null,
+ dataURL: null
}
export default class ImagePicker extends React.Component {
@@ -48,13 +49,14 @@ export default class ImagePicker extends React.Component {
constructor(props) {
super(props)
this.state = INITIAL_STATE
+ this.selectMode = this.selectMode.bind(this)
this.handleURLInput = this.handleURLInput.bind(this)
+ this.uploadImage = this.uploadImage.bind(this)
this.selectImage = this.selectImage.bind(this)
this.removeImage = this.removeImage.bind(this)
this.onImageLoaded = this.onImageLoaded.bind(this)
this.onCropChange = this.onCropChange.bind(this)
this.onDragEnd = this.onDragEnd.bind(this)
- this.selectMode = this.selectMode.bind(this)
}
static getDerivedStateFromProps(nextProps, state) {
@@ -73,9 +75,13 @@ export default class ImagePicker extends React.Component {
return null
}
+ selectMode(mode) {
+ this.setState({ mode })
+ }
+
async onDragEnd() {
if (this.state.pixelCrop) {
- const croppedImg = await getCroppedImg(this.props.imageDataURL, this.state.pixelCrop)
+ const croppedImg = await getCroppedImg(this.state.dataURL, this.state.pixelCrop)
this.props.onChange({ backgroundImageSelection: croppedImg })
}
}
@@ -102,18 +108,23 @@ export default class ImagePicker extends React.Component {
})
}
+ handleImageChange = (url, dataURL, photographer) => {
+ this.setState({ dataURL, photographer }, () => {
+ this.props.onChange({
+ backgroundImage: url,
+ backgroundImageSelection: null,
+ photographer
+ })
+ })
+ }
+
handleURLInput(e) {
e.preventDefault()
const url = e.target[0].value
return this.context
.downloadThumbnailImage({ url })
- .then(({ dataURL }) =>
- this.props.onChange({
- backgroundImage: dataURL,
- backgroundImageSelection: null,
- photographer: null
- })
- )
+ .then(res => res.dataURL)
+ .then(dataURL => this.handleImageChange(url, dataURL))
.catch(err => {
if (err.message.indexOf('Network Error') > -1) {
this.setState({
@@ -124,22 +135,15 @@ export default class ImagePicker extends React.Component {
})
}
- selectMode(mode) {
- this.setState({ mode })
+ async uploadImage(e) {
+ const dataURL = await fileToDataURL(e.target.files[0])
+ return this.handleImageChange(dataURL, dataURL)
}
- selectImage(e, { photographer } = {}) {
- const file = e.target ? e.target.files[0] : e
-
- return fileToDataURL(file).then(dataURL =>
- this.setState({ photographer }, () => {
- this.props.onChange({
- backgroundImage: dataURL,
- backgroundImageSelection: null,
- photographer
- })
- })
- )
+ async selectImage(url, { photographer } = {}) {
+ // TODO use React suspense for loading this asset
+ const { dataURL } = await this.context.downloadThumbnailImage({ url })
+ return this.handleImageChange(url, dataURL, photographer)
}
removeImage() {
@@ -172,7 +176,7 @@ export default class ImagePicker extends React.Component {
) : (