From 2ea2588a3365a49c2829a200977d776a7df09d46 Mon Sep 17 00:00:00 2001 From: Guillaume RODRIGUEZ Date: Tue, 1 Aug 2017 21:56:15 +0200 Subject: [PATCH] Improvements for quill (#18209) * Add root quill editor * Improvements - Typescript syntax - DefinitelyTyped 2.0 syntax - Add new Quill experimental API * Fix namespace error --- types/quill/index.d.ts | 384 +++++++++++++++++++++++-------------- types/quill/quill-tests.ts | 208 +++++++++----------- types/quill/tsconfig.json | 6 +- types/quill/tslint.json | 3 + 4 files changed, 339 insertions(+), 262 deletions(-) create mode 100644 types/quill/tslint.json diff --git a/types/quill/index.d.ts b/types/quill/index.d.ts index 91124814f5..fc780306f2 100644 --- a/types/quill/index.d.ts +++ b/types/quill/index.d.ts @@ -1,158 +1,258 @@ -// Type definitions for Quill +// Type definitions for Quill 1.3 // Project: https://github.com/quilljs/quill/ // Definitions by: Sumit +// Guillaume // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped -declare namespace Quill { +/** + * A stricter type definition would be: + * + * type DeltaOperation ({ insert: any } | { delete: number } | { retain: number }) & OptionalAttributes; + * + * But this would break a lot of existing code as it would require manual discrimination of the union types. + */ +export type DeltaOperation = { insert?: any, delete?: number, retain?: number } & OptionalAttributes; +export type Sources = "api" | "user" | "silent"; - type Key = { key: string, shortKey?: boolean }; - type Sources = "api" | "user" | "silent"; - type StringMap = { [key: string]: any }; - type OptionalAttributes = { attributes?: StringMap }; +export interface Key { + key: string; + shortKey?: boolean; +} + +export interface StringMap { + [key: string]: any; +} + +export interface OptionalAttributes { + attributes?: StringMap; +} + +export type TextChangeHandler = (delta: DeltaStatic, oldContents: DeltaStatic, source: Sources) => any; +export type SelectionChangeHandler = (range: RangeStatic, oldRange: RangeStatic, source: Sources) => any; +export type EditorChangeHandler = ((name: "text-change", delta: DeltaStatic, oldContents: DeltaStatic, source: Sources) => any) + | ((name: "selection-change", range: RangeStatic, oldRange: RangeStatic, source: Sources) => any); + +export interface KeyboardStatic { + addBinding(key: Key, callback: (range: RangeStatic, context: any) => void): void; + addBinding(key: Key, context: any, callback: (range: RangeStatic, context: any) => void): void; +} + +export interface ClipboardStatic { + addMatcher(selectorOrNodeType: string|number, callback: (node: any, delta: DeltaStatic) => DeltaStatic): void; + dangerouslyPasteHTML(html: string, source?: Sources): void; + dangerouslyPasteHTML(index: number, html: string, source?: Sources): void; +} + +export interface QuillOptionsStatic { + debug?: string; + modules?: StringMap; + placeholder?: string; + readOnly?: boolean; + theme?: string; + formats?: string[]; + bounds?: HTMLElement | string; +} + +export interface BoundsStatic { + left: number; + top: number; + height: number; + width: number; +} + +export interface DeltaStatic { + ops?: DeltaOperation[]; + retain(length: number, attributes?: StringMap): DeltaStatic; + delete(length: number): DeltaStatic; + filter(predicate: (op: DeltaOperation) => boolean): DeltaOperation[]; + forEach(predicate: (op: DeltaOperation) => void): void; + insert(text: any, attributes?: StringMap): DeltaStatic; + map(predicate: (op: DeltaOperation) => T): T[]; + partition(predicate: (op: DeltaOperation) => boolean): [DeltaOperation[], DeltaOperation[]]; + reduce(predicate: (acc: T, curr: DeltaOperation, idx: number, arr: DeltaOperation[]) => T, initial: T): T; + chop(): DeltaStatic; + length(): number; + slice(start?: number, end?: number): DeltaStatic; + compose(other: DeltaStatic): DeltaStatic; + concat(other: DeltaStatic): DeltaStatic; + diff(other: DeltaStatic, index?: number): DeltaStatic; + eachLine(predicate: (line: DeltaStatic, attributes: StringMap, idx: number) => any, newline?: string): DeltaStatic; + transform(index: number): number; + transform(other: DeltaStatic, priority: boolean): DeltaStatic; + transformPosition(index: number): number; +} + +export class Delta implements DeltaStatic { + constructor(ops?: DeltaOperation[] | { ops: DeltaOperation[] }); + ops?: DeltaOperation[]; + retain(length: number, attributes?: StringMap): DeltaStatic; + delete(length: number): DeltaStatic; + filter(predicate: (op: DeltaOperation) => boolean): DeltaOperation[]; + forEach(predicate: (op: DeltaOperation) => void): void; + insert(text: any, attributes?: StringMap): DeltaStatic; + map(predicate: (op: DeltaOperation) => T): T[]; + partition(predicate: (op: DeltaOperation) => boolean): [DeltaOperation[], DeltaOperation[]]; + reduce(predicate: (acc: T, curr: DeltaOperation, idx: number, arr: DeltaOperation[]) => T, initial: T): T; + chop(): DeltaStatic; + length(): number; + slice(start?: number, end?: number): DeltaStatic; + compose(other: DeltaStatic): DeltaStatic; + concat(other: DeltaStatic): DeltaStatic; + diff(other: DeltaStatic, index?: number): DeltaStatic; + eachLine(predicate: (line: DeltaStatic, attributes: StringMap, idx: number) => any, newline?: string): DeltaStatic; + transform(index: number): number; + transform(other: DeltaStatic, priority: boolean): DeltaStatic; + transformPosition(index: number): number; +} + +export interface RangeStatic { + index: number; + length: number; +} + +export class RangeStatic implements RangeStatic { + constructor(); + index: number; + length: number; +} + +export interface EventEmitter { + on(eventName: "text-change", handler: TextChangeHandler): EventEmitter; + on(eventName: "selection-change", handler: SelectionChangeHandler): EventEmitter; + on(eventName: "editor-change", handler: EditorChangeHandler): EventEmitter; + once(eventName: "text-change", handler: TextChangeHandler): EventEmitter; + once(eventName: "selection-change", handler: SelectionChangeHandler): EventEmitter; + once(eventName: "editor-change", handler: EditorChangeHandler): EventEmitter; + off(eventName: "text-change", handler: TextChangeHandler): EventEmitter; + off(eventName: "selection-change", handler: SelectionChangeHandler): EventEmitter; + off(eventName: "editor-change", handler: EditorChangeHandler): EventEmitter; +} + +export interface Quill extends EventEmitter { /** - * A stricter type definition would be: - * - * type DeltaOperation ({ insert: any } | { delete: number } | { retain: number }) & OptionalAttributes; - * - * But this would break a lot of existing code as it would require manual discrimination of the union types. + * @private Internal API */ - type DeltaOperation = { insert?: any, delete?: number, retain?: number } & OptionalAttributes; + root: HTMLDivElement; + clipboard: ClipboardStatic; + deleteText(index: number, length: number, source?: Sources): DeltaStatic; + disable(): void; + enable(enabled?: boolean): void; + getContents(index?: number, length?: number): DeltaStatic; + getLength(): number; + getText(index?: number, length?: number): string; + insertEmbed(index: number, type: string, value: any, source?: Sources): DeltaStatic; + insertText(index: number, text: string, source?: Sources): DeltaStatic; + insertText(index: number, text: string, format: string, value: any, source?: Sources): DeltaStatic; + insertText(index: number, text: string, formats: StringMap, source?: Sources): DeltaStatic; + /** + * @deprecated Remove in 2.0. Use clipboard.dangerouslyPasteHTML(index: number, html: string, source: Sources) + */ + pasteHTML(index: number, html: string, source?: Sources): string; + /** + * @deprecated Remove in 2.0. Use clipboard.dangerouslyPasteHTML(html: string, source: Sources): void; + */ + pasteHTML(html: string, source?: Sources): string; + setContents(delta: DeltaStatic, source?: Sources): DeltaStatic; + setText(text: string, source?: Sources): DeltaStatic; + update(source?: Sources): void; + updateContents(delta: DeltaStatic, source?: Sources): DeltaStatic; - type TextChangeHandler = (delta: DeltaStatic, oldContents: DeltaStatic, source: Sources) => any; - type SelectionChangeHandler = (range: RangeStatic, oldRange: RangeStatic, source: Sources) => any; - type EditorChangeHandler = ((name: "text-change", delta: DeltaStatic, oldContents: DeltaStatic, source: Sources) => any) - | ((name: "selection-change", range: RangeStatic, oldRange: RangeStatic, source: Sources) => any); + format(name: string, value: any, source?: Sources): DeltaStatic; + formatLine(index: number, length: number, source?: Sources): DeltaStatic; + formatLine(index: number, length: number, format: string, value: any, source?: Sources): DeltaStatic; + formatLine(index: number, length: number, formats: StringMap, source?: Sources): DeltaStatic; + formatText(index: number, length: number, source?: Sources): DeltaStatic; + formatText(index: number, length: number, format: string, value: any, source?: Sources): DeltaStatic; + formatText(index: number, length: number, formats: StringMap, source?: Sources): DeltaStatic; + getFormat(range?: RangeStatic): StringMap; + getFormat(index: number, length?: number): StringMap; + removeFormat(index: number, length: number, source?: Sources): DeltaStatic; - export interface KeyboardStatic { - addBinding(key: Key, callback: (range: RangeStatic, context: any) => void): void; - addBinding(key: Key, context: any, callback: (range: RangeStatic, context: any) => void) : void; - } + blur(): void; + focus(): void; + getBounds(index: number, length?: number): BoundsStatic; + getSelection(focus?: boolean): RangeStatic; + hasFocus(): boolean; + setSelection(index: number, length: number, source?: Sources): void; + setSelection(range: RangeStatic, source?: Sources): void; - export interface ClipboardStatic { - addMatcher(selector: string, callback: (node: any, delta: DeltaStatic) => DeltaStatic) : void; - addMatcher(nodeType: number, callback: (node: any, delta: DeltaStatic) => DeltaStatic) : void; - dangerouslyPasteHTML(html: string, source?: Sources): void; - dangerouslyPasteHTML(index: number, html: string, source?: Sources): void; - } + debug(level: string|boolean): void; + import(path: string): any; + register(path: string, def: any, suppressWarning?: boolean): void; + register(defs: StringMap, suppressWarning?: boolean): void; + addContainer(classNameOrDomNode: string|Node, refNode?: Node): any; + getModule(name: string): any; - export interface QuillOptionsStatic { - debug?: string, - modules?: StringMap, - placeholder?: string, - readOnly?: boolean, - theme?: string, - formats?: string[], - bounds?: HTMLElement | string - } - - export interface BoundsStatic { - left: number, - top: number, - height: number, - width: number - } - - export interface DeltaStatic { - new (ops?: DeltaOperation[] | { ops: DeltaOperation[] }) : DeltaStatic; - ops?: DeltaOperation[]; - retain(length: number, attributes?: StringMap) : DeltaStatic; - delete(length: number) : DeltaStatic; - filter(predicate: (op: DeltaOperation) => boolean) : DeltaOperation[]; - forEach(predicate: (op: DeltaOperation) => void) : void; - insert(text: any, attributes?: StringMap): DeltaStatic; - map(predicate: (op: DeltaOperation) => T) : T[]; - partition(predicate: (op: DeltaOperation) => boolean) : [DeltaOperation[], DeltaOperation[]]; - reduce(predicate: (acc: T, curr: DeltaOperation, idx: number, arr: DeltaOperation[]) => T, initial: T): T; - chop() : DeltaStatic; - length(): number; - slice(start?: number, end?: number): DeltaStatic; - compose(other: DeltaStatic): DeltaStatic; - concat(other: DeltaStatic): DeltaStatic; - diff(other: DeltaStatic, index?: number) : DeltaStatic; - eachLine(predicate: (line: DeltaStatic, attributes: StringMap, idx: number) => any, newline?: string) : DeltaStatic; - transform(index: number) : number; - transform(other: DeltaStatic, priority: boolean) : DeltaStatic; - transformPosition(index: number) : number; - } - - export interface RangeStatic { - new (): RangeStatic; - index: number; - length: number; - } - - export interface EventEmitter { - on(eventName: "text-change", handler: TextChangeHandler): EventEmitter; - on(eventName: "selection-change", handler: SelectionChangeHandler): EventEmitter; - on(eventName: "editor-change", handler: EditorChangeHandler): EventEmitter; - once(eventName: "text-change", handler: TextChangeHandler): EventEmitter; - once(eventName: "selection-change", handler: SelectionChangeHandler): EventEmitter; - once(eventName: "editor-change", handler: EditorChangeHandler): EventEmitter; - off(eventName: "text-change", handler: TextChangeHandler): EventEmitter; - off(eventName: "selection-change", handler: SelectionChangeHandler): EventEmitter; - off(eventName: "editor-change", handler: EditorChangeHandler): EventEmitter; - } - - export interface Quill extends EventEmitter { - new (container: string | Element, options?: QuillOptionsStatic): Quill; - deleteText(index: number, length: number, source?: Sources): void; - disable(): void; - enable(enabled?: boolean): void; - getContents(index?: number, length?: number): DeltaStatic; - getLength(): number; - getText(index?: number, length?: number): string; - insertEmbed(index: number, type: string, value: any, source?: Sources): void; - insertText(index: number, text: string, source?: Sources): DeltaStatic; - insertText(index: number, text: string, format: string, value: any, source?: Sources): DeltaStatic; - insertText(index: number, text: string, formats: StringMap, source?: Sources): DeltaStatic; - /** - * @deprecated Use clipboard.dangerouslyPasteHTML(index: number, html: string, source: Sources) - */ - pasteHTML(index: number, html: string, source?: Sources): string; - /** - * @deprecated Use dangerouslyPasteHTML(html: string, source: Sources): void; - */ - pasteHTML(html: string, source?: Sources): string; - setContents(delta: DeltaStatic, source?: Sources): DeltaStatic; - setText(text: string, source?: Sources): DeltaStatic; - update(source?: string): void; - updateContents(delta: DeltaStatic, source?: Sources): DeltaStatic; - - format(name: string, value: any, source?: Sources): DeltaStatic; - formatLine(index: number, length: number, source?: Sources): DeltaStatic; - formatLine(index: number, length: number, format: string, value: any, source?: Sources): DeltaStatic; - formatLine(index: number, length: number, formats: StringMap, source?: Sources): DeltaStatic; - formatText(index: number, length: number, source?: Sources): DeltaStatic; - formatText(index: number, length: number, format: string, value: any, source?: Sources): DeltaStatic; - formatText(index: number, length: number, formats: StringMap, source?: Sources): DeltaStatic; - getFormat(range?: RangeStatic): StringMap; - getFormat(index: number, length?: number): StringMap; - removeFormat(index: number, length: number, source?: Sources): void; - - blur(): void; - focus(): void; - getBounds(index: number, length?: number): BoundsStatic; - getSelection(focus?: boolean): RangeStatic; - hasFocus(): boolean; - setSelection(index: number, length: number, source?: Sources): void; - setSelection(range: RangeStatic, source?: Sources): void; - - debug(level: string): void; - import(path: string): any; - register(path: string, def: any, suppressWarning?: boolean): void; - register(defs: StringMap, suppressWarning?: boolean): void; - addContainer(className: string, refNode?: any): any; - addContainer(domNode: any, refNode?: any): any; - getModule(name: string): any - - clipboard: ClipboardStatic; - } + // Blot interface is not exported on Parchment + find(domNode: Node, bubble?: boolean): Quill | any; + getIndex(blot: any): number; + getLeaf(index: number): any; + getLine(index: number): [any, number]; + getLines(index?: number, length?: number): any[]; + getLines(range: RangeStatic): any[]; } -declare var Quill: Quill.Quill; +export class Quill implements Quill { + /** + * @private Internal API + */ + root: HTMLDivElement; + clipboard: ClipboardStatic; + constructor(container: string | Element, options?: QuillOptionsStatic); + deleteText(index: number, length: number, source?: Sources): DeltaStatic; + disable(): void; + enable(enabled?: boolean): void; + getContents(index?: number, length?: number): DeltaStatic; + getLength(): number; + getText(index?: number, length?: number): string; + insertEmbed(index: number, type: string, value: any, source?: Sources): DeltaStatic; + insertText(index: number, text: string, source?: Sources): DeltaStatic; + insertText(index: number, text: string, format: string, value: any, source?: Sources): DeltaStatic; + insertText(index: number, text: string, formats: StringMap, source?: Sources): DeltaStatic; + /** + * @deprecated Remove in 2.0. Use clipboard.dangerouslyPasteHTML(index: number, html: string, source: Sources) + */ + pasteHTML(index: number, html: string, source?: Sources): string; + /** + * @deprecated Remove in 2.0. Use clipboard.dangerouslyPasteHTML(html: string, source: Sources): void; + */ + pasteHTML(html: string, source?: Sources): string; + setContents(delta: DeltaStatic, source?: Sources): DeltaStatic; + setText(text: string, source?: Sources): DeltaStatic; + update(source?: Sources): void; + updateContents(delta: DeltaStatic, source?: Sources): DeltaStatic; -declare var Delta: Quill.DeltaStatic; + format(name: string, value: any, source?: Sources): DeltaStatic; + formatLine(index: number, length: number, source?: Sources): DeltaStatic; + formatLine(index: number, length: number, format: string, value: any, source?: Sources): DeltaStatic; + formatLine(index: number, length: number, formats: StringMap, source?: Sources): DeltaStatic; + formatText(index: number, length: number, source?: Sources): DeltaStatic; + formatText(index: number, length: number, format: string, value: any, source?: Sources): DeltaStatic; + formatText(index: number, length: number, formats: StringMap, source?: Sources): DeltaStatic; + getFormat(range?: RangeStatic): StringMap; + getFormat(index: number, length?: number): StringMap; + removeFormat(index: number, length: number, source?: Sources): DeltaStatic; -declare module "quill" { - export = Quill; + blur(): void; + focus(): void; + getBounds(index: number, length?: number): BoundsStatic; + getSelection(focus?: boolean): RangeStatic; + hasFocus(): boolean; + setSelection(index: number, length: number, source?: Sources): void; + setSelection(range: RangeStatic, source?: Sources): void; + + debug(level: string|boolean): void; + import(path: string): any; + register(path: string, def: any, suppressWarning?: boolean): void; + register(defs: StringMap, suppressWarning?: boolean): void; + addContainer(classNameOrDomNode: string|Node, refNode?: Node): any; + getModule(name: string): any; + + // Blot interface is not exported on Parchment + find(domNode: Node, bubble?: boolean): Quill | any; + getIndex(blot: any): number; + getLeaf(index: number): any; + getLine(index: number): [any, number]; + getLines(index?: number, length?: number): any[]; + getLines(range: RangeStatic): any[]; } diff --git a/types/quill/quill-tests.ts b/types/quill/quill-tests.ts index f45781a685..142c821ffa 100644 --- a/types/quill/quill-tests.ts +++ b/types/quill/quill-tests.ts @@ -1,103 +1,103 @@ +import { Quill, Delta, DeltaStatic, RangeStatic, StringMap } from 'quill'; + function test_quill() { - var quillEditor = new Quill('#editor', { + const quillEditor = new Quill('#editor', { modules: { - "toolbar": { container: "#toolbar" } + toolbar: { container: "#toolbar" } }, theme: 'snow' }); } function test_deleteText() { - var quillEditor = new Quill('#editor'); + const quillEditor = new Quill('#editor'); quillEditor.deleteText(0, 10); } function test_disable() { - let quillEditor = new Quill('#Editor'); + const quillEditor = new Quill('#Editor'); quillEditor.disable(); } function test_enable() { - let quillEditor = new Quill('#Editor'); + const quillEditor = new Quill('#Editor'); quillEditor.enable(); } function test_enable_false() { - let quillEditor = new Quill('#Editor'); + const quillEditor = new Quill('#Editor'); quillEditor.enable(false); } function test_getContents() { - var quillEditor = new Quill('#editor'); - var delta: Quill.DeltaStatic = quillEditor.getContents(); + const quillEditor = new Quill('#editor'); + const delta: DeltaStatic = quillEditor.getContents(); } function test_getLength() { - var quillEditor = new Quill('#editor'); - var num: number = quillEditor.getLength(); + const quillEditor = new Quill('#editor'); + const num: number = quillEditor.getLength(); } function test_getText() { - var quillEditor = new Quill('#editor'); - var strValue: string = quillEditor.getText(); + const quillEditor = new Quill('#editor'); + const strValue: string = quillEditor.getText(); } function test_getText_StartingAt() { - var quillEditor = new Quill('#editor'); - var strValue: string = quillEditor.getText(10); + const quillEditor = new Quill('#editor'); + const strValue: string = quillEditor.getText(10); } function test_getText_substring() { - var quillEditor = new Quill('#editor'); - var strValue: string = quillEditor.getText(0, 10); + const quillEditor = new Quill('#editor'); + const strValue: string = quillEditor.getText(0, 10); } function test_insertText() { - var quillEditor = new Quill('#editor'); + const quillEditor = new Quill('#editor'); quillEditor.insertText(0, "Hello World"); } function test_formatText() { - var quillEditor = new Quill('#editor'); + const quillEditor = new Quill('#editor'); quillEditor.formatText(0, 5, 'bold', true); } function test_formatText2() { - var quillEditor = new Quill('#editor'); - + const quillEditor = new Quill('#editor'); quillEditor.formatText(0, 5, { - 'bold': false, - 'color': 'rgb(0, 0, 255)' + bold: false, + color: 'rgb(0, 0, 255)' }); } function test_formatLine1() { - var quillEditor = new Quill('#editor'); + const quillEditor = new Quill('#editor'); quillEditor.formatLine(1, 3, 'api'); } function test_formatLine2() { - var quillEditor = new Quill('#editor'); + const quillEditor = new Quill('#editor'); quillEditor.formatLine(1, 3, 'align', 'right'); } function test_formatLine3() { - var quillEditor = new Quill('#editor'); + const quillEditor = new Quill('#editor'); quillEditor.formatLine(1, 3, { - 'align': 'right', - 'bold': false, + align: 'right', + bold: false, }); } function test_insertEmbed() { - var quillEditor = new Quill('#editor'); - + const quillEditor = new Quill('#editor'); quillEditor.insertEmbed(10, 'image', 'http://com/images/cloud.png'); } function test_updateContents() { - var quillEditor = new Quill('#editor'); + const quillEditor = new Quill('#editor'); quillEditor.updateContents(new Delta({ ops: [ { retain: 6 }, // Keep 'Hello ' @@ -109,8 +109,7 @@ function test_updateContents() { } function test_setContents() { - var quillEditor = new Quill('#editor'); - + const quillEditor = new Quill('#editor'); quillEditor.setContents(new Delta({ ops: [ { insert: 'Hello ' }, { insert: 'World!', attributes: { bold: true } }, @@ -119,20 +118,18 @@ function test_setContents() { } function test_setText() { - var quillEditor = new Quill('#editor'); + const quillEditor = new Quill('#editor'); quillEditor.setText('Hello\n'); } - function test_getSelection() { - var quillEditor = new Quill('#editor'); - - var range = quillEditor.getSelection(); + const quillEditor = new Quill('#editor'); + const range = quillEditor.getSelection(); if (range) { - if (range.index == range.length) { + if (range.index === range.length) { console.log('User cursor is at index', range.index); } else { - var text = quillEditor.getText(range.index, range.length); + const text = quillEditor.getText(range.index, range.length); console.log('User has highlighted: ', text); } } else { @@ -141,39 +138,36 @@ function test_getSelection() { } function test_setSelection() { - var quillEditor = new Quill('#editor'); + const quillEditor = new Quill('#editor'); quillEditor.setSelection(0, 5); } function test_focus() { - var quillEditor = new Quill('#editor'); + const quillEditor = new Quill('#editor'); quillEditor.focus(); } function test_getBounds() { - var quillEditor = new Quill('#editor'); + const quillEditor = new Quill('#editor'); quillEditor.setText('Hello\nWorld\n'); } -function test_getModule() -{ - var quillEditor = new Quill('#editor'); - - var toolbar = quillEditor.getModule('toolbar'); +function test_getModule() { + const quillEditor = new Quill('#editor'); + const toolbar = quillEditor.getModule('toolbar'); } -function test_addContainer() -{ - var quillEditor = new Quill('#editor'); +function test_addContainer() { + const quillEditor = new Quill('#editor'); quillEditor.addContainer('ql-custom'); } -function test_on_Events(){ - var textChangeHandler = function(newDelta: Quill.DeltaStatic, oldDelta: Quill.DeltaStatic, source: string) { }; - var selectionChangeHandler = function(newRange: Quill.RangeStatic, oldRange: Quill.RangeStatic, source: string) { }; - var editorChangeHandler = function(name: string, ...args: any[]) { }; +function test_on_Events() { + const textChangeHandler = (newDelta: DeltaStatic, oldDelta: DeltaStatic, source: string) => { }; + const selectionChangeHandler = (newRange: RangeStatic, oldRange: RangeStatic, source: string) => { }; + const editorChangeHandler = (name: string, ...args: any[]) => { }; - var quillEditor = new Quill('#editor'); + const quillEditor = new Quill('#editor'); quillEditor .on('text-change', textChangeHandler) .off('text-change', textChangeHandler) @@ -186,86 +180,72 @@ function test_on_Events(){ .once('editor-change', editorChangeHandler); } -function test_PasteHTML() -{ - var quillEditor = new Quill('#editor'); +function test_PasteHTML() { + const quillEditor = new Quill('#editor'); quillEditor.pasteHTML('

Quill Rocks

'); } -function test_PasteHTML2() -{ - var quillEditor = new Quill('#editor'); +function test_PasteHTML2() { + const quillEditor = new Quill('#editor'); quillEditor.pasteHTML(5, '

Quill Rocks

'); } function test_DeltaChaining() { - var delta = new Delta() + const delta = new Delta() .insert('Hello', { bold: true }) .insert('World') .delete(5) .retain(5) .retain(5, { color: '#0c6' }); - } function test_DeltaFilter() { - var delta = new Delta().insert('Hello', { bold: true }) + const delta = new Delta().insert('Hello', { bold: true }) .insert({ image: 'https://octodex.github.com/images/labtocat.png' }) .insert('World!'); - var text = delta.filter(function(op) { - return typeof op.insert === 'string'; - }).map(function(op) { - return op.insert; - }).join(''); + const text = delta + .filter((op: any) => typeof op.insert === 'string') + .map((op: any) => op.insert) + .join(''); } function test_DeltaForEach() { - var delta = new Delta(); - delta.forEach(function(op) { - console.log(op); - }); + const delta = new Delta(); + delta.forEach((op: any) => console.log(op)); } function test_DeltaMap() { - var delta = new Delta() + const delta = new Delta() .insert('Hello', { bold: true }) .insert({ image: 'https://octodex.github.com/images/labtocat.png' }) .insert('World!'); - var text = delta.map(function(op) { - if (typeof op.insert === 'string') { - return op.insert; - } else { - return ''; - } - }).join(''); + const text = delta + .map((op: any) => typeof op.insert === 'string' ? op.insert : '') + .join(''); } function test_DeltaPartition() { - var delta = new Delta().insert('Hello', { bold: true }) + const delta = new Delta().insert('Hello', { bold: true }) .insert({ image: 'https://octodex.github.com/images/labtocat.png' }) .insert('World!'); - var results = delta.partition(function(op) { - return typeof op.insert === 'string'; - }); - var passed = results[0]; // [{ insert: 'Hello', attributes: { bold: true }}, { insert: 'World'}] - var failed = results[1]; // [{ insert: { image: 'https://octodex.github.com/images/labtocat.png' }}] + const results = delta.partition((op: any) => typeof op.insert === 'string'); + const passed = results[0]; // [{ insert: 'Hello', attributes: { bold: true }}, { insert: 'World'}] + const failed = results[1]; // [{ insert: { image: 'https://octodex.github.com/images/labtocat.png' }}] } function test_DeltaReduce() { - var delta = new Delta().insert('Hello', { bold: true }) + const delta = new Delta().insert('Hello', { bold: true }) .insert({ image: 'https://octodex.github.com/images/labtocat.png' }) .insert('World!'); - var length = delta.reduce(function(length, op) { - return length + (op.insert.length || 1); - }, 0); + const length = delta.reduce((length: number, op: any) => length + (op.insert.length || 1), 0); } function test_DeltaSlice() { - var delta = new Delta().insert('Hello', { bold: true }).insert(' World'); + const delta = new Delta().insert('Hello', { bold: true }).insert(' World'); // { // ops: [ @@ -273,46 +253,43 @@ function test_DeltaSlice() { // { insert: ' World' } // ] // } - var copy = delta.slice(); + const copy = delta.slice(); console.log(copy.ops); // { ops: [{ insert: 'World' }] } - var world = delta.slice(6); + const world = delta.slice(6); console.log(world.ops); // { ops: [{ insert: ' ' }] } - var space = delta.slice(5, 6); + const space = delta.slice(5, 6); console.log(space.ops); } function test_DeltaCompose() { - var a = new Delta().insert('abc'); - var b = new Delta().retain(1).delete(1); + const a = new Delta().insert('abc'); + const b = new Delta().retain(1).delete(1); - var composed = a.compose(b); // composed == new Delta().insert('ac'); + const composed = a.compose(b); // composed == new Delta().insert('ac'); } function test_DeltaDiff() { - var a = new Delta().insert('Hello'); - var b = new Delta().insert('Hello!'); + const a = new Delta().insert('Hello'); + const b = new Delta().insert('Hello!'); - var diff = a.diff(b); // { ops: [{ retain: 5 }, { insert: '!' }] } + const diff = a.diff(b); // { ops: [{ retain: 5 }, { insert: '!' }] } // a.compose(diff) == b - var diff2 = a.diff(b, 0); // { ops: [{ retain: 5 }, { insert: '!' }] } + const diff2 = a.diff(b, 0); // { ops: [{ retain: 5 }, { insert: '!' }] } // a.compose(diff) == b } function test_DeltaEachLine() { - var delta = new Delta().insert('Hello\n\n') + const delta = new Delta().insert('Hello\n\n') .insert('World') .insert({ image: 'octocat.png' }) .insert('\n', { align: 'right' }) .insert('!'); - delta.eachLine(function(line, attributes, i) { - console.log(line, attributes, i); - // Can return false to exit loop early - }); + delta.eachLine((line: DeltaStatic, attributes: StringMap, i: number) => console.log(line, attributes, i)); // Should log: // { ops: [{ insert: 'Hello' }] }, {}, 0 // { ops: [] }, {}, 1 @@ -321,17 +298,16 @@ function test_DeltaEachLine() { } function test_DeltaTransform() { - var a = new Delta().insert('a'); - var b = new Delta().insert('b').retain(5).insert('c'); - - var d1: Quill.DeltaStatic = a.transform(b, true); // new Delta().retain(1).insert('b').retain(5).insert('c'); - var d2: Quill.DeltaStatic = a.transform(b, false); // new Delta().insert('b').retain(6).insert('c'); - var n1: number = a.transform(5); + const a = new Delta().insert('a'); + const b = new Delta().insert('b').retain(5).insert('c'); + const d1: DeltaStatic = a.transform(b, true); // new Delta().retain(1).insert('b').retain(5).insert('c'); + const d2: DeltaStatic = a.transform(b, false); // new Delta().insert('b').retain(6).insert('c'); + const n1: number = a.transform(5); } function test_DeltatransformPosition() { - var delta = new Delta().retain(5).insert('a'); - var n1: number = delta.transformPosition(4); // 4 - var n2: number = delta.transformPosition(5); // 6 + const delta = new Delta().retain(5).insert('a'); + const n1: number = delta.transformPosition(4); // 4 + const n2: number = delta.transformPosition(5); // 6 } diff --git a/types/quill/tsconfig.json b/types/quill/tsconfig.json index cfef2d65ab..c412153e0e 100644 --- a/types/quill/tsconfig.json +++ b/types/quill/tsconfig.json @@ -9,9 +9,7 @@ "noImplicitThis": true, "strictNullChecks": true, "baseUrl": "../", - "typeRoots": [ - "../" - ], + "typeRoots": ["../"], "types": [], "noEmit": true, "forceConsistentCasingInFileNames": true @@ -20,4 +18,4 @@ "index.d.ts", "quill-tests.ts" ] -} \ No newline at end of file +} diff --git a/types/quill/tslint.json b/types/quill/tslint.json new file mode 100644 index 0000000000..d88586e5bd --- /dev/null +++ b/types/quill/tslint.json @@ -0,0 +1,3 @@ +{ + "extends": "dtslint/dt.json" +}