ra-input-rich-text/esm/index.js

<RichTextInput> component for react-admin, useful for editing HTML code in admin GUIs.

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    }
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import debounce from 'lodash/debounce';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Quill from 'quill';
import { addField } from 'ra-core';
import FormHelperText from '@material-ui/core/FormHelperText';
import FormControl from '@material-ui/core/FormControl';
import { withStyles } from '@material-ui/core/styles';
import styles from './styles';
var RichTextInput = /** @class */ (function (_super) {
    __extends(RichTextInput, _super);
    function RichTextInput() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.onTextChange = function () {
            var value = _this.editor.innerHTML == '<p><br></p>' ? '' : _this.editor.innerHTML;
            _this.props.input.onChange(value);
        };
        _this.updateDivRef = function (ref) {
            _this.divRef = ref;
        };
        return _this;
    }
    RichTextInput.prototype.componentDidMount = function () {
        var _a = this.props, value = _a.input.value, toolbar = _a.toolbar;
        this.quill = new Quill(this.divRef, {
            modules: { toolbar: toolbar },
            theme: 'snow',
        });
        this.quill.setContents(this.quill.clipboard.convert(value));
        this.editor = this.divRef.querySelector('.ql-editor');
        this.quill.on('text-change', debounce(this.onTextChange, 500));
    };
    RichTextInput.prototype.componentWillUnmount = function () {
        this.quill.off('text-change', this.onTextChange);
        this.quill = null;
    };
    RichTextInput.prototype.render = function () {
        var _a = this.props.meta, error = _a.error, _b = _a.helperText, helperText = _b === void 0 ? false : _b;
        return (React.createElement(FormControl, { error: error !== null && error != undefined, fullWidth: this.props.fullWidth, className: "ra-rich-text-input" },
            React.createElement("div", { ref: this.updateDivRef }),
            error && React.createElement(FormHelperText, { error: true }, error),
            helperText && React.createElement(FormHelperText, null, helperText)));
    };
    RichTextInput.propTypes = {
        addLabel: PropTypes.bool.isRequired,
        classes: PropTypes.object,
        input: PropTypes.object,
        label: PropTypes.string,
        meta: PropTypes.object,
        options: PropTypes.object,
        source: PropTypes.string,
        toolbar: PropTypes.oneOfType([PropTypes.array, PropTypes.bool]),
        fullWidth: PropTypes.bool,
    };
    RichTextInput.defaultProps = {
        addLabel: true,
        options: {},
        record: {},
        toolbar: true,
        fullWidth: true,
    };
    return RichTextInput;
}(Component));
export { RichTextInput };
var RichRextInputWithField = addField(withStyles(styles)(RichTextInput));
RichRextInputWithField.defaultProps = {
    addLabel: true,
    fullWidth: true,
};
export default RichRextInputWithField;