add editor

mkd-app/package.json

@@ -29,6 +29,7 @@
     "jest": "20.0.4",
     "less": "^3.0.1",
     "less-loader": "^4.1.0",
+    "marked": "^0.3.19",
     "normalize.css": "^8.0.0",
     "object-assign": "4.1.1",
     "postcss-flexbugs-fixes": "3.2.0",

mkd-app/src/actions/index.js

@@ -10,4 +10,13 @@ export function addMkd() {
         type: 'ADD_MKD',
         id: uuid()
     };
+}
+
+export function editorMkd(index, title, value) {
+    return {
+        type: 'EDITOR_MKD',
+        index,
+        title,
+        value
+    }
 }

mkd-app/src/components/common/base.less

@@ -8,4 +8,9 @@ body, {
 
 body {
     background-color: #F5F5DC;
+}
+
+#root {
+    width: 100%;
+    height: 100%;
 }

mkd-app/src/components/editor/index.js

@@ -0,0 +1,117 @@
+ /**
+ * @file editor.js
+ * @date 2018/4/7
+ */
+
+import React from 'react';
+import { connect } from 'react-redux';
+import marked from 'marked';
+import { editorMkd } from '../../actions/index';
+
+import './style.less';
+
+class Editor extends React.Component {
+    state = {
+        title: '',
+        value: ''
+    }
+
+    componentDidMount() {
+        let {title, value} = this.props.data;
+
+        if (title && value){
+            this.setState({
+                title,
+                value
+            });
+        } else {
+            console.log('?')
+        }
+    }
+
+    handleChange(e) {    
+        let value = e.target.value;
+
+        let ary = {
+            'INPUT': {
+                title: value
+            },
+            'TEXTAREA': {
+                value
+            }
+        }[e.target.tagName];
+
+        this.setState(ary);
+    }
+
+    handleInputChange(e) {
+        let value = e.target.value;
+
+        this.setState({
+            value
+        });
+    }
+
+    // 增加Tab缩进、 ---ctrl+s保存---
+    handleKeyEnter(e) {
+        if (e.keyCode === 9) {
+            this.setState({
+                value: e.target.value + '    '
+            });
+            e.preventDefault();
+        }
+
+        if (e.keyCode === 83 && (e.altKey || e.ctrlKey)) {
+            e.preventDefault();
+        }
+    }
+
+    handleBackClick() {
+        this.props.toHome();
+    }
+
+    handleSaveClick() {
+        let index = this.props.data.index;
+        let { title, value } = this.state;
+
+        this.props.changeMkd(index, title, value);
+    }
+
+    render() {
+        return (
+            <div className="editor">
+                <div className="input-btns">
+                    <button className="back" onClick={() => this.handleBackClick()}>返回</button>
+                    <button className="save" onClick={() => this.handleSaveClick()} >保存</button>
+                </div>
+                <div className="input-wrap">
+                    <input className="title-box" onChange={e => this.handleChange(e)} value={this.state.title || ''} />
+                    <div className="marked-wrap">
+                        <textarea 
+                            className="input-box"
+                            // 去掉单词拼写检测
+                            spellCheck='false'
+                            onChange={e => this.handleChange(e)}
+                            onKeyDown={e => this.handleKeyEnter(e)}
+                            value={this.state.value || ''}></textarea>
+                        <div className="div-line"></div>
+                        <div className="marked-box" dangerouslySetInnerHTML={{__html: marked(this.state.value || '')}}></div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+let Component = connect(
+    null,
+    dispatch => {
+        return {
+            changeMkd: function(index, title, value) {
+                dispatch(editorMkd(index, title, value))
+            }
+        };
+    }
+)(Editor);
+
+export default Component;

mkd-app/src/components/editor/style.less

@@ -0,0 +1,94 @@
+.editor {
+    position: absolute;
+    top: 0;
+    left: 10%;
+    right: 10%;
+    bottom: 30px;
+
+    .input-btns {
+        height: 50px;
+        line-height: 50px; 
+        text-align: right;
+
+        button {
+            background: none;
+            border: none;
+            outline: none;
+            padding: 0;
+            border: 1px solid #000;
+            width: 50px;
+            border-radius: 20px;
+            margin-left: 15px;
+        }
+    }
+
+    .input-wrap {
+        position: absolute;
+        top: 50px;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        padding: 0 3%;        
+        background-color: #fff;
+
+            .title-box {
+                border: none;
+                outline: none;
+                padding: 0;
+
+                // reset
+                width: 100%;
+                height: 50px;
+                display: block;
+                margin: 0 auto;
+                font-size: 1.5rem;
+                letter-spacing: .5px;
+                border-bottom: 1px solid #ededed;
+                line-height: 50px;
+                color: #4d4d4d;
+            }
+
+            .marked-wrap {
+                position: absolute;
+                top: 51px;
+                left: 4%;
+                right: 4%;
+                bottom: 0;
+
+                .input-box {
+                    outline: none;
+                    resize: none;
+                    border: none;
+                    display: inline-block;
+                    width: 50%;
+                    height: 100%;
+                    padding: 20px 10px;
+                    box-sizing: border-box;
+                    font-size: 1.2rem;
+                    position: relative;
+
+                    // 隐藏滚动条
+                    &::-webkit-scrollbar {display:none}
+                }
+
+                .marked-box {
+                    display: inline-block;
+                    width: 50%;
+                    height: 100%;
+                    padding: 20px 10px;            
+                    vertical-align: top;
+                    box-sizing: border-box;            
+                }
+
+                .div-line {
+                    position: absolute;
+                    left: 50%;
+                    top: 5%;
+                    bottom: 5%;
+                    width: 1px;
+                    background: #ccc;
+                }
+            }
+    }
+
+}

mkd-app/src/components/home/index.js

@@ -14,33 +14,40 @@ import ItemList from './listItem';
 import { addMkd } from '../../actions';
 
 class Home extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            list: []
-        }
+
+    state = {
+        list: []
     }
 
     componentDidMount() {
-        this.updatedState();
-    }
-
-    updatedState() {
-        this.props.handleAddClick();
         this.setState({
             list: this.props.list
         });
     }
 
+    updatedState() {
+        setTimeout(() => {
+            this.props.handleAddClick();
+            this.setState({
+                list: this.props.list
+            }); 
+        }, 0);
+    }
+
     getListDom(list) {
         let dom = list && list.map((item, key) => {
-            return <ItemList data={item} key={key} />
+            return <ItemList data={item} key={key} onClick={() => this.handleItemClick(key)}/>
         });
 
         return dom;
     }
 
+    handleItemClick(index) {
+        // 获取index，title，value
+        let {title, value} = this.state.list[index];
+        this.props.toEditor(index, title, value);
+    }
+
     render() {
         return (
             <div className="home">

mkd-app/src/components/home/listItem/style.less

@@ -1,8 +1,14 @@
 .list-item {
     display: inline-block;
     width: 120px;
-    margin: 0 30px;
-    margin-left: 0;
+    margin: 0 0 30px 30px;
     height: 140px;
     background-color: #F5DEB3;
+    vertical-align: top;    
+
+    &:last-child {
+        background-color: transparent;
+        text-align: center;
+        line-height: 170px;
+    }
 }

mkd-app/src/components/home/style.less

@@ -6,12 +6,12 @@
 
     .icon-add {
         display: inline-block;
-        width: 50px;
-        height: 50px;
+        width: 70px;
+        height: 70px;
         border: 1px solid #000;
         border-radius: 50%;
         text-align: center;
-        line-height: 50px;
-        font-size: 2rem;
+        line-height: 70px;
+        font-size: 3rem;
     }
 }

mkd-app/src/components/index.js

@@ -1,17 +1,43 @@
 import React from 'react';
-import { BrowserRouter, Route } from 'react-router-dom';
 
 // component
 import Home from './home';
+import Editor from './editor';
 import 'normalize.css';
 import './common/base.less';
 
 export default class App extends React.Component {
+
+    state = {
+        editor: false,
+        data: {}
+    }
+
+    handleToHome() {
+        this.setState({
+            editor: false
+        });
+    }
+
+    handleToEditor(index, title, value) {
+        this.setState({
+            editor: true,
+            data: {
+                index,
+                title,
+                value
+            }
+        });
+    }
+
     render() {
         return (
-            <BrowserRouter>
-                <Route excat path='/' component={Home} />
-            </BrowserRouter>
+            this.state.editor
+            ? <Editor 
+                data={this.state.data}
+                toHome={() => this.handleToHome()} 
+                />
+            : <Home toEditor={(index, title, value) => this.handleToEditor(index, title, value)} />
         );
     }
 }