Ngx-quill: New line added on edit mode

[junimohano]

I found a bug that new line is added between text and ul tags on edit mode.
I can reproduce it as below of examples

1. Type those text and list using
   

2. and then add 1 next to hello
   then as you can see, there is <p><br></p> added
   

3. after save those html value and reload editor, it will be like that as below
   

If you do same thing again (add 2 next to hello1), it will add one more new line <p><br></p>

Users try to change text several times without adding new lines, it will have blank lines which users don't want to have.

How do I resolve this or could you fix this issue if this is new issue?

[KillerCodeMonkey]

@junimohano could you check this with native quilljs editor?

https://github.com/quilljs/quill/issues/1702

If i am allowed to give you an advice.

Please do not use html strings in general, when storing it to the database.

And in my example repo
https://killercodemonkey.github.io/ngx-quill-example/

i am using divs instead of p-tags. and there seems no issue.
Maybe that could be a workaround for you :)

[junimohano]

I already checked your exaple app which has same issue as it doesn't matter Div or P tag.

import { Component } from '@angular/core';

@Component({
  selector: 'app-default',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  value = '<div>test</div><ul><li>1</li><li>2</li><li>3</li></ul>';
}

<quill-editor [(ngModel)]="value" [style]="{height: '200px'}"></quill-editor>
{{value}}

um, I am not sure how to fix by quilljs/quill#1702
If not use html string, is there any way to save css styling ?

[KillerCodeMonkey]

the linked quilljs issue is there because it is maybe related or the same issue.

You can switch from class based stylings to inline stylings, then the object or json representation should contain the styling as "attributes".

[junimohano]

I tested by https://quilljs.com/playground/ which is from quilljs

<div id="editor-container">
  <div>test</div><ul><li>1</li><li>2</li><li>3</li></ul>
</div>

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'  // or 'bubble'
});

quill.on('text-change', function(delta, oldDelta, source) {
  console.log(quill.root.innerHTML);
});

Quill js itself seems okay.

[KillerCodeMonkey]

when i am using my demo - the last editor:
https://killercodemonkey.github.io/ngx-quill-example/

1. clearing the content
2. writing text "hello"
3. press enter
4. insert a list
5. go up to "hello" and add "1" oder something else

everything looks good in chrome and firefox

[junimohano]

When you type from scratch works fine.

Try to give default value <div>test</div><ul><li>1</li><li>2</li><li>3</li></ul> on code level

and then try to insert 1 next to test by typing

It will have one more <div><br></div>

Tag doesn't matter either h1 or div or p

[junimohano]

Can you reproduce it?

[KillerCodeMonkey]

I am using the clipboard module of quilljs to convert the html-code to the proper quill blots.

quillEditor.clipboard.convert()

this returns the multiple new lines.

Calling "clipboard.convert" makes it save to use the values, because they are transformed to valid representation of the content. (quill does the same if you paste something in)

Checkout this old issue:
https://github.com/quilljs/quill/issues/672

Seems like convert only checks duplicated trailing new lines.
https://github.com/quilljs/quill/blob/develop/modules/clipboard.js#L80

Maybe there is another issue there that adds newline on wrong positions?

EDIT:
you can reproduce this with quilljs playground

This inserts another br for the existing one and so on

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'  // or 'bubble'
});

const delta = quill.clipboard.convert('<div>test</div><div><br></div><ul><li>1<li></ul>')
quill.setContents(delta)

[junimohano]

https://junimohano.github.io/reproduce-ngx-quill-bugs/
by the way, here is demo I made.

You can check on the bottom of the page.

Add 1 next to test

then you will get additional <div><br></div> between text and ul

Why not just using innerHTML instead of clipboard?

[KillerCodeMonkey]

Because it is not safe doing it this way. And i do not want to cause more issues because the
result looks not how you want to expect it ;). So i am doing it the "quill"-way.

ngx-quill is only a quilljs wrapper and should not change quills internal
functionality.

So If you are using quill, you would use quills API to manipulate the
content, too. So you would call "clipboard.dangerouslyPasteHtml", which also uses clipboard.convert - leading to the same issue.

