Fixed #2842 - Editor Quill: SSR error document is not defined

api-generator/components/editor.js

@@ -28,6 +28,12 @@ const EditorProps = [
         type: "any",
         default: "null",
         description: "Inline style of the container."
+    },
+    {
+        name: 'modules',
+        type: 'object',
+        default: 'null',
+        description: 'Modules configuration, see <a href="http://quilljs.com/docs/modules/">here</a> for available options.'
     }
 ];
 
@@ -98,6 +104,17 @@ const EditorEvents = [
                 description: "Text editor instance."
             }
         ]
+    },
+    {
+        name: 'load',
+        description: 'Callback to invoke when the quill modules are loaded.',
+        arguments: [
+            {
+                name: 'event.instance',
+                type: 'any',
+                description: 'Quill instance'
+            }
+        ]
     }
 ];
 

src/components/editor/Editor.d.ts

@@ -51,6 +51,13 @@ export interface EditorSelectionChangeEvent {
     instance: any;
 }
 
+export interface EditorLoadEvent {
+    /**
+     * Text editor instance.
+     */
+    instance: any;
+}
+
 export interface EditorProps {
     /**
      * Value of the content.
@@ -72,6 +79,10 @@ export interface EditorProps {
      * Inline style of the container.
      */
     editorStyle?: any;
+    /**
+     * Modules configuration, see [here](https://quilljs.com/docs/modules/) for available options.
+     */
+    modules?: any;
 }
 
 export interface EditorSlots {
@@ -97,6 +108,11 @@ export declare type EditorEmits = {
      * @param {EditorSelectionChangeEvent} event - Custom selection change event.
      */
     'selection-change': (event: EditorSelectionChangeEvent) => void;
+    /**
+     * Callback to invoke when the quill modules are loaded.
+     * @param {EditorLoadEvent} event - Custom load event.
+     */
+    'load': (event: EditorLoadEvent) => void;
 }
 
 declare class Editor extends ClassComponent<EditorProps, EditorSlots, EditorEmits> { }

src/components/editor/Editor.vue

@@ -48,17 +48,26 @@
 </template>
 
 <script>
-import Quill from "quill";
+import { DomHandler } from 'primevue/utils';
+
+const QuillJS = (function () {
+    try {
+        return window.Quill;
+    } catch {
+        return null;
+    }
+})();
 
 export default {
     name: 'Editor',
-    emits: ['update:modelValue', 'text-change', 'selection-change'],
+    emits: ['update:modelValue', 'text-change', 'selection-change', 'load'],
     props: {
         modelValue: String,
         placeholder: String,
         readonly: Boolean,
         formats: Array,
-        editorStyle: null
+        editorStyle: null,
+        modules: null
     },
     quill: null,
     watch: {
@@ -69,16 +78,52 @@ export default {
         }
     },
     mounted() {
-        this.quill = new Quill(this.$refs.editorElement, {
+        const configuration = {
             modules: {
-                toolbar: this.$refs.toolbarElement
+                toolbar: this.$refs.toolbarElement,
+                ...this.modules
             },
             readOnly: this.readonly,
             theme: 'snow',
             formats: this.formats,
             placeholder: this.placeholder
-        });
+        };
 
+        if (QuillJS) {
+            // Loaded by script only
+            this.quill = new QuillJS(this.$refs.editorElement, configuration);
+            this.initQuill();
+            this.handleLoad();
+        } else {
+            import('quill')
+                .then((module) => {
+                    if (module && DomHandler.isExist(this.$refs.editorElement)) {
+                        if (module.default) {
+                            // webpack
+                            this.quill = new module.default(this.$refs.editorElement, configuration);
+                        } else {
+                            // parceljs
+                            this.quill = new module(this.$refs.editorElement, configuration);
+                        }
+
+                        this.initQuill();
+                    }
+                })
+                .then(() => {
+                    this.handleLoad();
+                });
+        }
+    },
+    methods: {
+        renderValue(value) {
+            if (this.quill) {
+                if (value)
+                    this.quill.setContents(this.quill.clipboard.convert(value));
+                else
+                    this.quill.setText('');
+            }
+        },
+        initQuill() {
             this.renderValue(this.modelValue);
 
             this.quill.on('text-change', (delta, oldContents, source) => {
@@ -114,13 +159,9 @@ export default {
                 })
             });
         },
-    methods: {
-        renderValue(value) {
-            if (this.quill) {
-                if (value)
-                    this.quill.pasteHTML(value);
-                else
-                    this.quill.setText('');
+        handleLoad() {
+            if (this.quill && this.quill.getModule('toolbar')) {
+                this.$emit('load', { instance: this.quill });
             }
         }
     },

src/components/utils/DomHandler.js

@@ -495,6 +495,10 @@ export default  {
         (element)[methodName].apply(element, args);
     },
 
+    isExist(element) {
+        return element !== null && typeof element !== 'undefined' && element.nodeName && element.parentNode;
+    },
+
     isClient() {
         return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
     },

src/components/utils/Utils.d.ts

@@ -42,6 +42,7 @@ export declare class DomHandler {
     static resolveUserAgent(): { browser: string; version: string; };
     static isVisible(el: HTMLElement): boolean;
     static invokeElementMethod(el: HTMLElement, methodName: string, args: any): void;
+    static isExist(el: HTMLElement): boolean;
     static isClient(): boolean;
     static getFocusableElements(el: HTMLElement, selector?: string): any[];
     static getFirstFocusableElement(el: HTMLElement, selector?: string): any;

src/views/editor/EditorDoc.vue

@@ -77,6 +77,14 @@ import Editor from 'primevue/editor';
                         <td>any</td>
                         <td>null</td>
                         <td>Inline style of the container.</td>
+                    </tr>
+                    <tr>
+                        <td>modules</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>
+                            Modules configuration, see <a href="http://quilljs.com/docs/modules/">here</a> for available options.
+                        </td>
                     </tr>
 				</tbody>
 			</table>
@@ -111,6 +119,11 @@ import Editor from 'primevue/editor';
                             event.textValue: Current value as text.<br/>
                             event.instance: Text editor instance.</td>
                         <td>Callback to invoke when selection of the text changes.</td>
+                    </tr>
+                    <tr>
+                        <td>load</td>
+                        <td>event.instance: Quill instance</td>
+                        <td>Callback to invoke when the quill modules are loaded.</td>
                     </tr>
 				</tbody>
 			</table>