Feature/lazy load components (#590)

src/components/editor/app-bar/app-bar.tsx

@@ -9,12 +9,12 @@ import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
 import { ShowIf } from '../../common/show-if/show-if'
 import { SignInButton } from '../../landing-layout/navigation/sign-in-button'
 import { UserDropdown } from '../../landing-layout/navigation/user-dropdown'
-import { SyncScrollButtons } from './sync-scroll-buttons/sync-scroll-buttons'
 import { EditorPathParams } from '../editor'
 import { DarkModeButton } from './dark-mode-button'
 import { EditorViewMode } from './editor-view-mode'
 import { HelpButton } from './help-button/help-button'
 import { NavbarBranding } from './navbar-branding'
+import { SyncScrollButtons } from './sync-scroll-buttons/sync-scroll-buttons'
 
 export const AppBar: React.FC = () => {
   const { t } = useTranslation()

src/components/editor/app-bar/help-button/links.tsx

@@ -2,10 +2,10 @@ import React from 'react'
 import { Col, Row } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
+import links from '../../../../links.json'
 import { ApplicationState } from '../../../../redux'
 import { TranslatedExternalLink } from '../../../common/links/translated-external-link'
 import { TranslatedInternalLink } from '../../../common/links/translated-internal-link'
-import links from '../../../../links.json'
 
 export const Links: React.FC = () => {
   useTranslation()

src/components/editor/app-bar/sync-scroll-buttons/buttonIcon.svg

@@ -1,19 +1,18 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="512"
-   height="512"
-   viewBox="0 0 135.46666 135.46666"
-   version="1.1"
-   id="svg8"
-   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
-   sodipodi:docname="buttonIcon.svg">
+        xmlns:dc="http://purl.org/dc/elements/1.1/"
+        xmlns:cc="http://creativecommons.org/ns#"
+        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+        xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+        width="512"
+        height="512"
+        viewBox="0 0 135.46666 135.46666"
+        version="1.1"
+        id="svg8"
+        inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
+        sodipodi:docname="buttonIcon.svg">
   <defs
      id="defs2" />
   <sodipodi:namedview

src/components/editor/document-bar/menus/export-menu.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Dropdown } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
-import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
 import links from '../../../../links.json'
+import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
 
 const ExportMenu: React.FC = () => {
   useTranslation()

src/components/editor/document-bar/revisions/revision-modal.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react'
-import { Alert, Col, ListGroup, Modal, Row, Button } from 'react-bootstrap'
+import { Alert, Button, Col, ListGroup, Modal, Row } from 'react-bootstrap'
 import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer'
 import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'

src/components/editor/editor-pane/autocompletion/code-block.ts

@@ -1,35 +1,38 @@
 import { Editor, Hint, Hints, Pos } from 'codemirror'
-import hljs from 'highlight.js'
 import { findWordAtCursor, Hinter, search } from './index'
 
 const allowedChars = /[`\w-_+]/
 const wordRegExp = /^```((\w|-|_|\+)*)$/
-const allSupportedLanguages = hljs.listLanguages().concat('csv', 'flow', 'html')
+let allSupportedLanguages: string[] = []
 
 const codeBlockHint = (editor: Editor): Promise< Hints| null > => {
-  return new Promise((resolve) => {
-    const searchTerm = findWordAtCursor(editor, allowedChars)
-    const searchResult = wordRegExp.exec(searchTerm.text)
-    if (searchResult === null) {
-      resolve(null)
-      return
-    }
-    const term = searchResult[1]
-    const suggestions = search(term, allSupportedLanguages)
-    const cursor = editor.getCursor()
-    if (!suggestions) {
-      resolve(null)
-    } else {
-      resolve({
-        list: suggestions.map((suggestion: string): Hint => ({
-          text: '```' + suggestion + '\n\n```\n',
-          displayText: suggestion
-        })),
-        from: Pos(cursor.line, searchTerm.start),
-        to: Pos(cursor.line, searchTerm.end)
-      })
-    }
-  })
+  return import(/* webpackChunkName: "highlight.js" */ 'highlight.js').then(hljs =>
+    new Promise((resolve) => {
+      const searchTerm = findWordAtCursor(editor, allowedChars)
+      const searchResult = wordRegExp.exec(searchTerm.text)
+      if (searchResult === null) {
+        resolve(null)
+        return
+      }
+      const term = searchResult[1]
+      if (allSupportedLanguages.length === 0) {
+        allSupportedLanguages = hljs.listLanguages().concat('csv', 'flow', 'html')
+      }
+      const suggestions = search(term, allSupportedLanguages)
+      const cursor = editor.getCursor()
+      if (!suggestions) {
+        resolve(null)
+      } else {
+        resolve({
+          list: suggestions.map((suggestion: string): Hint => ({
+            text: '```' + suggestion + '\n\n```\n',
+            displayText: suggestion
+          })),
+          from: Pos(cursor.line, searchTerm.start),
+          to: Pos(cursor.line, searchTerm.end)
+        })
+      }
+    }))
 }
 
 export const CodeBlockHinter: Hinter = {

src/components/editor/editor-pane/editor-pane.scss

@@ -1,8 +1,8 @@
-@import '../../../../node_modules/codemirror/lib/codemirror.css';
-@import '../../../../node_modules/codemirror/addon/display/fullscreen.css';
-@import '../../../../node_modules/codemirror/addon/dialog/dialog.css';
-@import '../../../../node_modules/codemirror/theme/neat.css';
-@import './one-dark.css';
+@import '../../../../node_modules/codemirror/lib/codemirror';
+@import '../../../../node_modules/codemirror/addon/display/fullscreen';
+@import '../../../../node_modules/codemirror/addon/dialog/dialog';
+@import '../../../../node_modules/codemirror/theme/neat';
+@import './one-dark';
 @import 'hints';
 
 .CodeMirror {

src/components/editor/editor-pane/tool-bar/emoji-picker/emoji-picker-button.tsx

@@ -3,8 +3,8 @@ import React, { Fragment, useState } from 'react'
 import { Button } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import { ForkAwesomeIcon } from '../../../../common/fork-awesome/fork-awesome-icon'
-import { EmojiPicker } from './emoji-picker'
 import { addEmoji } from '../utils/toolbarButtonUtils'
+import { EmojiPicker } from './emoji-picker'
 
 export interface EmojiPickerButtonProps {
   editor: CodeMirror.Editor

src/components/editor/editor-pane/tool-bar/emoji-picker/emoji-picker.scss

@@ -1,3 +1,5 @@
+@import '../../../../../../node_modules/emoji-mart/css/emoji-mart';
+
 .emoji-mart {
   position: absolute;
   z-index: 10000;

src/components/editor/editor-pane/tool-bar/emoji-picker/emoji-picker.tsx

@@ -1,12 +1,11 @@
 import { CustomEmoji, Data, EmojiData, NimblePicker } from 'emoji-mart'
-import 'emoji-mart/css/emoji-mart.css'
 import emojiData from 'emoji-mart/data/twitter.json'
 import React, { useRef } from 'react'
 import { useClickAway } from 'react-use'
 import { ShowIf } from '../../../../common/show-if/show-if'
 import './emoji-picker.scss'
-import { ForkAwesomeIcons } from './icon-names'
 import forkawesomeIcon from './forkawesome.png'
+import { ForkAwesomeIcons } from './icon-names'
 
 export interface EmojiPickerProps {
   show: boolean

src/components/editor/editor.tsx

@@ -145,3 +145,5 @@ export const Editor: React.FC = () => {
     </Fragment>
   )
 }
+
+export default Editor