@pnp/spfx-controls-react 3.7.0-beta.1939354 → 3.7.0-beta.1948936

package/lib/common/telemetry/version.js

@@ -1,2 +1,2 @@
-export var version = "3.7.0-beta.1939354";
+export var version = "3.7.0-beta.1948936";
 //# sourceMappingURL=version.js.map

package/lib/controls/listPicker/IListPicker.d.ts

@@ -1,6 +1,6 @@
-import { LibsOrderBy } from "../../services/ISPService";
-import { BaseComponentContext } from '@microsoft/sp-component-base';
 import { IDropdownOption } from "office-ui-fabric-react/lib/Dropdown";
+import { BaseComponentContext } from "@microsoft/sp-component-base";
+import { LibsOrderBy } from "../../services/ISPService";
 export interface IListPickerProps {
     /**
     * The web part context

package/lib/controls/listPicker/IListPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IListPicker.d.ts","sourceRoot":"","sources":["../../../src/controls/listPicker/IListPicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AAEtE,MAAM,WAAW,gBAAgB;IAC/B;;MAEE;IACF,OAAO,EAAE,oBAAoB,CAAC;IAC9B;;MAEE;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;MAEE;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;MAEE;IACF,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACjC;;MAEE;IACF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;MAEE;IACF,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;MAGE;IACF,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACjC;;MAEE;IACF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;MAEE;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;MAEE;IACF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;MAEE;IACF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;MAEE;IACF,kBAAkB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3D;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;MAEE;IACF,aAAa,CAAC,EAAE,MAAM,CAAC;IACrB;;IAEA;IACC,aAAa,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,gBAAgB;IAC/B;;MAEE;IACF,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B;;MAEE;IACF,OAAO,EAAE,OAAO,CAAC;IACjB;;MAEE;IACF,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAClC"}
+{"version":3,"file":"IListPicker.d.ts","sourceRoot":"","sources":["../../../src/controls/listPicker/IListPicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AAEtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAEpE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,MAAM,WAAW,gBAAgB;IAC/B;;MAEE;IACF,OAAO,EAAE,oBAAoB,CAAC;IAC9B;;MAEE;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;MAEE;IACF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;MAEE;IACF,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACjC;;MAEE;IACF,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;MAEE;IACF,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;MAGE;IACF,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACjC;;MAEE;IACF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;MAEE;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;MAEE;IACF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;MAEE;IACF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;MAEE;IACF,kBAAkB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3D;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;MAEE;IACF,aAAa,CAAC,EAAE,MAAM,CAAC;IACrB;;IAEA;IACC,aAAa,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,gBAAgB;IAC/B;;MAEE;IACF,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B;;MAEE;IACF,OAAO,EAAE,OAAO,CAAC;IACjB;;MAEE;IACF,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAClC"}

package/lib/controls/monacoEditor/Error.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export interface IErrorProps {
+    error: Error;
+    show: boolean;
+}
+export declare const Error: React.FunctionComponent<IErrorProps>;
+//# sourceMappingURL=Error.d.ts.map

package/lib/controls/monacoEditor/Error.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Error.d.ts","sourceRoot":"","sources":["../../../src/controls/monacoEditor/Error.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;CACf;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAatD,CAAC"}

package/lib/controls/monacoEditor/Error.js

@@ -0,0 +1,12 @@
+import { Stack } from "office-ui-fabric-react/lib/components/Stack";
+import { MessageBarType, MessageBar } from "office-ui-fabric-react/lib/MessageBar";
+import * as React from "react";
+export var Error = function (props) {
+    var error = props.error, show = props.show;
+    return (React.createElement(React.Fragment, null,
+        "(show && error) ?",
+        React.createElement(Stack, { horizontal: true, horizontalAlign: "start" },
+            React.createElement(MessageBar, { isMultiline: true, messageBarType: MessageBarType.error }, error.message)),
+        ": null;"));
+};
+//# sourceMappingURL=Error.js.map

package/lib/controls/monacoEditor/Error.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Error.js","sourceRoot":"","sources":["../../../src/controls/monacoEditor/Error.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,6CAA6C,CAAC;AACpE,OAAO,EAAE,cAAc,EAAG,UAAU,EAAC,MAAM,uCAAuC,CAAC;AACnF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,CAAC,IAAM,KAAK,GAAyC,UAAC,KAA2C;IAC7F,IAAA,KAAK,GAAW,KAAK,MAAhB,EAAE,IAAI,GAAK,KAAK,KAAV,CAAW;IAC9B,OAAO,CACL;;QAEE,oBAAC,KAAK,IAAC,UAAU,QAAC,eAAe,EAAC,OAAO;YACvC,oBAAC,UAAU,IAAC,WAAW,QAAC,cAAc,EAAE,cAAc,CAAC,KAAK,IACzD,KAAK,CAAC,OAAO,CACH,CACP;kBAEP,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/lib/controls/monacoEditor/IMonacoEditorProps.d.ts

@@ -0,0 +1,25 @@
+import * as monaco from "monaco-editor";
+export declare enum Elanguages {
+    typescript = "typescript",
+    javascript = "javascript",
+    css = "css",
+    html = "html",
+    json = "json",
+    xml = "xml",
+    markdown = "markdown",
+    less = "less",
+    scss = "scss",
+    handlebars = "handlebars"
+}
+export interface IMonacoEditorProps {
+    value: string;
+    theme?: string;
+    readOnly?: boolean;
+    showLineNumbers?: boolean;
+    showMiniMap?: boolean;
+    onValueChange?: (newValue: string, validationErrors: string[]) => void;
+    language: string | Elanguages;
+    jsonDiagnosticsOptions?: monaco.languages.json.DiagnosticsOptions;
+    jscriptDiagnosticsOptions?: monaco.languages.typescript.DiagnosticsOptions;
+}
+//# sourceMappingURL=IMonacoEditorProps.d.ts.map

package/lib/controls/monacoEditor/IMonacoEditorProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IMonacoEditorProps.d.ts","sourceRoot":"","sources":["../../../src/controls/monacoEditor/IMonacoEditorProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAExC,oBAAY,UAAU;IAClB,UAAU,eAAe;IACzB,UAAU,eAAe;IACzB,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,IAAI,SAAS;IACb,GAAG,QAAQ;IACX,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,IAAI,SAAS;IACb,UAAU,eAAe;CAG5B;AACD,MAAM,WAAW,kBAAkB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAC,MAAM,EAAE,gBAAgB,EAAC,MAAM,EAAE,KAAK,IAAI,CAAC;IACpE,QAAQ,EAAE,MAAM,GAAG,UAAU,CAAC;IAC9B,sBAAsB,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,kBAAkB,CAAC;IAClE,yBAAyB,CAAC,EAAE,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,kBAAkB,CAAC;CAE5E"}

package/lib/controls/monacoEditor/IMonacoEditorProps.js

@@ -0,0 +1,14 @@
+export var Elanguages;
+(function (Elanguages) {
+    Elanguages["typescript"] = "typescript";
+    Elanguages["javascript"] = "javascript";
+    Elanguages["css"] = "css";
+    Elanguages["html"] = "html";
+    Elanguages["json"] = "json";
+    Elanguages["xml"] = "xml";
+    Elanguages["markdown"] = "markdown";
+    Elanguages["less"] = "less";
+    Elanguages["scss"] = "scss";
+    Elanguages["handlebars"] = "handlebars";
+})(Elanguages || (Elanguages = {}));
+//# sourceMappingURL=IMonacoEditorProps.js.map

package/lib/controls/monacoEditor/IMonacoEditorProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IMonacoEditorProps.js","sourceRoot":"","sources":["../../../src/controls/monacoEditor/IMonacoEditorProps.ts"],"names":[],"mappings":"AAEA,MAAM,CAAN,IAAY,UAaX;AAbD,WAAY,UAAU;IAClB,uCAAyB,CAAA;IACzB,uCAAyB,CAAA;IACzB,yBAAW,CAAA;IACX,2BAAa,CAAA;IACb,2BAAa,CAAA;IACb,yBAAW,CAAA;IACX,mCAAqB,CAAA;IACrB,2BAAa,CAAA;IACb,2BAAa,CAAA;IACb,uCAAyB,CAAA;AAG7B,CAAC,EAbW,UAAU,KAAV,UAAU,QAarB"}

package/lib/controls/monacoEditor/MonacoEditor.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { IMonacoEditorProps } from "./IMonacoEditorProps";
+export declare const MonacoEditor: React.FunctionComponent<IMonacoEditorProps>;
+//# sourceMappingURL=MonacoEditor.d.ts.map

package/lib/controls/monacoEditor/MonacoEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonacoEditor.d.ts","sourceRoot":"","sources":["../../../src/controls/monacoEditor/MonacoEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAO1D,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CA6FpE,CAAC"}

package/lib/controls/monacoEditor/MonacoEditor.js

@@ -0,0 +1,77 @@
+import { isEmpty } from "lodash";
+import * as React from "react";
+import { Elanguages } from ".";
+import { useMonacoEditorStyles } from "./useMonacoEditorStyles";
+import { EStatus, useMonaco } from "./useMonaco";
+import { Spinner, SpinnerSize } from "office-ui-fabric-react/lib/Spinner";
+import { Stack } from "office-ui-fabric-react/lib/Stack";
+import { Error } from "./Error";
+export 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);
+    var controlClasses = useMonacoEditorStyles().controlClasses;
+    var _b = 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 === Elanguages.json) {
+                        var jsonParsed = JSON.parse(currentValue);
+                    }
+                }
+                catch (e) {
+                    validationErrors.push(e.message);
+                }
+                console.log(currentValue);
+                onValueChange(currentValue, validationErrors);
+            }
+        }
+    }, [onValueChange]);
+    React.useEffect(function () {
+        if (status != EStatus.LOADED)
+            return;
+        if (!isEmpty(jsonDiagnosticsOptions) && language === Elanguages.json) {
+            monaco.languages.json.jsonDefaults.setDiagnosticsOptions(jsonDiagnosticsOptions);
+        }
+        if (!isEmpty(jscriptDiagnosticsOptions) && language === 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 === EStatus.LOADING) {
+        return (React.createElement(Stack, { horizontal: true, horizontalAlign: "center", tokens: { padding: 25 } },
+            React.createElement(Spinner, { size: SpinnerSize.medium })));
+    }
+    if (status === EStatus.ERROR) {
+        return React.createElement(Error, { error: error, show: true });
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: containerRef, className: controlClasses.containerStyles })));
+};
+//# sourceMappingURL=MonacoEditor.js.map

package/lib/controls/monacoEditor/MonacoEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonacoEditor.js","sourceRoot":"","sources":["../../../src/controls/monacoEditor/MonacoEditor.tsx"],"names":[],"mappings":"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"}

package/lib/controls/monacoEditor/index.d.ts

@@ -0,0 +1,3 @@
+export * from './IMonacoEditorProps';
+export * from './MonacoEditor';
+//# sourceMappingURL=index.d.ts.map

package/lib/controls/monacoEditor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/controls/monacoEditor/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC"}

package/lib/controls/monacoEditor/index.js

@@ -0,0 +1,3 @@
+export * from './IMonacoEditorProps';
+export * from './MonacoEditor';
+//# sourceMappingURL=index.js.map

package/lib/controls/monacoEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/controls/monacoEditor/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC"}

package/lib/controls/monacoEditor/useMonaco.d.ts

@@ -0,0 +1,11 @@
+export declare enum EStatus {
+    LOADING = 0,
+    LOADED = 1,
+    ERROR = 2
+}
+export declare const useMonaco: () => {
+    monaco: typeof import("monaco-editor");
+    status: EStatus;
+    error: Error;
+};
+//# sourceMappingURL=useMonaco.d.ts.map

package/lib/controls/monacoEditor/useMonaco.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMonaco.d.ts","sourceRoot":"","sources":["../../../src/controls/monacoEditor/useMonaco.ts"],"names":[],"mappings":"AAIA,oBAAY,OAAO;IACjB,OAAO,IAAA;IACP,MAAM,IAAA;IACN,KAAK,IAAA;CACN;AAED,eAAO,MAAM,SAAS;;;;CAyBrB,CAAC"}

package/lib/controls/monacoEditor/useMonaco.js

@@ -0,0 +1,81 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { useState, useEffect } from "react";
+import loader from "@monaco-editor/loader";
+var CDN_PATH_TO_MONACO_EDITOR = "https://cdn.jsdelivr.net/npm/monaco-editor@0.32.1/min/vs";
+export var EStatus;
+(function (EStatus) {
+    EStatus[EStatus["LOADING"] = 0] = "LOADING";
+    EStatus[EStatus["LOADED"] = 1] = "LOADED";
+    EStatus[EStatus["ERROR"] = 2] = "ERROR";
+})(EStatus || (EStatus = {}));
+export var useMonaco = function () {
+    var _a = useState(undefined), monaco = _a[0], setMonaco = _a[1];
+    var _b = useState(EStatus.LOADING), status = _b[0], setStatus = _b[1];
+    var _c = useState(undefined), error = _c[0], setError = _c[1];
+    useEffect(function () {
+        (function () { return __awaiter(void 0, void 0, void 0, function () {
+            var monacoObj, error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        loader.config({ paths: { vs: CDN_PATH_TO_MONACO_EDITOR } });
+                        return [4 /*yield*/, loader.init()];
+                    case 1:
+                        monacoObj = _a.sent();
+                        setStatus(EStatus.LOADED);
+                        setMonaco(monacoObj);
+                        return [3 /*break*/, 3];
+                    case 2:
+                        error_1 = _a.sent();
+                        setStatus(EStatus.ERROR);
+                        setMonaco(undefined);
+                        setError(error_1);
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        }); })();
+    }, []);
+    return {
+        monaco: monaco,
+        status: status,
+        error: error,
+    };
+};
+//# sourceMappingURL=useMonaco.js.map

