Clean   when uploading images in RCE

fixes MAT-265

flag=none

test plan
- Navigate to a RCE instance
- Click images button
- Upload an image from computer
- Switch to HTML view
- Verify that there is no &nbsp; after <img> tag

Change-Id: I1d079396f5261547fee01f1a19a22ad8f157738f
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/269602
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Weston Dransfield <wdransfield@instructure.com>
QA-Review: Weston Dransfield <wdransfield@instructure.com>
Product-Review: Juan Chavez <juan.chavez@instructure.com>

packages/canvas-rce/src/rce/RCEWrapper.js

@@ -498,7 +498,13 @@ class RCEWrapper extends React.Component {
 
   insertImage(image) {
     const editor = this.mceInstance()
-    const element = contentInsertion.insertImage(editor, image)
+    let element = contentInsertion.insertImage(editor, image)
+
+    // Removes TinyMCE's caret   text if exists.
+    if (element?.nextSibling?.data?.trim() === '') {
+      element.nextSibling.remove()
+    }
+
     if (element && element.complete) {
       this.contentInserted(element)
     } else if (element) {

packages/canvas-rce/test/module/RCEWrapper.test.js

@@ -576,6 +576,17 @@ describe('RCEWrapper', () => {
         instance.insertImage({})
         contentInsertion.insertImage.restore()
       })
+
+      it("removes TinyMCE's caret   when element is returned from content insertion", () => {
+        const container = document.createElement('div')
+        container.innerHTML = '<div><img src="image.jpg" alt="test" />&nbsp;</div>'
+        const element = container.querySelector('img')
+        const removeSpy = sinon.spy(element.nextSibling, 'remove')
+        sinon.stub(contentInsertion, 'insertImage').returns(element)
+        instance.insertImage({})
+        contentInsertion.insertImage.restore()
+        assert(removeSpy.called)
+      })
     })
 
     describe('insert media', () => {