@codecademy/codebytes 0.6.1 → 0.6.3-alpha.e74dd5.0

package/dist/editor.js

@@ -0,0 +1,189 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _styled from "@emotion/styled/base";
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+import { FillButton, FlexBox, Spinner, TextButton, ToolTip } from '@codecademy/gamut';
+import { CopyIcon } from '@codecademy/gamut-icons';
+import React, { useState } from 'react';
+import { postSnippet } from './api';
+import { Drawers } from './drawers';
+import { trackClick } from './helpers';
+import { SimpleMonacoEditor } from './MonacoEditor';
+
+var Output = _styled("pre", {
+  target: "e1lzxy8e1",
+  label: "Output"
+})("width:100%;height:100%;margin:0;padding:0 1rem;font-family:Monaco;font-size:0.875rem;overflow:auto;", function (_ref) {
+  var hasError = _ref.hasError,
+      theme = _ref.theme;
+  return "\n  color: ".concat(hasError ? theme.colors.orange : theme.colors.white, ";\n  background-color: ").concat(theme.colors['navy-900'], ";\n");
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9lZGl0b3IudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCZ0QiLCJmaWxlIjoiLi4vc3JjL2VkaXRvci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBGaWxsQnV0dG9uLFxuICBGbGV4Qm94LFxuICBTcGlubmVyLFxuICBUZXh0QnV0dG9uLFxuICBUb29sVGlwLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBDb3B5SWNvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgcG9zdFNuaXBwZXQgfSBmcm9tICcuL2FwaSc7XG5pbXBvcnQgdHlwZSB7IExhbmd1YWdlT3B0aW9uIH0gZnJvbSAnLi9jb25zdHMnO1xuaW1wb3J0IHsgRHJhd2VycyB9IGZyb20gJy4vZHJhd2Vycyc7XG5pbXBvcnQgeyB0cmFja0NsaWNrIH0gZnJvbSAnLi9oZWxwZXJzJztcbmltcG9ydCB7IFNpbXBsZU1vbmFjb0VkaXRvciB9IGZyb20gJy4vTW9uYWNvRWRpdG9yJztcbmltcG9ydCB7IENvZGVieXRlc0NoYW5nZUhhbmRsZXIgfSBmcm9tICcuL3R5cGVzJztcblxuY29uc3QgT3V0cHV0ID0gc3R5bGVkLnByZTx7IGhhc0Vycm9yOiBib29sZWFuIH0+YFxuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBtYXJnaW46IDA7XG4gIHBhZGRpbmc6IDAgMXJlbTtcbiAgZm9udC1mYW1pbHk6IE1vbmFjbztcbiAgZm9udC1zaXplOiAwLjg3NXJlbTtcbiAgb3ZlcmZsb3c6IGF1dG87XG4gICR7KHsgaGFzRXJyb3IsIHRoZW1lIH0pID0+IGBcbiAgY29sb3I6ICR7aGFzRXJyb3IgPyB0aGVtZS5jb2xvcnMub3JhbmdlIDogdGhlbWUuY29sb3JzLndoaXRlfTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5jb2xvcnNbJ25hdnktOTAwJ119O1xuYH1cbmA7XG5cbmNvbnN0IENvcHlJY29uU3R5bGVkID0gc3R5bGVkKENvcHlJY29uKWBcbiAgbWFyZ2luLXJpZ2h0OiAwLjVyZW07XG5gO1xuXG5jb25zdCBET0NLRVJfU0lHVEVSTSA9IDE0MztcblxudHlwZSBFZGl0b3JQcm9wcyA9IHtcbiAgaGlkZUNvcHlCdXR0b246IGJvb2xlYW47XG4gIGxhbmd1YWdlOiBMYW5ndWFnZU9wdGlvbjtcbiAgdGV4dDogc3RyaW5nO1xuICBvbkNoYW5nZTogKHRleHQ6IHN0cmluZykgPT4gdm9pZDtcbiAgc25pcHBldHNCYXNlVXJsPzogc3RyaW5nO1xuICBvbkNvcHk/OiBDb2RlYnl0ZXNDaGFuZ2VIYW5kbGVyO1xufTtcblxuZXhwb3J0IGNvbnN0IEVkaXRvcjogUmVhY3QuRkM8RWRpdG9yUHJvcHM+ID0gKHtcbiAgbGFuZ3VhZ2UsXG4gIHRleHQsXG4gIGhpZGVDb3B5QnV0dG9uLFxuICBvbkNoYW5nZSxcbiAgb25Db3B5LFxuICBzbmlwcGV0c0Jhc2VVcmwsXG59KSA9PiB7XG4gIGNvbnN0IFtvdXRwdXQsIHNldE91dHB1dF0gPSB1c2VTdGF0ZSgnJyk7XG4gIGNvbnN0IFtzdGF0dXMsIHNldFN0YXR1c10gPSB1c2VTdGF0ZTwncmVhZHknIHwgJ3dhaXRpbmcnIHwgJ2Vycm9yJz4oJ3JlYWR5Jyk7XG4gIGNvbnN0IFtpc0NvZGVCeXRlQ29waWVkLCBzZXRJc0NvZGVCeXRlQ29waWVkXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3Qgb25Db3B5Q2xpY2sgPSAoKSA9PiB7XG4gICAgaWYgKCFpc0NvZGVCeXRlQ29waWVkKSB7XG4gICAgICBuYXZpZ2F0b3IuY2xpcGJvYXJkXG4gICAgICAgIC53cml0ZVRleHQodGV4dClcbiAgICAgICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIG5vLWNvbnNvbGVcbiAgICAgICAgLmNhdGNoKCgpID0+IGNvbnNvbGUuZXJyb3IoJ0ZhaWxlZCB0byBjb3B5JykpO1xuICAgICAgc2V0SXNDb2RlQnl0ZUNvcGllZCh0cnVlKTtcbiAgICAgIG9uQ29weT8uKHRleHQsIGxhbmd1YWdlKTtcbiAgICAgIHRyYWNrQ2xpY2soJ2NvcHknKTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3Qgc2V0RXJyb3JTdGF0dXNBbmRPdXRwdXQgPSAobWVzc2FnZTogc3RyaW5nKSA9PiB7XG4gICAgc2V0T3V0cHV0KG1lc3NhZ2UpO1xuICAgIHNldFN0YXR1cygnZXJyb3InKTtcbiAgfTtcblxuICBjb25zdCBoYW5kbGVTdWJtaXQgPSBhc3luYyAoKSA9PiB7XG4gICAgaWYgKHRleHQudHJpbSgpLmxlbmd0aCA9PT0gMCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICBjb25zdCBkYXRhID0ge1xuICAgICAgbGFuZ3VhZ2UsXG4gICAgICBjb2RlOiB0ZXh0LFxuICAgIH07XG4gICAgc2V0U3RhdHVzKCd3YWl0aW5nJyk7XG4gICAgc2V0T3V0cHV0KCcnKTtcbiAgICB0cmFja0NsaWNrKCdydW4nKTtcblxuICAgIHRyeSB7XG4gICAgICBjb25zdCByZXNwb25zZSA9IGF3YWl0IHBvc3RTbmlwcGV0KGRhdGEsIHNuaXBwZXRzQmFzZVVybCk7XG4gICAgICBpZiAocmVzcG9uc2Uuc3RkZXJyLmxlbmd0aCA+IDApIHtcbiAgICAgICAgc2V0RXJyb3JTdGF0dXNBbmRPdXRwdXQocmVzcG9uc2Uuc3RkZXJyKTtcbiAgICAgIH0gZWxzZSBpZiAocmVzcG9uc2UuZXhpdF9jb2RlID09PSBET0NLRVJfU0lHVEVSTSkge1xuICAgICAgICBzZXRFcnJvclN0YXR1c0FuZE91dHB1dChcbiAgICAgICAgICAnWW91ciBjb2RlIHRvb2sgdG9vIGxvbmcgdG8gcmV0dXJuIGEgcmVzdWx0LiBEb3VibGUgY2hlY2sgeW91ciBjb2RlIGZvciBhbnkgaXNzdWVzIGFuZCB0cnkgYWdhaW4hJ1xuICAgICAgICApO1xuICAgICAgfSBlbHNlIGlmIChyZXNwb25zZS5leGl0X2NvZGUgIT09IDApIHtcbiAgICAgICAgc2V0RXJyb3JTdGF0dXNBbmRPdXRwdXQoJ0FuIHVua25vd24gZXJyb3Igb2NjdXJlZC4nKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHNldE91dHB1dChyZXNwb25zZS5zdGRvdXQpO1xuICAgICAgICBzZXRTdGF0dXMoJ3JlYWR5Jyk7XG4gICAgICB9XG4gICAgfSBjYXRjaCAoZXJyb3IpIHtcbiAgICAgIHNldEVycm9yU3RhdHVzQW5kT3V0cHV0KCdFcnJvcjogJyArIGVycm9yKTtcbiAgICB9XG4gIH07XG5cbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAgPERyYXdlcnNcbiAgICAgICAgbGVmdENoaWxkPXtcbiAgICAgICAgICA8U2ltcGxlTW9uYWNvRWRpdG9yXG4gICAgICAgICAgICB2YWx1ZT17dGV4dH1cbiAgICAgICAgICAgIGxhbmd1YWdlPXtsYW5ndWFnZX1cbiAgICAgICAgICAgIG9uQ2hhbmdlPXtvbkNoYW5nZX1cbiAgICAgICAgICAvPlxuICAgICAgICB9XG4gICAgICAgIHJpZ2h0Q2hpbGQ9e1xuICAgICAgICAgIDxPdXRwdXQgaGFzRXJyb3I9e3N0YXR1cyA9PT0gJ2Vycm9yJ30gYXJpYS1saXZlPVwicG9saXRlXCI+XG4gICAgICAgICAgICB7b3V0cHV0fVxuICAgICAgICAgIDwvT3V0cHV0PlxuICAgICAgICB9XG4gICAgICAvPlxuICAgICAgPEZsZXhCb3hcbiAgICAgICAganVzdGlmeUNvbnRlbnQ9e2hpZGVDb3B5QnV0dG9uID8gJ2ZsZXgtZW5kJyA6ICdzcGFjZS1iZXR3ZWVuJ31cbiAgICAgICAgcGw9ezh9XG4gICAgICA+XG4gICAgICAgIHshaGlkZUNvcHlCdXR0b24gPyAoXG4gICAgICAgICAgPFRvb2xUaXBcbiAgICAgICAgICAgIGlkPVwiY29kZWJ5dGUtY29waWVkXCJcbiAgICAgICAgICAgIGFsaWdubWVudD1cInRvcC1yaWdodFwiXG4gICAgICAgICAgICBtb2RlPVwiZGFya1wiXG4gICAgICAgICAgICB0YXJnZXQ9e1xuICAgICAgICAgICAgICA8VGV4dEJ1dHRvblxuICAgICAgICAgICAgICAgIHZhcmlhbnQ9XCJzZWNvbmRhcnlcIlxuICAgICAgICAgICAgICAgIG9uQ2xpY2s9e29uQ29weUNsaWNrfVxuICAgICAgICAgICAgICAgIG9uQmx1cj17KCkgPT4gc2V0SXNDb2RlQnl0ZUNvcGllZChmYWxzZSl9XG4gICAgICAgICAgICAgICAgZGF0YS10ZXN0aWQ9XCJjb3B5LWNvZGVieXRlLWJ0blwiXG4gICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICA8Q29weUljb25TdHlsZWQgYXJpYS1oaWRkZW49XCJ0cnVlXCIgLz4gQ29weSBDb2RlYnl0ZVxuICAgICAgICAgICAgICA8L1RleHRCdXR0b24+XG4gICAgICAgICAgICB9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge2lzQ29kZUJ5dGVDb3BpZWQgPyAoXG4gICAgICAgICAgICAgIDxzcGFuIGRhdGEtdGVzdGlkPVwiY29weS1jb25maXJtYXRpb24tdG9vbHRpcFwiIHJvbGU9XCJhbGVydFwiPlxuICAgICAgICAgICAgICAgIENvcGllZCFcbiAgICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgICAgKSA6IChcbiAgICAgICAgICAgICAgPHNwYW4gZGF0YS10ZXN0aWQ9XCJjb3B5LXByb21wdC10b29sdGlwXCI+XG4gICAgICAgICAgICAgICAgQ29weSB0byB5b3VyIGNsaXBib2FyZFxuICAgICAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgICApfVxuICAgICAgICAgIDwvVG9vbFRpcD5cbiAgICAgICAgKSA6IG51bGx9XG4gICAgICAgIDxGaWxsQnV0dG9uIG9uQ2xpY2s9e2hhbmRsZVN1Ym1pdH0+XG4gICAgICAgICAge3N0YXR1cyA9PT0gJ3dhaXRpbmcnID8gPFNwaW5uZXIgLz4gOiAnUnVuJ31cbiAgICAgICAgPC9GaWxsQnV0dG9uPlxuICAgICAgPC9GbGV4Qm94PlxuICAgIDwvPlxuICApO1xufTtcbiJdfQ== */"));
+
+var CopyIconStyled = /*#__PURE__*/_styled(CopyIcon, {
+  target: "e1lzxy8e0",
+  label: "CopyIconStyled"
+})(process.env.NODE_ENV === "production" ? {
+  name: "u7ytkp",
+  styles: "margin-right:0.5rem"
+} : {
+  name: "u7ytkp",
+  styles: "margin-right:0.5rem",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9lZGl0b3IudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDdUMiLCJmaWxlIjoiLi4vc3JjL2VkaXRvci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBGaWxsQnV0dG9uLFxuICBGbGV4Qm94LFxuICBTcGlubmVyLFxuICBUZXh0QnV0dG9uLFxuICBUb29sVGlwLFxufSBmcm9tICdAY29kZWNhZGVteS9nYW11dCc7XG5pbXBvcnQgeyBDb3B5SWNvbiB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0LWljb25zJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBSZWFjdCwgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgcG9zdFNuaXBwZXQgfSBmcm9tICcuL2FwaSc7XG5pbXBvcnQgdHlwZSB7IExhbmd1YWdlT3B0aW9uIH0gZnJvbSAnLi9jb25zdHMnO1xuaW1wb3J0IHsgRHJhd2VycyB9IGZyb20gJy4vZHJhd2Vycyc7XG5pbXBvcnQgeyB0cmFja0NsaWNrIH0gZnJvbSAnLi9oZWxwZXJzJztcbmltcG9ydCB7IFNpbXBsZU1vbmFjb0VkaXRvciB9IGZyb20gJy4vTW9uYWNvRWRpdG9yJztcbmltcG9ydCB7IENvZGVieXRlc0NoYW5nZUhhbmRsZXIgfSBmcm9tICcuL3R5cGVzJztcblxuY29uc3QgT3V0cHV0ID0gc3R5bGVkLnByZTx7IGhhc0Vycm9yOiBib29sZWFuIH0+YFxuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuICBtYXJnaW46IDA7XG4gIHBhZGRpbmc6IDAgMXJlbTtcbiAgZm9udC1mYW1pbHk6IE1vbmFjbztcbiAgZm9udC1zaXplOiAwLjg3NXJlbTtcbiAgb3ZlcmZsb3c6IGF1dG87XG4gICR7KHsgaGFzRXJyb3IsIHRoZW1lIH0pID0+IGBcbiAgY29sb3I6ICR7aGFzRXJyb3IgPyB0aGVtZS5jb2xvcnMub3JhbmdlIDogdGhlbWUuY29sb3JzLndoaXRlfTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5jb2xvcnNbJ25hdnktOTAwJ119O1xuYH1cbmA7XG5cbmNvbnN0IENvcHlJY29uU3R5bGVkID0gc3R5bGVkKENvcHlJY29uKWBcbiAgbWFyZ2luLXJpZ2h0OiAwLjVyZW07XG5gO1xuXG5jb25zdCBET0NLRVJfU0lHVEVSTSA9IDE0MztcblxudHlwZSBFZGl0b3JQcm9wcyA9IHtcbiAgaGlkZUNvcHlCdXR0b246IGJvb2xlYW47XG4gIGxhbmd1YWdlOiBMYW5ndWFnZU9wdGlvbjtcbiAgdGV4dDogc3RyaW5nO1xuICBvbkNoYW5nZTogKHRleHQ6IHN0cmluZykgPT4gdm9pZDtcbiAgc25pcHBldHNCYXNlVXJsPzogc3RyaW5nO1xuICBvbkNvcHk/OiBDb2RlYnl0ZXNDaGFuZ2VIYW5kbGVyO1xufTtcblxuZXhwb3J0IGNvbnN0IEVkaXRvcjogUmVhY3QuRkM8RWRpdG9yUHJvcHM+ID0gKHtcbiAgbGFuZ3VhZ2UsXG4gIHRleHQsXG4gIGhpZGVDb3B5QnV0dG9uLFxuICBvbkNoYW5nZSxcbiAgb25Db3B5LFxuICBzbmlwcGV0c0Jhc2VVcmwsXG59KSA9PiB7XG4gIGNvbnN0IFtvdXRwdXQsIHNldE91dHB1dF0gPSB1c2VTdGF0ZSgnJyk7XG4gIGNvbnN0IFtzdGF0dXMsIHNldFN0YXR1c10gPSB1c2VTdGF0ZTwncmVhZHknIHwgJ3dhaXRpbmcnIHwgJ2Vycm9yJz4oJ3JlYWR5Jyk7XG4gIGNvbnN0IFtpc0NvZGVCeXRlQ29waWVkLCBzZXRJc0NvZGVCeXRlQ29waWVkXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3Qgb25Db3B5Q2xpY2sgPSAoKSA9PiB7XG4gICAgaWYgKCFpc0NvZGVCeXRlQ29waWVkKSB7XG4gICAgICBuYXZpZ2F0b3IuY2xpcGJvYXJkXG4gICAgICAgIC53cml0ZVRleHQodGV4dClcbiAgICAgICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIG5vLWNvbnNvbGVcbiAgICAgICAgLmNhdGNoKCgpID0+IGNvbnNvbGUuZXJyb3IoJ0ZhaWxlZCB0byBjb3B5JykpO1xuICAgICAgc2V0SXNDb2RlQnl0ZUNvcGllZCh0cnVlKTtcbiAgICAgIG9uQ29weT8uKHRleHQsIGxhbmd1YWdlKTtcbiAgICAgIHRyYWNrQ2xpY2soJ2NvcHknKTtcbiAgICB9XG4gIH07XG5cbiAgY29uc3Qgc2V0RXJyb3JTdGF0dXNBbmRPdXRwdXQgPSAobWVzc2FnZTogc3RyaW5nKSA9PiB7XG4gICAgc2V0T3V0cHV0KG1lc3NhZ2UpO1xuICAgIHNldFN0YXR1cygnZXJyb3InKTtcbiAgfTtcblxuICBjb25zdCBoYW5kbGVTdWJtaXQgPSBhc3luYyAoKSA9PiB7XG4gICAgaWYgKHRleHQudHJpbSgpLmxlbmd0aCA9PT0gMCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICBjb25zdCBkYXRhID0ge1xuICAgICAgbGFuZ3VhZ2UsXG4gICAgICBjb2RlOiB0ZXh0LFxuICAgIH07XG4gICAgc2V0U3RhdHVzKCd3YWl0aW5nJyk7XG4gICAgc2V0T3V0cHV0KCcnKTtcbiAgICB0cmFja0NsaWNrKCdydW4nKTtcblxuICAgIHRyeSB7XG4gICAgICBjb25zdCByZXNwb25zZSA9IGF3YWl0IHBvc3RTbmlwcGV0KGRhdGEsIHNuaXBwZXRzQmFzZVVybCk7XG4gICAgICBpZiAocmVzcG9uc2Uuc3RkZXJyLmxlbmd0aCA+IDApIHtcbiAgICAgICAgc2V0RXJyb3JTdGF0dXNBbmRPdXRwdXQocmVzcG9uc2Uuc3RkZXJyKTtcbiAgICAgIH0gZWxzZSBpZiAocmVzcG9uc2UuZXhpdF9jb2RlID09PSBET0NLRVJfU0lHVEVSTSkge1xuICAgICAgICBzZXRFcnJvclN0YXR1c0FuZE91dHB1dChcbiAgICAgICAgICAnWW91ciBjb2RlIHRvb2sgdG9vIGxvbmcgdG8gcmV0dXJuIGEgcmVzdWx0LiBEb3VibGUgY2hlY2sgeW91ciBjb2RlIGZvciBhbnkgaXNzdWVzIGFuZCB0cnkgYWdhaW4hJ1xuICAgICAgICApO1xuICAgICAgfSBlbHNlIGlmIChyZXNwb25zZS5leGl0X2NvZGUgIT09IDApIHtcbiAgICAgICAgc2V0RXJyb3JTdGF0dXNBbmRPdXRwdXQoJ0FuIHVua25vd24gZXJyb3Igb2NjdXJlZC4nKTtcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHNldE91dHB1dChyZXNwb25zZS5zdGRvdXQpO1xuICAgICAgICBzZXRTdGF0dXMoJ3JlYWR5Jyk7XG4gICAgICB9XG4gICAgfSBjYXRjaCAoZXJyb3IpIHtcbiAgICAgIHNldEVycm9yU3RhdHVzQW5kT3V0cHV0KCdFcnJvcjogJyArIGVycm9yKTtcbiAgICB9XG4gIH07XG5cbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAgPERyYXdlcnNcbiAgICAgICAgbGVmdENoaWxkPXtcbiAgICAgICAgICA8U2ltcGxlTW9uYWNvRWRpdG9yXG4gICAgICAgICAgICB2YWx1ZT17dGV4dH1cbiAgICAgICAgICAgIGxhbmd1YWdlPXtsYW5ndWFnZX1cbiAgICAgICAgICAgIG9uQ2hhbmdlPXtvbkNoYW5nZX1cbiAgICAgICAgICAvPlxuICAgICAgICB9XG4gICAgICAgIHJpZ2h0Q2hpbGQ9e1xuICAgICAgICAgIDxPdXRwdXQgaGFzRXJyb3I9e3N0YXR1cyA9PT0gJ2Vycm9yJ30gYXJpYS1saXZlPVwicG9saXRlXCI+XG4gICAgICAgICAgICB7b3V0cHV0fVxuICAgICAgICAgIDwvT3V0cHV0PlxuICAgICAgICB9XG4gICAgICAvPlxuICAgICAgPEZsZXhCb3hcbiAgICAgICAganVzdGlmeUNvbnRlbnQ9e2hpZGVDb3B5QnV0dG9uID8gJ2ZsZXgtZW5kJyA6ICdzcGFjZS1iZXR3ZWVuJ31cbiAgICAgICAgcGw9ezh9XG4gICAgICA+XG4gICAgICAgIHshaGlkZUNvcHlCdXR0b24gPyAoXG4gICAgICAgICAgPFRvb2xUaXBcbiAgICAgICAgICAgIGlkPVwiY29kZWJ5dGUtY29waWVkXCJcbiAgICAgICAgICAgIGFsaWdubWVudD1cInRvcC1yaWdodFwiXG4gICAgICAgICAgICBtb2RlPVwiZGFya1wiXG4gICAgICAgICAgICB0YXJnZXQ9e1xuICAgICAgICAgICAgICA8VGV4dEJ1dHRvblxuICAgICAgICAgICAgICAgIHZhcmlhbnQ9XCJzZWNvbmRhcnlcIlxuICAgICAgICAgICAgICAgIG9uQ2xpY2s9e29uQ29weUNsaWNrfVxuICAgICAgICAgICAgICAgIG9uQmx1cj17KCkgPT4gc2V0SXNDb2RlQnl0ZUNvcGllZChmYWxzZSl9XG4gICAgICAgICAgICAgICAgZGF0YS10ZXN0aWQ9XCJjb3B5LWNvZGVieXRlLWJ0blwiXG4gICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICA8Q29weUljb25TdHlsZWQgYXJpYS1oaWRkZW49XCJ0cnVlXCIgLz4gQ29weSBDb2RlYnl0ZVxuICAgICAgICAgICAgICA8L1RleHRCdXR0b24+XG4gICAgICAgICAgICB9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge2lzQ29kZUJ5dGVDb3BpZWQgPyAoXG4gICAgICAgICAgICAgIDxzcGFuIGRhdGEtdGVzdGlkPVwiY29weS1jb25maXJtYXRpb24tdG9vbHRpcFwiIHJvbGU9XCJhbGVydFwiPlxuICAgICAgICAgICAgICAgIENvcGllZCFcbiAgICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgICAgKSA6IChcbiAgICAgICAgICAgICAgPHNwYW4gZGF0YS10ZXN0aWQ9XCJjb3B5LXByb21wdC10b29sdGlwXCI+XG4gICAgICAgICAgICAgICAgQ29weSB0byB5b3VyIGNsaXBib2FyZFxuICAgICAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgICApfVxuICAgICAgICAgIDwvVG9vbFRpcD5cbiAgICAgICAgKSA6IG51bGx9XG4gICAgICAgIDxGaWxsQnV0dG9uIG9uQ2xpY2s9e2hhbmRsZVN1Ym1pdH0+XG4gICAgICAgICAge3N0YXR1cyA9PT0gJ3dhaXRpbmcnID8gPFNwaW5uZXIgLz4gOiAnUnVuJ31cbiAgICAgICAgPC9GaWxsQnV0dG9uPlxuICAgICAgPC9GbGV4Qm94PlxuICAgIDwvPlxuICApO1xufTtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+
+var DOCKER_SIGTERM = 143;
+export var Editor = function Editor(_ref2) {
+  var language = _ref2.language,
+      text = _ref2.text,
+      hideCopyButton = _ref2.hideCopyButton,
+      onChange = _ref2.onChange,
+      onCopy = _ref2.onCopy,
+      snippetsBaseUrl = _ref2.snippetsBaseUrl;
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      output = _useState2[0],
+      setOutput = _useState2[1];
+
+  var _useState3 = useState('ready'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      status = _useState4[0],
+      setStatus = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isCodeByteCopied = _useState6[0],
+      setIsCodeByteCopied = _useState6[1];
+
+  var onCopyClick = function onCopyClick() {
+    if (!isCodeByteCopied) {
+      navigator.clipboard.writeText(text) // eslint-disable-next-line no-console
+      ["catch"](function () {
+        return console.error('Failed to copy');
+      });
+      setIsCodeByteCopied(true);
+      onCopy === null || onCopy === void 0 ? void 0 : onCopy(text, language);
+      trackClick('copy');
+    }
+  };
+
+  var setErrorStatusAndOutput = function setErrorStatusAndOutput(message) {
+    setOutput(message);
+    setStatus('error');
+  };
+
+  var handleSubmit = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var data, response;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!(text.trim().length === 0)) {
+                _context.next = 2;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 2:
+              data = {
+                language: language,
+                code: text
+              };
+              setStatus('waiting');
+              setOutput('');
+              trackClick('run');
+              _context.prev = 6;
+              _context.next = 9;
+              return postSnippet(data, snippetsBaseUrl);
+
+            case 9:
+              response = _context.sent;
+
+              if (response.stderr.length > 0) {
+                setErrorStatusAndOutput(response.stderr);
+              } else if (response.exit_code === DOCKER_SIGTERM) {
+                setErrorStatusAndOutput('Your code took too long to return a result. Double check your code for any issues and try again!');
+              } else if (response.exit_code !== 0) {
+                setErrorStatusAndOutput('An unknown error occured.');
+              } else {
+                setOutput(response.stdout);
+                setStatus('ready');
+              }
+
+              _context.next = 16;
+              break;
+
+            case 13:
+              _context.prev = 13;
+              _context.t0 = _context["catch"](6);
+              setErrorStatusAndOutput('Error: ' + _context.t0);
+
+            case 16:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[6, 13]]);
+    }));
+
+    return function handleSubmit() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Drawers, {
+    leftChild: /*#__PURE__*/React.createElement(SimpleMonacoEditor, {
+      value: text,
+      language: language,
+      onChange: onChange
+    }),
+    rightChild: /*#__PURE__*/React.createElement(Output, {
+      hasError: status === 'error',
+      "aria-live": "polite"
+    }, output)
+  }), /*#__PURE__*/React.createElement(FlexBox, {
+    justifyContent: hideCopyButton ? 'flex-end' : 'space-between',
+    pl: 8
+  }, !hideCopyButton ? /*#__PURE__*/React.createElement(ToolTip, {
+    id: "codebyte-copied",
+    alignment: "top-right",
+    mode: "dark",
+    target: /*#__PURE__*/React.createElement(TextButton, {
+      variant: "secondary",
+      onClick: onCopyClick,
+      onBlur: function onBlur() {
+        return setIsCodeByteCopied(false);
+      },
+      "data-testid": "copy-codebyte-btn"
+    }, /*#__PURE__*/React.createElement(CopyIconStyled, {
+      "aria-hidden": "true"
+    }), " Copy Codebyte")
+  }, isCodeByteCopied ? /*#__PURE__*/React.createElement("span", {
+    "data-testid": "copy-confirmation-tooltip",
+    role: "alert"
+  }, "Copied!") : /*#__PURE__*/React.createElement("span", {
+    "data-testid": "copy-prompt-tooltip"
+  }, "Copy to your clipboard")) : null, /*#__PURE__*/React.createElement(FillButton, {
+    onClick: handleSubmit
+  }, status === 'waiting' ? /*#__PURE__*/React.createElement(Spinner, null) : 'Run')));
+};

