Merge branch 'master' into party-bugsa

client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.js

@@ -1,39 +1,15 @@
 import React from 'react';
 import QuestionBox from '../../../components/QuestionBox';
-import { Icon, Spinner } from 'coral-ui';
 import DefaultQuestionBoxIcon from '../../../components/DefaultQuestionBoxIcon';
 import cn from 'classnames';
 import styles from './QuestionBoxBuilder.css';
+import { Icon } from 'coral-ui';
+import MarkdownEditor from 'coral-framework/components/MarkdownEditor';
 
 const DefaultIcon = <DefaultQuestionBoxIcon className={styles.defaultIcon} />;
-
 const icons = [{ default: DefaultIcon }, 'forum', 'build', 'format_quote'];
 
 class QuestionBoxBuilder extends React.Component {
-  constructor() {
-    super();
-
-    this.state = {
-      loading: true,
-    };
-  }
-
-  componentWillMount() {
-    this.loadEditor();
-  }
-
-  async loadEditor() {
-    const {
-      default: MarkdownEditor,
-    } = await import(/* webpackChunkName: "markdownEditor" */
-    'coral-framework/components/MarkdownEditor');
-
-    return this.setState({
-      loading: false,
-      MarkdownEditor,
-    });
-  }
-
   render() {
     const {
       questionBoxIcon,
@@ -41,11 +17,6 @@ class QuestionBoxBuilder extends React.Component {
       onContentChange,
       onIconChange,
     } = this.props;
-    const { loading, MarkdownEditor } = this.state;
-
-    if (loading) {
-      return <Spinner />;
-    }
 
     return (
       <div className={styles.root}>

client/coral-framework/components/MarkdownEditor.js

@@ -1,154 +1,11 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import SimpleMDE from 'simplemde';
-import cn from 'classnames';
-import noop from 'lodash/noop';
-import styles from './MarkdownEditor.css';
+import { Spinner } from 'coral-ui';
+import Loadable from 'react-loadable';
 
-const config = {
-  status: false,
+const MarkdownEditor = Loadable({
+  loader: () =>
+    import(/* webpackChunkName: "markdownEditor" */
+    './loadable/MarkdownEditor'),
+  loading: Spinner,
+});
 
-  // Do not download fontAwesome icons as we replace them with
-  // material icons.
-  autoDownloadFontAwesome: false,
-
-  // Disable built-in spell checker as it is very rudimentary.
-  spellChecker: false,
-
-  toolbar: [
-    {
-      name: 'bold',
-      action: SimpleMDE.toggleBold,
-      className: styles.iconBold,
-      title: 'Bold',
-    },
-    {
-      name: 'italic',
-      action: SimpleMDE.toggleItalic,
-      className: styles.iconItalic,
-      title: 'Italic',
-    },
-    {
-      name: 'title',
-      action: SimpleMDE.toggleHeadingSmaller,
-      className: styles.iconTitle,
-      title: 'Title, Subtitle, Heading',
-    },
-    '|',
-    {
-      name: 'quote',
-      action: SimpleMDE.toggleBlockquote,
-      className: styles.iconQuote,
-      title: 'Quote',
-    },
-    {
-      name: 'unordered-list',
-      action: SimpleMDE.toggleUnorderedList,
-      className: styles.iconUnorderedList,
-      title: 'Generic List',
-    },
-    {
-      name: 'ordered-list',
-      action: SimpleMDE.toggleOrderedList,
-      className: styles.iconOrderedList,
-      title: 'Numbered List',
-    },
-    '|',
-    {
-      name: 'link',
-      action: SimpleMDE.drawLink,
-      className: styles.iconLink,
-      title: 'Create Link',
-    },
-    {
-      name: 'image',
-      action: SimpleMDE.drawImage,
-      className: styles.iconImage,
-      title: 'Insert Image',
-    },
-    '|',
-    {
-      name: 'preview',
-      action: SimpleMDE.togglePreview,
-      className: cn(styles.iconPreview, 'no-disable'),
-      title: 'Toggle Preview',
-    },
-    {
-      name: 'side-by-side',
-      action: SimpleMDE.toggleSideBySide,
-      className: cn(styles.iconSideBySide, 'no-disable'),
-      title: 'Toggle Side by Side',
-    },
-    {
-      name: 'fullscreen',
-      action: SimpleMDE.toggleFullScreen,
-      className: cn(styles.iconFullscreen, 'no-disable'),
-      title: 'Toggle Fullscreen',
-    },
-    '|',
-    {
-      name: 'guide',
-      action: 'https://simplemde.com/markdown-guide',
-      className: styles.iconGuide,
-      title: 'Markdown Guide',
-    },
-  ],
-};
-
-export default class MarkdownEditor extends Component {
-  textarea = null;
-  editor = null;
-
-  onRef = ref => (this.textarea = ref);
-
-  componentDidMount() {
-    this.editor = new SimpleMDE({
-      ...config,
-      element: this.textarea,
-    });
-
-    // Don't trap the key, to stay accessible.
-    this.editor.codemirror.options.extraKeys['Tab'] = false;
-    this.editor.codemirror.options.extraKeys['Shift-Tab'] = false;
-
-    this.editor.codemirror.on('change', this.onChange);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (
-      this.props.value !== nextProps.value &&
-      nextProps.value !== this.editor.value()
-    ) {
-      this.editor.value(nextProps.value);
-    }
-  }
-
-  componentDidUpdate() {
-    // Workaround empty render issue.
-    // https://github.com/NextStepWebs/simplemde-markdown-editor/issues/313
-    this.editor.codemirror.refresh();
-  }
-
-  componentWillUnmount() {
-    this.editor.toTextArea();
-  }
-
-  onChange = () => {
-    if (this.props.onChange) {
-      this.props.onChange(this.editor.value());
-    }
-  };
-
-  render() {
-    return (
-      <div className={styles.wrapper}>
-        <textarea ref={this.onRef} {...this.props} onChange={noop} />
-      </div>
-    );
-  }
-}
-
-MarkdownEditor.propTypes = {
-  onChange: PropTypes.func,
-  value: PropTypes.string,
-};
+export default MarkdownEditor;

client/coral-framework/components/loadable/MarkdownEditor.js

@@ -0,0 +1,154 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import SimpleMDE from 'simplemde';
+import cn from 'classnames';
+import noop from 'lodash/noop';
+import styles from './MarkdownEditor.css';
+
+const config = {
+  status: false,
+
+  // Do not download fontAwesome icons as we replace them with
+  // material icons.
+  autoDownloadFontAwesome: false,
+
+  // Disable built-in spell checker as it is very rudimentary.
+  spellChecker: false,
+
+  toolbar: [
+    {
+      name: 'bold',
+      action: SimpleMDE.toggleBold,
+      className: styles.iconBold,
+      title: 'Bold',
+    },
+    {
+      name: 'italic',
+      action: SimpleMDE.toggleItalic,
+      className: styles.iconItalic,
+      title: 'Italic',
+    },
+    {
+      name: 'title',
+      action: SimpleMDE.toggleHeadingSmaller,
+      className: styles.iconTitle,
+      title: 'Title, Subtitle, Heading',
+    },
+    '|',
+    {
+      name: 'quote',
+      action: SimpleMDE.toggleBlockquote,
+      className: styles.iconQuote,
+      title: 'Quote',
+    },
+    {
+      name: 'unordered-list',
+      action: SimpleMDE.toggleUnorderedList,
+      className: styles.iconUnorderedList,
+      title: 'Generic List',
+    },
+    {
+      name: 'ordered-list',
+      action: SimpleMDE.toggleOrderedList,
+      className: styles.iconOrderedList,
+      title: 'Numbered List',
+    },
+    '|',
+    {
+      name: 'link',
+      action: SimpleMDE.drawLink,
+      className: styles.iconLink,
+      title: 'Create Link',
+    },
+    {
+      name: 'image',
+      action: SimpleMDE.drawImage,
+      className: styles.iconImage,
+      title: 'Insert Image',
+    },
+    '|',
+    {
+      name: 'preview',
+      action: SimpleMDE.togglePreview,
+      className: cn(styles.iconPreview, 'no-disable'),
+      title: 'Toggle Preview',
+    },
+    {
+      name: 'side-by-side',
+      action: SimpleMDE.toggleSideBySide,
+      className: cn(styles.iconSideBySide, 'no-disable'),
+      title: 'Toggle Side by Side',
+    },
+    {
+      name: 'fullscreen',
+      action: SimpleMDE.toggleFullScreen,
+      className: cn(styles.iconFullscreen, 'no-disable'),
+      title: 'Toggle Fullscreen',
+    },
+    '|',
+    {
+      name: 'guide',
+      action: 'https://simplemde.com/markdown-guide',
+      className: styles.iconGuide,
+      title: 'Markdown Guide',
+    },
+  ],
+};
+
+export default class MarkdownEditor extends Component {
+  textarea = null;
+  editor = null;
+
+  onRef = ref => (this.textarea = ref);
+
+  componentDidMount() {
+    this.editor = new SimpleMDE({
+      ...config,
+      element: this.textarea,
+    });
+
+    // Don't trap the key, to stay accessible.
+    this.editor.codemirror.options.extraKeys['Tab'] = false;
+    this.editor.codemirror.options.extraKeys['Shift-Tab'] = false;
+
+    this.editor.codemirror.on('change', this.onChange);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (
+      this.props.value !== nextProps.value &&
+      nextProps.value !== this.editor.value()
+    ) {
+      this.editor.value(nextProps.value);
+    }
+  }
+
+  componentDidUpdate() {
+    // Workaround empty render issue.
+    // https://github.com/NextStepWebs/simplemde-markdown-editor/issues/313
+    this.editor.codemirror.refresh();
+  }
+
+  componentWillUnmount() {
+    this.editor.toTextArea();
+  }
+
+  onChange = () => {
+    if (this.props.onChange) {
+      this.props.onChange(this.editor.value());
+    }
+  };
+
+  render() {
+    return (
+      <div className={styles.wrapper}>
+        <textarea ref={this.onRef} {...this.props} onChange={noop} />
+      </div>
+    );
+  }
+}
+
+MarkdownEditor.propTypes = {
+  onChange: PropTypes.func,
+  value: PropTypes.string,
+};