Commit 82a0168e authored by Ayush's avatar Ayush

Optimize imports and code

parent b3aed7ac
import { TestBed } from '@angular/core/testing'; import {TestBed} from '@angular/core/testing';
import { ApiService } from './api.service'; import {ApiService} from './api.service';
describe('ApiService', () => { describe('ApiService', () => {
let service: ApiService; let service: ApiService;
......
import { NgModule } from '@angular/core'; import {NgModule} from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; import {RouterModule, Routes} from '@angular/router';
import { HomeComponent } from './home/home.component'; import {HomeComponent} from './home/home.component';
import { ArenaComponent } from './arena/arena.component'; import {ArenaComponent} from './arena/arena.component';
import { UserComponent } from './user/user.component'; import {UserComponent} from './user/user.component';
import { IdeComponent } from './ide/ide.component'; import {IdeComponent} from './ide/ide.component';
import { LoginComponent } from './login/login.component'; import {LoginComponent} from './login/login.component';
import { RegisterComponent } from './register/register.component'; import {RegisterComponent} from './register/register.component';
import { AuthGuard } from './auth.guard'; import {AuthGuard} from './auth.guard';
import { FileComponent } from './file/file.component'; import {FileComponent} from './file/file.component';
const routes: Routes = [ const routes: Routes = [
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] }, {path: 'home', component: HomeComponent, canActivate: [AuthGuard]},
{ path: 'arena/problem/:id', component: ArenaComponent, canActivate: [AuthGuard] }, {path: 'arena/problem/:id', component: ArenaComponent, canActivate: [AuthGuard]},
{ path: 'arena/file/:id', component: IdeComponent, canActivate: [AuthGuard] }, {path: 'arena/file/:id', component: IdeComponent, canActivate: [AuthGuard]},
{ path: 'arena/file/new', component: IdeComponent, canActivate: [AuthGuard] }, {path: 'arena/file/new', component: IdeComponent, canActivate: [AuthGuard]},
{ path: 'user', component: UserComponent, canActivate: [AuthGuard] }, {path: 'user', component: UserComponent, canActivate: [AuthGuard]},
{ path: 'files', component: FileComponent, canActivate: [AuthGuard] }, {path: 'files', component: FileComponent, canActivate: [AuthGuard]},
{ path: 'login', component: LoginComponent }, {path: 'login', component: LoginComponent},
{ path: 'register', component: RegisterComponent }, {path: 'register', component: RegisterComponent},
{ path: '**', redirectTo: '/home' }, {path: '**', redirectTo: '/home'},
]; ];
@NgModule({ @NgModule({
imports: [RouterModule.forRoot(routes)], imports: [RouterModule.forRoot(routes)],
exports: [RouterModule] exports: [RouterModule]
}) })
export class AppRoutingModule { } export class AppRoutingModule {
}
export var routerComponents = [ export var routerComponents = [
HomeComponent, HomeComponent,
......
import { TestBed } from '@angular/core/testing'; import {TestBed} from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing'; import {RouterTestingModule} from '@angular/router/testing';
import { AppComponent } from './app.component'; import {AppComponent} from './app.component';
describe('AppComponent', () => { describe('AppComponent', () => {
beforeEach(async () => { beforeEach(async () => {
......
import { Component } from '@angular/core'; import {Component} from '@angular/core';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
......
import { BrowserModule } from '@angular/platform-browser'; import {BrowserModule} from '@angular/platform-browser';
import { NgModule } from '@angular/core'; import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; import {AppRoutingModule, routerComponents} from './app-routing.module';
import { routerComponents } from './app-routing.module'; import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import {HttpClientModule} from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http'; import {AppComponent} from './app.component';
import { AppComponent } from './app.component'; import {HeaderComponent} from './header/header.component';
import { HeaderComponent } from './header/header.component'; import {ApiService} from './api.service';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import {IdeCompileComponent} from './ide-compile/ide-compile.component';
import { ApiService } from './api.service'; import {InputComponent} from './input/input.component';
import { IdeCompileComponent } from './ide-compile/ide-compile.component'; import {TestcaseStatusComponent} from './testcase-status/testcase-status.component';
import { InputComponent } from './input/input.component'; import {SaveFileComponent} from './save-file/save-file.component';
import { TestcaseStatusComponent } from './testcase-status/testcase-status.component'; import {FileComponent} from './file/file.component';
import { SaveFileComponent } from './save-file/save-file.component'; import {FileService} from './file.service';
import { FileComponent } from './file/file.component';
import { FileService } from './file.service';
@NgModule({ @NgModule({
declarations: [ declarations: [
...@@ -38,4 +36,5 @@ import { FileService } from './file.service'; ...@@ -38,4 +36,5 @@ import { FileService } from './file.service';
bootstrap: [AppComponent], bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA] schemas: [CUSTOM_ELEMENTS_SCHEMA]
}) })
export class AppModule { } export class AppModule {
}
<div class="container"> <div class="container">
<div class="card" id="ps" [innerHTML]="problem.problem_statement"> <div [innerHTML]="problem.problem_statement" class="card" id="ps">
</div> </div>
<div id="toggle-lang">C++</div> <div id="toggle-lang">C++</div>
<div id="attempt"> <div id="attempt">
...@@ -8,5 +8,6 @@ ...@@ -8,5 +8,6 @@
<button id="submit">Submit Code</button> <button id="submit">Submit Code</button>
</div> </div>
<label for="editor"></label> <label for="editor"></label>
<textarea name="editor" id="editor"></textarea> <textarea id="editor" name="editor"></textarea>
</div> </div>
<app-input></app-input>
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', () => { describe('ArenaComponent', () => {
let component: ArenaComponent; let component: ArenaComponent;
...@@ -8,7 +8,7 @@ describe('ArenaComponent', () => { ...@@ -8,7 +8,7 @@ describe('ArenaComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ ArenaComponent ] declarations: [ArenaComponent]
}) })
.compileComponents(); .compileComponents();
}); });
......
...@@ -2,6 +2,8 @@ import {Component, OnInit} from '@angular/core'; ...@@ -2,6 +2,8 @@ import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router'; import {Router} from '@angular/router';
import {Problem} from '../problem'; import {Problem} from '../problem';
import {ProblemService} from '../problem.service'; import {ProblemService} from '../problem.service';
import {File} from '../file';
import {ApiService} from '../api.service';
declare const CodeMirror: any; declare const CodeMirror: any;
...@@ -14,8 +16,9 @@ export class ArenaComponent implements OnInit { ...@@ -14,8 +16,9 @@ export class ArenaComponent implements OnInit {
id: number; id: number;
problem: Problem; problem: Problem;
files: File[] = [];
constructor(public router: Router, private problemService: ProblemService) { constructor(public router: Router, private problemService: ProblemService, private apiService: ApiService) {
} }
ngOnInit(): void { ngOnInit(): void {
...@@ -34,11 +37,12 @@ export class ArenaComponent implements OnInit { ...@@ -34,11 +37,12 @@ export class ArenaComponent implements OnInit {
Object.assign((document.getElementsByClassName('CodeMirror')[0] as HTMLTextAreaElement).style, { Object.assign((document.getElementsByClassName('CodeMirror')[0] as HTMLTextAreaElement).style, {
borderBottom: '1px solid #ddf', borderBottom: '1px solid #ddf',
padding: '20px', padding: '20px',
fontFamily: '"Space Mono", monospace', fontFamily: '"Anonymous Pro", monospace',
}); });
let activeLang = 0; let activeLang = 0;
const langs = ['C++', 'Python', 'Java']; const langs = ['C++', 'Python', 'Java'];
const extensions = ['.cpp', '.py', '.java'];
const langsMime = ['text/x-c++src', 'text/x-python', 'text/x-java']; const langsMime = ['text/x-c++src', 'text/x-python', 'text/x-java'];
const problem = this.problem; const problem = this.problem;
...@@ -51,6 +55,18 @@ export class ArenaComponent implements OnInit { ...@@ -51,6 +55,18 @@ export class ArenaComponent implements OnInit {
editor.setOption('mode', langsMime[activeLang]); 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 { getProblem(): void {
......
import { Injectable } from '@angular/core'; import {Injectable} from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, CanActivate, Router } from '@angular/router'; import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';
import { ApiService } from './api.service'; import {ApiService} from './api.service';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
export class AuthGuard implements CanActivate { export class AuthGuard implements CanActivate {
constructor(private dataService: ApiService, private router: Router) { } constructor(private dataService: ApiService, private router: Router) {
}
canActivate( canActivate(
route: ActivatedRouteSnapshot, route: ActivatedRouteSnapshot,
state: RouterStateSnapshot state: RouterStateSnapshot
...@@ -21,6 +23,6 @@ export class AuthGuard implements CanActivate { ...@@ -21,6 +23,6 @@ export class AuthGuard implements CanActivate {
return true; return true;
} }
this.dataService.redirectUrl = routeUrl; this.dataService.redirectUrl = routeUrl;
this.router.navigate(['/login'], { queryParams: { returnUrl: routeUrl } }); this.router.navigate(['/login'], {queryParams: {returnUrl: routeUrl}});
} }
} }
import { TestBed } from '@angular/core/testing'; import {TestBed} from '@angular/core/testing';
import { FileService } from './file.service'; import {FileService} from './file.service';
describe('FileService', () => { describe('FileService', () => {
let service: FileService; let service: FileService;
......
import { Injectable } from '@angular/core'; import {Injectable} from '@angular/core';
import { File } from './file'; import {File} from './file';
import { Observable, of } from 'rxjs'; import {Observable, of} from 'rxjs';
import { HttpClient } from '@angular/common/http'; import {HttpClient} from '@angular/common/http';
@Injectable({ @Injectable({
...@@ -11,7 +11,8 @@ export class FileService { ...@@ -11,7 +11,8 @@ export class FileService {
baseApiUrl = 'https://file.io'; baseApiUrl = 'https://file.io';
constructor(private http: HttpClient) { } constructor(private http: HttpClient) {
}
getFiles(): Observable<File[]> { getFiles(): Observable<File[]> {
......
...@@ -52,13 +52,13 @@ ...@@ -52,13 +52,13 @@
<div [class.open]="uploadPopupActive" id="file-upload-popup"> <div [class.open]="uploadPopupActive" id="file-upload-popup">
<p>Upload a file:</p> <p>Upload a file:</p>
<input id="file-upload-input" type="file" (change)="onChange($event)"> <input (change)="onChange($event)" id="file-upload-input" type="file">
<div style="margin-top: 10px" *ngIf="shortLink !== ''"> <div *ngIf="shortLink !== ''" style="margin-top: 10px">
<a target="_blank" href="{{shortLink}}">Link to last upload</a> <a href="{{shortLink}}" target="_blank">Link to last upload</a>
</div> </div>
<p *ngIf="!loading"> <p *ngIf="!loading">
<button id="upload-cancel-btn" (click)="uploadPopupActive = false;">Close</button> <button (click)="uploadPopupActive = false;" id="upload-cancel-btn">Close</button>
<button id="file-upload-btn" (click)="onUpload()">Upload</button> <button (click)="onUpload()" id="file-upload-btn">Upload</button>
</p> </p>
<p *ngIf="loading" style="margin-top: 20px; text-align: center"> <p *ngIf="loading" style="margin-top: 20px; text-align: center">
Uploading... Uploading...
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
button { button {
float: right; float: right;
border:none; border: none;
} }
.title { .title {
......
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', () => { describe('FileComponent', () => {
let component: FileComponent; let component: FileComponent;
...@@ -8,7 +8,7 @@ describe('FileComponent', () => { ...@@ -8,7 +8,7 @@ describe('FileComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ FileComponent ] declarations: [FileComponent]
}) })
.compileComponents(); .compileComponents();
}); });
......
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', () => { describe('HeaderComponent', () => {
let component: HeaderComponent; let component: HeaderComponent;
...@@ -8,7 +8,7 @@ describe('HeaderComponent', () => { ...@@ -8,7 +8,7 @@ describe('HeaderComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ HeaderComponent ] declarations: [HeaderComponent]
}) })
.compileComponents(); .compileComponents();
}); });
......
import { Component, OnInit } from '@angular/core'; import {Component, OnInit} from '@angular/core';
import { ApiService } from '../api.service'; import {ApiService} from '../api.service';
@Component({ @Component({
selector: 'app-header', selector: 'app-header',
......
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', () => { describe('HomeComponent', () => {
let component: HomeComponent; let component: HomeComponent;
...@@ -8,7 +8,7 @@ describe('HomeComponent', () => { ...@@ -8,7 +8,7 @@ describe('HomeComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ HomeComponent ] declarations: [HomeComponent]
}) })
.compileComponents(); .compileComponents();
}); });
......
import { Component, OnInit } from '@angular/core'; import {Component, OnInit} from '@angular/core';
import { ProblemService } from '../problem.service'; import {ProblemService} from '../problem.service';
import { Problem } from '../problem'; import {Problem} from '../problem';
@Component({ @Component({
selector: 'app-home', selector: 'app-home',
...@@ -9,9 +9,11 @@ import { Problem } from '../problem'; ...@@ -9,9 +9,11 @@ import { Problem } from '../problem';
}) })
export class HomeComponent implements OnInit { export class HomeComponent implements OnInit {
constructor(private problemService: ProblemService) { }
problems: Problem[]; problems: Problem[];
constructor(private problemService: ProblemService) {
}
ngOnInit(): void { ngOnInit(): void {
this.getProblems(); this.getProblems();
} }
......
<div id="compile-cover" [class.open]="isActive"></div> <div [class.open]="isActive" id="compile-cover"></div>
<div id="compile-popup" [class.open]="isActive"> <div [class.open]="isActive" id="compile-popup">
<p id="compile-status" [innerHTML]="statusVal"></p> <p [innerHTML]="statusVal" id="compile-status"></p>
<button id="compile-done" [class.disabled]="resultVal === 0" (click)="resultVal !== 0 && setState(false)">Done</button> <button (click)="resultVal !== 0 && setState(false)" [class.disabled]="resultVal === 0" id="compile-done">Done
</button>
</div> </div>
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', () => { describe('IdeCompileComponent', () => {
let component: IdeCompileComponent; let component: IdeCompileComponent;
...@@ -8,7 +8,7 @@ describe('IdeCompileComponent', () => { ...@@ -8,7 +8,7 @@ describe('IdeCompileComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ IdeCompileComponent ] declarations: [IdeCompileComponent]
}) })
.compileComponents(); .compileComponents();
}); });
......
import { Component, OnInit, Input } from '@angular/core'; import {Component, Input, OnInit} from '@angular/core';
@Component({ @Component({
selector: 'app-ide-compile', selector: 'app-ide-compile',
...@@ -9,15 +9,18 @@ export class IdeCompileComponent implements OnInit { ...@@ -9,15 +9,18 @@ export class IdeCompileComponent implements OnInit {
@Input() statusVal: string; @Input() statusVal: string;
@Input() resultVal: number; @Input() resultVal: number;
isActive = false; isActive = false;
constructor() { }
ngOnInit(): void { } constructor() {
setState(inp: boolean): void {
this.isActive = inp;
} }
set status(value: string) { set status(value: string) {
this.statusVal = value; this.statusVal = value;
} }
ngOnInit(): void {
}
setState(inp: boolean): void {
this.isActive = inp;
}
} }
...@@ -3,13 +3,15 @@ ...@@ -3,13 +3,15 @@
<div id="attempt"> <div id="attempt">
<span *ngIf="!isUpToDate"></span> <span *ngIf="!isUpToDate"></span>
<span id="ideFileName">{{file.filename + file.language}}</span> <span id="ideFileName">{{file.filename + file.language}}</span>
<button id="inputBtn" (click)="inputField.setState(true);">Input</button> <button (click)="inputField.setState(true);" id="inputBtn">Input</button>
<button id="runBtn" (click)="this.runField.isActive = true; this.runCodeService.run()">Run Code</button> <button (click)="this.runField.isActive = true; this.runCodeService.run()" id="runBtn">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)="!isSaved ? this.saveField.setState(true) : updateFile();"
[class.disabled]="isUploading || isUpToDate"
id="saveBtn">{{isUploading ? "Saving File..." : "Save File"}}</button>
</div> </div>
<label for="editor"></label> <label for="editor"></label>
<textarea name="editor" id="editor" value="{{inp}}"></textarea> <textarea id="editor" name="editor" value="{{inp}}"></textarea>
</div> </div>
<app-input (valueEmit)="updateInput($event)"></app-input> <app-input (valueEmit)="updateInput($event)"></app-input>
<app-ide-compile [statusVal]="runCodeService.status" [resultVal]="runCodeService.result"></app-ide-compile> <app-ide-compile [resultVal]="runCodeService.result" [statusVal]="runCodeService.status"></app-ide-compile>
<app-save-file [file]="file" (savedFile)="isSaved = isUpToDate = true;"></app-save-file> <app-save-file (savedFile)="isSaved = isUpToDate = true;" [file]="file"></app-save-file>
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', () => { describe('IdeComponent', () => {
let component: IdeComponent; let component: IdeComponent;
...@@ -8,7 +8,7 @@ describe('IdeComponent', () => { ...@@ -8,7 +8,7 @@ describe('IdeComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ IdeComponent ] declarations: [IdeComponent]
}) })
.compileComponents(); .compileComponents();
}); });
......
...@@ -50,7 +50,7 @@ export class IdeComponent implements OnInit { ...@@ -50,7 +50,7 @@ export class IdeComponent implements OnInit {
Object.assign((document.getElementsByClassName('CodeMirror')[0] as HTMLTextAreaElement).style, { Object.assign((document.getElementsByClassName('CodeMirror')[0] as HTMLTextAreaElement).style, {
borderBottom: '1px solid #ddf', borderBottom: '1px solid #ddf',
padding: '20px', padding: '20px',
fontFamily: '"Space Mono", monospace', fontFamily: '"Anonymous Pro", monospace',
}); });
let activeLang = 0; let activeLang = 0;
......
<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> <label for="inp" id="title">Enter the input:</label>
<br> <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> <br>
<button id="done" (click)="this.setState(false);">Done</button> <button (click)="this.setState(false);" id="done">Done</button>
</div> </div>
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
font-size: 1.1em; font-size: 1.1em;
background: transparent; background: transparent;
border: none; border: none;
font-family: 'Space Mono', monospace; font-family: 'Anonymous Pro', monospace;
resize: none; resize: none;
} }
......
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', () => { describe('InputComponent', () => {
let component: InputComponent; let component: InputComponent;
...@@ -8,7 +8,7 @@ describe('InputComponent', () => { ...@@ -8,7 +8,7 @@ describe('InputComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ InputComponent ] declarations: [InputComponent]
}) })
.compileComponents(); .compileComponents();
}); });
......
import { Component, OnInit, EventEmitter, Output } from '@angular/core'; import {Component, EventEmitter, OnInit, Output} from '@angular/core';
@Component({ @Component({
selector: 'app-input', selector: 'app-input',
...@@ -9,9 +9,12 @@ export class InputComponent implements OnInit { ...@@ -9,9 +9,12 @@ export class InputComponent implements OnInit {
isActive = false; isActive = false;
value: string; value: string;
@Output() valueEmit = new EventEmitter<string>(); @Output() valueEmit = new EventEmitter<string>();
constructor() { }
ngOnInit(): void { } constructor() {
}
ngOnInit(): void {
}
setState(value: boolean): void { setState(value: boolean): void {
const text = document.getElementById('inp') as HTMLTextAreaElement; const text = document.getElementById('inp') as HTMLTextAreaElement;
......
<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"> <div class="form-row">
<label for="username">Username</label> <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>
<div class="form-row"> <div class="form-row">
<label for="password">Password</label> <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>
<div class="form-row"> <div class="form-row">
<input id="submit" value="Submit" type="submit"> <input id="submit" type="submit" value="Submit">
</div> </div>
</form> </form>
......
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', () => { describe('LoginComponent', () => {
let component: LoginComponent; let component: LoginComponent;
...@@ -8,7 +8,7 @@ describe('LoginComponent', () => { ...@@ -8,7 +8,7 @@ describe('LoginComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ LoginComponent ] declarations: [LoginComponent]
}) })
.compileComponents(); .compileComponents();
}); });
......
import { TestBed } from '@angular/core/testing'; import {TestBed} from '@angular/core/testing';
import { ProblemService } from './problem.service'; import {ProblemService} from './problem.service';
describe('ProblemService', () => { describe('ProblemService', () => {
let service: ProblemService; let service: ProblemService;
......
import { Injectable } from '@angular/core'; import {Injectable} from '@angular/core';
import { Problem } from './problem'; import {Problem} from './problem';
import { Observable, of } from 'rxjs'; import {Observable, of} from 'rxjs';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
export class ProblemService { export class ProblemService {
constructor() { } constructor() {
}
getProblems(): Observable<Problem[]> { getProblems(): Observable<Problem[]> {
......
<form id="login_form" action="" [formGroup]="form" (ngSubmit)="postData(form)"> <form (ngSubmit)="postData(form)" [formGroup]="form" action="" id="login_form">
<div class="form-row"> <div class="form-row">
<label for="name">Name</label> <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>
<div class="form-row"> <div class="form-row">
<label for="username">Username</label> <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>
<div class="form-row"> <div class="form-row">
<label for="email">Email</label> <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>
<div class="form-row"> <div class="form-row">
<label for="password">Password</label> <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>
<div class="form-row"> <div class="form-row">
<label for="confirm_password">Confirm Password</label> <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>
<div class="form-row"> <div class="form-row">
<input id="submit" value="Submit" type="submit"> <input id="submit" type="submit" value="Submit">
</div> </div>
</form> </form>
......
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', () => { describe('RegisterComponent', () => {
let component: RegisterComponent; let component: RegisterComponent;
...@@ -8,7 +8,7 @@ describe('RegisterComponent', () => { ...@@ -8,7 +8,7 @@ describe('RegisterComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ RegisterComponent ] declarations: [RegisterComponent]
}) })
.compileComponents(); .compileComponents();
}); });
......
import { Component, OnInit } from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {AbstractControl, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms'; import {AbstractControl, FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
import { first } from 'rxjs/operators'; import {first} from 'rxjs/operators';
import { ApiService } from '../api.service'; import {ApiService} from '../api.service';
@Component({ @Component({
selector: 'app-register', selector: 'app-register',
...@@ -11,6 +11,8 @@ import { ApiService } from '../api.service'; ...@@ -11,6 +11,8 @@ import { ApiService } from '../api.service';
export class RegisterComponent implements OnInit { export class RegisterComponent implements OnInit {
form: FormGroup; form: FormGroup;
timeout: any; timeout: any;
set: NodeListOf<HTMLInputElement>;
submitElement: HTMLInputElement;
constructor(private fb: FormBuilder, private dataService: ApiService) { constructor(private fb: FormBuilder, private dataService: ApiService) {
this.form = this.fb.group({ this.form = this.fb.group({
...@@ -22,8 +24,21 @@ export class RegisterComponent implements OnInit { ...@@ -22,8 +24,21 @@ export class RegisterComponent implements OnInit {
}); });
} }
set: NodeListOf<HTMLInputElement>; get email(): AbstractControl {
submitElement: HTMLInputElement; 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 { ngOnInit(): void {
this.submitElement = document.getElementById('submit') as HTMLInputElement; this.submitElement = document.getElementById('submit') as HTMLInputElement;
...@@ -44,8 +59,7 @@ export class RegisterComponent implements OnInit { ...@@ -44,8 +59,7 @@ export class RegisterComponent implements OnInit {
this.set.forEach(item => { this.set.forEach(item => {
if (item.value !== '' && item.value !== null) { if (item.value !== '' && item.value !== null) {
item.parentElement.querySelector('label').classList.add('active'); item.parentElement.querySelector('label').classList.add('active');
} } else {
else {
item.parentElement.querySelector('label').classList.remove('active'); item.parentElement.querySelector('label').classList.remove('active');
} }
}); });
...@@ -53,7 +67,9 @@ export class RegisterComponent implements OnInit { ...@@ -53,7 +67,9 @@ export class RegisterComponent implements OnInit {
postData(frm: any): void { postData(frm: any): void {
if (this.submitElement.classList.contains('disabled')) { return; } if (this.submitElement.classList.contains('disabled')) {
return;
}
this.submitElement.classList.add('disabled'); this.submitElement.classList.add('disabled');
if (this.form.get('name').invalid) { if (this.form.get('name').invalid) {
...@@ -148,10 +164,5 @@ export class RegisterComponent implements OnInit { ...@@ -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'); }
} }
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', () => { describe('RunCodeService', () => {
let service: RunCodeService; let service: RunCodeService;
......
import { Injectable } from '@angular/core'; import {Injectable} from '@angular/core';
import { Observable, of } from 'rxjs';
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
...@@ -9,6 +8,9 @@ export class RunCodeService { ...@@ -9,6 +8,9 @@ export class RunCodeService {
status = 'Compiling...'; status = 'Compiling...';
result = 0; result = 0;
constructor() {
}
run(): void { run(): void {
const output = `25 const output = `25
abcd abcd
...@@ -30,6 +32,4 @@ abcd ...@@ -30,6 +32,4 @@ abcd
this.result = 1; this.result = 1;
}, 6000); }, 6000);
} }
constructor() { }
} }
<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"> <div *ngIf="!isUploading">
<label for="filenameInput" id="filenameInputLabel">Enter Filename:</label><br> <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> <span>{{file.language}}</span>
<br> <br>
<button id="save-cancel" (click)="isActive = false">Cancel</button> <button (click)="isActive = false" id="save-cancel">Cancel</button>
<button id="save-done" [class.disabled]="file.filename === ''" (click)="file.filename !== '' && submitFile()">Done</button> <button (click)="file.filename !== '' && submitFile()" [class.disabled]="file.filename === ''" id="save-done">Done
</button>
</div> </div>
<div *ngIf="isUploading">Uploading...</div> <div *ngIf="isUploading">Uploading...</div>
</div> </div>
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', () => { describe('SaveFileComponent', () => {
let component: SaveFileComponent; let component: SaveFileComponent;
...@@ -8,7 +8,7 @@ describe('SaveFileComponent', () => { ...@@ -8,7 +8,7 @@ describe('SaveFileComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ SaveFileComponent ] declarations: [SaveFileComponent]
}) })
.compileComponents(); .compileComponents();
}); });
......
import {Component, OnInit, Output, EventEmitter, Input} from '@angular/core'; import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {FileService} from '../file.service'; import {FileService} from '../file.service';
import {File} from '../file'; import {File} from '../file';
import {Location} from '@angular/common'; import {Location} from '@angular/common';
......
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', () => { describe('TestcaseStatusComponent', () => {
let component: TestcaseStatusComponent; let component: TestcaseStatusComponent;
...@@ -8,7 +8,7 @@ describe('TestcaseStatusComponent', () => { ...@@ -8,7 +8,7 @@ describe('TestcaseStatusComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ TestcaseStatusComponent ] declarations: [TestcaseStatusComponent]
}) })
.compileComponents(); .compileComponents();
}); });
......
import { Component, OnInit } from '@angular/core'; import {Component, OnInit} from '@angular/core';
@Component({ @Component({
selector: 'app-testcase-status', selector: 'app-testcase-status',
...@@ -7,7 +7,8 @@ import { Component, OnInit } from '@angular/core'; ...@@ -7,7 +7,8 @@ import { Component, OnInit } from '@angular/core';
}) })
export class TestcaseStatusComponent implements OnInit { export class TestcaseStatusComponent implements OnInit {
constructor() { } constructor() {
}
ngOnInit(): void { ngOnInit(): void {
} }
......
<div class="container"> <div class="container">
<div class="card" id="user_cred"> <div class="card" id="user_cred">
<div id="grid1"> <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="name-and-id">
<div class="tc"> <div class="tc">
<div>{{user.name}}</div> <div>{{user.name}}</div>
...@@ -9,8 +9,12 @@ ...@@ -9,8 +9,12 @@
<div class="inline-code">{{user.username}}</div> <div class="inline-code">{{user.username}}</div>
<div class="inline-code"><i class="lnr lnr-star"></i> {{user.rating}}</div> <div class="inline-code"><i class="lnr lnr-star"></i> {{user.rating}}</div>
<div> <div>
<a href="" id="edit"><button>Edit Details</button></a> <a href="" id="edit">
<a href="" id=" Logout" (click)="logout()"><button>Logout</button></a> <button>Edit Details</button>
</a>
<a (click)="logout()" href="" id=" Logout">
<button>Logout</button>
</a>
</div> </div>
</div> </div>
</div> </div>
...@@ -31,7 +35,7 @@ ...@@ -31,7 +35,7 @@
</tr> </tr>
</table> </table>
<div id="canvas"> <div id="canvas">
<canvas id="myChart" width="100px" height="100px"></canvas> <canvas height="100px" id="myChart" width="100px"></canvas>
</div> </div>
</div> </div>
</div> </div>
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
height: 106px; height: 106px;
vertical-align: middle; vertical-align: middle;
&>div { & > div {
margin: 4px; margin: 4px;
.lnr { .lnr {
......
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', () => { describe('UserComponent', () => {
let component: UserComponent; let component: UserComponent;
...@@ -8,7 +8,7 @@ describe('UserComponent', () => { ...@@ -8,7 +8,7 @@ describe('UserComponent', () => {
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
declarations: [ UserComponent ] declarations: [UserComponent]
}) })
.compileComponents(); .compileComponents();
}); });
......
...@@ -7,32 +7,41 @@ var number, bumpOnly; ...@@ -7,32 +7,41 @@ var number, bumpOnly;
for (var i = 2; i < process.argv.length; i++) { for (var i = 2; i < process.argv.length; i++) {
if (process.argv[i] == "-bump") bumpOnly = true; if (process.argv[i] == "-bump") bumpOnly = true;
else if (/^\d+\.\d+\.\d+$/.test(process.argv[i])) number = process.argv[i]; 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) { function rewrite(file, f) {
fs.writeFileSync(file, f(fs.readFileSync(file, "utf8")), "utf8"); 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+"/, return lib.replace(/CodeMirror\.version = "\d+\.\d+\.\d+"/,
"CodeMirror.version = \"" + number + "\""); "CodeMirror.version = \"" + number + "\"");
}); });
function rewriteJSON(pack) { function rewriteJSON(pack) {
return pack.replace(/"version":\s*"\d+\.\d+\.\d+"/, "\"version\": \"" + number + "\""); return pack.replace(/"version":\s*"\d+\.\d+\.\d+"/, "\"version\": \"" + number + "\"");
} }
rewrite("package.json", rewriteJSON); 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>"); return manual.replace(/>version \d+\.\d+\.\d+<\/span>/, ">version " + number + "</span>");
}); });
if (bumpOnly) process.exit(0); 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>/, return index.replace(/\.zip">\d+\.\d+\.\d+<\/a>/,
".zip\">" + number + "</a>"); ".zip\">" + number + "</a>");
}); });
...@@ -27,20 +27,24 @@ if (!CodeMirror.modes[modeName]) ...@@ -27,20 +27,24 @@ if (!CodeMirror.modes[modeName])
require("../mode/" + modeName + "/" + modeName + ".js"); require("../mode/" + modeName + "/" + modeName + ".js");
function esc(str) { 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 code = fs.readFileSync("/dev/stdin", "utf8");
var curStyle = null, accum = ""; var curStyle = null, accum = "";
function flush() { function flush() {
if (curStyle) process.stdout.write("<span class=\"" + curStyle.replace(/(^|\s+)/g, "$1cm-") + "\">" + esc(accum) + "</span>"); if (curStyle) process.stdout.write("<span class=\"" + curStyle.replace(/(^|\s+)/g, "$1cm-") + "\">" + esc(accum) + "</span>");
else process.stdout.write(esc(accum)); else process.stdout.write(esc(accum));
} }
CodeMirror.runMode(code, lang, function(text, style) { CodeMirror.runMode(code, lang, function (text, style) {
if (style != curStyle) { if (style != curStyle) {
flush(); flush();
curStyle = style; accum = text; curStyle = style;
accum = text;
} else { } else {
accum += text; accum += text;
} }
......
...@@ -2,15 +2,18 @@ ...@@ -2,15 +2,18 @@
<title>CodeMirror: Active Line Demo</title> <title>CodeMirror: Active Line Demo</title>
<meta charset="utf-8"/> <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="../lib/codemirror.js"></script>
<script src="../mode/xml/xml.js"></script> <script src="../mode/xml/xml.js"></script>
<script src="../addon/selection/active-line.js"></script> <script src="../addon/selection/active-line.js"></script>
<style> <style>
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;} .CodeMirror {
</style> border-top: 1px solid black;
border-bottom: 1px solid black;
}
</style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -25,17 +28,16 @@ ...@@ -25,17 +28,16 @@
</div> </div>
<article> <article>
<h2>Active Line Demo</h2> <h2>Active Line Demo</h2>
<form><textarea id="code" name="code"> <form><textarea id="code" name="code">
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:georss="http://www.georss.org/georss"
xmlns:twitter="http://api.twitter.com"> xmlns:twitter="http://api.twitter.com">
<channel> <channel>
<title>Twitter / codemirror</title> <title>Twitter / codemirror</title>
<link>http://twitter.com/codemirror</link> <link>http://twitter.com/codemirror</link>
<atom:link type="application/rss+xml" <atom:link href="http://twitter.com/statuses/user_timeline/242283288.rss"
href="http://twitter.com/statuses/user_timeline/242283288.rss" rel="self"/> rel="self" type="application/rss+xml"/>
<description>Twitter updates from CodeMirror / codemirror.</description> <description>Twitter updates from CodeMirror / codemirror.</description>
<language>en-us</language> <language>en-us</language>
<ttl>40</ttl> <ttl>40</ttl>
...@@ -65,24 +67,24 @@ ...@@ -65,24 +67,24 @@
</rss></textarea></form> </rss></textarea></form>
<script> <script>
var nonEmpty = false; var nonEmpty = false;
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "application/xml", mode: "application/xml",
styleActiveLine: true, styleActiveLine: true,
lineNumbers: true, lineNumbers: true,
lineWrapping: true lineWrapping: true
}); });
function toggleSelProp() { function toggleSelProp() {
nonEmpty = !nonEmpty; nonEmpty = !nonEmpty;
editor.setOption("styleActiveLine", {nonEmpty: nonEmpty}); editor.setOption("styleActiveLine", {nonEmpty: nonEmpty});
var label = nonEmpty ? 'Disable nonEmpty option' : 'Enable nonEmpty option'; var label = nonEmpty ? 'Disable nonEmpty option' : 'Enable nonEmpty option';
document.getElementById('toggleButton').innerText = label; document.getElementById('toggleButton').innerText = label;
} }
</script> </script>
<p>Styling the current cursor line.</p> <p>Styling the current cursor line.</p>
<button onclick="toggleSelProp()" id="toggleButton">Enable <code>nonEmpty</code> option</button> <button id="toggleButton" onclick="toggleSelProp()">Enable <code>nonEmpty</code> option</button>
</article> </article>
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
<title>CodeMirror: Any Word Completion Demo</title> <title>CodeMirror: Any Word Completion Demo</title>
<meta charset="utf-8"/> <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">
<link rel="stylesheet" href="../addon/hint/show-hint.css"> <link href="../addon/hint/show-hint.css" rel="stylesheet">
<script src="../lib/codemirror.js"></script> <script src="../lib/codemirror.js"></script>
<script src="../addon/hint/show-hint.js"></script> <script src="../addon/hint/show-hint.js"></script>
<script src="../addon/hint/anyword-hint.js"></script> <script src="../addon/hint/anyword-hint.js"></script>
...@@ -24,8 +24,8 @@ ...@@ -24,8 +24,8 @@
</div> </div>
<article> <article>
<h2>Any Word Completion Demo</h2> <h2>Any Word Completion Demo</h2>
<form><textarea id="code" name="code"> <form><textarea id="code" name="code">
(function() { (function() {
"use strict"; "use strict";
...@@ -61,14 +61,14 @@ ...@@ -61,14 +61,14 @@
})(); })();
</textarea></form> </textarea></form>
<p>Press <strong>ctrl-space</strong> to activate autocompletion. The <p>Press <strong>ctrl-space</strong> to activate autocompletion. The
completion uses completion uses
the <a href="../doc/manual.html#addon_anyword-hint">anyword-hint.js</a> 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 module, which simply looks at nearby words in the buffer and completes
to those.</p> to those.</p>
<script> <script>
CodeMirror.commands.autocomplete = function(cm) { CodeMirror.commands.autocomplete = function (cm) {
cm.showHint({hint: CodeMirror.hint.anyword}); cm.showHint({hint: CodeMirror.hint.anyword});
} }
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
...@@ -76,4 +76,4 @@ to those.</p> ...@@ -76,4 +76,4 @@ to those.</p>
extraKeys: {"Ctrl-Space": "autocomplete"} extraKeys: {"Ctrl-Space": "autocomplete"}
}); });
</script> </script>
</article> </article>
...@@ -2,14 +2,20 @@ ...@@ -2,14 +2,20 @@
<title>CodeMirror: Bi-directional Text Demo</title> <title>CodeMirror: Bi-directional Text Demo</title>
<meta charset="utf-8"/> <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="../lib/codemirror.js"></script>
<script src="../mode/xml/xml.js"></script> <script src="../mode/xml/xml.js"></script>
<style> <style>
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;} .CodeMirror {
fieldset {border: none} border-top: 1px solid black;
border-bottom: 1px solid black;
}
fieldset {
border: none
}
</style> </style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -25,9 +31,9 @@ ...@@ -25,9 +31,9 @@
</div> </div>
<article> <article>
<h2>Bi-directional Text Demo</h2> <h2>Bi-directional Text Demo</h2>
<form><textarea id="code" name="code"><!-- Piece of the CodeMirror manual, 'translated' into Arabic by Google Translate --> <form><textarea id="code" name="code"><!-- Piece of the CodeMirror manual, 'translated' into Arabic by Google Translate -->
<!-- قطعة من دليل CodeMirror، "ترجم" إلى العربية بواسطة جوجل ترجمة --> <!-- قطعة من دليل CodeMirror، "ترجم" إلى العربية بواسطة جوجل ترجمة -->
<dl> <dl>
<dt id=option_value><code>value (string or Doc)</code></dt> <dt id=option_value><code>value (string or Doc)</code></dt>
...@@ -57,47 +63,52 @@ ...@@ -57,47 +63,52 @@
</textarea> </textarea>
<fieldset> <fieldset>
Editor default direction: Editor default direction:
<input type="radio" id="ltr" name="direction"/><label for="ltr">LTR</label> <input id="ltr" name="direction" type="radio"/><label for="ltr">LTR</label>
<input type="radio" id="rtl" name="direction"/><label for="rtl">RTL</label> <input id="rtl" name="direction" type="radio"/><label for="rtl">RTL</label>
</fieldset> </fieldset>
<fieldset> <fieldset>
HTML document direction: HTML document direction:
<input type="radio" id="htmlltr" name="htmldirection"/><label for="htmlltr">LTR</label> <input id="htmlltr" name="htmldirection" type="radio"/><label for="htmlltr">LTR</label>
<input type="radio" id="htmlrtl" name="htmldirection"/><label for="htmlrtl">RTL</label> <input id="htmlrtl" name="htmldirection" type="radio"/><label for="htmlrtl">RTL</label>
</fieldset> </fieldset>
<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> </fieldset>
</form> </form>
<script> <script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "text/html", mode: "text/html",
lineNumbers: true, lineNumbers: true,
lineWrapping: true, lineWrapping: true,
direction: "rtl" direction: "rtl"
}); });
var dirRadios = {ltr: document.getElementById("ltr"), var dirRadios = {
rtl: document.getElementById("rtl")}; ltr: document.getElementById("ltr"),
dirRadios[editor.getOption("direction")].checked = true; rtl: document.getElementById("rtl")
dirRadios["rtl"].onchange = dirRadios["ltr"].onchange = function() { };
dirRadios[editor.getOption("direction")].checked = true;
dirRadios["rtl"].onchange = dirRadios["ltr"].onchange = function () {
editor.setOption("direction", dirRadios["rtl"].checked ? "rtl" : "ltr"); editor.setOption("direction", dirRadios["rtl"].checked ? "rtl" : "ltr");
}; };
var HtmlDirRadios = {ltr: document.getElementById("htmlltr"), var HtmlDirRadios = {
rtl: document.getElementById("htmlrtl")}; ltr: document.getElementById("htmlltr"),
HtmlDirRadios["ltr"].checked = true; rtl: document.getElementById("htmlrtl")
HtmlDirRadios["rtl"].onchange = HtmlDirRadios["ltr"].onchange = function() { };
HtmlDirRadios["ltr"].checked = true;
HtmlDirRadios["rtl"].onchange = HtmlDirRadios["ltr"].onchange = function () {
document.dir = (HtmlDirRadios["rtl"].checked ? "rtl" : "ltr"); document.dir = (HtmlDirRadios["rtl"].checked ? "rtl" : "ltr");
}; };
var moveCheckbox = document.getElementById("rtlMoveVisually"); var moveCheckbox = document.getElementById("rtlMoveVisually");
moveCheckbox.checked = editor.getOption("rtlMoveVisually"); moveCheckbox.checked = editor.getOption("rtlMoveVisually");
moveCheckbox.onchange = function() { moveCheckbox.onchange = function () {
editor.setOption("rtlMoveVisually", moveCheckbox.checked); editor.setOption("rtlMoveVisually", moveCheckbox.checked);
}; };
</script> </script>
<p>Demonstration of bi-directional text support. See <p>Demonstration of bi-directional text support. See
the <a href="http://marijnhaverbeke.nl/blog/cursor-in-bidi-text.html">related the <a href="http://marijnhaverbeke.nl/blog/cursor-in-bidi-text.html">related
......
...@@ -2,14 +2,22 @@ ...@@ -2,14 +2,22 @@
<title>CodeMirror: B-Tree visualization</title> <title>CodeMirror: B-Tree visualization</title>
<meta charset="utf-8"/> <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="../lib/codemirror.js"></script>
<style> <style>
.lineblock { display: inline-block; margin: 1px; height: 5px; } .lineblock {
.CodeMirror {border: 1px solid #aaa; height: 400px} display: inline-block;
</style> margin: 1px;
height: 5px;
}
.CodeMirror {
border: 1px solid #aaa;
height: 400px
}
</style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -24,23 +32,23 @@ ...@@ -24,23 +32,23 @@
</div> </div>
<article> <article>
<h2>B-Tree visualization</h2> <h2>B-Tree visualization</h2>
<form><textarea id="code" name="code">type here, see a summary of the document b-tree below</textarea></form> <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> <div id="output" style="display: inline-block; height: 402px; overflow-y: auto"></div>
<script id="me"> <script id="me">
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true, lineNumbers: true,
lineWrapping: true lineWrapping: true
}); });
var updateTimeout; var updateTimeout;
editor.on("change", function(cm) { editor.on("change", function (cm) {
clearTimeout(updateTimeout); clearTimeout(updateTimeout);
updateTimeout = setTimeout(updateVisual, 200); updateTimeout = setTimeout(updateVisual, 200);
}); });
updateVisual(); updateVisual();
function updateVisual() { function updateVisual() {
var out = document.getElementById("output"); var out = document.getElementById("output");
out.innerHTML = ""; out.innerHTML = "";
...@@ -49,7 +57,8 @@ function updateVisual() { ...@@ -49,7 +57,8 @@ function updateVisual() {
out.appendChild(document.createElement("div")).innerHTML = out.appendChild(document.createElement("div")).innerHTML =
"<b>leaf</b>: " + node.lines.length + " lines, " + Math.round(node.height) + " px"; "<b>leaf</b>: " + node.lines.length + " lines, " + Math.round(node.height) + " px";
var lines = out.appendChild(document.createElement("div")); 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) { for (var i = 0; i < node.lines.length; ++i) {
var line = node.lines[i], lineElt = lines.appendChild(document.createElement("div")); var line = node.lines[i], lineElt = lines.appendChild(document.createElement("div"));
lineElt.className = "lineblock"; lineElt.className = "lineblock";
...@@ -67,17 +76,25 @@ function updateVisual() { ...@@ -67,17 +76,25 @@ function updateVisual() {
drawTree(sub, node.children[i]); drawTree(sub, node.children[i]);
} }
} }
drawTree(out, editor.getDoc()); drawTree(out, editor.getDoc());
} }
function fillEditor() { function fillEditor() {
var sc = document.getElementById("me"); var sc = document.getElementById("me");
var doc = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, "") + "\n"; 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); editor.setValue(doc);
} }
</script> </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>
...@@ -2,15 +2,18 @@ ...@@ -2,15 +2,18 @@
<title>CodeMirror: Multiple Buffer & Split View Demo</title> <title>CodeMirror: Multiple Buffer & Split View Demo</title>
<meta charset="utf-8"/> <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="../lib/codemirror.js"></script>
<script src="../mode/javascript/javascript.js"></script> <script src="../mode/javascript/javascript.js"></script>
<script src="../mode/css/css.js"></script> <script src="../mode/css/css.js"></script>
<style id=style> <style id=style>
.CodeMirror {border: 1px solid black; height: 250px;} .CodeMirror {
</style> border: 1px solid black;
height: 250px;
}
</style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -25,42 +28,44 @@ ...@@ -25,42 +28,44 @@
</div> </div>
<article> <article>
<h2>Multiple Buffer & Split View Demo</h2> <h2>Multiple Buffer & Split View Demo</h2>
<div id=code_top></div> <div id=code_top></div>
<div> <div>
Select buffer: <select id=buffers_top></select> 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>
<div id=code_bot></div> <div id=code_bot></div>
<div> <div>
Select buffer: <select id=buffers_bot></select> 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> </div>
<script id=script> <script id=script>
var sel_top = document.getElementById("buffers_top"); var sel_top = document.getElementById("buffers_top");
CodeMirror.on(sel_top, "change", function() { CodeMirror.on(sel_top, "change", function () {
selectBuffer(ed_top, sel_top.options[sel_top.selectedIndex].value); selectBuffer(ed_top, sel_top.options[sel_top.selectedIndex].value);
}); });
var sel_bot = document.getElementById("buffers_bot"); var sel_bot = document.getElementById("buffers_bot");
CodeMirror.on(sel_bot, "change", function() { CodeMirror.on(sel_bot, "change", function () {
selectBuffer(ed_bot, sel_bot.options[sel_bot.selectedIndex].value); 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); buffers[name] = CodeMirror.Doc(text, mode);
var opt = document.createElement("option"); var opt = document.createElement("option");
opt.appendChild(document.createTextNode(name)); opt.appendChild(document.createTextNode(name));
sel_top.appendChild(opt); sel_top.appendChild(opt);
sel_bot.appendChild(opt.cloneNode(true)); sel_bot.appendChild(opt.cloneNode(true));
} }
function newBuf(where) { function newBuf(where) {
var name = prompt("Name for the buffer", "*scratch*"); var name = prompt("Name for the buffer", "*scratch*");
if (name == null) return; if (name == null) return;
if (buffers.hasOwnProperty(name)) { if (buffers.hasOwnProperty(name)) {
...@@ -71,34 +76,37 @@ function newBuf(where) { ...@@ -71,34 +76,37 @@ function newBuf(where) {
selectBuffer(where == "top" ? ed_top : ed_bot, name); selectBuffer(where == "top" ? ed_top : ed_bot, name);
var sel = where == "top" ? sel_top : sel_bot; var sel = where == "top" ? sel_top : sel_bot;
sel.value = name; sel.value = name;
} }
function selectBuffer(editor, name) { function selectBuffer(editor, name) {
var buf = buffers[name]; var buf = buffers[name];
if (buf.getEditor()) buf = buf.linkedDoc({sharedHist: true}); if (buf.getEditor()) buf = buf.linkedDoc({sharedHist: true});
var old = editor.swapDoc(buf); var old = editor.swapDoc(buf);
var linked = old.iterLinkedDocs(function(doc) {linked = doc;}); var linked = old.iterLinkedDocs(function (doc) {
linked = doc;
});
if (linked) { if (linked) {
// Make sure the document in buffers is the one the other view is looking at // 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; for (var name in buffers) if (buffers[name] == old) buffers[name] = linked;
old.unlinkDoc(linked); old.unlinkDoc(linked);
} }
editor.focus(); editor.focus();
} }
function nodeContent(id) { function nodeContent(id) {
var node = document.getElementById(id), val = node.textContent || node.innerText; 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"; val = val.slice(val.match(/^\s*/)[0].length, val.length - val.match(/\s*$/)[0].length) + "\n";
return val; 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}); var ed_top = CodeMirror(document.getElementById("code_top"), {lineNumbers: true});
selectBuffer(ed_top, "js"); selectBuffer(ed_top, "js");
var ed_bot = CodeMirror(document.getElementById("code_bot"), {lineNumbers: true}); var ed_bot = CodeMirror(document.getElementById("code_bot"), {lineNumbers: true});
selectBuffer(ed_bot, "js"); selectBuffer(ed_bot, "js");
</script> </script>
<p>Demonstration of <p>Demonstration of
using <a href="../doc/manual.html#linkedDoc">linked documents</a> using <a href="../doc/manual.html#linkedDoc">linked documents</a>
...@@ -106,4 +114,4 @@ selectBuffer(ed_bot, "js"); ...@@ -106,4 +114,4 @@ selectBuffer(ed_bot, "js");
using <a href="../doc/manual.html#swapDoc"><code>swapDoc</code></a> using <a href="../doc/manual.html#swapDoc"><code>swapDoc</code></a>
to use a single editor to display multiple documents.</p> to use a single editor to display multiple documents.</p>
</article> </article>
...@@ -2,15 +2,17 @@ ...@@ -2,15 +2,17 @@
<title>CodeMirror: Mode-Changing Demo</title> <title>CodeMirror: Mode-Changing Demo</title>
<meta charset="utf-8"/> <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="../lib/codemirror.js"></script>
<script src="../mode/javascript/javascript.js"></script> <script src="../mode/javascript/javascript.js"></script>
<script src="../mode/scheme/scheme.js"></script> <script src="../mode/scheme/scheme.js"></script>
<style> <style>
.CodeMirror {border: 1px solid black;} .CodeMirror {
</style> border: 1px solid black;
}
</style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -25,8 +27,8 @@ ...@@ -25,8 +27,8 @@
</div> </div>
<article> <article>
<h2>Mode-Changing Demo</h2> <h2>Mode-Changing Demo</h2>
<form><textarea id="code" name="code"> <form><textarea id="code" name="code">
;; If there is Scheme code in here, the editor will be in Scheme mode. ;; 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. ;; If you put in JS instead, it'll switch to JS mode.
...@@ -34,25 +36,27 @@ ...@@ -34,25 +36,27 @@
(* x x)) (* x x))
</textarea></form> </textarea></form>
<p>On changes to the content of the above editor, a (crude) script <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 tries to auto-detect the language used, and switches the editor to
either JavaScript or Scheme mode based on that.</p> either JavaScript or Scheme mode based on that.</p>
<script> <script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "scheme", mode: "scheme",
lineNumbers: true lineNumbers: true
}); });
var pending; var pending;
editor.on("change", function() { editor.on("change", function () {
clearTimeout(pending); clearTimeout(pending);
pending = setTimeout(update, 400); pending = setTimeout(update, 400);
}); });
function looksLikeScheme(code) { function looksLikeScheme(code) {
return !/^\s*\(\s*function\b/.test(code) && /^\s*[;\(]/.test(code); return !/^\s*\(\s*function\b/.test(code) && /^\s*[;\(]/.test(code);
} }
function update() { function update() {
editor.setOption("mode", looksLikeScheme(editor.getValue()) ? "scheme" : "javascript"); editor.setOption("mode", looksLikeScheme(editor.getValue()) ? "scheme" : "javascript");
} }
</script> </script>
</article> </article>
...@@ -2,15 +2,18 @@ ...@@ -2,15 +2,18 @@
<title>CodeMirror: Closebrackets Demo</title> <title>CodeMirror: Closebrackets Demo</title>
<meta charset="utf-8"/> <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="../lib/codemirror.js"></script>
<script src="../addon/edit/closebrackets.js"></script> <script src="../addon/edit/closebrackets.js"></script>
<script src="../mode/javascript/javascript.js"></script> <script src="../mode/javascript/javascript.js"></script>
<style> <style>
.CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;} .CodeMirror {
</style> border-top: 1px solid #888;
border-bottom: 1px solid #888;
}
</style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -25,8 +28,8 @@ ...@@ -25,8 +28,8 @@
</div> </div>
<article> <article>
<h2>Closebrackets Demo</h2> <h2>Closebrackets Demo</h2>
<form><textarea id="code" name="code">function Grid(width, height) { <form><textarea id="code" name="code">function Grid(width, height) {
this.width = width; this.width = width;
this.height = height; this.height = height;
this.cells = new Array(width * height); this.cells = new Array(width * height);
...@@ -49,4 +52,4 @@ Grid.prototype.moveValue = function(from, to) { ...@@ -49,4 +52,4 @@ Grid.prototype.moveValue = function(from, to) {
<script> <script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {autoCloseBrackets: true}); var editor = CodeMirror.fromTextArea(document.getElementById("code"), {autoCloseBrackets: true});
</script> </script>
</article> </article>
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
<title>CodeMirror: Close-Tag Demo</title> <title>CodeMirror: Close-Tag Demo</title>
<meta charset="utf-8"/> <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="../lib/codemirror.js"></script>
<script src="../addon/edit/closetag.js"></script> <script src="../addon/edit/closetag.js"></script>
<script src="../addon/fold/xml-fold.js"></script> <script src="../addon/fold/xml-fold.js"></script>
...@@ -13,8 +13,11 @@ ...@@ -13,8 +13,11 @@
<script src="../mode/css/css.js"></script> <script src="../mode/css/css.js"></script>
<script src="../mode/htmlmixed/htmlmixed.js"></script> <script src="../mode/htmlmixed/htmlmixed.js"></script>
<style> <style>
.CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;} .CodeMirror {
</style> border-top: 1px solid #888;
border-bottom: 1px solid #888;
}
</style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -29,8 +32,8 @@ ...@@ -29,8 +32,8 @@
</div> </div>
<article> <article>
<h2>Close-Tag Demo</h2> <h2>Close-Tag Demo</h2>
<form><textarea id="code" name="code"><html</textarea></form> <form><textarea id="code" name="code"><html</textarea></form>
<script> <script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
...@@ -38,4 +41,4 @@ ...@@ -38,4 +41,4 @@
autoCloseTags: true autoCloseTags: true
}); });
</script> </script>
</article> </article>
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
<title>CodeMirror: Autocomplete Demo</title> <title>CodeMirror: Autocomplete Demo</title>
<meta charset="utf-8"/> <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">
<link rel="stylesheet" href="../addon/hint/show-hint.css"> <link href="../addon/hint/show-hint.css" rel="stylesheet">
<script src="../lib/codemirror.js"></script> <script src="../lib/codemirror.js"></script>
<script src="../addon/hint/show-hint.js"></script> <script src="../addon/hint/show-hint.js"></script>
<script src="../addon/hint/javascript-hint.js"></script> <script src="../addon/hint/javascript-hint.js"></script>
...@@ -26,8 +26,8 @@ ...@@ -26,8 +26,8 @@
</div> </div>
<article> <article>
<h2>Autocomplete Demo</h2> <h2>Autocomplete Demo</h2>
<form><textarea id="code" name="code"> <form><textarea id="code" name="code">
function getCompletions(token, context) { function getCompletions(token, context) {
var found = [], start = token.string; var found = [], start = token.string;
function maybeAdd(str) { function maybeAdd(str) {
...@@ -65,31 +65,31 @@ function getCompletions(token, context) { ...@@ -65,31 +65,31 @@ function getCompletions(token, context) {
} }
</textarea></form> </textarea></form>
<p>Press <strong>ctrl-space</strong> to activate autocompletion. Built <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> 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> and <a href="../doc/manual.html#addon_javascript-hint"><code>javascript-hint</code></a>
addons.</p> 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 Here, the completion use an asynchronous hinting functions to provide
synonyms for each words. If your browser support `Promises`, the synonyms for each words. If your browser support `Promises`, the
hinting function can also return one. hinting function can also return one.
</textarea></form> </textarea></form>
<script> <script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true, lineNumbers: true,
extraKeys: {"Ctrl-Space": "autocomplete"}, extraKeys: {"Ctrl-Space": "autocomplete"},
mode: {name: "javascript", globalVars: true} mode: {name: "javascript", globalVars: true}
}); });
if (typeof Promise !== "undefined") { if (typeof Promise !== "undefined") {
var comp = [ var comp = [
["here", "hither"], ["here", "hither"],
["asynchronous", "nonsynchronous"], ["asynchronous", "nonsynchronous"],
["completion", "achievement", "conclusion", "culmination", "expirations"], ["completion", "achievement", "conclusion", "culmination", "expirations"],
["hinting", "advive", "broach", "imply"], ["hinting", "advive", "broach", "imply"],
["function","action"], ["function", "action"],
["provide", "add", "bring", "give"], ["provide", "add", "bring", "give"],
["synonyms", "equivalents"], ["synonyms", "equivalents"],
["words", "token"], ["words", "token"],
...@@ -97,17 +97,19 @@ if (typeof Promise !== "undefined") { ...@@ -97,17 +97,19 @@ if (typeof Promise !== "undefined") {
] ]
function synonyms(cm, option) { function synonyms(cm, option) {
return new Promise(function(accept) { return new Promise(function (accept) {
setTimeout(function() { setTimeout(function () {
var cursor = cm.getCursor(), line = cm.getLine(cursor.line) var cursor = cm.getCursor(), line = cm.getLine(cursor.line)
var start = cursor.ch, end = cursor.ch var start = cursor.ch, end = cursor.ch
while (start && /\w/.test(line.charAt(start - 1))) --start while (start && /\w/.test(line.charAt(start - 1))) --start
while (end < line.length && /\w/.test(line.charAt(end))) ++end while (end < line.length && /\w/.test(line.charAt(end))) ++end
var word = line.slice(start, end).toLowerCase() var word = line.slice(start, end).toLowerCase()
for (var i = 0; i < comp.length; i++) if (comp[i].indexOf(word) != -1) 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), from: CodeMirror.Pos(cursor.line, start),
to: CodeMirror.Pos(cursor.line, end)}) to: CodeMirror.Pos(cursor.line, end)
})
return accept(null) return accept(null)
}, 100) }, 100)
}) })
...@@ -120,7 +122,7 @@ if (typeof Promise !== "undefined") { ...@@ -120,7 +122,7 @@ if (typeof Promise !== "undefined") {
mode: "text/x-markdown", mode: "text/x-markdown",
hintOptions: {hint: synonyms} hintOptions: {hint: synonyms}
}) })
} }
</script> </script>
</article> </article>
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
<title>CodeMirror: Emacs bindings demo</title> <title>CodeMirror: Emacs bindings demo</title>
<meta charset="utf-8"/> <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">
<link rel="stylesheet" href="../addon/dialog/dialog.css"> <link href="../addon/dialog/dialog.css" rel="stylesheet">
<script src="../lib/codemirror.js"></script> <script src="../lib/codemirror.js"></script>
<script src="../mode/clike/clike.js"></script> <script src="../mode/clike/clike.js"></script>
<script src="../keymap/emacs.js"></script> <script src="../keymap/emacs.js"></script>
...@@ -15,8 +15,11 @@ ...@@ -15,8 +15,11 @@
<script src="../addon/search/searchcursor.js"></script> <script src="../addon/search/searchcursor.js"></script>
<script src="../addon/search/search.js"></script> <script src="../addon/search/search.js"></script>
<style> <style>
.CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee;} .CodeMirror {
</style> border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
</style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -31,12 +34,12 @@ ...@@ -31,12 +34,12 @@
</div> </div>
<article> <article>
<h2>Emacs bindings demo</h2> <h2>Emacs bindings demo</h2>
<form><textarea id="code" name="code"> <form><textarea id="code" name="code">
#include "syscalls.h" #include "syscalls.h"
/* getchar: simple buffered version */ /* getchar: simple buffered version */
int getchar(void) int getchar(void)
{ {
static char buf[BUFSIZ]; static char buf[BUFSIZ];
static char *bufp = buf; static char *bufp = buf;
static int n = 0; static int n = 0;
...@@ -48,22 +51,24 @@ int getchar(void) ...@@ -48,22 +51,24 @@ int getchar(void)
} }
</textarea></form> </textarea></form>
<p>The emacs keybindings are enabled by <p>The emacs keybindings are enabled by
including <a href="../keymap/emacs.js">keymap/emacs.js</a> and setting including <a href="../keymap/emacs.js">keymap/emacs.js</a> and setting
the <code>keyMap</code> option to <code>"emacs"</code>. Because the <code>keyMap</code> option to <code>"emacs"</code>. Because
CodeMirror's internal API is quite different from Emacs, they are only CodeMirror's internal API is quite different from Emacs, they are only
a loose approximation of actual emacs bindings, though.</p> a loose approximation of actual emacs bindings, though.</p>
<p>Also note that a lot of browsers disallow certain keys from being <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 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 result that idiomatic use of Emacs keys will constantly close your tab
or open a new window.</p> or open a new window.</p>
<script> <script>
CodeMirror.commands.save = function() { CodeMirror.commands.save = function () {
var elt = editor.getWrapperElement(); var elt = editor.getWrapperElement();
elt.style.background = "#def"; elt.style.background = "#def";
setTimeout(function() { elt.style.background = ""; }, 300); setTimeout(function () {
elt.style.background = "";
}, 300);
}; };
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true, lineNumbers: true,
...@@ -73,4 +78,4 @@ or open a new window.</p> ...@@ -73,4 +78,4 @@ or open a new window.</p>
}); });
</script> </script>
</article> </article>
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<title>CodeMirror: Code Folding Demo</title> <title>CodeMirror: Code Folding Demo</title>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css"> <link href="../doc/docs.css" rel=stylesheet>
<style> <style>
.some-css { .some-css {
...@@ -12,8 +12,8 @@ ...@@ -12,8 +12,8 @@
} }
</style> </style>
<link rel="stylesheet" href="../lib/codemirror.css"> <link href="../lib/codemirror.css" rel="stylesheet">
<link rel="stylesheet" href="../addon/fold/foldgutter.css" /> <link href="../addon/fold/foldgutter.css" rel="stylesheet"/>
<script src="../lib/codemirror.js"></script> <script src="../lib/codemirror.js"></script>
<script src="../addon/fold/foldcode.js"></script> <script src="../addon/fold/foldcode.js"></script>
<script src="../addon/fold/foldgutter.js"></script> <script src="../addon/fold/foldgutter.js"></script>
...@@ -29,7 +29,10 @@ ...@@ -29,7 +29,10 @@
<script src="../mode/python/python.js"></script> <script src="../mode/python/python.js"></script>
<script src="../mode/markdown/markdown.js"></script> <script src="../mode/markdown/markdown.js"></script>
<style> <style>
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;} .CodeMirror {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
</style> </style>
</head> </head>
...@@ -92,10 +95,10 @@ class Bar: ...@@ -92,10 +95,10 @@ class Bar:
<textarea id="code-markdown" name="code"></textarea></div> <textarea id="code-markdown" name="code"></textarea></div>
</form> </form>
<script id="script"> <script id="script">
/* /*
* Demonstration of code folding * Demonstration of code folding
*/ */
window.onload = function() { window.onload = function () {
var te = document.getElementById("code"); var te = document.getElementById("code");
var sc = document.getElementById("script"); var sc = document.getElementById("script");
te.value = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, ""); te.value = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, "");
...@@ -111,7 +114,11 @@ window.onload = function() { ...@@ -111,7 +114,11 @@ window.onload = function() {
mode: "javascript", mode: "javascript",
lineNumbers: true, lineNumbers: true,
lineWrapping: true, lineWrapping: true,
extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }}, extraKeys: {
"Ctrl-Q": function (cm) {
cm.foldCode(cm.getCursor());
}
},
foldGutter: true, foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
}); });
...@@ -121,7 +128,11 @@ window.onload = function() { ...@@ -121,7 +128,11 @@ window.onload = function() {
mode: {name: "javascript", json: true}, mode: {name: "javascript", json: true},
lineNumbers: true, lineNumbers: true,
lineWrapping: true, lineWrapping: true,
extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }}, extraKeys: {
"Ctrl-Q": function (cm) {
cm.foldCode(cm.getCursor());
}
},
foldGutter: true, foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"], gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
foldOptions: { foldOptions: {
...@@ -143,7 +154,8 @@ window.onload = function() { ...@@ -143,7 +154,8 @@ window.onload = function() {
try { try {
var parsed = JSON.parse(toParse); var parsed = JSON.parse(toParse);
count = Object.keys(parsed).length; count = Object.keys(parsed).length;
} catch(e) { } } catch (e) {
}
return count ? `\u21A4${count}\u21A6` : '\u2194'; return count ? `\u21A4${count}\u21A6` : '\u2194';
} }
...@@ -155,7 +167,11 @@ window.onload = function() { ...@@ -155,7 +167,11 @@ window.onload = function() {
mode: "text/html", mode: "text/html",
lineNumbers: true, lineNumbers: true,
lineWrapping: true, lineWrapping: true,
extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }}, extraKeys: {
"Ctrl-Q": function (cm) {
cm.foldCode(cm.getCursor());
}
},
foldGutter: true, foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
}); });
...@@ -165,7 +181,11 @@ window.onload = function() { ...@@ -165,7 +181,11 @@ window.onload = function() {
window.editor_python = CodeMirror.fromTextArea(te_python, { window.editor_python = CodeMirror.fromTextArea(te_python, {
mode: "python", mode: "python",
lineNumbers: true, lineNumbers: true,
extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }}, extraKeys: {
"Ctrl-Q": function (cm) {
cm.foldCode(cm.getCursor());
}
},
foldGutter: true, foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
}); });
...@@ -174,11 +194,16 @@ window.onload = function() { ...@@ -174,11 +194,16 @@ window.onload = function() {
mode: "markdown", mode: "markdown",
lineNumbers: true, lineNumbers: true,
lineWrapping: true, lineWrapping: true,
extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }}, extraKeys: {
"Ctrl-Q": function (cm) {
cm.foldCode(cm.getCursor());
}
},
foldGutter: true, foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"] gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
}); });
}; };
</script> <
</article> /script>
</body> < /article>
< /body>
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
<title>CodeMirror: Full Screen Editing</title> <title>CodeMirror: Full Screen Editing</title>
<meta charset="utf-8"/> <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">
<link rel="stylesheet" href="../addon/display/fullscreen.css"> <link href="../addon/display/fullscreen.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/night.css"> <link href="../theme/night.css" rel="stylesheet">
<script src="../lib/codemirror.js"></script> <script src="../lib/codemirror.js"></script>
<script src="../mode/xml/xml.js"></script> <script src="../mode/xml/xml.js"></script>
<script src="../addon/display/fullscreen.js"></script> <script src="../addon/display/fullscreen.js"></script>
...@@ -25,8 +25,8 @@ ...@@ -25,8 +25,8 @@
</div> </div>
<article> <article>
<h2>Full Screen Editing</h2> <h2>Full Screen Editing</h2>
<form><textarea id="code" name="code" rows="5"> <form><textarea id="code" name="code" rows="5">
<dl> <dl>
<dt id="option_indentWithTabs"><code><strong>indentWithTabs</strong>: boolean</code></dt> <dt id="option_indentWithTabs"><code><strong>indentWithTabs</strong>: boolean</code></dt>
<dd>Whether, when indenting, the first N*<code>tabSize</code> <dd>Whether, when indenting, the first N*<code>tabSize</code>
...@@ -65,10 +65,10 @@ ...@@ -65,10 +65,10 @@
lineNumbers: true, lineNumbers: true,
theme: "night", theme: "night",
extraKeys: { extraKeys: {
"F11": function(cm) { "F11": function (cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen")); cm.setOption("fullScreen", !cm.getOption("fullScreen"));
}, },
"Esc": function(cm) { "Esc": function (cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false); if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
} }
} }
...@@ -80,4 +80,4 @@ ...@@ -80,4 +80,4 @@
addon. Press <strong>F11</strong> when cursor is in the editor to addon. Press <strong>F11</strong> when cursor is in the editor to
toggle full screen editing. <strong>Esc</strong> can also be used toggle full screen editing. <strong>Esc</strong> can also be used
to <i>exit</i> full screen editing.</p> to <i>exit</i> full screen editing.</p>
</article> </article>
...@@ -2,14 +2,17 @@ ...@@ -2,14 +2,17 @@
<title>CodeMirror: Hard-wrapping Demo</title> <title>CodeMirror: Hard-wrapping Demo</title>
<meta charset="utf-8"/> <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="../lib/codemirror.js"></script>
<script src="../mode/markdown/markdown.js"></script> <script src="../mode/markdown/markdown.js"></script>
<script src="../addon/wrap/hardwrap.js"></script> <script src="../addon/wrap/hardwrap.js"></script>
<style> <style>
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;} .CodeMirror {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
</style> </style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -25,8 +28,8 @@ ...@@ -25,8 +28,8 @@
</div> </div>
<article> <article>
<h2>Hard-wrapping Demo</h2> <h2>Hard-wrapping Demo</h2>
<form><textarea id="code" name="code">Lorem ipsum dolor sit amet, vim augue dictas constituto ex, <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 sit falli simul viderer te. Graeco scaevola maluisset sit
ut, in idque viris praesent sea. Ea sea eirmod indoctum ut, in idque viris praesent sea. Ea sea eirmod indoctum
repudiare. Vel noluisse suscipit pericula ut. In ius nulla repudiare. Vel noluisse suscipit pericula ut. In ius nulla
...@@ -46,30 +49,32 @@ id, quas doming malorum nec ad. Tollit eruditi vivendum ad ...@@ -46,30 +49,32 @@ id, quas doming malorum nec ad. Tollit eruditi vivendum ad
ius, eos soleat ignota ad. ius, eos soleat ignota ad.
</textarea></form> </textarea></form>
<p>Demonstration of <p>Demonstration of
the <a href="../doc/manual.html#addon_hardwrap">hardwrap</a> addon. the <a href="../doc/manual.html#addon_hardwrap">hardwrap</a> addon.
The above editor has its change event hooked up to The above editor has its change event hooked up to
the <code>wrapParagraphsInRange</code> method, so that the paragraphs the <code>wrapParagraphsInRange</code> method, so that the paragraphs
are reflown as you are typing.</p> are reflown as you are typing.</p>
<script> <script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "markdown", mode: "markdown",
lineNumbers: true, lineNumbers: true,
extraKeys: { 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; var wait, options = {column: 60}, changing = false;
editor.on("change", function(cm, change) { editor.on("change", function (cm, change) {
if (changing) return; if (changing) return;
clearTimeout(wait); clearTimeout(wait);
wait = setTimeout(function() { wait = setTimeout(function () {
changing = true; changing = true;
cm.wrapParagraphsInRange(change.from, CodeMirror.changeEnd(change), options); cm.wrapParagraphsInRange(change.from, CodeMirror.changeEnd(change), options);
changing = false; changing = false;
}, 200); }, 200);
}); });
</script> </script>
</article> </article>
...@@ -3,10 +3,10 @@ ...@@ -3,10 +3,10 @@
<head> <head>
<title>CodeMirror: HTML completion demo</title> <title>CodeMirror: HTML completion demo</title>
<meta charset="utf-8"/> <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">
<link rel="stylesheet" href="../addon/hint/show-hint.css"> <link href="../addon/hint/show-hint.css" rel="stylesheet">
<script src="../lib/codemirror.js"></script> <script src="../lib/codemirror.js"></script>
<script src="../addon/hint/show-hint.js"></script> <script src="../addon/hint/show-hint.js"></script>
<script src="../addon/hint/xml-hint.js"></script> <script src="../addon/hint/xml-hint.js"></script>
...@@ -16,12 +16,15 @@ ...@@ -16,12 +16,15 @@
<script src="../mode/css/css.js"></script> <script src="../mode/css/css.js"></script>
<script src="../mode/htmlmixed/htmlmixed.js"></script> <script src="../mode/htmlmixed/htmlmixed.js"></script>
<style> <style>
.CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;} .CodeMirror {
border-top: 1px solid #888;
border-bottom: 1px solid #888;
}
</style> </style>
</head> </head>
<body> <body>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
<ul> <ul>
...@@ -32,9 +35,9 @@ ...@@ -32,9 +35,9 @@
<ul> <ul>
<li><a class=active href="#">HTML completion</a> <li><a class=active href="#">HTML completion</a>
</ul> </ul>
</div> </div>
<article> <article>
<h2>HTML completion demo</h2> <h2>HTML completion demo</h2>
<p>Shows the <a href="xmlcomplete.html">XML completer</a> <p>Shows the <a href="xmlcomplete.html">XML completer</a>
...@@ -44,7 +47,7 @@ ...@@ -44,7 +47,7 @@
<div id="code"></div> <div id="code"></div>
<script> <script>
window.onload = function() { window.onload = function () {
editor = CodeMirror(document.getElementById("code"), { editor = CodeMirror(document.getElementById("code"), {
mode: "text/html", mode: "text/html",
extraKeys: {"Ctrl-Space": "autocomplete"}, extraKeys: {"Ctrl-Space": "autocomplete"},
...@@ -52,5 +55,5 @@ ...@@ -52,5 +55,5 @@
}); });
}; };
</script> </script>
</article> </article>
</body> </body>
...@@ -2,15 +2,21 @@ ...@@ -2,15 +2,21 @@
<title>CodeMirror: Indented wrapped line demo</title> <title>CodeMirror: Indented wrapped line demo</title>
<meta charset="utf-8"/> <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="../lib/codemirror.js"></script>
<script src="../mode/xml/xml.js"></script> <script src="../mode/xml/xml.js"></script>
<style> <style>
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;} .CodeMirror {
.CodeMirror pre > * { text-indent: 0px; } border-top: 1px solid black;
</style> border-bottom: 1px solid black;
}
.CodeMirror pre > * {
text-indent: 0px;
}
</style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -25,15 +31,18 @@ ...@@ -25,15 +31,18 @@
</div> </div>
<article> <article>
<h2>Indented wrapped line demo</h2> <h2>Indented wrapped line demo</h2>
<form><textarea id="code" name="code"> <form><textarea id="code" name="code">
<!doctype html> <!doctype html>
<body> <body>
<h2 id="overview">Overview</h2> <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> </body>
</textarea></form> </textarea></form>
...@@ -48,7 +57,7 @@ ...@@ -48,7 +57,7 @@
mode: "text/html" mode: "text/html"
}); });
var charWidth = editor.defaultCharWidth(), basePadding = 4; 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; var off = CodeMirror.countColumn(line.text, null, cm.getOption("tabSize")) * charWidth;
elt.style.textIndent = "-" + off + "px"; elt.style.textIndent = "-" + off + "px";
elt.style.paddingLeft = (basePadding + off) + "px"; elt.style.paddingLeft = (basePadding + off) + "px";
...@@ -56,4 +65,4 @@ ...@@ -56,4 +65,4 @@
editor.refresh(); editor.refresh();
</script> </script>
</article> </article>
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
<title>CodeMirror: Linter Demo</title> <title>CodeMirror: Linter Demo</title>
<meta charset="utf-8"/> <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">
<link rel="stylesheet" href="../addon/lint/lint.css"> <link href="../addon/lint/lint.css" rel="stylesheet">
<script src="../lib/codemirror.js"></script> <script src="../lib/codemirror.js"></script>
<script src="../mode/javascript/javascript.js"></script> <script src="../mode/javascript/javascript.js"></script>
<script src="../mode/css/css.js"></script> <script src="../mode/css/css.js"></script>
...@@ -17,8 +17,10 @@ ...@@ -17,8 +17,10 @@
<script src="../addon/lint/json-lint.js"></script> <script src="../addon/lint/json-lint.js"></script>
<script src="../addon/lint/css-lint.js"></script> <script src="../addon/lint/css-lint.js"></script>
<style> <style>
.CodeMirror {border: 1px solid black;} .CodeMirror {
</style> border: 1px solid black;
}
</style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -33,7 +35,7 @@ ...@@ -33,7 +35,7 @@
</div> </div>
<article> <article>
<h2>Linter Demo</h2> <h2>Linter Demo</h2>
<p><textarea id="code-js">var widgets = [] <p><textarea id="code-js">var widgets = []
...@@ -44,7 +46,7 @@ function updateHints() { ...@@ -44,7 +46,7 @@ function updateHints() {
widgets.length = 0; widgets.length = 0;
JSHINT(editor.getValue()); 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]; var err = JSHINT.errors[i];
if (!err) continue; if (!err) continue;
var msg = document.createElement("div"); var msg = document.createElement("div");
...@@ -100,7 +102,7 @@ function updateHints() { ...@@ -100,7 +102,7 @@ function updateHints() {
/*Warning: empty ruleset */ /*Warning: empty ruleset */
.foo { .foo {
} }
h1 { h1 {
font-weight: bold; font-weight: bold;
...@@ -145,7 +147,7 @@ li.last { ...@@ -145,7 +147,7 @@ li.last {
} }
} }
</textarea></p> </textarea></p>
<script> <script>
var editor = CodeMirror.fromTextArea(document.getElementById("code-js"), { var editor = CodeMirror.fromTextArea(document.getElementById("code-js"), {
lineNumbers: true, lineNumbers: true,
mode: "javascript", mode: "javascript",
...@@ -166,6 +168,6 @@ li.last { ...@@ -166,6 +168,6 @@ li.last {
gutters: ["CodeMirror-lint-markers"], gutters: ["CodeMirror-lint-markers"],
lint: true lint: true
}); });
</script> </script>
</article> </article>
...@@ -2,15 +2,18 @@ ...@@ -2,15 +2,18 @@
<title>CodeMirror: Lazy Mode Loading Demo</title> <title>CodeMirror: Lazy Mode Loading Demo</title>
<meta charset="utf-8"/> <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="../lib/codemirror.js"></script>
<script src="../addon/mode/loadmode.js"></script> <script src="../addon/mode/loadmode.js"></script>
<script src="../mode/meta.js"></script> <script src="../mode/meta.js"></script>
<style> <style>
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;} .CodeMirror {
</style> border-top: 1px solid black;
border-bottom: 1px solid black;
}
</style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -25,25 +28,28 @@ ...@@ -25,25 +28,28 @@
</div> </div>
<article> <article>
<h2>Lazy Mode Loading Demo</h2> <h2>Lazy Mode Loading Demo</h2>
<p style="color: gray">Current mode: <span id="modeinfo">text/plain</span></p> <p style="color: gray">Current mode: <span id="modeinfo">text/plain</span></p>
<form><textarea id="code" name="code">This is the editor. <form><textarea id="code" name="code">This is the editor.
// It starts out in plain text mode, // It starts out in plain text mode,
# use the control below to load and apply a mode # use the control below to load and apply a mode
"you'll see the highlighting of" this text /*change*/. "you'll see the highlighting of" this text /*change*/.
</textarea></form> </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> <script>
CodeMirror.modeURL = "../mode/%N/%N.js"; CodeMirror.modeURL = "../mode/%N/%N.js";
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true lineNumbers: true
}); });
var modeInput = document.getElementById("mode"); var modeInput = document.getElementById("mode");
CodeMirror.on(modeInput, "keypress", function(e) { CodeMirror.on(modeInput, "keypress", function (e) {
if (e.keyCode == 13) change(); if (e.keyCode == 13) change();
}); });
function change() {
function change() {
var val = modeInput.value, m, mode, spec; var val = modeInput.value, m, mode, spec;
if (m = /.+\.([^.]+)$/.exec(val)) { if (m = /.+\.([^.]+)$/.exec(val)) {
var info = CodeMirror.findModeByExtension(m[1]); var info = CodeMirror.findModeByExtension(m[1]);
...@@ -67,6 +73,6 @@ function change() { ...@@ -67,6 +73,6 @@ function change() {
} else { } else {
alert("Could not find a mode corresponding to " + val); alert("Could not find a mode corresponding to " + val);
} }
} }
</script> </script>
</article> </article>
...@@ -2,16 +2,24 @@ ...@@ -2,16 +2,24 @@
<title>CodeMirror: Breakpoint Demo</title> <title>CodeMirror: Breakpoint Demo</title>
<meta charset="utf-8"/> <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="../lib/codemirror.js"></script>
<script src="../mode/javascript/javascript.js"></script> <script src="../mode/javascript/javascript.js"></script>
<style> <style>
.breakpoints {width: .8em;} .breakpoints {
.breakpoint { color: #822; } width: .8em;
.CodeMirror {border: 1px solid #aaa;} }
</style>
.breakpoint {
color: #822;
}
.CodeMirror {
border: 1px solid #aaa;
}
</style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -26,8 +34,8 @@ ...@@ -26,8 +34,8 @@
</div> </div>
<article> <article>
<h2>Breakpoint Demo</h2> <h2>Breakpoint Demo</h2>
<form><textarea id="code" name="code"> <form><textarea id="code" name="code">
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true, lineNumbers: true,
gutters: ["CodeMirror-linenumbers", "breakpoints"] gutters: ["CodeMirror-linenumbers", "breakpoints"]
...@@ -45,8 +53,8 @@ function makeMarker() { ...@@ -45,8 +53,8 @@ function makeMarker() {
} }
</textarea></form> </textarea></form>
<p>Click the line-number gutter to add or remove 'breakpoints'.</p> <p>Click the line-number gutter to add or remove 'breakpoints'.</p>
<script>eval(document.getElementById("code").value);</script> <script>eval(document.getElementById("code").value);</script>
</article> </article>
...@@ -2,18 +2,30 @@ ...@@ -2,18 +2,30 @@
<title>CodeMirror: Selection Marking Demo</title> <title>CodeMirror: Selection Marking Demo</title>
<meta charset="utf-8"/> <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="../lib/codemirror.js"></script>
<script src="../addon/search/searchcursor.js"></script> <script src="../addon/search/searchcursor.js"></script>
<script src="../addon/selection/mark-selection.js"></script> <script src="../addon/selection/mark-selection.js"></script>
<style> <style>
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;} .CodeMirror {
.CodeMirror-selected { background-color: blue !important; } border-top: 1px solid black;
.CodeMirror-selectedtext { color: white; } border-bottom: 1px solid black;
.styled-background { background-color: #ff7; } }
</style>
.CodeMirror-selected {
background-color: blue !important;
}
.CodeMirror-selectedtext {
color: white;
}
.styled-background {
background-color: #ff7;
}
</style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -28,8 +40,8 @@ ...@@ -28,8 +40,8 @@
</div> </div>
<article> <article>
<h2>Selection Marking Demo</h2> <h2>Selection Marking Demo</h2>
<form><textarea id="code" name="code"> <form><textarea id="code" name="code">
Select something from here. You'll see that the selection's foreground Select something from here. You'll see that the selection's foreground
color changes to white! Since, by default, CodeMirror only puts an color changes to white! Since, by default, CodeMirror only puts an
independent "marker" layer behind the text, you'll need something like 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 ...@@ -40,13 +52,14 @@ you to safely give text a background color without screwing up the
visibility of the selection.</textarea></form> visibility of the selection.</textarea></form>
<script> <script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true, lineNumbers: true,
styleSelectedText: true styleSelectedText: true
}); });
editor.markText({line: 6, ch: 26}, {line: 6, ch: 42}, {className: "styled-background"}); editor.markText({line: 6, ch: 26}, {line: 6, ch: 42}, {className: "styled-background"});
</script> </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>
...@@ -2,24 +2,34 @@ ...@@ -2,24 +2,34 @@
<title>CodeMirror: Match Highlighter Demo</title> <title>CodeMirror: Match Highlighter Demo</title>
<meta charset="utf-8"/> <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="../lib/codemirror.js"></script>
<script src="../addon/scroll/annotatescrollbar.js"></script> <script src="../addon/scroll/annotatescrollbar.js"></script>
<script src="../addon/search/matchesonscrollbar.js"></script> <script src="../addon/search/matchesonscrollbar.js"></script>
<script src="../addon/search/searchcursor.js"></script> <script src="../addon/search/searchcursor.js"></script>
<script src="../addon/search/match-highlighter.js"></script> <script src="../addon/search/match-highlighter.js"></script>
<style> <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 { .CodeMirror-focused .cm-matchhighlight {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
background-position: bottom; background-position: bottom;
background-repeat: repeat-x; background-repeat: repeat-x;
} }
.cm-matchhighlight {background-color: lightgreen}
.CodeMirror-selection-highlight-scrollbar {background-color: green} .cm-matchhighlight {
</style> background-color: lightgreen
}
.CodeMirror-selection-highlight-scrollbar {
background-color: green
}
</style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -34,8 +44,8 @@ ...@@ -34,8 +44,8 @@
</div> </div>
<article> <article>
<h2>Match Highlighter Demo</h2> <h2>Match Highlighter Demo</h2>
<form><textarea id="code" name="code">Select this text: hardtospot <form><textarea id="code" name="code">Select this text: hardtospot
And everywhere else in your code where hardtospot appears will And everywhere else in your code where hardtospot appears will
automatically illuminate. Give it a try! No more hard to spot automatically illuminate. Give it a try! No more hard to spot
variables - stay in context of your code all the time. variables - stay in context of your code all the time.
...@@ -90,14 +100,14 @@ ornare accumsan. In hac habitasse hardtospot platea dictumst. ...@@ -90,14 +100,14 @@ ornare accumsan. In hac habitasse hardtospot platea dictumst.
</textarea></form> </textarea></form>
<script> <script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true, lineNumbers: true,
// To highlight on scrollbars as well, pass annotateScrollbar in options // To highlight on scrollbars as well, pass annotateScrollbar in options
// as below. // as below.
highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: true} highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: true}
}); });
</script> </script>
<p>Search and highlight occurences of the selected text.</p> <p>Search and highlight occurences of the selected text.</p>
</article> </article>
...@@ -2,16 +2,19 @@ ...@@ -2,16 +2,19 @@
<title>CodeMirror: Tag Matcher Demo</title> <title>CodeMirror: Tag Matcher Demo</title>
<meta charset="utf-8"/> <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="../lib/codemirror.js"></script>
<script src="../addon/fold/xml-fold.js"></script> <script src="../addon/fold/xml-fold.js"></script>
<script src="../addon/edit/matchtags.js"></script> <script src="../addon/edit/matchtags.js"></script>
<script src="../mode/xml/xml.js"></script> <script src="../mode/xml/xml.js"></script>
<style> <style>
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;} .CodeMirror {
</style> border-top: 1px solid black;
border-bottom: 1px solid black;
}
</style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -26,23 +29,23 @@ ...@@ -26,23 +29,23 @@
</div> </div>
<article> <article>
<h2>Tag Matcher Demo</h2> <h2>Tag Matcher Demo</h2>
<div id="editor"></div> <div id="editor"></div>
<script> <script>
window.onload = function() { window.onload = function () {
editor = CodeMirror(document.getElementById("editor"), { editor = CodeMirror(document.getElementById("editor"), {
value: "<html>\n " + document.documentElement.innerHTML + "\n</html>", value: "<html>\n " + document.documentElement.innerHTML + "\n</html>",
mode: "text/html", mode: "text/html",
matchTags: {bothTags: true}, matchTags: {bothTags: true},
extraKeys: {"Ctrl-J": "toMatchingTag"} extraKeys: {"Ctrl-J": "toMatchingTag"}
}); });
}; };
</script> </script>
<p>Put the cursor on or inside a pair of tags to highlight them. <p>Put the cursor on or inside a pair of tags to highlight them.
Press Ctrl-J to jump to the tag that matches the one under the Press Ctrl-J to jump to the tag that matches the one under the
cursor.</p> cursor.</p>
</article> </article>
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
<title>CodeMirror: merge view demo</title> <title>CodeMirror: merge view demo</title>
<meta charset="utf-8"/> <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>
<link rel=stylesheet href="../addon/merge/merge.css"> <link href="../addon/merge/merge.css" rel=stylesheet>
<script src="../lib/codemirror.js"></script> <script src="../lib/codemirror.js"></script>
<script src="../mode/xml/xml.js"></script> <script src="../mode/xml/xml.js"></script>
<script src="../mode/css/css.js"></script> <script src="../mode/css/css.js"></script>
...@@ -14,11 +14,20 @@ ...@@ -14,11 +14,20 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script>
<script src="../addon/merge/merge.js"></script> <script src="../addon/merge/merge.js"></script>
<style> <style>
.CodeMirror { line-height: 1.2; } .CodeMirror {
line-height: 1.2;
}
@media screen and (min-width: 1300px) { @media screen and (min-width: 1300px) {
article { max-width: 1000px; } article {
#nav { border-right: 499px solid transparent; } max-width: 1000px;
}
#nav {
border-right: 499px solid transparent;
}
} }
span.clicky { span.clicky {
cursor: pointer; cursor: pointer;
background: #d70; background: #d70;
...@@ -26,7 +35,7 @@ ...@@ -26,7 +35,7 @@
padding: 0 3px; padding: 0 3px;
border-radius: 3px; border-radius: 3px;
} }
</style> </style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -41,31 +50,32 @@ ...@@ -41,31 +50,32 @@
</div> </div>
<article> <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> <p>The <a href="../doc/manual.html#addon_merge"><code>merge</code></a>
addon provides an interface for displaying and merging diffs, addon provides an interface for displaying and merging diffs,
either <span class=clicky onclick="panes = 2; initUI()">two-way</span> either <span class=clicky onclick="panes = 2; initUI()">two-way</span>
or <span class=clicky onclick="panes = 3; initUI()">three-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 The left (or center) pane is editable, and the differences with the
other pane(s) are <span class=clicky other pane(s) are <span class=clicky
onclick="toggleDifferences()">optionally</span> shown live as you edit onclick="toggleDifferences()">optionally</span> shown live as you edit
it. In the two-way configuration, there are also options to pad changed it. In the two-way configuration, there are also options to pad changed
sections to <span class=clicky onclick="connect = connect ? null : sections to <span class=clicky onclick="connect = connect ? null :
'align'; initUI()">align</span> them, and to <span class=clicky 'align'; initUI()">align</span> them, and to <span class=clicky
onclick="collapse = !collapse; initUI()">collapse</span> unchanged onclick="collapse = !collapse; initUI()">collapse</span> unchanged
stretches of text.</p> stretches of text.</p>
<p>This addon depends on <p>This addon depends on
the <a href="https://code.google.com/p/google-diff-match-patch/">google-diff-match-patch</a> the <a href="https://code.google.com/p/google-diff-match-patch/">google-diff-match-patch</a>
library to compute the diffs.</p> library to compute the diffs.</p>
<script> <script>
var value, orig1, orig2, dv, panes = 2, highlight = true, connect = "align", collapse = false; var value, orig1, orig2, dv, panes = 2, highlight = true, connect = "align", collapse = false;
function initUI() {
function initUI() {
if (value == null) return; if (value == null) return;
var target = document.getElementById("view"); var target = document.getElementById("view");
target.innerHTML = ""; target.innerHTML = "";
...@@ -79,34 +89,37 @@ function initUI() { ...@@ -79,34 +89,37 @@ function initUI() {
connect: connect, connect: connect,
collapseIdentical: collapse collapseIdentical: collapse
}); });
} }
function toggleDifferences() { function toggleDifferences() {
dv.setShowDifferences(highlight = !highlight); dv.setShowDifferences(highlight = !highlight);
} }
window.onload = function() { window.onload = function () {
value = document.documentElement.innerHTML; value = document.documentElement.innerHTML;
orig1 = "<!doctype html>\n\n" + value.replace(/\.\.\//g, "codemirror/").replace("yellow", "orange"); orig1 = "<!doctype html>\n\n" + value.replace(/\.\.\//g, "codemirror/").replace("yellow", "orange");
orig2 = value.replace(/\u003cscript/g, "\u003cscript type=text/javascript ") orig2 = value.replace(/\u003cscript/g, "\u003cscript type=text/javascript ")
.replace("white", "purple;\n font: comic sans;\n text-decoration: underline;\n height: 15em"); .replace("white", "purple;\n font: comic sans;\n text-decoration: underline;\n height: 15em");
initUI(); 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) { function editorHeight(editor) {
if (!editor) return 0; if (!editor) return 0;
return editor.getScrollInfo().height; return editor.getScrollInfo().height;
} }
return Math.max(editorHeight(mergeView.leftOriginal()), return Math.max(editorHeight(mergeView.leftOriginal()),
editorHeight(mergeView.editor()), editorHeight(mergeView.editor()),
editorHeight(mergeView.rightOriginal())); editorHeight(mergeView.rightOriginal()));
} }
function resize(mergeView) { function resize(mergeView) {
var height = mergeViewHeight(mergeView); var height = mergeViewHeight(mergeView);
for(;;) { for (; ;) {
if (mergeView.leftOriginal()) if (mergeView.leftOriginal())
mergeView.leftOriginal().setSize(null, height); mergeView.leftOriginal().setSize(null, height);
mergeView.editor().setSize(null, height); mergeView.editor().setSize(null, height);
...@@ -118,6 +131,6 @@ function resize(mergeView) { ...@@ -118,6 +131,6 @@ function resize(mergeView) {
else height = newHeight; else height = newHeight;
} }
mergeView.wrap.style.height = height + "px"; mergeView.wrap.style.height = height + "px";
} }
</script> </script>
</article> </article>
...@@ -2,16 +2,21 @@ ...@@ -2,16 +2,21 @@
<title>CodeMirror: Multiplexing Parser Demo</title> <title>CodeMirror: Multiplexing Parser Demo</title>
<meta charset="utf-8"/> <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="../lib/codemirror.js"></script>
<script src="../addon/mode/multiplex.js"></script> <script src="../addon/mode/multiplex.js"></script>
<script src="../mode/xml/xml.js"></script> <script src="../mode/xml/xml.js"></script>
<style> <style>
.CodeMirror {border: 1px solid black;} .CodeMirror {
.cm-delimit {color: #fa4;} border: 1px solid black;
</style> }
.cm-delimit {
color: #fa4;
}
</style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -26,11 +31,11 @@ ...@@ -26,11 +31,11 @@
</div> </div>
<article> <article>
<h2>Multiplexing Parser Demo</h2> <h2>Multiplexing Parser Demo</h2>
<form><textarea id="code" name="code"> <form><textarea id="code" name="code">
<html> <html>
<body style="<<magic>>"> <body style="<<magic>>">
<h1><< this is not <html >></h1> <h1><< this is not <html>></h1>
<< <<
multiline multiline
not html not html
...@@ -42,21 +47,23 @@ ...@@ -42,21 +47,23 @@
</textarea></form> </textarea></form>
<script> <script>
CodeMirror.defineMode("demo", function(config) { CodeMirror.defineMode("demo", function (config) {
return CodeMirror.multiplexingMode( return CodeMirror.multiplexingMode(
CodeMirror.getMode(config, "text/html"), CodeMirror.getMode(config, "text/html"),
{open: "<<", close: ">>", {
open: "<<", close: ">>",
mode: CodeMirror.getMode(config, "text/plain"), mode: CodeMirror.getMode(config, "text/plain"),
delimStyle: "delimit"} delimStyle: "delimit"
}
// .. more multiplexed styles can follow here // .. more multiplexed styles can follow here
); );
}); });
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "demo", mode: "demo",
lineNumbers: true, lineNumbers: true,
lineWrapping: true lineWrapping: true
}); });
</script> </script>
<p>Demonstration of a multiplexing mode, which, at certain <p>Demonstration of a multiplexing mode, which, at certain
boundary strings, switches to one or more inner modes. The out boundary strings, switches to one or more inner modes. The out
...@@ -72,4 +79,4 @@ var editor = CodeMirror.fromTextArea(document.getElementById("code"), { ...@@ -72,4 +79,4 @@ var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
<a href="../test/index.html#verbose,multiplexing_*">verbose</a>. <a href="../test/index.html#verbose,multiplexing_*">verbose</a>.
</p> </p>
</article> </article>
...@@ -2,15 +2,20 @@ ...@@ -2,15 +2,20 @@
<title>CodeMirror: Overlay Parser Demo</title> <title>CodeMirror: Overlay Parser Demo</title>
<meta charset="utf-8"/> <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="../lib/codemirror.js"></script>
<script src="../addon/mode/overlay.js"></script> <script src="../addon/mode/overlay.js"></script>
<script src="../mode/xml/xml.js"></script> <script src="../mode/xml/xml.js"></script>
<style> <style>
.CodeMirror {border: 1px solid black;} .CodeMirror {
.cm-mustache {color: #0ca;} border: 1px solid black;
}
.cm-mustache {
color: #0ca;
}
</style> </style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -26,8 +31,8 @@ ...@@ -26,8 +31,8 @@
</div> </div>
<article> <article>
<h2>Overlay Parser Demo</h2> <h2>Overlay Parser Demo</h2>
<form><textarea id="code" name="code"> <form><textarea id="code" name="code">
<html> <html>
<body> <body>
<h1>{{title}}</h1> <h1>{{title}}</h1>
...@@ -40,9 +45,9 @@ ...@@ -40,9 +45,9 @@
</textarea></form> </textarea></form>
<script> <script>
CodeMirror.defineMode("mustache", function(config, parserConfig) { CodeMirror.defineMode("mustache", function (config, parserConfig) {
var mustacheOverlay = { var mustacheOverlay = {
token: function(stream, state) { token: function (stream, state) {
var ch; var ch;
if (stream.match("{{")) { if (stream.match("{{")) {
while ((ch = stream.next()) != null) while ((ch = stream.next()) != null)
...@@ -51,14 +56,15 @@ CodeMirror.defineMode("mustache", function(config, parserConfig) { ...@@ -51,14 +56,15 @@ CodeMirror.defineMode("mustache", function(config, parserConfig) {
return "mustache"; return "mustache";
} }
} }
while (stream.next() != null && !stream.match("{{", false)) {} while (stream.next() != null && !stream.match("{{", false)) {
}
return null; return null;
} }
}; };
return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "text/html"), mustacheOverlay); return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "text/html"), mustacheOverlay);
}); });
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "mustache"}); var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "mustache"});
</script> </script>
<p>Demonstration of a mode that parses HTML, highlighting <p>Demonstration of a mode that parses HTML, highlighting
the <a href="http://mustache.github.com/">Mustache</a> templating the <a href="http://mustache.github.com/">Mustache</a> templating
...@@ -66,4 +72,4 @@ var editor = CodeMirror.fromTextArea(document.getElementById("code"), {mode: "mu ...@@ -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 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> source to see the 15 lines of code needed to accomplish this.</p>
</article> </article>
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
<title>CodeMirror: Panel Demo</title> <title>CodeMirror: Panel Demo</title>
<meta charset="utf-8"/> <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="../lib/codemirror.js"></script>
<script src="../mode/javascript/javascript.js"></script> <script src="../mode/javascript/javascript.js"></script>
<script src="../mode/xml/xml.js"></script> <script src="../mode/xml/xml.js"></script>
...@@ -14,26 +14,32 @@ ...@@ -14,26 +14,32 @@
.border { .border {
border: 1px solid #f7f7f7; border: 1px solid #f7f7f7;
} }
.add-panel { .add-panel {
background: orange; background: orange;
padding: 3px 6px; padding: 3px 6px;
color: white !important; color: white !important;
border-radius: 3px; border-radius: 3px;
} }
.add-panel, .remove-panel { .add-panel, .remove-panel {
cursor: pointer; cursor: pointer;
} }
.remove-panel { .remove-panel {
float: right; float: right;
} }
.panel { .panel {
background: #f7f7f7; background: #f7f7f7;
padding: 3px 7px; padding: 3px 7px;
font-size: 0.85em; font-size: 0.85em;
} }
.panel.top, .panel.after-top { .panel.top, .panel.after-top {
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
.panel.bottom, .panel.before-bottom { .panel.bottom, .panel.before-bottom {
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
} }
...@@ -54,48 +60,48 @@ ...@@ -54,48 +60,48 @@
<article> <article>
<h2>Panel Demo</h2> <h2>Panel Demo</h2>
<div class="border"> <div class="border">
<textarea id="code" name="code"></textarea> <textarea id="code" name="code"></textarea>
</div> </div>
<p> <p>
The <a href="../doc/manual.html#addon_panel"><code>panel</code></a> The <a href="../doc/manual.html#addon_panel"><code>panel</code></a>
addon allows you to display panels above or below an editor. addon allows you to display panels above or below an editor.
<br> <br>
Click the links below to add panels at the given position: Click the links below to add panels at the given position:
</p> </p>
<div id="demo"> <div id="demo">
<p> <p>
<a class="add-panel" onclick="addPanel('top')">top</a> <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('after-top')">after-top</a>
<a class="add-panel" onclick="addPanel('before-bottom')">before-bottom</a> <a class="add-panel" onclick="addPanel('before-bottom')">before-bottom</a>
<a class="add-panel" onclick="addPanel('bottom')">bottom</a> <a class="add-panel" onclick="addPanel('bottom')">bottom</a>
</p> </p>
<p> <p>
You can also replace an existing panel: You can also replace an existing panel:
</p> </p>
<form onsubmit="return replacePanel(this);" name="replace_panel"> <form name="replace_panel" onsubmit="return replacePanel(this);">
<input type="submit" value="Replace panel n°" /> <input type="submit" value="Replace panel n°"/>
<input type="number" name="panel_id" min="1" value="1" /> <input min="1" name="panel_id" type="number" value="1"/>
</form> </form>
<script> <script>
var textarea = document.getElementById("code"); var textarea = document.getElementById("code");
var demo = document.getElementById("demo"); var demo = document.getElementById("demo");
var numPanels = 0; var numPanels = 0;
var panels = {}; var panels = {};
var editor; var editor;
textarea.value = demo.innerHTML.trim(); textarea.value = demo.innerHTML.trim();
editor = CodeMirror.fromTextArea(textarea, { editor = CodeMirror.fromTextArea(textarea, {
lineNumbers: true, lineNumbers: true,
mode: "htmlmixed" mode: "htmlmixed"
}); });
function makePanel(where) { function makePanel(where) {
var node = document.createElement("div"); var node = document.createElement("div");
var id = ++numPanels; var id = ++numPanels;
var widget, close, label; var widget, close, label;
...@@ -106,32 +112,33 @@ function makePanel(where) { ...@@ -106,32 +112,33 @@ function makePanel(where) {
close.setAttribute("title", "Remove me!"); close.setAttribute("title", "Remove me!");
close.setAttribute("class", "remove-panel"); close.setAttribute("class", "remove-panel");
close.textContent = ""; close.textContent = "";
CodeMirror.on(close, "mousedown", function(e) { CodeMirror.on(close, "mousedown", function (e) {
e.preventDefault() e.preventDefault()
panels[node.id].clear(); panels[node.id].clear();
}); });
label = node.appendChild(document.createElement("span")); label = node.appendChild(document.createElement("span"));
label.textContent = "I'm panel n°" + id; label.textContent = "I'm panel n°" + id;
return node; return node;
} }
function addPanel(where) {
function addPanel(where) {
var node = makePanel(where); var node = makePanel(where);
panels[node.id] = editor.addPanel(node, {position: where, stable: true}); panels[node.id] = editor.addPanel(node, {position: where, stable: true});
} }
addPanel("top"); addPanel("top");
addPanel("bottom"); addPanel("bottom");
function replacePanel(form) { function replacePanel(form) {
var id = form.elements.panel_id.value; var id = form.elements.panel_id.value;
var panel = panels["panel-" + id]; var panel = panels["panel-" + id];
var node = makePanel(""); var node = makePanel("");
panels[node.id] = editor.addPanel(node, {replace: panel, position: "after-top", stable: true}); panels[node.id] = editor.addPanel(node, {replace: panel, position: "after-top", stable: true});
return false; return false;
} }
</script> </script>
</div> </div>
</article> </article>
...@@ -2,17 +2,28 @@ ...@@ -2,17 +2,28 @@
<title>CodeMirror: Placeholder demo</title> <title>CodeMirror: Placeholder demo</title>
<meta charset="utf-8"/> <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="../lib/codemirror.js"></script>
<script src="../addon/display/placeholder.js"></script> <script src="../addon/display/placeholder.js"></script>
<style> <style>
.CodeMirror { border: 1px solid silver; } .CodeMirror {
.CodeMirror-empty { outline: 1px solid #c22; } border: 1px solid silver;
.CodeMirror-empty.CodeMirror-focused { outline: none; } }
.CodeMirror pre.CodeMirror-placeholder { color: #999; }
</style> .CodeMirror-empty {
outline: 1px solid #c22;
}
.CodeMirror-empty.CodeMirror-focused {
outline: none;
}
.CodeMirror pre.CodeMirror-placeholder {
color: #999;
}
</style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -27,8 +38,8 @@ ...@@ -27,8 +38,8 @@
</div> </div>
<article> <article>
<h2>Placeholder demo</h2> <h2>Placeholder demo</h2>
<form><textarea id="code" name="code" placeholder="Code goes here..."></textarea></form> <form><textarea id="code" name="code" placeholder="Code goes here..."></textarea></form>
<p>The <a href="../doc/manual.html#addon_placeholder">placeholder</a> <p>The <a href="../doc/manual.html#addon_placeholder">placeholder</a>
plug-in adds an option <code>placeholder</code> that can be set to plug-in adds an option <code>placeholder</code> that can be set to
...@@ -42,4 +53,4 @@ ...@@ -42,4 +53,4 @@
}); });
</script> </script>
</article> </article>
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
<title>CodeMirror: HTML5 preview</title> <title>CodeMirror: HTML5 preview</title>
<meta charset="utf-8"/> <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=../lib/codemirror.js></script>
<script src=../mode/xml/xml.js></script> <script src=../mode/xml/xml.js></script>
<script src=../mode/javascript/javascript.js></script> <script src=../mode/javascript/javascript.js></script>
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
width: 50%; width: 50%;
border: 1px solid black; border: 1px solid black;
} }
iframe { iframe {
width: 49%; width: 49%;
float: left; float: left;
...@@ -23,7 +24,7 @@ ...@@ -23,7 +24,7 @@
border: 1px solid black; border: 1px solid black;
border-left: 0px; border-left: 0px;
} }
</style> </style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -38,7 +39,7 @@ ...@@ -38,7 +39,7 @@
</div> </div>
<article> <article>
<h2>HTML5 preview</h2> <h2>HTML5 preview</h2>
<textarea id=code name=code> <textarea id=code name=code>
<!doctype html> <!doctype html>
...@@ -46,11 +47,13 @@ ...@@ -46,11 +47,13 @@
<head> <head>
<meta charset=utf-8> <meta charset=utf-8>
<title>HTML5 canvas demo</title> <title>HTML5 canvas demo</title>
<style>p {font-family: monospace;}</style> <style>p {
font-family: monospace;
}</style>
</head> </head>
<body> <body>
<p>Canvas pane goes here:</p> <p>Canvas pane goes here:</p>
<canvas id=pane width=300 height=200></canvas> <canvas height=200 id=pane width=300></canvas>
<script> <script>
var canvas = document.getElementById('pane'); var canvas = document.getElementById('pane');
var context = canvas.getContext('2d'); var context = canvas.getContext('2d');
...@@ -70,7 +73,7 @@ ...@@ -70,7 +73,7 @@
var editor = CodeMirror.fromTextArea(document.getElementById('code'), { var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
mode: 'text/html' mode: 'text/html'
}); });
editor.on("change", function() { editor.on("change", function () {
clearTimeout(delay); clearTimeout(delay);
delay = setTimeout(updatePreview, 300); delay = setTimeout(updatePreview, 300);
}); });
...@@ -82,6 +85,7 @@ ...@@ -82,6 +85,7 @@
preview.write(editor.getValue()); preview.write(editor.getValue());
preview.close(); preview.close();
} }
setTimeout(updatePreview, 300); setTimeout(updatePreview, 300);
</script> </script>
</article> </article>
...@@ -3,18 +3,21 @@ ...@@ -3,18 +3,21 @@
<head> <head>
<title>CodeMirror: HTML completion demo</title> <title>CodeMirror: HTML completion demo</title>
<meta charset="utf-8"/> <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">
<link rel="stylesheet" href="../addon/hint/show-hint.css"> <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> <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"></script>
<style> <style>
.CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;} .CodeMirror {
border-top: 1px solid #888;
border-bottom: 1px solid #888;
}
</style> </style>
</head> </head>
<body> <body>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
<ul> <ul>
<li><a href="../index.html">Home</a> <li><a href="../index.html">Home</a>
...@@ -24,9 +27,9 @@ ...@@ -24,9 +27,9 @@
<ul> <ul>
<li><a class=active href="#">HTML completion</a> <li><a class=active href="#">HTML completion</a>
</ul> </ul>
</div> </div>
<article> <article>
<h2>RequireJS module loading demo</h2> <h2>RequireJS module loading demo</h2>
<p>This demo does the same thing as <p>This demo does the same thing as
...@@ -50,7 +53,7 @@ ...@@ -50,7 +53,7 @@
}); });
require(["codemirror", "codemirror/mode/htmlmixed/htmlmixed", require(["codemirror", "codemirror/mode/htmlmixed/htmlmixed",
"codemirror/addon/hint/show-hint", "codemirror/addon/hint/html-hint", "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"), { editor = CodeMirror(document.getElementById("code"), {
mode: "text/html", mode: "text/html",
extraKeys: {"Ctrl-Space": "autocomplete"}, extraKeys: {"Ctrl-Space": "autocomplete"},
...@@ -58,13 +61,13 @@ ...@@ -58,13 +61,13 @@
}); });
CodeMirror.modeURL = "codemirror/mode/%N/%N"; CodeMirror.modeURL = "codemirror/mode/%N/%N";
document.getElementById("markdown").addEventListener("click", function() { document.getElementById("markdown").addEventListener("click", function () {
CodeMirror.requireMode("markdown", function() { CodeMirror.requireMode("markdown", function () {
editor.replaceRange("This is **Markdown**.\n\n", {line: 0, ch: 0}); editor.replaceRange("This is **Markdown**.\n\n", {line: 0, ch: 0});
editor.setOption("mode", "markdown"); editor.setOption("mode", "markdown");
}); });
}); });
}); });
</script> </script>
</article> </article>
</body> </body>
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
<title>CodeMirror: Autoresize Demo</title> <title>CodeMirror: Autoresize Demo</title>
<meta charset="utf-8"/> <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="../lib/codemirror.js"></script>
<script src="../mode/css/css.js"></script> <script src="../mode/css/css.js"></script>
<style> <style>
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
border: 1px solid #eee; border: 1px solid #eee;
height: auto; height: auto;
} }
</style> </style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -27,19 +27,19 @@ ...@@ -27,19 +27,19 @@
</div> </div>
<article> <article>
<h2>Autoresize Demo</h2> <h2>Autoresize Demo</h2>
<form><textarea id="code" name="code"> <form><textarea id="code" name="code">
.CodeMirror { .CodeMirror {
border: 1px solid #eee; border: 1px solid #eee;
height: auto; height: auto;
} }
</textarea></form> </textarea></form>
<p>By setting an editor's <code>height</code> style <p>By setting an editor's <code>height</code> style
to <code>auto</code> and giving to <code>auto</code> and giving
the <a href="../doc/manual.html#option_viewportMargin"><code>viewportMargin</code></a> the <a href="../doc/manual.html#option_viewportMargin"><code>viewportMargin</code></a>
a value of <code>Infinity</code>, CodeMirror can be made to a value of <code>Infinity</code>, CodeMirror can be made to
automatically resize to fit its content.</p> automatically resize to fit its content.</p>
<script> <script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
...@@ -48,4 +48,4 @@ automatically resize to fit its content.</p> ...@@ -48,4 +48,4 @@ automatically resize to fit its content.</p>
}); });
</script> </script>
</article> </article>
...@@ -2,13 +2,16 @@ ...@@ -2,13 +2,16 @@
<title>CodeMirror: Ruler Demo</title> <title>CodeMirror: Ruler Demo</title>
<meta charset="utf-8"/> <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="../lib/codemirror.js"></script>
<script src="../addon/display/rulers.js"></script> <script src="../addon/display/rulers.js"></script>
<style> <style>
.CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;} .CodeMirror {
border-top: 1px solid #888;
border-bottom: 1px solid #888;
}
</style> </style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -24,9 +27,9 @@ ...@@ -24,9 +27,9 @@
</div> </div>
<article> <article>
<h2>Ruler Demo</h2> <h2>Ruler Demo</h2>
<script> <script>
var nums = "0123456789", space = " "; var nums = "0123456789", space = " ";
var colors = ["#fcc", "#f5f577", "#cfc", "#aff", "#ccf", "#fcf"]; var colors = ["#fcc", "#f5f577", "#cfc", "#aff", "#ccf", "#fcf"];
var rulers = [], value = ""; var rulers = [], value = "";
...@@ -39,11 +42,11 @@ ...@@ -39,11 +42,11 @@
rulers: rulers, rulers: rulers,
value: value + value + value, value: value + value + value,
lineNumbers: true lineNumbers: true
}); });
</script> </script>
<p>Demonstration of <p>Demonstration of
the <a href="../doc/manual.html#addon_rulers">rulers</a> addon, which the <a href="../doc/manual.html#addon_rulers">rulers</a> addon, which
displays vertical lines at given column offsets.</p> displays vertical lines at given column offsets.</p>
</article> </article>
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
<title>CodeMirror: Mode Runner Demo</title> <title>CodeMirror: Mode Runner Demo</title>
<meta charset="utf-8"/> <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="../addon/runmode/runmode-standalone.js"></script>
<script src="../mode/xml/xml.js"></script> <script src="../mode/xml/xml.js"></script>
<div id=nav> <div id=nav>
...@@ -21,28 +21,29 @@ ...@@ -21,28 +21,29 @@
</div> </div>
<article> <article>
<h2>Mode Runner Demo</h2> <h2>Mode Runner Demo</h2>
<textarea id="code" style="width: 90%; height: 7em; border: 1px solid black; padding: .2em .4em;"> <textarea id="code" style="width: 90%; height: 7em; border: 1px solid black; padding: .2em .4em;">
<foobar> <foobar>
<blah>Enter your xml here and press the button below to display <blah>Enter your xml here and press the button below to display
it as highlighted by the CodeMirror XML mode</blah> 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> </foobar></textarea><br>
<button onclick="doHighlight();">Highlight!</button> <button onclick="doHighlight();">Highlight!</button>
<pre id="output" class="cm-s-default"></pre> <pre class="cm-s-default" id="output"></pre>
<script> <script>
function doHighlight() { function doHighlight() {
CodeMirror.runMode(document.getElementById("code").value, "application/xml", CodeMirror.runMode(document.getElementById("code").value, "application/xml",
document.getElementById("output")); document.getElementById("output"));
} }
</script> </script>
<p>Running a CodeMirror mode outside of the editor. <p>Running a CodeMirror mode outside of the editor.
The <code>CodeMirror.runMode</code> function, defined 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> <dl>
<dt><code>text (string)</code></dt> <dt><code>text (string)</code></dt>
...@@ -55,7 +56,8 @@ function doHighlight() { ...@@ -55,7 +56,8 @@ function doHighlight() {
be <code>null</code> for unstyled tokens). If it is a DOM node, 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 the tokens will be converted to <code>span</code> elements as in
an editor, and inserted into the node an editor, and inserted into the node
(through <code>innerHTML</code>).</dd> (through <code>innerHTML</code>).
</dd>
</dl> </dl>
</article> </article>
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
<title>CodeMirror: Mode Runner Demo</title> <title>CodeMirror: Mode Runner Demo</title>
<meta charset="utf-8"/> <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="../lib/codemirror.js"></script>
<script src="../addon/runmode/runmode.js"></script> <script src="../addon/runmode/runmode.js"></script>
<script src="../mode/xml/xml.js"></script> <script src="../mode/xml/xml.js"></script>
...@@ -22,28 +22,29 @@ ...@@ -22,28 +22,29 @@
</div> </div>
<article> <article>
<h2>Mode Runner Demo</h2> <h2>Mode Runner Demo</h2>
<textarea id="code" style="width: 90%; height: 7em; border: 1px solid black; padding: .2em .4em;"> <textarea id="code" style="width: 90%; height: 7em; border: 1px solid black; padding: .2em .4em;">
<foobar> <foobar>
<blah>Enter your xml here and press the button below to display <blah>Enter your xml here and press the button below to display
it as highlighted by the CodeMirror XML mode</blah> 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> </foobar></textarea><br>
<button onclick="doHighlight();">Highlight!</button> <button onclick="doHighlight();">Highlight!</button>
<pre id="output" class="cm-s-default"></pre> <pre class="cm-s-default" id="output"></pre>
<script> <script>
function doHighlight() { function doHighlight() {
CodeMirror.runMode(document.getElementById("code").value, "application/xml", CodeMirror.runMode(document.getElementById("code").value, "application/xml",
document.getElementById("output")); document.getElementById("output"));
} }
</script> </script>
<p>Running a CodeMirror mode outside of the editor. <p>Running a CodeMirror mode outside of the editor.
The <code>CodeMirror.runMode</code> function, defined 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> <dl>
<dt><code>text (string)</code></dt> <dt><code>text (string)</code></dt>
...@@ -56,7 +57,8 @@ function doHighlight() { ...@@ -56,7 +57,8 @@ function doHighlight() {
be <code>null</code> for unstyled tokens). If it is a DOM node, 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 the tokens will be converted to <code>span</code> elements as in
an editor, and inserted into the node an editor, and inserted into the node
(through <code>innerHTML</code>).</dd> (through <code>innerHTML</code>).
</dd>
</dl> </dl>
</article> </article>
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
<title>CodeMirror: Search/Replace Demo</title> <title>CodeMirror: Search/Replace Demo</title>
<meta charset="utf-8"/> <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">
<link rel="stylesheet" href="../addon/dialog/dialog.css"> <link href="../addon/dialog/dialog.css" rel="stylesheet">
<link rel="stylesheet" href="../addon/search/matchesonscrollbar.css"> <link href="../addon/search/matchesonscrollbar.css" rel="stylesheet">
<script src="../lib/codemirror.js"></script> <script src="../lib/codemirror.js"></script>
<script src="../mode/xml/xml.js"></script> <script src="../mode/xml/xml.js"></script>
<script src="../addon/dialog/dialog.js"></script> <script src="../addon/dialog/dialog.js"></script>
...@@ -16,9 +16,16 @@ ...@@ -16,9 +16,16 @@
<script src="../addon/search/matchesonscrollbar.js"></script> <script src="../addon/search/matchesonscrollbar.js"></script>
<script src="../addon/search/jump-to-line.js"></script> <script src="../addon/search/jump-to-line.js"></script>
<style> <style>
.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;} .CodeMirror {
dt {font-family: monospace; color: #666;} border-top: 1px solid black;
</style> border-bottom: 1px solid black;
}
dt {
font-family: monospace;
color: #666;
}
</style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -33,8 +40,8 @@ ...@@ -33,8 +40,8 @@
</div> </div>
<article> <article>
<h2>Search/Replace Demo</h2> <h2>Search/Replace Demo</h2>
<form><textarea id="code" name="code"> <form><textarea id="code" name="code">
<dl> <dl>
<dt id="option_indentWithTabs"><code><strong>indentWithTabs</strong>: boolean</code></dt> <dt id="option_indentWithTabs"><code><strong>indentWithTabs</strong>: boolean</code></dt>
<dd>Whether, when indenting, the first N*<code>tabSize</code> <dd>Whether, when indenting, the first N*<code>tabSize</code>
...@@ -70,24 +77,32 @@ ...@@ -70,24 +77,32 @@
</textarea></form> </textarea></form>
<script> <script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "text/html", mode: "text/html",
lineNumbers: true, lineNumbers: true,
extraKeys: {"Alt-F": "findPersistent"} extraKeys: {"Alt-F": "findPersistent"}
}); });
</script> </script>
<p>Demonstration of primitive search/replace functionality. The <p>Demonstration of primitive search/replace functionality. The
keybindings (which can be configured with custom keymaps) are:</p> keybindings (which can be configured with custom keymaps) are:</p>
<dl> <dl>
<dt>Ctrl-F / Cmd-F</dt><dd>Start searching</dd> <dt>Ctrl-F / Cmd-F</dt>
<dt>Ctrl-G / Cmd-G</dt><dd>Find next</dd> <dd>Start searching</dd>
<dt>Shift-Ctrl-G / Shift-Cmd-G</dt><dd>Find previous</dd> <dt>Ctrl-G / Cmd-G</dt>
<dt>Shift-Ctrl-F / Cmd-Option-F</dt><dd>Replace</dd> <dd>Find next</dd>
<dt>Shift-Ctrl-R / Shift-Cmd-Option-F</dt><dd>Replace all</dd> <dt>Shift-Ctrl-G / Shift-Cmd-G</dt>
<dt>Alt-F</dt><dd>Persistent search (dialog doesn't autoclose, <dd>Find previous</dd>
enter to find next, Shift-Enter to find previous)</dd> <dt>Shift-Ctrl-F / Cmd-Option-F</dt>
<dt>Alt-G</dt><dd>Jump to line</dd> <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> </dl>
<p>Searching is enabled by <p>Searching is enabled by
including <a href="../addon/search/search.js">addon/search/search.js</a> including <a href="../addon/search/search.js">addon/search/search.js</a>
...@@ -96,4 +111,4 @@ var editor = CodeMirror.fromTextArea(document.getElementById("code"), { ...@@ -96,4 +111,4 @@ var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
<p>For good-looking input dialogs, you also want to include <p>For good-looking input dialogs, you also want to include
<a href="../addon/dialog/dialog.js">addon/dialog/dialog.js</a> <a href="../addon/dialog/dialog.js">addon/dialog/dialog.js</a>
and <a href="../addon/dialog/dialog.css">addon/dialog/dialog.css</a>.</p> and <a href="../addon/dialog/dialog.css">addon/dialog/dialog.css</a>.</p>
</article> </article>
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
<title>CodeMirror: Simple Scrollbar Demo</title> <title>CodeMirror: Simple Scrollbar Demo</title>
<meta charset="utf-8"/> <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">
<link rel="stylesheet" href="../addon/scroll/simplescrollbars.css"> <link href="../addon/scroll/simplescrollbars.css" rel="stylesheet">
<script src="../lib/codemirror.js"></script> <script src="../lib/codemirror.js"></script>
<script src="../mode/markdown/markdown.js"></script> <script src="../mode/markdown/markdown.js"></script>
<script src="../mode/xml/xml.js"></script> <script src="../mode/xml/xml.js"></script>
...@@ -25,8 +25,8 @@ ...@@ -25,8 +25,8 @@
</div> </div>
<article> <article>
<h2>Simple Scrollbar Demo</h2> <h2>Simple Scrollbar Demo</h2>
<form><textarea id="code" name="code"># Custom Scrollbars <form><textarea id="code" name="code"># Custom Scrollbars
This is a piece of text that creates 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 ...@@ -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. lobortis viverra, cum in sed, vivamus tellus. Libero at malesuada est vivamus leo tortor.
</textarea></form> </textarea></form>
<p>The <a href="../doc/manual.html#addon_simplescrollbars"><code>simplescrollbars</code></a> addon defines two <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 styles of non-native scrollbars: <a
the <a href="../doc/manual.html#option_scrollbarStyle"><code>scrollbarStyle</code></a> option. These implement href="javascript:editor.setOption('scrollbarStyle', 'simple')"><code>"simple"</code></a> and <a
the scrollbar using DOM elements, allowing more control over href="javascript:editor.setOption('scrollbarStyle', 'overlay')"><code>"overlay"</code></a> (click to try), which
its <a href="../addon/scroll/simplescrollbars.css">appearance</a>.</p> 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> <script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<title>CodeMirror: Automatically derive odd wrapping behavior for your browser</title> <title>CodeMirror: Automatically derive odd wrapping behavior for your browser</title>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<link rel=stylesheet href="../doc/docs.css"> <link href="../doc/docs.css" rel=stylesheet>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
</div> </div>
<article> <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 <p>This is a hack to automatically derive
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
in <a href="../lib/codemirror.js"><code>lib/codemirror.js</code></a> in <a href="../lib/codemirror.js"><code>lib/codemirror.js</code></a>
for some more details.</p> 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> <pre id="output"></pre>
<script id="script"> <script id="script">
...@@ -46,6 +46,7 @@ ...@@ -46,6 +46,7 @@
} }
var re = ""; var re = "";
function toREElt(str) { function toREElt(str) {
if (str.length > 1) { if (str.length > 1) {
var invert = false; var invert = false;
...@@ -55,7 +56,9 @@ ...@@ -55,7 +56,9 @@
for (var i = 0; i < l; ++i) if (str.indexOf(chars.charAt(i)) == -1) newStr += chars.charAt(i); for (var i = 0; i < l; ++i) if (str.indexOf(chars.charAt(i)) == -1) newStr += chars.charAt(i);
str = newStr; 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 + "]"; return "[" + (invert ? "^" : "") + str + "]";
} else if (str == "a") { } else if (str == "a") {
return "\\w"; return "\\w";
...@@ -67,7 +70,7 @@ ...@@ -67,7 +70,7 @@
} }
var newRE = ""; var newRE = "";
for (;;) { for (; ;) {
var left = null; var left = null;
for (var left in bad) break; for (var left in bad) break;
if (left == null) break; if (left == null) break;
...@@ -81,5 +84,6 @@ ...@@ -81,5 +84,6 @@
} }
document.getElementById("output").appendChild(document.createTextNode("Your regexp is: " + (newRE || "^$"))); document.getElementById("output").appendChild(document.createTextNode("Your regexp is: " + (newRE || "^$")));
</script> <
</article> /script>
< /article>
...@@ -2,12 +2,12 @@ ...@@ -2,12 +2,12 @@
<title>CodeMirror: Sublime Text bindings demo</title> <title>CodeMirror: Sublime Text bindings demo</title>
<meta charset="utf-8"/> <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">
<link rel="stylesheet" href="../addon/fold/foldgutter.css"> <link href="../addon/fold/foldgutter.css" rel="stylesheet">
<link rel="stylesheet" href="../addon/dialog/dialog.css"> <link href="../addon/dialog/dialog.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/monokai.css"> <link href="../theme/monokai.css" rel="stylesheet">
<script src="../lib/codemirror.js"></script> <script src="../lib/codemirror.js"></script>
<script src="../addon/search/searchcursor.js"></script> <script src="../addon/search/searchcursor.js"></script>
<script src="../addon/search/search.js"></script> <script src="../addon/search/search.js"></script>
...@@ -21,8 +21,16 @@ ...@@ -21,8 +21,16 @@
<script src="../mode/javascript/javascript.js"></script> <script src="../mode/javascript/javascript.js"></script>
<script src="../keymap/sublime.js"></script> <script src="../keymap/sublime.js"></script>
<style> <style>
.CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee; line-height: 1.3; height: 500px} .CodeMirror {
.CodeMirror-linenumbers { padding: 0 8px; } border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
line-height: 1.3;
height: 500px
}
.CodeMirror-linenumbers {
padding: 0 8px;
}
</style> </style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -38,20 +46,20 @@ ...@@ -38,20 +46,20 @@
</div> </div>
<article> <article>
<h2>Sublime Text bindings demo</h2> <h2>Sublime Text bindings demo</h2>
<p>The <code>sublime</code> keymap defines many Sublime Text-specific <p>The <code>sublime</code> keymap defines many Sublime Text-specific
bindings for CodeMirror. See the code below for an overview.</p> bindings for CodeMirror. See the code below for an overview.</p>
<p>Enable the keymap by <p>Enable the keymap by
loading <a href="../keymap/sublime.js"><code>keymap/sublime.js</code></a> loading <a href="../keymap/sublime.js"><code>keymap/sublime.js</code></a>
and setting and setting
the <a href="../doc/manual.html#option_keyMap"><code>keyMap</code></a> the <a href="../doc/manual.html#option_keyMap"><code>keyMap</code></a>
option to <code>"sublime"</code>.</p> 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 value = "// The bindings defined specifically in the Sublime Text mode\nvar bindings = {\n";
var map = CodeMirror.keyMap.sublime; var map = CodeMirror.keyMap.sublime;
for (var key in map) { for (var key in map) {
...@@ -72,6 +80,6 @@ option to <code>"sublime"</code>.</p> ...@@ -72,6 +80,6 @@ option to <code>"sublime"</code>.</p>
theme: "monokai", theme: "monokai",
tabSize: 2 tabSize: 2
}); });
</script> </script>
</article> </article>
...@@ -2,12 +2,12 @@ ...@@ -2,12 +2,12 @@
<title>CodeMirror: Tern Demo</title> <title>CodeMirror: Tern Demo</title>
<meta charset="utf-8"/> <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">
<link rel="stylesheet" href="../addon/dialog/dialog.css"> <link href="../addon/dialog/dialog.css" rel="stylesheet">
<link rel="stylesheet" href="../addon/hint/show-hint.css"> <link href="../addon/hint/show-hint.css" rel="stylesheet">
<link rel="stylesheet" href="../addon/tern/tern.css"> <link href="../addon/tern/tern.css" rel="stylesheet">
<script src="../lib/codemirror.js"></script> <script src="../lib/codemirror.js"></script>
<script src="../mode/javascript/javascript.js"></script> <script src="../mode/javascript/javascript.js"></script>
<script src="../addon/dialog/dialog.js"></script> <script src="../addon/dialog/dialog.js"></script>
...@@ -24,8 +24,10 @@ ...@@ -24,8 +24,10 @@
<script src="https://unpkg.com/tern/lib/infer.js"></script> <script src="https://unpkg.com/tern/lib/infer.js"></script>
<script src="https://unpkg.com/tern/plugin/doc_comment.js"></script> <script src="https://unpkg.com/tern/plugin/doc_comment.js"></script>
<style> <style>
.CodeMirror {border: 1px solid #ddd;} .CodeMirror {
</style> border: 1px solid #ddd;
}
</style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -40,8 +42,8 @@ ...@@ -40,8 +42,8 @@
</div> </div>
<article> <article>
<h2>Tern Demo</h2> <h2>Tern Demo</h2>
<form><textarea id="code" name="code">// Use ctrl-space to complete something <form><textarea id="code" name="code">// Use ctrl-space to complete something
// Put the cursor in or after an expression, press ctrl-o to // Put the cursor in or after an expression, press ctrl-o to
// find its type // find its type
...@@ -78,28 +80,34 @@ var randomStr = myMod.randomElt(myMod.strList); ...@@ -78,28 +80,34 @@ var randomStr = myMod.randomElt(myMod.strList);
var randomInt = myMod.randomElt(myMod.intList); var randomInt = myMod.randomElt(myMod.intList);
</textarea></form> </textarea></form>
<p>Demonstrates integration of <a href="http://ternjs.net/">Tern</a> <p>Demonstrates integration of <a href="http://ternjs.net/">Tern</a>
and CodeMirror. The following keys are bound:</p> and CodeMirror. The following keys are bound:</p>
<dl> <dl>
<dt>Ctrl-Space</dt><dd>Autocomplete</dd> <dt>Ctrl-Space</dt>
<dt>Ctrl-O</dt><dd>Find docs for the expression at the cursor</dd> <dd>Autocomplete</dd>
<dt>Ctrl-I</dt><dd>Find type at cursor</dd> <dt>Ctrl-O</dt>
<dt>Alt-.</dt><dd>Jump to definition (Alt-, to jump back)</dd> <dd>Find docs for the expression at the cursor</dd>
<dt>Ctrl-Q</dt><dd>Rename variable</dd> <dt>Ctrl-I</dt>
<dt>Ctrl-.</dt><dd>Select all occurrences of a variable</dd> <dd>Find type at cursor</dd>
</dl> <dt>Alt-.</dt>
<dd>Jump to definition (Alt-, to jump back)</dd>
<p>Documentation is sparse for now. See the top of <dt>Ctrl-Q</dt>
the <a href="../addon/tern/tern.js">script</a> for a rough API <dd>Rename variable</dd>
overview.</p> <dt>Ctrl-.</dt>
<dd>Select all occurrences of a variable</dd>
<script> </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) { function getURL(url, c) {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open("get", url, true); xhr.open("get", url, true);
xhr.send(); xhr.send();
xhr.onreadystatechange = function() { xhr.onreadystatechange = function () {
if (xhr.readyState != 4) return; if (xhr.readyState != 4) return;
if (xhr.status < 400) return c(null, xhr.responseText); if (xhr.status < 400) return c(null, xhr.responseText);
var e = new Error(xhr.responseText || "No response"); var e = new Error(xhr.responseText || "No response");
...@@ -109,25 +117,41 @@ overview.</p> ...@@ -109,25 +117,41 @@ overview.</p>
} }
var server; 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); if (err) throw new Error("Request for ecmascript.json: " + err);
server = new CodeMirror.TernServer({defs: [JSON.parse(code)]}); server = new CodeMirror.TernServer({defs: [JSON.parse(code)]});
editor.setOption("extraKeys", { editor.setOption("extraKeys", {
"Ctrl-Space": function(cm) { server.complete(cm); }, "Ctrl-Space": function (cm) {
"Ctrl-I": function(cm) { server.showType(cm); }, server.complete(cm);
"Ctrl-O": function(cm) { server.showDocs(cm); }, },
"Alt-.": function(cm) { server.jumpToDef(cm); }, "Ctrl-I": function (cm) {
"Alt-,": function(cm) { server.jumpBack(cm); }, server.showType(cm);
"Ctrl-Q": function(cm) { server.rename(cm); }, },
"Ctrl-.": function(cm) { server.selectName(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"), { var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true, lineNumbers: true,
mode: "javascript" mode: "javascript"
}); });
</script> </script>
</article> </article>
...@@ -2,77 +2,80 @@ ...@@ -2,77 +2,80 @@
<title>CodeMirror: Theme Demo</title> <title>CodeMirror: Theme Demo</title>
<meta charset="utf-8"/> <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">
<link rel="stylesheet" href="../theme/3024-day.css"> <link href="../theme/3024-day.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/3024-night.css"> <link href="../theme/3024-night.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/abcdef.css"> <link href="../theme/abcdef.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/ambiance.css"> <link href="../theme/ambiance.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/ayu-dark.css"> <link href="../theme/ayu-dark.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/ayu-mirage.css"> <link href="../theme/ayu-mirage.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/base16-dark.css"> <link href="../theme/base16-dark.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/bespin.css"> <link href="../theme/bespin.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/base16-light.css"> <link href="../theme/base16-light.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/blackboard.css"> <link href="../theme/blackboard.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/cobalt.css"> <link href="../theme/cobalt.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/colorforth.css"> <link href="../theme/colorforth.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/dracula.css"> <link href="../theme/dracula.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/duotone-dark.css"> <link href="../theme/duotone-dark.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/duotone-light.css"> <link href="../theme/duotone-light.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/eclipse.css"> <link href="../theme/eclipse.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/elegant.css"> <link href="../theme/elegant.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/erlang-dark.css"> <link href="../theme/erlang-dark.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/gruvbox-dark.css"> <link href="../theme/gruvbox-dark.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/hopscotch.css"> <link href="../theme/hopscotch.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/icecoder.css"> <link href="../theme/icecoder.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/isotope.css"> <link href="../theme/isotope.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/lesser-dark.css"> <link href="../theme/lesser-dark.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/liquibyte.css"> <link href="../theme/liquibyte.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/lucario.css"> <link href="../theme/lucario.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/material.css"> <link href="../theme/material.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/material-darker.css"> <link href="../theme/material-darker.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/material-palenight.css"> <link href="../theme/material-palenight.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/material-ocean.css"> <link href="../theme/material-ocean.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/mbo.css"> <link href="../theme/mbo.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/mdn-like.css"> <link href="../theme/mdn-like.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/midnight.css"> <link href="../theme/midnight.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/monokai.css"> <link href="../theme/monokai.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/moxer.css"> <link href="../theme/moxer.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/neat.css"> <link href="../theme/neat.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/neo.css"> <link href="../theme/neo.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/night.css"> <link href="../theme/night.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/nord.css"> <link href="../theme/nord.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/oceanic-next.css"> <link href="../theme/oceanic-next.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/panda-syntax.css"> <link href="../theme/panda-syntax.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/paraiso-dark.css"> <link href="../theme/paraiso-dark.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/paraiso-light.css"> <link href="../theme/paraiso-light.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/pastel-on-dark.css"> <link href="../theme/pastel-on-dark.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/railscasts.css"> <link href="../theme/railscasts.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/rubyblue.css"> <link href="../theme/rubyblue.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/seti.css"> <link href="../theme/seti.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/shadowfox.css"> <link href="../theme/shadowfox.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/solarized.css"> <link href="../theme/solarized.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/the-matrix.css"> <link href="../theme/the-matrix.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/tomorrow-night-bright.css"> <link href="../theme/tomorrow-night-bright.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/tomorrow-night-eighties.css"> <link href="../theme/tomorrow-night-eighties.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/ttcn.css"> <link href="../theme/ttcn.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/twilight.css"> <link href="../theme/twilight.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/vibrant-ink.css"> <link href="../theme/vibrant-ink.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/xq-dark.css"> <link href="../theme/xq-dark.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/xq-light.css"> <link href="../theme/xq-light.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/yeti.css"> <link href="../theme/yeti.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/idea.css"> <link href="../theme/idea.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/darcula.css"> <link href="../theme/darcula.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/yonce.css"> <link href="../theme/yonce.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/zenburn.css"> <link href="../theme/zenburn.css" rel="stylesheet">
<script src="../lib/codemirror.js"></script> <script src="../lib/codemirror.js"></script>
<script src="../mode/javascript/javascript.js"></script> <script src="../mode/javascript/javascript.js"></script>
<script src="../addon/selection/active-line.js"></script> <script src="../addon/selection/active-line.js"></script>
<script src="../addon/edit/matchbrackets.js"></script> <script src="../addon/edit/matchbrackets.js"></script>
<style> <style>
.CodeMirror {border: 1px solid black; font-size:13px} .CodeMirror {
</style> border: 1px solid black;
font-size: 13px
}
</style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -87,8 +90,8 @@ ...@@ -87,8 +90,8 @@
</div> </div>
<article> <article>
<h2>Theme Demo</h2> <h2>Theme Demo</h2>
<form><textarea id="code" name="code"> <form><textarea id="code" name="code">
function findSequence(goal) { function findSequence(goal) {
function find(start, history) { function find(start, history) {
if (start == goal) if (start == goal)
...@@ -102,7 +105,7 @@ function findSequence(goal) { ...@@ -102,7 +105,7 @@ function findSequence(goal) {
return find(1, "1"); return find(1, "1");
}</textarea></form> }</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 selected>default</option>
<option>3024-day</option> <option>3024-day</option>
<option>3024-night</option> <option>3024-night</option>
...@@ -166,21 +169,23 @@ function findSequence(goal) { ...@@ -166,21 +169,23 @@ function findSequence(goal) {
<option>yeti</option> <option>yeti</option>
<option>yonce</option> <option>yonce</option>
<option>zenburn</option> <option>zenburn</option>
</select> </select>
</p> </p>
<script> <script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true, lineNumbers: true,
styleActiveLine: true, styleActiveLine: true,
matchBrackets: true matchBrackets: true
}); });
var input = document.getElementById("select"); var input = document.getElementById("select");
function selectTheme() { function selectTheme() {
var theme = input.options[input.selectedIndex].textContent; var theme = input.options[input.selectedIndex].textContent;
editor.setOption("theme", theme); editor.setOption("theme", theme);
location.hash = "#" + theme; location.hash = "#" + theme;
} }
var choice = (location.hash && location.hash.slice(1)) || var choice = (location.hash && location.hash.slice(1)) ||
(document.location.search && (document.location.search &&
decodeURIComponent(document.location.search.slice(1))); decodeURIComponent(document.location.search.slice(1)));
...@@ -188,9 +193,12 @@ function findSequence(goal) { ...@@ -188,9 +193,12 @@ function findSequence(goal) {
input.value = choice; input.value = choice;
editor.setOption("theme", choice); editor.setOption("theme", choice);
} }
CodeMirror.on(window, "hashchange", function() { CodeMirror.on(window, "hashchange", function () {
var theme = location.hash.slice(1); var theme = location.hash.slice(1);
if (theme) { input.value = theme; selectTheme(); } if (theme) {
input.value = theme;
selectTheme();
}
}); });
</script> </script>
</article> </article>
...@@ -2,19 +2,23 @@ ...@@ -2,19 +2,23 @@
<title>CodeMirror: Trailing Whitespace Demo</title> <title>CodeMirror: Trailing Whitespace Demo</title>
<meta charset="utf-8"/> <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="../lib/codemirror.js"></script>
<script src="../addon/edit/trailingspace.js"></script> <script src="../addon/edit/trailingspace.js"></script>
<style> <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 { .cm-trailingspace {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUXCToH00Y1UgAAACFJREFUCNdjPMDBUc/AwNDAAAFMTAwMDA0OP34wQgX/AQBYgwYEx4f9lQAAAABJRU5ErkJggg==); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUXCToH00Y1UgAAACFJREFUCNdjPMDBUc/AwNDAAAFMTAwMDA0OP34wQgX/AQBYgwYEx4f9lQAAAABJRU5ErkJggg==);
background-position: bottom left; background-position: bottom left;
background-repeat: repeat-x; background-repeat: repeat-x;
} }
</style> </style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -29,20 +33,20 @@ ...@@ -29,20 +33,20 @@
</div> </div>
<article> <article>
<h2>Trailing Whitespace Demo</h2> <h2>Trailing Whitespace Demo</h2>
<form><textarea id="code" name="code">This text <form><textarea id="code" name="code">This text
has some has some
trailing whitespace!</textarea></form> trailing whitespace!</textarea></form>
<script> <script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true, lineNumbers: true,
showTrailingSpace: true showTrailingSpace: true
}); });
</script> </script>
<p>Uses <p>Uses
the <a href="../doc/manual.html#addon_trailingspace">trailingspace</a> the <a href="../doc/manual.html#addon_trailingspace">trailingspace</a>
addon to highlight trailing whitespace.</p> addon to highlight trailing whitespace.</p>
</article> </article>
...@@ -2,23 +2,50 @@ ...@@ -2,23 +2,50 @@
<title>CodeMirror: Variable Height Demo</title> <title>CodeMirror: Variable Height Demo</title>
<meta charset="utf-8"/> <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="../lib/codemirror.js"></script>
<script src="../mode/markdown/markdown.js"></script> <script src="../mode/markdown/markdown.js"></script>
<script src="../mode/xml/xml.js"></script> <script src="../mode/xml/xml.js"></script>
<style> <style>
.CodeMirror {border: 1px solid silver; border-width: 1px 2px; } .CodeMirror {
.cm-header { font-family: arial; } border: 1px solid silver;
.cm-header-1 { font-size: 150%; } border-width: 1px 2px;
.cm-header-2 { font-size: 130%; } }
.cm-header-3 { font-size: 120%; }
.cm-header-4 { font-size: 110%; } .cm-header {
.cm-header-5 { font-size: 100%; } font-family: arial;
.cm-header-6 { font-size: 90%; } }
.cm-strong { font-size: 140%; }
</style> .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> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -33,8 +60,8 @@ ...@@ -33,8 +60,8 @@
</div> </div>
<article> <article>
<h2>Variable Height Demo</h2> <h2>Variable Height Demo</h2>
<form><textarea id="code" name="code"># A First Level Header <form><textarea id="code" name="code"># A First Level Header
**Bold** text in a normal-size paragraph. **Bold** text in a normal-size paragraph.
...@@ -64,4 +91,4 @@ dog's back. ...@@ -64,4 +91,4 @@ dog's back.
mode: "markdown" mode: "markdown"
}); });
</script> </script>
</article> </article>
...@@ -2,12 +2,12 @@ ...@@ -2,12 +2,12 @@
<title>CodeMirror: Vim bindings demo</title> <title>CodeMirror: Vim bindings demo</title>
<meta charset="utf-8"/> <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">
<link rel="stylesheet" href="../addon/dialog/dialog.css"> <link href="../addon/dialog/dialog.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/midnight.css"> <link href="../theme/midnight.css" rel="stylesheet">
<link rel="stylesheet" href="../theme/solarized.css"> <link href="../theme/solarized.css" rel="stylesheet">
<script src="../lib/codemirror.js"></script> <script src="../lib/codemirror.js"></script>
<script src="../addon/dialog/dialog.js"></script> <script src="../addon/dialog/dialog.js"></script>
<script src="../addon/search/searchcursor.js"></script> <script src="../addon/search/searchcursor.js"></script>
...@@ -15,8 +15,11 @@ ...@@ -15,8 +15,11 @@
<script src="../addon/edit/matchbrackets.js"></script> <script src="../addon/edit/matchbrackets.js"></script>
<script src="../keymap/vim.js"></script> <script src="../keymap/vim.js"></script>
<style> <style>
.CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee;} .CodeMirror {
</style> border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
</style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -31,20 +34,20 @@ ...@@ -31,20 +34,20 @@
</div> </div>
<article> <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 <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 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 likely to go unanswered. It also means that if you want to help, you
are very welcome to look are very welcome to look
at <a href="https://github.com/codemirror/codemirror/issues?q=is%3Aissue+is%3Aopen+label%3Avim">the 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> 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" #include "syscalls.h"
/* getchar: simple buffered version */ /* getchar: simple buffered version */
int getchar(void) int getchar(void)
{ {
static char buf[BUFSIZ]; static char buf[BUFSIZ];
static char *bufp = buf; static char *bufp = buf;
static int n = 0; static int n = 0;
...@@ -55,16 +58,16 @@ int getchar(void) ...@@ -55,16 +58,16 @@ int getchar(void)
return (--n >= 0) ? (unsigned char) *bufp++ : EOF; return (--n >= 0) ? (unsigned char) *bufp++ : EOF;
} }
</textarea></form> </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;">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;">Vim mode: <span id="vim-mode"></span></div>
<p>The vim keybindings are enabled by including <code><a <p>The vim keybindings are enabled by including <code><a
href="../keymap/vim.js">keymap/vim.js</a></code> and setting the href="../keymap/vim.js">keymap/vim.js</a></code> and setting the
<code>keyMap</code> option to <code>vim</code>.</p> <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>All common motions and operators, including text objects</li>
<li>Operator motion orthogonality</li> <li>Operator motion orthogonality</li>
<li>Visual mode - characterwise, linewise, blockwise</li> <li>Visual mode - characterwise, linewise, blockwise</li>
...@@ -79,18 +82,20 @@ href="../keymap/vim.js">keymap/vim.js</a></code> and setting the ...@@ -79,18 +82,20 @@ href="../keymap/vim.js">keymap/vim.js</a></code> and setting the
<li>:global</li> <li>:global</li>
<li>Insert mode behaves identical to base CodeMirror</li> <li>Insert mode behaves identical to base CodeMirror</li>
<li>Cross-buffer yank/paste</li> <li>Cross-buffer yank/paste</li>
</ul> </ul>
<p>For the full list of key mappings and Ex commands, refer to the <p>For the full list of key mappings and Ex commands, refer to the
<code>defaultKeymap</code> and <code>defaultExCommandMap</code> at the <code>defaultKeymap</code> and <code>defaultExCommandMap</code> at the
top of <code><a href="../keymap/vim.js">keymap/vim.js</a></code>. 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 <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 features of vim as faithfully as possible, it does not strive to
become a complete vim implementation</p> become a complete vim implementation</p>
<script> <script>
CodeMirror.commands.save = function(){ alert("Saving"); }; CodeMirror.commands.save = function () {
alert("Saving");
};
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true, lineNumbers: true,
mode: "text/x-csrc", mode: "text/x-csrc",
...@@ -100,18 +105,18 @@ become a complete vim implementation</p> ...@@ -100,18 +105,18 @@ become a complete vim implementation</p>
}); });
var commandDisplay = document.getElementById('command-display'); var commandDisplay = document.getElementById('command-display');
var keys = ''; var keys = '';
CodeMirror.on(editor, 'vim-keypress', function(key) { CodeMirror.on(editor, 'vim-keypress', function (key) {
keys = keys + key; keys = keys + key;
commandDisplay.innerText = keys; commandDisplay.innerText = keys;
}); });
CodeMirror.on(editor, 'vim-command-done', function(e) { CodeMirror.on(editor, 'vim-command-done', function (e) {
keys = ''; keys = '';
commandDisplay.innerHTML = keys; commandDisplay.innerHTML = keys;
}); });
var vimMode = document.getElementById('vim-mode'); 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); vimMode.innerText = JSON.stringify(e);
}); });
</script> </script>
</article> </article>
...@@ -2,19 +2,23 @@ ...@@ -2,19 +2,23 @@
<title>CodeMirror: Visible tabs demo</title> <title>CodeMirror: Visible tabs demo</title>
<meta charset="utf-8"/> <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="../lib/codemirror.js"></script>
<script src="../mode/clike/clike.js"></script> <script src="../mode/clike/clike.js"></script>
<style> <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 { .cm-tab {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=); background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);
background-position: right; background-position: right;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
</style> </style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -29,12 +33,12 @@ ...@@ -29,12 +33,12 @@
</div> </div>
<article> <article>
<h2>Visible tabs demo</h2> <h2>Visible tabs demo</h2>
<form><textarea id="code" name="code"> <form><textarea id="code" name="code">
#include "syscalls.h" #include "syscalls.h"
/* getchar: simple buffered version */ /* getchar: simple buffered version */
int getchar(void) int getchar(void)
{ {
static char buf[BUFSIZ]; static char buf[BUFSIZ];
static char *bufp = buf; static char *bufp = buf;
static int n = 0; static int n = 0;
...@@ -46,8 +50,8 @@ int getchar(void) ...@@ -46,8 +50,8 @@ int getchar(void)
} }
</textarea></form> </textarea></form>
<p>Tabs inside the editor are spans with the <p>Tabs inside the editor are spans with the
class <code>cm-tab</code>, and can be styled.</p> class <code>cm-tab</code>, and can be styled.</p>
<script> <script>
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
...@@ -59,4 +63,4 @@ class <code>cm-tab</code>, and can be styled.</p> ...@@ -59,4 +63,4 @@ class <code>cm-tab</code>, and can be styled.</p>
}); });
</script> </script>
</article> </article>
...@@ -2,17 +2,34 @@ ...@@ -2,17 +2,34 @@
<title>CodeMirror: Inline Widget Demo</title> <title>CodeMirror: Inline Widget Demo</title>
<meta charset="utf-8"/> <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="../lib/codemirror.js"></script>
<script src="../mode/javascript/javascript.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> <script src="https://cdnjs.cloudflare.com/ajax/libs/jshint/2.9.5/jshint.min.js"></script>
<style> <style>
.CodeMirror {border: 1px solid black;} .CodeMirror {
.lint-error {font-family: arial; font-size: 70%; background: #ffa; color: #a00; padding: 2px 5px 3px; } border: 1px solid black;
.lint-error-icon {color: white; background-color: red; font-weight: bold; border-radius: 50%; padding: 0 3px; margin-right: 7px;} }
</style>
.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> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -27,13 +44,14 @@ ...@@ -27,13 +44,14 @@
</div> </div>
<article> <article>
<h2>Inline Widget Demo</h2> <h2>Inline Widget Demo</h2>
<div id=code></div> <div id=code></div>
<script id="script">var widgets = [] <script id="script">var widgets = []
function updateHints() {
editor.operation(function(){ function updateHints() {
editor.operation(function () {
for (var i = 0; i < widgets.length; ++i) for (var i = 0; i < widgets.length; ++i)
editor.removeLineWidget(widgets[i]); editor.removeLineWidget(widgets[i]);
widgets.length = 0; widgets.length = 0;
...@@ -55,9 +73,9 @@ function updateHints() { ...@@ -55,9 +73,9 @@ function updateHints() {
var after = editor.charCoords({line: editor.getCursor().line + 1, ch: 0}, "local").top; var after = editor.charCoords({line: editor.getCursor().line + 1, ch: 0}, "local").top;
if (info.top + info.clientHeight < after) if (info.top + info.clientHeight < after)
editor.scrollTo(null, after - info.clientHeight + 3); editor.scrollTo(null, after - info.clientHeight + 3);
} }
window.onload = function() { window.onload = function () {
var sc = document.getElementById("script"); var sc = document.getElementById("script");
var content = sc.textContent || sc.innerText || sc.innerHTML; var content = sc.textContent || sc.innerText || sc.innerHTML;
...@@ -68,18 +86,18 @@ window.onload = function() { ...@@ -68,18 +86,18 @@ window.onload = function() {
}); });
var waiting; var waiting;
editor.on("change", function() { editor.on("change", function () {
clearTimeout(waiting); clearTimeout(waiting);
waiting = setTimeout(updateHints, 500); waiting = setTimeout(updateHints, 500);
}); });
setTimeout(updateHints, 100); 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"; "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> </script>
<p>This demo runs <a href="http://jshint.com">JSHint</a> over the code <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 in the editor (which is the script used on this page), and
inserts <a href="../doc/manual.html#addLineWidget">line widgets</a> to inserts <a href="../doc/manual.html#addLineWidget">line widgets</a> to
display the warnings that JSHint comes up with.</p> display the warnings that JSHint comes up with.</p>
</article> </article>
...@@ -2,17 +2,19 @@ ...@@ -2,17 +2,19 @@
<title>CodeMirror: XML Autocomplete Demo</title> <title>CodeMirror: XML Autocomplete Demo</title>
<meta charset="utf-8"/> <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">
<link rel="stylesheet" href="../addon/hint/show-hint.css"> <link href="../addon/hint/show-hint.css" rel="stylesheet">
<script src="../lib/codemirror.js"></script> <script src="../lib/codemirror.js"></script>
<script src="../addon/hint/show-hint.js"></script> <script src="../addon/hint/show-hint.js"></script>
<script src="../addon/hint/xml-hint.js"></script> <script src="../addon/hint/xml-hint.js"></script>
<script src="../mode/xml/xml.js"></script> <script src="../mode/xml/xml.js"></script>
<style> <style>
.CodeMirror { border: 1px solid #eee; } .CodeMirror {
</style> border: 1px solid #eee;
}
</style>
<div id=nav> <div id=nav>
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
...@@ -27,8 +29,8 @@ ...@@ -27,8 +29,8 @@
</div> </div>
<article> <article>
<h2>XML Autocomplete Demo</h2> <h2>XML Autocomplete Demo</h2>
<form><textarea id="code" name="code"><!-- write some xml below --> <form><textarea id="code" name="code"><!-- write some xml below -->
</textarea></form> </textarea></form>
<p>Press <strong>ctrl-space</strong>, or type a '&lt;' character to <p>Press <strong>ctrl-space</strong>, or type a '&lt;' character to
...@@ -80,7 +82,7 @@ ...@@ -80,7 +82,7 @@
function completeAfter(cm, pred) { function completeAfter(cm, pred) {
var cur = cm.getCursor(); var cur = cm.getCursor();
if (!pred || pred()) setTimeout(function() { if (!pred || pred()) setTimeout(function () {
if (!cm.state.completionActive) if (!cm.state.completionActive)
cm.showHint({completeSingle: false}); cm.showHint({completeSingle: false});
}, 100); }, 100);
...@@ -88,14 +90,14 @@ ...@@ -88,14 +90,14 @@
} }
function completeIfAfterLt(cm) { function completeIfAfterLt(cm) {
return completeAfter(cm, function() { return completeAfter(cm, function () {
var cur = cm.getCursor(); var cur = cm.getCursor();
return cm.getRange(CodeMirror.Pos(cur.line, cur.ch - 1), cur) == "<"; return cm.getRange(CodeMirror.Pos(cur.line, cur.ch - 1), cur) == "<";
}); });
} }
function completeIfInTag(cm) { function completeIfInTag(cm) {
return completeAfter(cm, function() { return completeAfter(cm, function () {
var tok = cm.getTokenAt(cm.getCursor()); var tok = cm.getTokenAt(cm.getCursor());
if (tok.type == "string" && (!/['"]/.test(tok.string.charAt(tok.string.length - 1)) || tok.string.length == 1)) return false; 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; var inner = CodeMirror.innerMode(cm.getMode(), tok.state).state;
...@@ -116,4 +118,4 @@ ...@@ -116,4 +118,4 @@
hintOptions: {schemaInfo: tags} hintOptions: {schemaInfo: tags}
}); });
</script> </script>
</article> </article>
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
document.createElement("section"); document.createElement("section");
document.createElement("article"); document.createElement("article");
(function() { (function () {
if (!window.addEventListener) return; if (!window.addEventListener) return;
var pending = false, prevVal = null; var pending = false, prevVal = null;
...@@ -44,12 +44,15 @@ document.createElement("article"); ...@@ -44,12 +44,15 @@ document.createElement("article");
window.addEventListener("scroll", updateSoon); window.addEventListener("scroll", updateSoon);
window.addEventListener("load", updateSoon); window.addEventListener("load", updateSoon);
window.addEventListener("hashchange", function() { window.addEventListener("hashchange", function () {
setTimeout(function() { setTimeout(function () {
var hash = document.location.hash, found = null, m; var hash = document.location.hash, found = null, m;
var marks = document.getElementById("nav").getElementsByTagName("a"); var marks = document.getElementById("nav").getElementsByTagName("a");
for (var i = 0; i < marks.length; i++) 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++) if (found != null) for (var i = 0; i < marks.length; i++)
marks[i].className = i == found ? "active" : ""; marks[i].className = i == found ? "active" : "";
}, 300); }, 300);
......
...@@ -5,8 +5,16 @@ ...@@ -5,8 +5,16 @@
src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(//themes.googleusercontent.com/static/fonts/sourcesanspro/v5/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff'); 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%; } body, html {
section, article { display: block; padding: 0; } margin: 0;
padding: 0;
height: 100%;
}
section, article {
display: block;
padding: 0;
}
body { body {
background: #f8f8f8; background: #f8f8f8;
...@@ -14,16 +22,30 @@ body { ...@@ -14,16 +22,30 @@ body {
line-height: 1.5; line-height: 1.5;
} }
p { margin-top: 0; } p {
margin-top: 0;
}
h2, h3, h1 { h2, h3, h1 {
font-weight: normal; font-weight: normal;
margin-bottom: .7em; margin-bottom: .7em;
} }
h1 { font-size: 140%; }
h2 { font-size: 120%; } h1 {
h3 { font-size: 110%; } font-size: 140%;
article > h2:first-child, section:first-child > h2 { margin-top: 0; } }
h2 {
font-size: 120%;
}
h3 {
font-size: 110%;
}
article > h2:first-child, section:first-child > h2 {
margin-top: 0;
}
#nav h1 { #nav h1 {
margin-right: 12px; margin-right: 12px;
...@@ -66,7 +88,8 @@ article { ...@@ -66,7 +88,8 @@ article {
box-sizing: -moz-border-box; box-sizing: -moz-border-box;
box-sizing: border-box; box-sizing: border-box;
overflow-y: auto; overflow-y: auto;
left: 0; right: none; left: 0;
right: none;
width: 160px; width: 160px;
text-align: right; text-align: right;
z-index: 1; z-index: 1;
...@@ -76,6 +99,7 @@ article { ...@@ -76,6 +99,7 @@ article {
article { article {
margin: 0 auto; margin: 0 auto;
} }
#nav { #nav {
right: 50%; right: 50%;
width: auto; width: auto;
...@@ -85,7 +109,8 @@ article { ...@@ -85,7 +109,8 @@ article {
#nav ul { #nav ul {
display: block; display: block;
margin: 0; padding: 0; margin: 0;
padding: 0;
margin-bottom: 32px; margin-bottom: 32px;
} }
...@@ -154,7 +179,8 @@ section.first { ...@@ -154,7 +179,8 @@ section.first {
.yinyang { .yinyang {
position: absolute; position: absolute;
top: -10px; top: -10px;
left: 0; right: 0; left: 0;
right: 0;
margin: auto; margin: auto;
display: block; display: block;
height: 120px; height: 120px;
...@@ -170,7 +196,9 @@ section.first { ...@@ -170,7 +196,9 @@ section.first {
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
height: 100px; height: 100px;
top: 0; left: 0; right: 0; top: 0;
left: 0;
right: 0;
} }
.actionlink { .actionlink {
...@@ -179,7 +207,8 @@ section.first { ...@@ -179,7 +207,8 @@ section.first {
font-size: 80%; font-size: 80%;
font-weight: bold; font-weight: bold;
position: absolute; position: absolute;
top: 0; bottom: 0; top: 0;
bottom: 0;
line-height: 1; line-height: 1;
height: 1em; height: 1em;
margin: auto; margin: auto;
...@@ -219,6 +248,7 @@ section.first { ...@@ -219,6 +248,7 @@ section.first {
.actions { .actions {
padding-top: 120px; padding-top: 120px;
} }
.actionsleft, .actionsright { .actionsleft, .actionsright {
float: none; float: none;
text-align: left; text-align: left;
...@@ -250,6 +280,7 @@ th { ...@@ -250,6 +280,7 @@ th {
.rel { .rel {
margin-bottom: 0; margin-bottom: 0;
} }
.rel-note { .rel-note {
margin-top: 0; margin-top: 0;
color: #555; 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