@pnp/spfx-controls-react/lib-commonjs/controls/monacoEditor/MonacoEditor.js

Reusable React controls for SharePoint Framework solutions

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MonacoEditor = void 0;
var tslib_1 = require("tslib");
var lodash_1 = require("lodash");
var React = tslib_1.__importStar(require("react"));
var _1 = require(".");
var useMonacoEditorStyles_1 = require("./useMonacoEditorStyles");
var useMonaco_1 = require("./useMonaco");
var Spinner_1 = require("@fluentui/react/lib/Spinner");
var Stack_1 = require("@fluentui/react/lib/Stack");
var Error_1 = require("./Error");
var MonacoEditor = function (props) {
    var _a = props || {}, value = _a.value, onValueChange = _a.onValueChange, theme = _a.theme, readOnly = _a.readOnly, showLineNumbers = _a.showLineNumbers, showMiniMap = _a.showMiniMap, language = _a.language, jsonDiagnosticsOptions = _a.jsonDiagnosticsOptions, jscriptDiagnosticsOptions = _a.jscriptDiagnosticsOptions;
    var containerRef = React.useRef(null);
    var editorRef = React.useRef(null); // eslint-disable-line @typescript-eslint/no-explicit-any
    var controlClasses = (0, useMonacoEditorStyles_1.useMonacoEditorStyles)().controlClasses;
    var _b = (0, useMonaco_1.useMonaco)(), monaco = _b.monaco, status = _b.status, error = _b.error;
    var onDidChangeModelContent = React.useCallback(function (e) {
        if (editorRef.current) {
            var currentValue = editorRef.current.getValue();
            if (currentValue !== value) {
                var validationErrors = [];
                try {
                    if (language === _1.Elanguages.json) {
                        JSON.parse(currentValue);
                    }
                }
                catch (e) {
                    validationErrors.push(e instanceof Error_1.Error ? e.message : String(e));
                }
                console.log(currentValue);
                onValueChange(currentValue, validationErrors);
            }
        }
    }, [onValueChange]);
    React.useEffect(function () {
        if (status !== useMonaco_1.EStatus.LOADED)
            return;
        if (!(0, lodash_1.isEmpty)(jsonDiagnosticsOptions) && language === _1.Elanguages.json) {
            monaco.languages.json.jsonDefaults.setDiagnosticsOptions(jsonDiagnosticsOptions);
        }
        if (!(0, lodash_1.isEmpty)(jscriptDiagnosticsOptions) && language === _1.Elanguages.javascript) {
            monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions(jscriptDiagnosticsOptions);
        }
        monaco.editor.onDidCreateModel(function (m) {
            m.updateOptions({
                tabSize: 2,
            });
        });
        //Create the MonacoEditor
        editorRef.current = monaco.editor.create(containerRef.current, {
            value: value,
            scrollBeyondLastLine: false,
            theme: theme,
            language: language,
            folding: true,
            readOnly: readOnly,
            lineNumbersMinChars: 4,
            lineNumbers: showLineNumbers ? "on" : "off",
            minimap: {
                enabled: showMiniMap,
            },
        });
        editorRef.current.onDidChangeModelContent(onDidChangeModelContent);
        return function () {
            var _a;
            (_a = editorRef === null || editorRef === void 0 ? void 0 : editorRef.current) === null || _a === void 0 ? void 0 : _a.dispose();
        };
    }, [jsonDiagnosticsOptions, jscriptDiagnosticsOptions, monaco]);
    if (status === useMonaco_1.EStatus.LOADING) {
        return (React.createElement(Stack_1.Stack, { horizontal: true, horizontalAlign: "center", tokens: { padding: 25 } },
            React.createElement(Spinner_1.Spinner, { size: Spinner_1.SpinnerSize.medium })));
    }
    if (status === useMonaco_1.EStatus.ERROR) {
        return React.createElement(Error_1.Error, { error: error, show: true });
    }
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { ref: containerRef, className: controlClasses.containerStyles })));
};
exports.MonacoEditor = MonacoEditor;
//# sourceMappingURL=MonacoEditor.js.map