Component: Editor - Upgrade Quill to 2.0

[luin]

Describe the bug

Hi 👋
I'm the maintainer of Quill and we are currently working actively for Quill 2.0. Given PrimeNG is still using Quill 1.3, I'm wondering if you'd like to take a PR of upgrading Quill to 2.0? If that's the case, I'd happy to create a PR.

Looking at the code, I think we can make the component support ^1.3 and ^2.0 at the same time so that PrimeNG can release it without a major version bump. There are some option changes introduced in 2.0 so we will also need to update the API documentation accordingly.

Environment

Quill 2.0

Reproducer

No response

Angular version

Not applied

PrimeNG version

17.5.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

Not applied

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[psarno]

Is there any timeframe for the update to Quill 2.0 for <p-editor>?

It would help clear up the console warnings. It's not causing any actual runtime issues at the moment, but it would be nice to get ahead of it.

[Violation] Listener added for a synchronous 'DOMNodeInserted' DOM Mutation Event. This event type is deprecated and work is underway to remove it from this browser. Usage of this event listener will cause performance issues today, and represents a risk of future incompatibility. Consider using MutationObserver instead.

[dgarciarubio]

Apparently they're deprecating mutation events this July.

Is Quill 2.0 in the roadmap? Or any workaround?

[ThoSap]

As you can see Quill is again under active development since September 2023.
The new v2.0 version, which will be released soon no longer has the mutation events which will be removed from Chrome/Chromium on July 2024 (Chromium 127).
slab/quill#3806 (comment)
https://github.com/quilljs/quill/releases

I do not think the community will switch to TinyMCE, because for open-source it is limited to 1,000 editor loads per month and the CKEditor has many features behind a paywall, for example paste from Microsoft Word, which works in Quill v2.0.

[pacozevallos]

Hello, I was testing quill@2.0.0-rc.5 with PrimeNg 17.13 in Angular 17, I am using a reactive form and it does not recognize the default value of a "formControlName". I tried downgrading the version to quill@1.3.7 and it works but I get the "DOMNodeInserted" warning

Any help is welcome.

[ThoSap]

In the transitioning phase until the PrimeNG Editor supports Quill v2.0.0 I'm using ngx-quill with the following styles.scss override, so the editor looks the same.

// Copied from PrimeNG _editor.scss and modified for ngx-quill
quill-editor {
  .ql-toolbar {
    background: $editorToolbarBg;
    border-top-right-radius: $borderRadius;
    border-top-left-radius: $borderRadius;

    &.ql-snow {
      border: $editorToolbarBorder;

      .ql-stroke {
        stroke: $editorToolbarIconColor;
      }

      .ql-fill {
        fill: $editorToolbarIconColor;
      }

      .ql-picker {
        // Custom Quill overrides start
        &:not(.ql-color-picker) {
          width: unset;
        }
        // Custom Quill overrides end

        .ql-picker-label {
          // Custom Quill overrides start
          display: flex;
          align-items: center;
          justify-content: space-between;
          // Custom Quill overrides end
          border: 0 none;
          color: $editorToolbarIconColor;

          // Custom Quill overrides start
          svg {
            position: relative;
            margin-top: unset;
            top: unset;
            right: unset;
          }
          // Custom Quill overrides end

          &:hover {
            color: $editorToolbarIconHoverColor;

            .ql-stroke {
              stroke: $editorToolbarIconHoverColor;
            }

            .ql-fill {
              fill: $editorToolbarIconHoverColor;
            }
          }
        }

        &.ql-expanded {
          .ql-picker-label {
            color: $editorToolbarIconHoverColor;

            .ql-stroke {
              stroke: $editorToolbarIconHoverColor;
            }

            .ql-fill {
              fill: $editorToolbarIconHoverColor;
            }
          }

          .ql-picker-options {
            background: $inputOverlayBg;
            border:$inputOverlayBorder;
            box-shadow:$inputOverlayShadow;
            border-radius: $borderRadius;
            padding: $inputListPadding;

            .ql-picker-item {
              color: $inputListItemTextColor;

              &:hover {
                color: $inputListItemTextHoverColor;
                background: $inputListItemHoverBg;
              }
            }
          }

          &:not(.ql-icon-picker) {
            .ql-picker-item {
              padding: $inputListItemPadding;
            }
          }
        }
      }
    }
  }

  .ql-container {
    border-bottom-right-radius: $borderRadius;
    border-bottom-left-radius: $borderRadius;

    &.ql-snow {
      border: $editorContentBorder;
    }

    .ql-editor {
      background: $inputBg;
      color: $inputTextColor;
      border-bottom-right-radius: $borderRadius;
      border-bottom-left-radius: $borderRadius;
    }
  }

  .ql-snow.ql-toolbar button:hover,
  .ql-snow.ql-toolbar button:focus {
    color: $editorToolbarIconHoverColor;

    .ql-stroke {
      stroke: $editorToolbarIconHoverColor;
    }

    .ql-fill {
      fill: $editorToolbarIconHoverColor;
    }
  }

  .ql-snow.ql-toolbar button.ql-active,
  .ql-snow.ql-toolbar .ql-picker-label.ql-active,
  .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
    color: $editorIconActiveColor;

    .ql-stroke {
      stroke: $editorIconActiveColor;
    }

    .ql-fill {
      fill: $editorIconActiveColor;
    }

    .ql-picker-label {
      color: $editorIconActiveColor;
    }
  }
}

