Ngx-quill: linebreaks dublicating

[m41n]

Hello, I noticed something odd when saving and reloading the content in the editor

I'm using ngx-quill 1.6.0 (since my poject is not running on the latest Angular version)

Whenever I save the content of the editor which includes a linebreak, upon reloading, the linebreak has been dublicated.
I researched a little and primeNg for example which also uses quill has the same error. On the quill discussions they suggest using a property "matchVisual" which has been added in quill 1.3.0 (link here), which I was not able to find on the ngx-quill editor options in the html.

What I currently have is basicly this:

<quill-editor [(ngModel)]="contentvariable" [style]="{'height':'200px'}">
     <div quill-editor-toolbar>
     <span class="ql-formats">
          <!-- custom set of predefined format options here -->
     </span>
     </div>
</quill-editor>

the contentvariable stays filled with the entered text on reloading the page.

Is there a way to access that matchVisual property or another way to prevent that dublication of linebreaks?

[KillerCodeMonkey]

please, check my readme.
https://github.com/KillerCodeMonkey/ngx-quill#config

ngx-quill accepts a modules input, where you can simply pass:

{
    clipboard: {
        matchVisual: false
    }
}

[m41n]

Ah, I didn't check the options for the modules input, will test it out that way.
Thanks for the quick answer!

quick edit: worked like a charm!

[KillerCodeMonkey]

no probs. :)

[trfletch]

Sorry to bring up an old thread but I have a similar issue and I cannot find "clipboard" as an option when setting the modules (I am using Ionic by the way), all I can find is "toolbar" and "syntax". The documentation you reference above also has no mention of "clipboard". Am I missing something?

This is the code I am currently using within my app.module.ts:

QuillModule.forRoot({
      modules: {        
        toolbar: [
          ['bold', 'italic'],
          [{ 'list': 'ordered'}, { 'list': 'bullet' }]
        ],    
      }
}),

[KillerCodeMonkey]

The config Interface of Provider Lacks some settings. IT IS quite new ;).
Feel free to add a pr for this Missing setting. But you can Just Set this
Module. IT should Work (defining your config object AS Any type) AS a
workaround.

Am Sa., 2. Feb. 2019, 23:25 hat trfletch [e-mail]
geschrieben:

Sorry to bring up an old thread but I have a similar issue and I cannot
find "clipboard" as an option when setting the modules (I am using Ionic by
the way), all I can find is "toolbar" and "syntax". The documentation you
reference above also has no mention of "clipboard". Am I missing something?

This is the code I am currently using within my app.module.ts:

QuillModule.forRoot({
modules: {
toolbar: [
['bold', 'italic'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }]
],
}
}),

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/119#issuecomment-460004497,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYJxuE4AQWOAFGc5bwkU7hgVDJYOEks5vJhBDgaJpZM4STNQh
.

[trfletch]

Thanks for the quick response, sorry I’m not sure what you mean by just setting this module? Do you mean just add it in my “forRoot” code, even though my Ionic App is showing an error when trying to do that because it doesn’t recognise it?

[KillerCodeMonkey]

to set the config like that forRoot was initially added only to set toolbar modules.
but i released 4.6.0 some minutes ago. There i added the support to add custom modules and all default Quill-Modules, including clipboard :). Check it out and try it

[trfletch]

Thanks, I have installed version 4.6.0 and it now recognises "clipboard" in my forRoot but it doesn't recognise matchVisual am I missing something or am I not using the correct syntax? The following is the code I am trying but the matchVisual: false part is underlined with the following error:
"Object literal may only specify known properties"

QuillModule.forRoot({
      modules: {        
        toolbar: [          
          ['bold', 'italic'],
          [{ 'list': 'ordered'}, { 'list': 'bullet' }]
        ],
        clipboard: {
          matchVisual: false
        }    
      },      
    })

[KillerCodeMonkey]

i added everything mentioned here:
https://quilljs.com/docs/modules/clipboard/#configuration

there is no option like matchVisual?

[KillerCodeMonkey]

i found it... ngx-quill uses latest stable quilljs Version, so this option is not available there.

I was added in 2.0.dev ;)

[trfletch]

Oh so it has been removed from the latest version, that is annoying, basically what is happening is when the editor is pulling through the content using "ngModel" it should be pulling through this:

<p>This is some text:</p>
<ul>
<li>List item 1.</li>
<li>List item 2.</li>
</ul>

But instead it is pulling through this:

<p>This is some text:</p>
<p>&nbsp;<br></p>
<ul>
<li>List item 1.</li>
<li>List item 2.</li>
</ul>

So it is adding an empty "p" tag above the list, this happens every time so if I was to edit the text and save it then the next time it pulled it through it would add another empty "p" tag so eventually there would be lots of empty space between the first paragraph and the list.

This issue looks like it is resolved by disabling the "matchVisual" option explained here: https://github.com/quilljs/quill/issues/807#issuecomment-315158226

However if that has been removed then I am a bit stuck, I have spent days trying to get the Quill editor integrated into an Ionic App and working well with iOS with regards to closing the keyboard and scrolling to the active text editor when clicked, this is the last issue I need to fix before it can be deployed :-(

[KillerCodeMonkey]

it is not removed. It was added in quilljs 2.0dev Version.

It is not existing in and was never there in quill 1.x ;)

[KillerCodeMonkey]

Ah nooo. you are right. it got removed in 2.0, but why is it already missing in the official quill docs?.. strange

[trfletch]

Yes that is strange, you can find the documentation here if that helps: https://web.archive.org/web/20170807100811/http://quilljs.com:80/docs/modules/clipboard/

[trfletch]

Just to confirm updating quill-editor.interfaces.d.ts as follows (adding matchVisual?: boolean) does allow the option to be added to "forRoot" and does resolve my problem :-)

export interface QuillModules {
    [key: string]: any;
    clipboard?: {
      mathers?: any[];
      matchVisual?: boolean;
    } | boolean;
    history?: {
        delay?: number;
        maxStack?: number;
        userOnly?: boolean;
    } | boolean;
    keyboard?: {
        bindings?: any;
    } | boolean;
    syntax?: boolean;
    toolbar: QuillToolbarConfig | string | {
        container?: string | QuillToolbarConfig;
        handlers?: {
            [key: string]: any;
        };
    };
}

[KillerCodeMonkey]

like i said. i know, but i does not know this config, because it is not documented in the official docs ;).

new version incoming.

[KillerCodeMonkey]

v4.6.2 released

[trfletch]

Excellent works great thanks!