@eui/components 17.0.2-snapshot-1702478232432 → 17.0.2-snapshot-1702481826405

package/fesm2022/eui-components-externals-quill.mjs

@@ -1,9 +1,10 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, SecurityContext, PLATFORM_ID, forwardRef, Component, ViewEncapsulation, Inject, Input, Output, NgModule } from '@angular/core';
-import { isPlatformServer, DOCUMENT } from '@angular/common';
+import { InjectionToken, inject, Injectable, EventEmitter, SecurityContext, PLATFORM_ID, forwardRef, Component, ViewEncapsulation, Inject, Input, Output, NgModule } from '@angular/core';
+import { isPlatformServer, DOCUMENT, CommonModule } from '@angular/common';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i1 from '@angular/platform-browser';
+import { Observable } from 'rxjs';
 
 const defaultModules = {
     toolbar: [
@@ -26,6 +27,131 @@ const defaultModules = {
 };
 
 const QUILL_CONFIG_TOKEN = new InjectionToken('config');
+const QUILL_DYNAMIC_CONFIG_TOKEN = new InjectionToken('Dynamic loading config');
+
+/**
+ * @internal This service is not part of the public API of the component
+ */
+class LoaderService {
+    constructor() {
+        this.dynamicConfig = inject(QUILL_DYNAMIC_CONFIG_TOKEN, { optional: true });
+    }
+    /**
+     * Load the Quill.js library
+     *
+     * @param path Path to the Quill.js library e.g. "assets/quill/dist". The path must contain the "quill.js"
+     * and "quillEditor.min.css" files and also the css ones.
+     */
+    load() {
+        let loaded = false;
+        return new Observable(observer => {
+            // check if window.Quill is defined other load it
+            if (window.Quill === undefined) {
+                const loadResult = { mainScript: false, style: false, secondaryScript: false, };
+                // style
+                const quillEditorStyle = document.createElement('link');
+                quillEditorStyle.href = `${this.dynamicConfig?.path}/quill.core.css`;
+                quillEditorStyle.rel = 'stylesheet';
+                const quillEditorStyleOnload = () => {
+                    quillEditorStyle.removeEventListener('load', quillEditorStyleOnload);
+                    quillEditorStyle.removeEventListener('error', quillEditorOnerror);
+                    loadResult.style = true;
+                    if (Object.values(loadResult).every(v => v === true)) {
+                        observer.next(true);
+                        observer.complete();
+                        loaded = true;
+                    }
+                };
+                const quillEditorSnowStyle = document.createElement('link');
+                quillEditorSnowStyle.href = `${this.dynamicConfig?.path}/quill.snow.css`;
+                quillEditorSnowStyle.rel = 'stylesheet';
+                // script to inject into page the Quill.js
+                let quillEditorScript = document.createElement('script');
+                quillEditorScript.src = `${this.dynamicConfig?.path}/quill.js`;
+                quillEditorScript.type = 'application/javascript';
+                quillEditorScript.async = true;
+                const quillEditorScriptOnload = () => {
+                    quillEditorScript.removeEventListener('load', quillEditorScriptOnload);
+                    quillEditorScript.removeEventListener('error', quillEditorOnerror);
+                    loadResult.mainScript = true;
+                    document.body.append(quillBetterTableScript);
+                    if (Object.values(loadResult).every(v => v === true)) {
+                        observer.next(true);
+                        observer.complete();
+                        loaded = true;
+                    }
+                };
+                // script to inject into page the Quill-better-table"node_modules/quill-better-table/dist/quill-better-table.min.js",
+                const quillBetterTableScript = document.createElement('script');
+                quillBetterTableScript.src = `${this.dynamicConfig?.path}/quill-better-table.js`;
+                quillBetterTableScript.type = 'application/javascript';
+                quillBetterTableScript.async = true;
+                const quillBetterTableScriptOnload = () => {
+                    quillBetterTableScript.removeEventListener('load', quillBetterTableScriptOnload);
+                    quillBetterTableScript.removeEventListener('error', quillEditorOnerror);
+                    loadResult.secondaryScript = true;
+                    if (Object.values(loadResult).every(v => v === true)) {
+                        observer.next(true);
+                        observer.complete();
+                        loaded = true;
+                    }
+                };
+                const quillEditorOnerror = () => {
+                    quillEditorStyle.removeEventListener('load', quillEditorStyleOnload);
+                    quillEditorStyle.removeEventListener('error', quillEditorOnerror);
+                    quillEditorScript.removeEventListener('load', quillEditorScriptOnload);
+                    quillEditorScript.removeEventListener('error', quillEditorOnerror);
+                    observer.next(false);
+                    observer.complete();
+                };
+                quillEditorStyle.addEventListener('load', quillEditorStyleOnload);
+                quillEditorStyle.addEventListener('error', quillEditorOnerror);
+                quillEditorSnowStyle.addEventListener('load', quillEditorStyleOnload);
+                quillEditorSnowStyle.addEventListener('error', quillEditorOnerror);
+                quillEditorScript.addEventListener('load', quillEditorScriptOnload);
+                quillEditorScript.addEventListener('error', quillEditorOnerror);
+                quillBetterTableScript.addEventListener('load', quillBetterTableScriptOnload);
+                quillBetterTableScript.addEventListener('error', quillEditorOnerror);
+                // check if the script is already loaded. Take into account the Hostname on to src
+                if (document.querySelector(`script[src="${this.dynamicConfig?.path}/quill.js"]`) === null) {
+                    document.body.append(quillEditorScript);
+                }
+                else {
+                    // interval timer to check when the script is loaded
+                    const interval = setInterval(() => {
+                        if (loaded) {
+                            clearInterval(interval);
+                        }
+                        else if (window.Quill !== undefined && window.quillBetterTable !== undefined) {
+                            observer.next(true);
+                            observer.complete();
+                            loaded = true;
+                            clearInterval(interval);
+                        }
+                    }, 100);
+                }
+                // check if style is already loaded
+                if (document.querySelector(`link[href="${this.dynamicConfig?.path}/quill.core.css"]`) === null) {
+                    document.body.append(quillEditorStyle);
+                }
+                // check if style is already loaded
+                if (document.querySelector(`link[href="${this.dynamicConfig?.path}/quill.snow.css"]`) === null) {
+                    document.body.append(quillEditorSnowStyle);
+                }
+            }
+            else {
+                observer.next(true);
+                observer.complete();
+            }
+        });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: LoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: LoaderService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: LoaderService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 const getFormat = (format, configFormat) => {
     const passedFormat = format || configFormat;
@@ -64,7 +190,7 @@ class QuillEditorComponent {
     }
     constructor(elementRef, domSanitizer, doc, 
     // eslint-disable-next-line @typescript-eslint/ban-types
-    platformId, renderer, zone, config) {
+    platformId, renderer, zone, config, loader) {
         this.elementRef = elementRef;
         this.domSanitizer = domSanitizer;
         this.doc = doc;
@@ -72,6 +198,8 @@ class QuillEditorComponent {
         this.renderer = renderer;
         this.zone = zone;
         this.config = config;
+        this.loader = loader;
+        this.loaded = false;
         this.customToolbarPosition = 'top';
         this.styles = null;
         this.customOptions = [];
@@ -189,117 +317,136 @@ class QuillEditorComponent {
     // eslint-disable-next-line no-empty, no-empty-function, @typescript-eslint/no-empty-function, @typescript-eslint/explicit-function-return-type
     onModelTouched() { }
     ngAfterViewInit() {
-        if (isPlatformServer(this.platformId)) {
-            return;
-        }
-        if (!Quill) {
-            // Quill = require('quill')
-            Quill = window['Quill'];
-        }
-        this.overrideScrollBehavior(Quill);
-        this.elementRef.nativeElement.insertAdjacentHTML(this.customToolbarPosition === 'top' ? 'beforeend' : 'afterbegin', this.preserveWhitespace ? '<pre quill-editor-element></pre>' : '<div quill-editor-element></div>');
-        this.editorElem = this.elementRef.nativeElement.querySelector('[quill-editor-element]');
-        const toolbarElem = this.elementRef.nativeElement.querySelector('[quill-editor-toolbar]');
-        let modules = this.modules || this.config.modules || defaultModules;
-        if (modules.toolbar === undefined) {
-            modules.toolbar = defaultModules.toolbar;
-        }
-        let placeholder = this.placeholder !== undefined ? this.placeholder : this.config.placeholder;
-        if (placeholder === undefined) {
-            placeholder = 'Insert text here ...';
-        }
-        if (toolbarElem) {
-            // eslint-disable-next-line dot-notation,@typescript-eslint/dot-notation
-            modules['toolbar'] = toolbarElem;
-        }
-        if (!this.hasImageFeature) {
-            modules['uploader'] = { handler: () => false };
-        }
-        else {
-            modules['uploader'] = { mimetypes: ['image/png', 'image/jpeg'] };
-        }
-        if (this.styles) {
-            Object.keys(this.styles).forEach((key) => {
-                this.renderer.setStyle(this.editorElem, key, this.styles[key]);
-            });
-        }
-        this.customOptions.forEach((customOption) => {
-            const newCustomOption = Quill.import(customOption.import);
-            newCustomOption.whitelist = customOption.whitelist;
-            Quill.register(newCustomOption, true);
-        });
-        let bounds = this.bounds && this.bounds === 'self' ? this.editorElem : this.bounds;
-        if (!bounds) {
-            bounds = this.config.bounds ? this.config.bounds : this.doc.body;
-        }
-        let debug = this.debug;
-        if (!debug && debug !== false && this.config.debug) {
-            debug = this.config.debug;
-        }
-        let readOnly = this.readOnly;
-        if (!readOnly && this.readOnly !== false) {
-            readOnly = this.config.readOnly !== undefined ? this.config.readOnly : false;
-        }
-        let scrollingContainer = this.scrollingContainer;
-        if (!scrollingContainer && this.scrollingContainer !== null) {
-            scrollingContainer =
-                this.config.scrollingContainer === null || this.config.scrollingContainer ? this.config.scrollingContainer : null;
-        }
-        let formats = this.formats;
-        if (!formats && formats === undefined) {
-            formats = this.config.formats || this.config.formats === null ? this.config.formats : undefined;
-        }
-        Quill.formats = { ...Quill.formats, [this.id]: formats };
-        if (formats && formats.indexOf('table') !== -1) {
-            modules = {
-                ...modules,
-                'better-table': false,
-            };
-        }
-        this.quillEditor = new Quill(this.editorElem, {
-            bounds,
-            debug,
-            formats,
-            modules,
-            placeholder,
-            readOnly,
-            scrollingContainer,
-            strict: this.strict,
-            theme: this.theme || (this.config.theme ? this.config.theme : 'snow'),
-        });
-        this.quillEditor.container.firstChild.id = this.id;
-        if (this.content) {
-            const format = getFormat(this.format, this.config.format);
-            if (format === 'object') {
-                this.quillEditor.setContents(this.content, 'silent');
-            }
-            else if (format === 'text') {
-                this.quillEditor.setText(this.content, 'silent');
-            }
-            else if (format === 'json') {
-                try {
-                    this.quillEditor.setContents(JSON.parse(this.content), 'silent');
+        // const loader = new LoaderService();
+        this.loader.load().subscribe({
+            complete: () => {
+                // setup keyboard bindings from BetterTable if present
+                const QuillBetterTable = window['quillBetterTable'];
+                if (QuillBetterTable) {
+                    // check if already registered
+                    if (!window['Quill'].imports.hasOwnProperty('modules/better-table')) {
+                        window['Quill'].register({ 'modules/better-table': QuillBetterTable });
+                    }
+                    if (!this.config.modules.keyboard) {
+                        this.config.modules.keyboard = {
+                            bindings: QuillBetterTable?.keyboardBindings,
+                        };
+                    }
                 }
-                catch (e) {
-                    this.quillEditor.setText(this.content, 'silent');
+                if (isPlatformServer(this.platformId)) {
+                    return;
                 }
-            }
-            else {
-                if (this.sanitize) {
-                    this.content = this.domSanitizer.sanitize(SecurityContext.HTML, this.content);
+                if (!Quill) {
+                    // Quill = require('quill')
+                    Quill = window['Quill'];
+                }
+                this.overrideScrollBehavior(Quill);
+                this.loaded = true;
+                this.elementRef.nativeElement.insertAdjacentHTML(this.customToolbarPosition === 'top' ? 'beforeend' : 'afterbegin', this.preserveWhitespace ? '<pre quill-editor-element></pre>' : '<div quill-editor-element></div>');
+                this.editorElem = this.elementRef.nativeElement.querySelector('[quill-editor-element]');
+                const toolbarElem = this.elementRef.nativeElement.querySelector('[quill-editor-toolbar]');
+                let modules = this.modules || this.config.modules || defaultModules;
+                if (modules.toolbar === undefined) {
+                    modules.toolbar = defaultModules.toolbar;
+                }
+                let placeholder = this.placeholder !== undefined ? this.placeholder : this.config.placeholder;
+                if (placeholder === undefined) {
+                    placeholder = 'Insert text here ...';
+                }
+                if (toolbarElem) {
+                    // eslint-disable-next-line dot-notation,@typescript-eslint/dot-notation
+                    modules['toolbar'] = toolbarElem;
+                }
+                if (!this.hasImageFeature) {
+                    modules['uploader'] = { handler: () => false };
                 }
-                const contents = this.quillEditor.clipboard.convert(this.content);
-                this.quillEditor.setContents(contents, 'silent');
+                else {
+                    modules['uploader'] = { mimetypes: ['image/png', 'image/jpeg'] };
+                }
+                if (this.styles) {
+                    Object.keys(this.styles).forEach((key) => {
+                        this.renderer.setStyle(this.editorElem, key, this.styles[key]);
+                    });
+                }
+                this.customOptions.forEach((customOption) => {
+                    const newCustomOption = Quill.import(customOption.import);
+                    newCustomOption.whitelist = customOption.whitelist;
+                    Quill.register(newCustomOption, true);
+                });
+                let bounds = this.bounds && this.bounds === 'self' ? this.editorElem : this.bounds;
+                if (!bounds) {
+                    bounds = this.config.bounds ? this.config.bounds : this.doc.body;
+                }
+                let debug = this.debug;
+                if (!debug && debug !== false && this.config.debug) {
+                    debug = this.config.debug;
+                }
+                let readOnly = this.readOnly;
+                if (!readOnly && this.readOnly !== false) {
+                    readOnly = this.config.readOnly !== undefined ? this.config.readOnly : false;
+                }
+                let scrollingContainer = this.scrollingContainer;
+                if (!scrollingContainer && this.scrollingContainer !== null) {
+                    scrollingContainer =
+                        this.config.scrollingContainer === null || this.config.scrollingContainer ? this.config.scrollingContainer : null;
+                }
+                let formats = this.formats;
+                if (!formats && formats === undefined) {
+                    formats = this.config.formats || this.config.formats === null ? this.config.formats : undefined;
+                }
+                Quill.formats = { ...Quill.formats, [this.id]: formats };
+                if (formats && formats.indexOf('table') !== -1) {
+                    modules = {
+                        ...modules,
+                        'better-table': false,
+                    };
+                }
+                this.quillEditor = new Quill(this.editorElem, {
+                    bounds,
+                    debug,
+                    formats,
+                    modules,
+                    placeholder,
+                    readOnly,
+                    scrollingContainer,
+                    strict: this.strict,
+                    theme: this.theme || (this.config.theme ? this.config.theme : 'snow'),
+                });
+                this.quillEditor.container.firstChild.id = this.id;
+                if (this.content) {
+                    const format = getFormat(this.format, this.config.format);
+                    if (format === 'object') {
+                        this.quillEditor.setContents(this.content, 'silent');
+                    }
+                    else if (format === 'text') {
+                        this.quillEditor.setText(this.content, 'silent');
+                    }
+                    else if (format === 'json') {
+                        try {
+                            this.quillEditor.setContents(JSON.parse(this.content), 'silent');
+                        }
+                        catch (e) {
+                            this.quillEditor.setText(this.content, 'silent');
+                        }
+                    }
+                    else {
+                        if (this.sanitize) {
+                            this.content = this.domSanitizer.sanitize(SecurityContext.HTML, this.content);
+                        }
+                        const contents = this.quillEditor.clipboard.convert(this.content);
+                        this.quillEditor.setContents(contents, 'silent');
+                    }
+                    this.quillEditor.history.clear();
+                }
+                // initialize disabled status based on this.disabled as default value
+                this.setDisabledState();
+                this.onEditorCreated.emit(this.quillEditor);
+                // mark model as touched if editor lost focus
+                this.quillEditor.on('selection-change', this.selectionChangeHandler);
+                // update model if text changes
+                this.quillEditor.on('text-change', this.textChangeHandler);
             }
-            this.quillEditor.history.clear();
-        }
-        // initialize disabled status based on this.disabled as default value
-        this.setDisabledState();
-        this.onEditorCreated.emit(this.quillEditor);
-        // mark model as touched if editor lost focus
-        this.quillEditor.on('selection-change', this.selectionChangeHandler);
-        // update model if text changes
-        this.quillEditor.on('text-change', this.textChangeHandler);
+        });
     }
     ngOnDestroy() {
         if (this.quillEditor) {
@@ -435,7 +582,7 @@ class QuillEditorComponent {
         /** register the Scroll override */
         QuillInstance.register('blots/scroll', Scroll, true);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: QuillEditorComponent, deps: [{ token: i0.ElementRef }, { token: i1.DomSanitizer }, { token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: QUILL_CONFIG_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: QuillEditorComponent, deps: [{ token: i0.ElementRef }, { token: i1.DomSanitizer }, { token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: QUILL_CONFIG_TOKEN }, { token: LoaderService }], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: QuillEditorComponent, selector: "quill-editor", inputs: { id: "id", format: "format", theme: "theme", modules: "modules", debug: "debug", placeholder: "placeholder", maxLength: "maxLength", minLength: "minLength", formats: "formats", customToolbarPosition: "customToolbarPosition", styles: "styles", scrollingContainer: "scrollingContainer", bounds: "bounds", customOptions: "customOptions", trackChanges: "trackChanges", hasImageFeature: "hasImageFeature", readOnly: "readOnly", required: "required", sanitize: "sanitize", strict: "strict", preserveWhitespace: "preserveWhitespace", valueGetter: "valueGetter", valueSetter: "valueSetter" }, outputs: { onEditorCreated: "onEditorCreated", onContentChanged: "onContentChanged", onSelectionChanged: "onSelectionChanged", onFocus: "onFocus", onBlur: "onBlur" }, providers: [
             {
                 multi: true,
@@ -478,7 +625,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImpor
                 }] }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [QUILL_CONFIG_TOKEN]
-                }] }], propDecorators: { id: [{
+                }] }, { type: LoaderService }], propDecorators: { id: [{
                 type: Input
             }], format: [{
                 type: Input
@@ -536,6 +683,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImpor
                 type: Input
             }] } });
 
+// TODO: integrate that module and all related code with the eui-editor module.
+//     Remove this sub-entry and move all the code to the eui-editor.
+/**
+ * @deprecated please don't use it. It will be removed
+ */
 class QuillModule {
     static forRoot(config) {
         return {
@@ -550,20 +702,20 @@ class QuillModule {
         };
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: QuillModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.6", ngImport: i0, type: QuillModule, declarations: [QuillEditorComponent], exports: [QuillEditorComponent] }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.6", ngImport: i0, type: QuillModule, declarations: [QuillEditorComponent], imports: [CommonModule], exports: [QuillEditorComponent] }); }
     /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: QuillModule, providers: [
             {
                 provide: QUILL_CONFIG_TOKEN,
                 useValue: { modules: defaultModules },
             },
-        ] }); }
+        ], imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: QuillModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [QuillEditorComponent],
                     exports: [QuillEditorComponent],
-                    imports: [],
+                    imports: [CommonModule],
                     providers: [
                         {
                             provide: QUILL_CONFIG_TOKEN,
@@ -577,5 +729,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { QUILL_CONFIG_TOKEN, QuillEditorComponent, QuillModule, defaultModules };
+export { LoaderService, QUILL_CONFIG_TOKEN, QUILL_DYNAMIC_CONFIG_TOKEN, QuillEditorComponent, QuillModule, defaultModules };
 //# sourceMappingURL=eui-components-externals-quill.mjs.map