@instructure/ui-source-code-editor 8.33.1 → 8.33.2

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.33.2](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2) (2023-01-25)
+
+**Note:** Version bump only for package @instructure/ui-source-code-editor
+
 ## [8.33.1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1) (2023-01-06)
 
 **Note:** Version bump only for package @instructure/ui-source-code-editor

package/es/SourceCodeEditor/SourceCodeEditorLocator.js

@@ -21,60 +21,55 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { locator } from '@instructure/ui-test-locator';
 import { find, findAll } from '@instructure/ui-test-queries';
-import { SourceCodeEditor } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+import { SourceCodeEditor } from './index';
 
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 export const SourceCodeEditorLocator = locator(SourceCodeEditor.selector, {
   findContainer: async function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     return await find('[class$=-codeEditorContainer]', ...args);
   },
   findLabel: async function () {
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-
     return await find('[class$=-screenReaderContent]', ...args);
   },
   findInput: async function () {
     for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
       args[_key3] = arguments[_key3];
     }
-
     return await find('[role="textbox"]', ...args);
   },
   findGutter: async function () {
     for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
       args[_key4] = arguments[_key4];
     }
-
     return await find('.cm-gutter', ...args);
   },
   findScroller: async function () {
     for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
       args[_key5] = arguments[_key5];
     }
-
     return await find('.cm-scroller', ...args);
   },
   findAllLines: async function () {
     for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
       args[_key6] = arguments[_key6];
     }
-
     return await findAll('.cm-line', ...args);
   },
   findAllGutterElements: async function () {
     for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
       args[_key7] = arguments[_key7];
     }
-
-    const allGutterElements = await findAll('.cm-gutterElement', ...args); // first gutter element is always a placeholder
-
+    const allGutterElements = await findAll('.cm-gutterElement', ...args);
+    // first gutter element is always a placeholder
     allGutterElements.shift();
     return allGutterElements;
   }

package/es/SourceCodeEditor/customKeybinding.js

