<commit_before>import utils from '../utils';

export default class Images {

	constructor(plugin, options) {
		this.options = {
			label: '<span class="fa fa-camera"></span>',
			preview: true,
			uploadUrl: 'upload.php'
		};

		Object.assign(this.options, options);

        this._plugin = plugin;
        this._editor = this._plugin.base;
        this.elementClassName = 'medium-editor-insert-images';
		this.label = this.options.label;

        this.events();
	}

    events() {
        this._plugin.on(document, 'click', this.unselectImage.bind(this));

        this._plugin.getEditorElements().forEach((editor) => {
            this._plugin.on(editor, 'click', this.selectImage.bind(this));
        });
    }

	handleClick() {
		this._input = document.createElement('input');
		this._input.type = 'file';
		this._input.multiple = true;

		this._plugin.on(this._input, 'change', this.uploadFiles.bind(this));

		this._input.click();
	}

	uploadFiles() {
		const paragraph = this._plugin.core.selectedElement;

        // Replace paragraph with div, because figure is a block element
        // and can't be nested inside paragraphs
		if (paragraph.nodeName.toLowerCase() === 'p') {
			const div = document.createElement('div');

			paragraph.parentNode.insertBefore(div, paragraph);
			this._plugin.core.selectElement(div);
			paragraph.remove();
		}

		Array.prototype.forEach.call(this._input.files, (file) => {
            // Generate uid for this image, so we can identify it later
            // and we can replace preview image with uploaded one
			const uid = utils.generateRandomString();

			if (this.options.preview) {
				this.preview(file, uid);
			}

			this.upload(file, uid);
		});

		this._plugin.core.hideButtons();
	}

	preview(file, uid) {
		const reader = new FileReader();

		reader.onload = (e) => {
			this.insertImage(e.target.result, uid);
		};

		reader.readAsDataURL(file);
	}

	upload(file, uid) {
		const xhr = new XMLHttpRequest(),
			data = new FormData();

		xhr.open("POST", this.options.uploadUrl, true);
		xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                const image = this._plugin.core.selectedElement.querySelector(`[data-uid="${uid}"]`);

                if (image) {
                    this.replaceImage(image, xhr.responseText);
                } else {
                    this.insertImage(xhr.responseText);
                }
            }
		};

		data.append("file", file);
		xhr.send(data);
	}

    insertImage(url, uid) {
        const el = this._plugin.core.selectedElement,
            figure = document.createElement('figure'),
            img = document.createElement('img'),
            domImage = new Image();

        img.alt = '';

        if (uid) {
            img.setAttribute('data-uid', uid);
        }

        // If we're dealing with a preview image,
        // we don't have to preload it before displaying
        if (url.match(/^data:/)) {
            img.src = url;
            figure.appendChild(img);
            el.appendChild(figure);
        } else {
            domImage.onload = () => {
                img.src = domImage.src;
                figure.appendChild(img);
                el.appendChild(figure);
            };
            domImage.src = url;
        }

        el.classList.add(this.elementClassName);

        // Return domImage so we can test this function easily
        return domImage;
    }

    replaceImage(image, url) {
        const domImage = new Image();
<commit_msg>change scope for domImage in insertImage<commit_after>import utils from '../utils';

export default class Images {

	constructor(plugin, options) {
		this.options = {
			label: '<span class="fa fa-camera"></span>',
			preview: true,
			uploadUrl: 'upload.php'
		};

		Object.assign(this.options, options);

        this._plugin = plugin;
        this._editor = this._plugin.base;
        this.elementClassName = 'medium-editor-insert-images';
		this.label = this.options.label;

        this.events();
	}

    events() {
        this._plugin.on(document, 'click', this.unselectImage.bind(this));

        this._plugin.getEditorElements().forEach((editor) => {
            this._plugin.on(editor, 'click', this.selectImage.bind(this));
        });
    }

	handleClick() {
		this._input = document.createElement('input');
		this._input.type = 'file';
		this._input.multiple = true;

		this._plugin.on(this._input, 'change', this.uploadFiles.bind(this));

		this._input.click();
	}

	uploadFiles() {
		const paragraph = this._plugin.core.selectedElement;

        // Replace paragraph with div, because figure is a block element
        // and can't be nested inside paragraphs
		if (paragraph.nodeName.toLowerCase() === 'p') {
			const div = document.createElement('div');

			paragraph.parentNode.insertBefore(div, paragraph);
			this._plugin.core.selectElement(div);
			paragraph.remove();
		}

		Array.prototype.forEach.call(this._input.files, (file) => {
            // Generate uid for this image, so we can identify it later
            // and we can replace preview image with uploaded one
			const uid = utils.generateRandomString();

			if (this.options.preview) {
				this.preview(file, uid);
			}

			this.upload(file, uid);
		});

		this._plugin.core.hideButtons();
	}

	preview(file, uid) {
		const reader = new FileReader();

		reader.onload = (e) => {
			this.insertImage(e.target.result, uid);
		};

		reader.readAsDataURL(file);
	}

	upload(file, uid) {
		const xhr = new XMLHttpRequest(),
			data = new FormData();

		xhr.open("POST", this.options.uploadUrl, true);
		xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                const image = this._plugin.core.selectedElement.querySelector(`[data-uid="${uid}"]`);

                if (image) {
                    this.replaceImage(image, xhr.responseText);
                } else {
                    this.insertImage(xhr.responseText);
                }
            }
		};

		data.append("file", file);
		xhr.send(data);
	}

    insertImage(url, uid) {
        const el = this._plugin.core.selectedElement,
            figure = document.createElement('figure'),
            img = document.createElement('img');
        let domImage;

        img.alt = '';

        if (uid) {
            img.setAttribute('data-uid', uid);
        }

        // If we're dealing with a preview image,
        // we don't have to preload it before displaying
        if (url.match(/^data:/)) {
            img.src = url;
            figure.appendChild(img);
            el.appendChild(figure);
        } else {
            domImage = new Image();
            domImage.onload = () => {
                img.src = domImage.src;
                figure.appendChild(img);
                el.appendChild(figure);
            };
            domImage.src = url;
        }

        el.classList.add(this.elementClassName);

        // Return domImage so we can test this function easily
        return domImage;
    }

    replaceImage(image, url) {
        const domImage = new Image();

{'fraction_non_alphanumeric': 0.13851778934045844, 'fraction_numerical': 0.0011250175783996624, 'mean_word_length': 2.2180995475113123, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6577512', 'n_tokens_mistral': 2216, 'n_tokens_neox': 2025, 'n_words': 439}