MobX based editing

src/components/Document/Document.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { observer } from 'mobx-react';
 import moment from 'moment';
 import marked from 'marked';
 
@@ -7,6 +8,17 @@ import PublishingInfo from 'components/PublishingInfo';
 
 import styles from './Document.scss';
 
+const DocumentHtml = observer((props) => {
+  return (
+    <div
+      className={ styles.document }
+      dangerouslySetInnerHTML={{ __html: props.html }}
+      { ...props }
+    />
+  );
+});
+
+@observer
 class Document extends React.Component {
   static propTypes = {
     document: React.PropTypes.object.isRequired,
@@ -20,13 +32,13 @@ class Document extends React.Component {
           name={ this.props.document.user.name }
           timestamp={ this.props.document.createdAt }
         />
-        <div
-          className={ styles.document }
-          dangerouslySetInnerHTML={{ __html: this.props.document.html }}
-        />
+        <DocumentHtml html={ this.props.document.html } />
       </div>
     );
   }
 };
 
 export default Document;
+export {
+  DocumentHtml
+};

src/components/Document/index.js

@@ -1,2 +1,6 @@
-import Document from './Document';
+import Document, { DocumentHtml } from './Document';
+
 export default Document;
+export {
+  DocumentHtml,
+};

src/components/DropdownMenu/DropdownMenu.scss

@@ -16,7 +16,7 @@
 
   .menu {
     position: absolute;
-    top: 42px;
+    top: $headerHeight;
     right: 0;
     z-index: 1000;
     border: 1px solid #eee;
@@ -28,8 +28,10 @@
 .menuItem {
   margin: 0;
   padding: 5px 10px;
+  height: 24px;
+
   display: flex;
-  justify-content: flex-start;
+  justify-content: space-between;
   align-items: center;
   cursor: pointer;
 

src/components/Layout/Layout.scss

@@ -23,7 +23,7 @@
   align-items: center;
   padding: 0 20px;
 
-  height: 42px;
+  height: $headerHeight;
   border-bottom: 1px solid #eee;
 
   font-size: 14px;

src/components/MarkdownEditor/MarkdownEditor.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { observer } from 'mobx-react';
 import Codemirror from 'react-codemirror';
 import 'codemirror/mode/gfm/gfm';
 import 'codemirror/mode/javascript/javascript';
@@ -13,6 +14,7 @@ import './codemirror.scss';
 
 import { client } from '../../utils/ApiClient';
 
+@observer
 class MarkdownAtlas extends React.Component {
   static propTypes = {
     text: React.PropTypes.string,
@@ -111,6 +113,7 @@ class MarkdownAtlas extends React.Component {
       matchBrackets: true,
       lineWrapping: true,
       viewportMargin: Infinity,
+      scrollbarStyle: 'null',
       theme: 'atlas',
       extraKeys: {
         Enter: 'newlineAndIndentContinueMarkdownList',

src/components/MarkdownEditor/components/ClickablePadding/ClickablePadding.scss

@@ -1,5 +1,5 @@
 .container {
-  padding-top: 100px;
+  padding-top: 50px;
   cursor: text;
 }
 

src/components/Preview/index.js

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

src/components/Switch.js

@@ -0,0 +1,69 @@
+import React from 'react'
+import { Base } from 'rebass'
+
+/**
+ * Binary toggle switch component
+ */
+
+const Switch = ({
+  checked,
+  ...props
+}) => {
+  const scale = '18';
+  const colors = {
+    success: '#2196F3',
+    white: '#fff',
+  };
+  const borderColor = '#2196F3';
+
+
+  const color = checked ? colors.success : borderColor
+  const transform = checked ? `translateX(${scale * 0.5}px)` : 'translateX(0)'
+
+  const sx = {
+    root: {
+      display: 'inline-flex',
+      width: scale * 1.5,
+      height: scale,
+      color,
+      backgroundColor: checked ? 'currentcolor' : null,
+      borderRadius: 99999,
+      boxShadow: 'inset 0 0 0 2px',
+      cursor: 'pointer'
+    },
+    dot: {
+      width: scale,
+      height: scale,
+      transitionProperty: 'transform, color',
+      transitionDuration: '.1s',
+      transitionTimingFunction: 'ease-out',
+      transform,
+      boxShadow: 'inset 0 0 0 2px',
+      borderRadius: 99999,
+      color,
+      backgroundColor: colors.white
+    }
+  }
+
+  return (
+    <Base
+      {...props}
+      className='Switch'
+      role='checkbox'
+      aria-checked={checked}
+      baseStyle={sx.root}>
+      <div style={sx.dot} />
+    </Base>
+  )
+}
+
+Switch.propTypes = {
+  /** Sets the Switch to an active style */
+  checked: React.PropTypes.bool
+}
+
+Switch.contextTypes = {
+  rebass: React.PropTypes.object
+}
+
+export default Switch