fix: Prevent Alt Text from Being Truncated Due to Double Quotation Ma…

…rks (#1721)
openedx · Mar 7, 2025 · 49fbe76 · 49fbe76
1 parent dbba4dd
commit 49fbe76
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git 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 &quot; to prevent the alt text from being truncated
+    // or breaking the image tag structure.
+    const altTextValue = altText.value.replace(/"/g, '&quot;');
     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
@@ -360,6 +360,30 @@ describe('ImageSettingsModal hooks', () => {
         isDecorative: props.isDecorative,
       });
     });
+    it('replaces double quotes with &quot; 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 &quot;Submit For Grading&quot; 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 })();