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
2020-05-19 20:39:34 -07:00
parent 400a1c87bb
commit 9274005cbb
97 changed files with 1199 additions and 3266 deletions
--- a/shared/styles/prism.css
+++ b/shared/styles/prism.css
@@ -1,141 +0,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)
-
-*/
-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;
-}
--- a/shared/styles/theme.js
+++ b/shared/styles/theme.js
@@ -46,6 +46,8 @@ export const base = {
  ...spacing,
  fontFamily:
    "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen, Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif",
+  fontFamilyMono:
+    "'SFMono-Regular',Consolas,'Liberation Mono', Menlo, Courier,monospace",
  fontWeight: 400,
  backgroundTransition: 'background 100ms ease-in-out',
  zIndex: 100,
@@ -53,6 +55,31 @@ export const base = {
  selected: colors.primary,
  buttonBackground: colors.primary,
  buttonText: colors.white,
+  textHighlight: '#B3E7FF',
+
+  codeComment: '#6a737d',
+  codePunctuation: '#5e6687',
+  codeNumber: '#d73a49',
+  codeProperty: '#c08b30',
+  codeTag: '#3d8fd1',
+  codeString: '#032f62',
+  codeSelector: '#6679cc',
+  codeAttr: '#c76b29',
+  codeEntity: '#22a2c9',
+  codeKeyword: '#d73a49',
+  codeFunction: '#6f42c1',
+  codeStatement: '#22a2c9',
+  codePlaceholder: '#3d8fd1',
+  codeInserted: '#202746',
+  codeImportant: '#c94922',
+
+  blockToolbarBackground: colors.white,
+  blockToolbarTrigger: colors.slate,
+  blockToolbarTriggerIcon: colors.white,
+  blockToolbarItem: colors.almostBlack,
+  blockToolbarText: colors.almostBlack,
+  blockToolbarHoverBackground: colors.slateLight,
+  blockToolbarDivider: colors.slateLight,

  breakpoints: {
    mobile: 0, // targeting all devices
@@ -102,11 +129,6 @@ export const light = {
  tooltipBackground: colors.almostBlack,
  tooltipText: colors.white,

-  blockToolbarBackground: colors.smoke,
-  blockToolbarTrigger: colors.slate,
-  blockToolbarTriggerIcon: colors.white,
-  blockToolbarItem: colors.almostBlack,
-
  quote: colors.slateLight,
  codeBackground: colors.smoke,
  codeBorder: colors.smokeDark,
@@ -121,7 +143,7 @@ export const dark = {

  link: colors.almostWhite,
  text: colors.almostWhite,
-  textSecondary: lighten(0.2, colors.slate),
+  textSecondary: lighten(0.1, colors.slate),
  textTertiary: colors.slate,
  placeholder: darken(0.5, '#B1BECC'),

@@ -154,14 +176,10 @@ export const dark = {
  tooltipBackground: colors.white,
  tooltipText: colors.lightBlack,

-  blockToolbarBackground: colors.white,
-  blockToolbarTrigger: colors.almostWhite,
-  blockToolbarTriggerIcon: colors.almostBlack,
-  blockToolbarItem: colors.lightBlack,
-
  quote: colors.almostWhite,
-  codeBackground: colors.almostBlack,
+  codeBackground: colors.black,
  codeBorder: colors.black50,
+  codeString: '#3d8fd1',
  embedBorder: colors.black50,
  horizontalRule: darken(0.2, colors.slate),
 };
--- a/shared/utils/getHeadingsForText.js
+++ b/shared/utils/getHeadingsForText.js
@@ -1,28 +0,0 @@
-// @flow
-import { filter } from 'lodash';
-import slugify from 'shared/utils/slugify';
-import unescape from 'shared/utils/unescape';
-
-export default function getHeadingsForText(
-  text: string
-): { level: number, title: string, slug: string }[] {
-  const regex = /^(#{1,6})\s(.*)$/gm;
-
-  let match;
-  let output = [];
-  while ((match = regex.exec(text)) !== null) {
-    if (!match) continue;
-
-    const level = match[1].length;
-    const title = unescape(match[2]);
-
-    let slug = slugify(title);
-    const existing = filter(output, { slug });
-    if (existing.length) {
-      slug = `${slug}-${existing.length}`;
-    }
-    output.push({ level, title, slug });
-  }
-
-  return output;
-}
--- a/shared/utils/getHeadingsForText.test.js
+++ b/shared/utils/getHeadingsForText.test.js
@@ -1,23 +0,0 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
-import getHeadingsForText from './getHeadingsForText';
-
-it('should return an array of document headings', () => {
-  const response = getHeadingsForText(`
-# Header
-  
-## Subheading
-`);
-
-  expect(response.length).toBe(2);
-  expect(response[0].level).toBe(1);
-  expect(response[0].title).toBe('Header');
-  expect(response[1].level).toBe(2);
-  expect(response[1].title).toBe('Subheading');
-});
-
-it('should unescape special characters', () => {
-  const response = getHeadingsForText(`# Header <\\>`);
-
-  expect(response.length).toBe(1);
-  expect(response[0].title).toBe('Header <>');
-});
--- a/shared/utils/parseDocumentIds.js
+++ b/shared/utils/parseDocumentIds.js
@@ -1,29 +1,39 @@
 // @flow
-import MarkdownSerializer from 'slate-md-serializer';
-const Markdown = new MarkdownSerializer();
+import { parser } from 'rich-markdown-editor';

 export default function parseDocumentIds(text: string): string[] {
-  const value = Markdown.deserialize(text);
+  const value = parser.parse(text);
  let links = [];

  function findLinks(node) {
-    if (node.type === 'link') {
-      const href = node.data.get('href');
+    // get text nodes
+    if (node.type.name === 'text') {
+      // get marks for text nodes
+      node.marks.forEach(mark => {
+        // any of the marks links?
+        if (mark.type.name === 'link') {
+          const { href } = mark.attrs;
+          // any of the links to other docs?
+          if (href.startsWith('/doc')) {
+            const tokens = href.replace(/\/$/, '').split('/');
+            const lastToken = tokens[tokens.length - 1];

-      if (href.startsWith('/doc')) {
-        const tokens = href.replace(/\/$/, '').split('/');
-        const lastToken = tokens[tokens.length - 1];
-        links.push(lastToken);
-      }
+            // don't return the same link more than once
+            if (!links.includes(lastToken)) {
+              links.push(lastToken);
+            }
+          }
+        }
+      });
    }

-    if (!node.nodes) {
+    if (!node.content.size) {
      return;
    }

-    node.nodes.forEach(findLinks);
+    node.content.descendants(findLinks);
  }

-  findLinks(value.document);
+  findLinks(value);
  return links;
 }
--- a/shared/utils/parseDocumentIds.test.js
+++ b/shared/utils/parseDocumentIds.test.js
@@ -1,20 +1,38 @@
 /* eslint-disable flowtype/require-valid-file-annotation */
 import parseDocumentIds from './parseDocumentIds';

-it('should return an array of document ids', () => {
+it('should not return non links', () => {
  expect(parseDocumentIds(`# Header`).length).toBe(0);
-  expect(
-    parseDocumentIds(`# Header
+});
+
+it('should return an array of document ids', () => {
+  const result = parseDocumentIds(`# Header
  
-  [title](/doc/test-456733)
-  `)[0]
-  ).toBe('test-456733');
+  [internal](/doc/test-456733)
+  `);
+
+  expect(result.length).toBe(1);
+  expect(result[0]).toBe('test-456733');
+});
+
+it('should not return duplicate document ids', () => {
+  expect(parseDocumentIds(`# Header`).length).toBe(0);
+
+  const result = parseDocumentIds(`# Header
+  
+  [internal](/doc/test-456733)
+
+  [another link to the same doc](/doc/test-456733)
+  `);
+
+  expect(result.length).toBe(1);
+  expect(result[0]).toBe('test-456733');
 });

 it('should not return non document links', () => {
-  expect(parseDocumentIds(`[title](http://www.google.com)`).length).toBe(0);
+  expect(parseDocumentIds(`[google](http://www.google.com)`).length).toBe(0);
 });

 it('should not return non document relative links', () => {
-  expect(parseDocumentIds(`[title](/developers)`).length).toBe(0);
+  expect(parseDocumentIds(`[relative](/developers)`).length).toBe(0);
 });