From 3a5fd758600700606bef6d35c2f74d336861cc46 Mon Sep 17 00:00:00 2001
From: Michael Meier <michael.meier@kit.edu>
Date: Wed, 8 Jan 2025 13:44:48 +0100
Subject: [PATCH] feat(Editor): implement support for Quill 2.0 (disables
 support for older versions)

---
 apps/showcase/doc/editor/QuillDoc.vue         |   2 +-
 packages/primevue/src/editor/Editor.vue       |   4 +-
 .../primevue/src/editor/style/EditorStyle.js  | 441 ++++++++++++++----
 3 files changed, 343 insertions(+), 104 deletions(-)

diff --git a/apps/showcase/doc/editor/QuillDoc.vue b/apps/showcase/doc/editor/QuillDoc.vue
index b76a4c4fa..8e6f968d6 100644
--- a/apps/showcase/doc/editor/QuillDoc.vue
+++ b/apps/showcase/doc/editor/QuillDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Editor uses <a href="https://quilljs.com/">Quill</a> editor underneath so it needs to be installed as a dependency.</p>
+        <p>Editor uses <a href="https://quilljs.com/">Quill</a> editor underneath so it needs to be installed as a dependency. Currently PrimeVue requires version 2 or newer.</p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
 </template>
diff --git a/packages/primevue/src/editor/Editor.vue b/packages/primevue/src/editor/Editor.vue
index 85e335cb6..b1282d5b6 100755
--- a/packages/primevue/src/editor/Editor.vue
+++ b/packages/primevue/src/editor/Editor.vue
@@ -133,7 +133,7 @@ export default {
 
             this.quill.on('text-change', (delta, oldContents, source) => {
                 if (source === 'user') {
-                    let html = this.$refs.editorElement.children[0].innerHTML;
+                    let html = this.quill.getSemanticHTML();
                     let text = this.quill.getText().trim();
 
                     if (html === '<p><br></p>') {
@@ -152,7 +152,7 @@ export default {
             });
 
             this.quill.on('selection-change', (range, oldRange, source) => {
-                let html = this.$refs.editorElement.children[0].innerHTML;
+                let html = this.quill.getSemanticHTML();
                 let text = this.quill.getText().trim();
 
                 this.$emit('selection-change', {
diff --git a/packages/primevue/src/editor/style/EditorStyle.js b/packages/primevue/src/editor/style/EditorStyle.js
index 26f186cfa..f4aad15ff 100644
--- a/packages/primevue/src/editor/style/EditorStyle.js
+++ b/packages/primevue/src/editor/style/EditorStyle.js
@@ -63,144 +63,383 @@ const theme = ({ dt }) => `
     padding: 0;
     counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
 }
-.ql-editor ol,
-.ql-editor ul {
-    padding-inline-start: 1.5rem;
+.ql-editor ol {
+    padding-left: 1.5em
 }
-.ql-editor ol > li,
-.ql-editor ul > li {
+
+.ql-editor li {
     list-style-type: none;
+    padding-left: 1.5em;
+    position: relative
 }
-.ql-editor ul > li::before {
-    content: '\\2022';
-}
-.ql-editor ul[data-checked='true'],
-.ql-editor ul[data-checked='false'] {
-    pointer-events: none;
-}
-.ql-editor ul[data-checked='true'] > li *,
-.ql-editor ul[data-checked='false'] > li * {
-    pointer-events: all;
-}
-.ql-editor ul[data-checked='true'] > li::before,
-.ql-editor ul[data-checked='false'] > li::before {
-    color: #777;
-    cursor: pointer;
-    pointer-events: all;
-}
-.ql-editor ul[data-checked='true'] > li::before {
-    content: '\\2611';
-}
-.ql-editor ul[data-checked='false'] > li::before {
-    content: '\\2610';
-}
-.ql-editor li::before {
+
+.ql-editor li > .ql-ui:before {
     display: inline-block;
-    white-space: nowrap;
-    width: 1.2rem;
-}
-.ql-editor li:not(.ql-direction-rtl)::before {
-    margin-inline-start: -1.5rem;
-    margin-inline-end: 0.3rem;
+    margin-left: -1.5em;
+    margin-right: .3em;
     text-align: right;
+    white-space: nowrap;
+    width: 1.2em
 }
-.ql-editor li.ql-direction-rtl::before {
-    margin-inline-start: 0.3rem;
-    margin-inline-end: -1.5rem;
+
+.ql-editor li[data-list=checked] > .ql-ui,.ql-editor li[data-list=unchecked] > .ql-ui {
+    color: #777
 }
-.ql-editor ol li:not(.ql-direction-rtl),
-.ql-editor ul li:not(.ql-direction-rtl) {
-    padding-inline-start: 1.5rem;
+
+.ql-editor li[data-list=bullet] > .ql-ui:before {
+    content: '\\2022'
 }
-.ql-editor ol li.ql-direction-rtl,
-.ql-editor ul li.ql-direction-rtl {
-    padding-inline-end: 1.5rem;
+
+.ql-editor li[data-list=checked] > .ql-ui:before {
+    content: '\\2611'
 }
-.ql-editor ol li {
-    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
-    counter-increment: list-0;
+
+.ql-editor li[data-list=unchecked] > .ql-ui:before {
+    content: '\\2610'
 }
-.ql-editor ol li:before {
-    content: counter(list-0, decimal) '. ';
+
+@supports (counter-set:none) {
+    .ql-editor li[data-list] {
+        counter-set: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9
+    }
 }
-.ql-editor ol li.ql-indent-1 {
-    counter-increment: list-1;
+
+@supports not (counter-set:none) {
+    .ql-editor li[data-list] {
+        counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9
+    }
 }
-.ql-editor ol li.ql-indent-1:before {
-    content: counter(list-1, lower-alpha) '. ';
+
+.ql-editor li[data-list=ordered] {
+    counter-increment: list-0
 }
-.ql-editor ol li.ql-indent-1 {
-    counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+
+.ql-editor li[data-list=ordered] > .ql-ui:before {
+    content: counter(list-0, decimal) '. '
 }
-.ql-editor ol li.ql-indent-2 {
-    counter-increment: list-2;
+
+.ql-editor li[data-list=ordered].ql-indent-1 {
+    counter-increment: list-1
 }
-.ql-editor ol li.ql-indent-2:before {
-    content: counter(list-2, lower-roman) '. ';
+
+.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before {
+    content: counter(list-1, lower-alpha) '. '
 }
-.ql-editor ol li.ql-indent-2 {
-    counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+
+@supports (counter-set:none) {
+    .ql-editor li[data-list].ql-indent-1 {
+        counter-set: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9
+    }
 }
-.ql-editor ol li.ql-indent-3 {
-    counter-increment: list-3;
+
+@supports not (counter-set:none) {
+    .ql-editor li[data-list].ql-indent-1 {
+        counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9
+    }
 }
-.ql-editor ol li.ql-indent-3:before {
-    content: counter(list-3, decimal) '. ';
+
+.ql-editor li[data-list=ordered].ql-indent-2 {
+    counter-increment: list-2
 }
-.ql-editor ol li.ql-indent-3 {
-    counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
+
+.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before {
+    content: counter(list-2, lower-roman) '. '
 }
-.ql-editor ol li.ql-indent-4 {
-    counter-increment: list-4;
+
+@supports (counter-set:none) {
+    .ql-editor li[data-list].ql-indent-2 {
+        counter-set: list-3 list-4 list-5 list-6 list-7 list-8 list-9
+    }
 }
-.ql-editor ol li.ql-indent-4:before {
-    content: counter(list-4, lower-alpha) '. ';
+
+@supports not (counter-set:none) {
+    .ql-editor li[data-list].ql-indent-2 {
+        counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9
+    }
 }
-.ql-editor ol li.ql-indent-4 {
-    counter-reset: list-5 list-6 list-7 list-8 list-9;
+
+.ql-editor li[data-list=ordered].ql-indent-3 {
+    counter-increment: list-3
 }
-.ql-editor ol li.ql-indent-5 {
-    counter-increment: list-5;
+
+.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before {
+    content: counter(list-3, decimal) '. '
 }
-.ql-editor ol li.ql-indent-5:before {
-    content: counter(list-5, lower-roman) '. ';
+
+@supports (counter-set:none) {
+    .ql-editor li[data-list].ql-indent-3 {
+        counter-set: list-4 list-5 list-6 list-7 list-8 list-9
+    }
 }
-.ql-editor ol li.ql-indent-5 {
-    counter-reset: list-6 list-7 list-8 list-9;
+
+@supports not (counter-set:none) {
+    .ql-editor li[data-list].ql-indent-3 {
+        counter-reset: list-4 list-5 list-6 list-7 list-8 list-9
+    }
 }
-.ql-editor ol li.ql-indent-6 {
-    counter-increment: list-6;
+
+.ql-editor li[data-list=ordered].ql-indent-4 {
+    counter-increment: list-4
 }
-.ql-editor ol li.ql-indent-6:before {
-    content: counter(list-6, decimal) '. ';
+
+.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before {
+    content: counter(list-4, lower-alpha) '. '
 }
-.ql-editor ol li.ql-indent-6 {
-    counter-reset: list-7 list-8 list-9;
+
+@supports (counter-set:none) {
+    .ql-editor li[data-list].ql-indent-4 {
+        counter-set: list-5 list-6 list-7 list-8 list-9
+    }
 }
-.ql-editor ol li.ql-indent-7 {
-    counter-increment: list-7;
+
+@supports not (counter-set:none) {
+    .ql-editor li[data-list].ql-indent-4 {
+        counter-reset: list-5 list-6 list-7 list-8 list-9
+    }
 }
-.ql-editor ol li.ql-indent-7:before {
-    content: counter(list-7, lower-alpha) '. ';
+
+.ql-editor li[data-list=ordered].ql-indent-5 {
+    counter-increment: list-5
 }
-.ql-editor ol li.ql-indent-7 {
-    counter-reset: list-8 list-9;
+
+.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before {
+    content: counter(list-5, lower-roman) '. '
 }
-.ql-editor ol li.ql-indent-8 {
-    counter-increment: list-8;
+
+@supports (counter-set:none) {
+    .ql-editor li[data-list].ql-indent-5 {
+        counter-set: list-6 list-7 list-8 list-9
+    }
 }
-.ql-editor ol li.ql-indent-8:before {
-    content: counter(list-8, lower-roman) '. ';
+
+@supports not (counter-set:none) {
+    .ql-editor li[data-list].ql-indent-5 {
+        counter-reset: list-6 list-7 list-8 list-9
+    }
 }
-.ql-editor ol li.ql-indent-8 {
-    counter-reset: list-9;
+
+.ql-editor li[data-list=ordered].ql-indent-6 {
+    counter-increment: list-6
 }
-.ql-editor ol li.ql-indent-9 {
-    counter-increment: list-9;
+
+.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before {
+    content: counter(list-6, decimal) '. '
 }
-.ql-editor ol li.ql-indent-9:before {
-    content: counter(list-9, decimal) '. ';
+
+@supports (counter-set:none) {
+    .ql-editor li[data-list].ql-indent-6 {
+        counter-set: list-7 list-8 list-9
+    }
 }
+
+@supports not (counter-set:none) {
+    .ql-editor li[data-list].ql-indent-6 {
+        counter-reset: list-7 list-8 list-9
+    }
+}
+
+.ql-editor li[data-list=ordered].ql-indent-7 {
+    counter-increment: list-7
+}
+
+.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before {
+    content: counter(list-7, lower-alpha) '. '
+}
+
+@supports (counter-set:none) {
+    .ql-editor li[data-list].ql-indent-7 {
+        counter-set: list-8 list-9
+    }
+}
+
+@supports not (counter-set:none) {
+    .ql-editor li[data-list].ql-indent-7 {
+        counter-reset: list-8 list-9
+    }
+}
+
+.ql-editor li[data-list=ordered].ql-indent-8 {
+    counter-increment: list-8
+}
+
+.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before {
+    content: counter(list-8, lower-roman) '. '
+}
+
+@supports (counter-set:none) {
+    .ql-editor li[data-list].ql-indent-8 {
+        counter-set: list-9
+    }
+}
+
+@supports not (counter-set:none) {
+    .ql-editor li[data-list].ql-indent-8 {
+        counter-reset: list-9
+    }
+}
+
+.ql-editor li[data-list=ordered].ql-indent-9 {
+    counter-increment: list-9
+}
+
+.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before {
+    content: counter(list-9, decimal) '. '
+}
+
+.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
+    padding-left: 3em
+}
+
+.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
+    padding-left: 4.5em
+}
+
+.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
+    padding-right: 3em
+}
+
+.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
+    padding-right: 4.5em
+}
+
+.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
+    padding-left: 6em
+}
+
+.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
+    padding-left: 7.5em
+}
+
+.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
+    padding-right: 6em
+}
+
+.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
+    padding-right: 7.5em
+}
+
+.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
+    padding-left: 9em
+}
+
+.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
+    padding-left: 10.5em
+}
+
+.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
+    padding-right: 9em
+}
+
+.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
+    padding-right: 10.5em
+}
+
+.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
+    padding-left: 12em
+}
+
+.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
+    padding-left: 13.5em
+}
+
+.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
+    padding-right: 12em
+}
+
+.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
+    padding-right: 13.5em
+}
+
+.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
+    padding-left: 15em
+}
+
+.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
+    padding-left: 16.5em
+}
+
+.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
+    padding-right: 15em
+}
+
+.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
+    padding-right: 16.5em
+}
+
+.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
+    padding-left: 18em
+}
+
+.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
+    padding-left: 19.5em
+}
+
+.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
+    padding-right: 18em
+}
+
+.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
+    padding-right: 19.5em
+}
+
+.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
+    padding-left: 21em
+}
+
+.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
+    padding-left: 22.5em
+}
+
+.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
+    padding-right: 21em
+}
+
+.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
+    padding-right: 22.5em
+}
+
+.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
+    padding-left: 24em
+}
+
+.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
+    padding-left: 25.5em
+}
+
+.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
+    padding-right: 24em
+}
+
+.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
+    padding-right: 25.5em
+}
+
+.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
+    padding-left: 27em
+}
+
+.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
+    padding-left: 28.5em
+}
+
+.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
+    padding-right: 27em
+}
+
+.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
+    padding-right: 28.5em
+}
+
+.ql-editor li.ql-direction-rtl {
+    padding-right: 1.5em
+}
+
+.ql-editor li.ql-direction-rtl > .ql-ui:before {
+    margin-left: .3em;
+    margin-right: -1.5em;
+    text-align: left
+}
+
 .ql-editor .ql-video {
     display: block;
     max-width: 100%;