package/lib/controls/monacoEditor/useMonaco.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMonaco.js","sourceRoot":"","sources":["../../../src/controls/monacoEditor/useMonaco.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,MAAkB,MAAM,uBAAuB,CAAC;AAEvD,IAAM,yBAAyB,GAAG,0DAA0D,CAAC;AAC7F,MAAM,CAAN,IAAY,OAIX;AAJD,WAAY,OAAO;IACjB,2CAAO,CAAA;IACP,yCAAM,CAAA;IACN,uCAAK,CAAA;AACP,CAAC,EAJW,OAAO,KAAP,OAAO,QAIlB;AAED,MAAM,CAAC,IAAM,SAAS,GAAG;IACjB,IAAA,KAAsB,QAAQ,CAAS,SAAS,CAAC,EAAhD,MAAM,QAAA,EAAE,SAAS,QAA+B,CAAC;IAClD,IAAA,KAAsB,QAAQ,CAAU,OAAO,CAAC,OAAO,CAAC,EAAvD,MAAM,QAAA,EAAE,SAAS,QAAsC,CAAC;IACzD,IAAA,KAAoB,QAAQ,CAAQ,SAAS,CAAC,EAA7C,KAAK,QAAA,EAAE,QAAQ,QAA8B,CAAC;IAErD,SAAS,CAAC;QACR,CAAC;;;;;;wBAEG,MAAM,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,yBAAyB,EAAE,EAAE,CAAC,CAAC;wBAC1C,qBAAM,MAAM,CAAC,IAAI,EAAE,EAAA;;wBAA/B,SAAS,GAAG,SAAmB;wBACrC,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;wBAC1B,SAAS,CAAC,SAAS,CAAC,CAAC;;;;wBAErB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;wBACzB,SAAS,CAAC,SAAS,CAAC,CAAC;wBACrB,QAAQ,CAAC,OAAK,CAAC,CAAC;;;;;aAEnB,CAAC,EAAE,CAAC;IACP,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,MAAM,QAAA;QACN,MAAM,QAAA;QACN,KAAK,OAAA;KACN,CAAC;AACJ,CAAC,CAAC"}

