commit chnages

Author: joaojmendes

package-lock.json

@@ -33,6 +33,7 @@
     "@microsoft/sp-office-ui-fabric-core": "1.13.1",
     "@microsoft/sp-property-pane": "1.13.1",
     "@microsoft/sp-webpart-base": "1.13.1",
+    "@monaco-editor/loader": "^1.2.0",
     "@pnp/sp": "2.5.0",
     "@pnp/telemetry-js": "2.0.0",
     "@popperjs/core": "2.5.4",

package.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;
+    </>
+  );
+};

src/controls/monacoEditor/Error.tsx

@@ -0,0 +1,11 @@
+export interface IJscriptDiagnosticsOptions {
+  noSemanticValidation?: boolean;
+  noSyntaxValidation?: boolean;
+  noSuggestionDiagnostics?: boolean;
+  /**
+   * Limit diagnostic computation to only visible files.
+   * Defaults to false.
+   */
+  onlyVisible?: boolean;
+  diagnosticCodesToIgnore?: number[];
+}

src/controls/monacoEditor/IJscriptDiagnosticsOptions.ts

@@ -0,0 +1,53 @@
+export type SeverityLevel = 'error' | 'warning' | 'ignore';
+export interface IJsonDiagnosticsOptions {
+  /**
+   * If set, the validator will be enabled and perform syntax and schema based validation,
+   * unless `DiagnosticsOptions.schemaValidation` is set to `ignore`.
+   */
+  readonly validate?: boolean;
+  /**
+   * If set, comments are tolerated. If set to false, syntax errors will be emitted for comments.
+   * `DiagnosticsOptions.allowComments` will override this setting.
+   */
+  readonly allowComments?: boolean;
+  /**
+   * A list of known schemas and/or associations of schemas to file names.
+   */
+  readonly schemas?: {
+      /**
+       * The URI of the schema, which is also the identifier of the schema.
+       */
+      readonly uri: string;
+      /**
+       * A list of glob patterns that describe for which file URIs the JSON schema will be used.
+       * '*' and '**' wildcards are supported. Exclusion patterns start with '!'.
+       * For example '*.schema.json', 'package.json', '!foo*.schema.json', 'foo/**\/BADRESP.json'.
+       * A match succeeds when there is at least one pattern matching and last matching pattern does not start with '!'.
+       */
+      readonly fileMatch?: string[];
+      /**
+       * The schema for the given URI.
+       */
+      readonly schema?: any;
+  }[];
+  /**
+   *  If set, the schema service would load schema content on-demand with 'fetch' if available
+   */
+  readonly enableSchemaRequest?: boolean;
+  /**
+   * The severity of problems from schema validation. If set to 'ignore', schema validation will be skipped. If not set, 'warning' is used.
+   */
+  readonly schemaValidation?: SeverityLevel;
+  /**
+   * The severity of problems that occurred when resolving and loading schemas. If set to 'ignore', schema resolving problems are not reported. If not set, 'warning' is used.
+   */
+  readonly schemaRequest?: SeverityLevel;
+  /**
+   * The severity of reported trailing commas. If not set, trailing commas will be reported as errors.
+   */
+  readonly trailingCommas?: SeverityLevel;
+  /**
+   * The severity of reported comments. If not set, 'DiagnosticsOptions.allowComments' defines whether comments are ignored or reported as errors.
+   */
+  readonly comments?: SeverityLevel;
+}

src/controls/monacoEditor/IJsonDiagnosticsOptions.ts

@@ -0,0 +1,29 @@
+import { IJscriptDiagnosticsOptions } from "./IJscriptDiagnosticsOptions";
+import {  IJsonDiagnosticsOptions } from "./IJsonDiagnosticsOptions";
+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: Elanguages;
+  jsonDiagnosticsOptions?: monaco.languages.json.DiagnosticsOptions;
+  jscriptDiagnosticsOptions?: monaco.languages.typescript.DiagnosticsOptions;
+
+}

src/controls/monacoEditor/IMonacoEditorProps.ts

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

src/controls/monacoEditor/index.ts

@@ -0,0 +1,37 @@
+import { useState, useEffect } from "react";
+import loader, { Monaco } from "@monaco-editor/loader";
+
+const CDN_PATH_TO_MONACO_EDITOR = "https://cdn.jsdelivr.net/npm/[email protected]/min/vs";
+export enum EStatus {
+  LOADING,
+  LOADED,
+  ERROR,
+}
+
+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 () => {
+      try {
+        loader.config({ paths: { vs: CDN_PATH_TO_MONACO_EDITOR } });
+        const monacoObj = await loader.init();
+        setStatus(EStatus.LOADED);
+        setMonaco(monacoObj);
+      } catch (error) {
+        setStatus(EStatus.ERROR);
+        setMonaco(undefined);
+        setError(error);
+      }
+    })();
+  }, []);
+
+  return {
+    monaco,
+    status,
+    error,
+  };
+};

src/controls/monacoEditor/useMonaco.ts

@@ -0,0 +1,14 @@
+import { mergeStyleSets } from "office-ui-fabric-react";
+import React from "react";
+
+export const useMonacoEditorStyles = () => {
+  const controlClasses =  React.useMemo(() =>{
+      return mergeStyleSets({
+        containerStyles:{
+          height: "800px",
+        }
+      });
+  },[]);
+
+  return {controlClasses };
+};

src/controls/monacoEditor/useMonacoEditorStyles.ts

@@ -69,15 +69,15 @@ export default class ControlsTestWebPart extends BaseClientSideWebPart<IControls
   }
 
   public render(): void {
-   /*  const element: React.ReactElement<ITestControlProps> = React.createElement(
+    const element: React.ReactElement<ITestControlProps> = React.createElement(
 
       TestControl,
        {
          context: this.context,
        }
-     ); */
+     );
 
-   const element: React.ReactElement<IControlsTestProps> = React.createElement(
+  /*  const element: React.ReactElement<IControlsTestProps> = React.createElement(
 
     ControlsTest,
       {
@@ -93,7 +93,7 @@ export default class ControlsTestWebPart extends BaseClientSideWebPart<IControls
         totalPages: this.properties.totalPages
       }
     );
-
+ */
     ReactDom.render(element, this.domElement);
   }