-
(this.exportContainerNode = ele)}>
- {content}
-
+
+
+
+
-
+
)
}
}
-export default Carbon
+export default DragDropContext(HTML5Backend)(Carbon)
diff --git a/components/CodeWindow.js b/components/CodeWindow.js
new file mode 100644
index 0000000..4d95277
--- /dev/null
+++ b/components/CodeWindow.js
@@ -0,0 +1,280 @@
+import React, { PureComponent } from 'react'
+import * as hljs from 'highlight.js'
+import Spinner from 'react-spinner'
+import ResizeObserver from 'resize-observer-polyfill'
+import debounce from 'lodash.debounce'
+import ms from 'ms'
+
+import WindowControls from '../components/WindowControls'
+import Watermark from '../components/svg/Watermark'
+import CodeMirror from '../lib/react-codemirror'
+import { COLORS, LANGUAGE_MODE_HASH, LANGUAGE_NAME_HASH, DEFAULT_SETTINGS } from '../lib/constants'
+
+class CodeWindow extends PureComponent {
+ constructor(props) {
+ super(props)
+
+ this.state = {
+ loading: true,
+ language: props.config.language
+ }
+
+ this.handleLanguageChange = this.handleLanguageChange.bind(this)
+ this.handleTitleBarChange = this.handleTitleBarChange.bind(this)
+ this.codeUpdated = this.codeUpdated.bind(this)
+ }
+
+ componentDidMount() {
+ this.setState({
+ loading: false
+ })
+
+ this.handleLanguageChange(this.props.children)
+
+ const ro = new ResizeObserver(entries => {
+ const cr = entries[0].contentRect
+ this.props.onAspectRatioChange(cr.width / cr.height)
+ })
+ ro.observe(this.exportContainerNode)
+ }
+
+ componentWillReceiveProps(newProps) {
+ // TODO use getDerivedStateFromProps() on React@16.3
+ this.handleLanguageChange(newProps.children, { customProps: newProps })
+ }
+
+ codeUpdated(newCode) {
+ this.handleLanguageChange(newCode)
+ this.props.updateCode(newCode)
+ }
+
+ handleTitleBarChange(newTitle) {
+ this.props.updateTitleBar(newTitle)
+ }
+
+ handleLanguageChange = debounce(
+ (newCode, config) => {
+ const props = (config && config.customProps) || this.props
+
+ if (props.config.language === 'auto') {
+ // try to set the language
+ const detectedLanguage = hljs.highlightAuto(newCode).language
+ const languageMode =
+ LANGUAGE_MODE_HASH[detectedLanguage] || LANGUAGE_NAME_HASH[detectedLanguage]
+
+ if (languageMode) {
+ this.setState({ language: languageMode.mime || languageMode.mode })
+ }
+ } else {
+ this.setState({ language: props.config.language })
+ }
+ },
+ ms('300ms'),
+ { trailing: true }
+ )
+
+ render() {
+ const config = { ...DEFAULT_SETTINGS, ...this.props.config }
+ const options = {
+ lineNumbers: config.lineNumbers,
+ mode: this.state.language || 'plaintext',
+ theme: config.theme,
+ scrollBarStyle: null,
+ viewportMargin: Infinity,
+ lineWrapping: true,
+ extraKeys: {
+ 'Shift-Tab': 'indentLess'
+ }
+ }
+ const backgroundImage =
+ (this.props.config.backgroundImage && this.props.config.backgroundImageSelection) ||
+ this.props.config.backgroundImage
+
+ // set content to spinner if loading, else editor
+ let content = (
+
+
+
+
+ )
+ if (this.state.loading === false) {
+ content = (
+
+ {config.windowControls ? (
+
+ ) : null}
+
this.codeUpdated(code)}
+ value={this.props.children}
+ options={options}
+ />
+ {config.watermark && }
+
+
+
+ )
+ }
+
+ return (
+
+ {/* TODO use createRef */}
+
(this.exportContainerNode = ele)}>
+ {content}
+
+
+
+
+ )
+ }
+}
+
+export default CodeWindow
diff --git a/components/Dropdown.js b/components/Dropdown.js
index 4c71cbe..123cf9c 100644
--- a/components/Dropdown.js
+++ b/components/Dropdown.js
@@ -74,11 +74,9 @@ class Dropdown extends PureComponent {
}
}
-const renderDropdown = ({ button, color, list, minWidth, selected }) => ({
+const renderDropdown = ({ button, color, list, minWidth }) => ({
isOpen,
highlightedIndex,
- setHighlightedIndex,
- selectHighlightedItem,
selectedItem,
getRootProps,
getButtonProps,
diff --git a/components/Editor.js b/components/Editor.js
index 33b7a6e..df225cf 100644
--- a/components/Editor.js
+++ b/components/Editor.js
@@ -1,276 +1,48 @@
-// Theirs
import React from 'react'
-import HTML5Backend from 'react-dnd-html5-backend'
-import { DragDropContext } from 'react-dnd'
-import domtoimage from 'dom-to-image'
+import { Subscribe } from 'unstated'
import ReadFileDropContainer, { DATA_URL, TEXT } from 'dropperx'
-// Ours
-import Button from './Button'
-import Dropdown from './Dropdown'
-import BackgroundSelect from './BackgroundSelect'
-import Settings from './Settings'
-import Toolbar from './Toolbar'
+import EditorContainer from '../containers/Editor'
import Overlay from './Overlay'
-import Carbon from './Carbon'
-import api from '../lib/api'
-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
-} from '../lib/constants'
-import { serializeState } from '../lib/routing'
-import { getState } from '../lib/util'
+import CodeWindow from './CodeWindow'
-const saveButtonOptions = {
- button: true,
- color: '#c198fb',
- selected: { id: 'SAVE_IMAGE', name: 'Save Image' },
- list: ['png', 'svg'].map(id => ({ id, name: id.toUpperCase() }))
-}
+import { DEFAULT_CODE } from '../lib/constants'
+import { isImage } from '../lib/util'
+
+const editorContainer = [EditorContainer]
class Editor extends React.Component {
constructor(props) {
super(props)
- this.state = {
- ...DEFAULT_SETTINGS,
- uploading: false,
- code: props.content
- }
-
- this.save = this.save.bind(this)
- this.upload = this.upload.bind(this)
- this.updateSetting = this.updateSetting.bind(this)
- this.updateCode = this.updateSetting.bind(this, 'code')
- this.updateAspectRatio = this.updateSetting.bind(this, 'aspectRatio')
- this.updateTitleBar = this.updateSetting.bind(this, 'titleBar')
- 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)
- }
-
- componentDidMount() {
- // Load from localStorage and then URL params
- this.setState({
- ...getState(localStorage),
- ...this.props.initialState
- })
- }
-
- componentDidUpdate() {
- this.props.onUpdate(this.state)
- }
-
- getCarbonImage({ format } = { format: 'png' }) {
- // if safari, get image from api
- if (
- navigator.userAgent.indexOf('Safari') !== -1 &&
- navigator.userAgent.indexOf('Chrome') === -1 &&
- format === 'png'
- ) {
- const encodedState = serializeState(this.state)
- return api.image(encodedState)
- }
-
- const node = document.getElementById('export-container')
-
- const exportSize = (EXPORT_SIZES_HASH[this.state.exportSize] || DEFAULT_EXPORT_SIZE).value
- const width = node.offsetWidth * exportSize
- const height = this.state.squaredImage
- ? node.offsetWidth * exportSize
- : node.offsetHeight * exportSize
-
- const config = {
- style: {
- transform: `scale(${exportSize})`,
- 'transform-origin': 'center',
- background: this.state.squaredImage ? this.state.backgroundColor : 'none'
- },
- filter: n => {
- // %[00 -> 19] cause failures
- if (n.innerText && n.innerText.match(/%[0-1][0-9]/)) {
- return false
- }
- if (n.className) {
- return String(n.className).indexOf('eliminateOnRender') < 0
- }
- return true
- },
- width,
- height
- }
-
- if (format === 'svg') {
- return domtoimage
- .toSvg(node, config)
- .then(dataUrl => dataUrl.split(' ').join(' '))
- .then(uri => uri.slice(uri.indexOf(',') + 1))
- .then(data => new Blob([data], { type: 'image/svg+xml' }))
- .then(data => window.URL.createObjectURL(data))
- }
-
- return domtoimage.toBlob(node, config).then(blob => window.URL.createObjectURL(blob))
- }
-
- updateSetting(key, value) {
- this.setState({ [key]: value })
+ this.renderPane = this.renderPane.bind(this)
}
- save({ id: format = 'png' }) {
- const link = document.createElement('a')
-
- return this.getCarbonImage({ format }).then(url => {
- link.download = `carbon.${format}`
- link.href = url
- document.body.appendChild(link)
- link.click()
- link.remove()
- })
- }
-
- resetDefaultSettings() {
- this.setState(DEFAULT_SETTINGS)
- localStorage.clear()
- }
-
- upload() {
- this.setState({ uploading: true })
- this.getCarbonImage({ format: 'png' })
- .then(this.props.tweet)
- .catch(console.error)
- .then(() => this.setState({ uploading: false }))
- }
-
- onDrop([file]) {
- if (isImage(file)) {
- this.setState({
- backgroundImage: file.content,
- backgroundImageSelection: null,
- backgroundMode: 'image'
- })
- } 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,
- code: code + `\n\n// Photo by ${photographer.name} on Unsplash`
- }))
- } else {
- this.setState(changes)
- }
- }
-
- render() {
+ renderPane(editor) {
return (
-
-
-
-
-
-
-
-
- {this.props.tweet && (
-
- )}
-
-
-
-
-
- {({ isOver, canDrop }) => (
-
-
- {this.state.code != null ? this.state.code : DEFAULT_CODE}
-
-
- )}
-
-
+
+ {({ isOver, canDrop }) => (
+
+
+ {editor.state.code != null ? editor.state.code : DEFAULT_CODE}
+
+
+ )}
+
)
}
-}
-function isImage(file) {
- return file.type.split('/')[0] === 'image'
+ render() {
+ return
{this.renderPane}
+ }
}
function readAs(file) {
@@ -280,8 +52,4 @@ function readAs(file) {
return TEXT
}
-Editor.defaultProps = {
- onUpdate: () => {}
-}
-
-export default DragDropContext(HTML5Backend)(Editor)
+export default Editor
diff --git a/components/Meta.js b/components/Meta.js
index 3d23303..c741f38 100644
--- a/components/Meta.js
+++ b/components/Meta.js
@@ -1,3 +1,4 @@
+import React from 'react'
import Head from 'next/head'
import { THEMES } from '../lib/constants'
import Reset from './style/Reset'
diff --git a/components/Toolbar.js b/components/Toolbar.js
index 464c50f..91ee4a5 100644
--- a/components/Toolbar.js
+++ b/components/Toolbar.js
@@ -1,31 +1,105 @@
import React from 'react'
+import { Subscribe } from 'unstated'
-const Toolbar = props => (
-
- {props.children}
-
-
-)
+ list={LANGUAGES}
+ onChange={editor.updateLanguage}
+ />
+
+
+
+ {/* TODO don't set container function if no prop */}
+ {editor.upload && (
+
+ )}
+
+
+
+