multiple editors demo

Author: abentkamp

demo/src/App.css

@@ -1,4 +1,9 @@
 .codeview, .infoview {
   width: 400px;
   height: 300px;
-}
+}
+
+.controls {
+  flex: 0 0 100%;
+}
+

demo/src/App.tsx

@@ -5,26 +5,35 @@ import { LeanMonacoOptions } from 'lean4monaco'
 
 function App() {
   const [options, setOptions] = useState<LeanMonacoOptions>({websocket: {url: 'ws://localhost:8080/'}, vscode: {"workbench.colorTheme": "Visual Studio Light"}})
+  const [numberEditors, setNumberEditors] = useState(1)
 
   return (
     <>
-      <button
-        onClick={() => {setOptions({...options, vscode: {...options.vscode, "workbench.colorTheme": "Visual Studio Light"}})}}
-        data-cy="theme-light"
-      >Light</button>
-      <button
-        onClick={() => {setOptions({...options, vscode: {...options.vscode, "workbench.colorTheme": "Visual Studio Dark"}})}}
-        data-cy="theme-dark"
-      >Dark</button>
-      <button
-        onClick={() => {setOptions({...options, vscode: {...options.vscode, "lean4.input.leader": "\\"}})}}
-        data-cy="leader-backslash"
-      >Input Leader "\"</button>
-      <button
-        onClick={() => {setOptions({...options, vscode: {...options.vscode, "lean4.input.leader": ","}})}}
-        data-cy="leader-comma"
-      >Input Leader ","</button>
-      <LeanMonacoComponent options={options} />
+      <div className="controls">
+        <button
+          onClick={() => {setOptions({...options, vscode: {...options.vscode, "workbench.colorTheme": "Visual Studio Light"}})}}
+          data-cy="theme-light"
+        >Light</button>
+        <button
+          onClick={() => {setOptions({...options, vscode: {...options.vscode, "workbench.colorTheme": "Visual Studio Dark"}})}}
+          data-cy="theme-dark"
+        >Dark</button>
+        <button
+          onClick={() => {setOptions({...options, vscode: {...options.vscode, "lean4.input.leader": "\\"}})}}
+          data-cy="leader-backslash"
+        >Input Leader "\"</button>
+        <button
+          onClick={() => {setOptions({...options, vscode: {...options.vscode, "lean4.input.leader": ","}})}}
+          data-cy="leader-comma"
+        >Input Leader ","</button>
+        <input type="number" min="1" max="3"
+          value={numberEditors}
+          onChange={(event) => {
+            setNumberEditors(parseInt(event.target.value));
+          }}
+        />
+      </div>
+      <LeanMonacoComponent options={options} numberEditors={numberEditors} />
     </>
   )
 }

demo/src/LeanMonaco.tsx

@@ -4,7 +4,7 @@ import LeanMonacoEditorComponent from './LeanMonacoEditor';
 
 export const LeanMonacoContext = createContext<LeanMonaco|null>(null);
 
-function LeanMonacoComponent({options} : {options: LeanMonacoOptions}) {
+function LeanMonacoComponent({options, numberEditors} : {options: LeanMonacoOptions, numberEditors: number}) {
   const [leanMonaco, setLeanMonaco] = useState<LeanMonaco|null>(null)
   const infoviewRef = useRef<HTMLDivElement>(null)
 
@@ -25,7 +25,9 @@ function LeanMonacoComponent({options} : {options: LeanMonacoOptions}) {
   return (
     <>
       <LeanMonacoContext.Provider value={leanMonaco}>
-        <LeanMonacoEditorComponent />
+        {[...Array(numberEditors)].map((x, i) =>
+          <LeanMonacoEditorComponent key={i} fileName={`/project/test${i}.lean`}/>
+        )}
         <div className='infoview' ref={infoviewRef}></div>
       </LeanMonacoContext.Provider>
     </>

demo/src/LeanMonacoEditor.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useContext } from 'react'
 import { LeanMonacoEditor } from 'lean4monaco'
 import { LeanMonacoContext } from './LeanMonaco'
 
-function LeanMonacoEditorComponent() {
+function LeanMonacoEditorComponent({fileName}: {fileName: string}) {
   const codeviewRef = useRef<HTMLDivElement>(null)
   const leanMonaco = useContext(LeanMonacoContext)
 
@@ -12,7 +12,7 @@ function LeanMonacoEditorComponent() {
 
       ;(async () => {
           await leanMonaco!.whenReady
-          await leanMonacoEditor.start(codeviewRef.current!, `/project/test.lean`, '#check Nat')
+          await leanMonacoEditor.start(codeviewRef.current!, fileName, '#check Nat')
       })()
 
       return () => {

demo/src/index.css

@@ -16,6 +16,8 @@
 #root {
   max-width: 1280px;
   padding: 2rem;
+  display: flex;
+  flex-flow: row wrap;
 }
 
 a {