<commit_before>import Block from "./block.js";
export default class Paragraph extends Block {

	static get DEFAULT_PLACEHOLDER() {
		return '';
	}

	constructor({ data, config, api, readOnly }) {
		super({ config, api, readOnly });

		this._CSS = {
			block: this.api.styles.block,
			wrapper: 'ce-paragraph'
		};

		if (!this.readOnly) {
			this.onKeyUp = this.onKeyUp.bind(this);
		}

		this._placeholder = this.config.placeholder ? this.config.placeholder : Paragraph.DEFAULT_PLACEHOLDER;
		this._data = {};
		this._element = this.drawView();
		this._preserveBlank = this.config.preserveBlank !== undefined ? this.config.preserveBlank : false;

		this.data = data;
		this.col = this.data.col ? this.data.col : "12";
	}

	onKeyUp(e) {
		if (!this.wrapper) return;
		this.show_hide_block_list(true);
		if (e.code !== 'Backspace' && e.code !== 'Delete') {
			return;
		}

		const {textContent} = this._element;

		if (textContent === '') {
			this.show_hide_block_list();
			this._element.innerHTML = '';
		}
	}

	show_hide_block_list(hide) {
		let $wrapper = $(this.wrapper).hasClass('ce-paragraph') ? $(this.wrapper.parentElement) : $(this.wrapper);
		let $block_list_container = $wrapper.find('.block-list-container.dropdown-list');
		$block_list_container.removeClass('hidden');
		hide && $block_list_container.addClass('hidden');
	}

	drawView() {
		let div = document.createElement('DIV');

		div.classList.add(this._CSS.wrapper, this._CSS.block, 'widget');
		div.contentEditable = false;

		if (!this.readOnly) {
			div.contentEditable = true;
			div.addEventListener('focus', () => {
				const {textContent} = this._element;
				if (textContent !== '') return;
				this.show_hide_block_list();
			});
			div.addEventListener('blur', () => {
				setTimeout(() => this.show_hide_block_list(true), 10);
			});
			div.dataset.placeholder = this.api.i18n.t(this._placeholder);
			div.addEventListener('keyup', this.onKeyUp);
		}
		return div;
	}

	open_block_list() {
		let dropdown_title = 'Templates';
		let $block_list_container = $(`
			<div class="block-list-container dropdown-list">
				<div class="dropdown-title">${dropdown_title.toUpperCase()}</div>
			</div>
		`);

		let all_blocks = frappe.workspace_block.blocks;
		Object.keys(all_blocks).forEach(key => {
			let $block_list_item = $(`
				<div class="block-list-item dropdown-item">
					<span class="dropdown-item-icon">${all_blocks[key].toolbox.icon}</span>
					<span class="dropdown-item-label">${__(all_blocks[key].toolbox.title)}</span>
				</div>
			`);

			$block_list_item.click(event => {
				event.stopPropagation();
				const index = this.api.blocks.getCurrentBlockIndex();
				this.api.blocks.delete();
				this.api.blocks.insert(key, {}, {}, index);
				this.api.caret.setToBlock(index);
			});

			$block_list_container.append($block_list_item);
		});

		$block_list_container.addClass('hidden');
		$block_list_container.appendTo(this.wrapper);
	}

	render() {
		this.wrapper = document.createElement('div');<commit_msg>fix: blur event was overlapping block list item click event<commit_after>import Block from "./block.js";
export default class Paragraph extends Block {

	static get DEFAULT_PLACEHOLDER() {
		return '';
	}

	constructor({ data, config, api, readOnly }) {
		super({ config, api, readOnly });

		this._CSS = {
			block: this.api.styles.block,
			wrapper: 'ce-paragraph'
		};

		if (!this.readOnly) {
			this.onKeyUp = this.onKeyUp.bind(this);
		}

		this._placeholder = this.config.placeholder ? this.config.placeholder : Paragraph.DEFAULT_PLACEHOLDER;
		this._data = {};
		this._element = this.drawView();
		this._preserveBlank = this.config.preserveBlank !== undefined ? this.config.preserveBlank : false;

		this.data = data;
		this.col = this.data.col ? this.data.col : "12";
	}

	onKeyUp(e) {
		if (!this.wrapper) return;
		this.show_hide_block_list(true);
		if (e.code !== 'Backspace' && e.code !== 'Delete') {
			return;
		}

		const {textContent} = this._element;

		if (textContent === '') {
			this.show_hide_block_list();
			this._element.innerHTML = '';
		}
	}

	show_hide_block_list(hide) {
		let $wrapper = $(this.wrapper).hasClass('ce-paragraph') ? $(this.wrapper.parentElement) : $(this.wrapper);
		let $block_list_container = $wrapper.find('.block-list-container.dropdown-list');
		$block_list_container.removeClass('hidden');
		hide && $block_list_container.addClass('hidden');
	}

	drawView() {
		let div = document.createElement('DIV');

		div.classList.add(this._CSS.wrapper, this._CSS.block, 'widget');
		div.contentEditable = false;

		if (!this.readOnly) {
			div.contentEditable = true;
			div.addEventListener('focus', () => {
				const {textContent} = this._element;
				if (textContent !== '') return;
				this.show_hide_block_list();
			});
			div.addEventListener('blur', () => {
				!this.over_block_list_item && this.show_hide_block_list(true);
			});
			div.dataset.placeholder = this.api.i18n.t(this._placeholder);
			div.addEventListener('keyup', this.onKeyUp);
		}
		return div;
	}

	open_block_list() {
		let dropdown_title = 'Templates';
		let $block_list_container = $(`
			<div class="block-list-container dropdown-list">
				<div class="dropdown-title">${dropdown_title.toUpperCase()}</div>
			</div>
		`);

		let all_blocks = frappe.workspace_block.blocks;
		Object.keys(all_blocks).forEach(key => {
			let $block_list_item = $(`
				<div class="block-list-item dropdown-item">
					<span class="dropdown-item-icon">${all_blocks[key].toolbox.icon}</span>
					<span class="dropdown-item-label">${__(all_blocks[key].toolbox.title)}</span>
				</div>
			`);

			$block_list_item.click(event => {
				event.stopPropagation();
				const index = this.api.blocks.getCurrentBlockIndex();
				this.api.blocks.delete();
				this.api.blocks.insert(key, {}, {}, index);
				this.api.caret.setToBlock(index);
			});

			$block_list_item.mouseenter(() => {
				this.over_block_list_item = true;
			}).mouseleave(() => {
				this.over_block_list_item = false;
			});

			$block_list_container.append($block_list_item);
		});

		$block_list_container.addClass('hidden');
		$block_list_container.appendTo(this.wrapper);
	}

	render() {
		this.wrapper = document.createElement('div');
{'fraction_non_alphanumeric': 0.17039780963118054, 'fraction_numerical': 0.0016105653084232566, 'mean_word_length': 4.077677841373672, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 34, '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': '7485329', 'n_tokens_mistral': 2383, 'n_tokens_neox': 2078, 'n_words': 317}