<commit_before>import React, { Component } from 'react';

import marked from 'marked';

/**
 * Provides inline editing ability.
 * props.value will be displayed using whatever element
 * is passed in through props.displayElement.
 * 
 * When clicked, an <input /> or <textarea></textarea> 
 * will be displayed (depending on the multilineEditor prop)
 * to allow editing of props.value.
 * 
 * Example:
 * 
 * <InlineEdit displayElement="h1" value="example" />
 * 
 * This will display <h1>example</h1> which will turn into
 * <input type="text" value="example" /> when clicked.
 */
export default class InlineEdit extends Component {
    constructor(props) {
        super(props);

        this.state = {
            displayElement: props.displayElement || 'p',
            multilineEditor: props.multilineEditor || false,
            isEditing: props.isEditing || false,
            value: props.value
        };
    }

    /**
     * Handles activation of edit mode.
     */
    handleEditModeActivation = () => {
        if (this.state.isEditing) return;

        this.setState({ isEditing: true });
    }

    /**
     * Handles activation of display mode.
     */
    handleDisplayModeActivation = () => {
        if (!this.state.isEditing) return;

        this.setState({ isEditing: false });
    }

    /**
     * Handles editor value changes.
     */
    handleValueChanged = (e) => {
        this.setState({ value: e.target.value });
    }

    /**
     * Select's all text within the editor when
     * it's focused.
     */
    handleEditorFocused = (e) => {
        e.target.select();
    }

    /**
     * Handles submission of the editor.
     * 
     * Editors will be submitted onBlur or can be manually
     * submitted by pressing Enter for the single line editor
     * or Shift + Enter for the multiline editor.
     * 
     * Upon submission, InlineEdit emits an event by calling
     * props.onChange(fieldName, fieldValue)
     */
    handleEditorSubmitted = (e) => {
        if (this.state.multilineEditor && e.shiftKey && e.key == 'Enter') {
            this.handleDisplayModeActivation();
        } else if (!this.state.multilineEditor && e.key == 'Enter') {
            this.handleDisplayModeActivation();
        } else {
            return;
        }

        if (this.props.onChange != null) {
            this.props.onChange(this.props.name, e.target.value)
        }
    }

    render() {
        var component;

        // Determine whether to render an editor or just the value.
        if (!this.state.isEditing) { // Value
            if (this.props.renderMarkdown) {
                component = (
                    <this.state.displayElement 
                        onClick={this.handleEditModeActivation}
                        dangerouslySetInnerHTML={{ __html: marked(this.state.value) }}>
                    </this.state.displayElement>
                );
            } else { // Editor
                component = (
                    <this.state.displayElement onClick={this.handleEditModeActivation}>
                        {this.state.value}
                    </this.state.displayElement>
                );
            }
        } else {
            if (this.state.multilineEditor) {
                component = (
                    <textarea
                        onBlur={this.handleDisplayModeActivation}
                        onChange={this.handleValueChanged}
                        onKeyPress={this.handleEditorSubmitted}
                        onFocus={this.handleEditorFocused}
                        autoFocus={true}
                        value={this.state.value} />
                );
            } else {
                component = (
                    <input 
                        type="text" 
                        value={this.state.value} 
                        onBlur={this.handleDisplayModeActivation}
                        onChange={this.handleValueChanged}
                        onKeyUp={this.handleEditorSubmitted}
                        onFocus={this.handleEditorFocused}
                        autoFocus={true} />
                );
            }
        }

        return <div>{component}</div>;
    }
}<commit_msg>Sanitize HTML before displaying markdown.<commit_after>import React, { Component } from 'react';

import marked from 'marked';

/**
 * Provides inline editing ability.
 * props.value will be displayed using whatever element
 * is passed in through props.displayElement.
 * 
 * When clicked, an <input /> or <textarea></textarea> 
 * will be displayed (depending on the multilineEditor prop)
 * to allow editing of props.value.
 * 
 * Example:
 * 
 * <InlineEdit displayElement="h1" value="example" />
 * 
 * This will display <h1>example</h1> which will turn into
 * <input type="text" value="example" /> when clicked.
 */
export default class InlineEdit extends Component {
    constructor(props) {
        super(props);
        marked.setOptions({ sanitize: true });
        
        this.state = {
            displayElement: props.displayElement || 'p',
            multilineEditor: props.multilineEditor || false,
            isEditing: props.isEditing || false,
            value: props.value
        };
    }

    /**
     * Handles activation of edit mode.
     */
    handleEditModeActivation = () => {
        if (this.state.isEditing) return;

        this.setState({ isEditing: true });
    }

    /**
     * Handles activation of display mode.
     */
    handleDisplayModeActivation = () => {
        if (!this.state.isEditing) return;

        this.setState({ isEditing: false });
    }

    /**
     * Handles editor value changes.
     */
    handleValueChanged = (e) => {
        this.setState({ value: e.target.value });
    }

    /**
     * Select's all text within the editor when
     * it's focused.
     */
    handleEditorFocused = (e) => {
        e.target.select();
    }

    /**
     * Handles submission of the editor.
     * 
     * Editors will be submitted onBlur or can be manually
     * submitted by pressing Enter for the single line editor
     * or Shift + Enter for the multiline editor.
     * 
     * Upon submission, InlineEdit emits an event by calling
     * props.onChange(fieldName, fieldValue)
     */
    handleEditorSubmitted = (e) => {
        if (this.state.multilineEditor && e.shiftKey && e.key == 'Enter') {
            this.handleDisplayModeActivation();
        } else if (!this.state.multilineEditor && e.key == 'Enter') {
            this.handleDisplayModeActivation();
        } else {
            return;
        }

        if (this.props.onChange != null) {
            this.props.onChange(this.props.name, e.target.value)
        }
    }

    render() {
        var component;

        // Determine whether to render an editor or just the value.
        if (!this.state.isEditing) { // Value
            if (this.props.renderMarkdown) {
                component = (
                    <this.state.displayElement 
                        onClick={this.handleEditModeActivation}
                        dangerouslySetInnerHTML={{ __html: marked(this.state.value) }}>
                    </this.state.displayElement>
                );
            } else { // Editor
                component = (
                    <this.state.displayElement onClick={this.handleEditModeActivation}>
                        {this.state.value}
                    </this.state.displayElement>
                );
            }
        } else {
            if (this.state.multilineEditor) {
                component = (
                    <textarea
                        onBlur={this.handleDisplayModeActivation}
                        onChange={this.handleValueChanged}
                        onKeyPress={this.handleEditorSubmitted}
                        onFocus={this.handleEditorFocused}
                        autoFocus={true}
                        value={this.state.value} />
                );
            } else {
                component = (
                    <input 
                        type="text" 
                        value={this.state.value} 
                        onBlur={this.handleDisplayModeActivation}
                        onChange={this.handleValueChanged}
                        onKeyUp={this.handleEditorSubmitted}
                        onFocus={this.handleEditorFocused}
                        autoFocus={true} />
                );
            }
        }

        return <div>{component}</div>;
    }
}
{'fraction_non_alphanumeric': 0.10611574128418828, 'fraction_numerical': 0.0007043080173729311, 'mean_word_length': 1.562406015037594, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 43, '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': '4728774', 'n_tokens_mistral': 2253, 'n_tokens_neox': 2126, 'n_words': 491}