Slate editor (#38)

* WIP: Slate editor * WIP * Focus at start / end working * ah ha * Super basic floating toolbar * Nested list editing * Pulling more logic into plugins * inline code markdown * Backspace at end of code block should remove mark * Ensure there is always an empty line at editor end * Add keyboard shortcuts for bold, italic, underline * Add strikethrough shortcode and toolbar * Toolbar to declarative Fixed paragraph styling Removed unused stuffs * Super basic link editing * Split Toolbar, now possible to edit and remove links * Add new link to selection from toolbar working * Ensure toolbar doesn't extend off screen * Fix minor js issues, disable formatting of document title * Boom, icons * Remove codemirror, fix MD parsing issues * CMD+S now saves inplace * Add --- shortcut for horizontal rule * Improved styling for link editor * Add header anchors in readOnly * More readable core text color * Restored image file uploading 🎉 * Add support for inline md syntax, ** __ etc * Centered * Flooooow * Checklist support * Upgrade edit list plugin * Finally. Allow keydown within rich textarea * Update Markdown serializer * Cleanup, remove async editor loading * Editor > MarkdownEditor Fixed unsaved changes warning triggered when all changes are saved * MOAR typing * Combine edit and view * Fixed checkboxes still editable in readOnly * wip * Breadcrumb Restored scroll * Move document scene actions to menu * Added: Support for code blocks, syntax highlighting * Cleanup * > styled component * Prevent CMD+Enter from adding linebreak * Show image uploading in layout activity indicator * Upgrade editor deps * Improve link toolbar. Only one scenario where it's not working now
2017-05-17 19:36:31 -07:00
parent 7b16d3e5e2
commit ff17047791
84 changed files with 2531 additions and 1659 deletions
--- a/frontend/components/Sidebar/Sidebar.js
+++ b/frontend/components/Sidebar/Sidebar.js
@ -0,0 +1,82 @@
+// @flow
+import React from 'react';
+import { observer } from 'mobx-react';
+
+import { Flex } from 'reflexbox';
+import Tree from 'components/Tree';
+import Separator from './components/Separator';
+
+import styles from './Sidebar.scss';
+import classNames from 'classnames/bind';
+const cx = classNames.bind(styles);
+
+import SidebarStore from './SidebarStore';
+
+type Props = {
+  open?: boolean,
+  onToggle: Function,
+  navigationTree: Object,
+  onNavigationUpdate: Function,
+  onNodeCollapse: Function,
+};
+
+@observer class Sidebar extends React.Component {
+  props: Props;
+  store: SidebarStore;
+
+  constructor(props: Props) {
+    super(props);
+
+    this.store = new SidebarStore();
+  }
+
+  toggleEdit = (e: MouseEvent) => {
+    e.preventDefault();
+    this.store.toggleEdit();
+  };
+
+  render() {
+    return (
+      <Flex>
+        {this.props.open &&
+          <Flex column className={cx(styles.sidebar)}>
+            <Flex auto className={cx(styles.content)}>
+              <Tree
+                paddingLeft={10}
+                tree={this.props.navigationTree}
+                allowUpdates={this.store.isEditing}
+                onChange={this.props.onNavigationUpdate}
+                onCollapse={this.props.onNodeCollapse}
+              />
+            </Flex>
+            <Flex auto className={styles.actions}>
+              {this.store.isEditing &&
+                <span className={styles.action}>
+                  Drag & drop to organize <Separator />&nbsp;
+                </span>}
+              <span
+                role="button"
+                onClick={this.toggleEdit}
+                className={cx(styles.action, { active: this.store.isEditing })}
+              >
+                {!this.store.isEditing ? 'Organize documents' : 'Done'}
+              </span>
+            </Flex>
+          </Flex>}
+        <div
+          onClick={this.props.onToggle}
+          className={cx(styles.sidebarToggle, { active: this.store.isEditing })}
+          title="Toggle sidebar (Cmd+/)"
+        >
+          <img
+            src={require('assets/icons/menu.svg')}
+            className={styles.menuIcon}
+            alt="Menu"
+          />
+        </div>
+      </Flex>
+    );
+  }
+}
+
+export default Sidebar;