notes ok

package.json

@@ -42,6 +42,7 @@
     "lodash": "^4.17.4",
     "markdown-it": "^8.3.1",
     "react": "^15.5.4",
+    "react-ace": "^4.3.0",
     "react-addons-css-transition-group": "^15.5.2",
     "react-dom": "^15.5.4",
     "react-fontawesome": "^1.6.1",

src/App.scss

@@ -3,6 +3,9 @@
 html, body {
     margin: 0;
 }
+.pt-no-padding {
+    padding: 0;
+}
 
 .pt-toast-container.pt-toast-container-top.app-toaster {
     top: $pt-navbar-height;

src/Pages/Login/Login.jsx

@@ -1,57 +1,27 @@
 import React from 'react'
-import { connect } from 'react-redux'
-import axios from 'axios'
+import { Map } from '../../utils'
 import firebase from 'firebase'
-import { Card } from '../../Shared/Components'
-import { InputGroup, Tooltip, Button, Classes, Intent } from '@blueprintjs/core'
-import { LOGIN } from '../../Store/Actions'
+import { Card, HiddenPassword } from '../../Shared/Components'
+import { InputGroup, Button } from '@blueprintjs/core'
 import './Login.scss'
-import { Map } from '../../utils'
-
-const PasswordToggler = ({show, toggle}) => 
-    <Tooltip content={`${show ? "Hide" : "Show"} Password`}>
-        <Button className={Classes.MINIMAL} intent={Intent.WARNING}
-            iconName={show ? "eye-off" : "eye-open"} onClick={toggle} />
-    </Tooltip>
 
-const Logo = () => <h1 className="logo"><img src="lighthouse.png"/><span>Lighthouse</span></h1>
+const send = e => {
+    e.preventDefault()
+    let data = (new Map(new FormData(e.target))).toObj()
+    firebase.auth().signInWithEmailAndPassword(data.email, data.password)
+            .catch(e => { console.error(`Firebase auth error: [${e.code}] ${e.message}`) })
+}
 
-const LoginTemplate = ({ togglePassword, showPassword, connect }) =>
+const Login = () =>
     <div className="flex-frame center">
-        <Logo />
+        <h1 className="logo"><img src="lighthouse.png"/><span>Lighthouse</span></h1>
         <Card>
-            <form onSubmit={e => connect('test', e)}>
+            <form onSubmit={send}>
                 <InputGroup name="email" placeholder="Email" leftIconName="user"/>
-                <InputGroup name="password" placeholder="Enter your password..." leftIconName="lock" 
-                    type={showPassword ? "text" : "password"}
-                    rightElement={<PasswordToggler show={showPassword} toggle={togglePassword} />}
-                />
+                <HiddenPassword name="password" placeholder="Enter your password..." />
                 <Button iconName="log-in" type="submit">Login</Button>
             </form>
         </Card>
     </div>
 
-class LoginContainer extends React.Component {
-    state = { showPassword: false }
-
-    togglePassword = () => this.setState({ showPassword: !this.state.showPassword })
-
-    connect = (test, e) => {
-        e.preventDefault()
-        let data = (new Map(new FormData(e.target))).toObj()
-        firebase.auth().signInWithEmailAndPassword(data.email, data.password)
-                .catch(e => { console.error(`Firebase auth error: [${e.code}] ${e.message}`) })
-    }
-
-    render() {
-        return <LoginTemplate
-            showPassword={this.state.showPassword}
-            togglePassword={this.togglePassword}
-            connect={this.connect}
-        />
-    }
-}
-
-const Login = connect(null, dispatch => ({ login: user => dispatch(LOGIN(user)) }))(LoginContainer)
-
 export default Login

src/Pages/Notes/Note.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import MarkdownIt from 'markdown-it'
+import { DeleteButton, Card } from 'Components'
+import { EditableText } from '@blueprintjs/core'
+import brace from 'brace'
+import AceEditor from 'react-ace'
+import 'brace/mode/markdown'
+import 'brace/theme/tomorrow'
+
+const md = new MarkdownIt()
+
+const Note = ({ note, update, remove }) =>
+    <div className="Note">
+        <DeleteButton className="trash-btn" onConfirm={() => remove(note)} title={`Delete ${note.title}`}>
+            Do you really want to delete this note ? You won't be able to recover it.
+        </DeleteButton>
+        <h2><EditableText value={note.title} onChange={value => update({...note, title: value})} /></h2>
+        <div className="editor">
+            <Card noPadding className="source"><AceEditor editorProps={{$blockScrolling: true}} mode="markdown" theme="tomorrow"
+                        value={note.content} height="500px" width="inherit" onChange={value => update({...note, content: value})} /></Card>
+            <Card className="preview"><div dangerouslySetInnerHTML={{__html: md.render(note.content)}}></div></Card>
+        </div>
+    </div>
+
+export default Note

src/Pages/Notes/NoteList.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Menu, MenuDivider, MenuItem } from '@blueprintjs/core'
+
+const NoteList = ({ notes, add, select }) =>
+    <Menu>
+        <MenuDivider title="Notes"/>
+        { notes.map(e => <MenuItem key={e.id} text={e.title} onClick={() => select(e)} />) }
+        <MenuDivider />
+        <MenuItem iconName="plus" text="New note" onClick={add}/>
+    </Menu>
+
+export default NoteList

