fix: image and paste insert (#490)

* fix: pasting and images only insert at beginning

* fix: add image click not showing gallery

* chore: increase code coverage

Author: KristinAoki

src/editors/sharedComponents/ImageUploadModal/index.jsx

@@ -87,6 +87,7 @@ export const hooks = {
     updateReactState({ settings, ...args });
 
     close();
+    args.setSelection(null);
   },
   onClose: ({ clearSelection, close }) => () => {
     clearSelection();
@@ -130,7 +131,7 @@ export const ImageUploadModal = ({
       <ImageSettingsModal
         {...{
           isOpen,
-          close: module.hooks.onClose({ editorRef, clearSelection, close }),
+          close: module.hooks.onClose({ clearSelection, close }),
           selection,
           images,
           saveToEditor: module.hooks.createSaveCallback({
@@ -141,6 +142,7 @@ export const ImageUploadModal = ({
             selection,
             setSelection,
             lmsEndpointUrl,
+            clearSelection,
           }),
           returnToSelection: clearSelection,
         }}

src/editors/sharedComponents/ImageUploadModal/index.test.jsx

@@ -128,6 +128,7 @@ describe('ImageUploadModal', () => {
           expect(updateImageDimensionsSpy.mock.results[0].value.foundMatch).toBe(false);
           expect(images.current).toEqual([mockImage, newImage]);
           expect(close).toBeCalled();
+          expect(setSelection).toBeCalledWith(null);
         },
       );
     });

src/editors/sharedComponents/TinyMceWidget/hooks.js

@@ -77,38 +77,40 @@ export const replaceStaticWithAsset = ({
   lmsEndpointUrl,
 }) => {
   let content = initialContent;
+  let hasChanges = false;
   const srcs = content.split(/(src="|src="|href="|href=&quot)/g).filter(
     src => src.startsWith('/static') || src.startsWith('/asset'),
   );
-  if (isEmpty(srcs)) {
-    return initialContent;
-  }
-  srcs.forEach(src => {
-    const currentContent = content;
-    let staticFullUrl;
-    const isStatic = src.startsWith('/static/');
-    const assetSrc = src.substring(0, src.indexOf('"'));
-    const staticName = assetSrc.substring(8);
-    const assetName = assetSrc.replace(/\/assets\/.+[^/]\//g, '');
-    const displayName = isStatic ? staticName : assetName;
-    const isCorrectAssetFormat = assetSrc.match(/\/asset-v1:\S+[+]\S+[@]\S+[+]\S+[@]/g)?.length >= 1;
-    // assets in expandable text areas so not support relative urls so all assets must have the lms
-    // endpoint prepended to the relative url
-    if (editorType === 'expandable') {
-      if (isCorrectAssetFormat) {
-        staticFullUrl = `${lmsEndpointUrl}${assetSrc}`;
-      } else {
-        staticFullUrl = `${lmsEndpointUrl}${getRelativeUrl({ courseId: learningContextId, displayName })}`;
+  if (!isEmpty(srcs)) {
+    srcs.forEach(src => {
+      const currentContent = content;
+      let staticFullUrl;
+      const isStatic = src.startsWith('/static/');
+      const assetSrc = src.substring(0, src.indexOf('"'));
+      const staticName = assetSrc.substring(8);
+      const assetName = assetSrc.replace(/\/assets\/.+[^/]\//g, '');
+      const displayName = isStatic ? staticName : assetName;
+      const isCorrectAssetFormat = assetSrc.match(/\/asset-v1:\S+[+]\S+[@]\S+[+]\S+[@]/g)?.length >= 1;
+      // assets in expandable text areas so not support relative urls so all assets must have the lms
+      // endpoint prepended to the relative url
+      if (editorType === 'expandable') {
+        if (isCorrectAssetFormat) {
+          staticFullUrl = `${lmsEndpointUrl}${assetSrc}`;
+        } else {
+          staticFullUrl = `${lmsEndpointUrl}${getRelativeUrl({ courseId: learningContextId, displayName })}`;
+        }
+      } else if (!isCorrectAssetFormat) {
+        staticFullUrl = getRelativeUrl({ courseId: learningContextId, displayName });
       }
-    } else if (!isCorrectAssetFormat) {
-      staticFullUrl = getRelativeUrl({ courseId: learningContextId, displayName });
-    }
-    if (staticFullUrl) {
-      const currentSrc = src.substring(0, src.indexOf('"'));
-      content = currentContent.replace(currentSrc, staticFullUrl);
-    }
-  });
-  return content;
+      if (staticFullUrl) {
+        const currentSrc = src.substring(0, src.indexOf('"'));
+        content = currentContent.replace(currentSrc, staticFullUrl);
+        hasChanges = true;
+      }
+    });
+    if (hasChanges) { return content; }
+  }
+  return false;
 };
 
 export const getImageResizeHandler = ({ editor, imagesRef, setImage }) => () => {
@@ -196,7 +198,7 @@ export const setupCustomBehavior = ({
         lmsEndpointUrl,
         learningContextId,
       });
-      updateContent(newContent);
+      if (newContent) { updateContent(newContent); }
     });
   }
   editor.on('ExecCommand', (e) => {
@@ -206,7 +208,7 @@ export const setupCustomBehavior = ({
         initialContent,
         learningContextId,
       });
-      editor.setContent(newContent);
+      if (newContent) { editor.setContent(newContent); }
     }
     if (e.command === 'RemoveFormat') {
       editor.formatter.remove('blockquote');

src/editors/sharedComponents/TinyMceWidget/hooks.test.js

@@ -182,17 +182,17 @@ describe('TinyMceEditor hooks', () => {
     });
 
     describe('replaceStaticWithAsset', () => {
-      const initialContent = '<img src="/static/soMEImagEURl1.jpeg"/><a href="/assets/v1/some-key/test.pdf">test</a>';
-      const learningContextId = 'course+test+run';
+      const initialContent = '<img src="/static/soMEImagEURl1.jpeg"/><a href="/assets/v1/some-key/test.pdf">test</a><img src="/asset-v1:org+test+run+type@[email protected]" />';
+      const learningContextId = 'course-v1:org+test+run';
       const lmsEndpointUrl = 'sOmEvaLue.cOm';
-      it('it returns updated src for text editor to update content', () => {
-        const expected = '<img src="/asset+test+run+type@[email protected]"/><a href="/asset+test+run+type@[email protected]">test</a>';
+      it('returns updated src for text editor to update content', () => {
+        const expected = '<img src="/asset-v1:org+test+run+type@[email protected]"/><a href="/asset-v1:org+test+run+type@[email protected]">test</a><img src="/asset-v1:org+test+run+type@[email protected]" />';
         const actual = module.replaceStaticWithAsset({ initialContent, learningContextId });
         expect(actual).toEqual(expected);
       });
-      it('it returs updated src with absolute url for expandable editor to update content', () => {
+      it('returns updated src with absolute url for expandable editor to update content', () => {
         const editorType = 'expandable';
-        const expected = `<img src="${lmsEndpointUrl}/asset+test+run+type@[email protected]"/><a href="${lmsEndpointUrl}/asset+test+run+type@[email protected]">test</a>`;
+        const expected = `<img src="${lmsEndpointUrl}/asset-v1:org+test+run+type@[email protected]"/><a href="${lmsEndpointUrl}/asset-v1:org+test+run+type@[email protected]">test</a><img src="${lmsEndpointUrl}/asset-v1:org+test+run+type@[email protected]" />`;
         const actual = module.replaceStaticWithAsset({
           initialContent,
           editorType,
@@ -201,6 +201,11 @@ describe('TinyMceEditor hooks', () => {
         });
         expect(actual).toEqual(expected);
       });
+      it('returns false when there are no srcs to update', () => {
+        const content = '<div>Hello world!</div>';
+        const actual = module.replaceStaticWithAsset({ initialContent: content, learningContextId });
+        expect(actual).toBeFalsy();
+      });
     });
     describe('setAssetToStaticUrl', () => {
       it('returns content with updated img links', () => {