Zhengxinqi/markdown preview

app/components/AceEditor/actions.js

@@ -1,9 +1,9 @@
 /* @flow weak */
-import { createAction } from 'redux-actions'
-export const EDITOR_REGISTER = 'EDITOR_REGISTER'
+import { createAction } from 'redux-actions';
+export const EDITOR_REGISTER = 'EDITOR_REGISTER';
 export const registerEditor = createAction(EDITOR_REGISTER,
   (id, editor, editorDOM) => ({ id, editor, editorDOM })
-)
+);
 
-export const EDITOR_RESIZE_ALL = 'EDITOR_RESIZE_ALL'
-export const resizeAll = createAction(EDITOR_RESIZE_ALL)
+export const EDITOR_RESIZE_ALL = 'EDITOR_RESIZE_ALL';
+export const resizeAll = createAction(EDITOR_RESIZE_ALL);

app/components/EditorWrapper/actions.js

@@ -0,0 +1,9 @@
+// export const EDITOR_RESIZE = 'EDITOR_RESIZE';
+
+export const editorResize = (dX, dY) => ({
+  type: 'EDITOR_RESIZE',
+  payload: {
+    dX, 
+    dY
+  },
+});

app/components/EditorWrapper/index.jsx

@@ -0,0 +1,61 @@
+import React, { PropTypes } from 'react';
+import AceEditor from '../AceEditor';
+import { markdown } from 'markdown';
+import { connect } from 'react-redux';
+import cx from 'classnames';
+import { bindActionCreators } from 'redux';
+import * as ResizeActions from './actions';
+import MarkdownEditor from '../MarkdownEditor';
+
+
+const editors = {
+  AceEditor,
+  MarkdownEditor,
+};
+
+
+const getEditorByName = ({
+  type = 'default', 
+  tab, 
+  body, 
+}) => {
+  if (type === 'default') {
+    return React.createElement(editors.AceEditor, { tab });
+  } else if(type === 'editorWithPreview') {
+    return React.createElement(editors.MarkdownEditor, { content: body, tab });
+  }
+};
+
+
+const EditorWrapper = ({
+  tab,
+  actions
+}) => {
+  const { 
+    title, 
+    content: { body = '' } = {},
+  } = tab;
+  let type = 'default';
+  if (title.endsWith('.md')) {
+    type = 'editorWithPreview'
+  }
+  return getEditorByName({
+    type,
+    tab,
+    body,
+  });
+};
+
+EditorWrapper.PropTypes = {
+  name: PropTypes.string,
+  tab: PropTypes.object,
+}
+
+export default EditorWrapper;
+
+// export default connect(
+//   mapStateToProps,
+//   dispatch => ({
+//     actions: bindActionCreators(ResizeActions, dispatch)
+//   })
+// )(EditorWrapper)

app/components/EditorWrapper/reducer.js

@@ -0,0 +1,22 @@
+/* @flow weak */
+import { handleActions } from 'redux-actions'
+
+import {
+  EDITOR_RESIZE,
+} from './actions'
+
+const defaultState = {
+  leftGrow: 1,
+  rightGrow: 1,
+  previewFullScreen: false,
+  showPreview: false
+};
+
+export default handleActions({
+  [EDITOR_RESIZE]: (state, action) => {
+    const { sectionId, dX, dY } = action.payload;
+    console.log(sectionId, dX, dY);
+    return state;
+  }
+}, defaultState);
+

app/components/MarkdownEditor/actions.js

@@ -0,0 +1,26 @@
+export const MARKDOWN_EDITOR_RESIZE = 'EDITOR_RESIZE';
+export const MARKDOWN_EDITOR_TOGGLE_PREVIEW = 'MARKDOWN_EDITOR_TOGGLE_PREVIEW';
+export const MARKDOWN_EDITOR_TOGGLE_SIZE = 'MARKDOWN_EDITOR_TOGGLE_SIZE';
+
+
+export const editorResize = (item, dX, dY) => {
+  return ({
+    type: MARKDOWN_EDITOR_RESIZE,
+    payload: {
+      dX, 
+      dY
+    },
+  });
+}
+
+export const togglePreview = () => {
+  return ({
+    type: MARKDOWN_EDITOR_TOGGLE_PREVIEW
+  });
+};
+
+export const togglePreviewSize = () => {
+  return ({
+    type: MARKDOWN_EDITOR_TOGGLE_SIZE
+  });
+};