src/Pages/Notes/Notes.jsx

@@ -1,86 +1,37 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import MarkdownIt from 'markdown-it'
-import { Card, Placeholder, Icon } from '../../Shared/Components'
+import { Card, Placeholder, Icon, DeleteButton } from '../../Shared/Components'
 import { Menu, MenuDivider, MenuItem, EditableText, Intent, Button, Alert } from '@blueprintjs/core'
-import { SELECT_NOTE, UPDATE_NOTE, UPDATE_SELECTED_NOTE, ADD_NOTE, REMOVE_NOTE, UNSELECT_NOTE } from '../../Store/Actions'
+import * as actions from '../../Store/Actions/notes'
+import NoteList from './NoteList'
+import Note from './Note'
 import './Notes.scss'
 
-const md = new MarkdownIt()
-
-const NotesList = ({ notes, select }) =>
-    <div>
-        { notes.map(e => <MenuItem key={e.id} text={e.title} onClick={() => select(e)}></MenuItem>) }
-    </div>
-
-class AlertButton extends React.Component {
-    state = { open: false }
-
-    close = () => this.setState({ open: false })
-
-    show = () => this.setState({ open: true })
-
-    confirm = () => {
-        this.props.onConfirm()
-        this.close();
-    }
-
-    render() {
-        return (
-            <Button iconName={this.props.iconName} className={this.props.className} onClick={this.show}>
-                <Alert intent={Intent.DANGER} isOpen={this.state.open}
-                    confirmButtonText={this.props.confirmButtonText} cancelButtonText={this.props.cancelButtonText}
-                    onConfirm={this.confirm} onCancel={this.close} >
-                    {this.props.children}
-                </Alert>
-            </Button>
-        );
-    }
-}
-
-const Note = ({ note, update, remove }) =>
-    <div className="Note">
-        <AlertButton iconName="trash" className="trash-btn"
-            confirmButtonText="delete" cancelButtonText={"Cancel"}
-            onConfirm={() => remove(note)}>
-            Do you really want to delete this note ? You won't be able to recover it.
-        </AlertButton>
-        <h2>{note.title}</h2>
-        <div className="editor">
-            <EditableText className="source" multiline value={note.content} onChange={value => update({...note, content: value})}></EditableText>
-            <div className="preview" dangerouslySetInnerHTML={{__html: md.render(note.content)}}></div>
-        </div>
-    </div>
-
-
-const NotesTemplate = ({ notes, selectedNote, selectNote, updateNote, addNote, removeNote }) =>
+const NotesTemplate = ({ notes, selected, select, update, add, remove }) =>
     <div className="Notes">
         <Card className="List">
-            <Menu>
-                <MenuDivider title="Notes"/>
-                <NotesList notes={notes} select={selectNote}/>
-                <MenuDivider />
-                <MenuItem iconName="plus" text="New note" onClick={addNote}/>
-            </Menu>
+            <NoteList notes={notes} add={add} select={select} />
         </Card>
         <Card className="content">
