Quill: Delta not defined

[nitaskenderi]

I am using Quill.js for a rich-text message box which will use emoji, mentions and more for a better messaging experience. I need to set my own rules for pasting, so that only a few HTML elements are accepted into the message box, whereas others will be pasted as plain text only. At first I had some trouble even using addMatcher(), but while creating a MCV example with CodePen I found that the div.ql-clipboard must be visible for pasting to work (I was setting display: none; since I do not want it to be visible).

However, now that I have fixed this, I have two other problems. First of all, every time I try to create a new Delta(), an error occurs saying that Delta is not defined. But in the configuration documentation it does not state anywhere that Delta must be exclusively defined. As I could understand, the library itself must do this, but maybe I am wrong. Do I have to include a link to the Delta library too? Or define it somewhere in my code?

Furthermore, when pasting into the message box, it is pasting the text/HTML in the div.ql-clipboard but it should be pasting it in to the main div.ql-editor. I have a feeling that this is occurring only because of the undefined Delta error, but I am not sure.

All help is much appreciated, as I have been trying to figure this out for a few days now with no luck :(. Thanks in advance!

Steps for Reproduction

1. Visit my CodePen example
2. Try to paste in plain text, text wrapped in a bold tag (<b>) or a link with an anchor tag (<a>)
3. Open console or debug view to see the error

Expected behavior:
User should be able to paste text with a <b> tag and the editor should automatically make the text bold. User should also be able to past a link and the editor should make the link red. No changes are made to plain text when it is pasted.

Actual behavior:
An error occurs stating that Delta is not defined, and no pasting is taking place.

Platforms:
Chrome Version 59.0.3071.115 (Official Build) (64-bit)

Version:
1.2.6

[jhchen]

Delta is a dependency of Quill and included with the library. However if you have a build pipeline you probably still want to do the standard CommonJS import:

import Delta from 'quill-delta';

but if you are just in the browser environment Quill also supplies an import method:

var Delta = Quill.import('delta');

You are right the paste is not passing to the editor because of the thrown error.

[nitaskenderi]

Thank you very much @jhchen, this solved my problem :)

[javascriptlove]

Might be useful to put that info somewhere in docs, I've just been searching the whole internet just to find out that Delta constructor is in separate package..

[shyamal890]

This is no longer working now.