app/components/MarkdownEditor/index.jsx

@@ -0,0 +1,148 @@
+import React, { PropTypes } from 'react';
+import AceEditor from '../AceEditor';
+import { markdown } from 'markdown';
+import { connect } from 'react-redux';
+import cx from 'classnames';
+import { bindActionCreators } from 'redux';
+import * as ResizeActions from './actions';
+
+const styles = {
+
+}
+const PreviewEditor = (content) => {
+  const makeHTMLComponent = (html) => React.DOM.div({ dangerouslySetInnerHTML: {__html: html} });
+  return (
+    <div name="markdown_preview">
+    { makeHTMLComponent(markdown.toHTML(content)) }
+    </div>);
+}
+
+
+const startResize = (sectionId, e, actions) => {
+   if (e.button !== 0) return; // do nothing unless left button pressed
+      e.preventDefault();
+      let oX = e.pageX; // origin x-distince
+      let oY = e.pageY; // origin y-distince
+      const handleResize = (e) => {
+        // get destination of difference of two distince x
+        let dX = oX - e.pageX;
+        // get destination of difference of two distince y
+        let dY = oY - e.pageY;
+        oX = e.pageX; // reset x
+        oY = e.pageY; // reset y
+        console.log('offset', dX, oX);
+        actions.editorResize(sectionId, dX, dY);  
+      }
+
+      const stopResize = () => {
+        window.document.removeEventListener('mousemove', handleResize);
+        window.document.removeEventListener('mouseup', stopResize);
+      }
+      window.document.addEventListener('mousemove', handleResize);
+      window.document.addEventListener('mouseup', stopResize);
+}
+
+const ResizeBar = ({ parentFlexDirection, sectionId, startResize, actions }) => {
+  var barClass = (parentFlexDirection == 'row') ? 'col-resize' : 'row-resize'
+  return (
+    <div className={cx('resize-bar', barClass)} style={{ position: 'relative' }}
+      onMouseDown={e => startResize(sectionId, e, actions)}
+    />)
+};
+
+const MarkdownEditor = ({
+  content,
+  leftGrow,
+  rightGrow,
+  showBigSize,
+  showPreview,
+  tab,
+  actions
+}) => {
+  return (
+    <div 
+      name="markdown_editor_container"
+      style={{
+          display:'flex',
+          width: '100%',
+          height: '100%'
+      }}>
+      <div name="toolbal_commands" style={{ 
+       position: 'absolute',
+       top: '10px', 
+       right: '20px',
+       zIndex: '3'
+      }}>      
+        {(showPreview && !showBigSize) ? (<i className='fa fa-expand' style={{color: '#999'}}
+           onClick={actions.togglePreviewSize}></i>) : ((showPreview) ? (
+             <i className='fa fa-compress' style={{color: '#999'}} onClick={actions.togglePreviewSize}></i>
+           ) : null)
+        }
+        {!showPreview ? <i className='fa fa-eye' style={{marginLeft: '10px', color: '#999'}} onClick={actions.togglePreview}></i> :
+        <i className='fa fa-eye-slash' style={{ marginLeft: '10px', color: '#999' }}onClick={actions.togglePreview}></i>
+      }
+      </div>
+      <div name="body" 
+        style={{
+        display:'flex',
+        width: '100%',
+        height: '100%'
+      }}>
+      {
+        !showBigSize ?  (
+      <div 
+        name="editor"
+        id="editor_preview_markdown_editor"
+        style={{
+          flexGrow: leftGrow,
+          flexShrink: 0,
+          flexBasis: 0,
+        }}>
+        {React.createElement(AceEditor, { tab })}
+      </div>): null
+    }
+      { (showPreview && !showBigSize) ? (
+          <ResizeBar 
+            sectionId={'editor_preview_markdown'}
+            parentFlexDirection={'row'}
+            startResize={startResize}
+            actions={actions} />) : null
+      }
+      {
+        showPreview ? (
+        <div
+          name="preview" 
+          id="editor_preview_preview"
+          style={{
+            flexGrow: rightGrow,
+            flexShrink: 0,
+            flexBasis: 0,        
+            backgroundColor: 'white',
+          }}>
+          {PreviewEditor(content)}
+        </div>) : null
+      }
+    </div>
+  </div>
+  ); 
+}
+
+MarkdownEditor.PropTypes = {
+  name: PropTypes.string,
+  tab: PropTypes.object,
+  actions: PropTypes.object,
+}
+
+const mapStateToProps = (state) => ({
+    leftGrow: state.MarkdownEditorState.leftGrow,
+    rightGrow: state.MarkdownEditorState.rightGrow,
+    showBigSize: state.MarkdownEditorState.showBigSize,
+    showPreview: state.MarkdownEditorState.showPreview,
+});
+
+export default connect(
+  mapStateToProps,
+  dispatch => ({
+    actions: bindActionCreators(ResizeActions, dispatch)
+  })
+)(MarkdownEditor)