-            { selectedNote ? <Note note={selectedNote} update={updateNote} remove={removeNote} /> :
-                <Placeholder iconName="clipboard" title="No note selected" description="Choose one in the list on the left"/> }
+            { selected ?
+                <Note note={selected} update={update} remove={remove} /> :
+                <Placeholder iconName="clipboard" title="No note selected"
+                             description="Choose one in the list on the left"/> }
         </Card>
     </div>
 
 const Notes = connect(
-    state => ({ notes: state.note.notes, selectedNote: state.note.selectedNote }),
+    state => ({ notes: state.note.notes, selected: state.note.selectedNote }),
     dispatch => ({
-        addNote: () => dispatch(ADD_NOTE()),
-        selectNote: note => dispatch(SELECT_NOTE(note)),
-        removeNote: note => {
-            dispatch(REMOVE_NOTE(note))
-            dispatch(UNSELECT_NOTE())
+        add: () => dispatch(actions.ADD_NOTE()),
+        select: note => dispatch(actions.SELECT_NOTE(note)),
+        remove: note => {
+            dispatch(actions.REMOVE_NOTE(note))
+            dispatch(actions.UNSELECT_NOTE())
         },
-        updateNote: note => {
-            dispatch(UPDATE_NOTE(note))
-            dispatch(UPDATE_SELECTED_NOTE(note))
+        update: note => {
+            dispatch(actions.UPDATE_NOTE(note))
+            dispatch(actions.UPDATE_SELECTED_NOTE(note))
         }
     })
 )(NotesTemplate)

src/Pages/Notes/Notes.scss

@@ -13,7 +13,6 @@
     .content {
         margin-left: $pt-grid-size;
         flex: 1;
-        max-height: 300px;
 
         .Note {
             .trash-btn {
@@ -23,7 +22,6 @@
             .editor {
                 display: flex;
                 flex-direction: row;
-                margin-top: $pt-grid-size * 4;
 
                 .source, .preview {
                     flex: 1;
@@ -32,5 +30,4 @@
             }
         }
     }
-
 }

src/Shared/Components.jsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import cl from 'classnames'
-import { Link } from 'react-router-dom'
-
-export const Icon = ({ name, size, intent, className, ...otherProps }) => {
-    const classes = cl({
-        [`pt-icon-${size}`]: size,
-        [`pt-icon-${name}`]: name,
-        [`pt-intent-${intent}`]: intent,
-        [className]: true
-    })
-    return <span className={classes} {...otherProps}></span>
-}
-
-export const Card = ({ className, children, interactive, ...otherProps }) => 
-    <div className={cl(["pt-card", className, {'pt-interactive': interactive}])} {...otherProps}>{children}</div>
-
-export const Placeholder = ({ iconName, title, description, ...otherProps }) => 
-    <div className="pt-non-ideal-state" {...otherProps} >
-        <div className="pt-non-ideal-state-visual pt-non-ideal-state-icon">
-            <span className={`pt-icon pt-icon-${iconName}`}></span>
-        </div>
-        <h4 className="pt-non-ideal-state-title">{title}</h4>
-        <div className="pt-non-ideal-state-description">
-            {description}
-        </div>
-    </div>
-
-export const MenuLink = ({ to, iconName, children, ...otherProps }) => {
-    let classes = cl(["pt-menu-item","pt-popover-dismiss", {[`pt-icon-${iconName}`]: iconName}]);
-    return <li><Link to={to} className={classes} {...otherProps}>{children}</Link></li>
-}
-
-export const ProfilePic = ({ src }) => src ? <img src={src} /> :
-    <Placeholder iconName="mugshot" title="No picture" description="Click to change"/>

src/Shared/Components/AlertButton.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Button, Alert, Intent } from '@blueprintjs/core'
+import Control from '../Control'
+
+const AlertButtonTemplate = (props, state) =>
+    <Button iconName={props.iconName} className={props.className} onClick={() => props.toggle(true)}>
+        <Alert intent={props.intent} isOpen={state.open}
+            confirmButtonText={props.confirmButtonText} cancelButtonText={props.cancelButtonText}
+            onConfirm={props.confirm} onCancel={() => props.toggle(false)} >
+            {props.children}
+        </Alert>
+    </Button>
+
+export const AlertButton = Control({ open: false }, {
+    toggle: ({ setState }, open) => setState({ open }),
+    confirm: ({ props }) => props.onConfirm()
+})(AlertButtonTemplate)

src/Shared/Components/Card.jsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import cl from 'classnames'
+
+export const Card = ({ className, children, noPadding, interactive, ...otherProps }) => 
+    <div className={cl(["pt-card", className, {'pt-no-padding': noPadding, 'pt-interactive': interactive}])}
+        {...otherProps}>{children}</div>

src/Shared/Components/DeleteButton.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Intent } from '@blueprintjs/core'
+import { DialogButton } from './DialogButton'
+
+export const DeleteButton = ({ title, onConfirm, children, className }) =>
+    <DialogButton iconName="trash" className={className}
+        confirmButtonText="Delete" cancelButtonText={"Cancel"}
+        title={title} onConfirm={onConfirm} intent={Intent.DANGER}>
+        { children }
+    </DialogButton>

src/Shared/Components/DialogButton.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Dialog, Button } from '@blueprintjs/core'
+import Control from '../Control'
+
+const DialogButtonTemplate = (props, state) =>
+    <Button iconName={props.iconName} className={props.className}
+        onClick={() => props.toggle(true)} text={props.buttonText}>
+        <Dialog isOpen={state.open} onClose={() => props.toggle(false)} title={props.title}>
+            <div className="pt-dialog-body">
+                {props.children}
+            </div>
+            <div className="pt-dialog-footer">
+                <div className="pt-dialog-footer-actions">
+                    <Button text={props.cancelButtonText} onClick={() => props.toggle(false)}/>
+                    <Button intent={props.intent} onClick={props.confirm} text={props.confirmButtonText} />
+                </div>
+            </div>
+        </Dialog>
+    </Button>
+
+export const DialogButton = Control({ open: false }, {
+    toggle: ({ setState }, open) => setState({ open }),
+    confirm: ({ props }) => props.onConfirm()
+})(DialogButtonTemplate)

