Ngx-quill: Integrate with module: quill-mention

[bladerunner41]

I am trying to use the quill-mention module but not sure how to get it to integrate.

My template:

<quill-editor [modules]="modules"></quill-editor>

Attempt 1:

import Quill from 'quill';

import {Mention} from 'quill-mention';
Quill.register('modules/mention', Mention);

Console error - Can't find 'Mention'. I don't believe the quill-mention library exports correctly for this to work. And it already seems to register itself in the library code on the last line.

Attempt 2:
I loaded the dist .js and css files into the template html for quill-mention. And used this code, which console errors with quill Cannot import modules/mention. Are you sure it was registered?

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  modules = {}

  constructor() {
    const values = [
      { id: 1, value: 'Fredrik Sundqvist' },
      { id: 2, value: 'Patrik Sjölin' }
    ];

    this.modules = {
      // formula: true,
      // toolbar: [['formula'], ['image']], imageResize: {}
      mention: {
        allowedChars: /^[A-Za-z]*$/,
        source: function (searchTerm) {
          if (searchTerm.length === 0) {
            this.renderList(values, searchTerm);
          } else {
            const matches = [];
            for (i = 0; i < values.length; i++)
              if (~values[i].value.toLowerCase().indexOf(searchTerm)) matches.push(values[i]);
            this.renderList(matches, searchTerm);
          }
        }
      }
  }
}

How do I import such a module with ngx-quill? Any help much appreciated.

[KillerCodeMonkey]

simple: import 'quill-mention ;)

this is another non ngx-quill related question, about how to use or register a third party module.
Maybe this is the last time i will answer it, because in most cases it is a simple lack of knowledgement of angular, build processes and simply javascript.

Again importing a module, registering a module is done like it is done with plain QuillJS.
And has nothing to do with ngx-quill.

But I added quill-mention to my example repo. For a working example:
https://killercodemonkey.github.io/ngx-quill-example/

use the "Formula & image resize editor & Keybinding on 'b'" editor and type '@' in it.

[bladerunner41]

@KillerCodeMonkey sincerely appreciated. And for all your efforts.

Was conscious of this. But thought the mention module was different and maybe incompatible to the other examples provided, given the Quill.register was inside the module and I couldn't get it too fit the existing pattern in the examples of

import ImageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);

[MrCroft]

After copying/pasting the example code, I got: ERROR TypeError: this.renderList is not a function on this.renderList(...
I've looked in the component code, I can't find that method declared anywhere.
Not sure how the demo works without that 😄
I can't find that method anywhere 😞

@bladerunner41 @KillerCodeMonkey ? can someone point me to it? because I can't know what it's supposed to do...

[KillerCodeMonkey]

I think renderlist is a function in quill-mention

You See the handler is defined with "function ()" and with the fat arrow
Syntax "=>".
So the context of quill-mention is used ;).

Did You installed And registered quill-mention correctly?

Maybe quill-mention changed.

But it is Working im the Demo Page ;). Use the "formula & Image resize"
editor. Type in @ and it works.

Please Do Not copy and Paste something of You Do Not unterstand something..

Just Check Out the Repo Run npm install and try to unterstand what is going
on.

Read Documentation of quill How registering and using a custom Module works.

Am 02.10.2018 3:00 nachm. schrieb "Marian Stoica" <[email protected]

:

After copying/pasting the example code, I got: ERROR TypeError:
this.renderList is not a function on this.renderList(...
I've looked in the component code
https://github.com/KillerCodeMonkey/ngx-quill-example/blob/master/src/app.component.ts,
I can't find that method declared anywhere.
Not sure how the demo works without that 😄
I can't find that method anywhere 😞

@bladerunner41 https://github.com/bladerunner41 @KillerCodeMonkey
https://github.com/KillerCodeMonkey ? can someone point me to it? because
I can't know what it's supposed to do...

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/141#issuecomment-426264055,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYAuWt3VnWvH8nZKIVgRqWhHdZY6Gks5ug2NigaJpZM4Sxm0m
.

[MrCroft]

@KillerCodeMonkey thanks for the quick response

You See the handler is defined with "function ()" and with the fat arrow Syntax "=>".

Ah, of course... that's why TypeScript didn't complain to begin with. Ok, it should be the context of quill-mention. edit: I thought that maybe, somehow, the compiled code that runs was different from the one I was looking at, built from another branch or something. Don't know how github works with these demo pages.

But it is Working im the Demo Page

Yes, I didn't want to imply that it doesn't. It works. I just didn't understand how, being the same code? But didn't think about breaking changes in the plugin 😄

Please Do Not copy and Paste something of You Do Not unterstand something

I copied so I don't type it myself. I understand what's going on there regarding the search.

Maybe quill-mention changed.

Yes, this is it. I've found the breaking change: https://github.com/afconsult/quill-mention/issues/16#issuecomment-393986207
Not sure how to use the mention plugin now, I'll have to look into it... but there must be a way.

[KillerCodeMonkey]

When i Get it right You Get the renderlist function as an Argument of the
function where this.renderlist ist used.

Marian Stoica [e-mail] schrieb am Di., 2. Okt. 2018,
15:39:

@KillerCodeMonkey https://github.com/KillerCodeMonkey thanks for the
quick response

You See the handler is defined with "function ()" and with the fat arrow
Syntax "=>".

Ah, of course... that's why TypeScript didn't complain to begin with. Ok,
it should be the context of quill-mention. But somehow it isn't.

But it is Working im the Demo Page

Yes, I didn't want to imply that it doesn't. It works. I just didn't
understand how, being the same code? But didn't think about breaking
changes in the plugin 😄

Please Do Not copy and Paste something of You Do Not unterstand something

I copied so I don't type it myself. I understand what's going on there
regarding the search.

Maybe quill-mention changed.

Yes, this is it. I've found the breaking change: afconsult/quill-mention#16
(comment)
https://github.com/afconsult/quill-mention/issues/16#issuecomment-393986207
Not sure how to use the mention plugin now, I'll have to look into it...
but there must be a way.

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