New version

Author: javizqh

package-lock.json

@@ -1,13 +1,13 @@
 {
   "name": "jderobot-ide-interface",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "main": "dist/main.js",
   "typings": "dist/index.d.ts",
   "files": [
     "dist"
   ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "echo \"Error: no test specified\"",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "start": "webpack serve --config ./webpack.config.js --mode development",

package.json

@@ -1,9 +1,10 @@
 import React, { useEffect, useRef, useState } from "react";
 import Editor, { Monaco } from "@monaco-editor/react";
 import "./FileEditor.css";
+import type { editor } from "monaco-editor";
 
 // import { OptionsContext } from "../../options/Options";
-import {CommsManager} from "jderobot-commsmanager";
+import { CommsManager } from "jderobot-commsmanager";
 import { monacoEditorSnippet } from "./extras";
 
 const pylint_error: string[] = ["E0401", "E1101"];
@@ -166,7 +167,7 @@ const FileEditor = ({
         if (commsManager && fileContent) {
           commsManager.code_format(fileContent);
         }
-      },
+      }
     );
 
     return () => {
@@ -176,36 +177,51 @@ const FileEditor = ({
     };
   };
 
+  const lineNumbers: editor.LineNumbersType = "on";
+  const scrollbar: editor.IEditorScrollbarOptions = {
+    vertical: "auto",
+    horizontal: "auto",
+    verticalScrollbarSize: 8,
+    horizontalScrollbarSize: 8,
+  };
+  const hover: editor.IEditorHoverOptions = {
+    enabled: true,
+  };
+  const wordWrap: "on" | "off" | "wordWrapColumn" | "bounded" | undefined =
+    "wordWrapColumn";
+  const wrappingIndent: "indent" | "none" | "same" | "deepIndent" | undefined =
+    "indent";
+  const wordBasedSuggestions:
+    | "off"
+    | "currentDocument"
+    | "matchingDocuments"
+    | "allDocuments" = "currentDocument";
+
   const editorOptions = {
     //
     fontSize: fontSize,
-    lineNumbers: 'on',
+    lineNumbers: lineNumbers,
     roundedSelection: false,
     scrollBeyondLastLine: true,
     // word warp
-    wordWrap: "wordWrapColumn",
+    wordWrap: wordWrap,
     wordWrapColumn: 80,
-    wrappingIndent: "indent",
+    wrappingIndent: wrappingIndent,
     //
     minimap: { enabled: false },
     automaticLayout: true,
     tabSize: 4,
     rulers: [80],
     suggestOnTriggerCharacters: true,
     quickSuggestions: true,
-    wordBasedSuggestions: true,
+    wordBasedSuggestions: wordBasedSuggestions,
     //
-    hover: true,
+    hover: hover,
     glyphMargin: true,
     lineNumbersMinChars: 3,
     // scroll
     smoothScrolling: true,
-    scrollbar: {
-      vertical: "auto",
-      horizontal: "auto",
-      verticalScrollbarSize: 8,
-      horizontalScrollbarSize: 8,
-    },
+    scrollbar: scrollbar,
   };
 
   useEffect(() => {
@@ -233,7 +249,7 @@ const FileEditor = ({
         if (commsManager && fileContent) {
           commsManager.code_format(fileContent);
         }
-      },
+      }
     );
 
     if (language !== "python") return;
@@ -261,7 +277,6 @@ const FileEditor = ({
       onChange={(newContent: any) => {
         setFileContent(newContent);
       }}
-      // @ts-ignore
       options={editorOptions}
       beforeMount={handleEditorDidMount}
       onMount={handleEditorMount}

src/components/FileEditor/TextEditor.tsx

@@ -1,7 +1,7 @@
 import { Monaco } from "@monaco-editor/react";
 import { my_snippets, Snippet } from "./snippets";
 import {CommsManager} from "jderobot-commsmanager";
-import { ignoreSsrWarning } from "storybook/internal/theming";
+import type { languages } from 'monaco-editor';
 
 interface Position {
   lineNumber: number;
@@ -37,8 +37,7 @@ export const monacoEditorSnippet = (monaco: Monaco, manager: CommsManager| null)
   // Register a completion item provider for the new language
   monaco.languages.registerCompletionItemProvider("python", {
     triggerCharacters: [".", "("],
-    // @ts-ignore
-    provideCompletionItems: async (model: any, position: Position) => {
+    provideCompletionItems: async (model: any, position: Position): Promise<languages.CompletionList> => {
       lock = true;
 
       var word = model.getWordUntilPosition(position);
@@ -64,7 +63,7 @@ export const monacoEditorSnippet = (monaco: Monaco, manager: CommsManager| null)
       // Check if the Robotics Backend is connected
       // Call the RAM for autocompletion
       if (manager === null) {
-        return snippets;
+        return { suggestions: snippets };
       } 
 
       try {
@@ -74,7 +73,7 @@ export const monacoEditorSnippet = (monaco: Monaco, manager: CommsManager| null)
           word.endColumn - 1
         );
       } catch (error) {
-        return snippets;
+        return { suggestions: snippets };
       }
 
       const callback = (message: any) => {

src/components/FileEditor/extras.ts

@@ -21,6 +21,8 @@ module.exports = {
   output: {
     filename: "main.js",
     path: path.resolve(__dirname, "dist"),
+    libraryTarget: 'umd',
+    globalObject: 'this',
   },
   resolve: {
     alias: aliases(),