lean4monaco 1.0.28 → 1.0.30

package/README.md

@@ -1,3 +1,7 @@
+[![GitHub license](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://github.com/hhu-adam/lean4monaco/blob/main/LICENSE)
+[![npm version](https://img.shields.io/npm/v/lean4monaco.svg)](https://www.npmjs.com/package/lean4monaco)
+[![(Runtime) Build and Test](https://github.com/hhu-adam/lean4monaco/actions/workflows/test.yml/badge.svg)](https://github.com/hhu-adam/lean4monaco/actions/workflows/test.yml)
+
 # Lean 4 Monaco
 
 Provides browser support for running Lean in a Monaco editor.
@@ -21,25 +25,51 @@ one or more editors can be created using `LeanMonacoEditor`. Here is an example
 how to use the classes using React:
 
 ```ts
-import { LeanMonaco, LeanMonacoEditor } from 'lean4monaco'
+import { LeanMonaco, LeanMonacoEditor, LeanMonacoOptions } from 'lean4monaco'
 
 [...]
 
-useEffect(() => {
-    const leanMonaco = new LeanMonaco()
-    const leanMonacoEditor = new LeanMonacoEditor()
-
-    ;(async () => {
-        await leanMonaco.start({websocket: {url: 'ws://localhost:8080/'}})
-        leanMonaco.setInfoviewElement(infoviewRef.current)
-        await leanMonacoEditor.start(codeviewRef.current!, '/project/test.lean', '#check Nat')
-    })()
-
-    return () => {
-        leanMonacoEditor.dispose()
-        leanMonaco.dispose()
-    }
+// Refs for the editor and infoview
+const editorRef = useRef<HTMLDivElement>(null)
+const infoviewRef = useRef<HTMLDivElement>(null)
+
+// Lean4monaco options
+const [options, setOptions] = useState<LeanMonacoOptions>({
+  websocket: {
+    url: 'ws://localhost:8080/'
+  },
+  htmlElement: undefined, // The wrapper div for monaco
+  vscode: {
+    "editor.wordWrap": true,
+  }
 })
+
+// Optional: restrict monaco's extend (e.g. context menu) to the editor itself
+useEffect(() => {
+  setOptions({...options, htmlElement: editorRef.current ?? undefined})
+}, [editorRef])
+
+// Start infoview and editor(s)
+useEffect(() => {
+  // You must create a single `LeanMonaco` instance (infoview), but you can create multiple
+  // `LeanMonacoEditor` instances (editor)
+  // You must await `leanMonaco.start` or use `await leanMonaco.whenReady` before
+  // starting the editors!
+  const leanMonaco = new LeanMonaco()
+  const leanMonacoEditor = new LeanMonacoEditor()
+
+  leanMonaco.setInfoviewElement(infoviewRef.current!)
+
+  ;(async () => {
+    await leanMonaco.start(options)
+    await leanMonacoEditor.start(editorRef.current!, '/project/test.lean', '#check Nat')
+  })()
+
+  return () => {
+    leanMonaco.dispose()
+    leanMonacoEditor.dispose()
+  }
+}, [options, infoviewRef, editorRef])
 ```
 
 ### Configure vite
@@ -136,7 +166,10 @@ export default {
 
 `lean4monaco` contains a sample project `lean4monaco/demo/` which you can use for comparison.
 
-If you cloned `lean4monaco`, you can run the demo with
+Ideally you clone this repo using `git clone --recurse-submodules <ssh/https address>` to load the included submodule.
+(alternatively, call `git submodule init && git submodule update` inside the cloned the repo).
+
+Afterwards, you can run the demo with
 
 ```
 cd lean4monaco
@@ -160,4 +193,15 @@ Some random errors we encountered. If you have more, please share them.
 ### Warnings on `npm install`
 
 * Warnings about `glob` and `inflight` come from `copyfiles`: see [copyfiles#132](https://github.com/calvinmetcalf/copyfiles/pull/132)
-* Warning about ` @types/cypress` comes from `cypress-iframe`
+* Warning about ` @types/cypress` comes from `cypress-iframe`
+
+## Development
+
+You can run
+
+```
+npm install
+npm run test
+```
+
+for the automated cypress tests.

package/dist/leanmonaco.js

@@ -32,13 +32,7 @@ export class LeanMonaco {
     infoviewEl;
     disposed = false;
     async start(options) {
-        if (!options.htmlElement) {
-            console.debug('[LeanMonaco]: not starting because container is null');
-            return;
-        }
-        else {
-            console.debug('[LeanMonaco]: starting');
-        }
+        console.debug('[LeanMonaco]: starting');
         if (LeanMonaco.activeInstance == this) {
             console.warn('A LeanMonaco instance cannot be started twice.');
             return;
@@ -68,7 +62,10 @@ export class LeanMonaco {
                 ...getConfigurationServiceOverride(),
                 ...getLanguagesServiceOverride(),
                 ...getModelServiceOverride()
-            }, options.htmlElement, {
+            }, 
+            // The wrapper HTML element determines the extend of certain monaco features
+            // such as the right-click context menu.
+            options.htmlElement ?? undefined, {
                 workspaceProvider: {
                     trusted: true,
                     workspace: {
@@ -181,7 +178,7 @@ export class LeanMonaco {
             ...packageJson,
             contributes: {
                 ...packageJson.contributes,
-                configuration: packageJson.contributes.configuration,
+                configuration: packageJson.contributes.configuration, // Apparently `IExtensionContributions.configuration` has type `any`
                 // TODO: This is suspect, the thrid entry does not have "language", yet it doesn't complain
                 // look into that.
                 grammars: packageJson.contributes.grammars,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lean4monaco",
-  "version": "1.0.28",
+  "version": "1.0.30",
   "description": "Monaco Editor support for the Lean 4 theorem prover.",
   "keywords": [
     "lean",
@@ -33,11 +33,12 @@
     "url": "https://github.com/hhu-adam/lean4monaco"
   },
   "scripts": {
-    "start": "concurrently \"tsc -w --preserveWatchOutput\" \"webpack --watch\" \"npm run watch:copyfiles\" \"cd demo && npm run start_client\" \"cd demo && npm run start_server\" -n tsc,webpack,copyfiles,vite,server -c \"bgGreen.bold,bgBlue.bold,bgCyan.bold,bgYellow.bold,bgMagenta.bold\"",
+    "setup_demo": "concurrently \"(cd demo && npm install)\" \"npm run build\" -n install,build -c \"bgCyan.bold,bgBlue.bold\"",
+    "start": "npm run setup_demo && concurrently \"tsc -w --preserveWatchOutput\" \"webpack --watch\" \"npm run watch:copyfiles\" \"cd demo && npm run start_client\" \"cd demo && npm run start_server\" -n tsc,webpack,copyfiles,vite,server -c \"bgGreen.bold,bgBlue.bold,bgCyan.bold,bgYellow.bold,bgMagenta.bold\"",
     "watch:copyfiles": "nodemon --watch ./src --exec \"npm run build:copyfiles\"",
     "build": "tsc && webpack && npm run build:copyfiles",
     "build:copyfiles": "cd src && copyfiles \"**/*.json\" \"**/*.css\" \"**/*.ttf\" \"**/*.otf\" \"**/*.svg\" ../dist/",
-    "test": "(cd demo && npm install && npm run build_server) && concurrently --kill-others \"npm start 1> /dev/null\" \"wait-on http://localhost:5173 && cypress run\" -n server,cypress -s command-cypress"
+    "test": "concurrently --hide 0 --kill-others \"npm start\" \"wait-on http://localhost:5173 && cypress run\" -n server,cypress -s command-cypress"
   },
   "dependencies": {
     "@leanprover/infoview": "^0.7.3",