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>
-        <code {...attributes}>
+      <Pre className={`language-${language}`}>
+        <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) => (