@pnp/spfx-property-controls/lib-commonjs/propertyFields/monacoEditor/monacoEditorControl/MonacoEditor.js

Reusable property pane controls for SharePoint Framework solutions

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MonacoEditor = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const lodash_1 = require("lodash");
const Spinner_1 = require("@fluentui/react/lib/Spinner");
const Stack_1 = require("@fluentui/react/lib/Stack");
const _1 = require("./");
const Error_1 = require("./Error");
const useMonaco_1 = require("./useMonaco");
const useMonacoEditorStyles_1 = require("./useMonacoEditorStyles");
const MonacoEditor = (props) => {
    const { value, onValueChange, theme, readOnly, showLineNumbers, showMiniMap, language, jsonDiagnosticsOptions, jscriptDiagnosticsOptions, } = props || {};
    const containerRef = React.useRef(null);
    const editorRef = React.useRef(null);
    const { controlClasses } = (0, useMonacoEditorStyles_1.useMonacoEditorStyles)();
    const { monaco, status, error } = (0, useMonaco_1.useMonaco)();
    const onDidChangeModelContent = React.useCallback((e) => {
        if (editorRef.current) {
            const currentValue = editorRef.current.getValue();
            if (currentValue !== value) {
                const validationErrors = [];
                try {
                    if (language === _1.Elanguages.json) {
                        JSON.parse(currentValue);
                    }
                }
                catch (_a) {
                    validationErrors.push(error instanceof Error_1.Error ? error.message : String(error));
                }
                onValueChange(currentValue, validationErrors);
            }
        }
    }, [onValueChange]);
    React.useEffect(() => {
        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((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 () => {
            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