package/dist/helpers/index.d.ts

@@ -0,0 +1,15 @@
+export declare type CodebyteOptions = {
+    clientName: string;
+    parentPage: string;
+    renderMode: string;
+};
+export declare enum CodebytesParams {
+    Language = "lang",
+    Text = "text",
+    CopyMode = "copy-mode",
+    ClientName = "client-name",
+    Page = "page",
+    Mode = "mode"
+}
+export declare const getOptions: () => CodebyteOptions;
+export declare const trackClick: (target: string) => void;

package/dist/helpers/index.js

@@ -0,0 +1,29 @@
+import { trackUserClick } from '../libs/eventTracking';
+export var CodebytesParams;
+
+(function (CodebytesParams) {
+  CodebytesParams["Language"] = "lang";
+  CodebytesParams["Text"] = "text";
+  CodebytesParams["CopyMode"] = "copy-mode";
+  CodebytesParams["ClientName"] = "client-name";
+  CodebytesParams["Page"] = "page";
+  CodebytesParams["Mode"] = "mode";
+})(CodebytesParams || (CodebytesParams = {}));
+
+export var getOptions = function getOptions() {
+  var currentUri = new URL(window.location.href);
+  return {
+    clientName: currentUri.searchParams.get(CodebytesParams.ClientName) || 'Unknown',
+    parentPage: currentUri.searchParams.get(CodebytesParams.Page) || document.referrer,
+    renderMode: currentUri.searchParams.get(CodebytesParams.Mode) || ''
+  };
+};
+export var trackClick = function trackClick(target) {
+  var options = getOptions();
+  var page_name = options.renderMode ? "".concat(options.clientName, "_").concat(options.renderMode) : options.clientName;
+  trackUserClick({
+    page_name: page_name,
+    context: options.parentPage,
+    target: target
+  });
+};

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from './codeByteEditor';
+export { LanguageOption, LanguageOptions } from './consts';

