fix: Prevent Alt Text from Being Truncated Due to Double Quotation Marks (#1721)

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,
     });

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 })();