commit changes new control MonacoEditor

Author: joaojmendes

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

@@ -1,5 +1,4 @@
-import { IJscriptDiagnosticsOptions } from "./IJscriptDiagnosticsOptions";
-import {  IJsonDiagnosticsOptions } from "./IJsonDiagnosticsOptions";
+
 import * as monaco from "monaco-editor";
 export enum Elanguages {
     typescript = 'typescript',
@@ -17,12 +16,12 @@ export enum Elanguages {
 }
 export interface IMonacoEditorProps {
 	value: string;
-	theme: string;
-	readOnly: boolean;
-	showLineNumbers: boolean;
-	showMiniMap: boolean;
-	onValueChange: (newValue:string, validationErrors:string[]) => void;
-  language: Elanguages;
+	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;
 

docs/documentation/docs/controls/MonacoEditor.md

@@ -22,10 +22,12 @@ export const MonacoEditor: React.FunctionComponent<IMonacoEditorProps> = (
     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) {

src/controls/monacoEditor/IJscriptDiagnosticsOptions.ts

@@ -12,7 +12,6 @@ export const useMonaco = () => {
   const [monaco, setMonaco] = useState<Monaco>(undefined);
   const [status, setStatus] = useState<EStatus>(EStatus.LOADING);
   const [error, setError] = useState<Error>(undefined);
-  // you can change the source of the monaco files
 
   useEffect(() => {
     (async () => {

src/controls/monacoEditor/IJsonDiagnosticsOptions.ts

@@ -1,34 +1,31 @@
+import { reactionSlotClassNames } from "@fluentui/react-northstar";
 import { WebPartContext } from "@microsoft/sp-webpart-base";
-import { IBasePickerStyles } from "office-ui-fabric-react/lib/Pickers";
 import { Stack } from "office-ui-fabric-react/lib/Stack";
 import * as React from "react";
-import { ListItemComments } from "../../../controls/listItemComments";
-import { Elanguages, MonacoEditor } from "../../../controls/monacoEditor";
-import { PeoplePicker, PrincipalType } from "../../../PeoplePicker";
+import {  MonacoEditor } from "../../../controls/monacoEditor";
 export interface ITestControlProps {
   context: WebPartContext;
 }
 
 export const TestControl: React.FunctionComponent<ITestControlProps> = (
   props: React.PropsWithChildren<ITestControlProps>
 ) => {
+  const defaultValue  = React.useMemo(() => {
+    return (['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'));
+  } , []);
+
+  const onValueChange = React.useCallback( (newValue: string, validationErrors: string[]): void => {
+  console.log(newValue);
+ } , []);
+
   return (
     <>
       <Stack>
         <MonacoEditor
-          value={""}
-          theme={"vs"}
-          readOnly={false}
-          showLineNumbers={true}
+          value={defaultValue}
           showMiniMap={true}
-
-          onValueChange={function (newValue: string, validationErrors: string[]): void {
-            console.log(newValue);
-
-          }}
-          language={
-            Elanguages.json
-          }
+          onValueChange={onValueChange}
+          language={"javascript"}
         />
       </Stack>
     </>