Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: asset name parsing in static converter #501

Merged
merged 1 commit into from
Aug 9, 2024
Merged

fix: asset name parsing in static converter #501

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 4 additions & 12 deletions src/editors/sharedComponents/TinyMceWidget/hooks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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') {
Expand Down Expand Up @@ -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);
Expand Down
6 changes: 3 additions & 3 deletions src/editors/sharedComponents/TinyMceWidget/hooks.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
13 changes: 13 additions & 0 deletions src/editors/sharedComponents/TinyMceWidget/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(/("|&quot;)/));
const dividedSrc = assetBlockName.split(/\/asset-v1:\S+[+]\S+[@]\S+[+]\S+\//);
[, assetName] = dividedSrc;
} else {
const assetBlockName = relativeUrl.substring(relativeUrl.indexOf('@') + 1, relativeUrl.search(/("|&quot;)/));
assetName = assetBlockName.substring(assetBlockName.indexOf('@') + 1);
}
return assetName;
};
Loading