You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
carbon/components/Editor.js

437 lines
12 KiB
JavaScript

// Theirs
import url from 'url'
import React from 'react'
import HTML5Backend from 'react-dnd-html5-backend'
import { DragDropContext } from 'react-dnd'
import domtoimage from 'dom-to-image'
import ReadFileDropContainer, { DATA_URL, TEXT } from 'dropperx'
import Spinner from 'react-spinner'
import shallowCompare from 'react-addons-shallow-compare'
// Ours
import Button from './Button'
import Dropdown from './Dropdown'
import BackgroundSelect from './BackgroundSelect'
import Settings from './Settings'
import Toolbar from './Toolbar'
import Overlay from './Overlay'
import Carbon from './Carbon'
import ExportMenu from './ExportMenu'
import {
THEMES,
THEMES_HASH,
LANGUAGES,
LANGUAGE_MIME_HASH,
LANGUAGE_MODE_HASH,
LANGUAGE_NAME_HASH,
DEFAULT_THEME,
DEFAULT_EXPORT_SIZE,
COLORS,
EXPORT_SIZES_HASH,
DEFAULT_CODE,
DEFAULT_SETTINGS,
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
DEFAULT_LANGUAGE,
DEFAULT_PRESET_ID
} from '../lib/constants'
import { serializeState, getQueryStringState } from '../lib/routing'
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
import { getSettings, escapeHtml, unescapeHtml, formatCode, omit } from '../lib/util'
import LanguageIcon from './svg/Language'
import ThemeIcon from './svg/Theme'
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
const themeIcon = <ThemeIcon />
const languageIcon = <LanguageIcon />
const tweetButtonStyle = { marginRight: '8px' }
class Editor extends React.Component {
7 years ago
constructor(props) {
super(props)
this.state = {
...DEFAULT_SETTINGS,
loading: true,
uploading: false,
code: props.content,
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
online: true,
preset: DEFAULT_PRESET_ID
}
this.export = this.export.bind(this)
this.upload = this.upload.bind(this)
this.updateSetting = this.updateSetting.bind(this)
this.updateTheme = this.updateTheme.bind(this)
this.updateLanguage = this.updateLanguage.bind(this)
this.updateBackground = this.updateBackground.bind(this)
this.resetDefaultSettings = this.resetDefaultSettings.bind(this)
this.getCarbonImage = this.getCarbonImage.bind(this)
this.onDrop = this.onDrop.bind(this)
this.innerRef = node => (this.carbonNode = node)
}
async componentDidMount() {
const { asPath = '' } = this.props.router
const { query, pathname } = url.parse(asPath, true)
const path = escapeHtml(pathname.split('/').pop())
const queryParams = getQueryStringState(query)
const initialState = Object.keys(queryParams).length ? queryParams : {}
try {
// TODO fix this hack
if (this.props.api.getGist && path.length >= 19 && path.indexOf('.') === -1) {
const { content, language } = await this.props.api.getGist(path)
if (language) {
initialState.language = language.toLowerCase()
}
initialState.code = content
}
} catch (e) {
// eslint-disable-next-line
console.log(e)
}
const newState = {
// Load from localStorage
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
...getSettings(localStorage),
// and then URL params
...initialState,
loading: false,
online: Boolean(window && window.navigator && window.navigator.onLine)
}
6 years ago
// Makes sure the slash in 'application/X' is decoded
if (newState.language) {
newState.language = unescapeHtml(newState.language)
}
this.setState(newState)
window.addEventListener('offline', this.setOffline)
window.addEventListener('online', this.setOnline)
}
componentWillUnmount() {
window.removeEventListener('offline', this.setOffline)
window.removeEventListener('online', this.setOnline)
}
componentDidUpdate(prevProps, prevState) {
// this.props ensures props are not compared, only state
if (shallowCompare(this, this.props, prevState)) {
this.props.onUpdate(this.state)
}
}
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
updateCode = code => this.setState({ code })
updateAspectRatio = aspectRatio => this.setState({ aspectRatio })
updateTitleBar = titleBar => this.setState({ titleBar })
setOffline = () => this.setState({ online: false })
setOnline = () => this.setState({ online: true })
async getCarbonImage(
{
format,
type,
squared = this.state.squaredImage,
exportSize = (EXPORT_SIZES_HASH[this.state.exportSize] || DEFAULT_EXPORT_SIZE).value
} = { format: 'png' }
) {
// if safari, get image from api
const isPNG = format !== 'svg'
if (
this.props.api.image &&
navigator.userAgent.indexOf('Safari') !== -1 &&
navigator.userAgent.indexOf('Chrome') === -1 &&
isPNG
) {
const encodedState = serializeState(this.state)
return this.props.api.image(encodedState)
}
const node = this.carbonNode
const map = new Map()
const undoMap = value => {
map.forEach((value, node) => (node.innerText = value))
return value
}
if (isPNG) {
node.querySelectorAll('span[role="presentation"]').forEach(node => {
if (node.innerText && node.innerText.match(/%[A-Za-z0-9]{2}/)) {
map.set(node, node.innerText)
node.innerText = encodeURIComponent(node.innerText)
}
})
}
const width = node.offsetWidth * exportSize
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
const height = squared ? node.offsetWidth * exportSize : node.offsetHeight * exportSize
const config = {
style: {
transform: `scale(${exportSize})`,
'transform-origin': 'center',
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
background: squared ? this.state.backgroundColor : 'none'
},
filter: n => {
if (n.className) {
return String(n.className).indexOf('eliminateOnRender') < 0
}
return true
},
width,
height
}
try {
if (type === 'blob') {
if (format === 'svg') {
return (
domtoimage
.toSvg(node, config)
.then(dataUrl => dataUrl.replace(/&nbsp;/g, '&#160;'))
// https://stackoverflow.com/questions/7604436/xmlparseentityref-no-name-warnings-while-loading-xml-into-a-php-file
.then(dataUrl => dataUrl.replace(/&(?!#?[a-z0-9]+;)/g, '&amp;'))
.then(uri => uri.slice(uri.indexOf(',') + 1))
.then(data => new Blob([data], { type: 'image/svg+xml' }))
.then(data => window.URL.createObjectURL(data))
)
}
return await domtoimage.toBlob(node, config).then(blob => window.URL.createObjectURL(blob))
}
// Twitter needs regular dataurls
return await domtoimage.toPng(node, config)
} finally {
undoMap()
}
}
updateSetting(key, value) {
this.setState({ [key]: value })
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
if (Object.prototype.hasOwnProperty.call(DEFAULT_SETTINGS, key)) {
this.setState({ preset: null })
}
}
export(format = 'png') {
const link = document.createElement('a')
const prefix = this.state.filename || 'carbon'
return this.getCarbonImage({ format, type: 'blob' }).then(url => {
if (format !== 'open') {
link.download = `${prefix}.${format}`
}
link.href = url
document.body.appendChild(link)
link.click()
link.remove()
})
}
resetDefaultSettings() {
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
this.setState({ ...DEFAULT_SETTINGS, preset: DEFAULT_PRESET_ID })
this.props.onReset()
}
upload() {
this.setState({ uploading: true })
this.getCarbonImage({ format: 'png' })
.then(this.props.api.tweet.bind(null, this.state.code || DEFAULT_CODE))
// eslint-disable-next-line
.catch(console.error)
.then(() => this.setState({ uploading: false }))
}
onDrop([file]) {
if (isImage(file)) {
this.setState({
backgroundImage: file.content,
backgroundImageSelection: null,
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
backgroundMode: 'image',
preset: null
})
} else {
this.setState({ code: file.content, language: 'auto' })
}
}
updateTheme(theme) {
this.updateSetting('theme', theme.id)
}
updateLanguage(language) {
this.updateSetting('language', language.mime || language.mode)
}
updateBackground({ photographer, ...changes } = {}) {
if (photographer) {
this.setState(({ code = DEFAULT_CODE }) => ({
...changes,
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
code: code + `\n\n// Photo by ${photographer.name} on Unsplash`,
preset: null
}))
} else {
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
this.setState({ ...changes, preset: null })
}
}
format = () =>
formatCode(this.state.code)
.then(this.updateCode)
.catch(() => {
// create toast here in the future
})
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
applyPreset = ({ id: preset, ...settings }) => this.setState({ preset, ...settings })
render() {
const {
loading,
theme,
language,
backgroundColor,
backgroundImage,
backgroundMode,
aspectRatio,
uploading,
online,
titleBar,
code,
exportSize
} = this.state
if (loading) {
return (
<div>
<Spinner />
<style jsx>
{`
div {
height: 160px;
}
`}
</style>
</div>
)
}
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
const config = omit(this.state, ['code', 'aspectRatio', 'titleBar'])
return (
<React.Fragment>
<div className="editor">
<Toolbar>
<Dropdown
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
icon={themeIcon}
selected={THEMES_HASH[theme] || DEFAULT_THEME}
list={THEMES}
onChange={this.updateTheme}
/>
<Dropdown
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
icon={languageIcon}
selected={
LANGUAGE_NAME_HASH[language] ||
LANGUAGE_MIME_HASH[language] ||
LANGUAGE_MODE_HASH[language] ||
LANGUAGE_MODE_HASH[DEFAULT_LANGUAGE]
}
list={LANGUAGES}
onChange={this.updateLanguage}
/>
<BackgroundSelect
onChange={this.updateBackground}
mode={backgroundMode}
color={backgroundColor}
image={backgroundImage}
aspectRatio={aspectRatio}
/>
<Settings
{...config}
onChange={this.updateSetting}
resetDefaultSettings={this.resetDefaultSettings}
format={this.format}
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
applyPreset={this.applyPreset}
getCarbonImage={this.getCarbonImage}
/>
<div className="buttons">
{this.props.api.tweet &&
online && (
<Button
className="tweetButton"
onClick={this.upload}
title={uploading ? 'Loading...' : 'Tweet'}
color="#57b5f9"
Add preset feature (#595) * Add preset feature without create * fix lint errors * Add presets to Editor state * add remove, update -> apply, omit presets * replace name with index, add undo functionality * fix reduce function * Tweaks: - Make remove filter setState atomic - Remove broken sCU in BackgroundSelect - Touch up style of arrow functions a little - Remove titleBar from default settings - Don't expose SETTINGS_KEYS - Use hasOwnProperty instead of includes() * refactor preset state into Settings * move format code into editor and make it work again * omit custom in applyPreset * move presets array state into Settings * keep custom sCU in BackgroundSelect * pull out inline objects * revert pages/index * increase Presets font-size, remove margin-top * Add ability to create presets * also enable passing exportSize as prop * move selectedPreset back into Settings (my bad Sean) * replace splice with filter, getSavedX -> getX * Revert "move selectedPreset back into Settings (my bad Sean)" This reverts commit ae5da4700ea36ad7c31e697e83a2724be4b448f4. * make sure background updates remove selected preset * selectedPreset -> preset * use onChange instead of selectPreset * use preset id's instead of indexes * bug fixes * use disabled instead of pointer-events * make .settings-presets-applied flex 💪 * make .settings-presets-arrow flex 💪 * move getPresets outside of `setState` * move inline styles to style tag * refactor using omitBy and isFunction * remove lodash.isfunction * fix applyPreset to disclude preset field * move omit to getSettingsFromProps * replace lodash.omit with omitBy solution * .includes -> .indexOf * add default preset and presetApplied state * fix lint error * remove presetApplied * add more default presets * fix default preset functionality * tweaks * preserve preset list scrollLeft b/w updates with a hack * Use ref for preset content * remove forwardRef
6 years ago
style={tweetButtonStyle}
/>
)}
<ExportMenu
onChange={this.updateSetting}
export={this.export}
exportSize={exportSize}
/>
</div>
</Toolbar>
<ReadFileDropContainer readAs={readAs} onDrop={this.onDrop}>
{({ isOver, canDrop }) => (
<Overlay
isOver={isOver || canDrop}
title={`Drop your file here to import ${isOver ? '✋' : '✊'}`}
>
{/*key ensures Carbon's internal language state is updated when it's changed by Dropdown*/}
<Carbon
key={language}
config={this.state}
updateCode={this.updateCode}
onAspectRatioChange={this.updateAspectRatio}
titleBar={titleBar}
updateTitleBar={this.updateTitleBar}
innerRef={this.innerRef}
>
{code != null ? code : DEFAULT_CODE}
</Carbon>
</Overlay>
)}
</ReadFileDropContainer>
</div>
<style jsx>
{`
.editor {
background: ${COLORS.BLACK};
border: 3px solid ${COLORS.SECONDARY};
border-radius: 8px;
padding: 16px;
}
.buttons {
display: flex;
margin-left: auto;
}
`}
</style>
</React.Fragment>
)
}
}
function isImage(file) {
return file.type.split('/')[0] === 'image'
}
function readAs(file) {
if (isImage(file)) {
return DATA_URL
}
return TEXT
}
Editor.defaultProps = {
api: {},
onUpdate: () => {},
onReset: () => {}
}
export default DragDropContext(HTML5Backend)(Editor)