app/components/MarkdownEditor/reducer.js

@@ -0,0 +1,40 @@
+/* @flow weak */
+import { handleActions } from 'redux-actions'
+
+import {
+  MARKDOWN_EDITOR_RESIZE,
+  MARKDOWN_EDITOR_TOGGLE_PREVIEW,
+  MARKDOWN_EDITOR_TOGGLE_SIZE
+} from './actions'
+
+const defaultState = {
+  leftGrow: 50,
+  rightGrow: 50,
+  showBigSize: false,
+  showPreview: true,
+};
+
+export default handleActions({
+  [MARKDOWN_EDITOR_RESIZE]: (state, action) => {
+    const { sectionId, dX, dY } = action.payload;
+    const leftDom = document.getElementById('editor_preview_markdown_editor');
+    const rightDom = document.getElementById('editor_preview_preview');
+    return ({
+      ...state,
+      leftGrow: state.leftGrow * (leftDom.offsetWidth - dX) / leftDom.offsetWidth,
+      rightGrow: state.rightGrow * (rightDom.offsetWidth + dX) / rightDom.offsetWidth,
+    });
+  },
+  [MARKDOWN_EDITOR_TOGGLE_PREVIEW]: (state, action) => {
+    return ({
+      ...state,
+      showPreview: !state.showPreview,
+    });
+  },
+  [MARKDOWN_EDITOR_TOGGLE_SIZE]: (state, action) => {
+    return ({
+      ...state,
+      showBigSize: !state.showBigSize,
+    });
+  },
+}, defaultState);

app/components/Pane/PaneAxis.jsx

@@ -1,11 +1,11 @@
 /* @flow weak */
-import React, { Component, PropTypes } from 'react'
-import { createStore } from 'redux'
-import { Provider, connect } from 'react-redux'
-import cx from 'classnames'
-import * as PaneActions from './actions'
-import TabContainer from '../Tab'
-import AceEditor from '../AceEditor'
+import React, { Component, PropTypes } from 'react';
+import { createStore } from 'redux';
+import { connect } from 'react-redux';
+import cx from 'classnames';
+import * as PaneActions from './actions';
+import TabContainer from '../Tab';
+import EditorWrapper from '../EditorWrapper';
 
 
 @connect(state => state.PaneState)
@@ -16,15 +16,26 @@ class Pane extends Component {
   }
 
   render () {
-    const {id, views, size, flexDirection, parentFlexDirection, resizingListeners, dropArea} = this.props
+    const { 
+      id,
+      views,
+      size,
+      flexDirection,
+      parentFlexDirection,
+      resizingListeners,
+      dropArea
+    } = this.props;
     var content
     if (views.length > 1) {
       content = <PaneAxis views={views} flexDirection={flexDirection} />
     } else if (typeof views[0] === 'string') {
-      var tabGroupId = views[0]
+      var tabGroupId = views[0];
       content = (
         <div className='pane'>
-          <TabContainer defaultContentClass={AceEditor} defaultContentType='editor' tabGroupId={tabGroupId}/>
+          <TabContainer 
+            defaultContentClass={EditorWrapper}
+            defaultContentType='editor'
+            tabGroupId={tabGroupId}/>
         </div>
       )
     } else {
@@ -57,6 +68,8 @@ class Pane extends Component {
     const handleResize = (e) => {
       var [dX, dY] = [oX - e.pageX, oY - e.pageY]
       ;[oX, oY] = [e.pageX, e.pageY]
+
+      console.log('offset', dX, oX);            
       this.props.dispatch(PaneActions.resize(sectionId, dX, dY))
       this.props.resizingListeners.forEach(listener => listener())
     }

app/components/Pane/index.js

@@ -1,3 +1,3 @@
 /* @flow weak */
-import PanesContainer from './PanesContainer'
-export default PanesContainer
+import PanesContainer from './PanesContainer';
+export default PanesContainer;