@@ -21,8 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { cursorCharLeft, cursorCharRight, cursorGroupLeft, cursorGroupRight, cursorLineBoundaryLeft, cursorLineBoundaryRight, cursorLineBoundaryBackward, cursorLineBoundaryForward, cursorSyntaxLeft, cursorSyntaxRight, deleteCharBackward, deleteCharForward, deleteGroupBackward, deleteGroupForward, deleteToLineEnd, deleteToLineStart, selectCharLeft, selectCharRight, selectGroupLeft, selectGroupRight, selectLineBoundaryLeft, selectLineBoundaryRight, selectLineBoundaryBackward, selectLineBoundaryForward, selectSyntaxLeft, selectSyntaxRight } from '@codemirror/commands';
-const rtlHorizontalArrowKeymap = [// Left/Start/Forward
+const rtlHorizontalArrowKeymap = [
+// Left/Start/Forward
 {
   key: 'ArrowLeft',
   run: cursorCharRight,
@@ -46,7 +48,8 @@ const rtlHorizontalArrowKeymap = [// Left/Start/Forward
   key: 'Home',
   run: cursorLineBoundaryForward,
   shift: selectLineBoundaryForward
-}, // Right/End/Backward
+},
+// Right/End/Backward
 {
   key: 'ArrowRight',
   run: cursorCharLeft,
@@ -70,7 +73,8 @@ const rtlHorizontalArrowKeymap = [// Left/Start/Forward
   key: 'End',
   run: cursorLineBoundaryBackward,
   shift: selectLineBoundaryBackward
-}, // Delete/Backspace
+},
+// Delete/Backspace
 {
   key: 'Delete',
   run: deleteCharBackward

package/es/SourceCodeEditor/index.js

@@ -1,8 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["label", "styles"];
-
 var _dec, _dec2, _dec3, _dec4, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -33,7 +31,8 @@ import { deepEqual as isEqual } from '@instructure/ui-utils';
 import { EditorState, StateEffect } from '@codemirror/state';
 import { EditorView, highlightSpecialChars, highlightActiveLine, drawSelection, dropCursor, rectangularSelection, crosshairCursor, lineNumbers, highlightActiveLineGutter, keymap } from '@codemirror/view';
 import { autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
-import { highlightSelectionMatches // Search feature is turned off for now, see note at keymaps
+import { highlightSelectionMatches
+// Search feature is turned off for now, see note at keymaps
 // searchKeymap
 } from '@codemirror/search';
 import { indentSelection, defaultKeymap, indentWithTab, history, historyKeymap } from '@codemirror/commands';
@@ -45,7 +44,8 @@ import { css } from '@codemirror/lang-css';
 import { markdown } from '@codemirror/lang-markdown';
 import { json } from '@codemirror/lang-json';
 import { shell } from '@codemirror/legacy-modes/mode/shell';
-import { yaml } from '@codemirror/legacy-modes/mode/yaml'; // import { oneDarkTheme, oneDarkHighlightStyle } from '@codemirror/theme-one-dark'
+import { yaml } from '@codemirror/legacy-modes/mode/yaml';
+// import { oneDarkTheme, oneDarkHighlightStyle } from '@codemirror/theme-one-dark'
 
 import { testable } from '@instructure/ui-testable';
 import { omitProps, passthroughProps, withDeterministicId } from '@instructure/ui-react-utils';
@@ -57,7 +57,6 @@ import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { rtlHorizontalArrowKeymap } from './customKeybinding';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 category: components
@@ -70,32 +69,24 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
       this._raf.push(requestAnimationFrame(callback));
     }
   }
-
   cancelAnimationFrames() {
     this._raf.forEach(request => request.cancel());
-
     this._raf = [];
   }
-
   focus() {
     this.addAnimationFrame(() => {
       var _this$_editorView;
-
       (_this$_editorView = this._editorView) === null || _this$_editorView === void 0 ? void 0 : _this$_editorView.focus();
     });
   }
-
   get hasFocus() {
     var _this$_editorView2;
-
     return (_this$_editorView2 = this._editorView) === null || _this$_editorView2 === void 0 ? void 0 : _this$_editorView2.hasFocus;
   }
-
   selectAll() {
     if (this._editorView) {
       this.addAnimationFrame(() => {
         var _this$currentDocValue;
-
         this.dispatchViewSelection({
           anchor: 0,
           head: (_this$currentDocValue = this.currentDocValue) === null || _this$currentDocValue === void 0 ? void 0 : _this$currentDocValue.length
@@ -103,7 +94,6 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
       });
     }
   }
-
   deselectAll() {
     if (this._editorView) {
       this.addAnimationFrame(() => {
@@ -114,7 +104,6 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
       });
     }
   }
-
   indentCurrentSelection() {
     this.addAnimationFrame(() => {
       if (this._editorView) {
@@ -122,14 +111,12 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
           state: this._editorView.state,
           dispatch: transaction => {
             var _this$_editorView3;
-
             (_this$_editorView3 = this._editorView) === null || _this$_editorView3 === void 0 ? void 0 : _this$_editorView3.update([transaction]);
           }
         });
       }
     });
   }
-
   indentAll() {
     this.addAnimationFrame(() => {
       if (this._editorView && this.currentDocValue) {
@@ -137,7 +124,6 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
       }
     });
   }
-
   indentCodeRange(from, to) {
     this.addAnimationFrame(() => {
       if (this._editorView && this.currentDocValue) {
@@ -146,24 +132,22 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
         });
       }
     });
-  } // Attach state effects
-
+  }
 
+  // Attach state effects
   dispatchViewEffects(effects) {
     if (!this._editorView || !effects) return;
-
     this._editorView.dispatch({
       effects
     });
-  } // Dispatch changes to the document
-
+  }
 
+  // Dispatch changes to the document
   dispatchViewChanges(_ref) {
     let changes = _ref.changes,
-        selection = _ref.selection,
-        userEvent = _ref.userEvent;
+      selection = _ref.selection,
+      userEvent = _ref.userEvent;
     if (!this._editorView || !changes) return;
-
     this._editorView.dispatch({
       changes,
       ...(selection ? {
@@ -173,28 +157,24 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
         userEvent
       } : void 0)
     });
-  } // Select a portion of the document
-
+  }
 
+  // Select a portion of the document
   dispatchViewSelection(selection) {
     if (!this._editorView || !selection) return;
-
     this._editorView.dispatch({
       selection
     });
   }
-
   get currentDocValue() {
     var _this$_editorView4;
-
     return (_this$_editorView4 = this._editorView) === null || _this$_editorView4 === void 0 ? void 0 : _this$_editorView4.state.doc;
-  } // when value is passed, the editor should be controlled
-
+  }
 
+  // when value is passed, the editor should be controlled
   get isControlled() {
     return typeof this.props.value === 'string';
   }
