fix: add handling for alt text with quotes and escaping in propsString

Author: xitij2000

src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.test.tsx

@@ -70,6 +70,16 @@ describe('ImageSettingsModal', () => {
       expect(screen.queryByText(messages.altTextError.defaultMessage)).not.toBeInTheDocument();
       expect(props.saveToEditor).toHaveBeenCalled();
     });
+    test('It passes alt text containing quotes through to saveToEditor', async () => {
+      render(<ImageSettingsModal {...props} />);
+      const altTextBox = screen.getByRole('textbox', { name: /alt text/i });
+      await user.clear(altTextBox);
+      await user.type(altTextBox, 'some text that "has quotes"');
+      await user.click(screen.getByRole('button', { name: 'Save' }));
+      expect(props.saveToEditor).toHaveBeenCalledWith(
+        expect.objectContaining({ altText: 'some text that "has quotes"' }),
+      );
+    });
   });
   describe('Image Dimensions Editing', () => {
     function mockImageLoad(naturalWidth, naturalHeight) {

src/editors/sharedComponents/ImageUploadModal/index.jsx

@@ -12,7 +12,9 @@ import * as module from '.';
 import { updateImageDimensions } from '../TinyMceWidget/hooks';
 
 export const propsString = (props) => (
-  Object.keys(props).map((key) => `${key}="${props[key]}"`).join(' ')
+  Object.keys(props)
+    .map((key) => `${key}="${String(props[key]).replace(/"/g, '"')}"`)
+    .join(' ')
 );
 
 export const imgProps = ({

src/editors/sharedComponents/ImageUploadModal/index.test.tsx

@@ -57,9 +57,9 @@ describe('ImageUploadModal', () => {
         alt: settings.altText,
         width: settings.dimensions.width,
         height: settings.dimensions.height,
-        class: ''
+        class: '',
       };
-      const testImgTag = ({expected, settings}) => {
+      const testImgTag = ({ expected, settings }) => {
         const output = hooks.imgTag({
           settings,
           selection,
@@ -70,13 +70,13 @@ describe('ImageUploadModal', () => {
         expect(output).toEqual(`<img ${propsString(expected)} />`);
       };
       test.each([
-          [ settings, expected ],
-          [ {...settings, isDecorative: true}, {...expected, alt: ''} ],
-          [ {...settings, classList: []}, {...expected} ],
-          [ {...settings, classList: null}, {...expected} ],
-          [ {...settings, classList: undefined}, {...expected} ],
-          [ {...settings, classList: ['class1', 'class2']}, {...expected, class: 'class1 class2'} ],
-          [ {...settings, title: "some title"}, {...expected, title: 'some title'} ],
+        [settings, expected],
+        [{ ...settings, isDecorative: true }, { ...expected, alt: '' }],
+        [{ ...settings, classList: [] }, { ...expected }],
+        [{ ...settings, classList: null }, { ...expected }],
+        [{ ...settings, classList: undefined }, { ...expected }],
+        [{ ...settings, classList: ['class1', 'class2'] }, { ...expected, class: 'class1 class2' }],
+        [{ ...settings, title: 'some title' }, { ...expected, title: 'some title' }],
       ])('It returns a html string which matches an image tag', (settings, expected) => {
         testImgTag({ settings, expected });
       });
@@ -195,4 +195,9 @@ describe('ImageUploadModal', () => {
       expect(container.querySelector('SelectImageModal')).toBeInTheDocument();
     });
   });
+  describe('propsString', () => {
+    it('escapes double quotes in attribute values', () => {
+      expect(propsString({ alt: 'some "quoted" text' })).toEqual('alt="some &quot;quoted&quot; text"');
+    });
+  });
 });

src/editors/sharedComponents/TinyMceWidget/hooks.ts

@@ -14,7 +14,7 @@ import pluginConfig from './pluginConfig';
 
 import * as tinyMCE from '../../data/constants/tinyMCE';
 import { getRelativeUrl, getStaticUrl, parseAssetName } from './utils';
-import { isLibraryKey } from '../../../generic/key-utils';
+import { isLibraryKey } from '@src/generic/key-utils';
 
 export const state = StrictDict({
   // eslint-disable-next-line react-hooks/rules-of-hooks