So you can open an issue in the quilljs repo for that, because the
Clipboard.convert method adds duplicated new lines (add my playground example where native quill produces it).

And as a workaround set the Initial value like you want it, for example
directly add HTML. But then you have no warranties if this will work correct in any other cases or will be future proofed. So if you approach breaks something else, nobody will solve this for you ;).

The best would be, when you send quilljs a PR with a solution ;)

[junimohano]

ok, thanks, will try to do it

[KillerCodeMonkey]

@junimohano please link the quilljs issue or pr here so we have an association between them :)

[junimohano]

As I can see https://quilljs.com/docs/modules/clipboard/, there is a way to customize when we use convert()

I used onEditorCreated event and make it working

 onQuillEditorCreated(quill: any): void {
    quill.clipboard.addMatcher('p', (node, delta) => {
      const op = delta.ops[0];
      op.insert = op.insert.replace('\n\n', '\n');
      return delta;
    });
}

maybe you can mention it on readme in order to share if somebody needs it.

[KillerCodeMonkey]

I do Not want to, because this would Break the default behaviour when
someone wants multiple New lines. This would replace them.

And the replacement can not bei fixed Set to p-tags because you can Switch
them to divs or Other Blockelements

I would prefer If the quilljs Team would Check the Convert function if
There IS a Bug.

Btw you could do IT on your own. Remove newlines in Front of list (If this
IS the own Case IT Happens to you) when passing the Data to ngx-quill and
do the Same when storing the values to the Database.

But then keep in mind, If someone wants multiple New lines IT would Strip
them.

Jun An [e-mail] schrieb am Mi., 20. März 2019, 16:35:

As I can see https://quilljs.com/docs/modules/clipboard/, there is a way
to customize when we use convert()

and I tried to put your component and works fine.

Input()
valueSetter = (quillEditor: any, value: any): any => {
if (this.format === 'html') {
if (this.sanitize) {
value = this.domSanitizer.sanitize(SecurityContext.HTML, value)
}
// *********************
// here
quillEditor.clipboard.addMatcher('p', function (node, delta) {
delta.ops[0].insert = delta.ops[0].insert.replace('\n\n', '\n');
return delta;
});
// *********************

  return quillEditor.clipboard.convert(value);
} else if (this.format === 'json') {
  try {
    return JSON.parse(value)
  } catch (e) {
    return [{ insert: value }]
  }
}

return value

}

Can you add those function as optional so that I can use it?

—
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/357#issuecomment-474888393,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYCGhMGnF1h22oB_KcFQl3htXy-5Eks5vYlUpgaJpZM4b8ANQ
.

[junimohano]

Why optional options breaks default behavior?

anyway, never mind ~ thanks

[KillerCodeMonkey]

Because at some Point my wrapper quickfix many possible quilljs bugs,
because people want the Editor handle Other things with optional props. And
thats Not how Software development works.

I Like to fix the root Problem. :)

But i think my described workaround should Work?

Jun An [e-mail] schrieb am Mi., 20. März 2019, 19:43:

Why optional options breaks default behavior?

anyway, never mind ~ thanks

—
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/357#issuecomment-474978419,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACKOYPyyaOESCmYXWjdf0EBNCsknT7jSks5vYoFugaJpZM4b8ANQ
.

[umutkorkut]

For people having this issue in the future:
Add this line to quill-editor
[modules]="{ clipboard: {matchVisual: false} }"

[KillerCodeMonkey]

@umutkorkut but keep in mind, that it will be removed in 2.0.0

https://github.com/quilljs/quill/blob/ee827ffb605ba491246f201d497ce0e7d9e193a0/docs/guides/upgrading-to-2-0.md#configuration

[sergiocabral]

I have the same problem.
I solve with this trick:

The problm is when de component internally convert html to text, any paragraph is converted to text with new line at end. So, the component convert internally text to html again, then any text is put into paragraph

, but when found a new line it converted to other paragraph

generaing new lines foreever.

[sirajalam049]

@sergiocabral . That worked like a charm. arigato gozaimasu