@teipublisher/pb-components 1.40.2 → 1.41.1

package/src/pb-components.js

@@ -38,7 +38,6 @@ import './pb-select-odd.js';
 import './pb-select-template.js';
 import './pb-geolocation.js';
 import './pb-code-highlight.js';
-import './pb-code-editor.js';
 import './pb-repeat.js';
 import './pb-svg.js';
 import './pb-facsimile.js';

package/src/pb-odd-model-editor.js

@@ -14,11 +14,11 @@ import '@polymer/paper-listbox/paper-listbox.js';
 import '@polymer/paper-item/paper-item.js';
 import '@polymer/paper-styles/color.js';
 import '@polymer/iron-collapse/iron-collapse.js';
+import "@jinntec/jinn-codemirror/dist/src/jinn-codemirror";
 
 import { cmpVersion } from './utils.js';
 import './pb-odd-rendition-editor.js';
 import './pb-odd-parameter-editor.js';
-import './pb-code-editor.js';
 import './pb-message.js';
 
 import { get as i18n, translate } from "./pb-i18n.js";
@@ -211,10 +211,17 @@ export class PbOddModelEditor extends LitElement {
                 background:var(--paper-grey-200);
             }
             
-            pb-code-editor {
+            .editor {
                 margin-bottom: 20px;
             }
 
+            .editor label {
+                margin-bottom:5px;
+                font-size: 12px;
+                font-weight: 400;
+                color: var(--paper-grey-500);
+            }
+
             .horizontal {
                 display: flex;
                 flex-wrap: wrap;
@@ -396,6 +403,26 @@ export class PbOddModelEditor extends LitElement {
     }
 
     render() {
+        let tmplSyntax;
+        switch (this.output) {
+            case 'web':
+            case 'epub':
+                tmplSyntax = 'html';
+                break;
+            case 'latex':
+                tmplSyntax = 'tex';
+                break;
+            case 'plain':
+                tmplSyntax = 'default';
+                break;
+            case 'fo':
+            case 'print':
+                tmplSyntax = 'xml';
+                break;
+            default:
+                tmplSyntax = 'html';
+                break;
+        }
         return html`
         <form>
             <header> 
@@ -465,14 +492,15 @@ export class PbOddModelEditor extends LitElement {
                 <paper-input id="desc" .value="${this.desc}" placeholder="${translate('odd.editor.model.description-placeholder')}"
                     label="Description" @change="${this._inputDesc}"></paper-input>
 
-                <pb-code-editor id="predicate"
-                     code="${this.predicate}"   
-                     mode="xquery"
-                     linter="${this.endpoint}/${cmpVersion(this.apiVersion, '1.0.0') < 0 ? 'modules/editor.xql' : 'api/lint'}"
-                     label="Predicate"
-                     placeholder="${translate('odd.editor.model.predicate-placeholder')}"
-                     @code-changed="${this._updatePredicate}"
-                     apiVersion="${this.apiVersion}"></pb-code-editor>
+                <div class="editor">
+                    <label>Predicate</label>
+                    <jinn-codemirror id="predicate"
+                        code="${this.predicate}"   
+                        mode="xquery"
+                        linter="${this.endpoint}/${cmpVersion(this.apiVersion, '1.0.0') < 0 ? 'modules/editor.xql' : 'api/lint'}"
+                        placeholder="${translate('odd.editor.model.predicate-placeholder')}"
+                        @update="${this._updatePredicate}"></jinn-codemirror>
+                </div>
                
                 ${this._isModel()
                 ? html`
@@ -498,14 +526,31 @@ export class PbOddModelEditor extends LitElement {
                                 placeholder="${translate('odd.editor.model.css-class-placeholder')}"
                                 label="CSS Class"
                                 @change="${this._inputCss}"></paper-input>
-                                
-                            <pb-code-editor id="template"
-                                             code="${this.template}"
-                                             mode="${this.output === 'latex' ? 'stex' : 'xml'}"
-                                             label="Template"
-                                             placeholder="${translate('odd.editor.model.template-placeholder')}"
-                                             @code-changed="${this._updateTemplate}"
-                                             apiVersion="${this.apiVersion}"></pb-code-editor>
+                            
+                            <div class="editor">
+                                <label>Template</label>
+                                <jinn-codemirror id="template"
+                                                 code="${this.template}"
+                                                 mode="${tmplSyntax}"
+                                                 placeholder="${translate('odd.editor.model.template-placeholder')}"
+                                                 @update="${this._updateTemplate}">
+                                    <div slot="toolbar">
+                                        <paper-button data-mode="xml" data-command="selectElement" data-key="mod-e mod-s"
+                                            title="Select element around current cursor position">&lt;|></paper-button>
+                                        <paper-button data-mode="xml" data-command="encloseWith" data-key="mod-e mod-e"
+                                            title="Enclose selection in new element">&lt;...&gt;</paper-button>
+                                        <paper-button data-mode="xml" data-command="removeEnclosing" title="Remove enclosing tags" 
+                                            data-key="mod-e mod-r" class="sep">&lt;X></paper-button>
+                                        <paper-button data-mode="html" data-command="selectElement" data-key="mod-e mod-s"
+                                            title="Select element around current cursor position">&lt;|></paper-button>
+                                        <paper-button data-mode="html" data-command="encloseWith" data-key="mod-e mod-e"
+                                            title="Enclose selection in new element">&lt;...&gt;</paper-button>
+                                        <paper-button data-mode="html" data-command="removeEnclosing" title="Remove enclosing tags" 
+                                            data-key="mod-e mod-r" class="sep">&lt;X></paper-button>
+                                        <paper-button data-key="mod-e mod-p" data-command="snippet" data-params="[[\${_}]]" title="Insert template variable">[[...]]</paper-button>
+                                    </div>
+                                </jinn-codemirror>
+                            </div>
                         </div>
         
                         <div class="parameters">
@@ -605,11 +650,11 @@ export class PbOddModelEditor extends LitElement {
 
     refreshEditors() {
         console.log('refreshEditors');
-        this.shadowRoot.getElementById('predicate').refresh();
+        // this.shadowRoot.getElementById('predicate').refresh();
 
         if (this._isGroupOrSequence()) { return console.log("asfdfa"); }
 
-        this.shadowRoot.getElementById('template').refresh();
+        // this.shadowRoot.getElementById('template').refresh();
 
         const models = this.shadowRoot.querySelectorAll('pb-odd-model-editor');
         for (let i = 0; i < models.length; i++) {
@@ -842,8 +887,8 @@ export class PbOddModelEditor extends LitElement {
         this._fireModelChanged('output', this.output);
     }
 
-    _updatePredicate(ev) {
-        this.predicate = this.shadowRoot.getElementById('predicate').getSource();
+    _updatePredicate() {
+        this.predicate = this.shadowRoot.getElementById('predicate').value;
         console.log('_updatePredicate ', this.predicate);
         this._fireModelChanged('predicate', this.predicate);
     }
@@ -864,7 +909,7 @@ export class PbOddModelEditor extends LitElement {
     }
 
     _updateTemplate(ev) {
-        this.template = this.shadowRoot.getElementById('template').getSource();
+        this.template = this.shadowRoot.getElementById('template').content;
         this._fireModelChanged('template', this.template);
     }
 

package/src/pb-odd-parameter-editor.js

@@ -7,10 +7,9 @@ import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
 import '@polymer/paper-listbox/paper-listbox.js';
 import '@polymer/paper-item/paper-item.js';
 import '@cwmr/paper-autocomplete/paper-autocomplete';
+import "@jinntec/jinn-codemirror/dist/src/jinn-codemirror";
 
 import { cmpVersion } from './utils.js';
-import './pb-code-editor.js';
-
 import { get as i18n, translate } from "./pb-i18n.js";
 
 /**
@@ -41,6 +40,13 @@ export class PbOddParameterEditor extends LitElement {
                 align-self: center;
                 margin-top: 16px;
             }
+
+            .editor label {
+                margin-bottom:5px;
+                font-size: 12px;
+                font-weight: 400;
+                color: var(--paper-grey-500);
+            }
         `;
     }
 
@@ -51,12 +57,13 @@ export class PbOddParameterEditor extends LitElement {
             <paper-autocomplete id="combo" text="${this.name}" placeholder="${translate('odd.editor.model.param-name-placeholder')}" label="Name" 
                 .source="${this._currentParameters}"></paper-autocomplete>
 
-            <pb-code-editor id="editor"
-                        label="Parameter"
+            <div class="editor">
+                <label>Parameter</label>
+                <jinn-codemirror id="editor"
                         mode="xquery"
                         code="${this.value}"
-                        linter="${this.endpoint}/${cmpVersion(this.apiVersion, '1.0.0') ? 'modules/editor.xql' : 'api/lint'}"
-                        apiVersion="${this.apiVersion}"></pb-code-editor>
+                        linter="${this.endpoint}/${cmpVersion(this.apiVersion, '1.0.0') ? 'modules/editor.xql' : 'api/lint'}"></jinn-codemirror>
+            </div>
             <paper-checkbox id="set" ?checked="${this.setParam}" @change="${this._handleCodeChange}">${translate('odd.editor.model.set-param')}</paper-checkbox>
             <paper-icon-button @click="${this._delete}" icon="delete" title="delete this parameter"></paper-icon-button>
         </div>
@@ -165,14 +172,14 @@ export class PbOddParameterEditor extends LitElement {
         this.requestUpdate();
 
         this.shadowRoot.getElementById('combo').addEventListener('focused-changed', this._handleCodeChange.bind(this));
-        this.shadowRoot.getElementById('editor').addEventListener('code-changed', this._handleCodeChange.bind(this));
+        this.shadowRoot.getElementById('editor').addEventListener('update', this._handleCodeChange.bind(this));
     }
 
     refreshEditor() {
         // console.log('parameters refresh');
         const editor = this.shadowRoot.getElementById('editor');
         if (!editor) { return; }
-        editor.refresh();
+        // editor.refresh();
     }
 
 
@@ -193,7 +200,8 @@ export class PbOddParameterEditor extends LitElement {
 
     _handleCodeChange(e) {
         console.log('_handleCodeChange ', e);
-        this.value = this.shadowRoot.getElementById('editor').getSource();
+        this.value = this.shadowRoot.getElementById('editor').content || '';
+        console.log('value %s', this.value);
         this.name = this.shadowRoot.getElementById('combo').text;
         this.setParam = this.shadowRoot.getElementById('set').checked;
         this.dispatchEvent(new CustomEvent('parameter-changed', { composed: true, bubbles: true, detail: { name: this.name, value: this.value, set: this.setParam } }));

package/src/pb-odd-rendition-editor.js

@@ -7,7 +7,7 @@ import '@polymer/paper-item/paper-item.js';
 import '@polymer/paper-icon-button/paper-icon-button.js';
 import '@polymer/iron-icons/iron-icons.js';
 
-import './pb-code-editor.js';
+import "@jinntec/jinn-codemirror/dist/src/jinn-codemirror";
 
 
 /**
@@ -32,6 +32,13 @@ export class PbOddRenditionEditor extends LitElement {
                 margin-bottom:10px;
             }
 
+            .editor label {
+                margin-bottom:5px;
+                font-size: 12px;
+                font-weight: 400;
+                color: var(--paper-grey-500);
+            }
+
             paper-dropdown-menu{
             }
             
@@ -53,12 +60,15 @@ export class PbOddRenditionEditor extends LitElement {
                         `)}
                 </paper-listbox>
             </paper-dropdown-menu>
-            <pb-code-editor
-                id="editor"
-                label="Rendition"
-                code="${this.css}"
-                mode="css"
-                @code-changed="${this._handleCodeChange}"></pb-code-editor>
+            <div class="editor">
+                <label>Rendition</label>
+                <jinn-codemirror
+                    id="editor"
+                    label="Rendition"
+                    code="${this.css || ''}"
+                    mode="css"
+                    @update="${this._handleCodeChange}"></jinn-codemirror>
+            </div>
             <paper-icon-button @click="${this._remove}" icon="delete" title="delete this rendition"></paper-icon-button>
         </div>
 
@@ -113,7 +123,7 @@ export class PbOddRenditionEditor extends LitElement {
         console.log('refreshEditor');
         const editor = this.shadowRoot.getElementById('editor');
         if (!editor) { return; }
-        editor.refresh();
+        // editor.refresh();
     }
 
     _remove(ev) {
@@ -122,7 +132,7 @@ export class PbOddRenditionEditor extends LitElement {
     }
 
     _handleCodeChange() {
-        this.css = this.shadowRoot.getElementById('editor').getSource();
+        this.css = this.shadowRoot.getElementById('editor').value;
         this.dispatchEvent(new CustomEvent('rendition-changed', { composed: true, bubbles: true, detail: { name: this.name, css: this.css, scope: this.scope } }));
     }
 

package/css/codemirror/3024-day.css

@@ -1,41 +0,0 @@
-/*
-
-    Name:       3024 day
-    Author:     Jan T. Sott (http://github.com/idleberg)
-
-    CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror)
-    Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
-
-*/
-
-.cm-s-3024-day.CodeMirror { background: #f7f7f7; color: #3a3432; }
-.cm-s-3024-day div.CodeMirror-selected { background: #d6d5d4; }
-
-.cm-s-3024-day .CodeMirror-line::selection, .cm-s-3024-day .CodeMirror-line > span::selection, .cm-s-3024-day .CodeMirror-line > span > span::selection { background: #d6d5d4; }
-.cm-s-3024-day .CodeMirror-line::-moz-selection, .cm-s-3024-day .CodeMirror-line > span::-moz-selection, .cm-s-3024-day .CodeMirror-line > span > span::selection { background: #d9d9d9; }
-
-.cm-s-3024-day .CodeMirror-gutters { background: #f7f7f7; border-right: 0px; }
-.cm-s-3024-day .CodeMirror-guttermarker { color: #db2d20; }
-.cm-s-3024-day .CodeMirror-guttermarker-subtle { color: #807d7c; }
-.cm-s-3024-day .CodeMirror-linenumber { color: #807d7c; }
-
-.cm-s-3024-day .CodeMirror-cursor { border-left: 1px solid #5c5855; }
-
-.cm-s-3024-day span.cm-comment { color: #cdab53; }
-.cm-s-3024-day span.cm-atom { color: #a16a94; }
-.cm-s-3024-day span.cm-number { color: #a16a94; }
-
-.cm-s-3024-day span.cm-property, .cm-s-3024-day span.cm-attribute { color: #01a252; }
-.cm-s-3024-day span.cm-keyword { color: #db2d20; }
-.cm-s-3024-day span.cm-string { color: #fded02; }
-
-.cm-s-3024-day span.cm-variable { color: #01a252; }
-.cm-s-3024-day span.cm-variable-2 { color: #01a0e4; }
-.cm-s-3024-day span.cm-def { color: #e8bbd0; }
-.cm-s-3024-day span.cm-bracket { color: #3a3432; }
-.cm-s-3024-day span.cm-tag { color: #db2d20; }
-.cm-s-3024-day span.cm-link { color: #a16a94; }
-.cm-s-3024-day span.cm-error { background: #db2d20; color: #5c5855; }
-
-.cm-s-3024-day .CodeMirror-activeline-background { background: #e8f2ff; }
-.cm-s-3024-day .CodeMirror-matchingbracket { text-decoration: underline; color: #a16a94 !important; }

package/css/codemirror/3024-night.css

@@ -1,39 +0,0 @@
-/*
-
-    Name:       3024 night
-    Author:     Jan T. Sott (http://github.com/idleberg)
-
-    CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror)
-    Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
-
-*/
-
-.cm-s-3024-night.CodeMirror { background: #090300; color: #d6d5d4; }
-.cm-s-3024-night div.CodeMirror-selected { background: #3a3432; }
-.cm-s-3024-night .CodeMirror-line::selection, .cm-s-3024-night .CodeMirror-line > span::selection, .cm-s-3024-night .CodeMirror-line > span > span::selection { background: rgba(58, 52, 50, .99); }
-.cm-s-3024-night .CodeMirror-line::-moz-selection, .cm-s-3024-night .CodeMirror-line > span::-moz-selection, .cm-s-3024-night .CodeMirror-line > span > span::-moz-selection { background: rgba(58, 52, 50, .99); }
-.cm-s-3024-night .CodeMirror-gutters { background: #090300; border-right: 0px; }
-.cm-s-3024-night .CodeMirror-guttermarker { color: #db2d20; }
-.cm-s-3024-night .CodeMirror-guttermarker-subtle { color: #5c5855; }
-.cm-s-3024-night .CodeMirror-linenumber { color: #5c5855; }
-
-.cm-s-3024-night .CodeMirror-cursor { border-left: 1px solid #807d7c; }
-
-.cm-s-3024-night span.cm-comment { color: #cdab53; }
-.cm-s-3024-night span.cm-atom { color: #a16a94; }
-.cm-s-3024-night span.cm-number { color: #a16a94; }
-
-.cm-s-3024-night span.cm-property, .cm-s-3024-night span.cm-attribute { color: #01a252; }
-.cm-s-3024-night span.cm-keyword { color: #db2d20; }
-.cm-s-3024-night span.cm-string { color: #fded02; }
-
-.cm-s-3024-night span.cm-variable { color: #01a252; }
-.cm-s-3024-night span.cm-variable-2 { color: #01a0e4; }
-.cm-s-3024-night span.cm-def { color: #e8bbd0; }
-.cm-s-3024-night span.cm-bracket { color: #d6d5d4; }
-.cm-s-3024-night span.cm-tag { color: #db2d20; }
-.cm-s-3024-night span.cm-link { color: #a16a94; }
-.cm-s-3024-night span.cm-error { background: #db2d20; color: #807d7c; }
-
-.cm-s-3024-night .CodeMirror-activeline-background { background: #2F2F2F; }
-.cm-s-3024-night .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }

package/css/codemirror/abbott.css

@@ -1,268 +0,0 @@
-/*
- * abbott.css
- * A warm, dark theme for prose and code, with pastels and pretty greens.
- *
- * Ported from abbott.vim (https://github.com/bcat/abbott.vim) version 2.1.
- * Original design and CodeMirror port by Jonathan Rascher.
- *
- * This theme shares the following color palette with the Vim color scheme.
- *
- * Brown shades:
- *   bistre: #231c14
- *   chocolate: #3c3022
- *   cocoa: #745d42
- *   vanilla_cream: #fef3b4
- *
- * Red shades:
- *   crimson: #d80450
- *   cinnabar: #f63f05
- *
- * Green shades:
- *   dark_olive: #273900
- *   forest_green: #24a507
- *   chartreuse: #a0ea00
- *   pastel_chartreuse: #d8ff84
- *
- * Yellow shades:
- *   marigold: #fbb32f
- *   lemon_meringue: #fbec5d
- *
- * Blue shades:
- *   cornflower_blue: #3f91f1
- *   periwinkle_blue: #8ccdf0
- *
- * Magenta shades:
- *   french_pink: #ec6c99
- *   lavender: #e6a2f3
- *
- * Cyan shades:
- *   zomp: #39a78d
- *   seafoam_green: #00ff7f
- */
-
-/* Style the UI: */
-
-/* Equivalent to Vim's Normal group. */
-.cm-s-abbott.CodeMirror {
-  background: #231c14 /* bistre */;
-  color: #d8ff84 /* pastel_chartreuse */;
-}
-
-/* Roughly equivalent to Vim's LineNr group. */
-.cm-s-abbott .CodeMirror-gutters {
-  background: #231c14 /* bistre */;
-  border: none;
-}
-.cm-s-abbott .CodeMirror-linenumber { color: #fbec5d /* lemon_meringue */; }
-
-.cm-s-abbott .CodeMirror-guttermarker { color: #f63f05 /* cinnabar */; }
-
-/* Roughly equivalent to Vim's FoldColumn group. */
-.cm-s-abbott .CodeMirror-guttermarker-subtle { color: #fbb32f /* marigold */; }
-
-/*
- * Roughly equivalent to Vim's CursorColumn group. (We use a brighter color
- * since Vim's cursorcolumn option highlights a whole column, whereas
- * CodeMirror's rule just highlights a thin line.)
- */
-.cm-s-abbott .CodeMirror-ruler { border-color: #745d42 /* cocoa */; }
-
-/* Equivalent to Vim's Cursor group in insert mode. */
-.cm-s-abbott .CodeMirror-cursor { border-color: #a0ea00 /* chartreuse */; }
-
-/* Equivalent to Vim's Cursor group in normal mode. */
-.cm-s-abbott.cm-fat-cursor .CodeMirror-cursor,
-.cm-s-abbott .cm-animate-fat-cursor {
-  /*
-   * CodeMirror doesn't allow changing the foreground color of the character
-   * under the cursor, so we can't use a reverse video effect for the cursor.
-   * Instead, make it semitransparent.
-   */
-  background: rgba(160, 234, 0, 0.5) /* chartreuse */;
-}
-.cm-s-abbott.cm-fat-cursor .CodeMirror-cursors {
-  /*
-   * Boost the z-index so the fat cursor shows up on top of text and
-   * matchingbracket/matchingtag highlights.
-   */
-  z-index: 3;
-}
-
-/* Equivalent to Vim's Cursor group in replace mode. */
-.cm-s-abbott .CodeMirror-overwrite .CodeMirror-cursor {
-  border-bottom: 1px solid #a0ea00 /* chartreuse */;
-  border-left: none;
-  width: auto;
-}
-
-/* Roughly equivalent to Vim's CursorIM group. */
-.cm-s-abbott .CodeMirror-secondarycursor {
-  border-color: #00ff7f /* seafoam_green */;
-}
-
-/* Roughly equivalent to Vim's Visual group. */
-.cm-s-abbott .CodeMirror-selected,
-.cm-s-abbott.CodeMirror-focused .CodeMirror-selected {
-  background: #273900 /* dark_olive */;
-}
-.cm-s-abbott .CodeMirror-line::selection,
-.cm-s-abbott .CodeMirror-line > span::selection,
-.cm-s-abbott .CodeMirror-line > span > span::selection {
-  background: #273900 /* dark_olive */;
-}
-.cm-s-abbott .CodeMirror-line::-moz-selection,
-.cm-s-abbott .CodeMirror-line > span::-moz-selection,
-.cm-s-abbott .CodeMirror-line > span > span::-moz-selection {
-  background: #273900 /* dark_olive */;
-}
-
-/* Roughly equivalent to Vim's SpecialKey group. */
-.cm-s-abbott .cm-tab { color: #00ff7f /* seafoam_green */; }
-
-/* Equivalent to Vim's Search group. */
-.cm-s-abbott .cm-searching {
-  background: #fef3b4 /* vanilla_cream */ !important;
-  color: #231c14 /* bistre */ !important;
-}
-
-/* Style syntax highlighting modes: */
-
-/* Equivalent to Vim's Comment group. */
-.cm-s-abbott span.cm-comment {
-  color: #fbb32f /* marigold */;
-  font-style: italic;
-}
-
-/* Equivalent to Vim's String group. */
-.cm-s-abbott span.cm-string,
-.cm-s-abbott span.cm-string-2 {
-  color: #e6a2f3 /* lavender */;
-}
-
-/* Equivalent to Vim's Constant group. */
-.cm-s-abbott span.cm-number,
-.cm-s-abbott span.cm-string.cm-url { color: #f63f05 /* cinnabar */; }
-
-/* Roughly equivalent to Vim's SpecialKey group. */
-.cm-s-abbott span.cm-invalidchar { color: #00ff7f /* seafoam_green */; }
-
-/* Equivalent to Vim's Special group. */
-.cm-s-abbott span.cm-atom { color: #fef3b4 /* vanilla_cream */; }
-
-/* Equivalent to Vim's Delimiter group. */
-.cm-s-abbott span.cm-bracket,
-.cm-s-abbott span.cm-punctuation {
-  color: #fef3b4 /* vanilla_cream */;
-}
-
-/* Equivalent Vim's Operator group. */
-.cm-s-abbott span.cm-operator { font-weight: bold; }
-
-/* Roughly equivalent to Vim's Identifier group. */
-.cm-s-abbott span.cm-def,
-.cm-s-abbott span.cm-variable,
-.cm-s-abbott span.cm-variable-2,
-.cm-s-abbott span.cm-variable-3 {
-  color: #8ccdf0 /* periwinkle_blue */;
-}
-
-/* Roughly equivalent to Vim's Function group. */
-.cm-s-abbott span.cm-builtin,
-.cm-s-abbott span.cm-property,
-.cm-s-abbott span.cm-qualifier {
-  color: #3f91f1 /* cornflower_blue */;
-}
-
-/* Equivalent to Vim's Type group. */
-.cm-s-abbott span.cm-type { color: #24a507 /* forest_green */; }
-
-/* Equivalent to Vim's Keyword group. */
-.cm-s-abbott span.cm-keyword {
-  color: #d80450 /* crimson */;
-  font-weight: bold;
-}
-
-/* Equivalent to Vim's PreProc group. */
-.cm-s-abbott span.cm-meta { color: #ec6c99 /* french_pink */; }
-
-/* Equivalent to Vim's htmlTagName group (linked to Statement). */
-.cm-s-abbott span.cm-tag {
-  color: #d80450 /* crimson */;
-  font-weight: bold;
-}
-
-/* Equivalent to Vim's htmlArg group (linked to Type). */
-.cm-s-abbott span.cm-attribute { color: #24a507 /* forest_green */; }
-
-/* Equivalent to Vim's htmlH1, markdownH1, etc. groups (linked to Title). */
-.cm-s-abbott span.cm-header {
-  color: #d80450 /* crimson */;
-  font-weight: bold;
-}
-
-/* Equivalent to Vim's markdownRule group (linked to PreProc). */
-.cm-s-abbott span.cm-hr { color: #ec6c99 /* french_pink */; }
-
-/* Roughly equivalent to Vim's Underlined group. */
-.cm-s-abbott span.cm-link { color: #e6a2f3 /* lavender */; }
-
-/* Equivalent to Vim's diffRemoved group. */
-.cm-s-abbott span.cm-negative {
-  background: #d80450 /* crimson */;
-  color: #231c14 /* bistre */;
-}
-
-/* Equivalent to Vim's diffAdded group. */
-.cm-s-abbott span.cm-positive {
-  background: #a0ea00 /* chartreuse */;
-  color: #231c14 /* bistre */;
-  font-weight: bold;
-}
-
-/* Equivalent to Vim's Error group. */
-.cm-s-abbott span.cm-error {
-  background: #d80450 /* crimson */;
-  color: #231c14 /* bistre */;
-}
-
-/* Style addons: */
-
-/* Equivalent to Vim's MatchParen group. */
-.cm-s-abbott span.CodeMirror-matchingbracket {
-  background: #745d42 /* cocoa */ !important;
-  color: #231c14 /* bistre */ !important;
-  font-weight: bold;
-}
-
-/*
- * Roughly equivalent to Vim's Error group. (Vim doesn't seem to have a direct
- * equivalent in its own matchparen plugin, but many syntax highlighting plugins
- * mark mismatched brackets as Error.)
- */
-.cm-s-abbott span.CodeMirror-nonmatchingbracket {
-  background: #d80450 /* crimson */ !important;
-  color: #231c14 /* bistre */ !important;
-}
-
-.cm-s-abbott .CodeMirror-matchingtag,
-.cm-s-abbott .cm-matchhighlight {
-  outline: 1px solid #39a78d /* zomp */;
-}
-
-/* Equivalent to Vim's CursorLine group. */
-.cm-s-abbott .CodeMirror-activeline-background,
-.cm-s-abbott .CodeMirror-activeline-gutter {
-  background: #3c3022 /* chocolate */;
-}
-
-/* Equivalent to Vim's CursorLineNr group. */
-.cm-s-abbott .CodeMirror-activeline-gutter .CodeMirror-linenumber {
-  color: #d8ff84 /* pastel_chartreuse */;
-  font-weight: bold;
-}
-
-/* Roughly equivalent to Vim's Folded group. */
-.cm-s-abbott .CodeMirror-foldmarker {
-  color: #f63f05 /* cinnabar */;
-  text-shadow: none;
-}