package/dist/languageSelection.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { LanguageOption } from './consts';
+export declare type LanguageSelectionProps = {
+    onChange: (newLanguage: LanguageOption) => void;
+};
+export declare const LanguageSelection: React.FC<LanguageSelectionProps>;

package/dist/languageSelection.js

@@ -0,0 +1,22 @@
+import { Select, Text } from '@codecademy/gamut';
+import { ColorMode } from '@codecademy/gamut-styles';
+import React from 'react';
+import { LanguageOptions } from './consts';
+export var LanguageSelection = function LanguageSelection(_ref) {
+  var _onChange = _ref.onChange;
+  return /*#__PURE__*/React.createElement(ColorMode, {
+    mode: "dark",
+    flex: 1,
+    px: 16,
+    pt: 48
+  }, /*#__PURE__*/React.createElement(Text, {
+    mb: 16
+  }, "Which language do you want to code in?"), /*#__PURE__*/React.createElement(Select, {
+    id: "language-select",
+    "aria-label": "Select a language",
+    options: LanguageOptions,
+    onChange: function onChange(e) {
+      return _onChange(e.target.value);
+    }
+  }));
+};

package/dist/libs/eventTracking.d.ts

@@ -0,0 +1 @@
+export declare const trackUserClick: (data: import("@codecademy/tracking").UserClickData) => void, trackUserVisit: (data: import("@codecademy/tracking").UserVisitData) => void, trackUserImpression: (data: import("@codecademy/tracking").UserImpressionData) => void;

