<commit_before>/* global React */
/* global ReactQuill */
'use strict';

if (typeof React !== 'object') alert('React not found. Did you run "npm install"?');
if (typeof ReactQuill !== 'function') alert('ReactQuill not found. Did you run "make build"?')

var EMPTY_DELTA = {ops: []};

var Editor = React.createClass({

	getInitialState: function() {
		return {
			theme: 'snow',
			enabled: true,
			readOnly: false,
			value: EMPTY_DELTA,
			events: []
		};
	},

	formatRange: function(range) {
		return range
			? [range.index, range.index + range.length].join(',')
			: 'none';
	},

	onEditorChange: function(value, delta, source, editor) {
		this.setState({
			value: editor.getContents(),
			events: [
				'text-change('+this.state.value+' -> '+value+')'
			].concat(this.state.events)
		});
	},

	onEditorChangeSelection: function(range, source) {
		this.setState({
			selection: range,
			events: [
				'selection-change('+
					this.formatRange(this.state.selection)
				+' -> '+
					this.formatRange(range)
				+')'
			].concat(this.state.events)
		});
	},

	onToggle: function() {
		this.setState({ enabled: !this.state.enabled });
	},

	onToggleReadOnly: function() {
		this.setState({ readOnly: !this.state.readOnly });
	},

	render: function() {
		return (
			React.DOM.div({},
				this.renderToolbar(),
				React.DOM.hr(),
				this.renderSidebar(),
				this.state.enabled && ReactQuill({
					theme: this.state.theme,
					value: this.state.value,
					readOnly: this.state.readOnly,
					onChange: this.onEditorChange,
					onChangeSelection: this.onEditorChangeSelection
				})
			)
		);
	},

	renderToolbar: function() {
		var state = this.state;
		var enabled = state.enabled;
		var readOnly = state.readOnly;
		var selection = this.formatRange(state.selection);
		return (
			React.DOM.div({},
				React.DOM.button({
					onClick: this.onToggle },
					enabled? 'Disable' : 'Enable'
				),
				React.DOM.button({
					onClick: this.onToggleReadOnly },
					'Set ' + (readOnly? 'read/Write' : 'read-only')
				),
				React.DOM.button({<commit_msg>Logging focus events in demo<commit_after>/* global React */
/* global ReactQuill */
'use strict';

if (typeof React !== 'object') alert('React not found. Did you run "npm install"?');
if (typeof ReactQuill !== 'function') alert('ReactQuill not found. Did you run "make build"?')

var EMPTY_DELTA = {ops: []};

var Editor = React.createClass({

	getInitialState: function() {
		return {
			theme: 'snow',
			enabled: true,
			readOnly: false,
			value: EMPTY_DELTA,
			events: []
		};
	},

	formatRange: function(range) {
		return range
			? [range.index, range.index + range.length].join(',')
			: 'none';
	},

	onEditorChange: function(value, delta, source, editor) {
		this.setState({
			value: editor.getContents(),
			events: [
				'text-change('+this.state.value+' -> '+value+')'
			].concat(this.state.events)
		});
	},

	onEditorChangeSelection: function(range, source) {
		this.setState({
			selection: range,
			events: [
				'selection-change('+
					this.formatRange(this.state.selection)
				+' -> '+
					this.formatRange(range)
				+')'
			].concat(this.state.events)
		});
	},

	onEditorFocus: function(range, source) {
		this.setState({
			events: [
				'focus('+this.formatRange(range)+')'
			].concat(this.state.events)
		});
	},

	onEditorBlur: function(previousRange, source) {
		this.setState({
			events: [
				'blur('+this.formatRange(previousRange)+')'
			].concat(this.state.events)
		});
	},

	onToggle: function() {
		this.setState({ enabled: !this.state.enabled });
	},

	onToggleReadOnly: function() {
		this.setState({ readOnly: !this.state.readOnly });
	},

	render: function() {
		return (
			React.DOM.div({},
				this.renderToolbar(),
				React.DOM.hr(),
				this.renderSidebar(),
				this.state.enabled && ReactQuill({
					theme: this.state.theme,
					value: this.state.value,
					readOnly: this.state.readOnly,
					onChange: this.onEditorChange,
					onChangeSelection: this.onEditorChangeSelection,
					onFocus: this.onEditorFocus,
					onBlur: this.onEditorBlur,
				})
			)
		);
	},

	renderToolbar: function() {
		var state = this.state;
		var enabled = state.enabled;
		var readOnly = state.readOnly;
		var selection = this.formatRange(state.selection);
		return (
			React.DOM.div({},
				React.DOM.button({
					onClick: this.onToggle },
					enabled? 'Disable' : 'Enable'
				),
				React.DOM.button({
					onClick: this.onToggleReadOnly },
					'Set ' + (readOnly? 'read/Write' : 'read-only')
				),
				React.DOM.button({
{'fraction_non_alphanumeric': 0.16901718818862935, 'fraction_numerical': 0.0, 'mean_word_length': 3.318744053282588, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, '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': '7005652', 'n_tokens_mistral': 1839, 'n_tokens_neox': 1553, 'n_words': 299}