Upgrade prettier

app/components/Editor/components/BlockInsert.js

@@ -126,20 +126,23 @@ const Trigger = styled.div`
   z-index: 1;
   opacity: 0;
   background-color: ${color.white};
-  transition: opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition: opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
+    transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
   line-height: 0;
   margin-left: -10px;
   box-shadow: inset 0 0 0 2px ${color.slate};
   border-radius: 100%;
-  transform: scale(.9);
+  transform: scale(0.9);
   cursor: pointer;
 
   &:hover {
     background-color: ${color.smokeDark};
   }
 
-  ${({ active }) => active && `
+  ${({ active }) =>
+    active &&
+    `
     transform: scale(1);
     opacity: .9;
-  `}
+  `};
 `;

app/components/Editor/components/ClickablePadding/ClickablePadding.js

@@ -16,7 +16,7 @@ const Container = styled.div`
   padding-top: 50px;
   cursor: ${({ onClick }) => (onClick ? 'text' : 'default')};
 
-  ${({ grow }) => grow && `flex-grow: 1;`}
+  ${({ grow }) => grow && `flex-grow: 1;`};
 `;
 
 export default ClickablePadding;

app/components/Editor/components/Code.js

@@ -12,16 +12,14 @@ export default function Code({ children, node, readOnly, attributes }: Props) {
     <Container {...attributes}>
       {readOnly && <CopyButton text={node.text} />}
       <Pre className={`language-${language}`}>
-        <code className={`language-${language}`}>
-          {children}
-        </code>
+        <code className={`language-${language}`}>{children}</code>
       </Pre>
     </Container>
   );
 }
 
 const Pre = styled.pre`
-  padding: .5em 1em;
+  padding: 0.5em 1em;
   background: ${color.smokeLight};
   border-radius: 4px;
   border: 1px solid ${color.smokeDark};

app/components/Editor/components/Contents.js

@@ -12,7 +12,8 @@ type Props = {
   state: State,
 };
 
-@observer class Contents extends Component {
+@observer
+class Contents extends Component {
   props: Props;
   @observable activeHeading: ?string;
 

app/components/Editor/components/CopyButton.js

@@ -6,7 +6,8 @@ import { color } from 'shared/styles/constants';
 import styled from 'styled-components';
 import CopyToClipboard from 'components/CopyToClipboard';
 
-@observer class CopyButton extends Component {
+@observer
+class CopyButton extends Component {
   @observable copied: boolean = false;
   copiedTimeout: ?number;
 

app/components/Editor/components/Heading.js

@@ -41,26 +41,29 @@ function Heading(props: Props) {
 
   return (
     <Component {...attributes} id={slugish}>
-      <Wrapper hasEmoji={startsWithEmojiAndSpace}>
-        {children}
-      </Wrapper>
-      {showPlaceholder &&
+      <Wrapper hasEmoji={startsWithEmojiAndSpace}>{children}</Wrapper>
+      {showPlaceholder && (
         <Placeholder contentEditable={false}>
           {editor.props.placeholder}
-        </Placeholder>}
-      {showHash && <Anchor name={slugish} href={`#${slugish}`}>#</Anchor>}
+        </Placeholder>
+      )}
+      {showHash && (
+        <Anchor name={slugish} href={`#${slugish}`}>
+          #
+        </Anchor>
+      )}
     </Component>
   );
 }
 
 const Wrapper = styled.div`
   display: inline;
-  margin-left: ${(props: Props) => (props.hasEmoji ? '-1.2em' : 0)}
+  margin-left: ${(props: Props) => (props.hasEmoji ? '-1.2em' : 0)};
 `;
 
 const Anchor = styled.a`
   visibility: hidden;
-  padding-left: .25em;
+  padding-left: 0.25em;
   color: #dedede;
 
   &:hover {

app/components/Editor/components/HorizontalRule.js

@@ -11,10 +11,11 @@ function HorizontalRule(props: Props) {
 }
 
 const StyledHr = styled.hr`
-  padding-top: .75em;
+  padding-top: 0.75em;
   margin: 0;
   border: 0;