-
   constructor(props) {
     super(props);
     this._id = void 0;
@@ -203,36 +183,29 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
     this._editorView = void 0;
     this._raf = [];
     this._newSelectionAfterValueChange = void 0;
-
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
       this.ref = el;
-
       if (typeof elementRef === 'function') {
         elementRef(el);
       }
     };
-
     this.handleContainerRef = el => {
       const containerRef = this.props.containerRef;
       this._containerRef = el || void 0;
-
       if (typeof containerRef === 'function') {
         containerRef(el);
       }
     };
-
     this._id = props.deterministicId();
   }
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props2;
-
     const _this$props = this.props,
-          value = _this$props.value,
-          defaultValue = _this$props.defaultValue,
-          autofocus = _this$props.autofocus,
-          indentOnLoad = _this$props.indentOnLoad;
+      value = _this$props.value,
+      defaultValue = _this$props.defaultValue,
+      autofocus = _this$props.autofocus,
+      indentOnLoad = _this$props.indentOnLoad;
     (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
     const state = EditorState.create({
       doc: value || defaultValue,
@@ -242,115 +215,92 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
       state,
       parent: this._containerRef
     });
-
     if (autofocus) {
       this.focus();
     }
-
     if (indentOnLoad) {
       this.indentAll();
     }
   }
-
   componentWillUnmount() {
     var _this$_editorView5;
-
     (_this$_editorView5 = this._editorView) === null || _this$_editorView5 === void 0 ? void 0 : _this$_editorView5.destroy();
     this.cancelAnimationFrames();
   }
