Optimize imports and code

src/app/api.service.spec.ts

-import { TestBed } from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
 
-import { ApiService } from './api.service';
+import {ApiService} from './api.service';
 
 describe('ApiService', () => {
   let service: ApiService;

src/app/app-routing.module.ts

-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { HomeComponent } from './home/home.component';
-import { ArenaComponent } from './arena/arena.component';
-import { UserComponent } from './user/user.component';
-import { IdeComponent } from './ide/ide.component';
-import { LoginComponent } from './login/login.component';
-import { RegisterComponent } from './register/register.component';
-import { AuthGuard } from './auth.guard';
-import { FileComponent } from './file/file.component';
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {HomeComponent} from './home/home.component';
+import {ArenaComponent} from './arena/arena.component';
+import {UserComponent} from './user/user.component';
+import {IdeComponent} from './ide/ide.component';
+import {LoginComponent} from './login/login.component';
+import {RegisterComponent} from './register/register.component';
+import {AuthGuard} from './auth.guard';
+import {FileComponent} from './file/file.component';
 
 const routes: Routes = [
-  { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
-  { path: 'arena/problem/:id', component: ArenaComponent, canActivate: [AuthGuard] },
-  { path: 'arena/file/:id', component: IdeComponent, canActivate: [AuthGuard] },
-  { path: 'arena/file/new', component: IdeComponent, canActivate: [AuthGuard] },
-  { path: 'user', component: UserComponent, canActivate: [AuthGuard] },
-  { path: 'files', component: FileComponent, canActivate: [AuthGuard] },
-  { path: 'login', component: LoginComponent },
-  { path: 'register', component: RegisterComponent },
-  { path: '**', redirectTo: '/home' },
+  {path: 'home', component: HomeComponent, canActivate: [AuthGuard]},
+  {path: 'arena/problem/:id', component: ArenaComponent, canActivate: [AuthGuard]},
+  {path: 'arena/file/:id', component: IdeComponent, canActivate: [AuthGuard]},
+  {path: 'arena/file/new', component: IdeComponent, canActivate: [AuthGuard]},
+  {path: 'user', component: UserComponent, canActivate: [AuthGuard]},
+  {path: 'files', component: FileComponent, canActivate: [AuthGuard]},
+  {path: 'login', component: LoginComponent},
+  {path: 'register', component: RegisterComponent},
+  {path: '**', redirectTo: '/home'},
 ];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {
+}
 
 export var routerComponents = [
   HomeComponent,

src/app/app.component.spec.ts

-import { TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { AppComponent } from './app.component';
+import {TestBed} from '@angular/core/testing';
+import {RouterTestingModule} from '@angular/router/testing';
+import {AppComponent} from './app.component';
 
 describe('AppComponent', () => {
   beforeEach(async () => {

src/app/app.component.ts

-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'app-root',

src/app/app.module.ts

-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
 
-import { AppRoutingModule } from './app-routing.module';
-import { routerComponents } from './app-routing.module';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
-import { AppComponent } from './app.component';
-import { HeaderComponent } from './header/header.component';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { ApiService } from './api.service';
-import { IdeCompileComponent } from './ide-compile/ide-compile.component';
-import { InputComponent } from './input/input.component';
-import { TestcaseStatusComponent } from './testcase-status/testcase-status.component';
-import { SaveFileComponent } from './save-file/save-file.component';
-import { FileComponent } from './file/file.component';
-import { FileService } from './file.service';
+import {AppRoutingModule, routerComponents} from './app-routing.module';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {HttpClientModule} from '@angular/common/http';
+import {AppComponent} from './app.component';
+import {HeaderComponent} from './header/header.component';
+import {ApiService} from './api.service';
+import {IdeCompileComponent} from './ide-compile/ide-compile.component';
+import {InputComponent} from './input/input.component';
+import {TestcaseStatusComponent} from './testcase-status/testcase-status.component';
+import {SaveFileComponent} from './save-file/save-file.component';
+import {FileComponent} from './file/file.component';
+import {FileService} from './file.service';
 
 @NgModule({
   declarations: [
@@ -38,4 +36,5 @@ import { FileService } from './file.service';
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
-export class AppModule { }
+export class AppModule {
+}

src/app/arena/arena.component.html

 <div class="container">
-  <div class="card" id="ps" [innerHTML]="problem.problem_statement">
+  <div [innerHTML]="problem.problem_statement" class="card" id="ps">
   </div>
   <div id="toggle-lang">C++</div>
   <div id="attempt">
@@ -8,5 +8,6 @@
     <button id="submit">Submit Code</button>
   </div>
   <label for="editor"></label>
-  <textarea name="editor" id="editor"></textarea>
+  <textarea id="editor" name="editor"></textarea>
 </div>
+<app-input></app-input>

src/app/arena/arena.component.spec.ts

-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { ArenaComponent } from './arena.component';
+import {ArenaComponent} from './arena.component';
 
 describe('ArenaComponent', () => {
   let component: ArenaComponent;
@@ -8,9 +8,9 @@ describe('ArenaComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ArenaComponent ]
+      declarations: [ArenaComponent]
     })
-    .compileComponents();
+      .compileComponents();
   });
 
   beforeEach(() => {

src/app/arena/arena.component.ts

@@ -2,6 +2,8 @@ import {Component, OnInit} from '@angular/core';
 import {Router} from '@angular/router';
 import {Problem} from '../problem';
 import {ProblemService} from '../problem.service';
+import {File} from '../file';
+import {ApiService} from '../api.service';
 
 declare const CodeMirror: any;
 
@@ -14,8 +16,9 @@ export class ArenaComponent implements OnInit {
 
   id: number;
   problem: Problem;
+  files: File[] = [];
 
-  constructor(public router: Router, private problemService: ProblemService) {
+  constructor(public router: Router, private problemService: ProblemService, private apiService: ApiService) {
   }
 
   ngOnInit(): void {
@@ -34,11 +37,12 @@ export class ArenaComponent implements OnInit {
     Object.assign((document.getElementsByClassName('CodeMirror')[0] as HTMLTextAreaElement).style, {
       borderBottom: '1px solid #ddf',
       padding: '20px',
-      fontFamily: '"Space Mono", monospace',
+      fontFamily: '"Anonymous Pro", monospace',
     });
 
     let activeLang = 0;
     const langs = ['C++', 'Python', 'Java'];
+    const extensions = ['.cpp', '.py', '.java'];
     const langsMime = ['text/x-c++src', 'text/x-python', 'text/x-java'];
 
     const problem = this.problem;
@@ -51,6 +55,18 @@ export class ArenaComponent implements OnInit {
       editor.setOption('mode', langsMime[activeLang]);
     };
 
+    const filename = this.id.toString(10);
+    const username = JSON.parse(this.apiService.getToken()).username;
+    for (const ext of extensions) {
+      this.files.push({
+        id: null,
+        username,
+        filename,
+        language: ext,
+        text: ''
+      });
+    }
+
   }
 
   getProblem(): void {

src/app/auth.guard.ts

-import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, CanActivate, Router } from '@angular/router';
-import { ApiService } from './api.service';
+import {Injectable} from '@angular/core';
+import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';
+import {ApiService} from './api.service';
 
 @Injectable({
-    providedIn: 'root'
+  providedIn: 'root'
 })
 
 export class AuthGuard implements CanActivate {
-    constructor(private dataService: ApiService, private router: Router) { }
-    canActivate(
-        route: ActivatedRouteSnapshot,
-        state: RouterStateSnapshot
-    ): boolean {
-        const routeUrl: string = state.url;
-        return this.isLogin(routeUrl);
-    }
+  constructor(private dataService: ApiService, private router: Router) {
+  }
+
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): boolean {
+    const routeUrl: string = state.url;
+    return this.isLogin(routeUrl);
+  }
 
-    isLogin(routeUrl: string) {
-        if (this.dataService.isLoggedIn()) {
-            return true;
-        }
-        this.dataService.redirectUrl = routeUrl;
-        this.router.navigate(['/login'], { queryParams: { returnUrl: routeUrl } });
+  isLogin(routeUrl: string) {
+    if (this.dataService.isLoggedIn()) {
+      return true;
     }
-}
+    this.dataService.redirectUrl = routeUrl;
\ No newline at end of file
+    this.router.navigate(['/login'], {queryParams: {returnUrl: routeUrl}});
+  }
+}

src/app/file.service.spec.ts

-import { TestBed } from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
 
-import { FileService } from './file.service';
+import {FileService} from './file.service';
 
 describe('FileService', () => {
   let service: FileService;

src/app/file.service.ts

-import { Injectable } from '@angular/core';
-import { File } from './file';
-import { Observable, of } from 'rxjs';
-import { HttpClient } from '@angular/common/http';
+import {Injectable} from '@angular/core';
+import {File} from './file';
+import {Observable, of} from 'rxjs';
+import {HttpClient} from '@angular/common/http';
 
 
 @Injectable({
@@ -11,7 +11,8 @@ export class FileService {
 
   baseApiUrl = 'https://file.io';
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) {
+  }
 
   getFiles(): Observable<File[]> {
 

src/app/file.ts

 export interface File {
-    id: number;
-    username: string;
-    filename: string;
-    language: string;
-    text: string;
+  id: number;
+  username: string;
+  filename: string;
+  language: string;
+  text: string;
 }

src/app/file/file.component.html

@@ -52,13 +52,13 @@
 
 <div [class.open]="uploadPopupActive" id="file-upload-popup">
   <p>Upload a file:</p>
-  <input id="file-upload-input" type="file" (change)="onChange($event)">
-  <div style="margin-top: 10px" *ngIf="shortLink !== ''">
-    <a target="_blank" href="{{shortLink}}">Link to last upload</a>
+  <input (change)="onChange($event)" id="file-upload-input" type="file">
+  <div *ngIf="shortLink !== ''" style="margin-top: 10px">
+    <a href="{{shortLink}}" target="_blank">Link to last upload</a>
   </div>
   <p *ngIf="!loading">
-    <button id="upload-cancel-btn" (click)="uploadPopupActive = false;">Close</button>
-    <button id="file-upload-btn" (click)="onUpload()">Upload</button>
+    <button (click)="uploadPopupActive = false;" id="upload-cancel-btn">Close</button>
+    <button (click)="onUpload()" id="file-upload-btn">Upload</button>
   </p>
   <p *ngIf="loading" style="margin-top: 20px; text-align: center">
     Uploading...

src/app/file/file.component.scss

@@ -22,7 +22,7 @@
 
   button {
     float: right;
-    border:none;
+    border: none;
   }
 
   .title {

src/app/file/file.component.spec.ts

-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { FileComponent } from './file.component';
+import {FileComponent} from './file.component';
 
 describe('FileComponent', () => {
   let component: FileComponent;
@@ -8,9 +8,9 @@ describe('FileComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ FileComponent ]
+      declarations: [FileComponent]
     })
-    .compileComponents();
+      .compileComponents();
   });
 
   beforeEach(() => {

src/app/header/header.component.spec.ts

-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { HeaderComponent } from './header.component';
+import {HeaderComponent} from './header.component';
 
 describe('HeaderComponent', () => {
   let component: HeaderComponent;
@@ -8,9 +8,9 @@ describe('HeaderComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ HeaderComponent ]
+      declarations: [HeaderComponent]
     })
-    .compileComponents();
+      .compileComponents();
   });
 
   beforeEach(() => {

src/app/header/header.component.ts

-import { Component, OnInit } from '@angular/core';
-import { ApiService } from '../api.service';
+import {Component, OnInit} from '@angular/core';
+import {ApiService} from '../api.service';
 
 @Component({
   selector: 'app-header',

src/app/home/home.component.spec.ts

-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { HomeComponent } from './home.component';
+import {HomeComponent} from './home.component';
 
 describe('HomeComponent', () => {
   let component: HomeComponent;
@@ -8,9 +8,9 @@ describe('HomeComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ HomeComponent ]
+      declarations: [HomeComponent]
     })
-    .compileComponents();
+      .compileComponents();
   });
 
   beforeEach(() => {

src/app/home/home.component.ts

-import { Component, OnInit } from '@angular/core';
-import { ProblemService } from '../problem.service';
-import { Problem } from '../problem';
+import {Component, OnInit} from '@angular/core';
+import {ProblemService} from '../problem.service';
+import {Problem} from '../problem';
 
 @Component({
   selector: 'app-home',
@@ -9,9 +9,11 @@ import { Problem } from '../problem';
 })
 export class HomeComponent implements OnInit {
 
-  constructor(private problemService: ProblemService) { }
   problems: Problem[];
 
+  constructor(private problemService: ProblemService) {
+  }
+
   ngOnInit(): void {
     this.getProblems();
   }

src/app/ide-compile/ide-compile.component.html

-<div id="compile-cover" [class.open]="isActive"></div>
+<div [class.open]="isActive" id="compile-cover"></div>
 
-<div id="compile-popup" [class.open]="isActive">
-  <p id="compile-status" [innerHTML]="statusVal"></p>
-  <button id="compile-done" [class.disabled]="resultVal === 0" (click)="resultVal !== 0 && setState(false)">Done</button>
+<div [class.open]="isActive" id="compile-popup">
+  <p [innerHTML]="statusVal" id="compile-status"></p>
+  <button (click)="resultVal !== 0 && setState(false)" [class.disabled]="resultVal === 0" id="compile-done">Done
+  </button>
 </div>

src/app/ide-compile/ide-compile.component.spec.ts

-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { IdeCompileComponent } from './ide-compile.component';
+import {IdeCompileComponent} from './ide-compile.component';
 
 describe('IdeCompileComponent', () => {
   let component: IdeCompileComponent;
@@ -8,9 +8,9 @@ describe('IdeCompileComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ IdeCompileComponent ]
+      declarations: [IdeCompileComponent]
     })
-    .compileComponents();
+      .compileComponents();
   });
 
   beforeEach(() => {

src/app/ide-compile/ide-compile.component.ts

-import { Component, OnInit, Input } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 
 @Component({
   selector: 'app-ide-compile',
@@ -9,15 +9,18 @@ export class IdeCompileComponent implements OnInit {
   @Input() statusVal: string;
   @Input() resultVal: number;
   isActive = false;
-  constructor() { }
 
-  ngOnInit(): void { }
-
-  setState(inp: boolean): void {
-    this.isActive = inp;
+  constructor() {
   }
 
   set status(value: string) {
     this.statusVal = value;
   }
+
+  ngOnInit(): void {
+  }
+
+  setState(inp: boolean): void {
+    this.isActive = inp;
+  }
 }

src/app/ide/ide.component.html

@@ -3,13 +3,15 @@
   <div id="attempt">
     <span *ngIf="!isUpToDate">• </span>
     <span id="ideFileName">{{file.filename + file.language}}</span>
-    <button id="inputBtn" (click)="inputField.setState(true);">Input</button>
-    <button id="runBtn" (click)="this.runField.isActive = true; this.runCodeService.run()">Run Code</button>
-    <button id="saveBtn" (click)="!isSaved ? this.saveField.setState(true) : updateFile();" [class.disabled]="isUploading || isUpToDate">{{isUploading ? "Saving File..." : "Save File"}}</button>
+    <button (click)="inputField.setState(true);" id="inputBtn">Input</button>
+    <button (click)="this.runField.isActive = true; this.runCodeService.run()" id="runBtn">Run Code</button>
+    <button (click)="!isSaved ? this.saveField.setState(true) : updateFile();"
+            [class.disabled]="isUploading || isUpToDate"
+            id="saveBtn">{{isUploading ? "Saving File..." : "Save File"}}</button>
   </div>
   <label for="editor"></label>
-  <textarea name="editor" id="editor" value="{{inp}}"></textarea>
+  <textarea id="editor" name="editor" value="{{inp}}"></textarea>
 </div>
 <app-input (valueEmit)="updateInput($event)"></app-input>
-<app-ide-compile [statusVal]="runCodeService.status" [resultVal]="runCodeService.result"></app-ide-compile>
-<app-save-file [file]="file" (savedFile)="isSaved = isUpToDate = true;"></app-save-file>
+<app-ide-compile [resultVal]="runCodeService.result" [statusVal]="runCodeService.status"></app-ide-compile>
+<app-save-file (savedFile)="isSaved = isUpToDate = true;" [file]="file"></app-save-file>

src/app/ide/ide.component.spec.ts

-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { IdeComponent } from './ide.component';
+import {IdeComponent} from './ide.component';
 
 describe('IdeComponent', () => {
   let component: IdeComponent;
@@ -8,9 +8,9 @@ describe('IdeComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ IdeComponent ]
+      declarations: [IdeComponent]
     })
-    .compileComponents();
+      .compileComponents();
   });
 
   beforeEach(() => {

src/app/ide/ide.component.ts

@@ -50,7 +50,7 @@ export class IdeComponent implements OnInit {
     Object.assign((document.getElementsByClassName('CodeMirror')[0] as HTMLTextAreaElement).style, {
       borderBottom: '1px solid #ddf',
       padding: '20px',
-      fontFamily: '"Space Mono", monospace',
+      fontFamily: '"Anonymous Pro", monospace',
     });
 
     let activeLang = 0;

src/app/input/input.component.html

-<div id="input-cover" [class.open]="isActive"></div>
+<div [class.open]="isActive" id="input-cover"></div>
 
-<div id="input" [class.open]="isActive">
+<div [class.open]="isActive" id="input">
   <label for="inp" id="title">Enter the input:</label>
   <br>
-  <textarea name="inp" id="inp" cols="30" rows="10" spellcheck="false"></textarea>
+  <textarea cols="30" id="inp" name="inp" rows="10" spellcheck="false"></textarea>
   <br>
-  <button id="done" (click)="this.setState(false);">Done</button>
+  <button (click)="this.setState(false);" id="done">Done</button>
 </div>

src/app/input/input.component.scss

@@ -24,7 +24,7 @@
   font-size: 1.1em;
   background: transparent;
   border: none;
-  font-family: 'Space Mono', monospace;
+  font-family: 'Anonymous Pro', monospace;
   resize: none;
 }
 

src/app/input/input.component.spec.ts

-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { InputComponent } from './input.component';
+import {InputComponent} from './input.component';
 
 describe('InputComponent', () => {
   let component: InputComponent;
@@ -8,9 +8,9 @@ describe('InputComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ InputComponent ]
+      declarations: [InputComponent]
     })
-    .compileComponents();
+      .compileComponents();
   });
 
   beforeEach(() => {

src/app/input/input.component.ts

-import { Component, OnInit, EventEmitter, Output } from '@angular/core';
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
 
 @Component({
   selector: 'app-input',
@@ -9,9 +9,12 @@ export class InputComponent implements OnInit {
   isActive = false;
   value: string;
   @Output() valueEmit = new EventEmitter<string>();
-  constructor() { }
 
-  ngOnInit(): void { }
+  constructor() {
+  }
+
+  ngOnInit(): void {
+  }
 
   setState(value: boolean): void {
     const text = document.getElementById('inp') as HTMLTextAreaElement;

src/app/login/login.component.html

-<form id="login_form" action="" [formGroup]="form" novalidate (ngSubmit)="postData(form)">
+<form (ngSubmit)="postData(form)" [formGroup]="form" action="" id="login_form" novalidate>
 
   <div class="form-row">
     <label for="username">Username</label>
-    <input id="username" type="text" formControlName="username" spellcheck="false">
+    <input formControlName="username" id="username" spellcheck="false" type="text">
   </div>
   <div class="form-row">
     <label for="password">Password</label>
-    <input id="password" type="password" formControlName="password" spellcheck="false">
+    <input formControlName="password" id="password" spellcheck="false" type="password">
   </div>
 
   <div class="form-row">
-    <input id="submit" value="Submit" type="submit">
+    <input id="submit" type="submit" value="Submit">
   </div>
 </form>
 
@@ -29,4 +29,4 @@
       information.
     </p>
   </div>
-</div>
+</div>
\ No newline at end of file

src/app/login/login.component.spec.ts

-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { LoginComponent } from './login.component';
+import {LoginComponent} from './login.component';
 
 describe('LoginComponent', () => {
   let component: LoginComponent;
@@ -8,9 +8,9 @@ describe('LoginComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ LoginComponent ]
+      declarations: [LoginComponent]
     })
-    .compileComponents();
+      .compileComponents();
   });
 
   beforeEach(() => {

src/app/problem.service.spec.ts

-import { TestBed } from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
 
-import { ProblemService } from './problem.service';
+import {ProblemService} from './problem.service';
 
 describe('ProblemService', () => {
   let service: ProblemService;

src/app/problem.service.ts

-import { Injectable } from '@angular/core';
-import { Problem } from './problem';
-import { Observable, of } from 'rxjs';
+import {Injectable} from '@angular/core';
+import {Problem} from './problem';
+import {Observable, of} from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
 })
 export class ProblemService {
 
-  constructor() { }
+  constructor() {
+  }
 
   getProblems(): Observable<Problem[]> {
 

src/app/register/register.component.html

-<form id="login_form" action="" [formGroup]="form" (ngSubmit)="postData(form)">
+<form (ngSubmit)="postData(form)" [formGroup]="form" action="" id="login_form">
 
   <div class="form-row">
     <label for="name">Name</label>
-    <input id="name" type="text" formControlName="name" spellcheck="false">
+    <input formControlName="name" id="name" spellcheck="false" type="text">
   </div>
   <div class="form-row">
     <label for="username">Username</label>
-    <input id="username" type="text" formControlName="username" spellcheck="false">
+    <input formControlName="username" id="username" spellcheck="false" type="text">
   </div>
   <div class="form-row">
     <label for="email">Email</label>
-    <input id="email" type="text" formControlName="email" spellcheck="false">
+    <input formControlName="email" id="email" spellcheck="false" type="text">
   </div>
   <div class="form-row">
     <label for="password">Password</label>
-    <input id="password" type="password" formControlName="password" spellcheck="false">
+    <input formControlName="password" id="password" spellcheck="false" type="password">
   </div>
   <div class="form-row">
     <label for="confirm_password">Confirm Password</label>
-    <input id="confirm_password" type="password" formControlName="confirm_password" spellcheck="false">
+    <input formControlName="confirm_password" id="confirm_password" spellcheck="false" type="password">
   </div>
 
   <div class="form-row">
-    <input id="submit" value="Submit" type="submit">
+    <input id="submit" type="submit" value="Submit">
   </div>
 </form>
 

src/app/register/register.component.spec.ts

-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { RegisterComponent } from './register.component';
+import {RegisterComponent} from './register.component';
 
 describe('RegisterComponent', () => {
   let component: RegisterComponent;
@@ -8,9 +8,9 @@ describe('RegisterComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ RegisterComponent ]
+      declarations: [RegisterComponent]
     })
-    .compileComponents();
+      .compileComponents();
   });
 
   beforeEach(() => {

src/app/register/register.component.ts

-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {AbstractControl, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
-import { first } from 'rxjs/operators';
-import { ApiService } from '../api.service';
+import {first} from 'rxjs/operators';
+import {ApiService} from '../api.service';
 
 @Component({
   selector: 'app-register',
@@ -11,6 +11,8 @@ import { ApiService } from '../api.service';
 export class RegisterComponent implements OnInit {
   form: FormGroup;
   timeout: any;
+  set: NodeListOf<HTMLInputElement>;
+  submitElement: HTMLInputElement;
 
   constructor(private fb: FormBuilder, private dataService: ApiService) {
     this.form = this.fb.group({
@@ -22,8 +24,21 @@ export class RegisterComponent implements OnInit {
     });
   }
 
-  set: NodeListOf<HTMLInputElement>;
-  submitElement: HTMLInputElement;
+  get email(): AbstractControl {
+    return this.form.get('email');
+  }
+
+  get password(): AbstractControl {
+    return this.form.get('password');
+  }
+
+  get name(): AbstractControl {
+    return this.form.get('name');
+  }
+
+  get username(): AbstractControl {
+    return this.form.get('name');
+  }
 
   ngOnInit(): void {
     this.submitElement = document.getElementById('submit') as HTMLInputElement;
@@ -44,8 +59,7 @@ export class RegisterComponent implements OnInit {
     this.set.forEach(item => {
       if (item.value !== '' && item.value !== null) {
         item.parentElement.querySelector('label').classList.add('active');
-      }
-      else {
+      } else {
         item.parentElement.querySelector('label').classList.remove('active');
       }
     });
@@ -53,7 +67,9 @@ export class RegisterComponent implements OnInit {
 
   postData(frm: any): void {
 
-    if (this.submitElement.classList.contains('disabled')) { return; }
+    if (this.submitElement.classList.contains('disabled')) {
+      return;
+    }
     this.submitElement.classList.add('disabled');
 
     if (this.form.get('name').invalid) {
@@ -148,10 +164,5 @@ export class RegisterComponent implements OnInit {
 
   }
 
-  get email(): AbstractControl { return this.form.get('email'); }
-  get password(): AbstractControl { return this.form.get('password'); }
-  get name(): AbstractControl { return this.form.get('name'); }
-  get username(): AbstractControl { return this.form.get('name'); }
-
 
 }

src/app/run-code.service.spec.ts

-import { TestBed } from '@angular/core/testing';
+import {TestBed} from '@angular/core/testing';
 
-import { RunCodeService } from './run-code.service';
+import {RunCodeService} from './run-code.service';
 
 describe('RunCodeService', () => {
   let service: RunCodeService;

src/app/run-code.service.ts

-import { Injectable } from '@angular/core';
-import { Observable, of } from 'rxjs';
+import {Injectable} from '@angular/core';
 
 @Injectable({
   providedIn: 'root'
@@ -9,6 +8,9 @@ export class RunCodeService {
   status = 'Compiling...';
   result = 0;
 
+  constructor() {
+  }
+
   run(): void {
     const output = `25
 abcd
@@ -30,6 +32,4 @@ abcd
       this.result = 1;
     }, 6000);
   }
-
-  constructor() { }
 }

src/app/save-file/save-file.component.html

-<div id="save-cover" [class.open]="isActive"></div>
+<div [class.open]="isActive" id="save-cover"></div>
 
-<div id="save-popup" [class.open]="isActive">
+<div [class.open]="isActive" id="save-popup">
   <div *ngIf="!isUploading">
     <label for="filenameInput" id="filenameInputLabel">Enter Filename:</label><br>
-    <input id="filenameInput" type="text" name="filenameInput" [(ngModel)]="file.filename">
+    <input [(ngModel)]="file.filename" id="filenameInput" name="filenameInput" type="text">
     <span>{{file.language}}</span>
     <br>
-    <button id="save-cancel" (click)="isActive = false">Cancel</button>
-    <button id="save-done" [class.disabled]="file.filename === ''" (click)="file.filename !== '' && submitFile()">Done</button>
+    <button (click)="isActive = false" id="save-cancel">Cancel</button>
+    <button (click)="file.filename !== '' && submitFile()" [class.disabled]="file.filename === ''" id="save-done">Done
+    </button>
   </div>
   <div *ngIf="isUploading">Uploading...</div>
 </div>

src/app/save-file/save-file.component.spec.ts

-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { SaveFileComponent } from './save-file.component';
+import {SaveFileComponent} from './save-file.component';
 
 describe('SaveFileComponent', () => {
   let component: SaveFileComponent;
@@ -8,9 +8,9 @@ describe('SaveFileComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ SaveFileComponent ]
+      declarations: [SaveFileComponent]
     })
-    .compileComponents();
+      .compileComponents();
   });
 
   beforeEach(() => {

src/app/save-file/save-file.component.ts

-import {Component, OnInit, Output, EventEmitter, Input} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {FileService} from '../file.service';
 import {File} from '../file';
 import {Location} from '@angular/common';

src/app/testcase-status/testcase-status.component.spec.ts

-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { TestcaseStatusComponent } from './testcase-status.component';
+import {TestcaseStatusComponent} from './testcase-status.component';
 
 describe('TestcaseStatusComponent', () => {
   let component: TestcaseStatusComponent;
@@ -8,9 +8,9 @@ describe('TestcaseStatusComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ TestcaseStatusComponent ]
+      declarations: [TestcaseStatusComponent]
     })
-    .compileComponents();
+      .compileComponents();
   });
 
   beforeEach(() => {

src/app/testcase-status/testcase-status.component.ts

-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 
 @Component({
   selector: 'app-testcase-status',
@@ -7,7 +7,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class TestcaseStatusComponent implements OnInit {
 
-  constructor() { }
+  constructor() {
+  }
 
   ngOnInit(): void {
   }

src/app/user/user.component.html

 <div class="container">
   <div class="card" id="user_cred">
     <div id="grid1">
-      <img id="profile-icon" src="{{user.img_url}}" alt="Profile Icon">
+      <img alt="Profile Icon" id="profile-icon" src="{{user.img_url}}">
       <div class="name-and-id">
         <div class="tc">
           <div>{{user.name}}</div>
@@ -9,8 +9,12 @@
           <div class="inline-code">{{user.username}}</div>
           <div class="inline-code"><i class="lnr lnr-star"></i> {{user.rating}}</div>
           <div>
-            <a href="" id="edit"><button>Edit Details</button></a>
-            <a href="" id=" Logout" (click)="logout()"><button>Logout</button></a>
+            <a href="" id="edit">
+              <button>Edit Details</button>
+            </a>
+            <a (click)="logout()" href="" id=" Logout">
+              <button>Logout</button>
+            </a>
           </div>
         </div>
       </div>
@@ -31,7 +35,7 @@
       </tr>
     </table>
     <div id="canvas">
-      <canvas id="myChart" width="100px" height="100px"></canvas>
+      <canvas height="100px" id="myChart" width="100px"></canvas>
     </div>
   </div>
 </div>

src/app/user/user.component.scss

@@ -31,7 +31,7 @@
       height: 106px;
       vertical-align: middle;
 
-      &>div {
+      & > div {
         margin: 4px;
 
         .lnr {
@@ -39,7 +39,7 @@
           color: #ffa;
           border-radius: 100%;
           box-shadow: 0 0 5px 5px #ff84 inset,
-            0 0 5px 5px #ff84;
+          0 0 5px 5px #ff84;
         }
       }
     }

src/app/user/user.component.spec.ts

-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { UserComponent } from './user.component';
+import {UserComponent} from './user.component';
 
 describe('UserComponent', () => {
   let component: UserComponent;
@@ -8,9 +8,9 @@ describe('UserComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ UserComponent ]
+      declarations: [UserComponent]
     })
-    .compileComponents();
+      .compileComponents();
   });
 
   beforeEach(() => {

src/assets/codemirror/codemirror-5.58.2/bin/release

@@ -7,32 +7,41 @@ var number, bumpOnly;
 for (var i = 2; i < process.argv.length; i++) {
   if (process.argv[i] == "-bump") bumpOnly = true;
   else if (/^\d+\.\d+\.\d+$/.test(process.argv[i])) number = process.argv[i];
-  else { console.log("Bogus command line arg: " + process.argv[i]); process.exit(1); }
+  else {
+    console.log("Bogus command line arg: " + process.argv[i]);
+    process.exit(1);
+  }
 }
 
-if (!number) { console.log("Must give a version"); process.exit(1); }
+if (!number) {
+  console.log("Must give a version");
+  process.exit(1);
+}
 
 function rewrite(file, f) {
   fs.writeFileSync(file, f(fs.readFileSync(file, "utf8")), "utf8");
 }
 
-rewrite("src/edit/main.js", function(lib) {
+rewrite("src/edit/main.js", function (lib) {
   return lib.replace(/CodeMirror\.version = "\d+\.\d+\.\d+"/,
-                     "CodeMirror.version = \"" + number + "\"");
+    "CodeMirror.version = \"" + number + "\"");
 });
+
 function rewriteJSON(pack) {
   return pack.replace(/"version":\s*"\d+\.\d+\.\d+"/, "\"version\": \"" + number + "\"");
 }
+
 rewrite("package.json", rewriteJSON);
-rewrite("doc/manual.html", function(manual) {
+rewrite("doc/manual.html", function (manual) {
   return manual.replace(/>version \d+\.\d+\.\d+<\/span>/, ">version " + number + "</span>");
 });
 
 if (bumpOnly) process.exit(0);
 
-child.exec("bash bin/authors.sh", function(){});
+child.exec("bash bin/authors.sh", function () {
+});
 
-rewrite("index.html", function(index) {
+rewrite("index.html", function (index) {
   return index.replace(/\.zip">\d+\.\d+\.\d+<\/a>/,
-                       ".zip\">" + number + "</a>");
+    ".zip\">" + number + "</a>");
 });

src/assets/codemirror/codemirror-5.58.2/bin/source-highlight

@@ -13,8 +13,8 @@ require("../mode/meta.js");
 
 var sPos = process.argv.indexOf("-s");
 if (sPos == -1 || sPos == process.argv.length - 1) {
-   console.error("Usage: source-highlight -s language");
-   process.exit(1);
+  console.error("Usage: source-highlight -s language");
+  process.exit(1);
 }
 var lang = process.argv[sPos + 1].toLowerCase(), modeName = lang;
 var found = CodeMirror.findModeByMIME(lang) || CodeMirror.findModeByName(lang)
@@ -27,20 +27,24 @@ if (!CodeMirror.modes[modeName])
   require("../mode/" + modeName + "/" + modeName + ".js");
 
 function esc(str) {
-  return str.replace(/[<&]/g, function(ch) { return ch == "&" ? "&amp;" : "&lt;"; });
+  return str.replace(/[<&]/g, function (ch) {
+    return ch == "&" ? "&amp;" : "&lt;";
+  });
 }
 
 var code = fs.readFileSync("/dev/stdin", "utf8");
 var curStyle = null, accum = "";
+
 function flush() {
   if (curStyle) process.stdout.write("<span class=\"" + curStyle.replace(/(^|\s+)/g, "$1cm-") + "\">" + esc(accum) + "</span>");
   else process.stdout.write(esc(accum));
 }
 
-CodeMirror.runMode(code, lang, function(text, style) {
+CodeMirror.runMode(code, lang, function (text, style) {
   if (style != curStyle) {
     flush();
-    curStyle = style; accum = text;
+    curStyle = style;
+    accum = text;
   } else {
     accum += text;
   }

src/assets/codemirror/codemirror-5.58.2/demo/activeline.html

@@ -2,15 +2,18 @@
 
 <title>CodeMirror: Active Line Demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../mode/xml/xml.js"></script>
 <script src="../addon/selection/active-line.js"></script>
 <style>
-      .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
-    </style>
+  .CodeMirror {
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+  }
+</style>
 <div id=nav>
   <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
 
@@ -25,17 +28,16 @@
 </div>
 
 <article>
-<h2>Active Line Demo</h2>
-<form><textarea id="code" name="code">
+  <h2>Active Line Demo</h2>
+  <form><textarea id="code" name="code">
 <?xml version="1.0" encoding="UTF-8"?>
-<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"
-     xmlns:georss="http://www.georss.org/georss"
-     xmlns:twitter="http://api.twitter.com">
+    <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"
+         xmlns:twitter="http://api.twitter.com">
   <channel>
     <title>Twitter / codemirror</title>
     <link>http://twitter.com/codemirror</link>
-    <atom:link type="application/rss+xml"
-               href="http://twitter.com/statuses/user_timeline/242283288.rss" rel="self"/>
+    <atom:link href="http://twitter.com/statuses/user_timeline/242283288.rss"
+               rel="self" type="application/rss+xml"/>
     <description>Twitter updates from CodeMirror / codemirror.</description>
     <language>en-us</language>
     <ttl>40</ttl>
@@ -64,25 +66,25 @@
   </channel>
 </rss></textarea></form>
 
-    <script>
-var nonEmpty = false;
-var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
-  mode: "application/xml",
-  styleActiveLine: true,
-  lineNumbers: true,
-  lineWrapping: true
-});
+  <script>
+    var nonEmpty = false;
+    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+      mode: "application/xml",
+      styleActiveLine: true,
+      lineNumbers: true,
+      lineWrapping: true
+    });
 
-function toggleSelProp() {
-  nonEmpty = !nonEmpty;
-  editor.setOption("styleActiveLine", {nonEmpty: nonEmpty});
-  var label = nonEmpty ? 'Disable nonEmpty option' : 'Enable nonEmpty option';
-  document.getElementById('toggleButton').innerText = label;
-}
-</script>
+    function toggleSelProp() {
+      nonEmpty = !nonEmpty;
+      editor.setOption("styleActiveLine", {nonEmpty: nonEmpty});
+      var label = nonEmpty ? 'Disable nonEmpty option' : 'Enable nonEmpty option';
+      document.getElementById('toggleButton').innerText = label;
+    }
+  </script>
 
-    <p>Styling the current cursor line.</p>
+  <p>Styling the current cursor line.</p>
 
-    <button onclick="toggleSelProp()" id="toggleButton">Enable <code>nonEmpty</code> option</button>
+  <button id="toggleButton" onclick="toggleSelProp()">Enable <code>nonEmpty</code> option</button>
 
-  </article>
+</article>

src/assets/codemirror/codemirror-5.58.2/demo/anywordhint.html

@@ -2,10 +2,10 @@
 
 <title>CodeMirror: Any Word Completion Demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
-<link rel="stylesheet" href="../addon/hint/show-hint.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
+<link href="../addon/hint/show-hint.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../addon/hint/show-hint.js"></script>
 <script src="../addon/hint/anyword-hint.js"></script>
@@ -24,14 +24,14 @@
 </div>
 
 <article>
-<h2>Any Word Completion Demo</h2>
-<form><textarea id="code" name="code">
+  <h2>Any Word Completion Demo</h2>
+  <form><textarea id="code" name="code">
 (function() {
-  "use strict";
+    "use strict";
 
-  var WORD = /[\w$]+/g, RANGE = 500;
+    var WORD = /[\w$]+/g, RANGE = 500;
 
-  CodeMirror.registerHelper("hint", "anyword", function(editor, options) {
+    CodeMirror.registerHelper("hint", "anyword", function(editor, options) {
     var word = options && options.word || WORD;
     var range = options && options.range || RANGE;
     var cur = editor.getCursor(), curLine = editor.getLine(cur.line);
@@ -42,12 +42,12 @@
 
     var list = [], seen = {};
     function scan(dir) {
-      var line = cur.line, end = Math.min(Math.max(line + dir * range, editor.firstLine()), editor.lastLine()) + dir;
-      for (; line != end; line += dir) {
+    var line = cur.line, end = Math.min(Math.max(line + dir * range, editor.firstLine()), editor.lastLine()) + dir;
+    for (; line != end; line += dir) {
         var text = editor.getLine(line), m;
         word.lastIndex = 0;
         while (m = word.exec(text)) {
-          if ((!curWord || m[0].indexOf(curWord) == 0) && !seen.hasOwnProperty(m[0])) {
+    if ((!curWord || m[0].indexOf(curWord) == 0) && !seen.hasOwnProperty(m[0])) {
             seen[m[0]] = true;
             list.push(m[0]);
           }
@@ -61,19 +61,19 @@
 })();
 </textarea></form>
 
-<p>Press <strong>ctrl-space</strong> to activate autocompletion. The
-completion uses
-the <a href="../doc/manual.html#addon_anyword-hint">anyword-hint.js</a>
-module, which simply looks at nearby words in the buffer and completes
-to those.</p>
+  <p>Press <strong>ctrl-space</strong> to activate autocompletion. The
+    completion uses
+    the <a href="../doc/manual.html#addon_anyword-hint">anyword-hint.js</a>
+    module, which simply looks at nearby words in the buffer and completes
+    to those.</p>
 
-    <script>
-      CodeMirror.commands.autocomplete = function(cm) {
-        cm.showHint({hint: CodeMirror.hint.anyword});
-      }
-      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
-        lineNumbers: true,
-        extraKeys: {"Ctrl-Space": "autocomplete"}
-      });
-    </script>
-  </article>
+  <script>
+    CodeMirror.commands.autocomplete = function (cm) {
+      cm.showHint({hint: CodeMirror.hint.anyword});
+    }
+    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+      lineNumbers: true,
+      extraKeys: {"Ctrl-Space": "autocomplete"}
+    });
+  </script>
+</article>

src/assets/codemirror/codemirror-5.58.2/demo/bidi.html

@@ -2,14 +2,20 @@
 
 <title>CodeMirror: Bi-directional Text Demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../mode/xml/xml.js"></script>
 <style>
-  .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
-  fieldset {border: none}
+  .CodeMirror {
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+  }
+
+  fieldset {
+    border: none
+  }
 </style>
 <div id=nav>
   <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
@@ -25,9 +31,9 @@
 </div>
 
 <article>
-<h2>Bi-directional Text Demo</h2>
-<form><textarea id="code" name="code"><!-- Piece of the CodeMirror manual, 'translated' into Arabic by Google Translate -->
-<!-- قطعة من دليل CodeMirror، "ترجم" إلى العربية بواسطة جوجل ترجمة -->
+  <h2>Bi-directional Text Demo</h2>
+  <form><textarea id="code" name="code"><!-- Piece of the CodeMirror manual, 'translated' into Arabic by Google Translate -->
+    <!-- قطعة من دليل CodeMirror، "ترجم" إلى العربية بواسطة جوجل ترجمة -->
 
 <dl>
   <dt id=option_value><code>value (string or Doc)</code></dt>
@@ -55,52 +61,57 @@
   الطبقات إلى المحرر.</dd>
 </dl>
 </textarea>
-  <fieldset>
-    Editor default direction:
-    <input type="radio" id="ltr" name="direction"/><label for="ltr">LTR</label>
-    <input type="radio" id="rtl" name="direction"/><label for="rtl">RTL</label>
-  </fieldset>
-  <fieldset>
-    HTML document direction:
-    <input type="radio" id="htmlltr" name="htmldirection"/><label for="htmlltr">LTR</label>
-    <input type="radio" id="htmlrtl" name="htmldirection"/><label for="htmlrtl">RTL</label>
-  </fieldset>
-  <fieldset>
-    <input type="checkbox" id="rtlMoveVisually"/><label for="rtlMoveVisually">Use visual order for arrow key movement.</label>
-  </fieldset>
-</form>
+    <fieldset>
+      Editor default direction:
+      <input id="ltr" name="direction" type="radio"/><label for="ltr">LTR</label>
+      <input id="rtl" name="direction" type="radio"/><label for="rtl">RTL</label>
+    </fieldset>
+    <fieldset>
+      HTML document direction:
+      <input id="htmlltr" name="htmldirection" type="radio"/><label for="htmlltr">LTR</label>
+      <input id="htmlrtl" name="htmldirection" type="radio"/><label for="htmlrtl">RTL</label>
+    </fieldset>
+    <fieldset>
+      <input id="rtlMoveVisually" type="checkbox"/><label for="rtlMoveVisually">Use visual order for arrow key
+      movement.</label>
+    </fieldset>
+  </form>
 
-    <script>
-var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
-  mode: "text/html",
-  lineNumbers: true,
-  lineWrapping: true,
-  direction: "rtl"
-});
+  <script>
+    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+      mode: "text/html",
+      lineNumbers: true,
+      lineWrapping: true,
+      direction: "rtl"
+    });
 
-var dirRadios = {ltr: document.getElementById("ltr"),
-                 rtl: document.getElementById("rtl")};
-dirRadios[editor.getOption("direction")].checked = true;
-dirRadios["rtl"].onchange = dirRadios["ltr"].onchange = function() {
-  editor.setOption("direction", dirRadios["rtl"].checked ? "rtl" : "ltr");
-};
+    var dirRadios = {
+      ltr: document.getElementById("ltr"),
+      rtl: document.getElementById("rtl")
+    };
+    dirRadios[editor.getOption("direction")].checked = true;
+    dirRadios["rtl"].onchange = dirRadios["ltr"].onchange = function () {
+      editor.setOption("direction", dirRadios["rtl"].checked ? "rtl" : "ltr");
+    };
 
-var HtmlDirRadios = {ltr: document.getElementById("htmlltr"),
-                 rtl: document.getElementById("htmlrtl")};
-HtmlDirRadios["ltr"].checked = true;
-HtmlDirRadios["rtl"].onchange = HtmlDirRadios["ltr"].onchange = function() {
-  document.dir = (HtmlDirRadios["rtl"].checked ? "rtl" : "ltr");
-};
+    var HtmlDirRadios = {
+      ltr: document.getElementById("htmlltr"),
+      rtl: document.getElementById("htmlrtl")
+    };
+    HtmlDirRadios["ltr"].checked = true;
+    HtmlDirRadios["rtl"].onchange = HtmlDirRadios["ltr"].onchange = function () {
+      document.dir = (HtmlDirRadios["rtl"].checked ? "rtl" : "ltr");
+    };
 
-var moveCheckbox = document.getElementById("rtlMoveVisually");
-moveCheckbox.checked = editor.getOption("rtlMoveVisually");
-moveCheckbox.onchange = function() {
-  editor.setOption("rtlMoveVisually", moveCheckbox.checked);
-};
-</script>
+    var moveCheckbox = document.getElementById("rtlMoveVisually");
+    moveCheckbox.checked = editor.getOption("rtlMoveVisually");
+    moveCheckbox.onchange = function () {
+      editor.setOption("rtlMoveVisually", moveCheckbox.checked);
+    };
+  </script>
 
   <p>Demonstration of bi-directional text support. See
-  the <a href="http://marijnhaverbeke.nl/blog/cursor-in-bidi-text.html">related
-  blog post</a> for more background.</p>
+    the <a href="http://marijnhaverbeke.nl/blog/cursor-in-bidi-text.html">related
+      blog post</a> for more background.</p>
 
 </article>

src/assets/codemirror/codemirror-5.58.2/demo/btree.html

@@ -2,14 +2,22 @@
 
 <title>CodeMirror: B-Tree visualization</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <style>
-      .lineblock { display: inline-block; margin: 1px; height: 5px; }
-      .CodeMirror {border: 1px solid #aaa; height: 400px}
-    </style>
+  .lineblock {
+    display: inline-block;
+    margin: 1px;
+    height: 5px;
+  }
+
+  .CodeMirror {
+    border: 1px solid #aaa;
+    height: 400px
+  }
+</style>
 <div id=nav>
   <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
 
@@ -24,60 +32,69 @@
 </div>
 
 <article>
-<h2>B-Tree visualization</h2>
-<form><textarea id="code" name="code">type here, see a summary of the document b-tree below</textarea></form>
-      <div style="display: inline-block; height: 402px; overflow-y: auto" id="output"></div>
+  <h2>B-Tree visualization</h2>
+  <form><textarea id="code" name="code">type here, see a summary of the document b-tree below</textarea></form>
+  <div id="output" style="display: inline-block; height: 402px; overflow-y: auto"></div>
 
-    <script id="me">
-var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
-  lineNumbers: true,
-  lineWrapping: true
-});
-var updateTimeout;
-editor.on("change", function(cm) {
-  clearTimeout(updateTimeout);
-  updateTimeout = setTimeout(updateVisual, 200);
-});
-updateVisual();
+  <script id="me">
+    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+      lineNumbers: true,
+      lineWrapping: true
+    });
+    var updateTimeout;
+    editor.on("change", function (cm) {
+      clearTimeout(updateTimeout);
+      updateTimeout = setTimeout(updateVisual, 200);
+    });
+    updateVisual();
 
-function updateVisual() {
-  var out = document.getElementById("output");
-  out.innerHTML = "";
+    function updateVisual() {
+      var out = document.getElementById("output");
+      out.innerHTML = "";
 
-  function drawTree(out, node) {
-    if (node.lines) {
-      out.appendChild(document.createElement("div")).innerHTML =
-        "<b>leaf</b>: " + node.lines.length + " lines, " + Math.round(node.height) + " px";
-      var lines = out.appendChild(document.createElement("div"));
-      lines.style.lineHeight = "6px"; lines.style.marginLeft = "10px";
-      for (var i = 0; i < node.lines.length; ++i) {
-        var line = node.lines[i], lineElt = lines.appendChild(document.createElement("div"));
-        lineElt.className = "lineblock";
-        var gray = Math.min(line.text.length * 3, 230), col = gray.toString(16);
-        if (col.length == 1) col = "0" + col;
-        lineElt.style.background = "#" + col + col + col;
-        lineElt.style.width = Math.max(Math.round(line.height / 3), 1) + "px";
+      function drawTree(out, node) {
+        if (node.lines) {
+          out.appendChild(document.createElement("div")).innerHTML =
+            "<b>leaf</b>: " + node.lines.length + " lines, " + Math.round(node.height) + " px";
+          var lines = out.appendChild(document.createElement("div"));
+          lines.style.lineHeight = "6px";
+          lines.style.marginLeft = "10px";
+          for (var i = 0; i < node.lines.length; ++i) {
+            var line = node.lines[i], lineElt = lines.appendChild(document.createElement("div"));
+            lineElt.className = "lineblock";
+            var gray = Math.min(line.text.length * 3, 230), col = gray.toString(16);
+            if (col.length == 1) col = "0" + col;
+            lineElt.style.background = "#" + col + col + col;
+            lineElt.style.width = Math.max(Math.round(line.height / 3), 1) + "px";
+          }
+        } else {
+          out.appendChild(document.createElement("div")).innerHTML =
+            "<b>node</b>: " + node.size + " lines, " + Math.round(node.height) + " px";
+          var sub = out.appendChild(document.createElement("div"));
+          sub.style.paddingLeft = "20px";
+          for (var i = 0; i < node.children.length; ++i)
+            drawTree(sub, node.children[i]);
+        }
       }
-    } else {
-      out.appendChild(document.createElement("div")).innerHTML =
-        "<b>node</b>: " + node.size + " lines, " + Math.round(node.height) + " px";
-      var sub = out.appendChild(document.createElement("div"));
-      sub.style.paddingLeft = "20px";
-      for (var i = 0; i < node.children.length; ++i)
-        drawTree(sub, node.children[i]);
+
+      drawTree(out, editor.getDoc());
     }
-  }
-  drawTree(out, editor.getDoc());
-}
 
-function fillEditor() {
-  var sc = document.getElementById("me");
-  var doc = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, "") + "\n";
-  doc += doc; doc += doc; doc += doc; doc += doc; doc += doc; doc += doc;
-  editor.setValue(doc);
-}
-    </script>
+    function fillEditor() {
+      var sc = document.getElementById("me");
+      var doc = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, "") + "\n";
+      doc += doc;
+      doc += doc;
+      doc += doc;
+      doc += doc;
+      doc += doc;
+      doc += doc;
+      editor.setValue(doc);
+    }
+  </script>
 
-<p><button onclick="fillEditor()">Add a lot of content</button></p>
+  <p>
+    <button onclick="fillEditor()">Add a lot of content</button>
+  </p>
 
-  </article>
+</article>

src/assets/codemirror/codemirror-5.58.2/demo/buffers.html

@@ -2,15 +2,18 @@
 
 <title>CodeMirror: Multiple Buffer & Split View Demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../mode/javascript/javascript.js"></script>
 <script src="../mode/css/css.js"></script>
 <style id=style>
-      .CodeMirror {border: 1px solid black; height: 250px;}
-    </style>
+  .CodeMirror {
+    border: 1px solid black;
+    height: 250px;
+  }
+</style>
 <div id=nav>
   <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
 
@@ -25,85 +28,90 @@
 </div>
 
 <article>
-<h2>Multiple Buffer & Split View Demo</h2>
-
-
-    <div id=code_top></div>
-    <div>
-      Select buffer: <select id=buffers_top></select>
-      &nbsp; &nbsp; <button onclick="newBuf('top')">New buffer</button>
-    </div>
-    <div id=code_bot></div>
-    <div>
-      Select buffer: <select id=buffers_bot></select>
-      &nbsp; &nbsp; <button onclick="newBuf('bot')">New buffer</button>
-    </div>
-
-    <script id=script>
-var sel_top = document.getElementById("buffers_top");
-CodeMirror.on(sel_top, "change", function() {
-  selectBuffer(ed_top, sel_top.options[sel_top.selectedIndex].value);
-});
-
-var sel_bot = document.getElementById("buffers_bot");
-CodeMirror.on(sel_bot, "change", function() {
-  selectBuffer(ed_bot, sel_bot.options[sel_bot.selectedIndex].value);
-});
-
-var buffers = {};
-
-function openBuffer(name, text, mode) {
-  buffers[name] = CodeMirror.Doc(text, mode);
-  var opt = document.createElement("option");
-  opt.appendChild(document.createTextNode(name));
-  sel_top.appendChild(opt);
-  sel_bot.appendChild(opt.cloneNode(true));
-}
-
-function newBuf(where) {
-  var name = prompt("Name for the buffer", "*scratch*");
-  if (name == null) return;
-  if (buffers.hasOwnProperty(name)) {
-    alert("There's already a buffer by that name.");
-    return;
-  }
-  openBuffer(name, "", "javascript");
-  selectBuffer(where == "top" ? ed_top : ed_bot, name);
-  var sel = where == "top" ? sel_top : sel_bot;
-  sel.value = name;
-}
-
-function selectBuffer(editor, name) {
-  var buf = buffers[name];
-  if (buf.getEditor()) buf = buf.linkedDoc({sharedHist: true});
-  var old = editor.swapDoc(buf);
-  var linked = old.iterLinkedDocs(function(doc) {linked = doc;});
-  if (linked) {
-    // Make sure the document in buffers is the one the other view is looking at
-    for (var name in buffers) if (buffers[name] == old) buffers[name] = linked;
-    old.unlinkDoc(linked);
-  }
-  editor.focus();
-}
-
-function nodeContent(id) {
-  var node = document.getElementById(id), val = node.textContent || node.innerText;
-  val = val.slice(val.match(/^\s*/)[0].length, val.length - val.match(/\s*$/)[0].length) + "\n";
-  return val;
-}
-openBuffer("js", nodeContent("script"), "javascript");
-openBuffer("css", nodeContent("style"), "css");
-
-var ed_top = CodeMirror(document.getElementById("code_top"), {lineNumbers: true});
-selectBuffer(ed_top, "js");
-var ed_bot = CodeMirror(document.getElementById("code_bot"), {lineNumbers: true});
-selectBuffer(ed_bot, "js");
-</script>
-
-    <p>Demonstration of
+  <h2>Multiple Buffer & Split View Demo</h2>
+
+
+  <div id=code_top></div>
+  <div>
+    Select buffer: <select id=buffers_top></select>
+    &nbsp; &nbsp;
+    <button onclick="newBuf('top')">New buffer</button>
+  </div>
+  <div id=code_bot></div>
+  <div>
+    Select buffer: <select id=buffers_bot></select>
+    &nbsp; &nbsp;
+    <button onclick="newBuf('bot')">New buffer</button>
+  </div>
+
+  <script id=script>
+    var sel_top = document.getElementById("buffers_top");
+    CodeMirror.on(sel_top, "change", function () {
+      selectBuffer(ed_top, sel_top.options[sel_top.selectedIndex].value);
+    });
+
+    var sel_bot = document.getElementById("buffers_bot");
+    CodeMirror.on(sel_bot, "change", function () {
+      selectBuffer(ed_bot, sel_bot.options[sel_bot.selectedIndex].value);
+    });
+
+    var buffers = {};
+
+    function openBuffer(name, text, mode) {
+      buffers[name] = CodeMirror.Doc(text, mode);
+      var opt = document.createElement("option");
+      opt.appendChild(document.createTextNode(name));
+      sel_top.appendChild(opt);
+      sel_bot.appendChild(opt.cloneNode(true));
+    }
+
+    function newBuf(where) {
+      var name = prompt("Name for the buffer", "*scratch*");
+      if (name == null) return;
+      if (buffers.hasOwnProperty(name)) {
+        alert("There's already a buffer by that name.");
+        return;
+      }
+      openBuffer(name, "", "javascript");
+      selectBuffer(where == "top" ? ed_top : ed_bot, name);
+      var sel = where == "top" ? sel_top : sel_bot;
+      sel.value = name;
+    }
+
+    function selectBuffer(editor, name) {
+      var buf = buffers[name];
+      if (buf.getEditor()) buf = buf.linkedDoc({sharedHist: true});
+      var old = editor.swapDoc(buf);
+      var linked = old.iterLinkedDocs(function (doc) {
+        linked = doc;
+      });
+      if (linked) {
+        // Make sure the document in buffers is the one the other view is looking at
+        for (var name in buffers) if (buffers[name] == old) buffers[name] = linked;
+        old.unlinkDoc(linked);
+      }
+      editor.focus();
+    }
+
+    function nodeContent(id) {
+      var node = document.getElementById(id), val = node.textContent || node.innerText;
+      val = val.slice(val.match(/^\s*/)[0].length, val.length - val.match(/\s*$/)[0].length) + "\n";
+      return val;
+    }
+
+    openBuffer("js", nodeContent("script"), "javascript");
+    openBuffer("css", nodeContent("style"), "css");
+
+    var ed_top = CodeMirror(document.getElementById("code_top"), {lineNumbers: true});
+    selectBuffer(ed_top, "js");
+    var ed_bot = CodeMirror(document.getElementById("code_bot"), {lineNumbers: true});
+    selectBuffer(ed_bot, "js");
+  </script>
+
+  <p>Demonstration of
     using <a href="../doc/manual.html#linkedDoc">linked documents</a>
     to provide a split view on a document, and
     using <a href="../doc/manual.html#swapDoc"><code>swapDoc</code></a>
     to use a single editor to display multiple documents.</p>
 
-  </article>
+</article>

src/assets/codemirror/codemirror-5.58.2/demo/changemode.html

@@ -2,15 +2,17 @@
 
 <title>CodeMirror: Mode-Changing Demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../mode/javascript/javascript.js"></script>
 <script src="../mode/scheme/scheme.js"></script>
 <style>
-      .CodeMirror {border: 1px solid black;}
-    </style>
+  .CodeMirror {
+    border: 1px solid black;
+  }
+</style>
 <div id=nav>
   <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
 
@@ -25,8 +27,8 @@
 </div>
 
 <article>
-<h2>Mode-Changing Demo</h2>
-<form><textarea id="code" name="code">
+  <h2>Mode-Changing Demo</h2>
+  <form><textarea id="code" name="code">
 ;; If there is Scheme code in here, the editor will be in Scheme mode.
 ;; If you put in JS instead, it'll switch to JS mode.
 
@@ -34,25 +36,27 @@
   (* x x))
 </textarea></form>
 
-<p>On changes to the content of the above editor, a (crude) script
-tries to auto-detect the language used, and switches the editor to
-either JavaScript or Scheme mode based on that.</p>
-
-<script>
-  var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
-    mode: "scheme",
-    lineNumbers: true
-  });
-  var pending;
-  editor.on("change", function() {
-    clearTimeout(pending);
-    pending = setTimeout(update, 400);
-  });
-  function looksLikeScheme(code) {
-    return !/^\s*\(\s*function\b/.test(code) && /^\s*[;\(]/.test(code);
-  }
-  function update() {
-    editor.setOption("mode", looksLikeScheme(editor.getValue()) ? "scheme" : "javascript");
-  }
-</script>
-  </article>
+  <p>On changes to the content of the above editor, a (crude) script
+    tries to auto-detect the language used, and switches the editor to
+    either JavaScript or Scheme mode based on that.</p>
+
+  <script>
+    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+      mode: "scheme",
+      lineNumbers: true
+    });
+    var pending;
+    editor.on("change", function () {
+      clearTimeout(pending);
+      pending = setTimeout(update, 400);
+    });
+
+    function looksLikeScheme(code) {
+      return !/^\s*\(\s*function\b/.test(code) && /^\s*[;\(]/.test(code);
+    }
+
+    function update() {
+      editor.setOption("mode", looksLikeScheme(editor.getValue()) ? "scheme" : "javascript");
+    }
+  </script>
+</article>

src/assets/codemirror/codemirror-5.58.2/demo/closebrackets.html

@@ -2,15 +2,18 @@
 
 <title>CodeMirror: Closebrackets Demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../addon/edit/closebrackets.js"></script>
 <script src="../mode/javascript/javascript.js"></script>
 <style>
-      .CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;}
-    </style>
+  .CodeMirror {
+    border-top: 1px solid #888;
+    border-bottom: 1px solid #888;
+  }
+</style>
 <div id=nav>
   <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
 
@@ -25,28 +28,28 @@
 </div>
 
 <article>
-<h2>Closebrackets Demo</h2>
-<form><textarea id="code" name="code">function Grid(width, height) {
-  this.width = width;
-  this.height = height;
-  this.cells = new Array(width * height);
+  <h2>Closebrackets Demo</h2>
+  <form><textarea id="code" name="code">function Grid(width, height) {
+    this.width = width;
+    this.height = height;
+    this.cells = new Array(width * height);
 }
 Grid.prototype.valueAt = function(point) {
-  return this.cells[point.y * this.width + point.x];
+    return this.cells[point.y * this.width + point.x];
 };
 Grid.prototype.setValueAt = function(point, value) {
-  this.cells[point.y * this.width + point.x] = value;
+    this.cells[point.y * this.width + point.x] = value;
 };
 Grid.prototype.isInside = function(point) {
-  return point.x >= 0 && point.y >= 0 &&
-         point.x < this.width && point.y < this.height;
+    return point.x >= 0 && point.y >= 0 &&
+           point.x < this.width && point.y < this.height;
 };
 Grid.prototype.moveValue = function(from, to) {
-  this.setValueAt(to, this.valueAt(from));
-  this.setValueAt(from, undefined);
+    this.setValueAt(to, this.valueAt(from));
+    this.setValueAt(from, undefined);
 };</textarea></form>
 
-    <script>
-      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {autoCloseBrackets: true});
-    </script>
-  </article>
+  <script>
+    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {autoCloseBrackets: true});
+  </script>
+</article>

src/assets/codemirror/codemirror-5.58.2/demo/closetag.html

@@ -2,9 +2,9 @@
 
 <title>CodeMirror: Close-Tag Demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../addon/edit/closetag.js"></script>
 <script src="../addon/fold/xml-fold.js"></script>
@@ -13,8 +13,11 @@
 <script src="../mode/css/css.js"></script>
 <script src="../mode/htmlmixed/htmlmixed.js"></script>
 <style>
-      .CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;}
-    </style>
+  .CodeMirror {
+    border-top: 1px solid #888;
+    border-bottom: 1px solid #888;
+  }
+</style>
 <div id=nav>
   <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
 
@@ -29,13 +32,13 @@
 </div>
 
 <article>
-<h2>Close-Tag Demo</h2>
-<form><textarea id="code" name="code"><html</textarea></form>
+  <h2>Close-Tag Demo</h2>
+  <form><textarea id="code" name="code"><html</textarea></form>
 
-    <script>
-      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
-        mode: 'text/html',
-        autoCloseTags: true
-      });
-    </script>
-  </article>
+  <script>
+    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+      mode: 'text/html',
+      autoCloseTags: true
+    });
+  </script>
+</article>

src/assets/codemirror/codemirror-5.58.2/demo/complete.html

@@ -2,10 +2,10 @@
 
 <title>CodeMirror: Autocomplete Demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
-<link rel="stylesheet" href="../addon/hint/show-hint.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
+<link href="../addon/hint/show-hint.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../addon/hint/show-hint.js"></script>
 <script src="../addon/hint/javascript-hint.js"></script>
@@ -26,11 +26,11 @@
 </div>
 
 <article>
-<h2>Autocomplete Demo</h2>
-<form><textarea id="code" name="code">
+  <h2>Autocomplete Demo</h2>
+  <form><textarea id="code" name="code">
 function getCompletions(token, context) {
-  var found = [], start = token.string;
-  function maybeAdd(str) {
+    var found = [], start = token.string;
+    function maybeAdd(str) {
     if (str.indexOf(start) == 0) found.push(str);
   }
   function gatherCompletions(obj) {
@@ -65,62 +65,64 @@ function getCompletions(token, context) {
 }
 </textarea></form>
 
-<p>Press <strong>ctrl-space</strong> to activate autocompletion. Built
-on top of the <a href="../doc/manual.html#addon_show-hint"><code>show-hint</code></a>
-and <a href="../doc/manual.html#addon_javascript-hint"><code>javascript-hint</code></a>
-addons.</p>
+  <p>Press <strong>ctrl-space</strong> to activate autocompletion. Built
+    on top of the <a href="../doc/manual.html#addon_show-hint"><code>show-hint</code></a>
+    and <a href="../doc/manual.html#addon_javascript-hint"><code>javascript-hint</code></a>
+    addons.</p>
 
-<form><textarea style="display: none" id="synonyms" name="synonyms">
+  <form><textarea id="synonyms" name="synonyms" style="display: none">
 Here, the completion use an asynchronous hinting functions to provide
 synonyms for each words. If your browser support `Promises`, the
 hinting function can also return one.
 </textarea></form>
 
-<script>
-var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
-  lineNumbers: true,
-  extraKeys: {"Ctrl-Space": "autocomplete"},
-  mode: {name: "javascript", globalVars: true}
-});
+  <script>
+    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+      lineNumbers: true,
+      extraKeys: {"Ctrl-Space": "autocomplete"},
+      mode: {name: "javascript", globalVars: true}
+    });
 
-if (typeof Promise !== "undefined") {
-  var comp = [
-    ["here", "hither"],
-    ["asynchronous", "nonsynchronous"],
-    ["completion", "achievement", "conclusion", "culmination", "expirations"],
-    ["hinting", "advive", "broach", "imply"],
-    ["function","action"],
-    ["provide", "add", "bring", "give"],
-    ["synonyms", "equivalents"],
-    ["words", "token"],
-    ["each", "every"],
-  ]
+    if (typeof Promise !== "undefined") {
+      var comp = [
+        ["here", "hither"],
+        ["asynchronous", "nonsynchronous"],
+        ["completion", "achievement", "conclusion", "culmination", "expirations"],
+        ["hinting", "advive", "broach", "imply"],
+        ["function", "action"],
+        ["provide", "add", "bring", "give"],
+        ["synonyms", "equivalents"],
+        ["words", "token"],
+        ["each", "every"],
+      ]
 
-  function synonyms(cm, option) {
-    return new Promise(function(accept) {
-      setTimeout(function() {
-        var cursor = cm.getCursor(), line = cm.getLine(cursor.line)
-        var start = cursor.ch, end = cursor.ch
-        while (start && /\w/.test(line.charAt(start - 1))) --start
-        while (end < line.length && /\w/.test(line.charAt(end))) ++end
-        var word = line.slice(start, end).toLowerCase()
-        for (var i = 0; i < comp.length; i++) if (comp[i].indexOf(word) != -1)
-          return accept({list: comp[i],
-                         from: CodeMirror.Pos(cursor.line, start),
-                         to: CodeMirror.Pos(cursor.line, end)})
-        return accept(null)
-      }, 100)
-    })
-  }
+      function synonyms(cm, option) {
+        return new Promise(function (accept) {
+          setTimeout(function () {
+            var cursor = cm.getCursor(), line = cm.getLine(cursor.line)
+            var start = cursor.ch, end = cursor.ch
+            while (start && /\w/.test(line.charAt(start - 1))) --start
+            while (end < line.length && /\w/.test(line.charAt(end))) ++end
+            var word = line.slice(start, end).toLowerCase()
+            for (var i = 0; i < comp.length; i++) if (comp[i].indexOf(word) != -1)
+              return accept({
+                list: comp[i],
+                from: CodeMirror.Pos(cursor.line, start),
+                to: CodeMirror.Pos(cursor.line, end)
+              })
+            return accept(null)
+          }, 100)
+        })
+      }
 
-  var editor2 = CodeMirror.fromTextArea(document.getElementById("synonyms"), {
-    extraKeys: {"Ctrl-Space": "autocomplete"},
-    lineNumbers: true,
-    lineWrapping: true,
-    mode: "text/x-markdown",
-    hintOptions: {hint: synonyms}
-  })
-}
-</script>
+      var editor2 = CodeMirror.fromTextArea(document.getElementById("synonyms"), {
+        extraKeys: {"Ctrl-Space": "autocomplete"},
+        lineNumbers: true,
+        lineWrapping: true,
+        mode: "text/x-markdown",
+        hintOptions: {hint: synonyms}
+      })
+    }
+  </script>
 
 </article>

src/assets/codemirror/codemirror-5.58.2/demo/emacs.html

@@ -2,10 +2,10 @@
 
 <title>CodeMirror: Emacs bindings demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
-<link rel="stylesheet" href="../addon/dialog/dialog.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
+<link href="../addon/dialog/dialog.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../mode/clike/clike.js"></script>
 <script src="../keymap/emacs.js"></script>
@@ -15,8 +15,11 @@
 <script src="../addon/search/searchcursor.js"></script>
 <script src="../addon/search/search.js"></script>
 <style>
-      .CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
-    </style>
+  .CodeMirror {
+    border-top: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+  }
+</style>
 <div id=nav>
   <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
 
@@ -31,16 +34,16 @@
 </div>
 
 <article>
-<h2>Emacs bindings demo</h2>
-<form><textarea id="code" name="code">
+  <h2>Emacs bindings demo</h2>
+  <form><textarea id="code" name="code">
 #include "syscalls.h"
 /* getchar:  simple buffered version */
 int getchar(void)
-{
-  static char buf[BUFSIZ];
-  static char *bufp = buf;
-  static int n = 0;
-  if (n == 0) {  /* buffer is empty */
+    {
+    static char buf[BUFSIZ];
+    static char *bufp = buf;
+    static int n = 0;
+    if (n == 0) {  /* buffer is empty */
     n = read(0, buf, sizeof buf);
     bufp = buf;
   }
@@ -48,29 +51,31 @@ int getchar(void)
 }
 </textarea></form>
 
-<p>The emacs keybindings are enabled by
-including <a href="../keymap/emacs.js">keymap/emacs.js</a> and setting
-the <code>keyMap</code> option to <code>"emacs"</code>. Because
-CodeMirror's internal API is quite different from Emacs, they are only
-a loose approximation of actual emacs bindings, though.</p>
+  <p>The emacs keybindings are enabled by
+    including <a href="../keymap/emacs.js">keymap/emacs.js</a> and setting
+    the <code>keyMap</code> option to <code>"emacs"</code>. Because
+    CodeMirror's internal API is quite different from Emacs, they are only
+    a loose approximation of actual emacs bindings, though.</p>
 
-<p>Also note that a lot of browsers disallow certain keys from being
-captured. For example, Chrome blocks both Ctrl-W and Ctrl-N, with the
-result that idiomatic use of Emacs keys will constantly close your tab
-or open a new window.</p>
+  <p>Also note that a lot of browsers disallow certain keys from being
+    captured. For example, Chrome blocks both Ctrl-W and Ctrl-N, with the
+    result that idiomatic use of Emacs keys will constantly close your tab
+    or open a new window.</p>
 
-    <script>
-      CodeMirror.commands.save = function() {
-        var elt = editor.getWrapperElement();
-        elt.style.background = "#def";
-        setTimeout(function() { elt.style.background = ""; }, 300);
-      };
-      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
-        lineNumbers: true,
-        mode: "text/x-csrc",
-        matchBrackets: true,
-        keyMap: "emacs"
-      });
-    </script>
+  <script>
+    CodeMirror.commands.save = function () {
+      var elt = editor.getWrapperElement();
+      elt.style.background = "#def";
+      setTimeout(function () {
+        elt.style.background = "";
+      }, 300);
+    };
+    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+      lineNumbers: true,
+      mode: "text/x-csrc",
+      matchBrackets: true,
+      keyMap: "emacs"
+    });
+  </script>
 
-  </article>
+</article>

src/assets/codemirror/codemirror-5.58.2/demo/folding.html

@@ -3,7 +3,7 @@
 <head>
   <title>CodeMirror: Code Folding Demo</title>
   <meta charset="utf-8"/>
-  <link rel=stylesheet href="../doc/docs.css">
+  <link href="../doc/docs.css" rel=stylesheet>
 
   <style>
     .some-css {
@@ -12,8 +12,8 @@
     }
   </style>
 
-  <link rel="stylesheet" href="../lib/codemirror.css">
-  <link rel="stylesheet" href="../addon/fold/foldgutter.css" />
+  <link href="../lib/codemirror.css" rel="stylesheet">
+  <link href="../addon/fold/foldgutter.css" rel="stylesheet"/>
   <script src="../lib/codemirror.js"></script>
   <script src="../addon/fold/foldcode.js"></script>
   <script src="../addon/fold/foldgutter.js"></script>
@@ -29,7 +29,10 @@
   <script src="../mode/python/python.js"></script>
   <script src="../mode/markdown/markdown.js"></script>
   <style>
-    .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
+    .CodeMirror {
+      border-top: 1px solid black;
+      border-bottom: 1px solid black;
+    }
   </style>
 </head>
 
@@ -51,11 +54,11 @@
   <h2>Code Folding Demo</h2>
   <form>
     <div style="max-width: 50em; margin-bottom: 1em">JavaScript:<br>
-    <textarea id="code" name="code"></textarea></div>
+      <textarea id="code" name="code"></textarea></div>
     <div style="max-width: 50em; margin-bottom: 1em">HTML:<br>
-    <textarea id="code-html" name="code-html"></textarea></div>    
+      <textarea id="code-html" name="code-html"></textarea></div>
     <div style="max-width: 50em; margin-bottom: 1em">JSON with custom widget:<br>
-    <textarea id="code-json" name="code-json">
+      <textarea id="code-json" name="code-json">
 {
   "menu": {
     "id": "file",
@@ -63,15 +66,15 @@
     "popup": {
       "menuitem": [
         {"value": "New", "onclick": "CreateNewDoc()"},
-        {"value": "Open", "onclick": "OpenDoc()"},
-        {"value": "Close", "onclick": "CloseDoc()"}
-      ]
-    }
+  {"value": "Open", "onclick": "OpenDoc()"},
+  {"value": "Close", "onclick": "CloseDoc()"}
+  ]
   }
+        }
 }
     </textarea></div>
     <div style="max-width: 50em">Python:<br>
-    <textarea id="code-python" name="code">
+      <textarea id="code-python" name="code">
 def foo():
   do_some_stuff()
   here
@@ -89,96 +92,118 @@ class Bar:
 
 # A comment</textarea></div>
     <div style="max-width: 50em">Markdown:<br>
-    <textarea id="code-markdown" name="code"></textarea></div>
+      <textarea id="code-markdown" name="code"></textarea></div>
   </form>
   <script id="script">
-/*
- * Demonstration of code folding
- */
-window.onload = function() {
-  var te = document.getElementById("code");
-  var sc = document.getElementById("script");
-  te.value = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, "");
-  sc.innerHTML = "";
-  var te_html = document.getElementById("code-html");
-  te_html.value = document.documentElement.innerHTML;
-  var te_python = document.getElementById("code-python");
-  var te_markdown = document.getElementById("code-markdown");
-  te_markdown.value = "# Foo\n## Bar\n\nblah blah\n\n## Baz\n\nblah blah\n\n# Quux\n\nblah blah\n"
-  var te_json = document.getElementById("code-json");
-
-  window.editor = CodeMirror.fromTextArea(te, {
-    mode: "javascript",
-    lineNumbers: true,
-    lineWrapping: true,
-    extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
-    foldGutter: true,
-    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
-  });
-  editor.foldCode(CodeMirror.Pos(13, 0));
-
-  window.editor_json = CodeMirror.fromTextArea(te_json, {
-    mode: {name: "javascript", json: true},
-    lineNumbers: true,
-    lineWrapping: true,
-    extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
-    foldGutter: true,
-    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
-    foldOptions: {
-      widget: (from, to) => {
-        var count = undefined;
-
-        // Get open / close token
-        var startToken = '{', endToken = '}';        
-        var prevLine = window.editor_json.getLine(from.line);
-        if (prevLine.lastIndexOf('[') > prevLine.lastIndexOf('{')) {
-          startToken = '[', endToken = ']';
+    /*
+     * Demonstration of code folding
+     */
+    window.onload = function () {
+      var te = document.getElementById("code");
+      var sc = document.getElementById("script");
+      te.value = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, "");
+      sc.innerHTML = "";
+      var te_html = document.getElementById("code-html");
+      te_html.value = document.documentElement.innerHTML;
+      var te_python = document.getElementById("code-python");
+      var te_markdown = document.getElementById("code-markdown");
+      te_markdown.value = "# Foo\n## Bar\n\nblah blah\n\n## Baz\n\nblah blah\n\n# Quux\n\nblah blah\n"
+      var te_json = document.getElementById("code-json");
+
+      window.editor = CodeMirror.fromTextArea(te, {
+        mode: "javascript",
+        lineNumbers: true,
+        lineWrapping: true,
+        extraKeys: {
+          "Ctrl-Q": function (cm) {
+            cm.foldCode(cm.getCursor());
+          }
+        },
+        foldGutter: true,
+        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
+      });
+      editor.foldCode(CodeMirror.Pos(13, 0));
+
+      window.editor_json = CodeMirror.fromTextArea(te_json, {
+        mode: {name: "javascript", json: true},
+        lineNumbers: true,
+        lineWrapping: true,
+        extraKeys: {
+          "Ctrl-Q": function (cm) {
+            cm.foldCode(cm.getCursor());
+          }
+        },
+        foldGutter: true,
+        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
+        foldOptions: {
+          widget: (from, to) => {
+            var count = undefined;
+
+            // Get open / close token
+            var startToken = '{', endToken = '}';
+            var prevLine = window.editor_json.getLine(from.line);
+            if (prevLine.lastIndexOf('[') > prevLine.lastIndexOf('{')) {
+              startToken = '[', endToken = ']';
+            }
+
+            // Get json content
+            var internal = window.editor_json.getRange(from, to);
+            var toParse = startToken + internal + endToken;
+
+            // Get key count
+            try {
+              var parsed = JSON.parse(toParse);
+              count = Object.keys(parsed).length;
+            } catch (e) {
+            }
+
+            return count ? `\u21A4${count}\u21A6` : '\u2194';
+          }
         }
-
-        // Get json content
-        var internal = window.editor_json.getRange(from, to);
-        var toParse = startToken + internal + endToken;
-
-        // Get key count
-        try {
-          var parsed = JSON.parse(toParse);
-          count = Object.keys(parsed).length;
-        } catch(e) { }        
-
-        return count ? `\u21A4${count}\u21A6` : '\u2194';
-      }
-    }
-  });
-  editor_json.foldCode(CodeMirror.Pos(5, 0));
-
-  window.editor_html = CodeMirror.fromTextArea(te_html, {
-    mode: "text/html",
-    lineNumbers: true,
-    lineWrapping: true,
-    extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
-    foldGutter: true,
-    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
-  });
-  editor_html.foldCode(CodeMirror.Pos(0, 0));
-  editor_html.foldCode(CodeMirror.Pos(34, 0));
-
-  window.editor_python = CodeMirror.fromTextArea(te_python, {
-    mode: "python",
-    lineNumbers: true,
-    extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
-    foldGutter: true,
-    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
-  });
-
-  window.editor_markdown = CodeMirror.fromTextArea(te_markdown, {
-    mode: "markdown",
-    lineNumbers: true,
-    lineWrapping: true,
-    extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
-    foldGutter: true,
-    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
-  });
-};
-  </script>
-</article>
-</body>
+      });
+      editor_json.foldCode(CodeMirror.Pos(5, 0));
+
+      window.editor_html = CodeMirror.fromTextArea(te_html, {
+        mode: "text/html",
+        lineNumbers: true,
+        lineWrapping: true,
+        extraKeys: {
+          "Ctrl-Q": function (cm) {
+            cm.foldCode(cm.getCursor());
+          }
+        },
+        foldGutter: true,
+        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
+      });
+      editor_html.foldCode(CodeMirror.Pos(0, 0));
+      editor_html.foldCode(CodeMirror.Pos(34, 0));
+
+      window.editor_python = CodeMirror.fromTextArea(te_python, {
+        mode: "python",
+        lineNumbers: true,
+        extraKeys: {
+          "Ctrl-Q": function (cm) {
+            cm.foldCode(cm.getCursor());
+          }
+        },
+        foldGutter: true,
+        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
+      });
+
+      window.editor_markdown = CodeMirror.fromTextArea(te_markdown, {
+        mode: "markdown",
+        lineNumbers: true,
+        lineWrapping: true,
+        extraKeys: {
+          "Ctrl-Q": function (cm) {
+            cm.foldCode(cm.getCursor());
+          }
+        },
+        foldGutter: true,
+        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
+      });
+    };
+    <
+    /script>
+    < /article>
+    < /body>

src/assets/codemirror/codemirror-5.58.2/demo/fullscreen.html

@@ -2,11 +2,11 @@
 
 <title>CodeMirror: Full Screen Editing</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
-<link rel="stylesheet" href="../addon/display/fullscreen.css">
-<link rel="stylesheet" href="../theme/night.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
+<link href="../addon/display/fullscreen.css" rel="stylesheet">
+<link href="../theme/night.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../mode/xml/xml.js"></script>
 <script src="../addon/display/fullscreen.js"></script>
@@ -25,8 +25,8 @@
 </div>
 
 <article>
-<h2>Full Screen Editing</h2>
-<form><textarea id="code" name="code" rows="5">
+  <h2>Full Screen Editing</h2>
+  <form><textarea id="code" name="code" rows="5">
 <dl>
   <dt id="option_indentWithTabs"><code><strong>indentWithTabs</strong>: boolean</code></dt>
   <dd>Whether, when indenting, the first N*<code>tabSize</code>
@@ -65,19 +65,19 @@
       lineNumbers: true,
       theme: "night",
       extraKeys: {
-        "F11": function(cm) {
+        "F11": function (cm) {
           cm.setOption("fullScreen", !cm.getOption("fullScreen"));
         },
-        "Esc": function(cm) {
+        "Esc": function (cm) {
           if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
         }
       }
     });
   </script>
 
-    <p>Demonstration of
+  <p>Demonstration of
     the <a href="../doc/manual.html#addon_fullscreen">fullscreen</a>
     addon. Press <strong>F11</strong> when cursor is in the editor to
     toggle full screen editing. <strong>Esc</strong> can also be used
     to <i>exit</i> full screen editing.</p>
-  </article>
+</article>

src/assets/codemirror/codemirror-5.58.2/demo/hardwrap.html

@@ -2,14 +2,17 @@
 
 <title>CodeMirror: Hard-wrapping Demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../mode/markdown/markdown.js"></script>
 <script src="../addon/wrap/hardwrap.js"></script>
 <style>
-  .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
+  .CodeMirror {
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+  }
 </style>
 <div id=nav>
   <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
@@ -25,8 +28,8 @@
 </div>
 
 <article>
-<h2>Hard-wrapping Demo</h2>
-<form><textarea id="code" name="code">Lorem ipsum dolor sit amet, vim augue dictas constituto ex,
+  <h2>Hard-wrapping Demo</h2>
+  <form><textarea id="code" name="code">Lorem ipsum dolor sit amet, vim augue dictas constituto ex,
 sit falli simul viderer te. Graeco scaevola maluisset sit
 ut, in idque viris praesent sea. Ea sea eirmod indoctum
 repudiare. Vel noluisse suscipit pericula ut. In ius nulla
@@ -46,30 +49,32 @@ id, quas doming malorum nec ad. Tollit eruditi vivendum ad
 ius, eos soleat ignota ad.
 </textarea></form>
 
-<p>Demonstration of
-the <a href="../doc/manual.html#addon_hardwrap">hardwrap</a> addon.
-The above editor has its change event hooked up to
-the <code>wrapParagraphsInRange</code> method, so that the paragraphs
-are reflown as you are typing.</p>
+  <p>Demonstration of
+    the <a href="../doc/manual.html#addon_hardwrap">hardwrap</a> addon.
+    The above editor has its change event hooked up to
+    the <code>wrapParagraphsInRange</code> method, so that the paragraphs
+    are reflown as you are typing.</p>
 
-<script>
-var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
-  mode: "markdown",
-  lineNumbers: true,
-  extraKeys: {
-    "Ctrl-Q": function(cm) { cm.wrapParagraph(cm.getCursor(), options); }
-  }
-});
-var wait, options = {column: 60}, changing = false;
-editor.on("change", function(cm, change) {
-  if (changing) return;
-  clearTimeout(wait);
-  wait = setTimeout(function() {
-    changing = true;
-    cm.wrapParagraphsInRange(change.from, CodeMirror.changeEnd(change), options);
-    changing = false;
-  }, 200);
-});
-</script>
+  <script>
+    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+      mode: "markdown",
+      lineNumbers: true,
+      extraKeys: {
+        "Ctrl-Q": function (cm) {
+          cm.wrapParagraph(cm.getCursor(), options);
+        }
+      }
+    });
+    var wait, options = {column: 60}, changing = false;
+    editor.on("change", function (cm, change) {
+      if (changing) return;
+      clearTimeout(wait);
+      wait = setTimeout(function () {
+        changing = true;
+        cm.wrapParagraphsInRange(change.from, CodeMirror.changeEnd(change), options);
+        changing = false;
+      }, 200);
+    });
+  </script>
 
 </article>

src/assets/codemirror/codemirror-5.58.2/demo/html5complete.html

@@ -3,10 +3,10 @@
 <head>
   <title>CodeMirror: HTML completion demo</title>
   <meta charset="utf-8"/>
-  <link rel=stylesheet href="../doc/docs.css">
+  <link href="../doc/docs.css" rel=stylesheet>
 
-  <link rel="stylesheet" href="../lib/codemirror.css">
-  <link rel="stylesheet" href="../addon/hint/show-hint.css">
+  <link href="../lib/codemirror.css" rel="stylesheet">
+  <link href="../addon/hint/show-hint.css" rel="stylesheet">
   <script src="../lib/codemirror.js"></script>
   <script src="../addon/hint/show-hint.js"></script>
   <script src="../addon/hint/xml-hint.js"></script>
@@ -16,41 +16,44 @@
   <script src="../mode/css/css.js"></script>
   <script src="../mode/htmlmixed/htmlmixed.js"></script>
   <style>
-    .CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;}
+    .CodeMirror {
+      border-top: 1px solid #888;
+      border-bottom: 1px solid #888;
+    }
   </style>
 </head>
 
 <body>
-  <div id=nav>
-    <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
-
-    <ul>
-      <li><a href="../index.html">Home</a>
-      <li><a href="../doc/manual.html">Manual</a>
-      <li><a href="https://github.com/codemirror/codemirror">Code</a>
-    </ul>
-    <ul>
-      <li><a class=active href="#">HTML completion</a>
-    </ul>
-  </div>
-
-  <article>
-    <h2>HTML completion demo</h2>
-
-    <p>Shows the <a href="xmlcomplete.html">XML completer</a>
+<div id=nav>
+  <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
+
+  <ul>
+    <li><a href="../index.html">Home</a>
+    <li><a href="../doc/manual.html">Manual</a>
+    <li><a href="https://github.com/codemirror/codemirror">Code</a>
+  </ul>
+  <ul>
+    <li><a class=active href="#">HTML completion</a>
+  </ul>
+</div>
+
+<article>
+  <h2>HTML completion demo</h2>
+
+  <p>Shows the <a href="xmlcomplete.html">XML completer</a>
     parameterized with information about the tags in HTML.
     Press <strong>ctrl-space</strong> to activate completion.</p>
 
-    <div id="code"></div>
-
-    <script>
-      window.onload = function() {
-        editor = CodeMirror(document.getElementById("code"), {
-          mode: "text/html",
-          extraKeys: {"Ctrl-Space": "autocomplete"},
-          value: document.documentElement.innerHTML
-        });
-      };
-    </script>
-  </article>
+  <div id="code"></div>
+
+  <script>
+    window.onload = function () {
+      editor = CodeMirror(document.getElementById("code"), {
+        mode: "text/html",
+        extraKeys: {"Ctrl-Space": "autocomplete"},
+        value: document.documentElement.innerHTML
+      });
+    };
+  </script>
+</article>
 </body>

src/assets/codemirror/codemirror-5.58.2/demo/indentwrap.html

@@ -2,15 +2,21 @@
 
 <title>CodeMirror: Indented wrapped line demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../mode/xml/xml.js"></script>
 <style>
-      .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
-      .CodeMirror pre > * { text-indent: 0px; }
-    </style>
+  .CodeMirror {
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+  }
+
+  .CodeMirror pre > * {
+    text-indent: 0px;
+  }
+</style>
 <div id=nav>
   <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
 
@@ -25,35 +31,38 @@
 </div>
 
 <article>
-<h2>Indented wrapped line demo</h2>
-<form><textarea id="code" name="code">
+  <h2>Indented wrapped line demo</h2>
+  <form><textarea id="code" name="code">
 <!doctype html>
 <body>
   <h2 id="overview">Overview</h2>
 
-  <p>CodeMirror is a code-editor component that can be embedded in Web pages. The core library provides <em>only</em> the editor component, no accompanying buttons, auto-completion, or other IDE functionality. It does provide a rich API on top of which such functionality can be straightforwardly implemented. See the <a href="#addons">add-ons</a> included in the distribution, and the <a href="https://github.com/jagthedrummer/codemirror-ui">CodeMirror UI</a> project, for reusable implementations of extra features.</p>
+  <p>CodeMirror is a code-editor component that can be embedded in Web pages. The core library provides <em>only</em> the editor component, no accompanying buttons, auto-completion, or other IDE functionality. It does provide a rich API on top of which such functionality can be straightforwardly implemented. See the <a
+    href="#addons">add-ons</a> included in the distribution, and the <a
+    href="https://github.com/jagthedrummer/codemirror-ui">CodeMirror UI</a> project, for reusable implementations of extra features.</p>
 
-  <p>CodeMirror works with language-specific modes. Modes are JavaScript programs that help color (and optionally indent) text written in a given language. The distribution comes with a number of modes (see the <a href="../mode/"><code>mode/</code></a> directory), and it isn't hard to <a href="#modeapi">write new ones</a> for other languages.</p>
+  <p>CodeMirror works with language-specific modes. Modes are JavaScript programs that help color (and optionally indent) text written in a given language. The distribution comes with a number of modes (see the <a
+    href="../mode/"><code>mode/</code></a> directory), and it isn't hard to <a href="#modeapi">write new ones</a> for other languages.</p>
 </body>
 </textarea></form>
 
-    <p>This page uses a hack on top of the <code>"renderLine"</code>
+  <p>This page uses a hack on top of the <code>"renderLine"</code>
     event to make wrapped text line up with the base indentation of
     the line.</p>
 
-    <script>
-      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
-        lineNumbers: true,
-        lineWrapping: true,
-        mode: "text/html"
-      });
-      var charWidth = editor.defaultCharWidth(), basePadding = 4;
-      editor.on("renderLine", function(cm, line, elt) {
-        var off = CodeMirror.countColumn(line.text, null, cm.getOption("tabSize")) * charWidth;
-        elt.style.textIndent = "-" + off + "px";
-        elt.style.paddingLeft = (basePadding + off) + "px";
-      });
-      editor.refresh();
-    </script>
-
-  </article>
+  <script>
+    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+      lineNumbers: true,
+      lineWrapping: true,
+      mode: "text/html"
+    });
+    var charWidth = editor.defaultCharWidth(), basePadding = 4;
+    editor.on("renderLine", function (cm, line, elt) {
+      var off = CodeMirror.countColumn(line.text, null, cm.getOption("tabSize")) * charWidth;
+      elt.style.textIndent = "-" + off + "px";
+      elt.style.paddingLeft = (basePadding + off) + "px";
+    });
+    editor.refresh();
+  </script>
+
+</article>

src/assets/codemirror/codemirror-5.58.2/demo/lint.html

@@ -2,10 +2,10 @@
 
 <title>CodeMirror: Linter Demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
-<link rel="stylesheet" href="../addon/lint/lint.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
+<link href="../addon/lint/lint.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../mode/javascript/javascript.js"></script>
 <script src="../mode/css/css.js"></script>
@@ -17,8 +17,10 @@
 <script src="../addon/lint/json-lint.js"></script>
 <script src="../addon/lint/css-lint.js"></script>
 <style>
-      .CodeMirror {border: 1px solid black;}
-    </style>
+  .CodeMirror {
+    border: 1px solid black;
+  }
+</style>
 <div id=nav>
   <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
 
@@ -33,29 +35,29 @@
 </div>
 
 <article>
-<h2>Linter Demo</h2>
+  <h2>Linter Demo</h2>
 
 
-    <p><textarea id="code-js">var widgets = []
+  <p><textarea id="code-js">var widgets = []
 function updateHints() {
-  editor.operation(function(){
-    for (var i = 0; i < widgets.length.; ++i)
-      editor.removeLineWidget(widgets[i]);
-    widgets.length = 0;
-
-    JSHINT(editor.getValue());
-    for (var i = 0; i < JSHINT.errors.length; ++i) {
-      var err = JSHINT.errors[i];
-      if (!err) continue;
-      var msg = document.createElement("div");
-      var icon = msg.appendChild(document.createElement("span"));
-      icon.innerHTML = "!!";
-      icon.className = "lint-error-icon";
-      msg.appendChild(document.createTextNode(err.reason));
-      msg.className = "lint-error";
-      widgets.push(editor.addLineWidget(err.line - 1, msg, {coverGutter: false, noHScroll: true}));
-    }
-  });
+      editor.operation(function(){
+        for (var i = 0; i < widgets.length.; ++i)
+        editor.removeLineWidget(widgets[i]);
+        widgets.length = 0;
+
+        JSHINT(editor.getValue());
+        for(var i = 0; i < JSHINT.errors.length; ++i) {
+        var err = JSHINT.errors[i];
+        if (!err) continue;
+        var msg = document.createElement("div");
+        var icon = msg.appendChild(document.createElement("span"));
+        icon.innerHTML = "!!";
+        icon.className = "lint-error-icon";
+        msg.appendChild(document.createTextNode(err.reason));
+        msg.className = "lint-error";
+        widgets.push(editor.addLineWidget(err.line - 1, msg, {coverGutter: false, noHScroll: true}));
+      }
+    });
   var info = editor.getScrollInfo();
   var after = editor.charCoords({line: editor.getCursor().line + 1, ch: 0}, "local").top;
   if (info.top + info.clientHeight < after)
@@ -63,29 +65,29 @@ function updateHints() {
 }
 </textarea></p>
 
-    <p><textarea id="code-json">[
- {
-  _id: "post 1",
-  "author": "Bob",
-  "content": "...",
-  "page_views": 5
+  <p><textarea id="code-json">[
+    {
+    _id: "post 1",
+    "author": "Bob",
+    "content": "...",
+    "page_views": 5
  },
- {
-  "_id": "post 2",
-  "author": "Bob",
-  "content": "...",
-  "page_views": 9
+    {
+    "_id": "post 2",
+    "author": "Bob",
+    "content": "...",
+    "page_views": 9
  },
- {
-  "_id": "post 3",
-  "author": "Bob",
-  "content": "...",
-  "page_views": 8
+    {
+    "_id": "post 3",
+    "author": "Bob",
+    "content": "...",
+    "page_views": 8
  }
 ]
 </textarea></p>
 
-    <p><textarea id="code-css">@charset "UTF-8";
+  <p><textarea id="code-css">@charset "UTF-8";
 
 @import url("booya.css") print, screen;
 @import "whatup.css" screen;
@@ -100,7 +102,7 @@ function updateHints() {
 
 /*Warning: empty ruleset */
 .foo {
-}
+    }
 
 h1 {
     font-weight: bold;
@@ -121,10 +123,10 @@ li.inline {
 }
 
 li.last {
-  display: inline;
-  padding-left: 3px !important;
-  padding-right: 3px;
-  border-right: 0px;
+    display: inline;
+    padding-left: 3px !important;
+    padding-right: 3px;
+    border-right: 0px;
 }
 
 @media print {
@@ -134,10 +136,10 @@ li.last {
 }
 
 @page {
-  margin: 10%;
-  counter-increment: page;
+    margin: 10%;
+    counter-increment: page;
 
-  @top-center {
+    @top-center {
     font-family: sans-serif;
     font-weight: bold;
     font-size: 2em;
@@ -145,27 +147,27 @@ li.last {
   }
 }
 </textarea></p>
-<script>
-  var editor = CodeMirror.fromTextArea(document.getElementById("code-js"), {
-    lineNumbers: true,
-    mode: "javascript",
-    gutters: ["CodeMirror-lint-markers"],
-    lint: true
-  });
-
-  var editor_json = CodeMirror.fromTextArea(document.getElementById("code-json"), {
-    lineNumbers: true,
-    mode: "application/json",
-    gutters: ["CodeMirror-lint-markers"],
-    lint: true
-  });
-  
-  var editor_css = CodeMirror.fromTextArea(document.getElementById("code-css"), {
-    lineNumbers: true,
-    mode: "css",
-    gutters: ["CodeMirror-lint-markers"],
-    lint: true
-  });
-</script>
-
-  </article>
+  <script>
+    var editor = CodeMirror.fromTextArea(document.getElementById("code-js"), {
+      lineNumbers: true,
+      mode: "javascript",
+      gutters: ["CodeMirror-lint-markers"],
+      lint: true
+    });
+
+    var editor_json = CodeMirror.fromTextArea(document.getElementById("code-json"), {
+      lineNumbers: true,
+      mode: "application/json",
+      gutters: ["CodeMirror-lint-markers"],
+      lint: true
+    });
+
+    var editor_css = CodeMirror.fromTextArea(document.getElementById("code-css"), {
+      lineNumbers: true,
+      mode: "css",
+      gutters: ["CodeMirror-lint-markers"],
+      lint: true
+    });
+  </script>
+
+</article>

src/assets/codemirror/codemirror-5.58.2/demo/loadmode.html

@@ -2,15 +2,18 @@
 
 <title>CodeMirror: Lazy Mode Loading Demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../addon/mode/loadmode.js"></script>
 <script src="../mode/meta.js"></script>
 <style>
-      .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
-    </style>
+  .CodeMirror {
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+  }
+</style>
 <div id=nav>
   <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
 
@@ -25,48 +28,51 @@
 </div>
 
 <article>
-<h2>Lazy Mode Loading Demo</h2>
-<p style="color: gray">Current mode: <span id="modeinfo">text/plain</span></p>
-<form><textarea id="code" name="code">This is the editor.
+  <h2>Lazy Mode Loading Demo</h2>
+  <p style="color: gray">Current mode: <span id="modeinfo">text/plain</span></p>
+  <form><textarea id="code" name="code">This is the editor.
 // It starts out in plain text mode,
 #  use the control below to load and apply a mode
   "you'll see the highlighting of" this text /*change*/.
 </textarea></form>
-<p>Filename, mime, or mode name: <input type=text value=foo.js id=mode> <button type=button onclick="change()">change mode</button></p>
+  <p>Filename, mime, or mode name: <input id=mode type=text value=foo.js>
+    <button onclick="change()" type=button>change mode</button>
+  </p>
 
-    <script>
-CodeMirror.modeURL = "../mode/%N/%N.js";
-var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
-  lineNumbers: true
-});
-var modeInput = document.getElementById("mode");
-CodeMirror.on(modeInput, "keypress", function(e) {
-  if (e.keyCode == 13) change();
-});
-function change() {
-  var val = modeInput.value, m, mode, spec;
-  if (m = /.+\.([^.]+)$/.exec(val)) {
-    var info = CodeMirror.findModeByExtension(m[1]);
-    if (info) {
-      mode = info.mode;
-      spec = info.mime;
-    }
-  } else if (/\//.test(val)) {
-    var info = CodeMirror.findModeByMIME(val);
-    if (info) {
-      mode = info.mode;
-      spec = val;
+  <script>
+    CodeMirror.modeURL = "../mode/%N/%N.js";
+    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+      lineNumbers: true
+    });
+    var modeInput = document.getElementById("mode");
+    CodeMirror.on(modeInput, "keypress", function (e) {
+      if (e.keyCode == 13) change();
+    });
+
+    function change() {
+      var val = modeInput.value, m, mode, spec;
+      if (m = /.+\.([^.]+)$/.exec(val)) {
+        var info = CodeMirror.findModeByExtension(m[1]);
+        if (info) {
+          mode = info.mode;
+          spec = info.mime;
+        }
+      } else if (/\//.test(val)) {
+        var info = CodeMirror.findModeByMIME(val);
+        if (info) {
+          mode = info.mode;
+          spec = val;
+        }
+      } else {
+        mode = spec = val;
+      }
+      if (mode) {
+        editor.setOption("mode", spec);
+        CodeMirror.autoLoadMode(editor, mode);
+        document.getElementById("modeinfo").textContent = spec;
+      } else {
+        alert("Could not find a mode corresponding to " + val);
+      }
     }
-  } else {
-    mode = spec = val;
-  }
-  if (mode) {
-    editor.setOption("mode", spec);
-    CodeMirror.autoLoadMode(editor, mode);
-    document.getElementById("modeinfo").textContent = spec;
-  } else {
-    alert("Could not find a mode corresponding to " + val);
-  }
-}
-</script>
-  </article>
+  </script>
+</article>

src/assets/codemirror/codemirror-5.58.2/demo/marker.html

@@ -2,16 +2,24 @@
 
 <title>CodeMirror: Breakpoint Demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../mode/javascript/javascript.js"></script>
 <style>
-      .breakpoints {width: .8em;}
-      .breakpoint { color: #822; }
-      .CodeMirror {border: 1px solid #aaa;}
-    </style>
+  .breakpoints {
+    width: .8em;
+  }
+
+  .breakpoint {
+    color: #822;
+  }
+
+  .CodeMirror {
+    border: 1px solid #aaa;
+  }
+</style>
 <div id=nav>
   <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
 
@@ -26,27 +34,27 @@
 </div>
 
 <article>
-<h2>Breakpoint Demo</h2>
-<form><textarea id="code" name="code">
+  <h2>Breakpoint Demo</h2>
+  <form><textarea id="code" name="code">
 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
-  lineNumbers: true,
-  gutters: ["CodeMirror-linenumbers", "breakpoints"]
+    lineNumbers: true,
+    gutters: ["CodeMirror-linenumbers", "breakpoints"]
 });
 editor.on("gutterClick", function(cm, n) {
-  var info = cm.lineInfo(n);
-  cm.setGutterMarker(n, "breakpoints", info.gutterMarkers ? null : makeMarker());
+    var info = cm.lineInfo(n);
+    cm.setGutterMarker(n, "breakpoints", info.gutterMarkers ? null : makeMarker());
 });
 
 function makeMarker() {
-  var marker = document.createElement("div");
-  marker.style.color = "#822";
-  marker.innerHTML = "●";
-  return marker;
+    var marker = document.createElement("div");
+    marker.style.color = "#822";
+    marker.innerHTML = "●";
+    return marker;
 }
 </textarea></form>
 
-<p>Click the line-number gutter to add or remove 'breakpoints'.</p>
+  <p>Click the line-number gutter to add or remove 'breakpoints'.</p>
 
-    <script>eval(document.getElementById("code").value);</script>
+  <script>eval(document.getElementById("code").value);</script>
 
-  </article>
+</article>

src/assets/codemirror/codemirror-5.58.2/demo/markselection.html

@@ -2,18 +2,30 @@
 
 <title>CodeMirror: Selection Marking Demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../addon/search/searchcursor.js"></script>
 <script src="../addon/selection/mark-selection.js"></script>
 <style>
-      .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
-      .CodeMirror-selected  { background-color: blue !important; }
-      .CodeMirror-selectedtext { color: white; }
-      .styled-background { background-color: #ff7; }
-    </style>
+  .CodeMirror {
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+  }
+
+  .CodeMirror-selected {
+    background-color: blue !important;
+  }
+
+  .CodeMirror-selectedtext {
+    color: white;
+  }
+
+  .styled-background {
+    background-color: #ff7;
+  }
+</style>
 <div id=nav>
   <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
 
@@ -28,8 +40,8 @@
 </div>
 
 <article>
-<h2>Selection Marking Demo</h2>
-<form><textarea id="code" name="code">
+  <h2>Selection Marking Demo</h2>
+  <form><textarea id="code" name="code">
 Select something from here. You'll see that the selection's foreground
 color changes to white! Since, by default, CodeMirror only puts an
 independent "marker" layer behind the text, you'll need something like
@@ -39,14 +51,15 @@ Also notice that turning this addon on (with the default style) allows
 you to safely give text a background color without screwing up the
 visibility of the selection.</textarea></form>
 
-    <script>
-var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
-  lineNumbers: true,
-  styleSelectedText: true
-});
-editor.markText({line: 6, ch: 26}, {line: 6, ch: 42}, {className: "styled-background"});
-</script>
+  <script>
+    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+      lineNumbers: true,
+      styleSelectedText: true
+    });
+    editor.markText({line: 6, ch: 26}, {line: 6, ch: 42}, {className: "styled-background"});
+  </script>
 
-    <p>Simple addon to easily mark (and style) selected text. <a href="../doc/manual.html#addon_mark-selection">Docs</a>.</p>
+  <p>Simple addon to easily mark (and style) selected text. <a href="../doc/manual.html#addon_mark-selection">Docs</a>.
+  </p>
 
-  </article>
+</article>

src/assets/codemirror/codemirror-5.58.2/demo/matchhighlighter.html

@@ -2,24 +2,34 @@
 
 <title>CodeMirror: Match Highlighter Demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../addon/scroll/annotatescrollbar.js"></script>
 <script src="../addon/search/matchesonscrollbar.js"></script>
 <script src="../addon/search/searchcursor.js"></script>
 <script src="../addon/search/match-highlighter.js"></script>
 <style>
-      .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
-      .CodeMirror-focused .cm-matchhighlight {
-        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
-        background-position: bottom;
-        background-repeat: repeat-x;
-      }
-      .cm-matchhighlight {background-color: lightgreen}
-      .CodeMirror-selection-highlight-scrollbar {background-color: green}
-    </style>
+  .CodeMirror {
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+  }
+
+  .CodeMirror-focused .cm-matchhighlight {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
+    background-position: bottom;
+    background-repeat: repeat-x;
+  }
+
+  .cm-matchhighlight {
+    background-color: lightgreen
+  }
+
+  .CodeMirror-selection-highlight-scrollbar {
+    background-color: green
+  }
+</style>
 <div id=nav>
   <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
 
@@ -34,8 +44,8 @@
 </div>
 
 <article>
-<h2>Match Highlighter Demo</h2>
-<form><textarea id="code" name="code">Select this text: hardtospot
+  <h2>Match Highlighter Demo</h2>
+  <form><textarea id="code" name="code">Select this text: hardtospot
   And everywhere else in your code where hardtospot appears will
 automatically illuminate.  Give it a try!  No more hard to spot
 variables - stay in context of your code all the time.
@@ -89,15 +99,15 @@ ornare accumsan. In hac habitasse hardtospot platea dictumst.
 
 </textarea></form>
 
-    <script>
-var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
-  lineNumbers: true,
-  // To highlight on scrollbars as well, pass annotateScrollbar in options
-  // as below.
-  highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: true}
-});
-</script>
+  <script>
+    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+      lineNumbers: true,
+      // To highlight on scrollbars as well, pass annotateScrollbar in options
+      // as below.
+      highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: true}
+    });
+  </script>
 
-    <p>Search and highlight occurences of the selected text.</p>
+  <p>Search and highlight occurences of the selected text.</p>
 
-  </article>
+</article>

src/assets/codemirror/codemirror-5.58.2/demo/matchtags.html

@@ -2,16 +2,19 @@
 
 <title>CodeMirror: Tag Matcher Demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../addon/fold/xml-fold.js"></script>
 <script src="../addon/edit/matchtags.js"></script>
 <script src="../mode/xml/xml.js"></script>
 <style>
-      .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
-    </style>
+  .CodeMirror {
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+  }
+</style>
 <div id=nav>
   <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
 
@@ -26,23 +29,23 @@
 </div>
 
 <article>
-<h2>Tag Matcher Demo</h2>
+  <h2>Tag Matcher Demo</h2>
 
 
-    <div id="editor"></div>
+  <div id="editor"></div>
 
-    <script>
-window.onload = function() {
-  editor = CodeMirror(document.getElementById("editor"), {
-    value: "<html>\n  " + document.documentElement.innerHTML + "\n</html>",
-    mode: "text/html",
-    matchTags: {bothTags: true},
-    extraKeys: {"Ctrl-J": "toMatchingTag"}
-  });
-};
-    </script>
+  <script>
+    window.onload = function () {
+      editor = CodeMirror(document.getElementById("editor"), {
+        value: "<html>\n  " + document.documentElement.innerHTML + "\n</html>",
+        mode: "text/html",
+        matchTags: {bothTags: true},
+        extraKeys: {"Ctrl-J": "toMatchingTag"}
+      });
+    };
+  </script>
 
-    <p>Put the cursor on or inside a pair of tags to highlight them.
+  <p>Put the cursor on or inside a pair of tags to highlight them.
     Press Ctrl-J to jump to the tag that matches the one under the
     cursor.</p>
-  </article>
+</article>

src/assets/codemirror/codemirror-5.58.2/demo/merge.html

@@ -2,10 +2,10 @@
 
 <title>CodeMirror: merge view demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel=stylesheet href="../lib/codemirror.css">
-<link rel=stylesheet href="../addon/merge/merge.css">
+<link href="../lib/codemirror.css" rel=stylesheet>
+<link href="../addon/merge/merge.css" rel=stylesheet>
 <script src="../lib/codemirror.js"></script>
 <script src="../mode/xml/xml.js"></script>
 <script src="../mode/css/css.js"></script>
@@ -14,19 +14,28 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script>
 <script src="../addon/merge/merge.js"></script>
 <style>
-    .CodeMirror { line-height: 1.2; }
-    @media screen and (min-width: 1300px) {
-      article { max-width: 1000px; }
-      #nav { border-right: 499px solid transparent; }
+  .CodeMirror {
+    line-height: 1.2;
+  }
+
+  @media screen and (min-width: 1300px) {
+    article {
+      max-width: 1000px;
     }
-    span.clicky {
-      cursor: pointer;
-      background: #d70;
-      color: white;
-      padding: 0 3px;
-      border-radius: 3px;
+
+    #nav {
+      border-right: 499px solid transparent;
     }
-  </style>
+  }
+
+  span.clicky {
+    cursor: pointer;
+    background: #d70;
+    color: white;
+    padding: 0 3px;
+    border-radius: 3px;
+  }
+</style>
 <div id=nav>
   <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
 
@@ -41,83 +50,87 @@
 </div>
 
 <article>
-<h2>merge view demo</h2>
+  <h2>merge view demo</h2>
 
 
-<div id=view></div>
+  <div id=view></div>
 
-<p>The <a href="../doc/manual.html#addon_merge"><code>merge</code></a>
-addon provides an interface for displaying and merging diffs,
-either <span class=clicky onclick="panes = 2; initUI()">two-way</span>
-or <span class=clicky onclick="panes = 3; initUI()">three-way</span>.
-The left (or center) pane is editable, and the differences with the
-other pane(s) are <span class=clicky
-onclick="toggleDifferences()">optionally</span> shown live as you edit
-it. In the two-way configuration, there are also options to pad changed
-sections to <span class=clicky onclick="connect = connect ? null :
+  <p>The <a href="../doc/manual.html#addon_merge"><code>merge</code></a>
+    addon provides an interface for displaying and merging diffs,
+    either <span class=clicky onclick="panes = 2; initUI()">two-way</span>
+    or <span class=clicky onclick="panes = 3; initUI()">three-way</span>.
+    The left (or center) pane is editable, and the differences with the
+    other pane(s) are <span class=clicky
+                            onclick="toggleDifferences()">optionally</span> shown live as you edit
+    it. In the two-way configuration, there are also options to pad changed
+    sections to <span class=clicky onclick="connect = connect ? null :
 'align'; initUI()">align</span> them, and to <span class=clicky
-onclick="collapse = !collapse; initUI()">collapse</span> unchanged
-stretches of text.</p>
-
-<p>This addon depends on
-the <a href="https://code.google.com/p/google-diff-match-patch/">google-diff-match-patch</a>
-library to compute the diffs.</p>
-
-<script>
-var value, orig1, orig2, dv, panes = 2, highlight = true, connect = "align", collapse = false;
-function initUI() {
-  if (value == null) return;
-  var target = document.getElementById("view");
-  target.innerHTML = "";
-  dv = CodeMirror.MergeView(target, {
-    value: value,
-    origLeft: panes == 3 ? orig1 : null,
-    orig: orig2,
-    lineNumbers: true,
-    mode: "text/html",
-    highlightDifferences: highlight,
-    connect: connect,
-    collapseIdentical: collapse
-  });
-}
-
-function toggleDifferences() {
-  dv.setShowDifferences(highlight = !highlight);
-}
-
-window.onload = function() {
-  value = document.documentElement.innerHTML;
-  orig1 = "<!doctype html>\n\n" + value.replace(/\.\.\//g, "codemirror/").replace("yellow", "orange");
-  orig2 = value.replace(/\u003cscript/g, "\u003cscript type=text/javascript ")
-    .replace("white", "purple;\n      font: comic sans;\n      text-decoration: underline;\n      height: 15em");
-  initUI();
-  let d = document.createElement("div"); d.style.cssText = "width: 50px; margin: 7px; height: 14px"; dv.editor().addLineWidget(57, d)
-};
-
-function mergeViewHeight(mergeView) {
-  function editorHeight(editor) {
-    if (!editor) return 0;
-    return editor.getScrollInfo().height;
-  }
-  return Math.max(editorHeight(mergeView.leftOriginal()),
-                  editorHeight(mergeView.editor()),
-                  editorHeight(mergeView.rightOriginal()));
-}
-
-function resize(mergeView) {
-  var height = mergeViewHeight(mergeView);
-  for(;;) {
-    if (mergeView.leftOriginal())
-      mergeView.leftOriginal().setSize(null, height);
-    mergeView.editor().setSize(null, height);
-    if (mergeView.rightOriginal())
-      mergeView.rightOriginal().setSize(null, height);
-
-    var newHeight = mergeViewHeight(mergeView);
-    if (newHeight >= height) break;
-    else height = newHeight;
-  }
-  mergeView.wrap.style.height = height + "px";
-}
-</script>
+                                                   onclick="collapse = !collapse; initUI()">collapse</span> unchanged
+    stretches of text.</p>
+
+  <p>This addon depends on
+    the <a href="https://code.google.com/p/google-diff-match-patch/">google-diff-match-patch</a>
+    library to compute the diffs.</p>
+
+  <script>
+    var value, orig1, orig2, dv, panes = 2, highlight = true, connect = "align", collapse = false;
+
+    function initUI() {
+      if (value == null) return;
+      var target = document.getElementById("view");
+      target.innerHTML = "";
+      dv = CodeMirror.MergeView(target, {
+        value: value,
+        origLeft: panes == 3 ? orig1 : null,
+        orig: orig2,
+        lineNumbers: true,
+        mode: "text/html",
+        highlightDifferences: highlight,
+        connect: connect,
+        collapseIdentical: collapse
+      });
+    }
+
+    function toggleDifferences() {
+      dv.setShowDifferences(highlight = !highlight);
+    }
+
+    window.onload = function () {
+      value = document.documentElement.innerHTML;
+      orig1 = "<!doctype html>\n\n" + value.replace(/\.\.\//g, "codemirror/").replace("yellow", "orange");
+      orig2 = value.replace(/\u003cscript/g, "\u003cscript type=text/javascript ")
+        .replace("white", "purple;\n      font: comic sans;\n      text-decoration: underline;\n      height: 15em");
+      initUI();
+      let d = document.createElement("div");
+      d.style.cssText = "width: 50px; margin: 7px; height: 14px";
+      dv.editor().addLineWidget(57, d)
+    };
+
+    function mergeViewHeight(mergeView) {
+      function editorHeight(editor) {
+        if (!editor) return 0;
+        return editor.getScrollInfo().height;
+      }
+
+      return Math.max(editorHeight(mergeView.leftOriginal()),
+        editorHeight(mergeView.editor()),
+        editorHeight(mergeView.rightOriginal()));
+    }
+
+    function resize(mergeView) {
+      var height = mergeViewHeight(mergeView);
+      for (; ;) {
+        if (mergeView.leftOriginal())
+          mergeView.leftOriginal().setSize(null, height);
+        mergeView.editor().setSize(null, height);
+        if (mergeView.rightOriginal())
+          mergeView.rightOriginal().setSize(null, height);
+
+        var newHeight = mergeViewHeight(mergeView);
+        if (newHeight >= height) break;
+        else height = newHeight;
+      }
+      mergeView.wrap.style.height = height + "px";
+    }
+  </script>
 </article>

src/assets/codemirror/codemirror-5.58.2/demo/multiplex.html

@@ -2,16 +2,21 @@
 
 <title>CodeMirror: Multiplexing Parser Demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../addon/mode/multiplex.js"></script>
 <script src="../mode/xml/xml.js"></script>
 <style>
-      .CodeMirror {border: 1px solid black;}
-      .cm-delimit {color: #fa4;}
-    </style>
+  .CodeMirror {
+    border: 1px solid black;
+  }
+
+  .cm-delimit {
+    color: #fa4;
+  }
+</style>
 <div id=nav>
   <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
 
@@ -26,11 +31,11 @@
 </div>
 
 <article>
-<h2>Multiplexing Parser Demo</h2>
-<form><textarea id="code" name="code">
+  <h2>Multiplexing Parser Demo</h2>
+  <form><textarea id="code" name="code">
 <html>
   <body style="<<magic>>">
-    <h1><< this is not <html >></h1>
+    <h1><< this is not <html>></h1>
     <<
         multiline
         not html
@@ -41,35 +46,37 @@
 </html>
 </textarea></form>
 
-    <script>
-CodeMirror.defineMode("demo", function(config) {
-  return CodeMirror.multiplexingMode(
-    CodeMirror.getMode(config, "text/html"),
-    {open: "<<", close: ">>",
-     mode: CodeMirror.getMode(config, "text/plain"),
-     delimStyle: "delimit"}
-    // .. more multiplexed styles can follow here
-  );
-});
-var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
-  mode: "demo",
-  lineNumbers: true,
-  lineWrapping: true
-});
-</script>
+  <script>
+    CodeMirror.defineMode("demo", function (config) {
+      return CodeMirror.multiplexingMode(
+        CodeMirror.getMode(config, "text/html"),
+        {
+          open: "<<", close: ">>",
+          mode: CodeMirror.getMode(config, "text/plain"),
+          delimStyle: "delimit"
+        }
+        // .. more multiplexed styles can follow here
+      );
+    });
+    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+      mode: "demo",
+      lineNumbers: true,
+      lineWrapping: true
+    });
+  </script>
 
-    <p>Demonstration of a multiplexing mode, which, at certain
+  <p>Demonstration of a multiplexing mode, which, at certain
     boundary strings, switches to one or more inner modes. The out
     (HTML) mode does not get fed the content of the <code>&lt;&lt;
-    >></code> blocks. See
+      >></code> blocks. See
     the <a href="../doc/manual.html#addon_multiplex">manual</a> and
     the <a href="../addon/mode/multiplex.js">source</a> for more
     information.</p>
 
-    <p>
-      <strong>Parsing/Highlighting Tests:</strong>
-      <a href="../test/index.html#multiplexing_*">normal</a>,
-      <a href="../test/index.html#verbose,multiplexing_*">verbose</a>.
-    </p>
+  <p>
+    <strong>Parsing/Highlighting Tests:</strong>
+    <a href="../test/index.html#multiplexing_*">normal</a>,
+    <a href="../test/index.html#verbose,multiplexing_*">verbose</a>.
+  </p>
 
-  </article>
+</article>

src/assets/codemirror/codemirror-5.58.2/demo/mustache.html

@@ -2,15 +2,20 @@
 
 <title>CodeMirror: Overlay Parser Demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../addon/mode/overlay.js"></script>
 <script src="../mode/xml/xml.js"></script>
 <style>
-      .CodeMirror {border: 1px solid black;}
-      .cm-mustache {color: #0ca;}
+  .CodeMirror {
+    border: 1px solid black;
+  }
+
+  .cm-mustache {
+    color: #0ca;
+  }
 </style>
 <div id=nav>
   <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
@@ -26,44 +31,45 @@
 </div>
 
 <article>
-<h2>Overlay Parser Demo</h2>
-<form><textarea id="code" name="code">
+  <h2>Overlay Parser Demo</h2>
+  <form><textarea id="code" name="code">
 <html>
   <body>
     <h1>{{title}}</h1>
     <p>These are links to {{things}}:</p>
     <ul>{{#links}}
       <li><a href="{{url}}">{{text}}</a></li>
-    {{/links}}</ul>
+      {{/links}}</ul>
   </body>
 </html>
 </textarea></form>
 
-    <script>
-CodeMirror.defineMode("mustache", function(config, parserConfig) {
-  var mustacheOverlay = {
-    token: function(stream, state) {
-      var ch;
-      if (stream.match("{{")) {
-        while ((ch = stream.next()) != null)
-          if (ch == "}" && stream.next() == "}") {
-            stream.eat("}");
-            return "mustache";
+  <script>
+    CodeMirror.defineMode("mustache", function (config, parserConfig) {
+      var mustacheOverlay = {
+        token: function (stream, state) {
+          var ch;
+          if (stream.match("{{")) {
+            while ((ch = stream.next()) != null)
+              if (ch == "}" && stream.next() == "}") {
+                stream.eat("}");
+                return "mustache";
+              }
+          }
+          while (stream.next() != null && !stream.match("{{", false)) {
           }
-      }
-      while (stream.next() != null && !stream.match("{{", false)) {}
-      return null;
-    }
-  };
-  return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "text/html"), mustacheOverlay);
-});
-var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "mustache"});
-</script>
+          return null;
+        }
+      };
+      return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "text/html"), mustacheOverlay);
+    });
+    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "mustache"});
+  </script>
 
-    <p>Demonstration of a mode that parses HTML, highlighting
+  <p>Demonstration of a mode that parses HTML, highlighting
     the <a href="http://mustache.github.com/">Mustache</a> templating
     directives inside of it by using the code
     in <a href="../addon/mode/overlay.js"><code>overlay.js</code></a>. View
     source to see the 15 lines of code needed to accomplish this.</p>
 
-  </article>
+</article>

src/assets/codemirror/codemirror-5.58.2/demo/panel.html

@@ -2,9 +2,9 @@
 
 <title>CodeMirror: Panel Demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../mode/javascript/javascript.js"></script>
 <script src="../mode/xml/xml.js"></script>
@@ -14,26 +14,32 @@
   .border {
     border: 1px solid #f7f7f7;
   }
+
   .add-panel {
     background: orange;
     padding: 3px 6px;
-    color: white !important; 
+    color: white !important;
     border-radius: 3px;
   }
+
   .add-panel, .remove-panel {
     cursor: pointer;
   }
+
   .remove-panel {
     float: right;
   }
+
   .panel {
     background: #f7f7f7;
     padding: 3px 7px;
     font-size: 0.85em;
   }
+
   .panel.top, .panel.after-top {
     border-bottom: 1px solid #ddd;
   }
+
   .panel.bottom, .panel.before-bottom {
     border-top: 1px solid #ddd;
   }
@@ -54,84 +60,85 @@
 
 <article>
 
-<h2>Panel Demo</h2>
+  <h2>Panel Demo</h2>
 
-<div class="border">
+  <div class="border">
     <textarea id="code" name="code"></textarea>
-</div>
-
-<p>
-  The <a href="../doc/manual.html#addon_panel"><code>panel</code></a>
-  addon allows you to display panels above or below an editor.
-  <br>
-  Click the links below to add panels at the given position:
-</p>
-
-<div id="demo">
-<p>
-  <a class="add-panel" onclick="addPanel('top')">top</a>
-  <a class="add-panel" onclick="addPanel('after-top')">after-top</a>
-  <a class="add-panel" onclick="addPanel('before-bottom')">before-bottom</a>
-  <a class="add-panel" onclick="addPanel('bottom')">bottom</a>
-</p>
-<p>
-  You can also replace an existing panel:
-</p>
-<form onsubmit="return replacePanel(this);" name="replace_panel">
-  <input type="submit" value="Replace panel n°" />
-  <input type="number" name="panel_id" min="1" value="1" />
-</form>
-
-<script>
-var textarea = document.getElementById("code");
-var demo = document.getElementById("demo");
-var numPanels = 0;
-var panels = {};
-var editor;
-
-textarea.value = demo.innerHTML.trim();
-editor = CodeMirror.fromTextArea(textarea, {
-  lineNumbers: true,
-  mode: "htmlmixed"
-});
-
-function makePanel(where) {
-  var node = document.createElement("div");
-  var id = ++numPanels;
-  var widget, close, label;
-
-  node.id = "panel-" + id;
-  node.className = "panel " + where;
-  close = node.appendChild(document.createElement("a"));
-  close.setAttribute("title", "Remove me!");
-  close.setAttribute("class", "remove-panel");
-  close.textContent = "✖";
-  CodeMirror.on(close, "mousedown", function(e) {
-    e.preventDefault()
-    panels[node.id].clear();
-  });
-  label = node.appendChild(document.createElement("span"));
-  label.textContent = "I'm panel n°" + id;
-  return node;
-}
-function addPanel(where) {
-  var node = makePanel(where);
-  panels[node.id] = editor.addPanel(node, {position: where, stable: true});
-}
-
-addPanel("top");
-addPanel("bottom");
-
-function replacePanel(form) {
-  var id = form.elements.panel_id.value;
-  var panel = panels["panel-" + id];
-  var node = makePanel("");
-
-  panels[node.id] = editor.addPanel(node, {replace: panel, position: "after-top", stable: true});
-  return false;
-}
-</script>
-
-</div>
+  </div>
+
+  <p>
+    The <a href="../doc/manual.html#addon_panel"><code>panel</code></a>
+    addon allows you to display panels above or below an editor.
+    <br>
+    Click the links below to add panels at the given position:
+  </p>
+
+  <div id="demo">
+    <p>
+      <a class="add-panel" onclick="addPanel('top')">top</a>
+      <a class="add-panel" onclick="addPanel('after-top')">after-top</a>
+      <a class="add-panel" onclick="addPanel('before-bottom')">before-bottom</a>
+      <a class="add-panel" onclick="addPanel('bottom')">bottom</a>
+    </p>
+    <p>
+      You can also replace an existing panel:
+    </p>
+    <form name="replace_panel" onsubmit="return replacePanel(this);">
+      <input type="submit" value="Replace panel n°"/>
+      <input min="1" name="panel_id" type="number" value="1"/>
+    </form>
+
+    <script>
+      var textarea = document.getElementById("code");
+      var demo = document.getElementById("demo");
+      var numPanels = 0;
+      var panels = {};
+      var editor;
+
+      textarea.value = demo.innerHTML.trim();
+      editor = CodeMirror.fromTextArea(textarea, {
+        lineNumbers: true,
+        mode: "htmlmixed"
+      });
+
+      function makePanel(where) {
+        var node = document.createElement("div");
+        var id = ++numPanels;
+        var widget, close, label;
+
+        node.id = "panel-" + id;
+        node.className = "panel " + where;
+        close = node.appendChild(document.createElement("a"));
+        close.setAttribute("title", "Remove me!");
+        close.setAttribute("class", "remove-panel");
+        close.textContent = "✖";
+        CodeMirror.on(close, "mousedown", function (e) {
+          e.preventDefault()
+          panels[node.id].clear();
+        });
+        label = node.appendChild(document.createElement("span"));
+        label.textContent = "I'm panel n°" + id;
+        return node;
+      }
+
+      function addPanel(where) {
+        var node = makePanel(where);
+        panels[node.id] = editor.addPanel(node, {position: where, stable: true});
+      }
+
+      addPanel("top");
+      addPanel("bottom");
+
+      function replacePanel(form) {
+        var id = form.elements.panel_id.value;
+        var panel = panels["panel-" + id];
+        var node = makePanel("");
+
+        panels[node.id] = editor.addPanel(node, {replace: panel, position: "after-top", stable: true});
+        return false;
+      }
+    </script>
+
+  </div>
 
 </article>

src/assets/codemirror/codemirror-5.58.2/demo/placeholder.html

@@ -2,17 +2,28 @@
 
 <title>CodeMirror: Placeholder demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../addon/display/placeholder.js"></script>
 <style>
-      .CodeMirror { border: 1px solid silver; }
-      .CodeMirror-empty { outline: 1px solid #c22; }
-      .CodeMirror-empty.CodeMirror-focused { outline: none; }
-      .CodeMirror pre.CodeMirror-placeholder { color: #999; }
-    </style>
+  .CodeMirror {
+    border: 1px solid silver;
+  }
+
+  .CodeMirror-empty {
+    outline: 1px solid #c22;
+  }
+
+  .CodeMirror-empty.CodeMirror-focused {
+    outline: none;
+  }
+
+  .CodeMirror pre.CodeMirror-placeholder {
+    color: #999;
+  }
+</style>
 <div id=nav>
   <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
 
@@ -27,19 +38,19 @@
 </div>
 
 <article>
-<h2>Placeholder demo</h2>
-<form><textarea id="code" name="code" placeholder="Code goes here..."></textarea></form>
+  <h2>Placeholder demo</h2>
+  <form><textarea id="code" name="code" placeholder="Code goes here..."></textarea></form>
 
-    <p>The <a href="../doc/manual.html#addon_placeholder">placeholder</a>
+  <p>The <a href="../doc/manual.html#addon_placeholder">placeholder</a>
     plug-in adds an option <code>placeholder</code> that can be set to
     make text appear in the editor when it is empty and not focused.
     If the source textarea has a <code>placeholder</code> attribute,
     it will automatically be inherited.</p>
 
-    <script>
-      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
-        lineNumbers: true
-      });
-    </script>
+  <script>
+    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+      lineNumbers: true
+    });
+  </script>
 
-  </article>
+</article>

src/assets/codemirror/codemirror-5.58.2/demo/preview.html

@@ -2,28 +2,29 @@
 
 <title>CodeMirror: HTML5 preview</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel=stylesheet href=../lib/codemirror.css>
+<link href=../lib/codemirror.css rel=stylesheet>
 <script src=../lib/codemirror.js></script>
 <script src=../mode/xml/xml.js></script>
 <script src=../mode/javascript/javascript.js></script>
 <script src=../mode/css/css.js></script>
 <script src=../mode/htmlmixed/htmlmixed.js></script>
 <style type=text/css>
-      .CodeMirror {
-        float: left;
-        width: 50%;
-        border: 1px solid black;
-      }
-      iframe {
-        width: 49%;
-        float: left;
-        height: 300px;
-        border: 1px solid black;
-        border-left: 0px;
-      }
-    </style>
+  .CodeMirror {
+    float: left;
+    width: 50%;
+    border: 1px solid black;
+  }
+
+  iframe {
+    width: 49%;
+    float: left;
+    height: 300px;
+    border: 1px solid black;
+    border-left: 0px;
+  }
+</style>
 <div id=nav>
   <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
 
@@ -38,19 +39,21 @@
 </div>
 
 <article>
-<h2>HTML5 preview</h2>
+  <h2>HTML5 preview</h2>
 
-    <textarea id=code name=code>
+  <textarea id=code name=code>
 <!doctype html>
 <html>
   <head>
     <meta charset=utf-8>
     <title>HTML5 canvas demo</title>
-    <style>p {font-family: monospace;}</style>
+    <style>p {
+      font-family: monospace;
+    }</style>
   </head>
   <body>
     <p>Canvas pane goes here:</p>
-    <canvas id=pane width=300 height=200></canvas>
+    <canvas height=200 id=pane width=300></canvas>
     <script>
       var canvas = document.getElementById('pane');
       var context = canvas.getContext('2d');
@@ -63,25 +66,26 @@
     </script>
   </body>
 </html></textarea>
-    <iframe id=preview></iframe>
-    <script>
-      var delay;
-      // Initialize CodeMirror editor with a nice html5 canvas demo.
-      var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
-        mode: 'text/html'
-      });
-      editor.on("change", function() {
-        clearTimeout(delay);
-        delay = setTimeout(updatePreview, 300);
-      });
-      
-      function updatePreview() {
-        var previewFrame = document.getElementById('preview');
-        var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
-        preview.open();
-        preview.write(editor.getValue());
-        preview.close();
-      }
-      setTimeout(updatePreview, 300);
-    </script>
-  </article>
+  <iframe id=preview></iframe>
+  <script>
+    var delay;
+    // Initialize CodeMirror editor with a nice html5 canvas demo.
+    var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
+      mode: 'text/html'
+    });
+    editor.on("change", function () {
+      clearTimeout(delay);
+      delay = setTimeout(updatePreview, 300);
+    });
+
+    function updatePreview() {
+      var previewFrame = document.getElementById('preview');
+      var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;
+      preview.open();
+      preview.write(editor.getValue());
+      preview.close();
+    }
+
+    setTimeout(updatePreview, 300);
+  </script>
+</article>

src/assets/codemirror/codemirror-5.58.2/demo/requirejs.html

@@ -3,68 +3,71 @@
 <head>
   <title>CodeMirror: HTML completion demo</title>
   <meta charset="utf-8"/>
-  <link rel=stylesheet href="../doc/docs.css">
+  <link href="../doc/docs.css" rel=stylesheet>
 
-  <link rel="stylesheet" href="../lib/codemirror.css">
-  <link rel="stylesheet" href="../addon/hint/show-hint.css">
+  <link href="../lib/codemirror.css" rel="stylesheet">
+  <link href="../addon/hint/show-hint.css" rel="stylesheet">
   <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"></script>
   <style>
-    .CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;}
+    .CodeMirror {
+      border-top: 1px solid #888;
+      border-bottom: 1px solid #888;
+    }
   </style>
 </head>
 
 <body>
-  <div id=nav>
-    <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
-    <ul>
-      <li><a href="../index.html">Home</a>
-      <li><a href="../doc/manual.html">Manual</a>
-      <li><a href="https://github.com/codemirror/codemirror">Code</a>
-    </ul>
-    <ul>
-      <li><a class=active href="#">HTML completion</a>
-    </ul>
-  </div>
+<div id=nav>
+  <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
+  <ul>
+    <li><a href="../index.html">Home</a>
+    <li><a href="../doc/manual.html">Manual</a>
+    <li><a href="https://github.com/codemirror/codemirror">Code</a>
+  </ul>
+  <ul>
+    <li><a class=active href="#">HTML completion</a>
+  </ul>
+</div>
 
-  <article>
-    <h2>RequireJS module loading demo</h2>
+<article>
+  <h2>RequireJS module loading demo</h2>
 
-    <p>This demo does the same thing as
+  <p>This demo does the same thing as
     the <a href="html5complete.html">HTML5 completion demo</a>, but
     loads its dependencies
     with <a href="http://requirejs.org/">Require.js</a>, rather than
     explicitly. Press <strong>ctrl-space</strong> to activate
     completion.</p>
 
-    <div id="code"></div>
+  <div id="code"></div>
 
-    <button id="markdown">Dynamically load Markdown mode</button>
+  <button id="markdown">Dynamically load Markdown mode</button>
 
-    <script>
-      require.config({
-        packages: [{
-          name: "codemirror",
-          location: "../",
-          main: "lib/codemirror"
-        }]
+  <script>
+    require.config({
+      packages: [{
+        name: "codemirror",
+        location: "../",
+        main: "lib/codemirror"
+      }]
+    });
+    require(["codemirror", "codemirror/mode/htmlmixed/htmlmixed",
+      "codemirror/addon/hint/show-hint", "codemirror/addon/hint/html-hint",
+      "codemirror/addon/mode/loadmode"], function (CodeMirror) {
+      editor = CodeMirror(document.getElementById("code"), {
+        mode: "text/html",
+        extraKeys: {"Ctrl-Space": "autocomplete"},
+        value: document.documentElement.innerHTML
       });
-      require(["codemirror", "codemirror/mode/htmlmixed/htmlmixed",
-               "codemirror/addon/hint/show-hint", "codemirror/addon/hint/html-hint",
-               "codemirror/addon/mode/loadmode"], function(CodeMirror) {
-        editor = CodeMirror(document.getElementById("code"), {
-          mode: "text/html",
-          extraKeys: {"Ctrl-Space": "autocomplete"},
-          value: document.documentElement.innerHTML
-        });
 
-        CodeMirror.modeURL = "codemirror/mode/%N/%N";
-        document.getElementById("markdown").addEventListener("click", function() {
-          CodeMirror.requireMode("markdown", function() {
-            editor.replaceRange("This is **Markdown**.\n\n", {line: 0, ch: 0});
-            editor.setOption("mode", "markdown");
-          });
+      CodeMirror.modeURL = "codemirror/mode/%N/%N";
+      document.getElementById("markdown").addEventListener("click", function () {
+        CodeMirror.requireMode("markdown", function () {
+          editor.replaceRange("This is **Markdown**.\n\n", {line: 0, ch: 0});
+          editor.setOption("mode", "markdown");
         });
       });
-    </script>
-  </article>
+    });
+  </script>
+</article>
 </body>

src/assets/codemirror/codemirror-5.58.2/demo/resize.html

@@ -2,17 +2,17 @@
 
 <title>CodeMirror: Autoresize Demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../mode/css/css.js"></script>
 <style>
-      .CodeMirror {
-        border: 1px solid #eee;
-        height: auto;
-      }
-    </style>
+  .CodeMirror {
+    border: 1px solid #eee;
+    height: auto;
+  }
+</style>
 <div id=nav>
   <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
 
@@ -27,25 +27,25 @@
 </div>
 
 <article>
-<h2>Autoresize Demo</h2>
-<form><textarea id="code" name="code">
+  <h2>Autoresize Demo</h2>
+  <form><textarea id="code" name="code">
 .CodeMirror {
-  border: 1px solid #eee;
-  height: auto;
+    border: 1px solid #eee;
+    height: auto;
 }
 </textarea></form>
 
-<p>By setting an editor's <code>height</code> style
-to <code>auto</code> and giving
-the <a href="../doc/manual.html#option_viewportMargin"><code>viewportMargin</code></a>
-a value of <code>Infinity</code>, CodeMirror can be made to
-automatically resize to fit its content.</p>
+  <p>By setting an editor's <code>height</code> style
+    to <code>auto</code> and giving
+    the <a href="../doc/manual.html#option_viewportMargin"><code>viewportMargin</code></a>
+    a value of <code>Infinity</code>, CodeMirror can be made to
+    automatically resize to fit its content.</p>
 
-    <script>
-      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
-        lineNumbers: true,
-        viewportMargin: Infinity
-      });
-    </script>
+  <script>
+    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+      lineNumbers: true,
+      viewportMargin: Infinity
+    });
+  </script>
 
-  </article>
+</article>

src/assets/codemirror/codemirror-5.58.2/demo/rulers.html

@@ -2,13 +2,16 @@
 
 <title>CodeMirror: Ruler Demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../addon/display/rulers.js"></script>
 <style>
-  .CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;}
+  .CodeMirror {
+    border-top: 1px solid #888;
+    border-bottom: 1px solid #888;
+  }
 </style>
 <div id=nav>
   <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
@@ -24,26 +27,26 @@
 </div>
 
 <article>
-<h2>Ruler Demo</h2>
+  <h2>Ruler Demo</h2>
 
-<script>
-  var nums = "0123456789", space = "          ";
-  var colors = ["#fcc", "#f5f577", "#cfc", "#aff", "#ccf", "#fcf"];
-  var rulers = [], value = "";
-  for (var i = 1; i <= 6; i++) {
-    rulers.push({color: colors[i], column: i * 10, lineStyle: "dashed"});
-    for (var j = 1; j < i; j++) value += space;
-    value += nums + "\n";
-  }
-  var editor = CodeMirror(document.body.lastChild, {
-    rulers: rulers,
-    value: value + value + value,
-    lineNumbers: true
-});
-</script>
+  <script>
+    var nums = "0123456789", space = "          ";
+    var colors = ["#fcc", "#f5f577", "#cfc", "#aff", "#ccf", "#fcf"];
+    var rulers = [], value = "";
+    for (var i = 1; i <= 6; i++) {
+      rulers.push({color: colors[i], column: i * 10, lineStyle: "dashed"});
+      for (var j = 1; j < i; j++) value += space;
+      value += nums + "\n";
+    }
+    var editor = CodeMirror(document.body.lastChild, {
+      rulers: rulers,
+      value: value + value + value,
+      lineNumbers: true
+    });
+  </script>
 
-<p>Demonstration of
-the <a href="../doc/manual.html#addon_rulers">rulers</a> addon, which
-displays vertical lines at given column offsets.</p>
+  <p>Demonstration of
+    the <a href="../doc/manual.html#addon_rulers">rulers</a> addon, which
+    displays vertical lines at given column offsets.</p>
 
 </article>

src/assets/codemirror/codemirror-5.58.2/demo/runmode-standalone.html

@@ -2,9 +2,9 @@
 
 <title>CodeMirror: Mode Runner Demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
 <script src="../addon/runmode/runmode-standalone.js"></script>
 <script src="../mode/xml/xml.js"></script>
 <div id=nav>
@@ -21,41 +21,43 @@
 </div>
 
 <article>
-<h2>Mode Runner Demo</h2>
+  <h2>Mode Runner Demo</h2>
 
 
-    <textarea id="code" style="width: 90%; height: 7em; border: 1px solid black; padding: .2em .4em;">
+  <textarea id="code" style="width: 90%; height: 7em; border: 1px solid black; padding: .2em .4em;">
 <foobar>
   <blah>Enter your xml here and press the button below to display
     it as highlighted by the CodeMirror XML mode</blah>
-  <tag2 foo="2" bar="&amp;quot;bar&amp;quot;"/>
+  <tag2 bar="&amp;quot;bar&amp;quot;" foo="2"/>
 </foobar></textarea><br>
-    <button onclick="doHighlight();">Highlight!</button>
-    <pre id="output" class="cm-s-default"></pre>
+  <button onclick="doHighlight();">Highlight!</button>
+  <pre class="cm-s-default" id="output"></pre>
 
-    <script>
-function doHighlight() {
-  CodeMirror.runMode(document.getElementById("code").value, "application/xml",
-                     document.getElementById("output"));
-}
-</script>
+  <script>
+    function doHighlight() {
+      CodeMirror.runMode(document.getElementById("code").value, "application/xml",
+        document.getElementById("output"));
+    }
+  </script>
 
-    <p>Running a CodeMirror mode outside of the editor.
+  <p>Running a CodeMirror mode outside of the editor.
     The <code>CodeMirror.runMode</code> function, defined
-    in <code><a href="../addon/runmode/runmode.js">addon/runmode/runmode.js</a></code> takes the following arguments:</p>
-
-    <dl>
-      <dt><code>text (string)</code></dt>
-      <dd>The document to run through the highlighter.</dd>
-      <dt><code>mode (<a href="../doc/manual.html#option_mode">mode spec</a>)</code></dt>
-      <dd>The mode to use (must be loaded as normal).</dd>
-      <dt><code>output (function or DOM node)</code></dt>
-      <dd>If this is a function, it will be called for each token with
+    in <code><a href="../addon/runmode/runmode.js">addon/runmode/runmode.js</a></code> takes the following arguments:
+  </p>
+
+  <dl>
+    <dt><code>text (string)</code></dt>
+    <dd>The document to run through the highlighter.</dd>
+    <dt><code>mode (<a href="../doc/manual.html#option_mode">mode spec</a>)</code></dt>
+    <dd>The mode to use (must be loaded as normal).</dd>
+    <dt><code>output (function or DOM node)</code></dt>
+    <dd>If this is a function, it will be called for each token with
       two arguments, the token's text and the token's style class (may
       be <code>null</code> for unstyled tokens). If it is a DOM node,
       the tokens will be converted to <code>span</code> elements as in
       an editor, and inserted into the node
-      (through <code>innerHTML</code>).</dd>
-    </dl>
+      (through <code>innerHTML</code>).
+    </dd>
+  </dl>
 
-  </article>
+</article>

src/assets/codemirror/codemirror-5.58.2/demo/runmode.html

@@ -2,9 +2,9 @@
 
 <title>CodeMirror: Mode Runner Demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../addon/runmode/runmode.js"></script>
 <script src="../mode/xml/xml.js"></script>
@@ -22,41 +22,43 @@
 </div>
 
 <article>
-<h2>Mode Runner Demo</h2>
+  <h2>Mode Runner Demo</h2>
 
 
-    <textarea id="code" style="width: 90%; height: 7em; border: 1px solid black; padding: .2em .4em;">
+  <textarea id="code" style="width: 90%; height: 7em; border: 1px solid black; padding: .2em .4em;">
 <foobar>
   <blah>Enter your xml here and press the button below to display
     it as highlighted by the CodeMirror XML mode</blah>
-  <tag2 foo="2" bar="&amp;quot;bar&amp;quot;"/>
+  <tag2 bar="&amp;quot;bar&amp;quot;" foo="2"/>
 </foobar></textarea><br>
-    <button onclick="doHighlight();">Highlight!</button>
-    <pre id="output" class="cm-s-default"></pre>
+  <button onclick="doHighlight();">Highlight!</button>
+  <pre class="cm-s-default" id="output"></pre>
 
-    <script>
-function doHighlight() {
-  CodeMirror.runMode(document.getElementById("code").value, "application/xml",
-                     document.getElementById("output"));
-}
-</script>
+  <script>
+    function doHighlight() {
+      CodeMirror.runMode(document.getElementById("code").value, "application/xml",
+        document.getElementById("output"));
+    }
+  </script>
 
-    <p>Running a CodeMirror mode outside of the editor.
+  <p>Running a CodeMirror mode outside of the editor.
     The <code>CodeMirror.runMode</code> function, defined
-    in <code><a href="../addon/runmode/runmode.js">addon/runmode/runmode.js</a></code> takes the following arguments:</p>
-
-    <dl>
-      <dt><code>text (string)</code></dt>
-      <dd>The document to run through the highlighter.</dd>
-      <dt><code>mode (<a href="../doc/manual.html#option_mode">mode spec</a>)</code></dt>
-      <dd>The mode to use (must be loaded as normal).</dd>
-      <dt><code>output (function or DOM node)</code></dt>
-      <dd>If this is a function, it will be called for each token with
+    in <code><a href="../addon/runmode/runmode.js">addon/runmode/runmode.js</a></code> takes the following arguments:
+  </p>
+
+  <dl>
+    <dt><code>text (string)</code></dt>
+    <dd>The document to run through the highlighter.</dd>
+    <dt><code>mode (<a href="../doc/manual.html#option_mode">mode spec</a>)</code></dt>
+    <dd>The mode to use (must be loaded as normal).</dd>
+    <dt><code>output (function or DOM node)</code></dt>
+    <dd>If this is a function, it will be called for each token with
       two arguments, the token's text and the token's style class (may
       be <code>null</code> for unstyled tokens). If it is a DOM node,
       the tokens will be converted to <code>span</code> elements as in
       an editor, and inserted into the node
-      (through <code>innerHTML</code>).</dd>
-    </dl>
+      (through <code>innerHTML</code>).
+    </dd>
+  </dl>
 
-  </article>
+</article>

src/assets/codemirror/codemirror-5.58.2/demo/search.html

@@ -2,11 +2,11 @@
 
 <title>CodeMirror: Search/Replace Demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
-<link rel="stylesheet" href="../addon/dialog/dialog.css">
-<link rel="stylesheet" href="../addon/search/matchesonscrollbar.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
+<link href="../addon/dialog/dialog.css" rel="stylesheet">
+<link href="../addon/search/matchesonscrollbar.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../mode/xml/xml.js"></script>
 <script src="../addon/dialog/dialog.js"></script>
@@ -16,9 +16,16 @@
 <script src="../addon/search/matchesonscrollbar.js"></script>
 <script src="../addon/search/jump-to-line.js"></script>
 <style>
-      .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
-      dt {font-family: monospace; color: #666;}
-    </style>
+  .CodeMirror {
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+  }
+
+  dt {
+    font-family: monospace;
+    color: #666;
+  }
+</style>
 <div id=nav>
   <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
 
@@ -33,8 +40,8 @@
 </div>
 
 <article>
-<h2>Search/Replace Demo</h2>
-<form><textarea id="code" name="code">
+  <h2>Search/Replace Demo</h2>
+  <form><textarea id="code" name="code">
 <dl>
   <dt id="option_indentWithTabs"><code><strong>indentWithTabs</strong>: boolean</code></dt>
   <dd>Whether, when indenting, the first N*<code>tabSize</code>
@@ -69,31 +76,39 @@
 </dl>
 </textarea></form>
 
-    <script>
-var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
-  mode: "text/html",
-  lineNumbers: true,
-  extraKeys: {"Alt-F": "findPersistent"}
-});
-</script>
+  <script>
+    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+      mode: "text/html",
+      lineNumbers: true,
+      extraKeys: {"Alt-F": "findPersistent"}
+    });
+  </script>
 
-    <p>Demonstration of primitive search/replace functionality. The
+  <p>Demonstration of primitive search/replace functionality. The
     keybindings (which can be configured with custom keymaps) are:</p>
-    <dl>
-      <dt>Ctrl-F / Cmd-F</dt><dd>Start searching</dd>
-      <dt>Ctrl-G / Cmd-G</dt><dd>Find next</dd>
-      <dt>Shift-Ctrl-G / Shift-Cmd-G</dt><dd>Find previous</dd>
-      <dt>Shift-Ctrl-F / Cmd-Option-F</dt><dd>Replace</dd>
-      <dt>Shift-Ctrl-R / Shift-Cmd-Option-F</dt><dd>Replace all</dd>
-      <dt>Alt-F</dt><dd>Persistent search (dialog doesn't autoclose,
-      enter to find next, Shift-Enter to find previous)</dd>
-      <dt>Alt-G</dt><dd>Jump to line</dd>
-    </dl>
-    <p>Searching is enabled by
+  <dl>
+    <dt>Ctrl-F / Cmd-F</dt>
+    <dd>Start searching</dd>
+    <dt>Ctrl-G / Cmd-G</dt>
+    <dd>Find next</dd>
+    <dt>Shift-Ctrl-G / Shift-Cmd-G</dt>
+    <dd>Find previous</dd>
+    <dt>Shift-Ctrl-F / Cmd-Option-F</dt>
+    <dd>Replace</dd>
+    <dt>Shift-Ctrl-R / Shift-Cmd-Option-F</dt>
+    <dd>Replace all</dd>
+    <dt>Alt-F</dt>
+    <dd>Persistent search (dialog doesn't autoclose,
+      enter to find next, Shift-Enter to find previous)
+    </dd>
+    <dt>Alt-G</dt>
+    <dd>Jump to line</dd>
+  </dl>
+  <p>Searching is enabled by
     including <a href="../addon/search/search.js">addon/search/search.js</a>
     and <a href="../addon/search/searchcursor.js">addon/search/searchcursor.js</a>.
     Jump to line - including <a href="../addon/search/jump-to-line.js">addon/search/jump-to-line.js</a>.</p>
-    <p>For good-looking input dialogs, you also want to include
+  <p>For good-looking input dialogs, you also want to include
     <a href="../addon/dialog/dialog.js">addon/dialog/dialog.js</a>
     and <a href="../addon/dialog/dialog.css">addon/dialog/dialog.css</a>.</p>
-  </article>
+</article>

src/assets/codemirror/codemirror-5.58.2/demo/simplescrollbars.html

@@ -2,10 +2,10 @@
 
 <title>CodeMirror: Simple Scrollbar Demo</title>
 <meta charset="utf-8"/>
-<link rel=stylesheet href="../doc/docs.css">
+<link href="../doc/docs.css" rel=stylesheet>
 
-<link rel="stylesheet" href="../lib/codemirror.css">
-<link rel="stylesheet" href="../addon/scroll/simplescrollbars.css">
+<link href="../lib/codemirror.css" rel="stylesheet">
+<link href="../addon/scroll/simplescrollbars.css" rel="stylesheet">
 <script src="../lib/codemirror.js"></script>
 <script src="../mode/markdown/markdown.js"></script>
 <script src="../mode/xml/xml.js"></script>
@@ -25,8 +25,8 @@
 </div>
 
 <article>
-<h2>Simple Scrollbar Demo</h2>
-<form><textarea id="code" name="code"># Custom Scrollbars
+  <h2>Simple Scrollbar Demo</h2>
+  <form><textarea id="code" name="code"># Custom Scrollbars
 
 This is a piece of text that creates scrollbars
 
@@ -67,11 +67,14 @@ maxime sem dapibus et eget, mi enim dignissim nec pretium, augue vehicula, volut
 lobortis viverra, cum in sed, vivamus tellus. Libero at malesuada est vivamus leo tortor.
 </textarea></form>
 
-<p>The <a href="../doc/manual.html#addon_simplescrollbars"><code>simplescrollbars</code></a> addon defines two
-styles of non-native scrollbars: <a href="javascript:editor.setOption('scrollbarStyle', 'simple')"><code>"simple"</code></a> and <a href="javascript:editor.setOption('scrollbarStyle', 'overlay')"><code>"overlay"</code></a> (click to try), which can be passed to
-the <a href="../doc/manual.html#option_scrollbarStyle"><code>scrollbarStyle</code></a> option. These implement
-the scrollbar using DOM elements, allowing more control over
-its <a href="../addon/scroll/simplescrollbars.css">appearance</a>.</p>
+  <p>The <a href="../doc/manual.html#addon_simplescrollbars"><code>simplescrollbars</code></a> addon defines two
+    styles of non-native scrollbars: <a
+      href="javascript:editor.setOption('scrollbarStyle', 'simple')"><code>"simple"</code></a> and <a
+      href="javascript:editor.setOption('scrollbarStyle', 'overlay')"><code>"overlay"</code></a> (click to try), which
+    can be passed to
+    the <a href="../doc/manual.html#option_scrollbarStyle"><code>scrollbarStyle</code></a> option. These implement
+    the scrollbar using DOM elements, allowing more control over
+    its <a href="../addon/scroll/simplescrollbars.css">appearance</a>.</p>
 
   <script>
     var editor = CodeMirror.fromTextArea(document.getElementById("code"), {

src/assets/codemirror/codemirror-5.58.2/doc/activebookmark.js

@@ -2,7 +2,7 @@
 document.createElement("section");
 document.createElement("article");
 
-(function() {
+(function () {
   if (!window.addEventListener) return;
   var pending = false, prevVal = null;
 
@@ -44,12 +44,15 @@ document.createElement("article");
 
   window.addEventListener("scroll", updateSoon);
   window.addEventListener("load", updateSoon);
-  window.addEventListener("hashchange", function() {
-    setTimeout(function() {
+  window.addEventListener("hashchange", function () {
+    setTimeout(function () {
       var hash = document.location.hash, found = null, m;
       var marks = document.getElementById("nav").getElementsByTagName("a");
       for (var i = 0; i < marks.length; i++)
-        if ((m = marks[i].href.match(/(#.*)/)) && m[1] == hash) { found = i; break; }
+        if ((m = marks[i].href.match(/(#.*)/)) && m[1] == hash) {
+          found = i;
+          break;
+        }
       if (found != null) for (var i = 0; i < marks.length; i++)
         marks[i].className = i == found ? "active" : "";
     }, 300);