Styles Dropdown is not Binding to Custom Image Wrap

[heenasuman]

I am creating a new Ckeditor 5 plugin to wrap ImageBlock to div tag when ALT tag is applied. Please note this is a Drupal based plugin.

Plugin is working well and image is wrapping to div.

Next, I am trying to choose some Ckeditor Styles from dropdown, but no styles are being activated. If I manually add a div to the Uploaded image from the Source, then Ckeditor Styles are available and working well.

Here is my plugin code :

import { Plugin } from "ckeditor5/src/core";

export default class ImageWrapper extends Plugin {
/**

• @inheritdoc
  */
  static get pluginName() {
  return "ImageWrapper";
  }

/**

• @inheritdoc
  */
  init() {
  const { editor } = this;
  // Add the downcast converter.
  editor.conversion.for('downcast').add(downcastImageWrap());
  }
  }

/**

• Wrapping image.

• @return {function}

• Callback that binds an event to its parameter.

• @Private
  /
  function downcastImageWrap() {
  /*

  • @type {converterHandler}
    */
    function converter(event, data, conversionApi) {
    if (!conversionApi.consumable.consume(data.item, event.name)) {
    return;
    }

  const writer = conversionApi.writer;
  const modelElement = data.item;

  // Convert the model image element to its view representation.
  let image = conversionApi.mapper.toViewElement(modelElement);

  // Ensure the image element exists before proceeding.
  if (!image) {
  console.error('Image element is undefined.');
  return;
  }

  // 1. Create an empty div element.
  const imgWrapper = writer.createContainerElement('div', {
  class: 'custom-img-wrap'
  });

  // 2. Insert div before the associated image.
  writer.insert(writer.createPositionBefore(image), imgWrapper);

  // 3. Move the image into the div.
  writer.move(
  writer.createRangeOn(image),
  writer.createPositionAt(imgWrapper, 0),
  );
  }

return (dispatcher) => {
dispatcher.on('attribute:alt', converter, { priority: 'high' });
};
}

Any suggestions?