-
   componentDidUpdate(prevProps) {
     var _this$props$makeStyle2, _this$props3;
-
     (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
-
     if (this._editorView) {
       if (this.props.value !== prevProps.value) {
         this.refreshEditorValue();
       }
-
       if (this.shouldUpdateExtensions(prevProps)) {
         this.refreshExtensions();
       }
     }
   }
-
   shouldUpdateExtensions(prevProps) {
-    const propsToObserve = ['styles', // needed for theme update
+    const propsToObserve = ['styles',
+    // needed for theme update
     'themeOverride', 'language', 'readOnly', 'editable', 'lineNumbers', 'highlightActiveLineGutter', 'foldGutter', 'lineWrapping', 'autofocus', 'spellcheck', 'direction', 'dir', 'rtlMoveVisually', 'indentOnLoad', 'indentWithTab', 'indentUnit', 'highlightActiveLine', 'attachment'];
-
     for (const prop of propsToObserve) {
       if (!isEqual(this.props[prop], prevProps[prop])) {
         return true;
       }
     }
-
     return false;
   }
-
   get direction() {
     // comes from the `direction` prop and
     // falls back to the `dir` prop coming from the bidirectional decorator
     return this.props.direction || this.props.dir;
   }
-
   get extensions() {
-    const extensions = [...this.baseExtensions, // our custom extensions
+    const extensions = [...this.baseExtensions,
+    // our custom extensions
     this.languageExtension, this.onChangeExtension, this.focusListenerExtension, this.announceLineNumberExtension];
-
     if (this.themeExtension) {
       extensions.push(this.themeExtension);
     }
-
     if (this.props.lineNumbers) {
       extensions.push(lineNumbers());
     }
-
     if (this.props.highlightActiveLine) {
       extensions.push(highlightActiveLine());
     }
-
     if (this.props.highlightActiveLineGutter) {
       extensions.push(highlightActiveLineGutter());
     }
-
     if (this.props.foldGutter) {
       extensions.push(foldGutter());
     }
-
     if (this.props.lineWrapping) {
       extensions.push(EditorView.lineWrapping);
     }
-
     if (this.props.editable === false) {
       extensions.push(EditorView.editable.of(false));
     }
-
     if (this.props.readOnly) {
       extensions.push(EditorState.readOnly.of(true));
     }
-
     if (this.props.spellcheck) {
       extensions.push(EditorView.contentAttributes.of({
         spellcheck: 'true'
       }));
     }
-
     if (this.direction) {
       extensions.push(EditorView.contentAttributes.of({
         dir: this.direction
       }));
     }
-
     if (this.props.indentUnit) {
       extensions.push(indentUnit.of(this.props.indentUnit));
     }
-
     return extensions;
   }
-
   get baseExtensions() {
-    return [// The extensions are based on codemirrors basic setup from 'codemirror'.
+    return [
+    // The extensions are based on codemirrors basic setup from 'codemirror'.
     // It is recommended by CodeMirror, that if we want to configure
     // our editor more precisely, we have to copy the source
     // and adjust it as desired.
@@ -358,10 +308,11 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
       fallback: true
     }), bracketMatching(), closeBrackets(), autocompletion(), rectangularSelection(), crosshairCursor(), highlightSelectionMatches(), indentOnInput(), keymap.of(this.keymaps)];
   }
-
   get keymaps() {
     // TODO: if more keymaps are added, list them in the docs as well (#Command keybinding)
-    const keymaps = [...closeBracketsKeymap, ...this.commandKeybinding, ...historyKeymap, ...foldKeymap, ...completionKeymap, ...lintKeymap // TODO: style and include search & replace toolbar feature
+    const keymaps = [...closeBracketsKeymap, ...this.commandKeybinding, ...historyKeymap, ...foldKeymap, ...completionKeymap, ...lintKeymap
+
+    // TODO: style and include search & replace toolbar feature
     // Note: the search & replace toolbar is not styled.
     // If this feature is needed in the future, we need a decision about the styling.
     // For now we turned the feature off, since RCE doesn't need it.
@@ -371,33 +322,28 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
     if (this.props.indentWithTab) {
       keymaps.push(indentWithTab);
     }
-
     return keymaps;
   }
-
   get commandKeybinding() {
     const rtlMoveVisually = this.props.rtlMoveVisually;
-
     if (this.direction === 'rtl' && !rtlMoveVisually) {
-      const overrideableKeys = rtlHorizontalArrowKeymap.map(binding => binding.key ? binding.key : binding.mac ? binding.mac : binding); // we have to remove the binding we want to override from the original,
+      const overrideableKeys = rtlHorizontalArrowKeymap.map(binding => binding.key ? binding.key : binding.mac ? binding.mac : binding);
+      // we have to remove the binding we want to override from the original,
       // otherwise all will be merged and the defaults will still apply
-
       const filteredOriginal = defaultKeymap.filter(binding => binding.key ? overrideableKeys.indexOf(binding.key) < 0 : binding.mac ? overrideableKeys.indexOf(binding.mac) < 0 : false);
       return [...filteredOriginal, ...rtlHorizontalArrowKeymap];
     }
-
     return defaultKeymap;
   }
-
   get themeExtension() {
     const styles = this.props.styles;
-
     if (!(styles !== null && styles !== void 0 && styles.theme) || !styles.highlightStyle) {
       return;
     }
-
     const theme = EditorView.theme(styles === null || styles === void 0 ? void 0 : styles.theme);
-    const highlightStyle = syntaxHighlighting(HighlightStyle.define(styles === null || styles === void 0 ? void 0 : styles.highlightStyle)); // see notes in props.ts
+    const highlightStyle = syntaxHighlighting(HighlightStyle.define(styles === null || styles === void 0 ? void 0 : styles.highlightStyle));
+
+    // see notes in props.ts
     // if (darkTheme) {
     //   theme = oneDarkTheme
     //   highlightStyle = syntaxHighlighting(oneDarkHighlightStyle)
@@ -405,14 +351,11 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
 
     return [theme, highlightStyle];
   }
-
   get languageExtension() {
     const language = this.props.language;
-
     switch (language) {
       case 'json':
         return json();
-
       case 'js':
       case 'jsx':
       case 'javascript':
@@ -420,29 +363,23 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
           jsx: true,
           typescript: true
         });
-
       case 'html':
         return html({
           matchClosingTags: true,
           autoCloseTags: true
         });
-
       case 'css':
         return css();
-
       case 'markdown':
         return markdown();
-
       case 'sh':
       case 'shell':
       case 'bash':
         // ????
         return StreamLanguage.define(shell);
-
       case 'yml':
       case 'yaml':
         return StreamLanguage.define(yaml);
-
       default:
         return javascript({
           jsx: true,
@@ -450,27 +387,23 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
         });
     }
   }
-
   callOnChangeHandler(newValue) {
     const _this$props4 = this.props,
-          onChange = _this$props4.onChange,
-          value = _this$props4.value;
+      onChange = _this$props4.onChange,
+      value = _this$props4.value;
     this.addAnimationFrame(() => {
       if (typeof onChange === 'function' && newValue !== value) {
         onChange(newValue);
       }
     });
   }
-
   get onChangeExtension() {
     return EditorState.changeFilter.of(transaction => {
       if (!this._editorView) {
         return false;
       }
-
       if (transaction.docChanged) {
         const newDoc = transaction.newDoc.toString();
-
         if (this.isControlled) {
           // the value will be changed by the onChange handler,
           // refreshEditorValue has to run first
@@ -486,15 +419,13 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
           this.callOnChangeHandler(newDoc);
         }
       }
-
       return true;
     });
   }
-
   get focusListenerExtension() {
     const _this$props5 = this.props,
-          onFocus = _this$props5.onFocus,
-          onBlur = _this$props5.onBlur;
+      onFocus = _this$props5.onFocus,
+      onBlur = _this$props5.onBlur;
     return EditorView.updateListener.of(update => {
       if (update.focusChanged && this._editorView) {
         if (this.hasFocus) {
@@ -509,12 +440,10 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
       }
     });
   }
-
   get announceLineNumberExtension() {
     return EditorState.transactionExtender.of(tr => {
       const selection = tr.selection;
       const oldSelection = tr.startState.selection.main;
-
       if (selection && selection.main.empty && oldSelection.empty) {
         const oldLine = tr.startState.doc.lineAt(oldSelection.head);
         const newLine = tr.newDoc.lineAt(selection.main.head);
@@ -522,32 +451,27 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
           effects: EditorView.announce.of(tr.startState.phrase('line ') + newLine.number + '.')
         };
       }
-
       return null;
     });
   }
-
   refreshExtensions() {
     this.dispatchViewEffects(StateEffect.reconfigure.of(this.extensions));
   }
-
   refreshEditorValue() {
     if (!this._editorView) return;
     const value = this.props.value;
-
     const currentValue = this._editorView.state.doc.toString();
-
     if (value && currentValue !== value) {
       let userEvent;
-      const lengthDiff = value.length - currentValue.length; // setting user events are needed for the autocomplete to work
-      // (only these 2 events, autocomplete doesn't work on paste, etc.)
+      const lengthDiff = value.length - currentValue.length;
 
+      // setting user events are needed for the autocomplete to work
+      // (only these 2 events, autocomplete doesn't work on paste, etc.)
       if (lengthDiff === 1) {
         userEvent = 'input.type';
       } else if (lengthDiff === -1) {
         userEvent = 'delete.backward';
       }
-
       this.dispatchViewChanges({
         changes: {
           from: 0,
@@ -559,18 +483,15 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
       });
       this._newSelectionAfterValueChange = void 0;
     }
-
     if (this.props.indentOnLoad) {
       this.indentAll();
     }
   }
-
   render() {
     const _this$props6 = this.props,
-          label = _this$props6.label,
-          styles = _this$props6.styles,
-          restProps = _objectWithoutProperties(_this$props6, _excluded);
-
+      label = _this$props6.label,
+      styles = _this$props6.styles,
+      restProps = _objectWithoutProperties(_this$props6, _excluded);
     return jsx("div", Object.assign({
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.codeEditor
@@ -581,7 +502,6 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
       css: styles === null || styles === void 0 ? void 0 : styles.codeEditorContainer
     })));
   }
-
 }, _class2.displayName = "SourceCodeEditor", _class2.componentId = 'SourceCodeEditor', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   language: 'jsx',
   readOnly: false,

package/es/SourceCodeEditor/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 import { controllable } from '@instructure/ui-prop-types';
 const propTypes = {
@@ -50,6 +51,7 @@ const propTypes = {
   elementRef: PropTypes.func,
   containerRef: PropTypes.func
 };
-const allowedProps = ['label', 'language', 'readOnly', 'editable', 'lineNumbers', 'foldGutter', 'highlightActiveLineGutter', 'highlightActiveLine', 'lineWrapping', 'autofocus', 'spellcheck', 'direction', 'rtlMoveVisually', 'indentOnLoad', 'indentWithTab', 'indentUnit', 'defaultValue', 'value', 'onChange', 'onFocus', 'onBlur', 'attachment', // 'darkTheme',
+const allowedProps = ['label', 'language', 'readOnly', 'editable', 'lineNumbers', 'foldGutter', 'highlightActiveLineGutter', 'highlightActiveLine', 'lineWrapping', 'autofocus', 'spellcheck', 'direction', 'rtlMoveVisually', 'indentOnLoad', 'indentWithTab', 'indentUnit', 'defaultValue', 'value', 'onChange', 'onFocus', 'onBlur', 'attachment',
+// 'darkTheme',
 'elementRef', 'containerRef'];
 export { propTypes, allowedProps };