feat: 编辑器增加预览功能

Author: leeyeh

modules/NewTicket.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import {FormGroup, ControlLabel, FormControl, Button, Tooltip, OverlayTrigger} from 'react-bootstrap'
 import AV from 'leancloud-storage/live-query'
 
+import TextareaWithPreview from './components/TextareaWithPreview'
 const {uploadFiles, getTinyCategoryInfo} = require('./common')
 
 export default class NewTicket extends React.Component {
@@ -140,7 +141,7 @@ export default class NewTicket extends React.Component {
               <b className="has-required" title="支持 Markdown 语法">M↓</b>
             </OverlayTrigger>
           </ControlLabel>
-          <FormControl componentClass="textarea" placeholder="在这里输入，粘贴图片即可上传。" rows="8"
+          <TextareaWithPreview componentClass="textarea" placeholder="在这里输入，粘贴图片即可上传。" rows="8"
             value={this.state.content}
             onChange={this.handleContentChange.bind(this)}
             inputRef={(ref) => this.contentTextarea = ref }

modules/Ticket.js

@@ -10,6 +10,7 @@ import AV from 'leancloud-storage/live-query'
 import {UserLabel, TicketStatusLabel, uploadFiles, getTinyCategoryInfo} from './common'
 import common from './common'
 import UpdateTicket from './UpdateTicket'
+import TextareaWithPreview from './components/TextareaWithPreview'
 import css from './Ticket.css'
 import csCss from './CustomerServiceTickets.css'
 import DocumentTitle from 'react-document-title'
@@ -595,7 +596,7 @@ class TicketReply extends Component {
       <div>
         <form className="form-group">
           <FormGroup>
-            <FormControl componentClass="textarea" placeholder="在这里输入，粘贴图片即可上传。" rows="8"
+            <TextareaWithPreview componentClass="textarea" placeholder="在这里输入，粘贴图片即可上传。" rows="8"
               value={this.state.reply}
               onChange={this.handleReplyOnChange.bind(this)}
               onKeyDown={this.handleReplyOnKeyDown.bind(this)}

modules/components/TextareaWithPreview/index.css

@@ -0,0 +1,20 @@
+.textareaWrapper {
+  position: relative;
+}
+
+.preview {
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+  border-radius: 4px;
+  height: 40px;
+  width: 40px;
+  line-height: 40px;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.06);
+  cursor: pointer;
+}
+
+.preview:hover {
+  background: rgba(0, 0, 0, 0.15);
+}

modules/components/TextareaWithPreview/index.js

@@ -0,0 +1,64 @@
+import React, {Component} from 'react'
+import PropTypes from 'prop-types'
+import {FormControl} from 'react-bootstrap'
+import Stackedit from 'stackedit-js'
+import css from './index.css'
+
+export default class TextareaWithPreview extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      value: props.value
+    }
+
+    this.inputRef = (ref, ...params) => {
+      this.ref = ref
+      if (this.props.inputRef) {
+        this.props.inputRef(ref, ...params)
+      }
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.value !== this.state.value) {
+      this.setState({ value: nextProps.value })
+    }
+  }
+  
+  enterPreviewMode() {
+    const editor = this._editor = this._editor || new Stackedit()
+    editor.openFile({
+      content: {
+        text: this.state.value,
+      }
+    })
+  
+    // Listen to StackEdit events and apply the changes to the textarea.
+    editor.off('fileChange')
+    editor.on('fileChange', (file) => {
+      this.setState({
+        value: file.content.text,
+      })
+    })
+
+      
+    editor.off('close')
+    editor.on('close', () => this.ref.focus())
+  }
+
+  render() {
+    return (
+      <div className={css.textareaWrapper}>
+        <FormControl {...this.props} value={this.state.value} componentClass="textarea" inputRef={this.inputRef.bind(this)}/>
+        <div onClick={this.enterPreviewMode.bind(this)} title="预览" className={css.preview}><span className="glyphicon glyphicon-fullscreen" aria-hidden="true"></span></div>
+      </div>
+    )
+  }
+}
+
+TextareaWithPreview.propTypes = {
+  value: PropTypes.any,
+  inputRef: PropTypes.func
+}
+

package.json

@@ -57,6 +57,7 @@
     "request": "^2.79.0",
     "request-promise": "^4.1.1",
     "serve-favicon": "^2.4.3",
+    "stackedit-js": "^1.0.5",
     "style-loader": "^0.18.1",
     "uuid": "^3.1.0",
     "webpack": "^1.12.13",