yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Migrating editor into cleaner code

Browse Source
This commit is contained in:
Jori Lallo
2016-05-10 00:07:50 -06:00
parent 3d4554caa3
commit 0fdaff820e
29 changed files with 545 additions and 543 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -90,6 +90,7 @@
"react-redux": "^4.4.0",
"react-router": "^2.0.0",
"react-router-redux": "^4.0.4",
"rebass": "^0.2.6",
"redux": "^3.3.1",
"redux-logger": "^2.6.1",
"redux-persist": "3.0.3",

43
src/Actions/index.js
View File

@@ -1,43 +0,0 @@
import keyMirror from 'fbjs/lib/keyMirror';
/*
* Action types
*/
export const UPDATE_TEXT = 'UPDATE_TEXT';
export const TOGGLE_EDITORS = 'TOGGLE_EDITORS';
export const ADD_REVISION = 'ADD_REVISION';
export const REPLACE_TEXT= 'REPLACE_TEXT';
export const SLACK_AUTH_PENDING = 'SLACK_AUTH_PENDING';
export const SLACK_AUTH_SUCCESS = 'SLACK_AUTH_SUCCESS';
export const SLACK_AUTH_FAILURE = 'SLACK_AUTH_FAILURE';
/*
* Other Constants
*/
export const ActiveEditors = keyMirror({
MARKDOWN: null,
TEXT: null,
});
/*
* Action creators
*/
export function updateText(text, editor) {
return { type: UPDATE_TEXT, text, editor };
}
export function toggleEditors(toggledEditor) {
return { type: TOGGLE_EDITORS, toggledEditor };
}
export function addRevision(createdAt) {
return { type: ADD_REVISION, createdAt };
}
export function replaceText(originalText, replacedText) {
return { type: REPLACE_TEXT, originalText, replacedText };
}

30
src/Components/Header/Header.js
View File

@@ -1,30 +0,0 @@
import React from 'react';
import styles from './Header.scss';
import classNames from 'classnames/bind';
const cx = classNames.bind(styles);
const Header = ({
toggleEditors,
}) => {
return (
<div className={ styles.header }>
<div className={ styles.headerItem }><i>Beautiful</i> Atlas</div>
<div
className={ cx('headerItem', 'editorToggle') }
style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}
>
<div>
<span className={ styles.textIcon }>Aa</span>
</div>
</div>
</div>
);
};
Header.propTypes = {
activeEditors: React.PropTypes.array.isRequired,
toggleEditors: React.PropTypes.func.isRequired,
};
export default Header;

61
src/Components/Header/Header.scss
View File

@@ -1,61 +0,0 @@
.header {
display: flex;
width: 100%;
height: 42px;
position: fixed;
z-index: 9999;
justify-content: space-between;
background-color: #111;
color: #fff;
i {
color: #fff;
font-family: serif;
}
.headerItem {
width: 150px;
padding: 12px 22px;
font-size: 15px;
font-weight: 300;
font-family: "Atlas Grotesk", "Helvetica Neue", sans-serif;
text-align: center;
&:first-child {
text-align: left;
}
&:last-child {
text-align: right;
}
}
.editorToggle div {
margin-right: 12px;
cursor: pointer;
opacity: 0.4;
color: #fff;
&.active {
opacity: 1;
}
&:first-child {
margin-top: 2px;
margin-right: 15px;
}
&:last-child {
margin-top: -2px;
}
}
.textIcon {
font-family: Times, serif;
font-size: 20px;
}
}

2
src/Components/Header/index.js
View File

@@ -1,2 +0,0 @@
import Header from './Header';
export default Header;

32
src/Components/MarkdownEditor/MarkdownEditor.js
View File

