Skip to content

S
sfcode
You need to sign in or sign up before continuing.
Commit 82a0168e authored by Ayush's avatar Ayush
Browse files
Options

Optimize imports and code

parent b3aed7ac
Expand all Show whitespace changes
Inline Side-by-side
Showing with 18543 additions and 12885 deletions
src/app/api.service.spec.ts
View file @ 82a0168e
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
View file @ 82a0168e
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
View file @ 82a0168e
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
View file @ 82a0168e
import { Component } from '@angular/core';
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
......
src/app/app.module.ts
View file @ 82a0168e
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
View file @ 82a0168e
<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
View file @ 82a0168e
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,7 +8,7 @@ describe('ArenaComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ArenaComponent ]
declarations: [ArenaComponent]
})
.compileComponents();
});
......
src/app/arena/arena.component.ts
View file @ 82a0168e
......@@ -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
View file @ 82a0168e
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'
})
export class AuthGuard implements CanActivate {
constructor(private dataService: ApiService, private router: Router) { }
constructor(private dataService: ApiService, private router: Router) {
}
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
......@@ -21,6 +23,6 @@ export class AuthGuard implements CanActivate {
return true;
}
this.dataService.redirectUrl = routeUrl;
this.router.navigate(['/login'], { queryParams: { returnUrl: routeUrl } });
this.router.navigate(['/login'], {queryParams: {returnUrl: routeUrl}});
}
}
src/app/file.service.spec.ts
View file @ 82a0168e
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
View file @ 82a0168e
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/file.component.html
View file @ 82a0168e
......@@ -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
View file @ 82a0168e
......@@ -22,7 +22,7 @@
button {
float: right;
border:none;
border: none;
}
.title {
......
src/app/file/file.component.spec.ts
View file @ 82a0168e
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,7 +8,7 @@ describe('FileComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ FileComponent ]
declarations: [FileComponent]
})
.compileComponents();
});
......
src/app/header/header.component.spec.ts
View file @ 82a0168e
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,7 +8,7 @@ describe('HeaderComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ HeaderComponent ]
declarations: [HeaderComponent]
})
.compileComponents();
});
......
src/app/header/header.component.ts
View file @ 82a0168e
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
View file @ 82a0168e
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,7 +8,7 @@ describe('HomeComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ HomeComponent ]
declarations: [HomeComponent]
})
.compileComponents();
});
......
src/app/home/home.component.ts
View file @ 82a0168e
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
View file @ 82a0168e
<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
View file @ 82a0168e
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,7 +8,7 @@ describe('IdeCompileComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ IdeCompileComponent ]
declarations: [IdeCompileComponent]
})
.compileComponents();
});
......
src/app/ide-compile/ide-compile.component.ts
View file @ 82a0168e
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
View file @ 82a0168e
......@@ -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
View file @ 82a0168e
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,7 +8,7 @@ describe('IdeComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ IdeComponent ]
declarations: [IdeComponent]
})
.compileComponents();
});
......
src/app/ide/ide.component.ts
View file @ 82a0168e
......@@ -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
View file @ 82a0168e
<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
View file @ 82a0168e
......@@ -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
View file @ 82a0168e
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,7 +8,7 @@ describe('InputComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ InputComponent ]
declarations: [InputComponent]
})
.compileComponents();
});
......
src/app/input/input.component.ts
View file @ 82a0168e
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
View file @ 82a0168e
<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>
......
src/app/login/login.component.spec.ts
View file @ 82a0168e
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,7 +8,7 @@ describe('LoginComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ LoginComponent ]
declarations: [LoginComponent]
})
.compileComponents();
});
......
src/app/problem.service.spec.ts
View file @ 82a0168e
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
View file @ 82a0168e
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
View file @ 82a0168e
<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
View file @ 82a0168e
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,7 +8,7 @@ describe('RegisterComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ RegisterComponent ]
declarations: [RegisterComponent]
})
.compileComponents();
});
......
src/app/register/register.component.ts
View file @ 82a0168e
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
View file @ 82a0168e
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
View file @ 82a0168e
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
View file @ 82a0168e
<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
View file @ 82a0168e
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,7 +8,7 @@ describe('SaveFileComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ SaveFileComponent ]
declarations: [SaveFileComponent]
})
.compileComponents();
});
......
src/app/save-file/save-file.component.ts
View file @ 82a0168e
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
View file @ 82a0168e
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,7 +8,7 @@ describe('TestcaseStatusComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ TestcaseStatusComponent ]
declarations: [TestcaseStatusComponent]
})
.compileComponents();
});
......
src/app/testcase-status/testcase-status.component.ts
View file @ 82a0168e
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
View file @ 82a0168e
<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
View file @ 82a0168e
......@@ -31,7 +31,7 @@
height: 106px;
vertical-align: middle;
&>div {
& > div {
margin: 4px;
.lnr {
......
src/app/user/user.component.spec.ts
View file @ 82a0168e
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,7 +8,7 @@ describe('UserComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ UserComponent ]
declarations: [UserComponent]
})
.compileComponents();
});
......
src/assets/codemirror/codemirror-5.58.2/bin/release
View file @ 82a0168e
......@@ -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 + "\"");
});
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>");
});
src/assets/codemirror/codemirror-5.58.2/bin/source-highlight
View file @ 82a0168e
......@@ -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
View file @ 82a0168e
......@@ -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"
<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>
......@@ -65,24 +67,24 @@
</rss></textarea></form>
<script>
var nonEmpty = false;
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
var nonEmpty = false;
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "application/xml",
styleActiveLine: true,
lineNumbers: true,
lineWrapping: true
});
});
function toggleSelProp() {
function toggleSelProp() {
nonEmpty = !nonEmpty;
editor.setOption("styleActiveLine", {nonEmpty: nonEmpty});
var label = nonEmpty ? 'Disable nonEmpty option' : 'Enable nonEmpty option';
document.getElementById('toggleButton').innerText = label;
}
</script>
}
</script>
<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
View file @ 82a0168e
......@@ -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,8 +24,8 @@
</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";
......@@ -61,14 +61,14 @@
})();
</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) {
CodeMirror.commands.autocomplete = function (cm) {
cm.showHint({hint: CodeMirror.hint.anyword});
}
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
......@@ -76,4 +76,4 @@ to those.</p>
extraKeys: {"Ctrl-Space": "autocomplete"}
});
</script>
</article>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/bidi.html
View file @ 82a0168e
......@@ -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>
......@@ -57,47 +63,52 @@
</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>
<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 type="radio" id="htmlltr" name="htmldirection"/><label for="htmlltr">LTR</label>
<input type="radio" id="htmlrtl" name="htmldirection"/><label for="htmlrtl">RTL</label>
<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 type="checkbox" id="rtlMoveVisually"/><label for="rtlMoveVisually">Use visual order for arrow key movement.</label>
<input id="rtlMoveVisually" type="checkbox"/><label for="rtlMoveVisually">Use visual order for arrow key
movement.</label>
</fieldset>
</form>
</form>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
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() {
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() {
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() {
var moveCheckbox = document.getElementById("rtlMoveVisually");
moveCheckbox.checked = editor.getOption("rtlMoveVisually");
moveCheckbox.onchange = function () {
editor.setOption("rtlMoveVisually", moveCheckbox.checked);
};
</script>
};
</script>
<p>Demonstration of bi-directional text support. See
the <a href="http://marijnhaverbeke.nl/blog/cursor-in-bidi-text.html">related
......
src/assets/codemirror/codemirror-5.58.2/demo/btree.html
View file @ 82a0168e
......@@ -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,23 +32,23 @@
</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"), {
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
lineWrapping: true
});
var updateTimeout;
editor.on("change", function(cm) {
});
var updateTimeout;
editor.on("change", function (cm) {
clearTimeout(updateTimeout);
updateTimeout = setTimeout(updateVisual, 200);
});
updateVisual();
});
updateVisual();
function updateVisual() {
function updateVisual() {
var out = document.getElementById("output");
out.innerHTML = "";
......@@ -49,7 +57,8 @@ function updateVisual() {
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";
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";
......@@ -67,17 +76,25 @@ function updateVisual() {
drawTree(sub, node.children[i]);
}
}
drawTree(out, editor.getDoc());
}
}
function fillEditor() {
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;
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
View file @ 82a0168e
......@@ -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,42 +28,44 @@
</div>
<article>
<h2>Multiple Buffer & Split View Demo</h2>
<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>
&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>
&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() {
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() {
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 = {};
var buffers = {};
function openBuffer(name, text, mode) {
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) {
function newBuf(where) {
var name = prompt("Name for the buffer", "*scratch*");
if (name == null) return;
if (buffers.hasOwnProperty(name)) {
......@@ -71,34 +76,37 @@ function newBuf(where) {
selectBuffer(where == "top" ? ed_top : ed_bot, name);
var sel = where == "top" ? sel_top : sel_bot;
sel.value = name;
}
}
function selectBuffer(editor, 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;});
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) {
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");
}
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>
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>
......@@ -106,4 +114,4 @@ selectBuffer(ed_bot, "js");
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
View file @ 82a0168e
......@@ -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>
<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>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "scheme",
lineNumbers: true
});
var pending;
editor.on("change", function() {
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>
</script>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/closebrackets.html
View file @ 82a0168e
......@@ -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,8 +28,8 @@
</div>
<article>
<h2>Closebrackets Demo</h2>
<form><textarea id="code" name="code">function Grid(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);
......@@ -49,4 +52,4 @@ Grid.prototype.moveValue = function(from, to) {
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {autoCloseBrackets: true});
</script>
</article>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/closetag.html
View file @ 82a0168e
......@@ -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,8 +32,8 @@
</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"), {
......@@ -38,4 +41,4 @@
autoCloseTags: true
});
</script>
</article>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/complete.html
View file @ 82a0168e
......@@ -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,8 +26,8 @@
</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) {
......@@ -65,31 +65,31 @@ 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"), {
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
extraKeys: {"Ctrl-Space": "autocomplete"},
mode: {name: "javascript", globalVars: true}
});
});
if (typeof Promise !== "undefined") {
if (typeof Promise !== "undefined") {
var comp = [
["here", "hither"],
["asynchronous", "nonsynchronous"],
["completion", "achievement", "conclusion", "culmination", "expirations"],
["hinting", "advive", "broach", "imply"],
["function","action"],
["function", "action"],
["provide", "add", "bring", "give"],
["synonyms", "equivalents"],
["words", "token"],
......@@ -97,17 +97,19 @@ if (typeof Promise !== "undefined") {
]
function synonyms(cm, option) {
return new Promise(function(accept) {
setTimeout(function() {
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],
return accept({
list: comp[i],
from: CodeMirror.Pos(cursor.line, start),
to: CodeMirror.Pos(cursor.line, end)})
to: CodeMirror.Pos(cursor.line, end)
})
return accept(null)
}, 100)
})
......@@ -120,7 +122,7 @@ if (typeof Promise !== "undefined") {
mode: "text/x-markdown",
hintOptions: {hint: synonyms}
})
}
</script>
}
</script>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/emacs.html
View file @ 82a0168e
......@@ -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,12 +34,12 @@
</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;
......@@ -48,22 +51,24 @@ 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() {
CodeMirror.commands.save = function () {
var elt = editor.getWrapperElement();
elt.style.background = "#def";
setTimeout(function() { elt.style.background = ""; }, 300);
setTimeout(function () {
elt.style.background = "";
}, 300);
};
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
......@@ -73,4 +78,4 @@ or open a new window.</p>
});
</script>
</article>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/folding.html
View file @ 82a0168e
......@@ -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>
......@@ -92,10 +95,10 @@ class Bar:
<textarea id="code-markdown" name="code"></textarea></div>
</form>
<script id="script">
/*
/*
* Demonstration of code folding
*/
window.onload = function() {
window.onload = function () {
var te = document.getElementById("code");
var sc = document.getElementById("script");
te.value = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, "");
......@@ -111,7 +114,11 @@ window.onload = function() {
mode: "javascript",
lineNumbers: true,
lineWrapping: true,
extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
extraKeys: {
"Ctrl-Q": function (cm) {
cm.foldCode(cm.getCursor());
}
},
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
});
......@@ -121,7 +128,11 @@ window.onload = function() {
mode: {name: "javascript", json: true},
lineNumbers: true,
lineWrapping: true,
extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
extraKeys: {
"Ctrl-Q": function (cm) {
cm.foldCode(cm.getCursor());
}
},
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
foldOptions: {
......@@ -143,7 +154,8 @@ window.onload = function() {
try {
var parsed = JSON.parse(toParse);
count = Object.keys(parsed).length;
} catch(e) { }
} catch (e) {
}
return count ? `\u21A4${count}\u21A6` : '\u2194';
}
......@@ -155,7 +167,11 @@ window.onload = function() {
mode: "text/html",
lineNumbers: true,
lineWrapping: true,
extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
extraKeys: {
"Ctrl-Q": function (cm) {
cm.foldCode(cm.getCursor());
}
},
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
});
......@@ -165,7 +181,11 @@ window.onload = function() {
window.editor_python = CodeMirror.fromTextArea(te_python, {
mode: "python",
lineNumbers: true,
extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
extraKeys: {
"Ctrl-Q": function (cm) {
cm.foldCode(cm.getCursor());
}
},
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
});
......@@ -174,11 +194,16 @@ window.onload = function() {
mode: "markdown",
lineNumbers: true,
lineWrapping: true,
extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
extraKeys: {
"Ctrl-Q": function (cm) {
cm.foldCode(cm.getCursor());
}
},
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
});
};
</script>
</article>
</body>
};
<
/script>
< /article>
< /body>
src/assets/codemirror/codemirror-5.58.2/demo/fullscreen.html
View file @ 82a0168e
......@@ -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,10 +65,10 @@
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);
}
}
......@@ -80,4 +80,4 @@
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
View file @ 82a0168e
......@@ -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"), {
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "markdown",
lineNumbers: true,
extraKeys: {
"Ctrl-Q": function(cm) { cm.wrapParagraph(cm.getCursor(), options); }
"Ctrl-Q": function (cm) {
cm.wrapParagraph(cm.getCursor(), options);
}
}
});
var wait, options = {column: 60}, changing = false;
editor.on("change", function(cm, change) {
});
var wait, options = {column: 60}, changing = false;
editor.on("change", function (cm, change) {
if (changing) return;
clearTimeout(wait);
wait = setTimeout(function() {
wait = setTimeout(function () {
changing = true;
cm.wrapParagraphsInRange(change.from, CodeMirror.changeEnd(change), options);
changing = false;
}, 200);
});
</script>
});
</script>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/html5complete.html
View file @ 82a0168e
......@@ -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,12 +16,15 @@
<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>
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
<ul>
......@@ -32,9 +35,9 @@
<ul>
<li><a class=active href="#">HTML completion</a>
</ul>
</div>
</div>
<article>
<article>
<h2>HTML completion demo</h2>
<p>Shows the <a href="xmlcomplete.html">XML completer</a>
......@@ -44,7 +47,7 @@
<div id="code"></div>
<script>
window.onload = function() {
window.onload = function () {
editor = CodeMirror(document.getElementById("code"), {
mode: "text/html",
extraKeys: {"Ctrl-Space": "autocomplete"},
......@@ -52,5 +55,5 @@
});
};
</script>
</article>
</article>
</body>
src/assets/codemirror/codemirror-5.58.2/demo/indentwrap.html
View file @ 82a0168e
......@@ -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,15 +31,18 @@
</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>
......@@ -48,7 +57,7 @@
mode: "text/html"
});
var charWidth = editor.defaultCharWidth(), basePadding = 4;
editor.on("renderLine", function(cm, line, elt) {
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";
......@@ -56,4 +65,4 @@
editor.refresh();
</script>
</article>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/lint.html
View file @ 82a0168e
......@@ -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,7 +35,7 @@
</div>
<article>
<h2>Linter Demo</h2>
<h2>Linter Demo</h2>
<p><textarea id="code-js">var widgets = []
......@@ -44,7 +46,7 @@ function updateHints() {
widgets.length = 0;
JSHINT(editor.getValue());
for (var i = 0; i < JSHINT.errors.length; ++i) {
for(var i = 0; i < JSHINT.errors.length; ++i) {
var err = JSHINT.errors[i];
if (!err) continue;
var msg = document.createElement("div");
......@@ -100,7 +102,7 @@ function updateHints() {
/*Warning: empty ruleset */
.foo {
}
}
h1 {
font-weight: bold;
......@@ -145,7 +147,7 @@ li.last {
}
}
</textarea></p>
<script>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code-js"), {
lineNumbers: true,
mode: "javascript",
......@@ -166,6 +168,6 @@ li.last {
gutters: ["CodeMirror-lint-markers"],
lint: true
});
</script>
</script>
</article>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/loadmode.html
View file @ 82a0168e
......@@ -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,25 +28,28 @@
</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"), {
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) {
});
var modeInput = document.getElementById("mode");
CodeMirror.on(modeInput, "keypress", function (e) {
if (e.keyCode == 13) change();
});
function change() {
});
function change() {
var val = modeInput.value, m, mode, spec;
if (m = /.+\.([^.]+)$/.exec(val)) {
var info = CodeMirror.findModeByExtension(m[1]);
......@@ -67,6 +73,6 @@ function change() {
} else {
alert("Could not find a mode corresponding to " + val);
}
}
</script>
</article>
}
</script>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/marker.html
View file @ 82a0168e
......@@ -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,8 +34,8 @@
</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"]
......@@ -45,8 +53,8 @@ function makeMarker() {
}
</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>
</article>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/markselection.html
View file @ 82a0168e
......@@ -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
......@@ -40,13 +52,14 @@ 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"), {
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>
});
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
View file @ 82a0168e
......@@ -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 {
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>
.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.
......@@ -90,14 +100,14 @@ ornare accumsan. In hac habitasse hardtospot platea dictumst.
</textarea></form>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
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>
<p>Search and highlight occurences of the selected text.</p>
</article>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/matchtags.html
View file @ 82a0168e
......@@ -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>
<script>
window.onload = function() {
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.
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
View file @ 82a0168e
......@@ -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,11 +14,20 @@
<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; }
.CodeMirror {
line-height: 1.2;
}
@media screen and (min-width: 1300px) {
article { max-width: 1000px; }
#nav { border-right: 499px solid transparent; }
article {
max-width: 1000px;
}
#nav {
border-right: 499px solid transparent;
}
}
span.clicky {
cursor: pointer;
background: #d70;
......@@ -26,7 +35,7 @@
padding: 0 3px;
border-radius: 3px;
}
</style>
</style>
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
......@@ -41,31 +50,32 @@
</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>
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>
<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() {
<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 = "";
......@@ -79,34 +89,37 @@ function initUI() {
connect: connect,
collapseIdentical: collapse
});
}
}
function toggleDifferences() {
function toggleDifferences() {
dv.setShowDifferences(highlight = !highlight);
}
}
window.onload = function() {
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)
};
let d = document.createElement("div");
d.style.cssText = "width: 50px; margin: 7px; height: 14px";
dv.editor().addLineWidget(57, d)
};
function mergeViewHeight(mergeView) {
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) {
function resize(mergeView) {
var height = mergeViewHeight(mergeView);
for(;;) {
for (; ;) {
if (mergeView.leftOriginal())
mergeView.leftOriginal().setSize(null, height);
mergeView.editor().setSize(null, height);
......@@ -118,6 +131,6 @@ function resize(mergeView) {
else height = newHeight;
}
mergeView.wrap.style.height = height + "px";
}
</script>
}
</script>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/multiplex.html
View file @ 82a0168e
......@@ -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
......@@ -42,21 +47,23 @@
</textarea></form>
<script>
CodeMirror.defineMode("demo", function(config) {
CodeMirror.defineMode("demo", function (config) {
return CodeMirror.multiplexingMode(
CodeMirror.getMode(config, "text/html"),
{open: "<<", close: ">>",
{
open: "<<", close: ">>",
mode: CodeMirror.getMode(config, "text/plain"),
delimStyle: "delimit"}
delimStyle: "delimit"
}
// .. more multiplexed styles can follow here
);
});
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
});
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "demo",
lineNumbers: true,
lineWrapping: true
});
</script>
});
</script>
<p>Demonstration of a multiplexing mode, which, at certain
boundary strings, switches to one or more inner modes. The out
......@@ -72,4 +79,4 @@ var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
<a href="../test/index.html#verbose,multiplexing_*">verbose</a>.
</p>
</article>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/mustache.html
View file @ 82a0168e
......@@ -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,8 +31,8 @@
</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>
......@@ -40,9 +45,9 @@
</textarea></form>
<script>
CodeMirror.defineMode("mustache", function(config, parserConfig) {
CodeMirror.defineMode("mustache", function (config, parserConfig) {
var mustacheOverlay = {
token: function(stream, state) {
token: function (stream, state) {
var ch;
if (stream.match("{{")) {
while ((ch = stream.next()) != null)
......@@ -51,14 +56,15 @@ CodeMirror.defineMode("mustache", function(config, parserConfig) {
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>
});
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "mustache"});
</script>
<p>Demonstration of a mode that parses HTML, highlighting
the <a href="http://mustache.github.com/">Mustache</a> templating
......@@ -66,4 +72,4 @@ var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "mu
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
View file @ 82a0168e
......@@ -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;
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,48 +60,48 @@
<article>
<h2>Panel Demo</h2>
<h2>Panel Demo</h2>
<div class="border">
<div class="border">
<textarea id="code" name="code"></textarea>
</div>
</div>
<p>
<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>
</p>
<div id="demo">
<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>
</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, {
</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) {
function makePanel(where) {
var node = document.createElement("div");
var id = ++numPanels;
var widget, close, label;
......@@ -106,32 +112,33 @@ function makePanel(where) {
close.setAttribute("title", "Remove me!");
close.setAttribute("class", "remove-panel");
close.textContent = "✖";
CodeMirror.on(close, "mousedown", function(e) {
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) {
}
function addPanel(where) {
var node = makePanel(where);
panels[node.id] = editor.addPanel(node, {position: where, stable: true});
}
}
addPanel("top");
addPanel("bottom");
addPanel("top");
addPanel("bottom");
function replacePanel(form) {
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>
}
</script>
</div>
</div>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/placeholder.html
View file @ 82a0168e
......@@ -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,8 +38,8 @@
</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>
plug-in adds an option <code>placeholder</code> that can be set to
......@@ -42,4 +53,4 @@
});
</script>
</article>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/preview.html
View file @ 82a0168e
......@@ -2,9 +2,9 @@
<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>
......@@ -16,6 +16,7 @@
width: 50%;
border: 1px solid black;
}
iframe {
width: 49%;
float: left;
......@@ -23,7 +24,7 @@
border: 1px solid black;
border-left: 0px;
}
</style>
</style>
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
......@@ -38,7 +39,7 @@
</div>
<article>
<h2>HTML5 preview</h2>
<h2>HTML5 preview</h2>
<textarea id=code name=code>
<!doctype html>
......@@ -46,11 +47,13 @@
<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');
......@@ -70,7 +73,7 @@
var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
mode: 'text/html'
});
editor.on("change", function() {
editor.on("change", function () {
clearTimeout(delay);
delay = setTimeout(updatePreview, 300);
});
......@@ -82,6 +85,7 @@
preview.write(editor.getValue());
preview.close();
}
setTimeout(updatePreview, 300);
</script>
</article>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/requirejs.html
View file @ 82a0168e
......@@ -3,18 +3,21 @@
<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>
<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>
......@@ -24,9 +27,9 @@
<ul>
<li><a class=active href="#">HTML completion</a>
</ul>
</div>
</div>
<article>
<article>
<h2>RequireJS module loading demo</h2>
<p>This demo does the same thing as
......@@ -50,7 +53,7 @@
});
require(["codemirror", "codemirror/mode/htmlmixed/htmlmixed",
"codemirror/addon/hint/show-hint", "codemirror/addon/hint/html-hint",
"codemirror/addon/mode/loadmode"], function(CodeMirror) {
"codemirror/addon/mode/loadmode"], function (CodeMirror) {
editor = CodeMirror(document.getElementById("code"), {
mode: "text/html",
extraKeys: {"Ctrl-Space": "autocomplete"},
......@@ -58,13 +61,13 @@
});
CodeMirror.modeURL = "codemirror/mode/%N/%N";
document.getElementById("markdown").addEventListener("click", function() {
CodeMirror.requireMode("markdown", function() {
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>
</article>
</body>
src/assets/codemirror/codemirror-5.58.2/demo/resize.html
View file @ 82a0168e
......@@ -2,9 +2,9 @@
<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>
......@@ -12,7 +12,7 @@
border: 1px solid #eee;
height: auto;
}
</style>
</style>
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
......@@ -27,19 +27,19 @@
</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;
}
</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"), {
......@@ -48,4 +48,4 @@ automatically resize to fit its content.</p>
});
</script>
</article>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/rulers.html
View file @ 82a0168e
......@@ -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,9 +27,9 @@
</div>
<article>
<h2>Ruler Demo</h2>
<h2>Ruler Demo</h2>
<script>
<script>
var nums = "0123456789", space = " ";
var colors = ["#fcc", "#f5f577", "#cfc", "#aff", "#ccf", "#fcf"];
var rulers = [], value = "";
......@@ -39,11 +42,11 @@
rulers: rulers,
value: value + value + value,
lineNumbers: true
});
</script>
});
</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
View file @ 82a0168e
......@@ -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,28 +21,29 @@
</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;">
<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>
<pre class="cm-s-default" id="output"></pre>
<script>
function doHighlight() {
function doHighlight() {
CodeMirror.runMode(document.getElementById("code").value, "application/xml",
document.getElementById("output"));
}
</script>
}
</script>
<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>
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>
......@@ -55,7 +56,8 @@ function doHighlight() {
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>
(through <code>innerHTML</code>).
</dd>
</dl>
</article>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/runmode.html
View file @ 82a0168e
......@@ -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,28 +22,29 @@
</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;">
<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>
<pre class="cm-s-default" id="output"></pre>
<script>
function doHighlight() {
function doHighlight() {
CodeMirror.runMode(document.getElementById("code").value, "application/xml",
document.getElementById("output"));
}
</script>
}
</script>
<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>
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>
......@@ -56,7 +57,8 @@ function doHighlight() {
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>
(through <code>innerHTML</code>).
</dd>
</dl>
</article>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/search.html
View file @ 82a0168e
......@@ -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>
......@@ -70,24 +77,32 @@
</textarea></form>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "text/html",
lineNumbers: true,
extraKeys: {"Alt-F": "findPersistent"}
});
</script>
});
</script>
<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>
<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>
......@@ -96,4 +111,4 @@ var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
<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
View file @ 82a0168e
......@@ -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/demo/spanaffectswrapping_shim.html
View file @ 82a0168e
......@@ -2,7 +2,7 @@
<title>CodeMirror: Automatically derive odd wrapping behavior for your browser</title>
<meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css">
<link href="../doc/docs.css" rel=stylesheet>
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
......@@ -18,7 +18,7 @@
</div>
<article>
<h2>Automatically derive odd wrapping behavior for your browser</h2>
<h2>Automatically derive odd wrapping behavior for your browser</h2>
<p>This is a hack to automatically derive
......@@ -27,7 +27,7 @@
in <a href="../lib/codemirror.js"><code>lib/codemirror.js</code></a>
for some more details.</p>
<div style="white-space: pre-wrap; width: 50px;" id="area"></div>
<div id="area" style="white-space: pre-wrap; width: 50px;"></div>
<pre id="output"></pre>
<script id="script">
......@@ -46,6 +46,7 @@
}
var re = "";
function toREElt(str) {
if (str.length > 1) {
var invert = false;
......@@ -55,7 +56,9 @@
for (var i = 0; i < l; ++i) if (str.indexOf(chars.charAt(i)) == -1) newStr += chars.charAt(i);
str = newStr;
}
str = str.replace(/[\-\.\]\"\'\\\/\^a]/g, function(orig) { return orig == "a" ? "\\w" : "\\" + orig; });
str = str.replace(/[\-\.\]\"\'\\\/\^a]/g, function (orig) {
return orig == "a" ? "\\w" : "\\" + orig;
});
return "[" + (invert ? "^" : "") + str + "]";
} else if (str == "a") {
return "\\w";
......@@ -67,7 +70,7 @@
}
var newRE = "";
for (;;) {
for (; ;) {
var left = null;
for (var left in bad) break;
if (left == null) break;
......@@ -81,5 +84,6 @@
}
document.getElementById("output").appendChild(document.createTextNode("Your regexp is: " + (newRE || "^$")));
</script>
</article>
<
/script>
< /article>
src/assets/codemirror/codemirror-5.58.2/demo/sublime.html
View file @ 82a0168e
......@@ -2,12 +2,12 @@
<title>CodeMirror: Sublime Text 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/fold/foldgutter.css">
<link rel="stylesheet" href="../addon/dialog/dialog.css">
<link rel="stylesheet" href="../theme/monokai.css">
<link href="../lib/codemirror.css" rel="stylesheet">
<link href="../addon/fold/foldgutter.css" rel="stylesheet">
<link href="../addon/dialog/dialog.css" rel="stylesheet">
<link href="../theme/monokai.css" rel="stylesheet">
<script src="../lib/codemirror.js"></script>
<script src="../addon/search/searchcursor.js"></script>
<script src="../addon/search/search.js"></script>
......@@ -21,8 +21,16 @@
<script src="../mode/javascript/javascript.js"></script>
<script src="../keymap/sublime.js"></script>
<style>
.CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee; line-height: 1.3; height: 500px}
.CodeMirror-linenumbers { padding: 0 8px; }
.CodeMirror {
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
line-height: 1.3;
height: 500px
}
.CodeMirror-linenumbers {
padding: 0 8px;
}
</style>
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
......@@ -38,20 +46,20 @@
</div>
<article>
<h2>Sublime Text bindings demo</h2>
<h2>Sublime Text bindings demo</h2>
<p>The <code>sublime</code> keymap defines many Sublime Text-specific
bindings for CodeMirror. See the code below for an overview.</p>
<p>The <code>sublime</code> keymap defines many Sublime Text-specific
bindings for CodeMirror. See the code below for an overview.</p>
<p>Enable the keymap by
loading <a href="../keymap/sublime.js"><code>keymap/sublime.js</code></a>
and setting
the <a href="../doc/manual.html#option_keyMap"><code>keyMap</code></a>
option to <code>"sublime"</code>.</p>
<p>Enable the keymap by
loading <a href="../keymap/sublime.js"><code>keymap/sublime.js</code></a>
and setting
the <a href="../doc/manual.html#option_keyMap"><code>keyMap</code></a>
option to <code>"sublime"</code>.</p>
<p>(A lot of the search functionality is still missing.)
<p>(A lot of the search functionality is still missing.)
<script>
<script>
var value = "// The bindings defined specifically in the Sublime Text mode\nvar bindings = {\n";
var map = CodeMirror.keyMap.sublime;
for (var key in map) {
......@@ -72,6 +80,6 @@ option to <code>"sublime"</code>.</p>
theme: "monokai",
tabSize: 2
});
</script>
</script>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/tern.html
View file @ 82a0168e
......@@ -2,12 +2,12 @@
<title>CodeMirror: Tern 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/hint/show-hint.css">
<link rel="stylesheet" href="../addon/tern/tern.css">
<link href="../lib/codemirror.css" rel="stylesheet">
<link href="../addon/dialog/dialog.css" rel="stylesheet">
<link href="../addon/hint/show-hint.css" rel="stylesheet">
<link href="../addon/tern/tern.css" rel="stylesheet">
<script src="../lib/codemirror.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="../addon/dialog/dialog.js"></script>
......@@ -24,8 +24,10 @@
<script src="https://unpkg.com/tern/lib/infer.js"></script>
<script src="https://unpkg.com/tern/plugin/doc_comment.js"></script>
<style>
.CodeMirror {border: 1px solid #ddd;}
</style>
.CodeMirror {
border: 1px solid #ddd;
}
</style>
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
......@@ -40,8 +42,8 @@
</div>
<article>
<h2>Tern Demo</h2>
<form><textarea id="code" name="code">// Use ctrl-space to complete something
<h2>Tern Demo</h2>
<form><textarea id="code" name="code">// Use ctrl-space to complete something
// Put the cursor in or after an expression, press ctrl-o to
// find its type
......@@ -78,28 +80,34 @@ var randomStr = myMod.randomElt(myMod.strList);
var randomInt = myMod.randomElt(myMod.intList);
</textarea></form>
<p>Demonstrates integration of <a href="http://ternjs.net/">Tern</a>
and CodeMirror. The following keys are bound:</p>
<dl>
<dt>Ctrl-Space</dt><dd>Autocomplete</dd>
<dt>Ctrl-O</dt><dd>Find docs for the expression at the cursor</dd>
<dt>Ctrl-I</dt><dd>Find type at cursor</dd>
<dt>Alt-.</dt><dd>Jump to definition (Alt-, to jump back)</dd>
<dt>Ctrl-Q</dt><dd>Rename variable</dd>
<dt>Ctrl-.</dt><dd>Select all occurrences of a variable</dd>
</dl>
<p>Documentation is sparse for now. See the top of
the <a href="../addon/tern/tern.js">script</a> for a rough API
overview.</p>
<script>
<p>Demonstrates integration of <a href="http://ternjs.net/">Tern</a>
and CodeMirror. The following keys are bound:</p>
<dl>
<dt>Ctrl-Space</dt>
<dd>Autocomplete</dd>
<dt>Ctrl-O</dt>
<dd>Find docs for the expression at the cursor</dd>
<dt>Ctrl-I</dt>
<dd>Find type at cursor</dd>
<dt>Alt-.</dt>
<dd>Jump to definition (Alt-, to jump back)</dd>
<dt>Ctrl-Q</dt>
<dd>Rename variable</dd>
<dt>Ctrl-.</dt>
<dd>Select all occurrences of a variable</dd>
</dl>
<p>Documentation is sparse for now. See the top of
the <a href="../addon/tern/tern.js">script</a> for a rough API
overview.</p>
<script>
function getURL(url, c) {
var xhr = new XMLHttpRequest();
xhr.open("get", url, true);
xhr.send();
xhr.onreadystatechange = function() {
xhr.onreadystatechange = function () {
if (xhr.readyState != 4) return;
if (xhr.status < 400) return c(null, xhr.responseText);
var e = new Error(xhr.responseText || "No response");
......@@ -109,25 +117,41 @@ overview.</p>
}
var server;
getURL("https://unpkg.com/tern/defs/ecmascript.json", function(err, code) {
getURL("https://unpkg.com/tern/defs/ecmascript.json", function (err, code) {
if (err) throw new Error("Request for ecmascript.json: " + err);
server = new CodeMirror.TernServer({defs: [JSON.parse(code)]});
editor.setOption("extraKeys", {
"Ctrl-Space": function(cm) { server.complete(cm); },
"Ctrl-I": function(cm) { server.showType(cm); },
"Ctrl-O": function(cm) { server.showDocs(cm); },
"Alt-.": function(cm) { server.jumpToDef(cm); },
"Alt-,": function(cm) { server.jumpBack(cm); },
"Ctrl-Q": function(cm) { server.rename(cm); },
"Ctrl-.": function(cm) { server.selectName(cm); }
"Ctrl-Space": function (cm) {
server.complete(cm);
},
"Ctrl-I": function (cm) {
server.showType(cm);
},
"Ctrl-O": function (cm) {
server.showDocs(cm);
},
"Alt-.": function (cm) {
server.jumpToDef(cm);
},
"Alt-,": function (cm) {
server.jumpBack(cm);
},
"Ctrl-Q": function (cm) {
server.rename(cm);
},
"Ctrl-.": function (cm) {
server.selectName(cm);
}
})
editor.on("cursorActivity", function(cm) { server.updateArgHints(cm); });
editor.on("cursorActivity", function (cm) {
server.updateArgHints(cm);
});
});
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
mode: "javascript"
});
</script>
</script>
</article>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/theme.html
View file @ 82a0168e
......@@ -2,77 +2,80 @@
<title>CodeMirror: Theme 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="../theme/3024-day.css">
<link rel="stylesheet" href="../theme/3024-night.css">
<link rel="stylesheet" href="../theme/abcdef.css">
<link rel="stylesheet" href="../theme/ambiance.css">
<link rel="stylesheet" href="../theme/ayu-dark.css">
<link rel="stylesheet" href="../theme/ayu-mirage.css">
<link rel="stylesheet" href="../theme/base16-dark.css">
<link rel="stylesheet" href="../theme/bespin.css">
<link rel="stylesheet" href="../theme/base16-light.css">
<link rel="stylesheet" href="../theme/blackboard.css">
<link rel="stylesheet" href="../theme/cobalt.css">
<link rel="stylesheet" href="../theme/colorforth.css">
<link rel="stylesheet" href="../theme/dracula.css">
<link rel="stylesheet" href="../theme/duotone-dark.css">
<link rel="stylesheet" href="../theme/duotone-light.css">
<link rel="stylesheet" href="../theme/eclipse.css">
<link rel="stylesheet" href="../theme/elegant.css">
<link rel="stylesheet" href="../theme/erlang-dark.css">
<link rel="stylesheet" href="../theme/gruvbox-dark.css">
<link rel="stylesheet" href="../theme/hopscotch.css">
<link rel="stylesheet" href="../theme/icecoder.css">
<link rel="stylesheet" href="../theme/isotope.css">
<link rel="stylesheet" href="../theme/lesser-dark.css">
<link rel="stylesheet" href="../theme/liquibyte.css">
<link rel="stylesheet" href="../theme/lucario.css">
<link rel="stylesheet" href="../theme/material.css">
<link rel="stylesheet" href="../theme/material-darker.css">
<link rel="stylesheet" href="../theme/material-palenight.css">
<link rel="stylesheet" href="../theme/material-ocean.css">
<link rel="stylesheet" href="../theme/mbo.css">
<link rel="stylesheet" href="../theme/mdn-like.css">
<link rel="stylesheet" href="../theme/midnight.css">
<link rel="stylesheet" href="../theme/monokai.css">
<link rel="stylesheet" href="../theme/moxer.css">
<link rel="stylesheet" href="../theme/neat.css">
<link rel="stylesheet" href="../theme/neo.css">
<link rel="stylesheet" href="../theme/night.css">
<link rel="stylesheet" href="../theme/nord.css">
<link rel="stylesheet" href="../theme/oceanic-next.css">
<link rel="stylesheet" href="../theme/panda-syntax.css">
<link rel="stylesheet" href="../theme/paraiso-dark.css">
<link rel="stylesheet" href="../theme/paraiso-light.css">
<link rel="stylesheet" href="../theme/pastel-on-dark.css">
<link rel="stylesheet" href="../theme/railscasts.css">
<link rel="stylesheet" href="../theme/rubyblue.css">
<link rel="stylesheet" href="../theme/seti.css">
<link rel="stylesheet" href="../theme/shadowfox.css">
<link rel="stylesheet" href="../theme/solarized.css">
<link rel="stylesheet" href="../theme/the-matrix.css">
<link rel="stylesheet" href="../theme/tomorrow-night-bright.css">
<link rel="stylesheet" href="../theme/tomorrow-night-eighties.css">
<link rel="stylesheet" href="../theme/ttcn.css">
<link rel="stylesheet" href="../theme/twilight.css">
<link rel="stylesheet" href="../theme/vibrant-ink.css">
<link rel="stylesheet" href="../theme/xq-dark.css">
<link rel="stylesheet" href="../theme/xq-light.css">
<link rel="stylesheet" href="../theme/yeti.css">
<link rel="stylesheet" href="../theme/idea.css">
<link rel="stylesheet" href="../theme/darcula.css">
<link rel="stylesheet" href="../theme/yonce.css">
<link rel="stylesheet" href="../theme/zenburn.css">
<link href="../lib/codemirror.css" rel="stylesheet">
<link href="../theme/3024-day.css" rel="stylesheet">
<link href="../theme/3024-night.css" rel="stylesheet">
<link href="../theme/abcdef.css" rel="stylesheet">
<link href="../theme/ambiance.css" rel="stylesheet">
<link href="../theme/ayu-dark.css" rel="stylesheet">
<link href="../theme/ayu-mirage.css" rel="stylesheet">
<link href="../theme/base16-dark.css" rel="stylesheet">
<link href="../theme/bespin.css" rel="stylesheet">
<link href="../theme/base16-light.css" rel="stylesheet">
<link href="../theme/blackboard.css" rel="stylesheet">
<link href="../theme/cobalt.css" rel="stylesheet">
<link href="../theme/colorforth.css" rel="stylesheet">
<link href="../theme/dracula.css" rel="stylesheet">
<link href="../theme/duotone-dark.css" rel="stylesheet">
<link href="../theme/duotone-light.css" rel="stylesheet">
<link href="../theme/eclipse.css" rel="stylesheet">
<link href="../theme/elegant.css" rel="stylesheet">
<link href="../theme/erlang-dark.css" rel="stylesheet">
<link href="../theme/gruvbox-dark.css" rel="stylesheet">
<link href="../theme/hopscotch.css" rel="stylesheet">
<link href="../theme/icecoder.css" rel="stylesheet">
<link href="../theme/isotope.css" rel="stylesheet">
<link href="../theme/lesser-dark.css" rel="stylesheet">
<link href="../theme/liquibyte.css" rel="stylesheet">
<link href="../theme/lucario.css" rel="stylesheet">
<link href="../theme/material.css" rel="stylesheet">
<link href="../theme/material-darker.css" rel="stylesheet">
<link href="../theme/material-palenight.css" rel="stylesheet">
<link href="../theme/material-ocean.css" rel="stylesheet">
<link href="../theme/mbo.css" rel="stylesheet">
<link href="../theme/mdn-like.css" rel="stylesheet">
<link href="../theme/midnight.css" rel="stylesheet">
<link href="../theme/monokai.css" rel="stylesheet">
<link href="../theme/moxer.css" rel="stylesheet">
<link href="../theme/neat.css" rel="stylesheet">
<link href="../theme/neo.css" rel="stylesheet">
<link href="../theme/night.css" rel="stylesheet">
<link href="../theme/nord.css" rel="stylesheet">
<link href="../theme/oceanic-next.css" rel="stylesheet">
<link href="../theme/panda-syntax.css" rel="stylesheet">
<link href="../theme/paraiso-dark.css" rel="stylesheet">
<link href="../theme/paraiso-light.css" rel="stylesheet">
<link href="../theme/pastel-on-dark.css" rel="stylesheet">
<link href="../theme/railscasts.css" rel="stylesheet">
<link href="../theme/rubyblue.css" rel="stylesheet">
<link href="../theme/seti.css" rel="stylesheet">
<link href="../theme/shadowfox.css" rel="stylesheet">
<link href="../theme/solarized.css" rel="stylesheet">
<link href="../theme/the-matrix.css" rel="stylesheet">
<link href="../theme/tomorrow-night-bright.css" rel="stylesheet">
<link href="../theme/tomorrow-night-eighties.css" rel="stylesheet">
<link href="../theme/ttcn.css" rel="stylesheet">
<link href="../theme/twilight.css" rel="stylesheet">
<link href="../theme/vibrant-ink.css" rel="stylesheet">
<link href="../theme/xq-dark.css" rel="stylesheet">
<link href="../theme/xq-light.css" rel="stylesheet">
<link href="../theme/yeti.css" rel="stylesheet">
<link href="../theme/idea.css" rel="stylesheet">
<link href="../theme/darcula.css" rel="stylesheet">
<link href="../theme/yonce.css" rel="stylesheet">
<link href="../theme/zenburn.css" rel="stylesheet">
<script src="../lib/codemirror.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="../addon/selection/active-line.js"></script>
<script src="../addon/edit/matchbrackets.js"></script>
<style>
.CodeMirror {border: 1px solid black; font-size:13px}
</style>
.CodeMirror {
border: 1px solid black;
font-size: 13px
}
</style>
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
......@@ -87,8 +90,8 @@
</div>
<article>
<h2>Theme Demo</h2>
<form><textarea id="code" name="code">
<h2>Theme Demo</h2>
<form><textarea id="code" name="code">
function findSequence(goal) {
function find(start, history) {
if (start == goal)
......@@ -102,7 +105,7 @@ function findSequence(goal) {
return find(1, "1");
}</textarea></form>
<p>Select a theme: <select onchange="selectTheme()" id=select>
<p>Select a theme: <select id=select onchange="selectTheme()">
<option selected>default</option>
<option>3024-day</option>
<option>3024-night</option>
......@@ -166,21 +169,23 @@ function findSequence(goal) {
<option>yeti</option>
<option>yonce</option>
<option>zenburn</option>
</select>
</p>
</select>
</p>
<script>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true
});
var input = document.getElementById("select");
function selectTheme() {
var theme = input.options[input.selectedIndex].textContent;
editor.setOption("theme", theme);
location.hash = "#" + theme;
}
var choice = (location.hash && location.hash.slice(1)) ||
(document.location.search &&
decodeURIComponent(document.location.search.slice(1)));
......@@ -188,9 +193,12 @@ function findSequence(goal) {
input.value = choice;
editor.setOption("theme", choice);
}
CodeMirror.on(window, "hashchange", function() {
CodeMirror.on(window, "hashchange", function () {
var theme = location.hash.slice(1);
if (theme) { input.value = theme; selectTheme(); }
if (theme) {
input.value = theme;
selectTheme();
}
});
</script>
</script>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/trailingspace.html
View file @ 82a0168e
......@@ -2,19 +2,23 @@
<title>CodeMirror: Trailing Whitespace 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/trailingspace.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;
}
.cm-trailingspace {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUXCToH00Y1UgAAACFJREFUCNdjPMDBUc/AwNDAAAFMTAwMDA0OP34wQgX/AQBYgwYEx4f9lQAAAABJRU5ErkJggg==);
background-position: bottom left;
background-repeat: repeat-x;
}
</style>
</style>
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
......@@ -29,20 +33,20 @@
</div>
<article>
<h2>Trailing Whitespace Demo</h2>
<form><textarea id="code" name="code">This text
<h2>Trailing Whitespace Demo</h2>
<form><textarea id="code" name="code">This text
has some
trailing whitespace!</textarea></form>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
showTrailingSpace: true
});
</script>
});
</script>
<p>Uses
the <a href="../doc/manual.html#addon_trailingspace">trailingspace</a>
addon to highlight trailing whitespace.</p>
<p>Uses
the <a href="../doc/manual.html#addon_trailingspace">trailingspace</a>
addon to highlight trailing whitespace.</p>
</article>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/variableheight.html
View file @ 82a0168e
......@@ -2,23 +2,50 @@
<title>CodeMirror: Variable Height 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="../mode/xml/xml.js"></script>
<style>
.CodeMirror {border: 1px solid silver; border-width: 1px 2px; }
.cm-header { font-family: arial; }
.cm-header-1 { font-size: 150%; }
.cm-header-2 { font-size: 130%; }
.cm-header-3 { font-size: 120%; }
.cm-header-4 { font-size: 110%; }
.cm-header-5 { font-size: 100%; }
.cm-header-6 { font-size: 90%; }
.cm-strong { font-size: 140%; }
</style>
.CodeMirror {
border: 1px solid silver;
border-width: 1px 2px;
}
.cm-header {
font-family: arial;
}
.cm-header-1 {
font-size: 150%;
}
.cm-header-2 {
font-size: 130%;
}
.cm-header-3 {
font-size: 120%;
}
.cm-header-4 {
font-size: 110%;
}
.cm-header-5 {
font-size: 100%;
}
.cm-header-6 {
font-size: 90%;
}
.cm-strong {
font-size: 140%;
}
</style>
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
......@@ -33,8 +60,8 @@
</div>
<article>
<h2>Variable Height Demo</h2>
<form><textarea id="code" name="code"># A First Level Header
<h2>Variable Height Demo</h2>
<form><textarea id="code" name="code"># A First Level Header
**Bold** text in a normal-size paragraph.
......@@ -64,4 +91,4 @@ dog's back.
mode: "markdown"
});
</script>
</article>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/vim.html
View file @ 82a0168e
......@@ -2,12 +2,12 @@
<title>CodeMirror: Vim 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 rel="stylesheet" href="../theme/midnight.css">
<link rel="stylesheet" href="../theme/solarized.css">
<link href="../lib/codemirror.css" rel="stylesheet">
<link href="../addon/dialog/dialog.css" rel="stylesheet">
<link href="../theme/midnight.css" rel="stylesheet">
<link href="../theme/solarized.css" rel="stylesheet">
<script src="../lib/codemirror.js"></script>
<script src="../addon/dialog/dialog.js"></script>
<script src="../addon/search/searchcursor.js"></script>
......@@ -15,8 +15,11 @@
<script src="../addon/edit/matchbrackets.js"></script>
<script src="../keymap/vim.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,20 +34,20 @@
</div>
<article>
<h2>Vim bindings demo</h2>
<h2>Vim bindings demo</h2>
<p><strong style="color: #c33; text-decoration: none">Note:</strong> The CodeMirror vim bindings do not have an
active maintainer. That means that if you report bugs in it, they are
likely to go unanswered. It also means that if you want to help, you
are very welcome to look
at <a href="https://github.com/codemirror/codemirror/issues?q=is%3Aissue+is%3Aopen+label%3Avim">the
open issues</a> and see which ones you can solve.</p>
<p><strong style="color: #c33; text-decoration: none">Note:</strong> The CodeMirror vim bindings do not have an
active maintainer. That means that if you report bugs in it, they are
likely to go unanswered. It also means that if you want to help, you
are very welcome to look
at <a href="https://github.com/codemirror/codemirror/issues?q=is%3Aissue+is%3Aopen+label%3Avim">the
open issues</a> and see which ones you can solve.</p>
<form><textarea id="code" name="code">
<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;
......@@ -55,16 +58,16 @@ int getchar(void)
return (--n >= 0) ? (unsigned char) *bufp++ : EOF;
}
</textarea></form>
<div style="font-size: 13px; width: 300px; height: 30px;">Key buffer: <span id="command-display"></span></div>
<div style="font-size: 13px; width: 300px; height: 30px;">Vim mode: <span id="vim-mode"></span></div>
<div style="font-size: 13px; width: 300px; height: 30px;">Key buffer: <span id="command-display"></span></div>
<div style="font-size: 13px; width: 300px; height: 30px;">Vim mode: <span id="vim-mode"></span></div>
<p>The vim keybindings are enabled by including <code><a
href="../keymap/vim.js">keymap/vim.js</a></code> and setting the
<code>keyMap</code> option to <code>vim</code>.</p>
<p>The vim keybindings are enabled by including <code><a
href="../keymap/vim.js">keymap/vim.js</a></code> and setting the
<code>keyMap</code> option to <code>vim</code>.</p>
<p><strong>Features</strong></p>
<p><strong>Features</strong></p>
<ul>
<ul>
<li>All common motions and operators, including text objects</li>
<li>Operator motion orthogonality</li>
<li>Visual mode - characterwise, linewise, blockwise</li>
......@@ -79,18 +82,20 @@ href="../keymap/vim.js">keymap/vim.js</a></code> and setting the
<li>:global</li>
<li>Insert mode behaves identical to base CodeMirror</li>
<li>Cross-buffer yank/paste</li>
</ul>
</ul>
<p>For the full list of key mappings and Ex commands, refer to the
<code>defaultKeymap</code> and <code>defaultExCommandMap</code> at the
top of <code><a href="../keymap/vim.js">keymap/vim.js</a></code>.
<p>For the full list of key mappings and Ex commands, refer to the
<code>defaultKeymap</code> and <code>defaultExCommandMap</code> at the
top of <code><a href="../keymap/vim.js">keymap/vim.js</a></code>.
<p>Note that while the vim mode tries to emulate the most useful
features of vim as faithfully as possible, it does not strive to
become a complete vim implementation</p>
<p>Note that while the vim mode tries to emulate the most useful
features of vim as faithfully as possible, it does not strive to
become a complete vim implementation</p>
<script>
CodeMirror.commands.save = function(){ alert("Saving"); };
CodeMirror.commands.save = function () {
alert("Saving");
};
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
mode: "text/x-csrc",
......@@ -100,18 +105,18 @@ become a complete vim implementation</p>
});
var commandDisplay = document.getElementById('command-display');
var keys = '';
CodeMirror.on(editor, 'vim-keypress', function(key) {
CodeMirror.on(editor, 'vim-keypress', function (key) {
keys = keys + key;
commandDisplay.innerText = keys;
});
CodeMirror.on(editor, 'vim-command-done', function(e) {
CodeMirror.on(editor, 'vim-command-done', function (e) {
keys = '';
commandDisplay.innerHTML = keys;
});
var vimMode = document.getElementById('vim-mode');
CodeMirror.on(editor, 'vim-mode-change', function(e) {
CodeMirror.on(editor, 'vim-mode-change', function (e) {
vimMode.innerText = JSON.stringify(e);
});
</script>
</article>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/visibletabs.html
View file @ 82a0168e
......@@ -2,19 +2,23 @@
<title>CodeMirror: Visible tabs 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/clike/clike.js"></script>
<style>
.CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
.CodeMirror {
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.cm-tab {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);
background-position: right;
background-repeat: no-repeat;
}
</style>
</style>
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
......@@ -29,12 +33,12 @@
</div>
<article>
<h2>Visible tabs demo</h2>
<form><textarea id="code" name="code">
<h2>Visible tabs 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;
......@@ -46,8 +50,8 @@ int getchar(void)
}
</textarea></form>
<p>Tabs inside the editor are spans with the
class <code>cm-tab</code>, and can be styled.</p>
<p>Tabs inside the editor are spans with the
class <code>cm-tab</code>, and can be styled.</p>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
......@@ -59,4 +63,4 @@ class <code>cm-tab</code>, and can be styled.</p>
});
</script>
</article>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/widget.html
View file @ 82a0168e
......@@ -2,17 +2,34 @@
<title>CodeMirror: Inline Widget 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="https://cdnjs.cloudflare.com/ajax/libs/jshint/2.9.5/jshint.min.js"></script>
<style>
.CodeMirror {border: 1px solid black;}
.lint-error {font-family: arial; font-size: 70%; background: #ffa; color: #a00; padding: 2px 5px 3px; }
.lint-error-icon {color: white; background-color: red; font-weight: bold; border-radius: 50%; padding: 0 3px; margin-right: 7px;}
</style>
.CodeMirror {
border: 1px solid black;
}
.lint-error {
font-family: arial;
font-size: 70%;
background: #ffa;
color: #a00;
padding: 2px 5px 3px;
}
.lint-error-icon {
color: white;
background-color: red;
font-weight: bold;
border-radius: 50%;
padding: 0 3px;
margin-right: 7px;
}
</style>
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
......@@ -27,13 +44,14 @@
</div>
<article>
<h2>Inline Widget Demo</h2>
<h2>Inline Widget Demo</h2>
<div id=code></div>
<script id="script">var widgets = []
function updateHints() {
editor.operation(function(){
function updateHints() {
editor.operation(function () {
for (var i = 0; i < widgets.length; ++i)
editor.removeLineWidget(widgets[i]);
widgets.length = 0;
......@@ -55,9 +73,9 @@ function updateHints() {
var after = editor.charCoords({line: editor.getCursor().line + 1, ch: 0}, "local").top;
if (info.top + info.clientHeight < after)
editor.scrollTo(null, after - info.clientHeight + 3);
}
}
window.onload = function() {
window.onload = function () {
var sc = document.getElementById("script");
var content = sc.textContent || sc.innerText || sc.innerHTML;
......@@ -68,18 +86,18 @@ window.onload = function() {
});
var waiting;
editor.on("change", function() {
editor.on("change", function () {
clearTimeout(waiting);
waiting = setTimeout(updateHints, 500);
});
setTimeout(updateHints, 100);
};
};
"long line to create a horizontal scrollbar, in order to test whether the (non-inline) widgets stay in place when scrolling to the right";
</script>
<p>This demo runs <a href="http://jshint.com">JSHint</a> over the code
in the editor (which is the script used on this page), and
inserts <a href="../doc/manual.html#addLineWidget">line widgets</a> to
display the warnings that JSHint comes up with.</p>
</article>
"long line to create a horizontal scrollbar, in order to test whether the (non-inline) widgets stay in place when scrolling to the right";
</script>
<p>This demo runs <a href="http://jshint.com">JSHint</a> over the code
in the editor (which is the script used on this page), and
inserts <a href="../doc/manual.html#addLineWidget">line widgets</a> to
display the warnings that JSHint comes up with.</p>
</article>
src/assets/codemirror/codemirror-5.58.2/demo/xmlcomplete.html
View file @ 82a0168e
......@@ -2,17 +2,19 @@
<title>CodeMirror: XML 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/xml-hint.js"></script>
<script src="../mode/xml/xml.js"></script>
<style>
.CodeMirror { border: 1px solid #eee; }
</style>
.CodeMirror {
border: 1px solid #eee;
}
</style>
<div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
......@@ -27,8 +29,8 @@
</div>
<article>
<h2>XML Autocomplete Demo</h2>
<form><textarea id="code" name="code"><!-- write some xml below -->
<h2>XML Autocomplete Demo</h2>
<form><textarea id="code" name="code"><!-- write some xml below -->
</textarea></form>
<p>Press <strong>ctrl-space</strong>, or type a '&lt;' character to
......@@ -80,7 +82,7 @@
function completeAfter(cm, pred) {
var cur = cm.getCursor();
if (!pred || pred()) setTimeout(function() {
if (!pred || pred()) setTimeout(function () {
if (!cm.state.completionActive)
cm.showHint({completeSingle: false});
}, 100);
......@@ -88,14 +90,14 @@
}
function completeIfAfterLt(cm) {
return completeAfter(cm, function() {
return completeAfter(cm, function () {
var cur = cm.getCursor();
return cm.getRange(CodeMirror.Pos(cur.line, cur.ch - 1), cur) == "<";
});
}
function completeIfInTag(cm) {
return completeAfter(cm, function() {
return completeAfter(cm, function () {
var tok = cm.getTokenAt(cm.getCursor());
if (tok.type == "string" && (!/['"]/.test(tok.string.charAt(tok.string.length - 1)) || tok.string.length == 1)) return false;
var inner = CodeMirror.innerMode(cm.getMode(), tok.state).state;
......@@ -116,4 +118,4 @@
hintOptions: {schemaInfo: tags}
});
</script>
</article>
</article>
src/assets/codemirror/codemirror-5.58.2/doc/activebookmark.js
View file @ 82a0168e
......@@ -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);
......
src/assets/codemirror/codemirror-5.58.2/doc/docs.css
View file @ 82a0168e
......@@ -5,8 +5,16 @@
src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(//themes.googleusercontent.com/static/fonts/sourcesanspro/v5/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff');
}
body, html { margin: 0; padding: 0; height: 100%; }
section, article { display: block; padding: 0; }
body, html {
margin: 0;
padding: 0;
height: 100%;
}
section, article {
display: block;
padding: 0;
}
body {
background: #f8f8f8;
......@@ -14,16 +22,30 @@ body {
line-height: 1.5;
}
p { margin-top: 0; }
p {
margin-top: 0;
}
h2, h3, h1 {
font-weight: normal;
margin-bottom: .7em;
}
h1 { font-size: 140%; }
h2 { font-size: 120%; }
h3 { font-size: 110%; }
article > h2:first-child, section:first-child > h2 { margin-top: 0; }
h1 {
font-size: 140%;
}
h2 {
font-size: 120%;
}
h3 {
font-size: 110%;
}
article > h2:first-child, section:first-child > h2 {
margin-top: 0;
}
#nav h1 {
margin-right: 12px;
......@@ -66,7 +88,8 @@ article {
box-sizing: -moz-border-box;
box-sizing: border-box;
overflow-y: auto;
left: 0; right: none;
left: 0;
right: none;
width: 160px;
text-align: right;
z-index: 1;
......@@ -76,6 +99,7 @@ article {
article {
margin: 0 auto;
}
#nav {
right: 50%;
width: auto;
......@@ -85,7 +109,8 @@ article {
#nav ul {
display: block;
margin: 0; padding: 0;
margin: 0;
padding: 0;
margin-bottom: 32px;
}
......@@ -154,7 +179,8 @@ section.first {
.yinyang {
position: absolute;
top: -10px;
left: 0; right: 0;
left: 0;
right: 0;
margin: auto;
display: block;
height: 120px;
......@@ -170,7 +196,9 @@ section.first {
pointer-events: none;
position: absolute;
height: 100px;
top: 0; left: 0; right: 0;
top: 0;
left: 0;
right: 0;
}
.actionlink {
......@@ -179,7 +207,8 @@ section.first {
font-size: 80%;
font-weight: bold;
position: absolute;
top: 0; bottom: 0;
top: 0;
bottom: 0;
line-height: 1;
height: 1em;
margin: auto;
......@@ -219,6 +248,7 @@ section.first {
.actions {
padding-top: 120px;
}
.actionsleft, .actionsright {
float: none;
text-align: left;
......@@ -250,6 +280,7 @@ th {
.rel {
margin-bottom: 0;
}
.rel-note {
margin-top: 0;
color: #555;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment