Merge branch 'joaojmendes-monacoEditor' into dev

Author: AJIXuMuK

docs/documentation/docs/assets/MonacoEditor1.png

@@ -0,0 +1,54 @@
+# Monaco Editor control
+
+This control is a implementatiopn of Monaco Editor.
+
+Here is an example of the control:
+
+![monacoeditor](../assets/MonacoEditor1.png)
+
+`MonacoEditor`  dark theme:
+
+![monacoeditor](../assets/MonacoEditor2.png)
+
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
+- Import the control into your component:
+
+```TypeScript
+import { MonacoEditor } from "@pnp/spfx-controls-react/lib/MonacoEditor";
+```
+
+- Use the `MonacoEditor` control in your code as follows:
+
+```TypeScript
+ <MonacoEditor value={defaultValue}
+               showMiniMap={true}
+               onValueChange={onValueChange}
+               language={"javascript"}/>
+```
+
+- The `onValueChange` change event returns the upadated code and array with messages of errors on validation and can be implemented as follows:
+  **this validation is done only to JSON language
+
+```TypeScript
+  const onValueChange = React.useCallback((newValue: string, validationErrors: string[]): void => {console.log(newValue);} , []);
+```
+
+## Implementation
+
+The `MonacoEditor` control can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| value | string   | yes | default content for editor |
+| theme | string | no | theme used by editor , two themes are supported 'vs'  and 'vs-dark', default 'vs' |
+| readOnly | boolean | no | indecate if editor is in read only mode |
+| showLineNumbers | boolean | no | editor show linenumber or not, default : yes|
+| onValueChange |(newValue:string, validationErrors:string[]) => void | no | function to get code changes, return an array with validation error in case of language is 'JSON' |
+| language |string | yes | editor code language, please see https://microsoft.github.io/monaco-editor/index.html for supported languages|
+| jsonDiagnosticsOptions |monaco.languages.json.DiagnosticsOptions | no | define options to JSON validation, please see  https://microsoft.github.io/monaco-editor/index.html for more details |
+| jscriptDiagnosticsOptions | monaco.languages.typescript.DiagnosticsOptions | no | define options to javascript or typescript validation, please see  https://microsoft.github.io/monaco-editor/index.html for more details |
+
+

docs/documentation/docs/assets/MonacoEditor2.png

@@ -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": {

docs/documentation/docs/controls/MonacoEditor.md

@@ -1,7 +1,9 @@
-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-lock.json

@@ -0,0 +1,24 @@
+
+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 interface IErrorProps {
+  error: Error;
+  show: boolean;
+}
+
+export const Error: React.FunctionComponent<IErrorProps> = (props: React.PropsWithChildren<IErrorProps>) => {
+  const { error, show } = props;
+  return (
+    <>
+      (show && error) ?
+      <Stack horizontal horizontalAlign="start">
+        <MessageBar isMultiline messageBarType={MessageBarType.error}>
+          {error.message}
+        </MessageBar>
+      </Stack>
+      : null;
+    </>
+  );
+};

package.json

@@ -0,0 +1,28 @@
+import * as monaco from "monaco-editor";
+
+export 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;
+
+}

src/controls/listPicker/IListPicker.ts

@@ -0,0 +1,104 @@
+import { isEmpty } from "lodash";
+import * as React from "react";
+import { Elanguages } from ".";
+import { IMonacoEditorProps } from "./IMonacoEditorProps";
+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 const MonacoEditor: React.FunctionComponent<IMonacoEditorProps> = (
+  props: React.PropsWithChildren<IMonacoEditorProps>
+) => {
+  const {
+    value,
+    onValueChange,
+    theme,
+    readOnly,
+    showLineNumbers,
+    showMiniMap,
+    language,
+    jsonDiagnosticsOptions,
+    jscriptDiagnosticsOptions,
+  } = props || ({} as IMonacoEditorProps);
+
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const editorRef = React.useRef<any>(null);
+  const { controlClasses } = useMonacoEditorStyles();
+  const { monaco, status, error } = useMonaco();
+
+  const onDidChangeModelContent = React.useCallback(
+    (e: any): void => {
+      if (editorRef.current) {
+        let currentValue: string = editorRef.current.getValue();
+        if (currentValue !== value) {
+          let validationErrors: string[] = [];
+          try {
+            if (language === Elanguages.json) {
+              let jsonParsed: any = JSON.parse(currentValue);
+            }
+          } catch (e) {
+            validationErrors.push(e.message);
+          }
+          console.log(currentValue);
+          onValueChange(currentValue, validationErrors);
+        }
+      }
+    },
+    [onValueChange]
+  );
+
+  React.useEffect(() => {
+    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((m: any) => {
+      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 () => {
+      editorRef?.current?.dispose();
+    };
+  }, [jsonDiagnosticsOptions, jscriptDiagnosticsOptions, monaco]);
+
+  if (status === EStatus.LOADING) {
+    return (
+      <Stack horizontal horizontalAlign="center" tokens={{ padding: 25 }}>
+        <Spinner size={SpinnerSize.medium} />
+      </Stack>
+    );
+  }
+  if (status === EStatus.ERROR) {
+    return <Error error={error} show={true} />;
+  }
+  return (
+    <>
+      <div ref={containerRef} className={controlClasses.containerStyles} />
+    </>
+  );
+};

src/controls/monacoEditor/Error.tsx

@@ -0,0 +1,2 @@
+export * from './IMonacoEditorProps';
+export * from './MonacoEditor';