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

package/lib/SourceCodeEditor/index.js

@@ -1,74 +1,41 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.SourceCodeEditor = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = require("react");
-
 var _deepEqual = require("@instructure/ui-utils/lib/deepEqual.js");
-
 var _state = require("@codemirror/state");
-
 var _view = require("@codemirror/view");
-
 var _autocomplete = require("@codemirror/autocomplete");
-
 var _search = require("@codemirror/search");
-
 var _commands = require("@codemirror/commands");
-
 var _lint = require("@codemirror/lint");
-
 var _language = require("@codemirror/language");
-
 var _langJavascript = require("@codemirror/lang-javascript");
-
 var _langHtml = require("@codemirror/lang-html");
-
 var _langCss = require("@codemirror/lang-css");
-
 var _langMarkdown = require("@codemirror/lang-markdown");
-
 var _langJson = require("@codemirror/lang-json");
-
 var _shell = require("@codemirror/legacy-modes/mode/shell");
-
 var _yaml = require("@codemirror/legacy-modes/mode/yaml");
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
-
 var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
-
 var _requestAnimationFrame = require("@instructure/ui-dom-utils/lib/requestAnimationFrame.js");
-
 var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
-
 var _textDirectionContextConsumer = require("@instructure/ui-i18n/lib/textDirectionContextConsumer.js");
-
 var _emotion = require("@instructure/emotion");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _customKeybinding = require("./customKeybinding");
-
 var _props = require("./props");
-
 const _excluded = ["label", "styles"];
-
 var _dec, _dec2, _dec3, _dec4, _class, _class2;