-  border-bottom: 1px solid ${props => (props.active ? color.slate : color.slateLight)};
+  border-bottom: 1px solid
+    ${props => (props.active ? color.slate : color.slateLight)};
 `;
 
 export default HorizontalRule;

app/components/Editor/components/Image.js

@@ -35,26 +35,28 @@ class Image extends Component {
 
     return (
       <CenteredImage>
-        {!readOnly
-          ? <StyledImg
-              {...attributes}
-              src={src}
-              alt={caption}
-              active={active}
-              loading={loading}
-            />
-          : <ImageZoom
-              image={{
-                src,
-                alt: caption,
-                style: {
-                  maxWidth: '100%',
-                },
-                ...attributes,
-              }}
-              shouldRespectMaxDimension
-            />}
-        {showCaption &&
+        {!readOnly ? (
+          <StyledImg
+            {...attributes}
+            src={src}
+            alt={caption}
+            active={active}
+            loading={loading}
+          />
+        ) : (
+          <ImageZoom
+            image={{
+              src,
+              alt: caption,
+              style: {
+                maxWidth: '100%',
+              },
+              ...attributes,
+            }}
+            shouldRespectMaxDimension
+          />
+        )}
+        {showCaption && (
           <Caption
             type="text"
             placeholder="Write a caption"
@@ -64,7 +66,8 @@ class Image extends Component {
             contentEditable={false}
             disabled={readOnly}
             tabIndex={-1}
-          />}
+          />
+        )}
       </CenteredImage>
     );
   }

app/components/Editor/components/InlineCode.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { color } from 'shared/styles/constants';
 
 const InlineCode = styled.code`
-  padding: .25em;
+  padding: 0.25em;
   background: ${color.smoke};
   border-radius: 4px;
   border: 1px solid ${color.smokeDark};

app/components/Editor/components/Link.js

@@ -31,8 +31,16 @@ export default function Link({ attributes, node, children, readOnly }: Props) {
   const path = getPathFromUrl(href);
 
   if (isOutlineUrl(href) && readOnly) {
-    return <InternalLink {...attributes} to={path}>{children}</InternalLink>;
+    return (
+      <InternalLink {...attributes} to={path}>
+        {children}
+      </InternalLink>
+    );
   } else {
-    return <a {...attributes} href={href} target="_blank">{children}</a>;
+    return (
+      <a {...attributes} href={href} target="_blank">
+        {children}
+      </a>
+    );
   }
 }

app/components/Editor/components/Paragraph.js