// For ngx-quill component quill-view-html
quill-view-html {
  .ql-container {
    .ql-editor {
      color: $inputTextColor;
    }
  }
}

Provider for Angular Standalone:

provideQuillConfig({
      modules: {
        // This enables syntax highlighting using highlight.js which then also requires us to install this dependency
        syntax: false,
        toolbar: [
          [
            {'font': []},
            {'header': 1},
            {'header': 2},
            {'size': ['small', false, 'large', 'huge']},
            'clean',
          ],
          [
            'bold',
            'italic',
            'underline',
            'strike',
            'code',
            {'script': 'sub'},
            {'script': 'super'},
          ],
          [
            {'color': []},
            {'background': []},
          ],
          [
            'blockquote',
            {'align': []},
            {'list': 'ordered'},
            {'list': 'bullet'},
            {'indent': '-1'},
            {'indent': '+1'},
          ],
          [
            'link',
            'image',
            'code-block',
          ],
        ],
      },
    }),

[aheritier]

quill 2.0 is out and reported as a security issue (disputed but still concerning):
CVE-2021-3163 / GHSA-4943-9vgg-gr5r

@luin reported the upgrade almost 3 months ago and also proposed to help to build a PR.

If we had the fact that quill 1.3 won't work in Chrome this summer after deprecating mutation events this July could it be possible for the community to look at this issue and collaborate with @luin to build a fix ?

Thanks a lot

Note: All users upgrading Quill to v2 will have now their editors broken.

FYI @stephanj

[luin]

Looks like only the scrollingContainer option is affected: in v2, Quill auto detects the scrolling container, so the option would be ignored. We can add a notice in the documentation about the option is only needed for v1.

I am using a reactive form and it does not recognize the default value of a "formControlName"

Not familiar with Angular, looking at the code and don't see any usages that could break in v2. Not sure what caused it.

[aheritier]

I didn't dig a lot.
Doing only the upgrade makes the editor empty (no visible error in the console, neither in the build).
It's loaded but data are not injected.

[luin]

@aheritier Good catch! Actually 2.0 changed the signature of clipboard.convert() that it now accepts an object with two fields html/text. Also, for getting the html content, it's recommended to use getSemanticHTML() since innerHTML may contain elements that are only needed for editing (e.g. toolbars).

Here's the changes that make the demo work for me:

diff --git a/src/app/components/editor/editor.ts b/src/app/components/editor/editor.ts
index 9e578437f..ab7c767ad 100755
--- a/src/app/components/editor/editor.ts
+++ b/src/app/components/editor/editor.ts
@@ -223,7 +223,7 @@ export class Editor implements AfterContentInit, ControlValueAccessor {
         if (this.quill) {
             if (value) {
                 const command = (): void => {
-                    this.quill.setContents(this.quill.clipboard.convert(this.value));
+                    this.quill.setContents(this.quill.clipboard.convert({ html: this.value }));
                 };
 
                 if (this.isAttachedQuillEditorToDOM) {
@@ -296,12 +296,12 @@ export class Editor implements AfterContentInit, ControlValueAccessor {
         });
 
         if (this.value) {
-            this.quill.setContents(this.quill.clipboard.convert(this.value));
+            this.quill.setContents(this.quill.clipboard.convert({ html: this.value }));
         }
 
         this.quill.on('text-change', (delta: any, oldContents: any, source: any) => {
             if (source === 'user') {
-                let html = DomHandler.findSingle(editorElement, '.ql-editor').innerHTML;
+                let html = this.quill.getSemanticHTML();
                 let text = this.quill.getText().trim();
                 if (html === '<p><br></p>') {
                     html = null;

[ThoSap]

https://slab.com/blog/announcing-quill-2-0/
https://quilljs.com/docs/upgrading-to-2-0/
https://quilljs.com/