sample-ui-component-library 0.0.26-dev → 0.0.28-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.26-dev",
+  "version": "0.0.28-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

@@ -14,6 +14,8 @@ export const MonacoInstance = ({ }) => {
 
     const editorRef = useRef(null);
     const content = useRef();
+    const containerRef = useRef(null);
+    const frameRef = useRef(0);
 
     useEffect(() => {
         if (state.activeTab) {
@@ -41,6 +43,7 @@ export const MonacoInstance = ({ }) => {
         if (content?.current) {
             editorRef.current.setValue(content.current);
         }
+        editorRef.current.layout();
     }
 
     // Editor options for Monaco Editor.
@@ -60,6 +63,25 @@ export const MonacoInstance = ({ }) => {
         automaticLayout: false
     }
 
+    // Disable automatic layout and Manually layout the editor to avoid resize observer loops
+    useEffect(() => {
+        if (!containerRef.current) return;
+
+        const ro = new ResizeObserver(() => {
+            cancelAnimationFrame(frameRef.current);
+            frameRef.current = requestAnimationFrame(() => {
+                editorRef.current?.layout();
+            });
+        });
+
+        ro.observe(containerRef.current);
+
+        return () => {
+            cancelAnimationFrame(frameRef.current);
+            ro.disconnect();
+        };
+    }, []);
+
     /**
      * Render the editor if there is an active tab, otherwise render a placeholder message.
      * @returns JSX
@@ -81,7 +103,7 @@ export const MonacoInstance = ({ }) => {
     }
 
     return (
-        <div className="editor-container">
+        <div className="editor-container" ref={containerRef}>
             {renderEditor()}
         </div>
     )