package/dist/libs/eventTracking.js

@@ -0,0 +1,11 @@
+import { createTracker } from '@codecademy/tracking';
+var IS_DEV = process.env.NODE_ENV === 'development'; // TODO: confirm tracking details and implementation DISC-447
+
+var tracker = createTracker({
+  apiBaseUrl: typeof window === 'undefined' ? 'https://www.codecademy.com' : window.location.origin,
+  verbose: IS_DEV
+});
+var trackUserClick = tracker.click,
+    trackUserVisit = tracker.visit,
+    trackUserImpression = tracker.impression;
+export { trackUserClick, trackUserVisit, trackUserImpression };

package/dist/types.d.ts

@@ -0,0 +1,14 @@
+import { LanguageOption } from './consts';
+export interface CodebytesChangeHandler {
+    (text: string, language: LanguageOption): void;
+}
+export interface CodeByteEditorProps {
+    text?: string;
+    language?: LanguageOption;
+    hideCopyButton?: boolean;
+    onCopy?: CodebytesChangeHandler;
+    isIFrame?: boolean;
+    snippetsBaseUrl?: string;
+    onEdit?: CodebytesChangeHandler;
+    onLanguageChange?: CodebytesChangeHandler;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/codebytes",
   "description": "Codebytes Code Editor",
-  "version": "0.6.1",
+  "version": "0.6.3-alpha.e74dd5.0",
   "author": "Codecademy Engineering <dev@codecademy.com>",
   "sideEffects": [
     "**/*.css",
@@ -16,6 +16,7 @@
     "url": "git@github.com:Codecademy/client-modules.git"
   },
   "peerDependencies": {
+    "@codecademy/tracking": "0.18.0",
     "react": ">=16.8.1",
     "react-dom": ">=16.8.1"
   },
@@ -23,7 +24,6 @@
     "@codecademy/gamut": "*",
     "@codecademy/gamut-icons": "*",
     "@codecademy/gamut-styles": "*",
-    "@codecademy/tracking": "0.18.0",
     "@codecademy/variance": "*",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
@@ -45,6 +45,7 @@
   "license": "MIT",
   "devDependencies": {
     "@codecademy/gamut-tests": "*",
+    "@codecademy/tracking": "0.18.0",
     "@emotion/jest": "^11.3.0",
     "@testing-library/dom": "^7.31.2",
     "@testing-library/react": "^11.0.4",
@@ -57,5 +58,8 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "42fa1970877fa986d8796841120048166c0e6494"
+  "files": [
+    "dist/**"
+  ],
+  "gitHead": "298fb5cbf2aea93bd38e779ad9323c42f6e3bec8"
 }

package/babel.config.js

@@ -1,15 +0,0 @@
-module.exports = {
-  presets: ['codecademy', '@babel/preset-typescript'],
-  plugins: [
-    [
-      '@emotion',
-      {
-        sourceMap: true,
-        autoLabel: 'always',
-        labelFormat: '[local]',
-      },
-    ],
-  ],
-  include: ['./src/**/*'],
-  ignore: ['__tests__', './**/*.d.ts'],
-};

package/jest.config.js

@@ -1 +0,0 @@
-module.exports = require('../../jest.config.base')('codebytes');

package/src/MonacoEditor/index.tsx

@@ -1,56 +0,0 @@
-// 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 ReactMonacoEditor, { OnMount } from '@monaco-editor/react';
-import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
-import React, { useCallback, useRef } from 'react';
-import ResizeObserver from 'react-resize-observer';
-
-import { dark } from './theme';
-import { Monaco } from './types';
-
-export type SimpleMonacoEditorProps = {
-  value: string;
-  language: string;
-  onChange?: (value: string) => void;
-};
-
-type ThemedEditor = Parameters<OnMount>[0];
-
-export const SimpleMonacoEditor: React.FC<SimpleMonacoEditorProps> = ({
-  value,
-  language,
-  onChange,
-}) => {
-  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
-  const editorWillMount = useCallback(
-    (editor: ThemedEditor, monaco: Monaco) => {
-      editorRef.current = editor;
-      monaco.editor.defineTheme('dark', dark);
-      monaco.editor.setTheme('dark');
-    },
-    []
-  );
-  return (
-    <>
-      <ResizeObserver
-        onResize={({ height, width }) => {
-          editorRef.current?.layout({
-            height,
-            width,
-          });
-        }}
-      />
-      <ReactMonacoEditor
-        onMount={editorWillMount}
-        onChange={onChange}
-        options={{ minimap: { enabled: false } }}
-        theme="vs-dark"
-        value={value}
-        language={language}
-      />
-    </>
-  );
-};

package/src/MonacoEditor/theme.ts

@@ -1,64 +0,0 @@
-// DO NOT CHANGE ANYTHING HERE
-// This file is part of the Codebytes MVP and only includes basic configuration around theming for the SimpleMonacoEditor component
-// 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 type * as monaco from 'monaco-editor';
-
-import * as darkColors from './colorsDark';
-
-const c = (color: string) => color.substr(1);
-
-const theme = ({
-  ui,
-  syntax,
-}: {
-  ui: darkColors.UIColors;
-  syntax: darkColors.SyntaxColors;
-}): monaco.editor.IStandaloneThemeData => ({
-  base: 'vs-dark',
-  inherit: true,
-  rules: [
-    // Base
-    { token: '', foreground: c(syntax.basic) },
-    { token: 'regexp', foreground: c(syntax.regexp) },
-    { token: 'annotation', foreground: c(syntax.annotation) },
-    { token: 'type', foreground: c(syntax.annotation) },
-    { token: 'doctype', foreground: c(syntax.comment) },
-    { token: 'delimiter', foreground: c(syntax.decoration) },
-    { token: 'invalid', foreground: c(syntax.invalid) },
-    { token: 'emphasis', fontStyle: 'italic' },
-    { token: 'strong', fontStyle: 'bold' },
-    { token: 'variable', foreground: c(syntax.variable) },
-    { token: 'variable.predefined', foreground: c(syntax.variable) },
-    { token: 'constant', foreground: c(syntax.constant) },
-    { token: 'comment', foreground: c(syntax.comment) },
-    { token: 'number', foreground: c(syntax.number) },
-    { token: 'number.hex', foreground: c(syntax.number) },
-    { token: 'keyword.directive', foreground: c(syntax.comment) },
-    { token: 'include', foreground: c(syntax.comment) },
-    { token: 'key', foreground: c(syntax.property) },
-    { token: 'attribute.name', foreground: c(syntax.attribute) },
-    { token: 'attribute.name-numeric', foreground: c(syntax.string) },
-    { token: 'attribute.value', foreground: c(syntax.property) },
-    { token: 'attribute.value.number', foreground: c(syntax.number) },
-    { token: 'string', foreground: c(syntax.string) },
-    { token: 'string.yaml', foreground: c(syntax.string) },
-    { token: 'tag', foreground: c(syntax.tag) },
-    { token: 'tag.id.jade', foreground: c(syntax.tag) },
-    { token: 'tag.class.jade', foreground: c(syntax.tag) },
-    { token: 'metatag', foreground: c(syntax.comment) },
-    { token: 'attribute.value.unit', foreground: c(syntax.string) },
-    { token: 'keyword', foreground: c(syntax.keyword) },
-    { token: 'keyword.flow', foreground: c(syntax.keyword) },
-  ],
-  colors: {
-    'editor.background': ui.background,
-    'editor.foreground': ui.text,
-    'editorIndentGuide.background': ui.indent.inactive,
-    'editorIndentGuide.activeBackground': ui.indent.active,
-    'editorWhitespace.foreground': syntax.comment,
-  },
-});
-
-export const dark = theme(darkColors);

package/src/MonacoEditor/types.ts

@@ -1 +0,0 @@
-export type Monaco = typeof import('monaco-editor');