Merge pull request #4848 from withspectrum/fix-messages-getting-lines-appended

Fix messages getting empty lines appended

Author: brianlovin

shared/draft-utils/add-embeds-to-draft-js.js

@@ -34,7 +34,7 @@ export const addEmbedsToEditorState = (
     if (block.type !== 'unstyled') return;
 
     const embeds = getEmbedsFromText(block.text);
-    if (!embeds.length === 0) return;
+    if (embeds.length === 0) return;
 
     embeds.forEach(embed => {
       lastEntityKey++;
@@ -64,19 +64,6 @@ export const addEmbedsToEditorState = (
         type: 'embed',
       };
     });
-    // If this is the last block we need to add an empty block below the atomic block,
-    // otherwise users cannot remove the embed during editing
-    if (index === input.blocks.length - 1) {
-      newBlocks.push({
-        type: 'unstyled',
-        data: {},
-        text: ' ',
-        depth: 0,
-        entityRanges: [],
-        inlineStyleRanges: [],
-        key: genKey(),
-      });
-    }
   });
 
   return {

shared/draft-utils/test/__snapshots__/add-embeds-to-draft-js.test.js.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should add embeds 1`] = `
+Object {
+  "blocks": Array [
+    Object {
+      "data": Object {},
+      "depth": 0,
+      "entityRanges": Array [],
+      "inlineStyleRanges": Array [],
+      "key": "g0000",
+      "text": "https://simplecast.com/s/a1f11d11",
+      "type": "unstyled",
+    },
+    Object {
+      "data": Object {},
+      "depth": 0,
+      "entityRanges": Array [
+        Object {
+          "key": -Infinity,
+          "length": 1,
+          "offset": 0,
+        },
+      ],
+      "inlineStyleRanges": Array [],
+      "key": "0",
+      "text": " ",
+      "type": "atomic",
+    },
+  ],
+  "entityMap": Object {
+    "-Infinity": Object {
+      "data": Object {
+        "height": 200,
+        "src": "https://embed.simplecast.com/a1f11d11",
+        "url": "https://embed.simplecast.com/a1f11d11",
+      },
+      "mutability": "MUTABLE",
+      "type": "embed",
+    },
+  },
+}
+`;

shared/draft-utils/test/add-embeds-to-draft-js.test.js

@@ -1,5 +1,13 @@
 // @flow
-import { getEmbedsFromText } from '../add-embeds-to-draft-js';
+jest.mock('draft-js/lib/generateRandomKey', () => {
+  let last = 0;
+  const multiplier = Math.exp(24);
+  return () => Math.floor(last++ * multiplier).toString(32);
+});
+import {
+  getEmbedsFromText,
+  addEmbedsToEditorState,
+} from '../add-embeds-to-draft-js';
 
 describe('sites', () => {
   describe('<iframe>', () => {
@@ -357,3 +365,39 @@ describe('complex text', () => {
     ]);
   });
 });
+
+it('should not change anything if there are not embeds to add', () => {
+  const input = {
+    blocks: [
+      {
+        type: 'unstyled',
+        key: 'g0000',
+        data: {},
+        depth: 0,
+        inlineStyleRanges: [],
+        entityRanges: [],
+        text: 'Hello world!',
+      },
+    ],
+    entityMap: {},
+  };
+  expect(addEmbedsToEditorState(input)).toEqual(input);
+});
+
+it('should add embeds', () => {
+  const input = {
+    blocks: [
+      {
+        type: 'unstyled',
+        key: 'g0000',
+        data: {},
+        depth: 0,
+        inlineStyleRanges: [],
+        entityRanges: [],
+        text: 'https://simplecast.com/s/a1f11d11',
+      },
+    ],
+    entityMap: {},
+  };
+  expect(addEmbedsToEditorState(input)).toMatchSnapshot();
+});

src/views/thread/components/threadDetail.js

@@ -309,15 +309,17 @@ class ThreadDetailPure extends React.Component<Props, State> {
   uploadFiles = files => {
     const uploading = `![Uploading ${files[0].name}...]()`;
     let caretPos = this.bodyEditor.selectionStart;
+    const { body } = this.state;
+    if (!body) return;
 
     this.setState(
-      ({ body }) => ({
+      {
         isSavingEdit: true,
         body:
           body.substring(0, caretPos) +
           uploading +
-          body.substring(this.bodyEditor.selectionEnd, this.state.body.length),
-      }),
+          body.substring(this.bodyEditor.selectionEnd, body.length),
+      },
       () => {
         caretPos = caretPos + uploading.length;
         this.bodyEditor.selectionStart = caretPos;
@@ -335,6 +337,7 @@ class ThreadDetailPure extends React.Component<Props, State> {
         this.setState({
           isSavingEdit: false,
         });
+        if (!this.state.body) return;
         this.changeBody({
           target: {
             value: this.state.body.replace(
@@ -349,6 +352,7 @@ class ThreadDetailPure extends React.Component<Props, State> {
         this.setState({
           isSavingEdit: false,
         });
+        if (!this.state.body) return;
         this.changeBody({
           target: {
             value: this.state.body.replace(uploading, ''),