Move star out of editor into documentpreview (#174)

* Move star out of editor into documentpreview

* 💚

frontend/components/Editor/Editor.js

@@ -1,6 +1,5 @@
 // @flow
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { Editor, Plain } from 'slate';
 import keydown from 'react-keydown';
@@ -24,11 +23,8 @@ type Props = {
   onChange: Function,
   onSave: Function,
   onCancel: Function,
-  onStar: Function,
-  onUnstar: Function,
   onImageUploadStart: Function,
   onImageUploadStop: Function,
-  starred: boolean,
   emoji: string,
   readOnly: boolean,
   heading?: ?React.Element<*>,
@@ -52,10 +48,7 @@ type KeyData = {
   constructor(props: Props) {
     super(props);
 
-    this.schema = createSchema({
-      onStar: props.onStar,
-      onUnstar: props.onUnstar,
-    });
+    this.schema = createSchema();
     this.plugins = createPlugins({
       onImageUploadStart: props.onImageUploadStart,
       onImageUploadStop: props.onImageUploadStop,
@@ -84,10 +77,6 @@ type KeyData = {
     }
   }
 
-  getChildContext() {
-    return { starred: this.props.starred };
-  }
-
   onChange = (state: State) => {
     this.setState({ state });
   };
@@ -207,7 +196,6 @@ type KeyData = {
           </HeaderContainer>
           <Toolbar state={this.state.state} onChange={this.onChange} />
           <Editor
-            key={this.props.starred}
             ref={ref => (this.editor = ref)}
             placeholder="Start with a title…"
             bodyPlaceholder="Insert witty platitude here"
@@ -232,10 +220,6 @@ type KeyData = {
   };
 }
 
-MarkdownEditor.childContextTypes = {
-  starred: PropTypes.bool,
-};
-
 const MaxWidth = styled(Flex)`
   max-width: 50em;
   height: 100%;

frontend/components/Editor/components/Heading.js

@@ -1,11 +1,9 @@
 // @flow
 import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { Document } from 'slate';
+import styled from 'styled-components';
 import _ from 'lodash';
 import slug from 'slug';
-import StarIcon from 'components/Icon/StarIcon';
 import type { Node, Editor } from '../types';
 import styles from '../Editor.scss';
 
@@ -14,46 +12,22 @@ type Props = {
   placeholder?: boolean,
   parent: Node,
   node: Node,
-  onStar?: Function,
-  onUnstar?: Function,
   editor: Editor,
   readOnly: boolean,
   component?: string,
 };
 
-type Context = {
-  starred?: boolean,
-};
-
 const Wrapper = styled.div`
+  display: inline;
   margin-left: ${props => (props.hasEmoji ? '-1.2em' : 0)}
 `;
 
-const StyledStar = styled(StarIcon)`
-  top: 3px;
-  position: relative;
-  margin-left: 4px;
-  opacity: ${props => (props.solid ? 1 : 0.25)};
-  transition: opacity 100ms ease-in-out;
-
-  &:hover {
-    opacity: 1;
-  }
-
-  svg {
-    width: 28px;
-    height: 28px;
-  }
-`;
-
-function Heading(props: Props, { starred }: Context) {
+function Heading(props: Props) {
   const {
     parent,
     placeholder,
     node,
     editor,
-    onStar,
-    onUnstar,
     readOnly,
     children,
     component = 'h1',
@@ -62,8 +36,7 @@ function Heading(props: Props, { starred }: Context) {
   const firstHeading = parentIsDocument && parent.nodes.first() === node;
   const showPlaceholder = placeholder && firstHeading && !node.text;
   const slugish = _.escape(`${component}-${slug(node.text)}`);
-  const showStar = readOnly && !!onStar;
-  const showHash = readOnly && !!slugish && !showStar;
+  const showHash = readOnly && !!slugish;
   const Component = component;
   const emoji = editor.props.emoji || '';
   const title = node.text.trim();
@@ -79,14 +52,8 @@ function Heading(props: Props, { starred }: Context) {
         </span>}
       {showHash &&
         <a name={slugish} className={styles.anchor} href={`#${slugish}`}>#</a>}
-      {showStar && starred && <a onClick={onUnstar}><StyledStar solid /></a>}
-      {showStar && !starred && <a onClick={onStar}><StyledStar /></a>}
     </Component>
   );
 }
 
-Heading.contextTypes = {
-  starred: PropTypes.bool,
-};
-
 export default Heading;

frontend/components/Editor/schema.js

@@ -9,12 +9,7 @@ import Paragraph from './components/Paragraph';
 import type { Props, Node, Transform } from './types';
 import styles from './Editor.scss';
 
-type Options = {
-  onStar: Function,
-  onUnstar: Function,
-};
-
-const createSchema = ({ onStar, onUnstar }: Options) => {
+const createSchema = () => {
   return {
     marks: {
       bold: (props: Props) => <strong>{props.children}</strong>,
@@ -44,9 +39,7 @@ const createSchema = ({ onStar, onUnstar }: Options) => {
       image: Image,
       link: Link,
       'list-item': ListItem,
-      heading1: (props: Props) => (
-        <Heading placeholder onStar={onStar} onUnstar={onUnstar} {...props} />
-      ),
+      heading1: (props: Props) => <Heading placeholder {...props} />,
       heading2: (props: Props) => <Heading component="h2" {...props} />,
       heading3: (props: Props) => <Heading component="h3" {...props} />,
       heading4: (props: Props) => <Heading component="h4" {...props} />,