-
 /**
 ---
 category: components
@@ -81,32 +48,24 @@ let SourceCodeEditor = (_dec = (0, _withDeterministicId.withDeterministicId)(),
       this._raf.push((0, _requestAnimationFrame.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
@@ -114,7 +73,6 @@ let SourceCodeEditor = (_dec = (0, _withDeterministicId.withDeterministicId)(),
       });
     }
   }
-
   deselectAll() {
     if (this._editorView) {
       this.addAnimationFrame(() => {
@@ -125,7 +83,6 @@ let SourceCodeEditor = (_dec = (0, _withDeterministicId.withDeterministicId)(),
       });
     }
   }
-
   indentCurrentSelection() {
     this.addAnimationFrame(() => {
       if (this._editorView) {
@@ -133,14 +90,12 @@ let SourceCodeEditor = (_dec = (0, _withDeterministicId.withDeterministicId)(),
           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) {
@@ -148,7 +103,6 @@ let SourceCodeEditor = (_dec = (0, _withDeterministicId.withDeterministicId)(),
       }
     });
   }
-
   indentCodeRange(from, to) {
     this.addAnimationFrame(() => {
       if (this._editorView && this.currentDocValue) {
@@ -157,24 +111,22 @@ let SourceCodeEditor = (_dec = (0, _withDeterministicId.withDeterministicId)(),
         });
       }
     });
-  } // 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 ? {
@@ -184,28 +136,24 @@ let SourceCodeEditor = (_dec = (0, _withDeterministicId.withDeterministicId)(),
         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;
@@ -214,156 +162,124 @@ let SourceCodeEditor = (_dec = (0, _withDeterministicId.withDeterministicId)(),
     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 = _state.EditorState.create({
       doc: value || defaultValue,
       extensions: this.extensions
     });
-
     this._editorView = new _view.EditorView({
       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 (!(0, _deepEqual.deepEqual)(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((0, _view.lineNumbers)());
     }
-
     if (this.props.highlightActiveLine) {
       extensions.push((0, _view.highlightActiveLine)());
     }
-
     if (this.props.highlightActiveLineGutter) {
       extensions.push((0, _view.highlightActiveLineGutter)());
     }
-
     if (this.props.foldGutter) {
       extensions.push((0, _language.foldGutter)());
     }
-
     if (this.props.lineWrapping) {
       extensions.push(_view.EditorView.lineWrapping);
     }
-
     if (this.props.editable === false) {
       extensions.push(_view.EditorView.editable.of(false));
     }
-
     if (this.props.readOnly) {
       extensions.push(_state.EditorState.readOnly.of(true));
     }
-
     if (this.props.spellcheck) {
       extensions.push(_view.EditorView.contentAttributes.of({
         spellcheck: 'true'
       }));
     }
-
     if (this.direction) {
       extensions.push(_view.EditorView.contentAttributes.of({
         dir: this.direction
       }));
     }
-
     if (this.props.indentUnit) {
       extensions.push(_language.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.
@@ -371,10 +287,11 @@ let SourceCodeEditor = (_dec = (0, _withDeterministicId.withDeterministicId)(),
       fallback: true
     }), (0, _language.bracketMatching)(), (0, _autocomplete.closeBrackets)(), (0, _autocomplete.autocompletion)(), (0, _view.rectangularSelection)(), (0, _view.crosshairCursor)(), (0, _search.highlightSelectionMatches)(), (0, _language.indentOnInput)(), _view.keymap.of(this.keymaps)];
   }
-
   get keymaps() {
     // TODO: if more keymaps are added, list them in the docs as well (#Command keybinding)
-    const keymaps = [..._autocomplete.closeBracketsKeymap, ...this.commandKeybinding, ..._commands.historyKeymap, ..._language.foldKeymap, ..._autocomplete.completionKeymap, ..._lint.lintKeymap // TODO: style and include search & replace toolbar feature
+    const keymaps = [..._autocomplete.closeBracketsKeymap, ...this.commandKeybinding, ..._commands.historyKeymap, ..._language.foldKeymap, ..._autocomplete.completionKeymap, ..._lint.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.
@@ -384,36 +301,28 @@ let SourceCodeEditor = (_dec = (0, _withDeterministicId.withDeterministicId)(),
     if (this.props.indentWithTab) {
       keymaps.push(_commands.indentWithTab);
     }
-
     return keymaps;
   }
-
   get commandKeybinding() {
     const rtlMoveVisually = this.props.rtlMoveVisually;
-
     if (this.direction === 'rtl' && !rtlMoveVisually) {
-      const overrideableKeys = _customKeybinding.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 = _customKeybinding.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 = _commands.defaultKeymap.filter(binding => binding.key ? overrideableKeys.indexOf(binding.key) < 0 : binding.mac ? overrideableKeys.indexOf(binding.mac) < 0 : false);
-
       return [...filteredOriginal, ..._customKeybinding.rtlHorizontalArrowKeymap];
     }
-
     return _commands.defaultKeymap;
   }
-
   get themeExtension() {
     const styles = this.props.styles;
-
     if (!(styles !== null && styles !== void 0 && styles.theme) || !styles.highlightStyle) {
       return;
     }
-
     const theme = _view.EditorView.theme(styles === null || styles === void 0 ? void 0 : styles.theme);
+    const highlightStyle = (0, _language.syntaxHighlighting)(_language.HighlightStyle.define(styles === null || styles === void 0 ? void 0 : styles.highlightStyle));
 
-    const highlightStyle = (0, _language.syntaxHighlighting)(_language.HighlightStyle.define(styles === null || styles === void 0 ? void 0 : styles.highlightStyle)); // see notes in props.ts
+    // see notes in props.ts
     // if (darkTheme) {
     //   theme = oneDarkTheme
     //   highlightStyle = syntaxHighlighting(oneDarkHighlightStyle)
@@ -421,14 +330,11 @@ let SourceCodeEditor = (_dec = (0, _withDeterministicId.withDeterministicId)(),
 
     return [theme, highlightStyle];
   }
-
   get languageExtension() {
     const language = this.props.language;
-
     switch (language) {
       case 'json':
         return (0, _langJson.json)();
-
       case 'js':
       case 'jsx':
       case 'javascript':
@@ -436,29 +342,23 @@ let SourceCodeEditor = (_dec = (0, _withDeterministicId.withDeterministicId)(),
           jsx: true,
           typescript: true
         });
-
       case 'html':
         return (0, _langHtml.html)({
           matchClosingTags: true,
           autoCloseTags: true
         });
-
       case 'css':
         return (0, _langCss.css)();
-
       case 'markdown':
         return (0, _langMarkdown.markdown)();
-
       case 'sh':
       case 'shell':
       case 'bash':
         // ????
         return _language.StreamLanguage.define(_shell.shell);
-
       case 'yml':
       case 'yaml':
         return _language.StreamLanguage.define(_yaml.yaml);
-
       default:
         return (0, _langJavascript.javascript)({
           jsx: true,
@@ -466,27 +366,23 @@ let SourceCodeEditor = (_dec = (0, _withDeterministicId.withDeterministicId)(),
         });
     }
   }
-
   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 _state.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
@@ -502,15 +398,13 @@ let SourceCodeEditor = (_dec = (0, _withDeterministicId.withDeterministicId)(),
           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 _view.EditorView.updateListener.of(update => {
       if (update.focusChanged && this._editorView) {
         if (this.hasFocus) {
@@ -525,12 +419,10 @@ let SourceCodeEditor = (_dec = (0, _withDeterministicId.withDeterministicId)(),
       }
     });
   }
-
   get announceLineNumberExtension() {
     return _state.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);
@@ -538,32 +430,27 @@ let SourceCodeEditor = (_dec = (0, _withDeterministicId.withDeterministicId)(),
           effects: _view.EditorView.announce.of(tr.startState.phrase('line ') + newLine.number + '.')
         };
       }
-
       return null;
     });
   }
-
   refreshExtensions() {
     this.dispatchViewEffects(_state.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,
@@ -575,17 +462,15 @@ let SourceCodeEditor = (_dec = (0, _withDeterministicId.withDeterministicId)(),
       });
       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 = (0, _objectWithoutProperties2.default)(_this$props6, _excluded);
+      label = _this$props6.label,
+      styles = _this$props6.styles,
+      restProps = (0, _objectWithoutProperties2.default)(_this$props6, _excluded);
     return (0, _emotion.jsx)("div", Object.assign({
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.codeEditor
@@ -596,7 +481,6 @@ let SourceCodeEditor = (_dec = (0, _withDeterministicId.withDeterministicId)(),
       css: styles === null || styles === void 0 ? void 0 : styles.codeEditorContainer
     })));
   }
-
 }, _class2.displayName = "SourceCodeEditor", _class2.componentId = 'SourceCodeEditor', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
   language: 'jsx',
   readOnly: false,

package/lib/SourceCodeEditor/props.js

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = exports.allowedProps = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
-
 /*
  * The MIT License (MIT)
  *
@@ -34,6 +30,7 @@ var _controllable = require("@instructure/ui-prop-types/lib/controllable.js");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   label: _propTypes.default.string.isRequired,
   language: _propTypes.default.oneOf(['sh', 'js', 'json', 'javascript', 'jsx', 'shell', 'css', 'html', 'markdown', 'yaml', 'yml', 'bash']),
@@ -62,6 +59,7 @@ const propTypes = {
   containerRef: _propTypes.default.func
 };
 exports.propTypes = propTypes;
-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'];
 exports.allowedProps = allowedProps;

package/lib/SourceCodeEditor/styles.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _highlight = require("@lezer/highlight");
-
 /*
  * The MIT License (MIT)
  *
@@ -75,7 +73,8 @@ const generateStyle = (componentTheme, props) => {
       borderWidth: componentTheme === null || componentTheme === void 0 ? void 0 : componentTheme.borderWidth,
       borderRadius: componentTheme.borderRadius,
       marginBottom: '1rem',
-      ...(attachment && { ...attachmentVariants[attachment],
+      ...(attachment && {
+        ...attachmentVariants[attachment],
         ...attachmentBorderRadius[attachment]
       })
     },
@@ -91,7 +90,8 @@ const generateStyle = (componentTheme, props) => {
         lineHeight: 1.4375,
         minHeight: '1.4375rem',
         borderRadius: componentTheme.borderRadius,
-        ...(attachment && { ...attachmentBorderRadius[attachment]
+        ...(attachment && {
+          ...attachmentBorderRadius[attachment]
         })
       },
       '&.cm-editor.cm-focused': {
@@ -163,7 +163,8 @@ const generateStyle = (componentTheme, props) => {
     }, {
       tag: [_highlight.tags.string, _highlight.tags.deleted],
       color: '#a11'
-    }, // {
+    },
+    // {
     //   tag: [tags.regexp, tags.escape, tags.special(tags.string)],
     //   color: '#e40'
     // },
@@ -173,7 +174,8 @@ const generateStyle = (componentTheme, props) => {
     }, {
       tag: _highlight.tags.local(_highlight.tags.variableName),
       color: '#30a'
-    }, // { tag: [tags.typeName, tags.namespace], color: '#085' },
+    },
+    // { tag: [tags.typeName, tags.namespace], color: '#085' },
     {
       tag: _highlight.tags.className,
       color: '#167'
@@ -186,7 +188,8 @@ const generateStyle = (componentTheme, props) => {
     }, {
       tag: _highlight.tags.comment,
       color: '#940'
-    }, // { tag: tags.invalid, color: '#f00' },
+    },
+    // { tag: tags.invalid, color: '#f00' },
 
     /**
      * Custom highlighting overrides
@@ -208,6 +211,5 @@ const generateStyle = (componentTheme, props) => {
     }]
   };
 };
-
 var _default = generateStyle;
 exports.default = _default;