quill.d.ts - typescript definition file

[benbro]

[Describe the issue]
quill.d.ts typescript definition file is needed to import quill in typescript projects like angular2
https://typescript.codeplex.com/wikipage?title=Writing%20Definition%20%28.d.ts%29%20Files

example in other project:
https://github.com/moment/moment/blob/develop/moment.d.ts

Version: [version]
1.0-beta-6

[jhchen]

Quill is in the DefinitelyTyped project. It does not look like there are definitions for 1.0 but not sure what the protocol is for different or beta versions.

[punya]

Would you be willing to include a .d.ts file as part of the QuillJS package (and a corresponding entry in package.json)? That would make it easier for people to consume the typings and for them to stay up to date as the code changes.

[benbro]

Quill in DefinitelyTyped was updated to 1.0.

With TypeScript 2.0 you can add "@types/quill" to package.json:

"dependencies": {
    "quill": "^1.0.4",
    "@types/quill": "*"
}

Not sure if it's possible to specify a version.

Use it:

import * as Quill from 'Quill';

let quill = new Quill('#editor');

I asked if it's possible to improve the import syntax:
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/7767#issuecomment-249351597

[sumitkm]

Looking into this. I'll see how I can improve the namespaces and keep the DT team happy. They've gotten a lot pickier about global objects and insist on things being in their own namespace (hence the QuillJS wrapper).

[punya]

