fixup! feat: add support for classList in image editor components

Author: xitij2000

src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/CSSEditControls.tsx

@@ -39,7 +39,7 @@ interface ImageSettingsModalInternalProps extends ImageSettingsModalCommonProps
 }
 
 interface ImageSettingsModalProps extends ImageSettingsModalCommonProps {
-  saveToEditor: (config: AltText & { dimensions: ImageDimensions; classList?: string[] }) => void;
+  saveToEditor: (config: AltText & { dimensions: ImageDimensions; classList?: string[]; }) => void;
 }
 
 export interface ImageSettingsModalFormProps<T extends ImageConfig = ImageConfig>

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

@@ -28,18 +28,20 @@ const ShowcaseClassEditor = () => {
     // Toggle the 'showcase' class based on the checkbox state
     const filteredList = classList.filter(c => c !== 'showcase');
     const newList = event.target.checked
-      ? [...filteredList, "showcase"]
+      ? [...filteredList, 'showcase']
       : filteredList;
     await formik.setFieldValue('classList', newList);
   };
 
   return (
     <Form.Group>
-      <Form.Checkbox
-        checked={checked}
-        onChange={handleChange}
-      />
-      <Form.Label>Showcase Image</Form.Label>
+      <Form.Label>
+        <Form.Checkbox
+          checked={checked}
+          onChange={handleChange}
+        />
+        Showcase Image
+      </Form.Label>
     </Form.Group>
   );
 };
@@ -53,7 +55,7 @@ const config = {
           widget: {
             id: 'showcase_class_editor',
             type: 'DIRECT_PLUGIN',
-            RenderWidget: ShowCaseClassEditor,
+            RenderWidget: ShowcaseClassEditor,
           },
         },
       ],

src/plugin-slots/ImageAdditionalSettingsSlot/README.md

@@ -13,12 +13,12 @@
 This slot wraps the image settings modal. It can be used to modify the form's initial values, validation schema, or to wrap the entire modal component. You can also use this slot to add validation and initial values to the form. The `processValues` function is called to clean up values being submitted.
 
 Combined with `ImageAdditionalSettingsSlot`, this slot allows extending the image editing capabilities of the image settings modal.
- 
+
 Since this slot wraps a modal that uses a React portal, you can't use it to wrap the modal in another div etc.
 
 ## Example
 
-The following `env.config.jsx` will modify the image settings modal to log the values being submitted. 
+The following `env.config.jsx` will modify the image settings modal to log the values being submitted.
 
 ```jsx
 import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';