+ {
+ this.editor = element
+ }}
+ />
+ {/*
+ )
+ }
+}
diff --git a/src/edit/features/Editor/Editor.less b/src/edit/features/Editor/Editor.less
new file mode 100644
index 00000000..e69de29b
diff --git a/src/edit/features/Editor/index.js b/src/edit/features/Editor/index.js
new file mode 100644
index 00000000..f68b3486
--- /dev/null
+++ b/src/edit/features/Editor/index.js
@@ -0,0 +1 @@
+export {default} from './Editor'
\ No newline at end of file
diff --git a/src/edit/features/Marker/ContentEditable.js b/src/edit/features/Marker/ContentEditable.js
new file mode 100644
index 00000000..0825582a
--- /dev/null
+++ b/src/edit/features/Marker/ContentEditable.js
@@ -0,0 +1,78 @@
+import React, {Component} from 'react'
+
+export default class ContentEditable extends Component {
+ constructor(props) {
+ super(props)
+
+ this.emitChange = this.emitChange.bind(this)
+ this.onRef = this.onRef.bind(this)
+ }
+
+ getHtml() {
+ return this.props.children
+ }
+
+ onRef(element) {
+ this.htmlEl = element
+ }
+
+ emitChange() {
+ if (!this.htmlEl) return
+ const html = this.htmlEl.innerHTML
+
+ if (html !== this.lastHtml) this.props.onChange(html)
+ this.lastHtml = html
+ }
+
+ componentDidMount() {
+ this.htmlEl.focus()
+ }
+
+ shouldComponentUpdate(nextProps) {
+ let {props, htmlEl} = this
+
+ // We need not rerender if the change of props simply reflects the user's edits.
+ // Rerendering in this case would make the cursor/caret jump
+
+ // Rerender if there is no element yet... (somehow?)
+ if (!this.htmlEl) return true
+
+ // // ...or if html really changed... (programmatically, not by user edit)
+ // if (nextProps.html !== htmlEl.innerHTML && nextProps.html !== props.html) {
+ // return true
+ // }
+
+ return false
+
+ // let optional = ['style', 'className', 'disabled', 'tagName']
+ //
+ // // Handle additional properties
+ // return optional.some(name => props[name] !== nextProps[name])
+ }
+
+ componentDidUpdate() {
+ const html = this.getHtml()
+ if (this.htmlEl && this.htmlEl.innerHTML !== html) {
+ // Perhaps React (whose VDOM gets outdated because we often prevent
+ // rerendering) did not update the DOM. So we update it manually now.
+ this.htmlEl.innerHTML = html
+ }
+ }
+
+ render() {
+ const {mix} = this.props;
+
+ return
+
+ + block key: {key} type: {block.getType()} +
++ start offset {so} +
+
+ {content.getPlainText('\n')}
+
+
+ {this.getHtml()}
+
+ }
+}
diff --git a/src/edit/features/Marker/Marker.js b/src/edit/features/Marker/Marker.js
new file mode 100644
index 00000000..b0a01177
--- /dev/null
+++ b/src/edit/features/Marker/Marker.js
@@ -0,0 +1,214 @@
+import React, {Component} from 'react'
+import {MarkerTabIndex} from './MarkerTabIndex'
+import {MarkerCell} from './MarkerCell'
+
+import './Marker.less'
+import {exist} from '../../lib/fn'
+import ContentEditable from './ContentEditable'
+import {constrain} from "./lib/fn";
+
+export class Marker extends Component {
+ constructor(props) {
+ super(props)
+
+ this.state = {
+ currentCellIndex: 0,
+ }
+
+ this.onCellUpdate = this.onCellUpdate.bind(this)
+ this.onCellSelect = this.onCellSelect.bind(this)
+ this.onKeyDown = this.onKeyDown.bind(this)
+ }
+
+ onKeyDown(event) {
+ switch (event.key) {
+ case 'ArrowUp': {
+ console.log('Marker ArrowUp')
+
+ this.setState({
+ currentCellIndex: this.getPrevCellIndex(),
+ })
+ break
+ }
+
+ case 'ArrowDown': {
+ console.log('Marker ArrowDown')
+
+ this.setState({
+ currentCellIndex: this.getNextCellIndex(),
+ })
+ break
+ }
+
+ case 'Enter': {
+ console.log('Marker Enter')
+
+ const s = getSelection()
+ console.log(s, s.getRangeAt(0))
+
+ event.preventDefault()
+
+ // if (!event.shiftKey) return
+ // event.stopPropagation()
+
+ return this.handleEnter()
+ }
+ }
+ };
+
+ getCellIndex(n) {
+ const {data} = this.props
+ const {currentCellIndex} = this.state
+ const index = currentCellIndex + n
+
+ return constrain(index, 0, data.length - 1)
+ }
+
+ getPrevCellIndex(...args) {
+ return this.getCellIndex(-1, ...args)
+ }
+
+ getNextCellIndex(...args) {
+ return this.getCellIndex(1, ...args)
+ }
+
+ onCellSelect(index) {
+ this.setState({
+ currentCellIndex: index,
+ })
+ }
+
+ getDataAt(index) {
+ return this.props.data[index]
+ }
+
+ getBlankTextAt(index) {
+ if (index === 0) return ''
+
+ const cellBefore = this.getDataAt(index)
+ const textBefore = cellBefore.data
+
+ let text
+
+ const ol = (text) => {
+ const m = /^(\d+)\.\s/.exec(text)
+ if (m) {
+ const d = parseFloat(m[1])
+ return `${d + 1}.`
+ } else {
+ return null
+ }
+ }
+
+ const ul = (text) => /^-\s/.test(text)
+ ? '- '
+ : null
+
+ text = ol(textBefore)
+ if (text) return text
+
+ text = ul(textBefore)
+ if (text) return text
+
+ return ''
+ }
+
+ async handleEnter() {
+ const {currentCellIndex} = this.state
+ const currentCell = this.getDataAt(currentCellIndex)
+
+ if (currentCell.data) {
+ const nextCellIndex = currentCellIndex + 1
+
+ if (nextCellIndex > this.props.data.length - 1) {
+ const {data, marker, onUpdate} = this.props
+ const blankText = this.getBlankTextAt(currentCellIndex)
+ const newCell = await marker.blank({text: blankText})
+ const newData = [
+ ...data,
+ newCell,
+ ]
+
+ onUpdate(newData)
+ } else {
+
+ }
+
+ this.setState({
+ currentCellIndex: nextCellIndex,
+ })
+ }
+ }
+
+ async onCellUpdate(index, text) {
+ console.log('UPDATE', text)
+
+ const {data, marker, onUpdate} = this.props
+
+ const cells = await marker.evaluate(text)
+
+ const before = data.slice(0, index)
+ const after = data.slice(index + 1)
+
+ let newData = [
+ ...before,
+ ...cells,
+ ...after,
+ ]
+
+ // const next = index + cells.length
+ // if (next > newData.length - 1) {
+ // const newCell = await marker.blank()
+ // newData.push(newCell)
+ // }
+
+ console.log(newData.map(x => x.data).join('\n'))
+
+ onUpdate(newData)
+ }
+
+ componentWillMount() {
+ // this.setState({
+ // currentCellIndex: 0,
+ // })
+ }
+
+ render() {
+ const {data} = this.props
+ if (!data.length) return null
+
+ const {currentCellIndex} = this.state
+
+ const tabIndex = 1
+ return (
+
+ {data.map((x, i) => {
+ return (i === currentCellIndex ? (
+ this.onCellUpdate(i, text)}
+ >
+ {x.data}
+
+ ) : (
+
+ )
+ }
+}
diff --git a/src/edit/features/Marker/Marker.less b/src/edit/features/Marker/Marker.less
new file mode 100644
index 00000000..7a29f89b
--- /dev/null
+++ b/src/edit/features/Marker/Marker.less
@@ -0,0 +1,52 @@
+.Marker {
+ //--active-color: #73acf6;
+ --active-color: #f0f0f0;
+ --cell-padding: 8px;
+ --font-size: 16px;
+
+ font-size: var(--font-size);
+ font-family: sans-serif;
+ //line-height: var(--font-size);
+
+ textarea {
+ width: 100%;
+ font-size: var(--font-size);
+ font-family: sans-serif;
+ padding: 0;
+
+ box-sizing: border-box;
+
+ height: var(--font-size);
+ //height: calc(2px + var(--font-size));
+ border: none;
+ background-color: var(--active-color);
+
+ outline: none;
+ display: block;
+ }
+}
+
+.MarkerCellTabIndex {
+ outline: none;
+}
+
+.MarkerCell {
+ //padding: var(--cell-padding);
+ padding-bottom: 8px;
+
+ position: relative;
+
+ &--active {
+ background-color: var(--active-color);
+ //background-color: #f6903b;
+ }
+
+ &--edit {
+ div {
+ outline: none;
+ }
+
+ //background-color: #00b7ec;
+ background-color: var(--active-color);
+ }
+}
\ No newline at end of file
diff --git a/src/edit/features/Marker/MarkerCell.js b/src/edit/features/Marker/MarkerCell.js
new file mode 100644
index 00000000..08e24678
--- /dev/null
+++ b/src/edit/features/Marker/MarkerCell.js
@@ -0,0 +1,72 @@
+import React, {Component} from 'react'
+import className from 'classnames'
+import {trimNewline} from './lib/fn'
+
+import './Marker.less'
+import {MarkerEdit} from './MarkerEdit'
+
+const Cell = ({children, active = false, edit = false}) => (
+ this.onCellSelect(i)}
+ >
+ {x.render()}
+
+ )
+ )
+ })}
+
+ {children}
+
+)
+
+export class MarkerCell extends Component {
+ constructor(props) {
+ super(props)
+
+ this.onSubmit = this.onSubmit.bind(this)
+ this.onChange = this.onChange.bind(this)
+
+ this.state = {
+ content: null,
+ }
+ }
+
+ getCellData() {
+ return this.state.content
+ ? this.state.content
+ : this.props.cell.data
+ }
+
+ getCellComponent() {
+ return this.props.cell.render()
+ }
+
+ onSubmit(e) {
+ e.preventDefault()
+ const {onUpdate} = this.props
+ onUpdate(this.getCellData())
+ }
+
+ onChange(e) {
+ const content = trimNewline(e.target.value)
+
+ this.setState({
+ content,
+ })
+ }
+
+ render() {
+ const {active, edit} = this.props
+
+ return edit
+ ? (
+
+ {text}
+
+)
+
+export const MarkerWidgetHtml = ({html}) => (
+
+)
+
+export const MarkerWidgetUrl = ({url, text}) => (
+
+
+ {text}
+
+
+)
diff --git a/src/edit/features/Marker/index.js b/src/edit/features/Marker/index.js
new file mode 100644
index 00000000..e72f6c2a
--- /dev/null
+++ b/src/edit/features/Marker/index.js
@@ -0,0 +1 @@
+export {Marker as default} from './Marker'
diff --git a/src/edit/features/Marker/lib/fn.js b/src/edit/features/Marker/lib/fn.js
new file mode 100644
index 00000000..a0f15bbd
--- /dev/null
+++ b/src/edit/features/Marker/lib/fn.js
@@ -0,0 +1,31 @@
+/**
+ * Remove trailing spaces from string
+ *
+ * f(_x_) => x
+ *
+ * @param str
+ */
+export function trim(str) {
+ return str
+ .replace(/^\s+/, '')
+ .replace(/\s+$/, '')
+}
+
+/**
+ * Remove trailing spaces from string
+ *
+ * f(_x_) => x
+ *
+ * @param str
+ */
+export function trimNewline(str) {
+ return str
+ .replace(/^\n+/, '')
+ .replace(/\n+$/, '')
+}
+
+export function constrain(n, min, max) {
+ if (n < min) return min
+ if (n > max) return max
+ return n
+}
diff --git a/src/edit/features/Marker/lib/marker/FileToken.js b/src/edit/features/Marker/lib/marker/FileToken.js
new file mode 100644
index 00000000..95d32fe1
--- /dev/null
+++ b/src/edit/features/Marker/lib/marker/FileToken.js
@@ -0,0 +1,34 @@
+import React from 'react'
+
+import Token from './Token'
+import {trim} from '../fn'
+import {getHtml} from './index'
+
+
+export default class FileToken extends Token {
+ static test(data) {
+ return is_file(data, documentExtensions + imageExtensions)
+ }
+
+ constructor({data}) {
+ super({
+ name: 'file',
+ data,
+ })
+ this.joinable = false
+ }
+
+ async compile() {
+ const data = parse_file(this.getData())
+ const url = data['file']
+ const text = data.caption
+ ? data.caption
+ : url
+
+ return (
+
+ {text}
+
+ )
+ }
+}
diff --git a/src/edit/features/Marker/lib/marker/ImageToken.js b/src/edit/features/Marker/lib/marker/ImageToken.js
new file mode 100644
index 00000000..9bed61fe
--- /dev/null
+++ b/src/edit/features/Marker/lib/marker/ImageToken.js
@@ -0,0 +1,78 @@
+import React from 'react'
+
+import Token from './Token'
+import {isImage, parseFile} from './index'
+
+export class ImageToken extends Token {
+ static test(data) {
+ return isImage(data)
+ }
+
+ constructor({data}) {
+ super({
+ name: 'image',
+ data,
+ })
+ this.joinable = true
+ this.build = null
+ }
+
+ merge(token) {
+ const mergedToken = new ImageCollectionToken([this.data, token.data])
+ mergedToken.build = this.build
+ return mergedToken
+ }
+
+ async compile() {
+
+ }
+}
+
+export class ImageCollectionToken extends ImageToken {
+ constructor({data}) {
+ super({data})
+ this.name = 'image_collection'
+ this.build = null
+ }
+
+ merge(token) {
+ const data = Array.isArray(token.getData())
+ ? token.getData()
+ : [token.getData()]
+
+ const mergedToken = new ImageCollectionToken({
+ data: [...self.getData(), ...data]
+ })
+ mergedToken.build = self.build
+ return mergedToken
+ }
+
+ async compile() {
+ const data = this.parseData()
+ let images = []
+ for (let x of data) {
+ const img = await this.build(x)
+ images.push(img)
+ }
+
+ return (
+
+
+ )
+ }
+
+ parseData() {
+ return this
+ .getData()
+ .map(parseFile)
+ }
+}
diff --git a/src/edit/features/Marker/lib/marker/Marker.js b/src/edit/features/Marker/lib/marker/Marker.js
new file mode 100644
index 00000000..fdd34475
--- /dev/null
+++ b/src/edit/features/Marker/lib/marker/Marker.js
@@ -0,0 +1,138 @@
+import SplitToken from './SplitToken'
+
+export class Marker {
+ constructor() {
+ this.tokenFactories = []
+ this.treeMiddlewares = []
+
+ this.join = true
+ this.blankFactory = null
+ }
+
+ async blank({text}) {
+ if (!this.blankFactory) {
+ throw new Error(`Blank factory is not defined`)
+ }
+ const token = await this.blankFactory.create(text)
+ return token.compile()
+ }
+
+ addTokenFactory(tokenFactory, {blank = false} = {}) {
+ this.tokenFactories.push(tokenFactory)
+ if (blank) {
+ this.blankFactory = tokenFactory
+ }
+ return this
+ }
+
+ addTreeMiddleware(callback) {
+ this.treeMiddlewares.push(callback)
+ return this
+ }
+
+ async evaluate(text) {
+ let tokens = text.split('\n')
+ tokens = this.markupTokens(tokens)
+ if (this.join) {
+ tokens = this.joinTokens(tokens)
+ }
+
+ return compileTokens(tokens)
+ // tree = lxml.html.fromstring(compiled)
+ // return await self.process_tree(tree)
+ }
+
+ joinTokens(tokens) {
+ return mergeTokens(joinTokens(tokens))
+ }
+
+ async processTree(tree) {
+ // for fn in self.treeMiddlewares:
+ // tree = await fn(tree)
+ // return tree
+ }
+
+ markupTokens(tokens) {
+ const markedTokens = []
+
+ tokens.forEach(data => {
+ const token = this.createToken(data)
+ if (!token) {
+ throw new Error(`Token not recognized for data ${data}`)
+ }
+
+ markedTokens.push(token)
+ })
+
+ return markedTokens
+ }
+
+ createToken(data) {
+ for (let factory of this.tokenFactories) {
+ if (factory.test(data)) {
+ return factory.create(data)
+ }
+ }
+
+ return null
+ }
+}
+
+function joinTokens(tokens) {
+ const isSplit = x => x instanceof SplitToken
+
+ let bufferTag = null
+ let tokensBuffer = []
+ let tokensList = []
+ for (let token of tokens) {
+ const tag = token.name
+ const changed = bufferTag !== null && tag !== bufferTag
+
+ let flush = isSplit(token)
+ if (changed) {
+ flush = true
+ }
+
+ if (!token.isJoinable()) {
+ flush = true
+ }
+
+ if (flush) {
+ if (tokensBuffer.length) {
+ tokensList.push(tokensBuffer)
+ }
+
+ if (isSplit(token)) {
+ tokensBuffer = []
+ bufferTag = null
+ } else {
+ tokensBuffer = [token]
+ bufferTag = tag
+ }
+ } else {
+ bufferTag = tag
+ tokensBuffer.push(token)
+ }
+ }
+
+ if (tokensBuffer.length) {
+ tokensList.push(tokensBuffer)
+ }
+
+ return tokensList
+}
+
+function mergeTokens(tokensList) {
+ return tokensList
+ .map(ts => ts
+ .reduce(
+ (token, x) => token.merge(x)
+ )
+ )
+}
+
+async function compileTokens(tokens) {
+ return Promise.all(
+ tokens.map(x => x.compile())
+ )
+}
diff --git a/src/edit/features/Marker/lib/marker/SplitToken.js b/src/edit/features/Marker/lib/marker/SplitToken.js
new file mode 100644
index 00000000..fc7e800e
--- /dev/null
+++ b/src/edit/features/Marker/lib/marker/SplitToken.js
@@ -0,0 +1,24 @@
+import Token from './Token'
+import {trim} from '../fn'
+
+export default class SplitToken extends Token {
+ static test(data) {
+ data = trim(data)
+ return data === ''
+ }
+
+ constructor(options) {
+ super({
+ ...options,
+ name: 'split',
+ })
+ }
+
+ render() {
+ return null
+ }
+
+ merge(token) {
+ return this
+ }
+}
diff --git a/src/edit/features/Marker/lib/marker/TextToken.js b/src/edit/features/Marker/lib/marker/TextToken.js
new file mode 100644
index 00000000..602c6915
--- /dev/null
+++ b/src/edit/features/Marker/lib/marker/TextToken.js
@@ -0,0 +1,44 @@
+import Token from './Token'
+import {trim} from '../fn'
+import {getHtml} from './index'
+
+export default class TextToken extends Token {
+ static test(data) {
+ return true
+ }
+
+ constructor(options) {
+ super({
+ ...options,
+ name: 'text',
+ })
+ }
+
+ merge(token) {
+ const data = [this.data, token.data].join('\n')
+
+ return new TextToken(this.getMergeOptions({
+ data: trim(data),
+ }))
+ }
+
+ async getData() {
+ const html = getHtml(this.data)
+ return {html}
+ }
+
+ // async compile() {
+ // // return getHtml(this.getData())
+ //
+ //
+ //
+ //
+ //
+ // return (
+ //
+ // )
+ // }
+}
diff --git a/src/edit/features/Marker/lib/marker/Token.js b/src/edit/features/Marker/lib/marker/Token.js
new file mode 100644
index 00000000..880964b9
--- /dev/null
+++ b/src/edit/features/Marker/lib/marker/Token.js
@@ -0,0 +1,51 @@
+export default class Token {
+ static test(data) {
+ return true
+ }
+
+ constructor({name, data, component}) {
+ this.name = name
+ this.data = data
+ this.component = component
+ this.joinable = true
+
+ this.compiledData = null
+ }
+
+ isJoinable() {
+ return this.joinable
+ }
+
+ render() {
+ if (!this.compiledData) {
+ throw new Error('Token not compiled. Call Token::compile before.')
+ }
+ return this.component(this.compiledData)
+ }
+
+ async getData() {
+ return this.data
+ }
+
+ async compile() {
+ this.compiledData = await this.getData()
+ return this
+ }
+
+ merge(token) {
+ return this
+ }
+
+ getMergeOptions(extend) {
+ return {
+ name: this.name,
+ data: this.data,
+ component: this.component,
+ ...extend,
+ }
+ }
+
+ toString() {
+ return `[Token ${this.name} ${this.data}]`
+ }
+}
diff --git a/src/edit/features/Marker/lib/marker/TokenFactory.js b/src/edit/features/Marker/lib/marker/TokenFactory.js
new file mode 100644
index 00000000..64029f5b
--- /dev/null
+++ b/src/edit/features/Marker/lib/marker/TokenFactory.js
@@ -0,0 +1,35 @@
+export class TokenFactory {
+ constructor({token, component}) {
+ this.token = token
+ this.component = component
+ }
+
+ test(sample) {
+ return this.token.test(sample)
+ }
+
+ create(data) {
+ const Token = this.token
+ return new Token({
+ data,
+ component: this.component,
+ })
+ }
+}
+
+export class BuildTokenFactory extends TokenFactory {
+ constructor({token, build, component}) {
+ super({token})
+ this.build = build
+ this.component = component
+ }
+
+ create(data) {
+ const Token = this.token
+ return new Token({
+ data,
+ component: this.component,
+ build: this.build,
+ })
+ }
+}
diff --git a/src/edit/features/Marker/lib/marker/UrlToken.js b/src/edit/features/Marker/lib/marker/UrlToken.js
new file mode 100644
index 00000000..e8e1da29
--- /dev/null
+++ b/src/edit/features/Marker/lib/marker/UrlToken.js
@@ -0,0 +1,16 @@
+import Token from './Token'
+import {isUrl} from './index'
+
+export default class UrlToken extends Token {
+ static test(data) {
+ return isUrl(data)
+ }
+
+ constructor(options) {
+ super({
+ ...options,
+ name: 'url',
+ })
+ this.joinable = false
+ }
+}
diff --git a/src/edit/features/Marker/lib/marker/YoutubeToken.js b/src/edit/features/Marker/lib/marker/YoutubeToken.js
new file mode 100644
index 00000000..d575f672
--- /dev/null
+++ b/src/edit/features/Marker/lib/marker/YoutubeToken.js
@@ -0,0 +1,24 @@
+import {isUrl} from './index'
+import React from 'react'
+import UrlToken from './UrlToken'
+
+export default class YoutubeToken extends UrlToken {
+ static test(data) {
+ if (!isUrl(data)) {
+ return false
+ }
+
+ const url = new URL(data)
+ return ['www.youtube.com', 'youtube.com']
+ .includes(url.hostname)
+ }
+
+ async getData() {
+ const url = new URL(this.data)
+
+ const youtubeId = url.searchParams.get('v')
+ return {
+ url: `//www.youtube.com/embed/${youtubeId}`
+ }
+ }
+}
diff --git a/src/edit/features/Marker/lib/marker/index.js b/src/edit/features/Marker/lib/marker/index.js
new file mode 100644
index 00000000..a35e88d1
--- /dev/null
+++ b/src/edit/features/Marker/lib/marker/index.js
@@ -0,0 +1,76 @@
+import {markdown} from 'markdown'
+
+const {toHTML: markdownToHtml} = markdown
+
+const splitExt = s => {
+ const parts = s.split('.')
+ const name = parts.splice(0, parts.length - 1)
+ const ext = parts[parts.length - 1]
+ return {name, ext}
+}
+
+export const imageExtensions = ['.jpg', '.jpeg', '.png']
+export const documentExtensions = ['.doc', '.docx', '.pdf', '.xls', '.xlsx']
+
+export function getHtml(text) {
+ return markdownToHtml(text)
+}
+
+export function isUrl(sample) {
+ try {
+ return Boolean(new URL(sample))
+ } catch (e) {
+ return false
+ }
+}
+
+export function isImage(sample) {
+ const file = parseFile(sample)['file']
+ return isFile(file, imageExtensions)
+}
+
+export function isDocument(sample) {
+ const file = parseFile(sample)['file']
+ return isFile(file, documentExtensions)
+}
+
+export function isFile(sample, extensions) {
+ let {name, ext} = splitExt(sample)
+ ext = ext.toLowerCase()
+ return extensions.include(ext)
+}
+
+export function parseFile(sample) {
+ const re = /)/
+ const p = re.exec(sample)
+ let caption
+ let file
+ if (p) {
+ caption = p.group(1)
+ file = p.group(2)
+ } else {
+ sample = sample.split(' ')
+ file = sample[0]
+ caption = ' '.join(sample.substr(1))
+ }
+
+ return {
+ file,
+ caption,
+ }
+}
+
+export function parseLink(sample) {
+ const re = /)/
+ const p = re.exec(sample)
+
+ if (!p) {
+ return null
+ }
+
+ const url = p[2]
+ return {
+ url: new URL(url),
+ alt: p[1],
+ }
+}
diff --git a/src/edit/index.css b/src/edit/index.css
new file mode 100644
index 00000000..36944367
--- /dev/null
+++ b/src/edit/index.css
@@ -0,0 +1,35 @@
+:root {
+ --content-width-state-normal: 60%;
+ --content-width-state-full: 100%;
+ --content-width: var(--content-width-state-normal);
+
+ --module-m: .5em;
+}
+
+html, body, #root {
+ width: 100%;
+ height: 100%;
+
+ position: absolute;
+
+ background-color: #222;
+
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ font-family: "Input Sans Compressed", sans-serif;
+}
+
+.leaflet-container {
+ height: 100%;
+ /*height: 100px;*/
+ width: 100%;
+
+ background-color: white;
+}
+
+h1 {
+ font-size: 1.25em;
+}
\ No newline at end of file
diff --git a/src/edit/index.js b/src/edit/index.js
new file mode 100644
index 00000000..36c29b1f
--- /dev/null
+++ b/src/edit/index.js
@@ -0,0 +1,55 @@
+import React from 'react'
+import App from './features/App'
+
+// import {createDevTools} from 'redux-devtools'
+// import LogMonitor from 'redux-devtools-log-monitor'
+// import DockMonitor from 'redux-devtools-dock-monitor'
+
+import {Provider} from 'react-redux'
+import reducer from './reducers'
+import effects from './effects'
+
+import {create} from './store'
+
+import {Router, Route, browserHistory} from 'react-router'
+import {syncHistoryWithStore} from 'react-router-redux'
+
+const initialState = {}
+
+// const DevTools = createDevTools(
+//
+ {images.map(({src}) => (
+ 
+ ))}
+
+
+ */}
+ {/**/}
+
+ {/* */}
+ {/* */}
+
+ {/*
+