var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { Editor } from '@tinymce/tinymce-react';
import React, { useState } from 'react';
import { useI18nContext } from '../../state/I18n';
import { defaultPlugins, generateExternalPlugins, generateLanguageUrl, getValidLookupLocale, tinyMCEConfig, tinyMCESource, tinyMCEVersion, } from '../../utils/TinyMCE';
var errorRed = '#E61920';
function noop() { }
/**

 We use text editors to allow users to enter multiple lines of formatted text.

 If users need to add unformatted text, see Text Area.

 @since 10.19.0

 @see [Storybook](https://procore.github.io/core/latest/?path=/story/texteditor--disabled-state)

 @see [Design Guidelines](https://design.procore.com/text-editor)

 */
export function TextEditor(_a) {
    var _b, _c;
    var error = _a.error, initOverrides = _a.init, locale = _a.locale, _d = _a.onChange, onChange = _d === void 0 ? noop : _d, _onInit = _a.onInit, _e = _a.plugins, plugins = _e === void 0 ? defaultPlugins : _e, props = __rest(_a, ["error", "init", "locale", "onChange", "onInit", "plugins"]);
    var contextLocale = useI18nContext().locale;
    var onEditorChange = function (_, editor) {
        onChange(editor.getContent());
    };
    var ref = React.useRef();
    var updateError = function () {
        if (ref.current) {
            if (error) {
                ref.current.style.borderColor = errorRed;
            }
            else {
                ref.current.style.borderColor = '';
            }
        }
    };
    React.useEffect(function () {
        updateError();
    }, [error]);
    var onInit = function (event, editor) {
        ref.current = editor.editorContainer;
        updateError();
        _onInit && _onInit(event, editor);
    };
    var derivedInitial = useState((_b = props.initialValue) !== null && _b !== void 0 ? _b : props.value)[0];
    return (React.createElement(Editor, __assign({ init: __assign(__assign(__assign({}, tinyMCEConfig), { external_plugins: generateExternalPlugins(plugins), language_url: generateLanguageUrl(locale || contextLocale), language: getValidLookupLocale(locale || contextLocale) }), initOverrides), tinymceScriptSrc: "".concat(tinyMCESource, "/").concat(tinyMCEVersion, "/tinymce.min.js"), onInit: onInit, onEditorChange: onEditorChange }, props, { value: (_c = props.value) !== null && _c !== void 0 ? _c : props.initialValue, initialValue: derivedInitial })));
}
/**
 * @deprecated
 * The `TextEditorProvider` provider is no longer needed, `<TextEditor />` can be used on its own.
 *
 * **Before**
 *
 * ```
 * <TextEditorProvider>
 *   <TextEditor value="Hello World" />`
 * </TextEditorProvider>
 * ```
 *
 * **After**
 *
 * `<TextEditor value="Hello World" />`
 *
 * @deprecatedSince 10.20.0
 */
export function TextEditorProvider(_a) {
    var children = _a.children;
    return React.createElement(React.Fragment, null, children);
}
TextEditor.displayName = 'TextEditor';
export default TextEditor;
//# sourceMappingURL=TextEditor.js.map