@codecademy/codebytes 1.4.0-alpha.b72c2541d4.0 → 1.4.0-alpha.ec36a35d00.0

package/dist/MonacoEditor/index.js

@@ -10,53 +10,68 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 // Monaco as a shared package RFC https://www.notion.so/codecademy/Monaco-editor-as-a-shared-package-1f4484db165b4abc8394c3556451ef6a
 
 import ReactMonacoEditor from '@monaco-editor/react';
-import React, { useCallback, useRef } from 'react';
-import { useMeasure } from 'react-use';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { dark } from './theme';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const SimpleMonacoEditor = _ref => {
   let value = _ref.value,
     language = _ref.language,
     onChange = _ref.onChange;
-  const _useMeasure = useMeasure(),
-    _useMeasure2 = _slicedToArray(_useMeasure, 2),
-    ref = _useMeasure2[0],
-    _useMeasure2$ = _useMeasure2[1],
-    width = _useMeasure2$.width,
-    height = _useMeasure2$.height;
+  const _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  const _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    height = _useState4[0],
+    setHeight = _useState4[1];
+  const containerRef = useRef(null);
   const editorRef = useRef(null);
   const editorWillMount = useCallback((editor, monaco) => {
     editorRef.current = editor;
     monaco.editor.defineTheme('dark', dark);
     monaco.editor.setTheme('dark');
   }, []);
-  return (
-    /*#__PURE__*/
-    // @ts-expect-error A known issue that should be fixed in the future https://github.com/streamich/react-use/pull/2672
-    _jsx("div", {
-      ref: ref,
-      style: {
-        width: '100%',
-        height: '100%'
+  useEffect(() => {
+    const element = containerRef.current;
+    if (!element) return;
+    const resizeObserver = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        const _entry$contentRect = entry.contentRect,
+          newWidth = _entry$contentRect.width,
+          newHeight = _entry$contentRect.height;
+        setWidth(newWidth);
+        setHeight(newHeight);
+      }
+    });
+    resizeObserver.observe(element);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+  return /*#__PURE__*/_jsx("div", {
+    ref: containerRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    },
+    children: /*#__PURE__*/_jsx(ReactMonacoEditor, {
+      onMount: editorWillMount,
+      onChange: onChange,
+      options: {
+        minimap: {
+          enabled: false
+        }
       },
-      children: /*#__PURE__*/_jsx(ReactMonacoEditor, {
-        onMount: editorWillMount,
-        onChange: onChange,
-        options: {
-          minimap: {
-            enabled: false
-          }
-        },
-        theme: "vs-dark",
-        value: value,
-        height: height,
-        width: width,
-        language: language
-        // beforeMount is a required prop for the Monaco editor. If it is not provided, the editor will not be initialized correctly.
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        ,
-        beforeMount: () => {}
-      })
+      theme: "vs-dark",
+      value: value,
+      height: height,
+      width: width,
+      language: language
+      // beforeMount is used internally by Monaco. If it is not provided, the editor will not be initialized correctly.
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      ,
+      beforeMount: () => {}
     })
-  );
+  });
 };

package/package.json

@@ -1,23 +1,26 @@
 {
   "name": "@codecademy/codebytes",
+  "version": "1.4.0-alpha.ec36a35d00.0",
   "description": "Codebytes Editor",
-  "version": "1.4.0-alpha.b72c2541d4.0",
+  "license": "MIT",
+  "repository": "git@github.com:codecademy-engineering/mono.git",
   "author": "Codecademy Engineering <dev@codecademy.com>",
-  "dependencies": {
-    "@monaco-editor/react": "^4.4.5",
-    "react-use": "15.3.8"
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "scripts": {
+    "build:watch": "yarn build:clean && yarn build:compile && yarn build:types && onchange ./src -- yarn build:compile && yarn build:types"
   },
   "files": [
     "dist/**"
   ],
-  "license": "MIT",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "dependencies": {
+    "@monaco-editor/react": "^4.4.5"
+  },
   "peerDependencies": {
     "@codecademy/gamut": "*",
     "@codecademy/gamut-icons": "*",
     "@codecademy/gamut-styles": "*",
-    "@codecademy/tracking": "1.4.0-alpha.b72c2541d4.0",
+    "@codecademy/tracking": "1.4.0-alpha.ec36a35d00.0",
     "@codecademy/variance": "*",
     "@emotion/styled": "^11.3.0",
     "monaco-editor": "*",
@@ -26,10 +29,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "repository": "git@github.com:codecademy-engineering/mono.git",
-  "scripts": {
-    "build:watch": "yarn build:clean && yarn build:compile && yarn build:types && onchange ./src -- yarn build:compile && yarn build:types"
-  },
   "sideEffects": [
     "**/*.css",
     "**/*.scss",