Ngx-quill: Can we please get an access to the Quill instance used by the component?

[damien-CFS]

Hi,
In order to register new blots or other extensions to the quill editor like this:
Quill.register({ 'blots/boltTwo':EmojiBlotTwo});
we need access to the Quill instance used by the editor. The instance is declared in vendor.bundle.js once webpack has done his job and it is hard to access it there.
Can we have a new method on the editor that would look something like this:
QuillEditorComponent.prototype.getQuillInstance = function () {
return Quill;
}
and the related declaration in quill-editor-component.d.ts?
I will try and do a pull request ...
Thank you,
Damien

[KillerCodeMonkey]

You do not need the instance for registering New modules. This is done by
the global quill object.

You can Grab the quill instance after its creation. Simply listen to
oneditorcreated output and Grab the instance :). Checkout the readme

On Wed, 14 Mar 2018, 13:33 damien-CFS, [e-mail] wrote:

Hi,
In order to register new blots or other extensions to the quill editor
like this:
Quill.register({ 'blots/boltTwo':EmojiBlotTwo});
we need access to the Quill instance used by the editor. The instance is
declared in vendor.bundle.js once webpack has done his job and it is hard
to access it there.
Can we have a new method on the editor that would look something like this:
QuillEditorComponent.prototype.getQuillInstance = function () {
return Quill;
}
and the related declaration in quill-editor-component.d.ts?
I will try and do a pull request ...
Thank you,
Damien

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/136, or mute the
thread
https://github.com/notifications/unsubscribe-auth/ACKOYJPxToYoFjUulpxAIt5I0Q5DLLOUks5teQ4agaJpZM4SqWJw
.

[damien-CFS]

Thanks for your super-fast reply!
The problem is that what we receive in that event is the instance of the editor and not the global quill instance. What we receive does not have the "register" method that allows this call:

addBindingCreated(quill) {
    quill.register({ 'blots/boltTwo':EmojiBlotTwo});
}

Thanks

[KillerCodeMonkey]

Yeah, but you can import it? Like I do in my quill-editor-component??? Oo

QuillJS is installed by nix-quill, so you can import it, like any other 3rd party lib

[damien-CFS]

Yes but if I import it like this:

• Add it to .angular-cli.json:
  "scripts": [
  "../node_modules/quill/dist/quill.js"
  ],
• Refer to it in my .ts:
  declare var Quill: any;;
  Quill.register({ 'blots/boltTwo':EmojiBlotTwo});

The code works but it uses a different instance of Quill (and the "types" array) because webpack has packed quill.js twice (one for the one in ngx-quill, one for the one requested in .angular-cli.json) and therefore the declaration is not done on the instance used by the component. I do not see a way to access the instance used by the ngx-quill-component from my component other than through the getter I was asking for.
Thanks for your help.

[KillerCodeMonkey]

And if you do not add quilljs to your scripts?

[damien-CFS]

Then Quill is undefined wether I do this:
declare var Quill: any;;
or this:
import Quill from 'quill';

[KillerCodeMonkey]

Maybe the correct solution would be, to set quilljs AS peer dependency for
ngx-quill. So you will have only one quilljs instance

On Wed, 14 Mar 2018, 14:07 damien-CFS, [e-mail] wrote:

Then Quill is undefined wether I do this:
declare var Quill: any;;
or this:
import Quill from 'quill';

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/136#issuecomment-373014061,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYK8vR3Y1f85zRrb_C9gwgRGDretcks5teRYBgaJpZM4SqWJw
.

[damien-CFS]

Yes that sounds like a good solution. Does that need an evolution in ngx-quill or is there a way I can do that on my side?

[KillerCodeMonkey]

You can do nothing :)

On Wed, 14 Mar 2018, 14:21 damien-CFS, [e-mail] wrote:

Yes that sounds like a good solution. Does that need an evolution in
ngx-quill or is there a way I can do that on my side?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/136#issuecomment-373018342,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYCm_I_kgbh1CBSijbdclEQMW2Oc6ks5teRlUgaJpZM4SqWJw
.

[damien-CFS]

Ok I'll be waiting to hear from you then :) Thanks for your help

[KillerCodeMonkey]

i have a local project with angular-cli and it is working without any error?
Please try the following: remove quill from your angular-cli.json and import it in this way:

import * as Quill from 'quill';
console.log(Quill);

now you should see the Quill-Object in your JS-Console and work with it :)

[damien-CFS]

Yes I think we are getting close to the solution. When I do what you describe it works as you expect.
But there is still a problem which is that typescript is not able to use the variable properly, I get this error:
src/app/login/test.component.ts(84,7): error TS2339: Property 'register' does not exist on type 'typeof ".../portal/node_modules/@types/quill/index"'.
on the line:
Quill.register({ 'blots/boltTwo':EmojiBlotTwo});
I use "angular/core": "^5.2.0"
I can work around it with this line:
(Quill as any).register({ 'blots/boltTwo':EmojiBlotTwo});
And it works and that's great thank you! But is there a cleaner way to do this to avoid the "as any"?

[KillerCodeMonkey]

nope or i need to remove the typings from this repo.

check my quill-editor-component.
I do the same :)