fix: setAssetToStaticUrl regex matcher (#497)

Author: KristinAoki

src/editors/sharedComponents/TinyMceWidget/hooks.js

@@ -408,9 +408,9 @@ 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(/\/assets\/.+\/asset-v1:\S+[+]\S+[@]\S+[+]\S+\//)?.length >= 1) {
+    if (src.match(/\/asset-v1:\S+[+]\S+[@]\S+[+]\S+\/\w/)?.length >= 1) {
       const assetBlockName = src.substring(0, src.search(/("|")/));
-      const dividedSrc = assetBlockName.split(/\/assets\/.+\/asset-v1:\S+[+]\S+[@]\S+[+]\S+\//);
+      const dividedSrc = assetBlockName.split(/\/asset-v1:\S+[+]\S+[@]\S+[+]\S+\//);
       [, nameFromEditorSrc] = dividedSrc;
     } else {
       const assetBlockName = src.substring(src.indexOf('@') + 1, src.search(/("|")/));

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

@@ -63,6 +63,7 @@ const mockEditorContentHtml = `
     </img>
   </p>
 `;
+const baseAssetUrl = 'asset-v1:org+test+run+type@asset+block';
 
 const mockImagesRef = { current: [mockImage] };
 
@@ -182,17 +183,17 @@ describe('TinyMceEditor hooks', () => {
     });
 
     describe('replaceStaticWithAsset', () => {
-      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@asset+block@correct.png" />';
+      const initialContent = `<img src="/static/soMEImagEURl1.jpeg"/><a href="/assets/v1/${baseAssetUrl}/test.pdf">test</a><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="/asset-v1:org+test+run+type@asset+block@soMEImagEURl1.jpeg"/><a href="/asset-v1:org+test+run+type@asset+block@test.pdf">test</a><img src="/asset-v1:org+test+run+type@asset+block@correct.png" />';
+        const expected = `<img src="/${baseAssetUrl}@soMEImagEURl1.jpeg"/><a href="/${baseAssetUrl}@test.pdf">test</a><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}/asset-v1:org+test+run+type@asset+block@soMEImagEURl1.jpeg"/><a href="${lmsEndpointUrl}/asset-v1:org+test+run+type@asset+block@test.pdf">test</a><img src="${lmsEndpointUrl}/asset-v1:org+test+run+type@asset+block@correct.png" />`;
+        const expected = `<img src="${lmsEndpointUrl}/${baseAssetUrl}@soMEImagEURl1.jpeg"/><a href="${lmsEndpointUrl}/${baseAssetUrl}@test.pdf">test</a><img src="${lmsEndpointUrl}/${baseAssetUrl}@correct.png" />`;
         const actual = module.replaceStaticWithAsset({
           initialContent,
           editorType,
@@ -209,7 +210,7 @@ describe('TinyMceEditor hooks', () => {
     });
     describe('setAssetToStaticUrl', () => {
       it('returns content with updated img links', () => {
-        const editorValue = '<img src="/asset@/soME_ImagE_URl1"/> <a href="/asset@soMEImagEURl">testing link</a>';
+        const editorValue = `<img src="/${baseAssetUrl}/soME_ImagE_URl1"/> <a href="/${baseAssetUrl}@soMEImagEURl">testing link</a>`;
         const lmsEndpointUrl = 'sOmEvaLue.cOm';
         const content = module.setAssetToStaticUrl({ editorValue, lmsEndpointUrl });
         expect(content).toEqual('<img src="/static/soME_ImagE_URl1"/> <a href="/static/soMEImagEURl">testing link</a>');