Latest Quill Release using deprecated DOMNodeInserted mutation event

Question

Latest Quill Release using deprecated DOMNodeInserted mutation event

highvoltz opened this issue a year ago · 39 comments

The latest quill release is using deprecated mutation event DOMNodeInserted that will be removed/disabled from Chrome around July 2024. See https://chromestatus.com/feature/5083947249172480

Platforms:

Chrome browser

Version:

1.3.7

Answer 1 · 2023-06-20T14:21:19.000Z

We are working on the 2.0 release which has already removed the use of mutation events.

Answer 2 · 2023-09-21T15:02:56.000Z

We are working on the 2.0 release which has already removed the use of mutation events.

Hi @luin is there any update on this? Any tendative date for the new release with this issue fixed?.

Thank you so much in advance.

Answer 3 · 2023-09-27T13:44:19.000Z

Good luck with the revamp!

Answer 4 · 2023-10-09T18:50:28.000Z

@kathirr007 See https://github.com/quilljs/quill/milestone/2

Answer 5 · 2023-11-22T10:27:46.000Z

I'm facing this error. can anyone help me with fixing this?
[Deprecation] Listener added for a synchronous 'DOMNodeInserted' DOM Mutation Event. This event type is deprecated (https://w3c.github.io/uievents/#legacy-event-types) 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.

Answer 6 · 2023-12-13T10:45:48.000Z

Me also facing the same error now with "react-quill": "^2.0.0":
[Deprecation] Listener added for a synchronous 'DOMNodeInserted' DOM Mutation Event. This event type is deprecated (https://w3c.github.io/uievents/#legacy-event-types) 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.
Any update on this?

Answer 7 · 2023-12-19T03:05:27.000Z

I am also facing this issue, any updates. Many thanks team for your hard work

Answer 8 · 2023-12-20T22:45:56.000Z

@luin Do you know if the changes implemented for this issue in Version 2 will be breaking changes? I ask because we use a library that uses Quill (Vue2-editor) and they haven't responded to my question about their upgrade plan/timeline.

Answer 9 · 2023-12-23T12:48:23.000Z

@erinknowles0501 It's an internal change so I don't expect any breaking changes introduced by it. Having said that, v2 does include some other breaking changes.

Answer 10 · 2023-12-29T21:50:31.000Z

@luin do you have any updates on this?

We are working on the 2.0 release which has already removed the use of mutation events.

Answer 11 · 2023-12-30T03:29:45.000Z

@EdManukyan We've already released 2.0.0-beta.0 and it's feature-complete. We are looking for feedbacks from the community before a stable release.

Answer 12 · 2024-01-02T19:10:02.000Z

@luin thanks for the quick response, any date prediction on stable release ?

Answer 13 · 2024-01-02T20:11:24.000Z

@erinknowles0501 It's an internal change so I don't expect any breaking changes introduced by it. Having said that, v2 does include some other breaking changes.

@luin Thanks for your reply, I have another question - when DOMNodeInserted is removed from browsers, will Version 1 still work to some extent?

Answer 14 · 2024-01-05T03:04:09.000Z

@luin The only 2.0.0-beta.0 I found was for React. I installed the latest version for vanilla js from here.

I still get the DOMNodeInserted mutation warning. Is there a version out for vanilla js that doesn't have this issue? Thanks

Answer 15 · 2024-01-05T04:00:32.000Z

@mjwweb The package link that you provided is not the official package. You can install the beta version with `npm install quill@beta".

Answer 16 · 2024-01-05T06:59:17.000Z

Any update because I am still getting the warning also. or do you suggest we go with the beta version for now? I see you mentioned something about the beta version.

Answer 17 · 2024-01-11T02:01:30.000Z

@luin Thanks for your reply, I have another question - when DOMNodeInserted is removed from browsers, will Version 1 still work to some extent?

Hi, I'd love to know the answer to this question also! FYI, you can test in Chrome by going to chrome://flags/#mutation-events and selecting "Disabled". Then restart the browser. That will make all Mutation Events (including DOMNodeInserted) not do anything, as they will in July by default. Would someone be able to verify that this still works with a pre-2.0 QuillJS? In my own testing, v1.0 seems to work fine for normal operations, even without Mutation Events functioning. But it's definitely possible I missed something.

Side note, please see https://developer.chrome.com/blog/mutation-events-deprecation for more details about this removal. In my analysis, it turns out QuillJS is the top cause of usage of Mutation Events across the web. It'd be great to know whether their removal will be a breaking change or not. I really appreciate that they've been removed from v2.0. Good luck with that launch.

Answer 18 · 2024-01-12T17:58:59.000Z

@luin anything about the comment above ?

Answer 19 · 2024-01-17T07:36:54.000Z

[Deprecation] Listener added for a synchronous 'DOMNodeInserted' DOM Mutation Event. This event type is deprecated (https://w3c.github.io/uievents/#legacy-event-types) 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.

I'm facing this error while working in Quill. Please help me with this guys

Answer 20 · 2024-02-07T13:35:19.000Z

Google's current plan is to remove mutation events in Chrome 127 which will be stable on July 30, 2024. Does this mean that will no longer work?
https://developer.chrome.com/blog/mutation-events-deprecation

Answer 21 · 2024-02-08T02:04:29.000Z

Hi all 👋

We just released Quill 2.0.0-rc.0 (npm install quill@2.0.0-rc.0), which has already been modernized and doesn't use the deprecated APIs anymore. It's recommended to upgrade from 1.x.x to that version. You can find the documentation and migration guide on https://v2.quilljs.com/ and please also feel free to let me know if you encounter any issues.

We plan to release 2.0.0 on March 1st if anyone prefers to a stable version.

Answer 22 · 2024-02-08T02:37:57.000Z

What a great news! Congratulations for the hard work guys 🚀👏

…

On Wed, Feb 7, 2024, 23:04 Zihua Li ***@***.***> wrote: Hi all 👋 We just released Quill 2.0.0-rc.0, which has already been modernized and doesn't use the deprecated APIs anymore. It's recommended to upgrade from 1.x.x to that version. You can find the documentation and migration guide on https://v2.quilljs.com/ and please also feel free to let me know if you encounter any issues. We plan to release 2.0.0 on March 1st if anyone prefers to a stable version. — Reply to this email directly, view it on GitHub <#3806 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADG2V7D7EC4G6BC2UYYDPNTYSQXD3AVCNFSM6AAAAAAZL5OY3WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZTGI2TANJSGQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

Answer 23 · 2024-03-18T10:46:03.000Z

Hello, I'm using version 2.0 of react quill, but the warning message keeps appearing.

Answer 24 · 2024-03-18T11:15:03.000Z

@brunowbbs react-quill 2.0 uses quill 1.3. You can actually use Quill in your React project directly without react-quill: https://quilljs.com/playground/react

Answer 25 · 2024-03-21T14:43:02.000Z

I'm using react-quill V2 and i got warning from chrome . can anyone help me how to solve this.

[Deprecation] Listener added for a synchronous 'DOMNodeInserted' DOM Mutation Event. This event type is deprecated (https://w3c.github.io/uievents/#legacy-event-types) 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.

Answer 26 · 2024-03-21T14:46:40.000Z

@Sivakumar0703 We'd love to offer helps for the react-quill project to upgrade to Quill v2 but haven't seen any signals the project would accept PRs for that. Before react-quill gets upgraded, you can refer to https://quilljs.com/playground/react to see how you can use Quill in a React project without any third-party libraries.

Answer 27 · 2024-03-21T20:22:20.000Z

@luin the playground example is helpful, but it would be really nice to have examples in typescript as well.
Also, Quill v2 is written in typescript, but you are not exposing some of the types, such as Options and ExpandedOptions. This makes it difficult to create a wrapper component around Quill with proper type checking.

Answer 28 · 2024-03-21T21:14:23.000Z

@Sivakumar0703 I am also using Quill in React and I just switched from using react-quill to just Quill. The example in the playground is useful but might be hard to read with all the extra features displayed.

Here is a very simplified version of how I implemented it. We must now use useRef to manually create a reference to a DOM element and then manage the lifecycle by initialising Quill in a useEffect hook.

Rendering Quill editor from the parent component:
<QuillEditor passText={setText} placeholder={placeholder} />

In my quill component:

import React, { useEffect, useRef } from 'react';
import Quill from 'quill';

const QuillEditor = ({ passText, placeholder }) => {

	const editorRef = useRef(null);

	useEffect(() => {
		const quill = new Quill(editorRef.current, {
			theme: 'snow',
			modules: {
				toolbar: [
					['bold', 'italic', 'underline', 'strike'],
					// Other options...
				],
			},
		});
		// Detect changes
		quill.on('text-change', () => {
			let content = quill.root.innerHTML;
			passText(content);
		});
		return () => {
			quill.off('text-change');
		};
	}, [passText, placeholder]);
 
	// Rendering the QuillEditor component with a reference to the DOM element
	return <div ref={editorRef} />;
};

export default QuillEditor;

Be ready for some changes. If you are using ordered lists and bullet lists in your Quill editor, I have a CSS hack to overcome the fact that the new version of Quill wraps every lists in <ol> tags.

Answer 29 · 2024-03-22T11:34:25.000Z

@Sivakumar0703 We'd love to offer helps for the react-quill project to upgrade to Quill v2 but haven't seen any signals the project would accept PRs for that. Before react-quill gets upgraded, you can refer to https://quilljs.com/playground/react to see how you can use Quill in a React project without any third-party libraries.

thank you. i have switched from react-quill to quill and everything is ok now. could you tell me how handle images when using quill toolbar because when i click on image icon a prompt is opened for entering the image url.

Answer 30 · 2024-03-22T11:35:08.000Z

@Sivakumar0703 I am also using Quill in React and I just switched from using react-quill to just Quill. The example in the playground is useful but might be hard to read with all the extra features displayed.

Here is a very simplified version of how I implemented it. We must now use useRef to manually create a reference to a DOM element and then manage the lifecycle by initialising Quill in a useEffect hook.

Rendering Quill editor from the parent component: <QuillEditor passText={setText} placeholder={placeholder} />

In my quill component:
import React, { useEffect, useRef } from 'react';
import Quill from 'quill';

const QuillEditor = ({ passText, placeholder }) => {

	const editorRef = useRef(null);

	useEffect(() => {
		const quill = new Quill(editorRef.current, {
			theme: 'snow',
			modules: {
				toolbar: [
					['bold', 'italic', 'underline', 'strike'],
					// Other options...
				],
			},
		});
		// Detect changes
		quill.on('text-change', () => {
			let content = quill.root.innerHTML;
			passText(content);
		});
		return () => {
			quill.off('text-change');
		};
	}, [passText, placeholder]);
 
	// Rendering the QuillEditor component with a reference to the DOM element
	return <div ref={editorRef} />;
};

export default QuillEditor;
Be ready for some changes. If you are using ordered lists and bullet lists in your Quill editor, I have a CSS hack to overcome the fact that the new version of Quill wraps every lists in <ol> tags.

Thank you. Your ref helped me a lot.

Answer 31 · 2024-03-23T04:06:31.000Z

@adgoncal Will exporting Options. What the use case for ExpandedOptions since it's supposed to be used internally?

Edited: Exported in 2.0.0-rc.4

Answer 32 · 2024-03-25T13:17:51.000Z

@luin thank you! If ExpandedOptions is only used internally, then there's no reason to export it. I only mentioned it because Options was not, and I was looking for alternatives.

Answer 33 · 2024-03-26T23:19:10.000Z

@luin, I installed the latest version of Quill (npm install quill@2.0.0-rc.4) in React TypeScript + Vite. The warning disappeared, but the Editor didn't set the default text value that I had predefined. I had to uninstall this version and revert to version 1.3.7 that I had before.

I'm also using PrimeReact and importing the component as import { Editor } from 'primereact/editor'; Do you know if it might be due to a PrimeReact error?

If any of you have a solution for this issue using an updated version, I'm all ears and would be very grateful.

Thanks for your hard work! :)

Answer 34 · 2024-03-27T14:13:37.000Z

@anye1tovar

I'm also using PrimeReact and importing the component as import { Editor } from 'primereact/editor'; Do you know if it might be due to a PrimeReact error?

If any of you have a solution for this issue using an updated version, I'm all ears and would be very grateful.

A quick search on primereact's issues show they do not yet support Quill 2. They're waiting for the official release: primefaces/primereact#5960

Answer 35 · 2024-04-13T16:56:00.000Z

@luin, I installed the latest version of Quill (npm install quill@2.0.0-rc.4) in React TypeScript + Vite. The warning disappeared, but the Editor didn't set the default text value that I had predefined. I had to uninstall this version and revert to version 1.3.7 that I had before.

I'm also using PrimeReact and importing the component as import { Editor } from 'primereact/editor'; Do you know if it might be due to a PrimeReact error?

If any of you have a solution for this issue using an updated version, I'm all ears and would be very grateful.

Thanks for your hard work! :)

Hello, did you find a solution? I have a similar problem with Angular 17.1.2, PrimeNg 17.13, quill@2.0.0-rc.5 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 warning.

Any help is welcome.

Answer 36 · 2024-04-17T11:34:04.000Z

Quill 2.0 has been released (announcement post) with many changes and fixes. If this is still an issue please create a new issue after reviewing our updated Contributing guide 🙏

Answer 37 · 2024-05-10T08:35:25.000Z

@brunowbbs react-quill 2.0 uses quill 1.3. You can actually use Quill in your React project directly without react-quill: https://quilljs.com/playground/react

When I try to use quill in my react project created by Vite + TypeScript, I got a lot of errors. Can you please share a version works with TypeScript?

Answer 38 · 2024-07-03T21:46:34.000Z

Yes so same issue here, I use "react-quill": "^2.0.0" in my react app, and in the browser I receive "quill.js:4233 [Deprecation] Listener added for a 'DOMNodeInserted' mutation event. This event type is deprecated, and will be removed from this browser VERY soon. Usage of this event listener will cause performance issues today, and represents a large risk of imminent site breakage. Consider using MutationObserver instead. See https://chromestatus.com/feature/5083947249172480 for more information." I was hoping it would be fix it in 2.0.0 but still I receive this warning, knowing that there wont be mutation events in Chrome 127 (going stable on July 30 2024) it seems like a big issue for us, any fix coming in the next weeks?

Answer 39 · 2024-07-04T15:37:03.000Z

Going to lock this conversation as the issue has been fixed in Quill 2.0. For people that come here due to the warning:

The warning only exists in Quill 1.x and has been fixed in Quill 2.0. Upgrading to Quill 2.0 should fix it.
react-quill is a third-party library. react-quill v2 uses Quill v1. You can use Quill 2.0 without a library. Here's an example: https://quilljs.com/playground/react.
If you are looking for an example using Quill v2 in a real project, here's an example: https://github.com/quilljs/webpack-example/tree/main.
I haven't tested but Quill 1.x should still work after the event type is removed from the browser. Although it's still recommended to upgrade to Quill 2.0.

Please feel free to create a new ticket if you find new issues.