src/Shared/Components/HiddenPassword.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Tooltip, Classes, Intent, InputGroup, Button } from '@blueprintjs/core'
+import Control from '../Control'
+
+const PasswordToggler = ({ show, toggle }) => 
+    <Tooltip content={`${show ? "Hide" : "Show"} Password`}>
+        <Button className={Classes.MINIMAL} intent={Intent.WARNING}
+            iconName={show ? "eye-off" : "eye-open"} onClick={toggle} />
+    </Tooltip>
+
+const PasswordInput = ({ name, placeholder, toggle }, { show }) =>
+    <InputGroup name={name} placeholder={placeholder} leftIconName="lock" 
+                type={show ? "text" : "password"}
+                rightElement={<PasswordToggler show={show} toggle={toggle} />}
+    />
+
+export const HiddenPassword = Control(
+    { show: false },
+    { toggle: ({ setState, state }) => { setState({ show: !state.show }) } }
+)(PasswordInput)
+

src/Shared/Components/Icon.jsx

@@ -0,0 +1,11 @@
+import react from 'react'
+
+export const Icon = ({ name, size, intent, className, ...otherProps }) => {
+    const classes = cl({
+        [`pt-icon-${size}`]: size,
+        [`pt-icon-${name}`]: name,
+        [`pt-intent-${intent}`]: intent,
+        [className]: true
+    })
+    return <span className={classes} {...otherProps}></span>
+}

src/Shared/Components/MenuLink.jsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import cl from 'classnames'
+import { Link } from 'react-router-dom'
+
+export const MenuLink = ({ to, iconName, children, ...otherProps }) => {
+    let classes = cl(["pt-menu-item","pt-popover-dismiss", {[`pt-icon-${iconName}`]: iconName}]);
+    return <li><Link to={to} className={classes} {...otherProps}>{children}</Link></li>
+}

src/Shared/Components/Placeholder.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export const Placeholder = ({ iconName, title, description, ...otherProps }) => 
+    <div className="pt-non-ideal-state" {...otherProps} >
+        <div className="pt-non-ideal-state-visual pt-non-ideal-state-icon">
+            <span className={`pt-icon pt-icon-${iconName}`}></span>
+        </div>
+        <h4 className="pt-non-ideal-state-title">{title}</h4>
+        <div className="pt-non-ideal-state-description">
+            {description}
+        </div>
+    </div>

src/Shared/Components/ProfilePic.jsx

@@ -0,0 +1,5 @@
+import React from 'react'
+import { Placeholder } from './Placeholder'
+
+export const ProfilePic = ({ src }) => src ? <img src={src} /> :
+    <Placeholder iconName="mugshot" title="No picture" description="Click to change"/>

src/Shared/Components/index.js

