Feature Enhancements

1. Drag and Drop Interactive 

1. Previously, image actions such as Remove and Replace Image appeared on hover over the image. These options have now been streamlined, with the Replace Image option moved to the right-hand panel, positioned just below the Decorative Image option for easier access.
   
   
2. Additionally, the Add/Edit Drop Zones option, which was earlier placed below the image, has now been relocated to the right-hand panel, improving accessibility and maintaining a consistent editing experience.
   
   
3. When selecting Add/Edit Drop Zones, the configuration panel now opens on the right side of the screen instead of a pop-up modal. Along with Label and Text fields, the text input has been enhanced with additional styling options: 1. Font Family, 2. Font Size, 3. Font Color
   
   
4. This allows users to customize the appearance of each drop zone individually, which was previously set to default styling.
   
   
5. Users can now add multiple drop zones at once using the add icon, instead of adding them one by one. Each drop zone must have a unique label and text. If any drop zone is left incomplete, the system will:
   

• Display an error message and highlight the incomplete drop zones in red. Refer to the gif above.
  

• Users can also delete drop zones easily by selecting a drop zone and clicking the delete icon.
  

The minimum size of 100px for drop zones remains unchanged. Users can resize them further by dragging from the corners.

The interactive behavior remains consistent, correct matches will display a green tick, while incorrect matches will show a red indicator.

Notes:

• Drop zones must have both label and text before saving.
  

• Incomplete elements will be highlighted in red with an error message.

• Minimum drop zone size remains 100px (resizable).

• Styling (font and icon settings) can be applied individually for each drag zone.
  

2. Image Hotspot Interactive 

We’ve also introduced similar enhancements to the Image Hotspot Interactive for a more consistent experience. Check out the gif:

1. Previously, image actions such as Remove and Replace Image appeared on hover. These have now been updated, with the Replace Image option moved to the right-hand panel, below the Decorative Image option. Refer to the gif above.
   
   
2. The Add/Edit Hotspot option has also been relocated to the right-hand panel, aligning with the updated interface used in drag-and-drop interactions.
   
   
3. Earlier, adding a hotspot would open a pop-up modal with Label and Text fields. Now, the configuration opens in the right-side panel, allowing users to manage hotspots more efficiently without interrupting the workflow.
   
   
4. Users can now add multiple hotspots at once using the add icon. Similar to drop zones: 1. Each hotspot must have a label and text. 2. Missing inputs will trigger an error message. 3. Incomplete hotspots will be highlighted in red.
5. If an image is replaced after adding hotspots, the hotspots will retain their positions, ensuring no loss of configuration.

Please Note:

• Hotspots must have both label and text before saving.
  

• Incomplete elements will be highlighted in red with an error message.