fix: asset name parsing in static converter (#501)

Author: KristinAoki

src/editors/sharedComponents/TinyMceWidget/hooks.js

@@ -12,7 +12,7 @@ import { StrictDict } from '../../utils';
 import pluginConfig from './pluginConfig';
 import * as module from './hooks';
 import tinyMCE from '../../data/constants/tinyMCE';
-import { getRelativeUrl, getStaticUrl } from './utils';
+import { getRelativeUrl, getStaticUrl, parseAssetName } from './utils';
 
 export const state = StrictDict({
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -89,9 +89,9 @@ export const replaceStaticWithAsset = ({
       const isStatic = src.startsWith('/static/');
       const assetSrc = src.substring(0, src.indexOf('"'));
       const staticName = assetSrc.substring(8);
-      const assetName = assetSrc.replace(/\/assets\/.+[^/]\//g, '');
+      const assetName = parseAssetName(src);
       const displayName = isStatic ? staticName : assetName;
-      const isCorrectAssetFormat = assetSrc.match(/\/asset-v1:\S+[+]\S+[@]\S+[+]\S+[@]/g)?.length >= 1;
+      const isCorrectAssetFormat = assetSrc.startsWith('/asset') && 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') {
@@ -407,15 +407,7 @@ export const setAssetToStaticUrl = ({ editorValue, lmsEndpointUrl }) => {
 
   const assetSrcs = typeof content === 'string' ? content.split(/(src="|src="|href="|href=&quot)/g) : [];
   assetSrcs.filter(src => src.startsWith('/asset')).forEach(src => {
-    let nameFromEditorSrc;
-    if (src.match(/\/asset-v1:\S+[+]\S+[@]\S+[+]\S+\/\w/)?.length >= 1) {
-      const assetBlockName = src.substring(0, src.search(/("|")/));
-      const dividedSrc = assetBlockName.split(/\/asset-v1:\S+[+]\S+[@]\S+[+]\S+\//);
-      [, nameFromEditorSrc] = dividedSrc;
-    } else {
-      const assetBlockName = src.substring(src.indexOf('@') + 1, src.search(/("|")/));
-      nameFromEditorSrc = assetBlockName.substring(assetBlockName.indexOf('@') + 1);
-    }
+    const nameFromEditorSrc = parseAssetName(src);
     const portableUrl = getStaticUrl({ displayName: nameFromEditorSrc });
     const currentSrc = src.substring(0, src.search(/("|")/));
     const updatedContent = content.replace(currentSrc, portableUrl);

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

@@ -183,17 +183,17 @@ describe('TinyMceEditor hooks', () => {
     });
 
     describe('replaceStaticWithAsset', () => {
-      const initialContent = `<img src="/static/soMEImagEURl1.jpeg"/><a href="/assets/v1/${baseAssetUrl}/test.pdf">test</a><img src="/${baseAssetUrl}@correct.png" />`;
+      const initialContent = `<img src="/static/soMEImagEURl1.jpeg"/><a href="/assets/v1/${baseAssetUrl}/test.pdf">test</a><img src="/${baseAssetUrl}@correct.png" /><img src="/${baseAssetUrl}/correct.png" />`;
       const learningContextId = 'course-v1:org+test+run';
       const lmsEndpointUrl = 'sOmEvaLue.cOm';
       it('returns updated src for text editor to update content', () => {
-        const expected = `<img src="/${baseAssetUrl}@soMEImagEURl1.jpeg"/><a href="/${baseAssetUrl}@test.pdf">test</a><img src="/${baseAssetUrl}@correct.png" />`;
+        const expected = `<img src="/${baseAssetUrl}@soMEImagEURl1.jpeg"/><a href="/${baseAssetUrl}@test.pdf">test</a><img src="/${baseAssetUrl}@correct.png" /><img src="/${baseAssetUrl}@correct.png" />`;
         const actual = module.replaceStaticWithAsset({ initialContent, learningContextId });
         expect(actual).toEqual(expected);
       });
       it('returns updated src with absolute url for expandable editor to update content', () => {
         const editorType = 'expandable';
-        const expected = `<img src="${lmsEndpointUrl}/${baseAssetUrl}@soMEImagEURl1.jpeg"/><a href="${lmsEndpointUrl}/${baseAssetUrl}@test.pdf">test</a><img src="${lmsEndpointUrl}/${baseAssetUrl}@correct.png" />`;
+        const expected = `<img src="${lmsEndpointUrl}/${baseAssetUrl}@soMEImagEURl1.jpeg"/><a href="${lmsEndpointUrl}/${baseAssetUrl}@test.pdf">test</a><img src="${lmsEndpointUrl}/${baseAssetUrl}@correct.png" /><img src="${lmsEndpointUrl}/${baseAssetUrl}@correct.png" />`;
         const actual = module.replaceStaticWithAsset({
           initialContent,
           editorType,

src/editors/sharedComponents/TinyMceWidget/utils.js

@@ -13,3 +13,16 @@ export const getRelativeUrl = ({ courseId, displayName }) => {
   }
   return '';
 };
+
+export const parseAssetName = (relativeUrl) => {
+  let assetName = '';
+  if (relativeUrl.match(/\/asset-v1:\S+[+]\S+[@]\S+[+]\S+\/\w/)?.length >= 1) {
+    const assetBlockName = relativeUrl.substring(0, relativeUrl.search(/("|")/));
+    const dividedSrc = assetBlockName.split(/\/asset-v1:\S+[+]\S+[@]\S+[+]\S+\//);
+    [, assetName] = dividedSrc;
+  } else {
+    const assetBlockName = relativeUrl.substring(relativeUrl.indexOf('@') + 1, relativeUrl.search(/("|")/));
+    assetName = assetBlockName.substring(assetBlockName.indexOf('@') + 1);
+  }
+  return assetName;
+};