Update draft-js-markdown-plugin

package.json

@@ -84,7 +84,7 @@
     "draft-js-image-plugin": "2.0.0-rc8",
     "draft-js-import-markdown": "^1.2.1",
     "draft-js-linkify-plugin": "^2.0.0-beta1",
-    "draft-js-markdown-plugin": "1.4.2",
+    "draft-js-markdown-plugin": "1.4.4",
     "draft-js-plugins-editor": "^2.0.4",
     "draft-js-prism-plugin": "0.1.3",
     "draftjs-to-markdown": "^0.4.2",

src/components/chatInput/input.js

@@ -63,6 +63,7 @@ class Input extends React.Component<Props, State> {
             inline: ['BOLD', 'ITALIC', 'CODE'],
             block: ['CODE', 'ordered-list-item', 'unordered-list-item'],
           },
+          renderLanguageSelect: () => null,
         }),
         createCodeEditorPlugin(),
         createLinkifyPlugin({

src/components/rich-text-editor/LanguageSelect.js

@@ -0,0 +1,62 @@
+// @flow
+import React from 'react';
+import styled from 'styled-components';
+
+type LanguageSelectOptions = {
+  options: Array<{ value: string, label: string }>,
+  onChange: (selectedValue: string) => void,
+  selectedValue: string,
+  selectedLabel: string,
+};
+
+const SwitcherContainer = styled.div`
+  position: absolute;
+  text-align: right;
+  bottom: -28px;
+  right: 0;
+`;
+
+const Switcher = styled.div`
+  display: inline-block;
+  font-family: sans-serif;
+  color: #ccc;
+  letter-spacing: 0.05em;
+  font-size: 12px;
+  padding: 0.3em;
+  cursor: pointer;
+  position: relative;
+`;
+
+const SwitcherSelect = styled.select`
+  position: absolute;
+  top: 0;
+  cursor: pointer;
+  opacity: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+`;
+
+const renderLanguageSelect = ({
+  options,
+  onChange,
+  selectedValue,
+  selectedLabel,
+}: LanguageSelectOptions) => (
+  <SwitcherContainer>
+    <Switcher>
+      <SwitcherSelect value={selectedValue} onChange={onChange}>
+        {options.map(({ label, value }) => (
+          <option key={value} value={value}>
+            {label}
+          </option>
+        ))}
+      </SwitcherSelect>
+      <div>
+        {selectedLabel || 'Select language...'} {String.fromCharCode(9662)}
+      </div>
+    </Switcher>
+  </SwitcherContainer>
+);
+
+export { renderLanguageSelect };

src/components/rich-text-editor/index.js

@@ -25,6 +25,7 @@ import OutsideClickHandler from '../outsideClickHandler';
 import Icon from '../icons';
 import { IconButton } from '../buttons';
 import mentionsDecorator from 'shared/clients/draft-js/mentions-decorator/index.web.js';
+import { renderLanguageSelect } from './LanguageSelect';
 
 import Image from './Image';
 import Embed, { addEmbed, parseEmbedUrl } from './Embed';
@@ -70,6 +71,25 @@ class Editor extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
 
+    const pluginState = this.getPluginState(props);
+
+    this.state = {
+      ...pluginState,
+      inserting: false,
+      embedding: false,
+      embedUrl: '',
+    };
+  }
+
+  componentDidUpdate(prev: Props) {
+    if (prev.readOnly !== this.props.readOnly) {
+      this.setState({
+        ...this.getPluginState(this.props),
+      });
+    }
+  }
+
+  getPluginState = (props: Props) => {
     const focusPlugin = createFocusPlugin();
     const dndPlugin = createBlockDndPlugin();
     const linkifyPlugin = createLinkifyPlugin({
@@ -93,24 +113,25 @@ class Editor extends React.Component<Props, State> {
       imageComponent: Image,
     });
 
-    this.state = {
+    return {
       plugins: [
         imagePlugin,
         prismPlugin,
         embedPlugin,
-        createMarkdownPlugin(),
+        createMarkdownPlugin({
+          renderLanguageSelect: props.readOnly
+            ? () => null
+            : renderLanguageSelect,
+        }),
         codePlugin,
         linkifyPlugin,
         dndPlugin,
         focusPlugin,
       ],
-      addEmbed: addEmbed,
       addImage: imagePlugin.addImage,
-      inserting: false,
-      embedding: false,
-      embedUrl: '',
+      addEmbed: addEmbed,
     };
-  }
+  };
 
   changeEmbedUrl = (evt: SyntheticInputEvent<HTMLInputElement>) => {
     this.setState({

src/reset.css.js

@@ -232,6 +232,7 @@ injectGlobal`
     padding: 8px 16px;
     display: block;
     white-space: pre-wrap;
+    position: relative;
   }
 
   .markdown div[data-block='true'] {

yarn.lock

@@ -3760,9 +3760,9 @@ draft-js-linkify-plugin@^2.0.0-beta1:
     tlds "^1.189.0"
     union-class-names "^1.0.0"
 
-draft-js-markdown-plugin@1.4.2:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/draft-js-markdown-plugin/-/draft-js-markdown-plugin-1.4.2.tgz#bffdc34f76ce0bfaf1879431fba25747f8f98e7c"
+draft-js-markdown-plugin@1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/draft-js-markdown-plugin/-/draft-js-markdown-plugin-1.4.4.tgz#d3ca991edbec40aebf70c51c4209aca80eb2fd4b"
   dependencies:
     decorate-component-with-props "^1.0.2"
     draft-js "^0.10.4"