package/lib/controls/monacoEditor/useMonacoEditorStyles.d.ts

@@ -0,0 +1,8 @@
+export declare const useMonacoEditorStyles: () => {
+    controlClasses: import("office-ui-fabric-react").IProcessedStyleSet<{
+        containerStyles: {
+            height: string;
+        };
+    }>;
+};
+//# sourceMappingURL=useMonacoEditorStyles.d.ts.map

package/lib/controls/monacoEditor/useMonacoEditorStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMonacoEditorStyles.d.ts","sourceRoot":"","sources":["../../../src/controls/monacoEditor/useMonacoEditorStyles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,qBAAqB;;;;;;CAUjC,CAAC"}

package/lib/controls/monacoEditor/useMonacoEditorStyles.js

@@ -0,0 +1,13 @@
+import { mergeStyleSets } from "office-ui-fabric-react";
+import React from "react";
+export var useMonacoEditorStyles = function () {
+    var controlClasses = React.useMemo(function () {
+        return mergeStyleSets({
+            containerStyles: {
+                height: "800px",
+            }
+        });
+    }, []);
+    return { controlClasses: controlClasses };
+};
+//# sourceMappingURL=useMonacoEditorStyles.js.map

package/lib/controls/monacoEditor/useMonacoEditorStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMonacoEditorStyles.js","sourceRoot":"","sources":["../../../src/controls/monacoEditor/useMonacoEditorStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,IAAM,qBAAqB,GAAG;IACnC,IAAM,cAAc,GAAI,KAAK,CAAC,OAAO,CAAC;QAClC,OAAO,cAAc,CAAC;YACpB,eAAe,EAAC;gBACd,MAAM,EAAE,OAAO;aAChB;SACF,CAAC,CAAC;IACP,CAAC,EAAC,EAAE,CAAC,CAAC;IAEN,OAAO,EAAC,cAAc,gBAAA,EAAE,CAAC;AAC3B,CAAC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnp/spfx-controls-react",
   "description": "Reusable React controls for SharePoint Framework solutions",
-  "version": "3.7.0-beta.1939354",
+  "version": "3.7.0-beta.1948936",
   "scripts": {
     "build": "gulp build",
     "clean": "gulp clean",
@@ -34,6 +34,7 @@
     "@microsoft/sp-office-ui-fabric-core": "1.14.0",
     "@microsoft/sp-property-pane": "1.14.0",
     "@microsoft/sp-webpart-base": "1.14.0",
+    "@monaco-editor/loader": "^1.2.0",
     "@pnp/sp": "2.5.0",
     "@pnp/telemetry-js": "2.0.0",
     "@popperjs/core": "2.5.4",
@@ -48,6 +49,7 @@
     "he": "^1.2.0",
     "lodash": "4.17.21",
     "markdown-it": "^12.3.2",
+    "monaco-editor": "^0.32.1",
     "office-ui-fabric-react": "7.174.1",
     "react": "16.13.1",
     "react-accessible-accordion": "^3.3.3",
@@ -96,6 +98,7 @@
     "spfx-fast-serve-helpers": "~1.13.0",
     "ts-jest": "^25.5.1",
     "tslib": "2.0.0",
+    "tslint-microsoft-contrib": "6.2.0",
     "webpack-bundle-analyzer": "^4.1.0"
   },
   "repository": {