sample-ui-component-library 0.0.53-dev → 0.0.54-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.53-dev",
+  "version": "0.0.54-dev",
   "description": "A library which contains sample UI elements that can be used for populating layouts.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/Editor/MonacoInstance/MonacoInstance.jsx

@@ -43,7 +43,6 @@ export const MonacoInstance = forwardRef(({ onSelectAbstraction }, ref) => {
                 // Dispose all models on unmount to prevent memory leaks.
                 modelsRef.current.forEach((model) => model.dispose());
                 modelsRef.current.clear();
-                editorRef.current = null;
             }
         }, []); 
 
@@ -113,23 +112,23 @@ export const MonacoInstance = forwardRef(({ onSelectAbstraction }, ref) => {
 
         return (
             <div className="editor-container" ref={containerRef}>
+                <Editor
+                    defaultLanguage="python"
+                    defaultValue={"Loading content..."}
+                    onMount={handleEditorDidMount}
+                    theme="vs-dark"
+                    options={{
+                        minimap: { enabled: false },
+                        padding: { top: 10 },
+                        renderWhitespace: "none",
+                        wordWrap: "on",
+                        scrollBeyondLastLine: false,
+                        automaticLayout: false,
+                    }}
+                />
                 {
-                    showEditor ? 
-                    <Editor
-                        defaultLanguage="python"
-                        defaultValue={"Loading content..."}
-                        onMount={handleEditorDidMount}
-                        theme="vs-dark"
-                        options={{
-                            minimap: { enabled: false },
-                            padding: { top: 10 },
-                            renderWhitespace: "none",
-                            wordWrap: "on",
-                            scrollBeyondLastLine: false,
-                            automaticLayout: false,
-                        }}
-                    />: 
-                    <div className="no-tab">Select file or drag and drop to view.</div>
+                    !showEditor ? 
+                    <div className="no-tab">Select file or drag and drop to view.</div>:null
                 }
                 {state.mode === EDITOR_MODES.MAPPING && (
                     <div className="overlay-layer" onWheel={handleWheel}>

package/src/components/Editor/MonacoInstance/MonacoInstance.scss

@@ -5,6 +5,12 @@
     display:flex;
     align-items:center;
     justify-content:center;
+    z-index:999;
+    position:absolute;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
 }
 
 .editor-container {

package/src/stories/Editor.stories.js

@@ -143,7 +143,9 @@ const Template = (args) => {
 
     const onSelectTool = useCallback((tool) => {
         if (tool === "mapping-mode") {
-            editorRef.current.setMode(EDITOR_MODES.MAPPING);
+            editorRef.current.addTab(
+                flattenTree(WorkspaceSampleTree.tree).slice(2,2)
+            );
         } else if (tool === "implementation-mode") {
             editorRef.current.setMode(EDITOR_MODES.DESIGN);
         }