feat: Upgrade editor (#1227)

* WIP

* document migration

* fix: Handle clashing keyboard events

* fix: convert getSummary

* fix: parseDocumentIds

* lint

* fix: Remove unused plugin

* Move editor version to header
Add editor version check for API endpoints

* fix: Editor update auto-reload
Bump RME

* test

* bump rme

* Remove slate flow types, improve themeing, bump rme

* bump rme

* fix: parseDocumentIds returning duplicate ID's, improved regression tests

* test

* fix: Missing code styles

* lint

* chore: Upgrade v2 migration to use AST

* Bump RME

* Update welcome doc

* add highlight to keyboard shortcuts ref

* theming improvements

* fix: Code comments show as headings, closes #1255

* loop

* fix: TOC highlighting

* lint

* add: Automated backup of docs before migration

* Update embeds to new format

* fix: React warning

* bump to final editor version 10.0.0

* test

app/components/Editor/Editor.js

@@ -4,16 +4,16 @@ import { withRouter, type RouterHistory } from 'react-router-dom';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { lighten } from 'polished';
-import styled, { withTheme, createGlobalStyle } from 'styled-components';
+import styled, { withTheme } from 'styled-components';
 import RichMarkdownEditor from 'rich-markdown-editor';
-import Placeholder from 'rich-markdown-editor/lib/components/Placeholder';
 import { uploadFile } from 'utils/uploadFile';
 import isInternalUrl from 'utils/isInternalUrl';
 import Tooltip from 'components/Tooltip';
 import UiStore from 'stores/UiStore';
-import Embed from './Embed';
 import embeds from '../../embeds';
 
+const EMPTY_ARRAY = [];
+
 type Props = {
   id: string,
   defaultValue?: string,
@@ -65,37 +65,17 @@ class Editor extends React.Component<Props> {
     this.props.ui.showToast(message);
   };
 
-  getLinkComponent = node => {
-    if (this.props.disableEmbeds) return;
-
-    const url = node.data.get('href');
-    const keys = Object.keys(embeds);
-
-    for (const key of keys) {
-      const component = embeds[key];
-
-      for (const host of component.ENABLED) {
-        const matches = url.match(host);
-        if (matches) return Embed;
-      }
-    }
-  };
-
   render() {
     return (
-      <React.Fragment>
-        <PrismStyles />
-        <StyledEditor
-          ref={this.props.forwardedRef}
-          uploadImage={this.onUploadImage}
-          onClickLink={this.onClickLink}
-          onShowToast={this.onShowToast}
-          getLinkComponent={this.getLinkComponent}
-          tooltip={EditorTooltip}
-          toc={false}
-          {...this.props}
-        />
-      </React.Fragment>
+      <StyledEditor
+        ref={this.props.forwardedRef}
+        uploadImage={this.onUploadImage}
+        onClickLink={this.onClickLink}
+        onShowToast={this.onShowToast}
+        embeds={this.props.disableEmbeds ? EMPTY_ARRAY : embeds}
+        tooltip={EditorTooltip}
+        {...this.props}
+      />
     );
   }
 }
@@ -108,17 +88,6 @@ const StyledEditor = styled(RichMarkdownEditor)`
     transition: ${props => props.theme.backgroundTransition};
   }
 
-  p {
-    ${Placeholder} {
-      visibility: hidden;
-    }
-  }
-  p:nth-child(1):last-child {
-    ${Placeholder} {
-      visibility: visible;
-    }
-  }
-
   p {
     a {
       color: ${props => props.theme.link};
@@ -131,157 +100,6 @@ const StyledEditor = styled(RichMarkdownEditor)`
       }
     }
   }
-
-  h1:first-child,
-  h2:first-child,
-  h3:first-child,
-  h4:first-child,
-  h5:first-child,
-  h6:first-child {
-    margin-top: 0;
-  }
-`;
-
-/*
-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)
-*/
-const PrismStyles = createGlobalStyle`
-  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;
-  }
 `;
 
 const EditorTooltip = ({ children, ...props }) => (