Use ResizeObserver in MonacoEditor component (#40)

sqrl-lang · Dec 15, 2022 · 764ceff · 764ceff
1 parent 40992f3
commit 764ceff
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/websqrl/src/MonacoEditor.tsx b/websqrl/src/MonacoEditor.tsx
@@ -312,12 +312,17 @@ export const MonacoEditor: React.FC<MonacoEditorProps> = ({
 
     editorRef.current = editor;
 
-    // TODO(meyer) debounce this
-    const resizeHandler = () => {
-      editor.layout();
-    };
+    const resizeObserver = new ResizeObserver((entries) => {
+      const containerElement = entries.find(
+        (entry) => entry.target === containerRef.current
+      );
+      // container was resized
+      if (containerElement) {
+        editor.layout();
+      }
+    });
 
-    window.addEventListener("resize", resizeHandler);
+    resizeObserver.observe(containerRef.current);
 
     const onChangeModelContentSubscription = editor.onDidChangeModelContent(
       (event) => {
@@ -331,7 +336,7 @@ export const MonacoEditor: React.FC<MonacoEditorProps> = ({
       editor.dispose();
       model.dispose();
       onChangeModelContentSubscription.dispose();
-      window.removeEventListener("resize", resizeHandler);
+      resizeObserver.disconnect();
     };
   }, [monacoEditorObj.state, sqrlFunctions]);
 

diff --git a/websqrl/tsconfig.json b/websqrl/tsconfig.json
@@ -24,7 +24,8 @@
       "sqrl-redis-functions": ["../packages/sqrl-redis-functions"],
       "sqrl-test-utils": ["../packages/sqrl-test-utils"],
       "sqrl-text-functions": ["../packages/sqrl-text-functions"]
-    }
+    },
+    "noEmit": true
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "references": [