@codecademy/codebytes 0.6.7-alpha.3dce32.0 → 0.6.7-alpha.4be5c5.0

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [0.6.7-alpha.3dce32.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.6.6...@codecademy/codebytes@0.6.7-alpha.3dce32.0) (2022-02-04)
+### [0.6.7-alpha.4be5c5.0](https://github.com/Codecademy/client-modules/compare/@codecademy/codebytes@0.6.6...@codecademy/codebytes@0.6.7-alpha.4be5c5.0) (2022-02-04)
 
 **Note:** Version bump only for package @codecademy/codebytes
 

package/dist/MonacoEditor/index.js

@@ -1,11 +1,20 @@
+var _templateObject;
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 // DO NOT CHANGE ANYTHING HERE
 // This component is part of the Codebytes MVP and only includes basic configuration around theming
 // We are working on a monaco package in client-modules that has more configuration around themes and languages
 // Monaco as a shared package RFC https://www.notion.so/codecademy/Monaco-editor-as-a-shared-package-1f4484db165b4abc8394c3556451ef6a
+import { Box } from '@codecademy/gamut';
+import styled from '@emotion/styled/types/base';
 import ReactMonacoEditor from '@monaco-editor/react';
 import React, { useCallback, useRef } from 'react';
 import ResizeObserver from 'react-resize-observer';
 import { dark } from './theme';
+// A hidden element in monaco was causing its container to overflow
+// https://github.com/microsoft/monaco-editor/issues/29#issuecomment-753854541
+var EditorWrapper = styled(Box)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & .monaco-editor.rename-box,\n  .monaco-hover {\n    top: 0;\n  }\n  // A hidden overflowing element causes accessibility errors\n  // The background of the overflowing element causes triggers color contrast errors\n  & .lines-content {\n    height: 100% !important;\n  }\n"])));
 export var SimpleMonacoEditor = function SimpleMonacoEditor(_ref) {
   var value = _ref.value,
       language = _ref.language,
@@ -16,7 +25,7 @@ export var SimpleMonacoEditor = function SimpleMonacoEditor(_ref) {
     monaco.editor.defineTheme('dark', dark);
     monaco.editor.setTheme('dark');
   }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizeObserver, {
+  return /*#__PURE__*/React.createElement(EditorWrapper, null, /*#__PURE__*/React.createElement(ResizeObserver, {
     onResize: function onResize(_ref2) {
       var _editorRef$current;
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/codebytes",
   "description": "Codebytes Code Editor",
-  "version": "0.6.7-alpha.3dce32.0",
+  "version": "0.6.7-alpha.4be5c5.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "sideEffects": [
     "**/*.css",
@@ -64,5 +64,5 @@
   "files": [
     "dist/**"
   ],
-  "gitHead": "402d50b30846f036d3712e7a48238d563112b74d"
+  "gitHead": "7a971eed82851209680b967a87356900c55bc669"
 }