diff --git a/src/editors/sharedComponents/TinyMceWidget/hooks.js b/src/editors/sharedComponents/TinyMceWidget/hooks.js index e97492e55..a2fe25717 100644 --- a/src/editors/sharedComponents/TinyMceWidget/hooks.js +++ b/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=")/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); diff --git a/src/editors/sharedComponents/TinyMceWidget/hooks.test.js b/src/editors/sharedComponents/TinyMceWidget/hooks.test.js index 484a4b2fe..36f46515e 100644 --- a/src/editors/sharedComponents/TinyMceWidget/hooks.test.js +++ b/src/editors/sharedComponents/TinyMceWidget/hooks.test.js @@ -183,17 +183,17 @@ describe('TinyMceEditor hooks', () => { }); describe('replaceStaticWithAsset', () => { - const initialContent = `test`; + const initialContent = `test`; const learningContextId = 'course-v1:org+test+run'; const lmsEndpointUrl = 'sOmEvaLue.cOm'; it('returns updated src for text editor to update content', () => { - const expected = `test`; + const expected = `test`; 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 = `test`; + const expected = `test`; const actual = module.replaceStaticWithAsset({ initialContent, editorType, diff --git a/src/editors/sharedComponents/TinyMceWidget/utils.js b/src/editors/sharedComponents/TinyMceWidget/utils.js index b6e56c655..a7b1fc001 100644 --- a/src/editors/sharedComponents/TinyMceWidget/utils.js +++ b/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; +};