@datarailsshared/datarailsshared 1.5.284 → 1.5.285

package/lib/dr-code-editor/components/code-editor-hint-wrapper.component.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+export declare class CodeEditorHintWrapperComponent {
+    content: string;
+    tooltip: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CodeEditorHintWrapperComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CodeEditorHintWrapperComponent, "dr-code-editor-hint-wrapper", never, {}, {}, never, never, false, never>;
+}

package/lib/dr-code-editor/components/dr-codemirror.component.d.ts

@@ -0,0 +1,47 @@
+import { AfterViewInit, DoCheck, ElementRef, EventEmitter, KeyValueDiffers, NgZone, OnDestroy } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { Editor, EditorChange, EditorFromTextArea, ScrollInfo } from 'codemirror';
+import * as i0 from "@angular/core";
+export declare class DrCodemirrorComponent implements AfterViewInit, OnDestroy, ControlValueAccessor, DoCheck {
+    private _differs;
+    private _ngZone;
+    className: string;
+    name: string;
+    autoFocus: boolean;
+    set options(value: {
+        [key: string]: any;
+    });
+    preserveScrollPosition: boolean;
+    cursorActivity: EventEmitter<Editor>;
+    focusChange: EventEmitter<boolean>;
+    scroll: EventEmitter<ScrollInfo>;
+    drop: EventEmitter<[Editor, DragEvent]>;
+    codeMirrorLoaded: EventEmitter<DrCodemirrorComponent>;
+    ref: ElementRef<HTMLTextAreaElement>;
+    value: string;
+    disabled: boolean;
+    isFocused: boolean;
+    codeMirror?: EditorFromTextArea;
+    private _codeMirror;
+    private _differ?;
+    private _options;
+    constructor(_differs: KeyValueDiffers, _ngZone: NgZone);
+    get codeMirrorGlobal(): any;
+    ngAfterViewInit(): void;
+    ngDoCheck(): void;
+    ngOnDestroy(): void;
+    codemirrorValueChanged(cm: Editor, change: EditorChange): void;
+    setOptionIfChanged(optionName: string, newValue: any): void;
+    focusChanged(focused: boolean): void;
+    scrollChanged(cm: Editor): void;
+    cursorActive(cm: Editor): void;
+    dropFiles(cm: Editor, e: DragEvent): void;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    private onChange;
+    private onTouched;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DrCodemirrorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DrCodemirrorComponent, "dr-codemirror", never, { "className": { "alias": "className"; "required": false; }; "name": { "alias": "name"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "options": { "alias": "options"; "required": false; }; "preserveScrollPosition": { "alias": "preserveScrollPosition"; "required": false; }; }, { "cursorActivity": "cursorActivity"; "focusChange": "focusChange"; "scroll": "scroll"; "drop": "drop"; "codeMirrorLoaded": "codeMirrorLoaded"; }, never, never, false, never>;
+}

package/lib/dr-code-editor/dr-code-editor.component.d.ts

@@ -0,0 +1,44 @@
+import { ChangeDetectorRef, ComponentFactoryResolver, Injector } from '@angular/core';
+import { ControlValueAccessor, FormControl } from '@angular/forms';
+import { ICodeEditorHint } from './models/code-editor-hint';
+import * as i0 from "@angular/core";
+export declare class DrCodeEditorComponent implements ControlValueAccessor {
+    private cdr;
+    private cfr;
+    private injector;
+    constructor(cdr: ChangeDetectorRef, cfr: ComponentFactoryResolver, injector: Injector);
+    innerValue: any;
+    private onTouchedCallback;
+    private onChangeCallback;
+    private existMarkers;
+    private highlightedHints;
+    private parenthesesMarkers;
+    private parenthesisColors;
+    private parenthesesMap;
+    private doc;
+    private _hints;
+    private hintRefsStack;
+    codeMirrorOptions: any;
+    isFocused: boolean;
+    private markers;
+    highlightHints: boolean;
+    set hints(values: ICodeEditorHint[]);
+    control: FormControl | any;
+    private codeEditor;
+    get value(): string;
+    set value(v: string);
+    writeValue(value: string): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    focusChanged(bool: any): void;
+    afterCodeMirrorLoaded(): void;
+    private isClosedParenthesis;
+    private colorizeParentheses;
+    private highlightCustomFunctionsInEditor;
+    pasteText(text: string, goCharLeft?: boolean): void;
+    private registerHints;
+    private destroyHints;
+    private updateHighlightHints;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DrCodeEditorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DrCodeEditorComponent, "dr-code-editor", never, { "markers": { "alias": "markers"; "required": false; }; "highlightHints": { "alias": "highlightHints"; "required": false; }; "hints": { "alias": "hints"; "required": false; }; "control": { "alias": "control"; "required": false; }; }, {}, never, never, false, never>;
+}

package/lib/dr-code-editor/dr-code-editor.module.d.ts

@@ -0,0 +1,17 @@
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/addon/edit/matchbrackets';
+import 'codemirror/addon/hint/show-hint';
+import '@codemirror/autocomplete';
+import * as i0 from "@angular/core";
+import * as i1 from "./components/dr-codemirror.component";
+import * as i2 from "./dr-code-editor.component";
+import * as i3 from "./components/code-editor-hint-wrapper.component";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/forms";
+import * as i6 from "../dr-tooltip/dr-tooltip.module";
+import * as i7 from "../dr-error/dr-error.module";
+export declare class DrCodeEditorModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<DrCodeEditorModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DrCodeEditorModule, [typeof i1.DrCodemirrorComponent, typeof i2.DrCodeEditorComponent, typeof i3.CodeEditorHintWrapperComponent], [typeof i4.CommonModule, typeof i5.FormsModule, typeof i5.ReactiveFormsModule, typeof i6.DrTooltipModule, typeof i7.DrErrorModule], [typeof i1.DrCodemirrorComponent, typeof i2.DrCodeEditorComponent, typeof i3.CodeEditorHintWrapperComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<DrCodeEditorModule>;
+}

package/lib/dr-code-editor/models/code-editor-hint.d.ts

@@ -0,0 +1,14 @@
+export interface ICodeEditorHint {
+    icon: ICodeEditorHintIcon;
+    value: string;
+    type?: string;
+    hint?: string;
+}
+export declare enum ICodeEditorHintIcon {
+    VALUE = "#",
+    CALCULATED_VALUE = "="
+}
+export interface ICodeEditorMarker {
+    name: string;
+    title: string;
+}

package/lib/utils/dr-shared-utils.d.ts

@@ -9,4 +9,5 @@ export declare class DrSharedUtils {
     static getTimeframeByDateFormat(format: string): TimeframeOption;
     static getDateByTag(tag: string): any;
     static fromResizeObserver: (target: Element) => Observable<ResizeObserverEntry[]>;
+    static normalizeLineEndings: (str: string) => string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarailsshared/datarailsshared",
-  "version": "1.5.284",
+  "version": "1.5.285",
   "description": "DataRails shared components",
   "keywords": [
     "angular",

package/public-api.d.ts

@@ -47,6 +47,9 @@ export * from './lib/dr-spinner/dr-spinner.directive';
 export * from './lib/dr-inputs/button/button.component';
 export * from './lib/dr-badge-status/dr-badge-status.component';
 export * from './lib/dr-alert/dr-alert.component';
+export * from './lib/dr-code-editor/dr-code-editor.component';
+export * from './lib/dr-code-editor/components/dr-codemirror.component';
+export * from './lib/dr-code-editor/components/code-editor-hint-wrapper.component';
 export * from './lib/dr-scenario/components/dr-scenario-tag-configuration/dr-scenario-tag-configuration.component';
 export * from './lib/dr-scenario/components/dr-scenario-configuration/dr-scenario-configuration.component';
 export * from './lib/dr-tags-constructor/dr-tags-constructor.component';
@@ -103,6 +106,7 @@ export * from './lib/models/badgeStatus';
 export * from './lib/models/feedback';
 export * from './lib/models/toastr';
 export * from './lib/models/datePickerRange';
+export * from './lib/dr-code-editor/models/code-editor-hint';
 export { ScenarioService } from './lib/dr-scenario/services/scenario.service';
 export { TagsConstructorService } from './lib/dr-tags-constructor/tags-constructor.service';
 export { DrAvatarService } from './lib/dr-avatar/services/dr-avatar.service';
@@ -132,3 +136,4 @@ export { ClickOutsideModule } from './lib/directives/click-outside/click-outside
 export { DrAlertModule } from './lib/dr-alert/dr-alert.module';
 export { DrTagsConstructorModule } from './lib/dr-tags-constructor/dr-tags-constructor.module';
 export { DrToastrModule } from './lib/dr-toastr/dr-toastr.module';
+export { DrCodeEditorModule } from './lib/dr-code-editor/dr-code-editor.module';

package/styles.css

@@ -194,3 +194,529 @@ button.toast-close-button {
   }
 }
 
+
+/* BASICS */
+
+.CodeMirror {
+  /* Set height, width, borders, and global font properties here */
+  font-family: monospace;
+  height: 300px;
+  color: black;
+  direction: ltr;
+}
+
+/* PADDING */
+
+.CodeMirror-lines {
+  padding: 4px 0; /* Vertical padding around content */
+}
+.CodeMirror pre.CodeMirror-line,
+.CodeMirror pre.CodeMirror-line-like {
+  padding: 0 4px; /* Horizontal padding of content */
+}
+
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  background-color: white; /* The little square between H and V scrollbars */
+}
+
+/* GUTTER */
+
+.CodeMirror-gutters {
+  border-right: 1px solid #ddd;
+  background-color: #f7f7f7;
+  white-space: nowrap;
+}
+.CodeMirror-linenumbers {}
+.CodeMirror-linenumber {
+  padding: 0 3px 0 5px;
+  min-width: 20px;
+  text-align: right;
+  color: #999;
+  white-space: nowrap;
+}
+
+.CodeMirror-guttermarker { color: black; }
+.CodeMirror-guttermarker-subtle { color: #999; }
+
+/* CURSOR */
+
+.CodeMirror-cursor {
+  border-left: 1px solid black;
+  border-right: none;
+  width: 0;
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+  border-left: 1px solid silver;
+}
+.cm-fat-cursor .CodeMirror-cursor {
+  width: auto;
+  border: 0 !important;
+  background: #7e7;
+}
+.cm-fat-cursor div.CodeMirror-cursors {
+  z-index: 1;
+}
+.cm-fat-cursor .CodeMirror-line::selection,
+.cm-fat-cursor .CodeMirror-line > span::selection, 
+.cm-fat-cursor .CodeMirror-line > span > span::selection { background: transparent; }
+.cm-fat-cursor .CodeMirror-line::-moz-selection,
+.cm-fat-cursor .CodeMirror-line > span::-moz-selection,
+.cm-fat-cursor .CodeMirror-line > span > span::-moz-selection { background: transparent; }
+.cm-fat-cursor { caret-color: transparent; }
+@-moz-keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+@-webkit-keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+@keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+
+/* Can style cursor different in overwrite (non-insert) mode */
+.CodeMirror-overwrite .CodeMirror-cursor {}
+
+.cm-tab { display: inline-block; text-decoration: inherit; }
+
+.CodeMirror-rulers {
+  position: absolute;
+  left: 0; right: 0; top: -50px; bottom: 0;
+  overflow: hidden;
+}
+.CodeMirror-ruler {
+  border-left: 1px solid #ccc;
+  top: 0; bottom: 0;
+  position: absolute;
+}
+
+/* DEFAULT THEME */
+
+.cm-s-default .cm-header {color: blue;}
+.cm-s-default .cm-quote {color: #090;}
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+.cm-strikethrough {text-decoration: line-through;}
+
+.cm-s-default .cm-keyword {color: #708;}
+.cm-s-default .cm-atom {color: #219;}
+.cm-s-default .cm-number {color: #164;}
+.cm-s-default .cm-def {color: #00f;}
+.cm-s-default .cm-variable,
+.cm-s-default .cm-punctuation,
+.cm-s-default .cm-property,
+.cm-s-default .cm-operator {}
+.cm-s-default .cm-variable-2 {color: #05a;}
+.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
+.cm-s-default .cm-comment {color: #a50;}
+.cm-s-default .cm-string {color: #a11;}
+.cm-s-default .cm-string-2 {color: #f50;}
+.cm-s-default .cm-meta {color: #555;}
+.cm-s-default .cm-qualifier {color: #555;}
+.cm-s-default .cm-builtin {color: #30a;}
+.cm-s-default .cm-bracket {color: #997;}
+.cm-s-default .cm-tag {color: #170;}
+.cm-s-default .cm-attribute {color: #00c;}
+.cm-s-default .cm-hr {color: #999;}
+.cm-s-default .cm-link {color: #00c;}
+
+.cm-s-default .cm-error {color: #f00;}
+.cm-invalidchar {color: #f00;}
+
+.CodeMirror-composing { border-bottom: 2px solid; }
+
+/* Default styles for common addons */
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
+.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
+.CodeMirror-activeline-background {background: #e8f2ff;}
+
+/* STOP */
+
+/* The rest of this file contains styles related to the mechanics of
+   the editor. You probably shouldn't touch them. */
+
+.CodeMirror {
+  position: relative;
+  overflow: hidden;
+  background: white;
+}
+
+.CodeMirror-scroll {
+  overflow: scroll !important; /* Things will break if this is overridden */
+  /* 50px is the magic margin used to hide the element's real scrollbars */
+  /* See overflow: hidden in .CodeMirror */
+  margin-bottom: -50px; margin-right: -50px;
+  padding-bottom: 50px;
+  height: 100%;
+  outline: none; /* Prevent dragging from highlighting the element */
+  position: relative;
+  z-index: 0;
+}
+.CodeMirror-sizer {
+  position: relative;
+  border-right: 50px solid transparent;
+}
+
+/* The fake, visible scrollbars. Used to force redraw during scrolling
+   before actual scrolling happens, thus preventing shaking and
+   flickering artifacts. */
+.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  position: absolute;
+  z-index: 6;
+  display: none;
+  outline: none;
+}
+.CodeMirror-vscrollbar {
+  right: 0; top: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.CodeMirror-hscrollbar {
+  bottom: 0; left: 0;
+  overflow-y: hidden;
+  overflow-x: scroll;
+}
+.CodeMirror-scrollbar-filler {
+  right: 0; bottom: 0;
+}
+.CodeMirror-gutter-filler {
+  left: 0; bottom: 0;
+}
+
+.CodeMirror-gutters {
+  position: absolute; left: 0; top: 0;
+  min-height: 100%;
+  z-index: 3;
+}
+.CodeMirror-gutter {
+  white-space: normal;
+  height: 100%;
+  display: inline-block;
+  vertical-align: top;
+  margin-bottom: -50px;
+}
+.CodeMirror-gutter-wrapper {
+  position: absolute;
+  z-index: 4;
+  background: none !important;
+  border: none !important;
+}
+.CodeMirror-gutter-background {
+  position: absolute;
+  top: 0; bottom: 0;
+  z-index: 4;
+}
+.CodeMirror-gutter-elt {
+  position: absolute;
+  cursor: default;
+  z-index: 4;
+}
+.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
+.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
+
+.CodeMirror-lines {
+  cursor: text;
+  min-height: 1px; /* prevents collapsing before first draw */
+}
+.CodeMirror pre.CodeMirror-line,
+.CodeMirror pre.CodeMirror-line-like {
+  /* Reset some styles that the rest of the page might have set */
+  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+  border-width: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  margin: 0;
+  white-space: pre;
+  word-wrap: normal;
+  line-height: inherit;
+  color: inherit;
+  z-index: 2;
+  position: relative;
+  overflow: visible;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-variant-ligatures: contextual;
+  font-variant-ligatures: contextual;
+}
+.CodeMirror-wrap pre.CodeMirror-line,
+.CodeMirror-wrap pre.CodeMirror-line-like {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: normal;
+}
+
+.CodeMirror-linebackground {
+  position: absolute;
+  left: 0; right: 0; top: 0; bottom: 0;
+  z-index: 0;
+}
+
+.CodeMirror-linewidget {
+  position: relative;
+  z-index: 2;
+  padding: 0.1px; /* Force widget margins to stay inside of the container */
+}
+
+.CodeMirror-widget {}
+
+.CodeMirror-rtl pre { direction: rtl; }
+
+.CodeMirror-code {
+  outline: none;
+}
+
+/* Force content-box sizing for the elements where we expect it */
+.CodeMirror-scroll,
+.CodeMirror-sizer,
+.CodeMirror-gutter,
+.CodeMirror-gutters,
+.CodeMirror-linenumber {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+.CodeMirror-measure {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.CodeMirror-cursor {
+  position: absolute;
+  pointer-events: none;
+}
+.CodeMirror-measure pre { position: static; }
+
+div.CodeMirror-cursors {
+  visibility: hidden;
+  position: relative;
+  z-index: 3;
+}
+div.CodeMirror-dragcursors {
+  visibility: visible;
+}
+
+.CodeMirror-focused div.CodeMirror-cursors {
+  visibility: visible;
+}
+
+.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
+.CodeMirror-crosshair { cursor: crosshair; }
+.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
+.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
+
+.cm-searching {
+  background-color: #ffa;
+  background-color: rgba(255, 255, 0, .4);
+}
+
+/* Used to force a border model for a node */
+.cm-force-border { padding-right: .1px; }
+
+@media print {
+  /* Hide the cursor when printing */
+  .CodeMirror div.CodeMirror-cursors {
+    visibility: hidden;
+  }
+}
+
+/* See issue #2901 */
+.cm-tab-wrap-hack:after { content: ''; }
+
+/* Help users use markselection to safely style text background */
+span.CodeMirror-selectedtext { background: none; }
+
+/*
+  Name:       material
+  Author:     Mattia Astorino (http://github.com/equinusocio)
+  Website:    https://material-theme.site/
+*/
+
+.cm-s-material.CodeMirror {
+  background-color: #263238;
+  color: #EEFFFF;
+}
+
+.cm-s-material .CodeMirror-gutters {
+  background: #263238;
+  color: #546E7A;
+  border: none;
+}
+
+.cm-s-material .CodeMirror-guttermarker,
+.cm-s-material .CodeMirror-guttermarker-subtle,
+.cm-s-material .CodeMirror-linenumber {
+  color: #546E7A;
+}
+
+.cm-s-material .CodeMirror-cursor {
+  border-left: 1px solid #FFCC00;
+}
+.cm-s-material.cm-fat-cursor .CodeMirror-cursor {
+  background-color: #5d6d5c80 !important;
+}
+.cm-s-material .cm-animate-fat-cursor {
+  background-color: #5d6d5c80 !important;
+}
+
+.cm-s-material div.CodeMirror-selected {
+  background: rgba(128, 203, 196, 0.2);
+}
+
+.cm-s-material.CodeMirror-focused div.CodeMirror-selected {
+  background: rgba(128, 203, 196, 0.2);
+}
+
+.cm-s-material .CodeMirror-line::selection,
+.cm-s-material .CodeMirror-line>span::selection,
+.cm-s-material .CodeMirror-line>span>span::selection {
+  background: rgba(128, 203, 196, 0.2);
+}
+
+.cm-s-material .CodeMirror-line::-moz-selection,
+.cm-s-material .CodeMirror-line>span::-moz-selection,
+.cm-s-material .CodeMirror-line>span>span::-moz-selection {
+  background: rgba(128, 203, 196, 0.2);
+}
+
+.cm-s-material .CodeMirror-activeline-background {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.cm-s-material .cm-keyword {
+  color: #C792EA;
+}
+
+.cm-s-material .cm-operator {
+  color: #89DDFF;
+}
+
+.cm-s-material .cm-variable-2 {
+  color: #EEFFFF;
+}
+
+.cm-s-material .cm-variable-3,
+.cm-s-material .cm-type {
+  color: #f07178;
+}
+
+.cm-s-material .cm-builtin {
+  color: #FFCB6B;
+}
+
+.cm-s-material .cm-atom {
+  color: #F78C6C;
+}
+
+.cm-s-material .cm-number {
+  color: #FF5370;
+}
+
+.cm-s-material .cm-def {
+  color: #82AAFF;
+}
+
+.cm-s-material .cm-string {
+  color: #C3E88D;
+}
+
+.cm-s-material .cm-string-2 {
+  color: #f07178;
+}
+
+.cm-s-material .cm-comment {
+  color: #546E7A;
+}
+
+.cm-s-material .cm-variable {
+  color: #f07178;
+}
+
+.cm-s-material .cm-tag {
+  color: #FF5370;
+}
+
+.cm-s-material .cm-meta {
+  color: #FFCB6B;
+}
+
+.cm-s-material .cm-attribute {
+  color: #C792EA;
+}
+
+.cm-s-material .cm-property {
+  color: #C792EA;
+}
+
+.cm-s-material .cm-qualifier {
+  color: #DECB6B;
+}
+
+.cm-s-material .cm-variable-3,
+.cm-s-material .cm-type {
+  color: #DECB6B;
+}
+
+
+.cm-s-material .cm-error {
+  color: rgba(255, 255, 255, 1.0);
+  background-color: #FF5370;
+}
+
+.cm-s-material .CodeMirror-matchingbracket {
+  text-decoration: underline;
+  color: white !important;
+}
+
+.CodeMirror-hints {
+  position: absolute;
+  z-index: 10;
+  overflow: hidden;
+  list-style: none;
+
+  margin: 0;
+  padding: 2px;
+
+  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+  box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+  border-radius: 3px;
+  border: 1px solid silver;
+
+  background: white;
+  font-size: 90%;
+  font-family: monospace;
+
+  max-height: 20em;
+  overflow-y: auto;
+  box-sizing: border-box;
+}
+
+.CodeMirror-hint {
+  margin: 0;
+  padding: 0 4px;
+  border-radius: 2px;
+  white-space: pre;
+  color: black;
+  cursor: pointer;
+}
+
+li.CodeMirror-hint-active {
+  background: #08f;
+  color: white;
+}
+