@@ -25,10 +25,11 @@ export default function Link({
   return (
     <p {...attributes}>
       {children}
-      {showPlaceholder &&
+      {showPlaceholder && (
         <Placeholder contentEditable={false}>
           {editor.props.bodyPlaceholder}
-        </Placeholder>}
+        </Placeholder>
+      )}
     </p>
   );
 }

app/components/Editor/components/Placeholder.js

@@ -7,5 +7,5 @@ export default styled.span`
   visibility: hidden;
   pointer-events: none;
   user-select: none;
-  color: #B1BECC;
+  color: #b1becc;
 `;

app/components/Editor/components/Toolbar/BlockToolbar.js

@@ -170,7 +170,7 @@ const Bar = styled(Flex)`
 
   &:before,
   &:after {
-    content: "";
+    content: '';
     position: absolute;
     left: -100%;
     width: 100%;

app/components/Editor/components/Toolbar/Toolbar.js

@@ -99,7 +99,9 @@ export default class Toolbar extends Component {
 
       const left =
         rect.left + window.scrollX - this.menu.offsetWidth / 2 + rect.width / 2;
-      data.top = `${Math.round(rect.top + window.scrollY - this.menu.offsetHeight)}px`;
+      data.top = `${Math.round(
+        rect.top + window.scrollY - this.menu.offsetHeight
+      )}px`;
       data.left = `${Math.round(Math.max(padding, left))}px`;
       this.setState(data);
     }
@@ -120,17 +122,15 @@ export default class Toolbar extends Component {
     return (
       <Portal>
         <Menu active={this.state.active} innerRef={this.setRef} style={style}>
-          {link &&
-            <LinkToolbar
-              {...this.props}
-              link={link}
-              onBlur={this.handleBlur}
-            />}
-          {!link &&
+          {link && (
+            <LinkToolbar {...this.props} link={link} onBlur={this.handleBlur} />
+          )}
+          {!link && (
             <FormattingToolbar
               onCreateLink={this.handleFocus}
               {...this.props}
-            />}
+            />
+          )}
         </Menu>
       </Portal>
     );
@@ -144,16 +144,19 @@ const Menu = styled.div`
   top: -10000px;
   left: -10000px;
   opacity: 0;
-  background-color: #2F3336;
+  background-color: #2f3336;
   border-radius: 4px;
-  transform: scale(.95);
-  transition: opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transform: scale(0.95);
+  transition: opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
+    transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
   line-height: 0;
   height: 40px;
   min-width: 260px;
 
-  ${({ active }) => active && `
+  ${({ active }) =>
+    active &&
+    `
     transform: translateY(-6px) scale(1);
     opacity: 1;
-  `}
+  `};
 `;

app/components/Editor/components/Toolbar/components/DocumentResult.js

@@ -14,7 +14,9 @@ type Props = {
 function DocumentResult({ document, ...rest }: Props) {
   return (
     <ListItem {...rest} href="">
-      <i><NextIcon light /></i>
+      <i>
+        <NextIcon light />
+      </i>
       {document.title}
     </ListItem>
   );

app/components/Editor/components/Toolbar/components/FormattingToolbar.js

@@ -42,7 +42,10 @@ class FormattingToolbar extends Component {
     ev.preventDefault();
     let { state } = this.props;
 
-    state = state.transform().toggleMark(type).apply();
+    state = state
+      .transform()
+      .toggleMark(type)
+      .apply();
     this.props.onChange(state);
   };
 
@@ -50,7 +53,10 @@ class FormattingToolbar extends Component {
     ev.preventDefault();
     let { state } = this.props;
 
-    state = state.transform().setBlock(type).apply();
+    state = state
+      .transform()
+      .setBlock(type)
+      .apply();
     this.props.onChange(state);
   };
 
@@ -59,7 +65,10 @@ class FormattingToolbar extends Component {
     ev.stopPropagation();
     let { state } = this.props;
     const data = { href: '' };
-    state = state.transform().wrapInline({ type: 'link', data }).apply();
+    state = state
+      .transform()
+      .wrapInline({ type: 'link', data })
+      .apply();
     this.props.onChange(state);
     this.props.onCreateLink();
   };
@@ -109,8 +118,8 @@ class FormattingToolbar extends Component {
 const Separator = styled.div`
   height: 100%;
   width: 1px;
-  background: #FFF;
-  opacity: .2;
+  background: #fff;
+  opacity: 0.2;
   display: inline-block;
   margin-left: 10px;
 `;

app/components/Editor/components/Toolbar/components/LinkToolbar.js

@@ -39,7 +39,8 @@ class LinkToolbar extends Component {
     this.isEditing = !!this.props.link.data.get('href');
   }
 
-  @action search = async () => {
+  @action
+  search = async () => {
     this.isFetching = true;
 
     if (this.searchTerm) {
@@ -144,15 +145,16 @@ class LinkToolbar extends Component {
             onChange={this.onChange}
             autoFocus
           />
-          {this.isEditing &&
+          {this.isEditing && (
             <ToolbarButton onMouseDown={this.openLink}>
               <OpenIcon light />
-            </ToolbarButton>}
+            </ToolbarButton>
+          )}
           <ToolbarButton onMouseDown={this.removeLink}>
             {this.isEditing ? <TrashIcon light /> : <CloseIcon light />}
           </ToolbarButton>
         </LinkEditor>
-        {hasResults &&
+        {hasResults && (
           <SearchResults>
             <ArrowKeyNavigation
               mode={ArrowKeyNavigation.mode.VERTICAL}
@@ -165,7 +167,8 @@ class LinkToolbar extends Component {
                 return (
                   <DocumentResult
                     innerRef={ref =>
-                      index === 0 && this.setFirstDocumentRef(ref)}
+                      index === 0 && this.setFirstDocumentRef(ref)
+                    }
                     document={document}
                     key={document.id}
                     onClick={ev => this.selectDocument(ev, document)}
@@ -173,14 +176,15 @@ class LinkToolbar extends Component {
                 );
               })}
             </ArrowKeyNavigation>
-          </SearchResults>}
+          </SearchResults>
+        )}
       </span>
     );
   }
 }
 
 const SearchResults = styled.div`
-  background: #2F3336;
+  background: #2f3336;
   position: absolute;
   top: 100%;
   width: 100%;
@@ -199,7 +203,7 @@ const LinkEditor = styled(Flex)`
 
 const Input = styled.input`
   font-size: 15px;
-  background: rgba(255,255,255,.1);
+  background: rgba(255, 255, 255, 0.1);
   border-radius: 2px;
   padding: 4px 8px;
   border: 0;

app/components/Editor/components/Toolbar/components/ToolbarButton.js

@@ -12,7 +12,7 @@ export default styled.button`
   background: none;
   transition: opacity 100ms ease-in-out;
   padding: 0;
-  opacity: .7;
+  opacity: 0.7;
 
   &:first-child {
     margin-left: 0;
@@ -22,5 +22,5 @@ export default styled.button`
     opacity: 1;
   }
 
-  ${({ active }) => active && 'opacity: 1;'}
+  ${({ active }) => active && 'opacity: 1;'};
 `;