<commit_before>import React, { Component } from 'react'
import PropTypes from 'prop-types'
import debounce from 'lodash/debounce'
import { UnControlled as CodeMirror } from 'react-codemirror2'
import 'codemirror/mode/jsx/jsx'
import Styled from 'rsg-components/Styled'

// We’re explicitly specifying Webpack loaders here so we could skip specifying them in Webpack configuration.
// That way we could avoid clashes between our loaders and user loaders.
// eslint-disable-next-line import/no-unresolved
require('!!../../../loaders/style-loader!../../../loaders/css-loader!codemirror/lib/codemirror.css')
// eslint-disable-next-line import/no-unresolved
require('!!../../../loaders/style-loader!../../../loaders/css-loader!rsg-codemirror-theme.css')

const UPDATE_DELAY = 10

const styles = ({ fontFamily, space, fontSize }) => ({
	root: {
		'& .CodeMirror': {
			isolate: false,
			fontFamily: fontFamily.monospace,
			height: 'auto',
			padding: [[space[1], space[2]]],
			fontSize: fontSize.small
		},
		'& .CodeMirror pre': {
			isolate: false,
			padding: 0
		},
		'& .CodeMirror-scroll': {
			isolate: false,
			height: 'auto',
			overflowY: 'hidden',
			overflowX: 'auto'
		},
		'& .cm-error': {
			isolate: false,
			background: 'none'
		}
	}
})

export class Editor extends Component {
	static propTypes = {
		code: PropTypes.string.isRequired,
		onChange: PropTypes.func,
		editorConfig: PropTypes.object,
		classes: PropTypes.object.isRequired
	}
	static contextTypes = {
		config: PropTypes.object.isRequired
	}

	location = ''

	constructor() {
		super()
		this.handleChange = debounce(this.handleChange.bind(this), UPDATE_DELAY)
		this.location = document.location.href
	}

	shouldComponentUpdate(nextProps) {
		const differentLocation = this.location !== document.location.href
		return !!(
			(differentLocation || this.getEditorConfig(nextProps).readOnly) &&
			nextProps.code !== this.props.code
		)
	}

	getEditorConfig(props) {
		return {
			...this.context.config.editorConfig,
			...props.editorConfig
		}
	}

	handleChange(editor, metadata, newCode) {
		const { onChange } = this.props
		if (onChange) {
			onChange(newCode)
		}<commit_msg>fix: editor should update when changing page<commit_after>import React, { Component } from 'react'
import PropTypes from 'prop-types'
import debounce from 'lodash/debounce'
import { UnControlled as CodeMirror } from 'react-codemirror2'
import 'codemirror/mode/jsx/jsx'
import Styled from 'rsg-components/Styled'

// We’re explicitly specifying Webpack loaders here so we could skip specifying them in Webpack configuration.
// That way we could avoid clashes between our loaders and user loaders.
// eslint-disable-next-line import/no-unresolved
require('!!../../../loaders/style-loader!../../../loaders/css-loader!codemirror/lib/codemirror.css')
// eslint-disable-next-line import/no-unresolved
require('!!../../../loaders/style-loader!../../../loaders/css-loader!rsg-codemirror-theme.css')

const UPDATE_DELAY = 10

const styles = ({ fontFamily, space, fontSize }) => ({
	root: {
		'& .CodeMirror': {
			isolate: false,
			fontFamily: fontFamily.monospace,
			height: 'auto',
			padding: [[space[1], space[2]]],
			fontSize: fontSize.small
		},
		'& .CodeMirror pre': {
			isolate: false,
			padding: 0
		},
		'& .CodeMirror-scroll': {
			isolate: false,
			height: 'auto',
			overflowY: 'hidden',
			overflowX: 'auto'
		},
		'& .cm-error': {
			isolate: false,
			background: 'none'
		}
	}
})

export class Editor extends Component {
	static propTypes = {
		code: PropTypes.string.isRequired,
		onChange: PropTypes.func,
		editorConfig: PropTypes.object,
		classes: PropTypes.object.isRequired
	}
	static contextTypes = {
		config: PropTypes.object.isRequired
	}

	location = ''

	constructor() {
		super()
		this.handleChange = debounce(this.handleChange.bind(this), UPDATE_DELAY)
		this.location = document.location.href
	}

	shouldComponentUpdate(nextProps) {
		const differentLocation = this.location !== document.location.href
		if (
			(differentLocation || this.getEditorConfig(nextProps).readOnly) &&
			nextProps.code !== this.props.code
		) {
			this.location = document.location.href
			return true
		}
		return false
	}

	getEditorConfig(props) {
		return {
			...this.context.config.editorConfig,
			...props.editorConfig
		}
	}

	handleChange(editor, metadata, newCode) {
		const { onChange } = this.props
		if (onChange) {
			onChange(newCode)
		}
{'fraction_non_alphanumeric': 0.14388976733679693, 'fraction_numerical': 0.0027106392590919358, 'mean_word_length': 3.7358288770053476, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, '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': '937157', 'n_tokens_mistral': 1604, 'n_tokens_neox': 1440, 'n_words': 310}