@@ -0,0 +1,11 @@
+import { DialogButton } from './DialogButton'
+import { AlertButton } from './AlertButton'
+import { HiddenPassword } from './HiddenPassword'
+
+export { DialogButton, AlertButton, HiddenPassword }
+export { Icon } from './Icon'
+export { DeleteButton } from './DeleteButton'
+export { Card } from './Card'
+export { Placeholder } from './Placeholder'
+export { MenuLink } from './MenuLink'
+export { ProfilePic } from './ProfilePic'

src/Shared/Control.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { mapValues } from 'lodash'
+
+export default (initialState, handlers) => Component => 
+    class extends React.Component {
+        state = initialState || {}
+
+        stateHandler = { setState: this.setState.bind(this) }
+
+        getProps = () => ({ ...this.props, ...this.handlersToProps })
+
+        prepareHandler = h => typeof h !== 'function' ? h : (...args) => h({
+             ...this.stateHandler, state: this.state, props: this.getProps()
+        }, ...args)
+
+        handlersToProps = !handlers ? null : _.mapValues(handlers, this.prepareHandler)
+
+        render() {
+            return Component(this.getProps(), this.state, this.stateHandler)
+        }
+    }

src/Shared/Toaster.jsx

@@ -1,8 +1,6 @@
 import { Position, Toaster } from "@blueprintjs/core";
  
-const AppToasts = Toaster.create({
+export default Toaster.create({
     className: "app-toaster",
     position: Position.TOP_RIGHT,
-});
-
-export default AppToasts
+});

src/Store/Actions/index.js

@@ -1,10 +1,2 @@
-import { LOGIN, LOGOUT, CHANGE_PIC } from './user'
-import {
-    ADD_NOTE, REMOVE_NOTE, UPDATE_NOTE,
-    SELECT_NOTE, UNSELECT_NOTE, UPDATE_SELECTED_NOTE
-} from './notes'
-export {
-    LOGIN, LOGOUT, CHANGE_PIC,
-    ADD_NOTE, REMOVE_NOTE, UPDATE_NOTE,
-    SELECT_NOTE, UNSELECT_NOTE, UPDATE_SELECTED_NOTE
-}
+export * from './user'
+export * from './notes'

src/Store/Actions/notes.js

@@ -1,4 +1,5 @@
 import { createAction } from 'redux-actions'
+
 export const ADD_NOTE = createAction('ADD_NOTE')
 export const REMOVE_NOTE = createAction('REMOVE_NOTE')
 export const UPDATE_NOTE = createAction('UPDATE_NOTE')

src/Store/Actions/user.js

@@ -1,4 +1,5 @@
 import { createAction } from 'redux-actions'
+
 export const LOGIN = createAction('LOGIN')
 export const LOGOUT = createAction('LOGOUT')
 export const CHANGE_PIC = createAction('CHANGE_PIC')

src/Store/Reducers/index.js

@@ -2,6 +2,4 @@ import { combineReducers } from 'redux'
 import user from './user'
 import note from './note'
 
-const reducers = combineReducers({ user, note })
-
-export default reducers
+export default combineReducers({ user, note })

src/Store/Reducers/note.js

@@ -1,10 +1,7 @@
 import { _ } from '../../utils'
 import { handleActions } from 'redux-actions'
 import { combineReducers } from 'redux'
