Merge pull request #6429 from melloware/PR5960-editor

Fix #5960: Quill 2.0.0 support

components/doc/editor/accessibilitydoc.js

@@ -3,10 +3,7 @@ import { DocSectionText } from '@/components/doc/common/docsectiontext';
 export function AccessibilityDoc() {
     return (
         <DocSectionText id="accessibility" label="Accessibility">
-            <p>
-                Quill performs generally well in terms of accessibility. The elements in the toolbar can be tabbed and have the necessary ARIA roles/attributes for screen readers. One known limitation is the lack of arrow key support for{' '}
-                <a href="https://github.com/quilljs/quill/issues/1031">dropdowns</a> in the toolbar that may be overcome with a custom toolbar.
-            </p>
+            <p>Quill performs generally well in terms of accessibility. The elements in the toolbar can be tabbed and have the necessary ARIA roles/attributes for screen readers.</p>
         </DocSectionText>
     );
 }

components/doc/editor/basicdoc.js

@@ -50,7 +50,7 @@ export default function BasicDemo() {
             <div className="card">
                 <Editor value={text} onTextChange={(e) => setText(e.htmlValue)} style={{ height: '320px' }} />
             </div>
-            <DocSectionCode code={code} dependencies={{ quill: '1.3.7' }} />
+            <DocSectionCode code={code} dependencies={{ quill: '2.0.0' }} />
         </>
     );
 }

components/doc/editor/readonlydoc.js

@@ -44,7 +44,7 @@ export default function ReadOnlyDemo() {
             <div className="card">
                 <Editor value="Always bet on Prime!" readOnly style={{ height: '320px' }} />
             </div>
-            <DocSectionCode code={code} dependencies={{ quill: '1.3.7' }} />
+            <DocSectionCode code={code} dependencies={{ quill: '2.0.0' }} />
         </>
     );
 }

components/doc/editor/templatedoc.js

@@ -86,7 +86,7 @@ export default function TemplateDemo() {
             <div className="card">
                 <Editor value={text} onTextChange={(e) => setText(e.htmlValue)} headerTemplate={header} style={{ height: '320px' }} />
             </div>
-            <DocSectionCode code={code} dependencies={{ quill: '1.3.7' }} />
+            <DocSectionCode code={code} dependencies={{ quill: '2.0.0' }} />
         </>
     );
 }

components/doc/editor/theming/tailwinddoc.js

@@ -47,7 +47,7 @@ export default function UnstyledDemo() {
                 </p>
                 <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
-                <DocSectionCode code={code2} embedded dependencies={{ quill: '1.3.7' }} />
+                <DocSectionCode code={code2} embedded dependencies={{ quill: '2.0.0' }} />
             </DocSectionText>
         </>
     );

components/lib/editor/Editor.js

@@ -123,7 +123,7 @@ export const Editor = React.memo(
             quill.current = quillInstance;
 
             if (props.value) {
-                quill.current.setContents(quill.current.clipboard.convert(props.value));
+                quill.current.clipboard.dangerouslyPasteHTML(props.value);
             }
 
             setQuillCreated(true);
@@ -151,7 +151,7 @@ export const Editor = React.memo(
 
         useUpdateEffect(() => {
             if (quill.current && !quill.current.hasFocus()) {
-                props.value ? quill.current.setContents(quill.current.clipboard.convert(props.value)) : quill.current.setText('');
+                props.value ? quill.current.clipboard.dangerouslyPasteHTML(props.value) : quill.current.setText('');
             }
         }, [props.value]);