Merge branch 'master' into toc

frontend/components/Editor/Editor.js

@@ -82,6 +82,7 @@ type KeyData = {
   };
 
   handleDrop = async (ev: SyntheticEvent) => {
+    if (this.props.readOnly) return;
     // check if this event was already handled by the Editor
     if (ev.isDefaultPrevented()) return;
 
@@ -91,7 +92,9 @@ type KeyData = {
 
     const files = getDataTransferFiles(ev);
     for (const file of files) {
-      await this.insertImageFile(file);
+      if (file.type.startsWith('image/')) {
+        await this.insertImageFile(file);
+      }
     }
   };
 
@@ -245,22 +248,6 @@ const StyledEditor = styled(Editor)`
   h5,
   h6 {
     font-weight: 500;
-
-    .anchor {
-      visibility: hidden;
-      color: #dedede;
-      padding-left: 0.25em;
-    }
-
-    &:hover {
-      .anchor {
-        visibility: visible;
-
-        &:hover {
-          color: #cdcdcd;
-        }
-      }
-    }
   }
 
   h1:first-of-type {

frontend/components/Editor/components/Code.js

@@ -6,11 +6,13 @@ import { color } from 'styles/constants';
 import type { Props } from '../types';
 
 export default function Code({ children, node, readOnly, attributes }: Props) {
+  const language = node.data.get('language') || 'javascript';
+
   return (
     <Container>
       {readOnly && <CopyButton text={node.text} />}
-      <Pre>
+      <Pre className={`language-${language}`}>
-        <code {...attributes}>
+        <code {...attributes} className={`language-${language}`}>
           {children}
         </code>
       </Pre>
@@ -20,7 +22,7 @@ export default function Code({ children, node, readOnly, attributes }: Props) {
 
 const Pre = styled.pre`
   padding: .5em 1em;
-  background: ${color.smoke};
+  background: ${color.smokeLight};
   border-radius: 4px;
   border: 1px solid ${color.smokeDark};
 

frontend/components/Editor/components/Heading.js

@@ -71,7 +71,10 @@ export const StyledHeading = styled(Heading)`
   position: relative;
 
   &:hover {
-    ${Anchor} { visibility: visible; }
+    ${Anchor} {
+      visibility: visible;
+      text-decoration: none;
+    }
   }
 `;
 export const Heading1 = (props: Props) => (

frontend/index.js

@@ -19,8 +19,7 @@ import 'normalize.css/normalize.css';
 import 'styles/base.css';
 import 'styles/fonts.css';
 import 'styles/transitions.css';
-import 'styles/prism-tomorrow.css';
+import 'styles/prism.css';
-import 'styles/hljs-github-gist.css';
 
 import Home from 'scenes/Home';
 import Dashboard from 'scenes/Dashboard';

frontend/scenes/Document/Document.js

@@ -27,7 +27,6 @@ import DocumentMenu from 'menus/DocumentMenu';
 import SaveAction from './components/SaveAction';
 import LoadingPlaceholder from 'components/LoadingPlaceholder';
 import Editor from 'components/Editor';
-import DropToImport from 'components/DropToImport';
 import LoadingIndicator from 'components/LoadingIndicator';
 import Collaborators from 'components/Collaborators';
 import CenteredContent from 'components/CenteredContent';
@@ -57,7 +56,6 @@ type Props = {
 
   @observable editCache: ?string;
   @observable newDocument: ?Document;
-  @observable isDragging = false;
   @observable isLoading = false;
   @observable isSaving = false;
   @observable notFound = false;
@@ -198,14 +196,6 @@ type Props = {
     this.props.history.push(url);
   };
 
-  onStartDragging = () => {
-    this.isDragging = true;
-  };
-
-  onStopDragging = () => {
-    this.isDragging = false;
-  };
-
   renderNotFound() {
     return <Search notFound />;
   }
@@ -226,11 +216,6 @@ type Props = {
     return (
       <Container column auto>
         {isMoving && document && <DocumentMove document={document} />}
-
-        {this.isDragging &&
-          <DropHere align="center" justify="center">
-            Drop files here to import into Atlas.
-          </DropHere>}
         {titleText && <PageTitle title={titleText} />}
         {this.isLoading && <LoadingIndicator />}
         {isFetching &&
@@ -239,73 +224,60 @@ type Props = {
           </CenteredContent>}
         {!isFetching &&
           document &&
-          <StyledDropToImport
+          <Flex justify="center" auto>
-            documentId={document.id}
+            <Prompt
-            history={this.props.history}
+              when={document.hasPendingChanges}
-            onDragEnter={this.onStartDragging}
+              message={DISCARD_CHANGES}
-            onDragLeave={this.onStopDragging}
+            />
-            onDrop={this.onStopDragging}
+            <Editor
-            disabled={this.isEditing}
+              key={document.id}
-          >
+              text={document.text}
-            <Flex justify="center" auto>
+              emoji={document.emoji}
-              <Prompt
+              onImageUploadStart={this.onImageUploadStart}
-                when={document.hasPendingChanges}
+              onImageUploadStop={this.onImageUploadStop}
-                message={DISCARD_CHANGES}
+              onChange={this.onChange}
-              />
+              onSave={this.onSave}
-              <Editor
+              onCancel={this.onDiscard}
-                key={document.id}
+              readOnly={!this.isEditing}
-                text={document.text}
+            />
-                emoji={document.emoji}
+            <Meta align="center" justify="flex-end" readOnly={!this.isEditing}>
-                onImageUploadStart={this.onImageUploadStart}
+              <Flex align="center">
-                onImageUploadStop={this.onImageUploadStop}
+                {!isNew &&
-                onChange={this.onChange}
+                  !this.isEditing &&
-                onSave={this.onSave}
+                  <Collaborators document={document} />}
-                onCancel={this.onDiscard}
+                <HeaderAction>
-                readOnly={!this.isEditing}
+                  {this.isEditing
-              />
+                    ? <SaveAction
-              <Meta
+                        isSaving={this.isSaving}
-                align="center"
+                        onClick={this.onSave.bind(this, true)}
-                justify="flex-end"
+                        disabled={
-                readOnly={!this.isEditing}
+                          !(this.document && this.document.allowSave) ||
-              >
+                            this.isSaving
-                <Flex align="center">
+                        }
-                  {!isNew &&
+                        isNew={!!isNew}
-                    !this.isEditing &&
+                      />
-                    <Collaborators document={document} />}
+                    : <a onClick={this.onClickEdit}>
-                  <HeaderAction>
+                        Edit
-                    {this.isEditing
-                      ? <SaveAction
-                          isSaving={this.isSaving}
-                          onClick={this.onSave.bind(this, true)}
-                          disabled={
-                            !(this.document && this.document.allowSave) ||
-                              this.isSaving
-                          }
-                          isNew={!!isNew}
-                        />
-                      : <a onClick={this.onClickEdit}>
-                          Edit
-                        </a>}
-                  </HeaderAction>
-                  {this.isEditing &&
-                    <HeaderAction>
-                      <a onClick={this.onDiscard}>Discard</a>
-                    </HeaderAction>}
-                  {!this.isEditing &&
-                    <HeaderAction>
-                      <DocumentMenu document={document} />
-                    </HeaderAction>}
-                  {!this.isEditing && <Separator />}
-                  <HeaderAction>
-                    {!this.isEditing &&
-                      <a onClick={this.onClickNew}>
-                        <NewDocumentIcon />
                       </a>}
-                  </HeaderAction>
+                </HeaderAction>
-                </Flex>
+                {this.isEditing &&
-              </Meta>
+                  <HeaderAction>
-            </Flex>
+                    <a onClick={this.onDiscard}>Discard</a>
-          </StyledDropToImport>}
+                  </HeaderAction>}
+                {!this.isEditing &&
+                  <HeaderAction>
+                    <DocumentMenu document={document} />
+                  </HeaderAction>}
+                {!this.isEditing && <Separator />}
+                <HeaderAction>
+                  {!this.isEditing &&
+                    <a onClick={this.onClickNew}>
+                      <NewDocumentIcon />
+                    </a>}
+                </HeaderAction>
+              </Flex>
+            </Meta>
+          </Flex>}
       </Container>
     );
   }
@@ -329,18 +301,6 @@ const HeaderAction = styled(Flex)`
   }
 `;
 
-const DropHere = styled(Flex)`
-  pointer-events: none;
-  position: fixed;
-  top: 0;
-  left: ${layout.sidebarWidth};
-  bottom: 0;
-  right: 0;
-  text-align: center;
-  background: rgba(255,255,255,.9);
-  z-index: 1;
-`;
-
 const Meta = styled(Flex)`
   align-items: flex-start;
   position: fixed;
@@ -361,11 +321,6 @@ const LoadingState = styled(LoadingPlaceholder)`
   margin: 90px 0;
 `;
 
-const StyledDropToImport = styled(DropToImport)`
-  display: flex;
-  flex: 1;
-`;
-
 export default withRouter(
   inject('ui', 'user', 'documents', 'collections')(DocumentScene)
 );

frontend/styles/base.css

@@ -101,11 +101,11 @@ samp {
 }
 code,
 samp {
-  font-size: 87.5%;
+  font-size: 85%;
   padding: 0.125em;
 }
 pre {
-  font-size: 87.5%;
+  font-size: 85%;
   overflow: scroll;
 }
 blockquote {

frontend/styles/hljs-github-gist.css

@@ -1,71 +0,0 @@
-/**
-  * GitHub Gist Theme
-  * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro
-  */
-
-.hljs {
-  display: block;
-  background: white;
-  padding: 0.5em;
-  color: #333333;
-  overflow-x: auto;
-}
-
-.hljs-comment,
-.hljs-meta {
-  color: #969896;
-}
-
-.hljs-string,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-strong,
-.hljs-emphasis,
-.hljs-quote {
-  color: #df5000;
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-type {
-  color: #a71d5d;
-}
-
-.hljs-literal,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-attribute {
-  color: #0086b3;
-}
-
-.hljs-section,
-.hljs-name {
-  color: #63a35c;
-}
-
-.hljs-tag {
-  color: #333333;
-}
-
-.hljs-title,
-.hljs-attr,
-.hljs-selector-id,
-.hljs-selector-class,
-.hljs-selector-attr,
-.hljs-selector-pseudo {
-  color: #795da3;
-}
-
-.hljs-addition {
-  color: #55a532;
-  background-color: #eaffea;
-}
-
-.hljs-deletion {
-  color: #bd2c00;
-  background-color: #ffecec;
-}
-
-.hljs-link {
-  text-decoration: underline;
-}

frontend/styles/prism-tomorrow.css

@@ -1,120 +0,0 @@
-/**
- * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
- * Based on https://github.com/chriskempson/tomorrow-theme
- * @author Rose Pritchard
- */
-
-code[class*='language-'],
-pre[class*='language-'] {
-  color: #ccc;
-  background: none;
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  line-height: 1.5;
-
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-
-/* Code blocks */
-pre[class*='language-'] {
-  padding: 1em;
-  margin: 0.5em 0;
-  overflow: auto;
-}
-
-:not(pre) > code[class*='language-'],
-pre[class*='language-'] {
-  background: #2d2d2d;
-}
-
-/* Inline code */
-:not(pre) > code[class*='language-'] {
-  padding: 0.1em;
-  border-radius: 0.3em;
-  white-space: normal;
-}
-
-.token.comment,
-.token.block-comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: #999;
-}
-
-.token.punctuation {
-  color: #ccc;
-}
-
-.token.tag,
-.token.attr-name,
-.token.namespace,
-.token.deleted {
-  color: #e2777a;
-}
-
-.token.function-name {
-  color: #6196cc;
-}
-
-.token.boolean,
-.token.number,
-.token.function {
-  color: #f08d49;
-}
-
-.token.property,
-.token.class-name,
-.token.constant,
-.token.symbol {
-  color: #f8c555;
-}
-
-.token.selector,
-.token.important,
-.token.atrule,
-.token.keyword,
-.token.builtin {
-  color: #cc99cd;
-}
-
-.token.string,
-.token.char,
-.token.attr-value,
-.token.regex,
-.token.variable {
-  color: #7ec699;
-}
-
-.token.operator,
-.token.entity,
-.token.url {
-  color: #67cdcc;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}
-
-.token.inserted {
-  color: green;
-}

frontend/styles/prism.css

@@ -0,0 +1,141 @@
+/*
+
+Based on Prism template by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/prism/)
+Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
+
+*/
+code[class*="language-"],
+pre[class*="language-"] {
+  -webkit-font-smoothing: initial;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  font-size: 13px;
+  line-height: 1.375;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+  color: #24292e;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #6a737d;
+}
+
+.token.punctuation {
+  color: #5e6687;
+}
+
+.token.namespace {
+  opacity: .7;
+}
+
+.token.operator,
+.token.boolean,
+.token.number {
+  color: #d73a49;
+}
+
+.token.property {
+  color: #c08b30;
+}
+
+.token.tag {
+  color: #3d8fd1;
+}
+
+.token.string {
+  color: #032f62;
+}
+
+.token.selector {
+  color: #6679cc;
+}
+
+.token.attr-name {
+  color: #c76b29;
+}
+
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #22a2c9;
+}
+
+.token.attr-value,
+.token.keyword,
+.token.control,
+.token.directive,
+.token.unit {
+  color: #d73a49;
+}
+
+.token.function {
+  color: #6f42c1;
+}
+
+.token.statement,
+.token.regex,
+.token.atrule {
+  color: #22a2c9;
+}
+
+.token.placeholder,
+.token.variable {
+  color: #3d8fd1;
+}
+
+.token.deleted {
+  text-decoration: line-through;
+}
+
+.token.inserted {
+  border-bottom: 1px dotted #202746;
+  text-decoration: none;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.important {
+  color: #c94922;
+}
+
+.token.entity {
+  cursor: help;
+}
+
+pre > code.highlight {
+  outline: 0.4em solid #c94922;
+  outline-offset: .4em;
+}