You can certainly add @types/quill as a dependency, but it's better for
maintainers _and_ consumers if you ship the .d.ts file as part of the
package. (Obviously, it's your decision in the end.)

[benbro]

@punya Just wanted to give the example here for everyone reading this issue.

@sumitkm thank you for you work on the typings.

[hmtai6]

I try to use Quill with angular 2(angular-cli), but I got error when ng serve

Error message: Cannot find module 'Quill'.

In component,
I use
import * as Quill from 'Quill';

, then i got build error

I have already added

"@types/quill": "0.0.26",
"quill": "^1.0.4",
to package.json as dependencies

Anyone can share your experience of adding Quill to your project?

---

I found a solution
use
///
instead of import * as Quill from 'Quill';
I don't know why it works.

[sumitkm]

Hi @hmtai6 I am not quite sure why you need /// <...> style import. I am assuming you are using it in a Node app? Here is an example of using it in Electron JS app

That's a KO Component though and uses RequireJS' AMD loader.

I am a little rusty with Angular, but does it expect a certain type of module AMD/UMD/CommonJS ?

[artaommahe]

@jhchen typings provided by lib maintainers will be up to date with lib code and it would be easy to use. Current definitions is outdated and wrong and imho it's harder for community to maintain separate up-to-date definitions source than to have definitions as lib part (same for Parchment that already wrote on TypeScript)

[johnbendi]

How does one use the Delta var from the quill module?

[sumitkm]

@johnbendi Could you expand on how you are planning to use it. If you are using type-definitions from DefinitelyTyped, you will get an object with the shape defined in DeltaStatic interface. If you want to create a new object, you can try something like below:

function test_updateContents() {
    var quillEditor = new Quill('#editor');
    quillEditor.updateContents(new Delta({
        ops: [
            { retain: 6 },        // Keep 'Hello '
            { delete: 5 },        // 'World' is deleted
            { insert: 'Quill' },  // Insert 'Quill'
            { retain: 1, attributes: { bold: true } }    // Apply bold to exclamation mark
        ]
    }));
}

[benbro]

@sumitkm Is this the correct way to use your Quill definitions in a TypeScript 2 project with webpack (Angular 2)?

package.json:

"dependencies": {
   "quill": "^1.2.2",
   "@types/quill": "^0.0.29"
}

vendor.ts:

import '../node_modules/quill/dist/quill.snow.css';

editor.component.ts:

import { Component, ViewChild, ElementRef } from '@angular/core';
import * as Quill from 'quill';

@Component({
    selector: 'u-editor',
    templateUrl: './editor.component.html',
    styleUrls: ['./editor.component.css'],
})
export class EditorComponent {
    @ViewChild('container') containerEl: ElementRef;

    private editor: Quill.Quill;

    ngAfterViewInit() {
        this.editor = new Quill(this.containerEl.nativeElement, {
            modules: {
                toolbar: [
                    [{ header: [1, 2, false] }],
                    ['bold', 'italic', 'underline'],
                    ['image', 'code-block']
                ]
            },
            placeholder: 'Compose an epic...',
            theme: 'snow'
        });
    }
}

Why do I need to do "import * as Quill from 'quill'" instead of "import {Quill} from 'quill'?"
Why do I need to define the type as Quill.Quill instead of just Quill?

[JordyVlassembrouck]

Bump.

@benbro, yes, that seems the correct way to use the Quill constructor, however, something seems wrong with the definition file.

I have the same issue as @johnbendi and @benbro.
I'm using "quill": "^1.2.2" as dependency and "@types/quill": "^0.0.29" as devDependency.

Whenever I try to use the Delta constructor, I get an error message in the browser which says: '__WEBPACK_IMPORTED_MODULE_3_quill__.Delta is not a constructor'

Any help would be highly appreciated!

[mdpye]

After much prodding:

import * as Delta from 'quill-delta';

let d = new Delta({ insert: 'text' });

[sumitkm]

@benbro My understanding at the time of writing the definition was QuillJS is the over-arching namespace containing definitions for Quill, Delta, Range, Clipboard etc.
Later QuillJS was changed to Quill to align it with expectations of build tools making the namespace same as the editor class. Typescript team strongly suggests use of a namespace for a library rather than sticking everything globally.

You cannot use import { Quill } from "quill" because quill.d.ts its a type definition for a library (and not the library itself). Refer to the "Consuming Dependencies" section here http://www.typescriptlang.org/docs/handbook/declaration-files/library-structures.html

You have to use Quill.Quill only when you specifying type in TypeScript. These are then dropped by the TypeScript compiler when compiled to native.

When instantiating Delta we have to remember to import the actual definition from the node module as @mdpye has shown above, again because actual definition of Delta is in the Quill library not in the quill.d.ts. Basically quill.d.ts definitions are just that, definitions. You still need to use the correct Node module imports as shown by @mdpye above. Hopefully @JordyVlassembrouck's error gets resolved with the import statement as well.

That's partly why they are defined as DeltaStatic in the quill.d.ts type definition. DeltaStatic simply defines the interfaces (or shape) for TypeScript compiler to type check against. You cannot instantiate a class from a typescript definition.

Finally, as to the weird versioning, I'll follow up with the DefinitelyTyped team. They seem to have taken over the typings with the launch of Types 2 (and move to npm package manager). Last I checked the definitions were up to date.

[hertg]

Are there any news to this?

@JordyVlassembrouck
I am getting the same error like you, did you manage to solve it somehow?

package.json:
```package.json
"devDependencies": {
"@types/quill": "*"
}

"dependencies": {
"quill": "^1.3.1"
}

**Typescript:**
```typescript
import * as Quill from "quill";

let editor = new Quill.Quill('.quill');

Console Output:

Uncaught TypeError: Quill.Quill is not a constructor

[benbro]

@michaelhertig try this:

import * as Quill from 'quill';
let editor: Quill.Quill;
editor = new Quill('.quill');

[JordyVlassembrouck]

@michaelhertig , the problem does not seem to be solved. I think it has something to do with the type definition or the way the classes are exported.

Anyway, we solved it the following way:

import * as Delta from 'quill-delta/lib/delta';

const delta = new Delta(jsonObject);

Directly importing Delta seems to work.

[benbro]

@JordyVlassembrouck I think @michaelhertig asked about Quill and not about Delta.

To use Delta try this:

import * as Quill from 'quill';
let Delta: Quill.DeltaStatic = Quill.import('delta');
let delta = new Delta(jsonObject);

[benbro]

@michaelhertig
This https://github.com/DefinitelyTyped/DefinitelyTyped/pull/18947 seems to simplify the import.

[hertg]

@benbro @JordyVlassembrouck
Thanks for your answers.
Yes, i am trying to implement Quill not Delta.

However, neither of your suggestions worked for me. Even with the newest typings you mentioned.
I will post it here, if i find a solution to my problem.

[benbro]

@michaelhertig
Just tested with @types/quill version 1.3.2 which is the recent version and this works:

import Quill from 'quill';
let editor: Quill;
editor = new Quill('.quill');

Try to remove node_modules, delete npm or yarn lock file and install again to ensure you have the latest version.

[benbro]

@sumitkm is it possible to have separate @types/quill-delta that will allow us to do:

import Delta from 'quill-delta';

Will @types/quill be able to use @types/quill-delta instead of duplicate the types?

[hertg]

@benbro
Yes, i got it working too. I implemented it like that:

import * as Quill from "quill";

let quill : any = Quill; //this one is important, otherwise 'Quill' is undefined
let editor = new quill('.quill');

Thanks so much for your help.

[maximkornilov]

@michaelhertig
I encountered the same problem as you. I would like to use only quill delta.
I ended with creating the temporary repository with type definitions for quill-delta only.
This package can be installed directly from GitHub.

It allows to reference to quill delta the following way:

import {default as Delta, DeltaStatic} from "quill-delta"

const delta: DeltaStatic = new Delta();

Installation instructions can be found here

[KillerCodeMonkey]

@michaelhertig but with your solution you loose all the benefits of using the quill typings...

i do not know how the testcases in definitelytyped are executed, because they are running and working, but i can not get it working with real quilljs.

[mrowles]

Did anyone resolve this? 7-ish months later and I'm still experiencing the same issues (as in, no perfect use case):

"devDependencies": {
   "@types/quill": "^1.3.6"
},
"dependencies": {
   "quill": "^1.3.6"
}

[lucasriondel]

same problem here, but i wasn't able to make it work with any of your solutions guys. really annoying.

[hchings]

@mrowles @lucasriondel

In my case (Angular 5), with the following versions:

"dependencies": {
    "@types/quill": "^1.3.6",
    "quill": "^1.3.6",
  }

To make the typing work, I have to:

1. import Quill globally in angular-cli.json

"scripts": [
        "../node_modules/quill/dist/quill.js"
]

or import it locally in Typescript component by (as answered by others above):

import Quill from 'quill';

1. Add this line to tyings.d.ts or wherever you declare the typings because it seems to be missing from the type file (index.d.ts) provided by DefinitedlyType:

declare var Quill: any; 

After these two steps, I finally can use Quill without errors in my Typescript.
I hope this helps.

[mrowles]

@hchings Cheers! However, it seems like adding the declare var Quill: any; overrides the import Quill from 'quill'; so this might be redundant. Still don't think this solves the foundations of the problem unfortunately :(

[mrowles]

The code in the issue raised worked for me: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18946

[n1ghtmare]

@mdpye Dude you saved me! Cheers!

[giniedp]

Quill needs to add the following line

  "module": "quill.js"

into its package.json. This will solve the issue for all folks that are using a bundler like rollup or webpack.

[benwinding]

@hertg 's solution worked for me (using angular 8),

Use

import * as quill from 'quill';
const Quill = quill as any;
// Use quill as normal...
Quill.register(.........);