diff --git a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/hooks.js b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/hooks.js index c67d63f40..c89044f62 100644 --- a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/hooks.js +++ b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/hooks.js @@ -331,8 +331,11 @@ export const onSaveClick = ({ })) { altText.error.dismiss(); altText.validation.dismiss(); + // Replaces double quotes with " to prevent the alt text from being truncated + // or breaking the image tag structure. + const altTextValue = altText.value.replace(/"/g, '"'); saveToEditor({ - altText: altText.value, + altText: altTextValue, dimensions, isDecorative, }); diff --git a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/hooks.test.js b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/hooks.test.js index bcac2ef65..78d34714f 100644 --- a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/hooks.test.js +++ b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/hooks.test.js @@ -360,6 +360,30 @@ describe('ImageSettingsModal hooks', () => { isDecorative: props.isDecorative, }); }); + it('replaces double quotes with " before saving to editor', () => { + props.altText.value = 'The "Submit For Grading" button'; + jest.spyOn(hooks, hookKeys.checkFormValidation).mockReturnValueOnce(true); + + hooks.onSaveClick({ ...props })(); + + expect(props.saveToEditor).toHaveBeenCalledWith({ + altText: 'The "Submit For Grading" button', + dimensions: props.dimensions, + isDecorative: props.isDecorative, + }); + }); + it('does not modify altText if there are no double quotes', () => { + props.altText.value = 'The Submit For Grading button'; + jest.spyOn(hooks, hookKeys.checkFormValidation).mockReturnValueOnce(true); + + hooks.onSaveClick({ ...props })(); + + expect(props.saveToEditor).toHaveBeenCalledWith({ + altText: 'The Submit For Grading button', + dimensions: props.dimensions, + isDecorative: props.isDecorative, + }); + }); it('calls dismissError and sets showAltTextSubmissionError to false when checkFormValidation is true', () => { jest.spyOn(hooks, hookKeys.checkFormValidation).mockReturnValueOnce(true); hooks.onSaveClick({ ...props })();