@@ -93,7 +93,7 @@ class MarkdownAtlas extends React.Component {
mode: 'gfm',
matchBrackets: true,
lineWrapping: true,
viewportMargin: Infinity,
// viewportMargin: Infinity,
theme: 'atlas',
extraKeys: {
Enter: 'newlineAndIndentContinueMarkdownList',
@@ -106,22 +106,20 @@ class MarkdownAtlas extends React.Component {
// - Emojify
// -
return (
<div>
<Dropzone
onDropAccepted={this.onDropAccepted}
disableClick={true}
multiple={false}
accept={'image/*'}
className={styles.container}
>
<Codemirror
value={this.props.text}
onChange={this.onChange}
options={options}
ref="editor"
/>
</Dropzone>
</div>
<Dropzone
onDropAccepted={this.onDropAccepted}
disableClick={true}
multiple={false}
accept={'image/*'}
className={styles.container}
>
<Codemirror
value={this.props.text}
onChange={this.onChange}
options={options}
ref="editor"
/>
</Dropzone>
);
}
}

14
src/Components/MarkdownEditor/MarkdownEditor.scss
View File

@@ -1,4 +1,7 @@
.container {
display: flex;
flex: 1;
font-weight: 400;
font-size: 1em;
line-height: 1.5em;
@@ -9,5 +12,14 @@
}
@media all and (max-width: 2000px) and (min-width: 960px) {
.container {font-size: 1.1em}
.container {
margin-top: 48px;
font-size: 1.1em;
}
}
@media all and (max-width: 960px) {
.container {
font-size: 0.9em;
}
}

52
src/Components/TextEditor/TextEditor.js
View File

@@ -1,52 +0,0 @@
import React from 'react';
import Editor from 'react-medium-editor';
import marked from 'marked';
require('medium-editor/dist/css/medium-editor.css');
require('medium-editor/dist/css/themes/default.css');
import styles from './TextEditor.scss';
class TextEditor extends React.Component {
static propTypes = {
text: React.PropTypes.string,
onChange: React.PropTypes.func,
}
onChange = (newText) => {
if (newText !== this.props.text) {
this.props.onChange(newText);
}
}
render = () => {
return (
<div className={ styles.container }>
<div></div>
<Editor
options={{
toolbar: {
buttons: [
'bold',
'italic',
'underline',
'anchor',
'unorderedlist',
'orderedlist',
'h1',
'h2',
'h3',
'quote',
],
},
placeholder: false,
}}
text={marked(this.props.text)}
onChange={ this.onChange }
className={ styles.editor }
/>
</div>
);
}
}
export default TextEditor;

19
src/Components/TextEditor/TextEditor.scss
View File

@@ -1,19 +0,0 @@
.container {
font-weight: 400;
font-size: 1em;
line-height: 1.5em;
margin: 0 auto;
padding: 2em 3em;
max-width: 50em;
}
.editor {
outline: none;
font-family: 'Atlas Grotesk', 'Helvetica Neue', sans-serif;
}
@media all and (max-width: 2000px) and (min-width: 960px) {
.container {font-size: 1.1em}
}

2
src/Components/TextEditor/index.js
View File

@@ -1,2 +0,0 @@
import TextEditor from './TextEditor';
export default TextEditor;

117
src/Reducers/index.js
View File

@@ -1,118 +1,13 @@
import _xor from 'lodash/xor';
import _last from 'lodash/last';
import { combineReducers } from 'redux';
import {
UPDATE_TEXT,
TOGGLE_EDITORS,
TOGGLE_HISTORY_SIDEBAR,
ADD_REVISION,
REPLACE_TEXT,
ActiveEditors
} from '../actions';
const activeEditors = (state = [ActiveEditors.MARKDOWN, ActiveEditors.TEXT], action) => {
switch (action.type) {
case TOGGLE_EDITORS: {
// TODO: A rewrite would be nice
const newState = _xor(state, [action.toggledEditor]);
if (newState.length > 0) {
return newState;
} else {
return _xor([ActiveEditors.MARKDOWN, ActiveEditors.TEXT], [action.toggledEditor]);
}
}
default:
return state;
}
};
const historySidebar = (state = { visible: false }, action) => {
switch (action.type) {
case TOGGLE_HISTORY_SIDEBAR: {
return {
...state,
visible: !state.visible,
};
}
default:
return state;
}
};
const defaultTest = `# Welcome to Beautiful Atlas
This is just a small preview here's what you can do:
- Write markdown or rich text, you choose
- Dont' worry about saving
- One document for now
- More to come
`
const textDefaultState = {
text: defaultTest,
revisions: [],
unsavedChanges: false,
};
const text = (state = textDefaultState, action) => {
const lastRevision = _last(state.revisions);
switch (action.type) {
case UPDATE_TEXT: {
let unsavedChanges = false;
if (lastRevision && lastRevision.text !== state.text) {
unsavedChanges = true;
}
return {
...state,
unsavedChanges,
text: action.text,
};
}
case ADD_REVISION: {
// Create new revision if it differs from the previous one
if (!lastRevision || lastRevision.text !== state.text) {
const lastId = lastRevision ? lastRevision.id : 0;
return {
...state,
revisions: [
...state.revisions,
{
id: lastId + 1,
text: state.text,
created_at: action.createdAt,
},
],
unsavedChanges: false,
};
} else {
return state;
}
}
case REPLACE_TEXT: {
const newText = state.text.replace(action.originalText, action.replacedText);
return {
...state,
text: newText,
};
}
default:
return state;
}
};
import team from './team';
import user from './user';
import atlases from './atlases';
import team from './team';
import editor from './editor';
import user from './user';
export default combineReducers({
activeEditors,
historySidebar,
text,
user,
team,
atlases,
team,
editor,
user,
});

8
src/actions/EditorActions.js
View File

@@ -1,5 +1,9 @@
import makeActionCreator from '../utils/actions';
export const TOGGLE_PREVIEW = 'TOGGLE_PREVIEW';
// export const TOGGLE_PREVIEW = 'TOGGLE_PREVIEW';
export const UPDATE_TEXT = 'UPDATE_TEXT';
export const REPLACE_TEXT = 'REPLACE_TEXT';
const togglePreview = makeActionCreator(TOGGLE_PREVIEW);
// export const togglePreview = makeActionCreator(TOGGLE_PREVIEW);
export const updateText = makeActionCreator(UPDATE_TEXT, 'text');
export const replaceText = makeActionCreator(REPLACE_TEXT, 'originalText', 'replacedText');

340
src/assets/styles/codemirror.css Normal file
View File

@@ -0,0 +1,340 @@
:global {
/* BASICS */
.CodeMirror {
/* Set height, width, borders, and global font properties here */
font-family: monospace;
height: 300px;
color: black;
}
/* PADDING */
.CodeMirror-lines {
padding: 4px 0; /* Vertical padding around content */
}
.CodeMirror pre {
padding: 0 4px; /* Horizontal padding of content */
}
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
background-color: white; /* The little square between H and V scrollbars */
}
/* GUTTER */
.CodeMirror-gutters {
border-right: 1px solid #ddd;
background-color: #f7f7f7;
white-space: nowrap;
}
.CodeMirror-linenumbers {}
.CodeMirror-linenumber {
padding: 0 3px 0 5px;
min-width: 20px;
text-align: right;
color: #999;
white-space: nowrap;
}
.CodeMirror-guttermarker { color: black; }
.CodeMirror-guttermarker-subtle { color: #999; }
/* CURSOR */
.CodeMirror-cursor {
border-left: 1px solid black;
border-right: none;
width: 0;
}
/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
border-left: 1px solid silver;
}
.cm-fat-cursor .CodeMirror-cursor {
width: auto;
border: 0;
background: #7e7;
}
.cm-fat-cursor div.CodeMirror-cursors {
z-index: 1;
}
.cm-animate-fat-cursor {
width: auto;
border: 0;
-webkit-animation: blink 1.06s steps(1) infinite;
-moz-animation: blink 1.06s steps(1) infinite;
animation: blink 1.06s steps(1) infinite;
background-color: #7e7;
}
@-moz-keyframes blink {
0% {}
50% { background-color: transparent; }
100% {}
}
@-webkit-keyframes blink {
0% {}
50% { background-color: transparent; }
100% {}
}
@keyframes blink {
0% {}
50% { background-color: transparent; }
100% {}
}
/* Can style cursor different in overwrite (non-insert) mode */
.CodeMirror-overwrite .CodeMirror-cursor {}
.cm-tab { display: inline-block; text-decoration: inherit; }
.CodeMirror-ruler {
border-left: 1px solid #ccc;
position: absolute;
}
/* DEFAULT THEME */
.cm-s-default .cm-header {color: blue;}
.cm-s-default .cm-quote {color: #090;}
.cm-negative {color: #d44;}
.cm-positive {color: #292;}
.cm-header, .cm-strong {font-weight: bold;}
.cm-em {font-style: italic;}
.cm-link {text-decoration: underline;}
.cm-strikethrough {text-decoration: line-through;}
.cm-s-default .cm-keyword {color: #708;}
.cm-s-default .cm-atom {color: #219;}
.cm-s-default .cm-number {color: #164;}
.cm-s-default .cm-def {color: #00f;}
.cm-s-default .cm-variable,
.cm-s-default .cm-punctuation,
.cm-s-default .cm-property,
.cm-s-default .cm-operator {}
.cm-s-default .cm-variable-2 {color: #05a;}
.cm-s-default .cm-variable-3 {color: #085;}
.cm-s-default .cm-comment {color: #a50;}
.cm-s-default .cm-string {color: #a11;}
.cm-s-default .cm-string-2 {color: #f50;}
.cm-s-default .cm-meta {color: #555;}
.cm-s-default .cm-qualifier {color: #555;}
.cm-s-default .cm-builtin {color: #30a;}
.cm-s-default .cm-bracket {color: #997;}
.cm-s-default .cm-tag {color: #170;}
.cm-s-default .cm-attribute {color: #00c;}
.cm-s-default .cm-hr {color: #999;}
.cm-s-default .cm-link {color: #00c;}
.cm-s-default .cm-error {color: #f00;}
.cm-invalidchar {color: #f00;}
.CodeMirror-composing { border-bottom: 2px solid; }
/* Default styles for common addons */
div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
.CodeMirror-activeline-background {background: #e8f2ff;}
/* STOP */
/* The rest of this file contains styles related to the mechanics of
the editor. You probably shouldn't touch them. */
.CodeMirror {
position: relative;
overflow: hidden;
background: white;
}
.CodeMirror-scroll {
overflow: scroll !important; /* Things will break if this is overridden */
/* 30px is the magic margin used to hide the element's real scrollbars */
/* See overflow: hidden in .CodeMirror */
margin-bottom: -30px; margin-right: -30px;
padding-bottom: 30px;
height: 100%;
outline: none; /* Prevent dragging from highlighting the element */
position: relative;
}
.CodeMirror-sizer {
position: relative;
border-right: 30px solid transparent;
}
/* The fake, visible scrollbars. Used to force redraw during scrolling
before actual scrolling happens, thus preventing shaking and
flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
position: absolute;
z-index: 6;
display: none;
}
.CodeMirror-vscrollbar {
right: 0; top: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.CodeMirror-hscrollbar {
bottom: 0; left: 0;
overflow-y: hidden;
overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
right: 0; bottom: 0;
}
.CodeMirror-gutter-filler {
left: 0; bottom: 0;
}
.CodeMirror-gutters {
position: absolute; left: 0; top: 0;
min-height: 100%;
z-index: 3;
}
.CodeMirror-gutter {
white-space: normal;
height: 100%;
display: inline-block;
vertical-align: top;
margin-bottom: -30px;
/* Hack to make IE7 behave */
*zoom:1;
*display:inline;
}
.CodeMirror-gutter-wrapper {
position: absolute;
z-index: 4;
background: none !important;
border: none !important;
}
.CodeMirror-gutter-background {
position: absolute;
top: 0; bottom: 0;
z-index: 4;
}
.CodeMirror-gutter-elt {
position: absolute;
cursor: default;
z-index: 4;
}
.CodeMirror-gutter-wrapper {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.CodeMirror-lines {
cursor: text;
min-height: 1px; /* prevents collapsing before first draw */
}
.CodeMirror pre {
/* Reset some styles that the rest of the page might have set */
-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
border-width: 0;
background: transparent;
font-family: inherit;
font-size: inherit;
margin: 0;
white-space: pre;
word-wrap: normal;
line-height: inherit;
color: inherit;
z-index: 2;
position: relative;
overflow: visible;
-webkit-tap-highlight-color: transparent;
-webkit-font-variant-ligatures: none;
font-variant-ligatures: none;
}
.CodeMirror-wrap pre {
word-wrap: break-word;
white-space: pre-wrap;
word-break: normal;
}
.CodeMirror-linebackground {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
z-index: 0;
}
.CodeMirror-linewidget {
position: relative;
z-index: 2;
overflow: auto;
}
.CodeMirror-widget {}
.CodeMirror-code {
outline: none;
}
/* Force content-box sizing for the elements where we expect it */
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.CodeMirror-measure {
position: absolute;
width: 100%;
height: 0;
overflow: hidden;
visibility: hidden;
}
.CodeMirror-cursor { position: absolute; }
.CodeMirror-measure pre { position: static; }
div.CodeMirror-cursors {
visibility: hidden;
position: relative;
z-index: 3;
}
div.CodeMirror-dragcursors {
visibility: visible;
}
.CodeMirror-focused div.CodeMirror-cursors {
visibility: visible;
}
.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
.CodeMirror-crosshair { cursor: crosshair; }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
.cm-searching {
background: #ffa;
background: rgba(255, 255, 0, .4);
}
/* IE7 hack to prevent it from returning funny offsetTops on the spans */
.CodeMirror span { *vertical-align: text-bottom; }
/* Used to force a border model for a node */
.cm-force-border { padding-right: .1px; }
@media print {
/* Hide the cursor when printing */
.CodeMirror div.CodeMirror-cursors {
visibility: hidden;
}
}
/* See issue #2901 */
.cm-tab-wrap-hack:after { content: ''; }
/* Help users use markselection to safely style text background */
span.CodeMirror-selectedtext { background: none; }
}

60
src/components/Editor/Editor.js
View File

@@ -1,60 +0,0 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import MarkdownEditor from '../../components/MarkdownEditor';
import {
updateText,
replaceText,
} from '../../actions';
import constants from '../../constants';
import styles from './Editor.scss';
class Editor extends Component {
static propTypes = {
editMarkdown: React.PropTypes.func.isRequired,
text: React.PropTypes.string,
replaceText: React.PropTypes.func.isRequired,
showHistorySidebar: React.PropTypes.bool.isRequired,
}
render() {
return (
<div className={styles.container}>
<div className={ styles.markdown }>
<MarkdownEditor
onChange={this.props.editMarkdown}
text={this.props.text}
replaceText={this.props.replaceText}
/>
</div>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
text: state.text.text,
editor: state.editor,
showHistorySidebar: state.historySidebar.visible,
revisions: state.text.revisions,
};
};
const mapDispatchToProps = (dispatch) => {
return {
editMarkdown: (text) => {
dispatch(updateText(text, 'markdown'));
},
};
};
Editor = connect(
mapStateToProps,
mapDispatchToProps,
)(Editor);
export default Editor;

16
src/components/Editor/Editor.scss
View File

@@ -1,16 +0,0 @@
.container {
display: flex;
padding-top: 48px;
}
.panel {
width: 50%;
}
.fullscreen {
width: 100%;
}
.markdown {
background-color: #ffffff;
}

2
src/components/Flex.js
View File

@@ -24,7 +24,7 @@ Flex.defaultProps = {
};
Flex.propTypes = {
children: React.PropTypes.arrayOf(React.PropTypes.node).isRequired,
children: React.PropTypes.node.isRequired,
direction: React.PropTypes.string,
justify: React.PropTypes.string,
align: React.PropTypes.string,

11
src/components/Layout/Layout.js
View File

@@ -1,4 +1,5 @@
import React from 'react';
import _truncate from 'lodash/truncate';
import { connect } from 'react-redux';
import Link from 'react-router/lib/Link';
@@ -9,8 +10,8 @@ import styles from './Layout.scss';
class Layout extends React.Component {
static propTypes = {
actions: React.PropTypes.arrayOf(React.PropTypes.node),
title: React.PropTypes.node,
actions: React.PropTypes.node,
title: React.PropTypes.string,
}
render() {
@@ -21,7 +22,11 @@ class Layout extends React.Component {
<Link to="/">{ this.props.teamName }</Link>
</div>
<Flex align="center" className={ styles.title }>
{ this.props.title }
{ this.props.title ? (
<span title={this.props.title}>{ _truncate(this.props.title, 60) }</span>
) : (
<span className={ styles.untitled }>Untitled document</span>
)}
</Flex>
<Flex direction="row">
<Flex align="center" className={ styles.actions }>

4
src/components/Layout/Layout.scss
View File

@@ -41,3 +41,7 @@
text-decoration: none;
margin-right: 15px;
}
.untitled {
color: #ccc;
}

3
src/index.js
View File

@@ -20,7 +20,7 @@ import 'utils/base-styles.scss';
import 'fonts/atlas/atlas.css';
import Home from 'scenes/Home';
// import App from 'scenes/App';
import Editor from 'scenes/Editor';
import Dashboard from 'scenes/Dashboard';
import Atlas from 'scenes/Atlas';
import SlackAuth from 'scenes/SlackAuth';
@@ -50,6 +50,7 @@ persistStore(store, {
<Route path="/dashboard" component={ Dashboard } onEnter={ requireAuth } />
<Route path="/atlas/:id" component={ Atlas } onEnter={ requireAuth } />
<Route path="/atlas/:id/new" component={ Editor } onEnter={ requireAuth } />
<Route path="/editor" component={Dashboard} onEnter={ requireAuth } />

62
src/reducers/EditorReducer.js
View File

@@ -1,62 +0,0 @@
const defaultTest = `# Welcome to Beautiful Atlas
This is just a small preview here's what you can do:
- Write markdown or rich text, you choose
- Dont' worry about saving
- One document for now
- More to come
`
const state = {
previousTest: null,
text: null,
unsavedChanges: false,
};
const text = (state = state, action) => {
switch (action.type) {
case UPDATE_TEXT: {
let unsavedChanges = false;
if (lastRevision && lastRevision.text !== state.text) {
unsavedChanges = true;
}
return {
...state,
unsavedChanges,
text: action.text,
};
}
case ADD_REVISION: {
// Create new revision if it differs from the previous one
if (!lastRevision || lastRevision.text !== state.text) {
const lastId = lastRevision ? lastRevision.id : 0;
return {
...state,
revisions: [
...state.revisions,
{
id: lastId + 1,
text: state.text,
created_at: action.createdAt,
},
],
unsavedChanges: false,
};
} else {
return state;
}
}
case REPLACE_TEXT: {
const newText = state.text.replace(action.originalText, action.replacedText);
return {
...state,
text: newText,
};
}
default:
return state;
}
};

54
src/reducers/editor.js Normal file
View File

@@ -0,0 +1,54 @@
import {
UPDATE_TEXT,
REPLACE_TEXT,
} from 'actions/EditorActions';
const initialState = {
originalText: null,
text: null,
title: null,
unsavedChanges: false,
};
const parseHeader = (text) => {
const firstLine = text.split(/\r?\n/)[0];
const match = firstLine.match(/^#+ +(.*)$/);
if (match) {
return match[1];
}
}
const editor = (state = initialState, action) => {
switch (action.type) {
case UPDATE_TEXT: {
const title = parseHeader(action.text);
console.log(title);
let unsavedChanges = false;
if (state.originalText !== action.text) {
unsavedChanges = true;
}
return {
...state,
unsavedChanges,
text: action.text,
title: title || state.title,
};
}
case REPLACE_TEXT: {
const newText = state.text.replace(action.originalText, action.replacedText);
return {
...state,
unsavedChanges: true,
text: newText,
};
}
default:
return state;
}
};
export default editor;

57
src/scenes/App/App.js
View File

@@ -1,57 +0,0 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import styles from './App.scss';
import {
toggleEditors,
addRevision,
} from '../../actions';
import Header from '../../components/Header';
import Editor from '../../components/Editor';
class App extends Component {
static propTypes = {
children: React.PropTypes.element,
addRevision: React.PropTypes.func.isRequired,
unsavedChanges: React.PropTypes.bool.isRequired,
}
render() {
return (
<div className={ styles.container }>
<Header
activeEditors={this.props.activeEditors}
addRevision={this.props.addRevision}
unsavedChanges={this.props.unsavedChanges}
/>
<div className={ styles.content }>
<Editor />
</div>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
activeEditors: state.activeEditors,
unsavedChanges: state.text.unsavedChanges,
};
};
const mapDispatchToProps = (dispatch) => {
return {
addRevision: () => {
dispatch(addRevision());
},
};
};
App = connect(
mapStateToProps,
mapDispatchToProps,
)(App);
export default App;

2
src/scenes/App/index.js
View File

@@ -1,2 +0,0 @@
import App from './App';
export default App;

2
src/scenes/Atlas/Atlas.js
View File

@@ -47,7 +47,7 @@ class Atlas extends React.Component {
return (
<Layout
actions={(
<Link to="/new-document">New document</Link>
<Link to={ `/atlas/${data.id}/new` }>New document</Link>
)}
title={ data.name }
>

70
src/scenes/Editor/Editor.js Normal file
View File

@@ -0,0 +1,70 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import {
updateText,
replaceText,
} from 'actions/EditorActions';
import styles from './Editor.scss';
import 'assets/styles/codemirror.css';
import Layout from 'components/Layout';
import Flex from 'components/Flex';
import MarkdownEditor from 'components/MarkdownEditor';
import SaveAction from './components/SaveAction';
import MoreAction from './components/MoreAction';
class Editor extends Component {
static propTypes = {
updateText: React.PropTypes.func.isRequired,
replaceText: React.PropTypes.func.isRequired,
text: React.PropTypes.string,
title: React.PropTypes.string,
}
render() {
return (
<Layout
actions={(
<Flex direction="row" align="center">
<SaveAction />
<MoreAction />
</Flex>
)}
title={ this.props.title }
>
<Flex flex={ true } align="center">
<MarkdownEditor
onChange={ this.props.updateText }
text={ this.props.text }
replaceText={this.props.replaceText}
/>
</Flex>
</Layout>
);
}
}
const mapStateToProps = (state) => {
return {
text: state.editor.text,
title: state.editor.title,
};
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({
updateText,
replaceText,
}, dispatch)
};
Editor = connect(
mapStateToProps,
mapDispatchToProps,
)(Editor);
export default Editor;

0
src/scenes/App/App.scss → src/scenes/Editor/Editor.scss
View File

12
src/scenes/Editor/components/MoreAction.js Normal file
View File

@@ -0,0 +1,12 @@
import React from 'react';
import { Arrow } from 'rebass';
const MoreAction = (props) => {
return (
<div>
<button>More <Arrow /></button>
</div>
);
};
export default MoreAction;

12
src/scenes/Editor/components/SaveAction.js Normal file
View File

@@ -0,0 +1,12 @@
import React from 'react';
import { Arrow } from 'rebass';
const SaveAction = (props) => {
return (
<div>
Save
</div>
);
};
export default SaveAction;

0
src/components/Editor/index.js → src/scenes/Editor/index.js
View File