import Browser from "suneditor/src/modules/contract/Browser.js";
import ImageGallery, { ImageGalleryPluginOptions } from "suneditor/src/plugins/browser/imageGallery.js";

class ImageGalleryPdgV3 extends ImageGallery {
	static key = 'imageGallery';
	static className = '';
    
	constructor(kernel: SunEditor.Kernel, pluginOptions: ImageGalleryPluginOptions) {
		super(kernel, pluginOptions);
        
		this.browser = new Browser(this, this.$, {
			title: this.$.lang.imageGallery,
			data: pluginOptions.data,
			url: pluginOptions.url,
			headers: pluginOptions.headers,
                        // Sadly this method is private so I had to copy it
			selectorHandler: this.#SetItem.bind(this) as (taget: Node) => void,
			columnSize: 4,
			className: 'se-image-gallery',
			// I'm using the same parameters as the image listing, 
			// but dedicated options should be added in ImageGalleryPluginOptions
			searchUrl: pluginOptions.url,
			searchUrlHeader: pluginOptions.headers,
		});
	}
    
	/**
	 * @description Set browser item
	 * @param {HTMLImageElement} target - Target element
	 */
	#SetItem(target: HTMLImageElement) {
		if (this.onSelectfunction) {
			this.onSelectfunction(target);
		} else {
			const file = { name: target.getAttribute('data-name'), size: 0 };
			this.$.plugins.image.modalInit();
			this.$.plugins.image.create(target.getAttribute('data-command'), null, this.width, this.height, 'none', file, target.alt, true);
		}
	}
}

export default ImageGalleryV3;

import ImageGalleryV3 from "@/editor/imageGalleryV3";
import suneditor, { plugins } from "suneditor";

onMounted(() => {
  suneditor.create(editorEl.value!, {
    // ...
    plugins: {
      ...plugins,
      imageGallery: ImageGalleryV3
    },
    imageGallery: {
      url: `https://[snip]/medias`,
      headers: { Authorization: `Bearer ${token}`, 'X-Sun-Editor': 'true' }
    },
  });
});