-import {
-    ADD_NOTE, UPDATE_NOTE, UPDATE_SELECTED_NOTE,
-    REMOVE_NOTE, SELECT_NOTE, UNSELECT_NOTE
-} from '../Actions'
+import * as actions from '../Actions/notes'
 
 const MOCK_NOTES = [
     {id: _.uniqueId(), title: 'First note', content: 'This is a little note' },
@@ -12,15 +9,15 @@ const MOCK_NOTES = [
 ]
 
 const selectedNote = handleActions({
-    [SELECT_NOTE]: (state, action) => state = action.payload,
-    [UPDATE_SELECTED_NOTE]: (state, action) => ({...state, ...action.payload }),
-    [UNSELECT_NOTE]: (state, action) => null
+    [actions.SELECT_NOTE]: (state, action) => state = action.payload,
+    [actions.UPDATE_SELECTED_NOTE]: (state, action) => ({...state, ...action.payload }),
+    [actions.UNSELECT_NOTE]: (state, action) => null
 }, null)
 
 const notes = handleActions({
-    [ADD_NOTE]: (state, action) => [...state, { id: _.uniqueId(), title: 'new_note', content: '' }],
-    [UPDATE_NOTE]: (state, action) => _.updateWhere(state, action.payload, _.idCheck(action.payload.id)),
-    [REMOVE_NOTE]: (state, action) =>  _.reject(state, _.idCheck(action.payload.id)),
+    [actions.ADD_NOTE]: (state, action) => [...state, { id: _.uniqueId(), title: 'new_note', content: '' }],
+    [actions.UPDATE_NOTE]: (state, action) => _.updateWhere(state, action.payload, _.idCheck(action.payload.id)),
+    [actions.REMOVE_NOTE]: (state, action) =>  _.reject(state, _.idCheck(action.payload.id)),
 }, MOCK_NOTES)
 
 const note = combineReducers({ notes, selectedNote })

src/Store/Reducers/user.js

@@ -1,10 +1,10 @@
 import { handleActions } from 'redux-actions'
-import { LOGIN, LOGOUT, CHANGE_PIC } from '../Actions'
+import * as actions from '../Actions/user'
 
 const user = handleActions({
-  [LOGIN]: (state, action) => action.payload,
-  [LOGOUT]: (state, action) => null,
-  [CHANGE_PIC]: (state, action) => ({ ...state, photoURL: action.payload })
+  [actions.LOGIN]: (state, action) => action.payload,
+  [actions.LOGOUT]: (state, action) => null,
+  [actions.CHANGE_PIC]: (state, action) => ({ ...state, photoURL: action.payload })
 }, null);
 
 export default user;

src/utils.js

@@ -7,10 +7,8 @@ Map.prototype.toObj = function() {
 _.updateIndex = (array, value, index) =>
     [...array.slice(0, index), value, ...array.slice(index + 1)]
 
-_.updateWhere = (array, value, predicate) => {
-     const index = _.findIndex(array, predicate)
-     return _.updateIndex(array, value, index)
-}
+_.updateWhere = (array, value, predicate) => 
+    _.updateIndex(array, value, _.findIndex(array, predicate))
 
 _.idCheck = id => e => e.id === id
 

webpack.config.js

@@ -1,4 +1,5 @@
-const webpack = require('webpack');
+const webpack = require('webpack')
+const path = require('path')
 var ExtractTextPlugin = require('extract-text-webpack-plugin')
 
 const config = {
@@ -6,7 +7,7 @@ const config = {
         './src/index.js',
     ],
     output: {
-        path: __dirname + '/dist',
+        path: path.resolve(__dirname, 'dist'),
         publicPath: '/',
         filename: 'bundle.js'
     },
@@ -31,7 +32,10 @@ const config = {
         ]
     },
     resolve: {
-        extensions: ['*', '.js', '.jsx']
+        extensions: ['*', '.js', '.jsx'],
+        alias: {
+            Components: path.resolve(__dirname, 'src', 'Shared', 'Components')
+        }
     },
     plugins: [
         new ExtractTextPlugin({ filename: 'style.css', allChunks: true }),

yarn.lock

@@ -861,6 +861,12 @@ brace-expansion@^1.1.7:
     balanced-match "^0.4.1"
     concat-map "0.0.1"
 
+brace@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/brace/-/brace-0.10.0.tgz#edef4eb9b0928ba1ee5f717ffc157749a6dd5d76"
+  dependencies:
+    w3c-blob "0.0.1"
+
 braces@^1.8.2:
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
@@ -2545,6 +2551,10 @@ lodash.clonedeep@^4.3.2:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
 
+lodash.isequal@^4.1.1:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -3394,7 +3404,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.0.0, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@~15.5.7:
+prop-types@^15.0.0, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@~15.5.7:
   version "15.5.9"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.9.tgz#d478eef0e761396942f70c78e772f76e8be747c9"
   dependencies:
@@ -3495,6 +3505,14 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-ace@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-4.3.0.tgz#915818da019dbb762d034f52b1e0e173671b1292"
+  dependencies:
+    brace "^0.10.0"
+    lodash.isequal "^4.1.1"
+    prop-types "^15.5.8"
+
 react-addons-css-transition-group@^15.5.2:
   version "15.5.2"
   resolved "https://registry.yarnpkg.com/react-addons-css-transition-group/-/react-addons-css-transition-group-15.5.2.tgz#ea7e0a9f0e1c27ca426da4efd3559915bd42ead2"
@@ -4371,6 +4389,10 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+w3c-blob@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/w3c-blob/-/w3c-blob-0.0.1.tgz#b0cd352a1a50f515563420ffd5861f950f1d85b8"
+
 warning@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"