-
Notifications
You must be signed in to change notification settings - Fork 4.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Component: Editor - Upgrade Quill to 2.0 #14721
Comments
Is there any timeframe for the update to Quill 2.0 for 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.
|
Apparently they're deprecating mutation events this July. Is Quill 2.0 in the roadmap? Or any workaround? |
As you can see Quill is again under active development since September 2023. 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. |
Hello, I was testing [email protected] 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 [email protected] and it works but I get the "DOMNodeInserted" warning Any help is welcome. |
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',
],
],
},
}), |
quill 2.0 is out and reported as a security issue (disputed but still concerning): @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 |
Looks like only the
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 Good catch! Actually 2.0 changed the signature of 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; |
Note that we could make the change backward compatible by checking |
We're part of Visma and our source code is automatically scanned by Aikido... Aikido reports quill as a security risk and advises to upgrade 1.3.7 => 2.0.0... So now we either face security-point penalties or switching to a different editor... |
Any idea when (or if) the upgrade to quill 2.0 is planned? |
I previously used the following workaround with PrimeNG <p-editor (onTextChange)="textChange()" [(ngModel)]="content" [style]="{height: '400px'}"/> content?: {
html: string | undefined,
text: string | undefined,
};
// In any method or service
this.content = { html: c.content, text: undefined });
// When editing/"saving"
// You do not necessarily need this callback in the `<p-editor/>`, the content variable will always have the last value due to the Angular model/two-way binding
textChange(): void {
if (!this.content) {
// Your logic here
}
// Workaround for Quill v2.0.X until PrimeNG supports it officially
const htmlContent = this.content as unknown as string;
} |
Using quill version 2.0+ with reactive forms introduces the bug that the value is not displayed correctly.
|
Looks like you didn't load the css files correctly. See the bottom of this page: https://www.primefaces.org/primeng-v14-lts/editor |
They are there, the editor doesn't work ONLY IF it is inside the dialog. |
i'm working on an angular library dependent on primeng ^17.x.x unfortunately blocked due to
as per
the error the error artifact (partial scripts.js minification) is generated whether or not primeng::EditorModule is imported package.json at quill 2.0.1
looking forward to the successful pr validation |
@luin I have a question.
which seems to be solution for my problem , but the test fails
error: |
Hi @luin, Thanks for the support! We've added it into 18.0.0-rc.1 |
@cetincakiroglu can you please include the pull request #15764 already with the PrimeNG 17.18.2 release? I don't think anything speaks against it as this PR both supports Quill 1.X.X and 2.X.X, then we could use Angular 17 + PrimeNG 17.18.2 and Quill after the 25th of July 2024. And this should probably also be backported to older PrimeNG LTS versions. |
I'm a newbie in Angular, it works for me. Thanks very much! |
Fixed Issue #14721 (Add support for Quill 2.0)
I am facing the same issue for child routing standalone components. |
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
The text was updated successfully, but these errors were encountered: