@sd-angular/core 1.2.86 → 1.2.87

package/fesm2015/sd-angular-core-editor.js

@@ -1,4 +1,4 @@
-import { EventEmitter, Component, ChangeDetectionStrategy, NgZone, ChangeDetectorRef, ViewChild, Input, Output, ContentChild, NgModule } from '@angular/core';
+import { InjectionToken, EventEmitter, Component, ChangeDetectionStrategy, NgZone, ChangeDetectorRef, Inject, Optional, ViewChild, Input, Output, ContentChild, NgModule } from '@angular/core';
 import { QuillModule } from 'ngx-quill';
 import { FormControl, Validators, NgForm, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
@@ -7,11 +7,14 @@ import { Subscription } from 'rxjs';
 import { SdApiService, SdApiModule } from '@sd-angular/core/api';
 import 'quill-mention';
 import { SdLabelDefDirective } from '@sd-angular/core/common';
+import { SdLoadingService } from '@sd-angular/core/loading';
 import { CommonModule } from '@angular/common';
 import { SdTranslateModule } from '@sd-angular/core/translate';
 import { SdButtonModule } from '@sd-angular/core/button';
 import { SdTextareaModule } from '@sd-angular/core/textarea';
 
+const EDITOR_CONFIG = new InjectionToken('editor.configuration');
+
 const Constants = {
     ARE_YOU_WANT_TO_DELETE: 'Are you sure you want to delete?',
     ACTIVE: 'active',
@@ -117,12 +120,14 @@ const PROMOTION_FORM = {
     }
 };
 
-var _name, _subscription, _model, _form, _updateValidator, _uploadImage;
+var _name, _subscription, _model, _form, _updateValidator, _initUploadImage, _uploadImage, _uploadFile;
 class SdEditor {
-    constructor(ngZone, ref, sdApiService) {
+    constructor(ngZone, ref, sdApiService, loadingService, configuration) {
         this.ngZone = ngZone;
         this.ref = ref;
         this.sdApiService = sdApiService;
+        this.loadingService = loadingService;
+        this.configuration = configuration;
         _name.set(this, `N${v4()}`);
         this.id = `I${v4()}`;
         _subscription.set(this, new Subscription());
@@ -199,8 +204,37 @@ class SdEditor {
                 }
             }
         };
-        this.textLength = 0;
+        this.customButtonFileSVG = '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/><path d="M20.41,8.41l-4.83-4.83C15.21,3.21,14.7,3,14.17,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V9.83 C21,9.3,20.79,8.79,20.41,8.41z M7,7h7v2H7V7z M17,17H7v-2h10V17z M17,13H7v-2h10V13z"/></g></svg>';
         this.sdChange = new EventEmitter();
+        this.timerLoadQuillToolbar = null;
+        this.customFileHandler = (e) => {
+            const customButton = e.currentTarget;
+            const quillToolbar = customButton.closest('.ql-formats').closest('.ql-toolbar');
+            const quillBox = quillToolbar.closest('.ql-formats');
+            let fileInput = quillToolbar.querySelector('input.ql-customFile[type=file]');
+            if (fileInput == null) {
+                fileInput = document.createElement('input');
+                fileInput.setAttribute('type', Constants.FILE);
+                fileInput.setAttribute('accept', '*');
+                fileInput.classList.add('ql-customFile');
+                fileInput.addEventListener('change', () => {
+                    const files = fileInput.files;
+                    if (!files || !files.length) {
+                        return;
+                    }
+                    const formData = new FormData();
+                    formData.append(Constants.FILE, files[0]);
+                    let range = localStorage.getItem('quillRange');
+                    if (range) {
+                        range = JSON.parse(range);
+                    }
+                    this.quillEvent.enable(false);
+                    __classPrivateFieldGet(this, _uploadFile).call(this, formData, this.quillEvent, range, fileInput, quillToolbar.closest('quill-editor').id);
+                });
+                quillToolbar.appendChild(fileInput);
+            }
+            fileInput.click();
+        };
         _updateValidator.set(this, () => {
             this.formControl.clearValidators();
             this.formControl.clearAsyncValidators();
@@ -256,14 +290,6 @@ class SdEditor {
                             const formData = new FormData();
                             formData.append(Constants.FILE, files[0]);
                             this.quill.enable(false);
-                            /*this.apiService.post(this.domain + this.urlUploadImage, formData).subscribe((resp: any) => {
-                              this.quill.enable(true);
-                              this.quill.editor.insertEmbed(range.index, 'image', resp.data.imageUrl || resp.data.publish_url ||  resp.url);
-                              const content = this.quill.getContents();
-                              this.quill.setContents(content);
-                              this.quill.setSelection(range.index + 1, 'silent');
-                              fileInput.value = '';
-                            });*/
                             __classPrivateFieldGet(self, _uploadImage).call(self, formData, quill, range, fileInput);
                         });
                         this.container.appendChild(fileInput);
@@ -273,6 +299,33 @@ class SdEditor {
             });
             this.ref.markForCheck();
         };
+        _initUploadImage.set(this, (quill) => {
+            const self = this;
+            this.ngZone.runOutsideAngular(() => {
+                quill.getModule('toolbar').addHandler('image', function () {
+                    let fileInput = this.container.querySelector('input.ql-image[type=file]');
+                    if (fileInput == null) {
+                        fileInput = document.createElement('input');
+                        fileInput.setAttribute('type', Constants.FILE);
+                        fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
+                        fileInput.classList.add('ql-image');
+                        fileInput.addEventListener('change', () => {
+                            const files = fileInput.files;
+                            const range = this.quill.getSelection(true);
+                            if (!files || !files.length) {
+                                return;
+                            }
+                            const formData = new FormData();
+                            formData.append(Constants.FILE, files[0]);
+                            this.quill.enable(false);
+                            __classPrivateFieldGet(self, _uploadImage).call(self, formData, quill, range, fileInput);
+                        });
+                        this.container.appendChild(fileInput);
+                    }
+                    fileInput.click();
+                });
+            });
+        });
         this.onModelChange = (val) => {
             this.formControl.setValue(val);
             this.modelHTML = val;
@@ -303,6 +356,31 @@ class SdEditor {
             });
             this.ref.markForCheck();
         });
+        _uploadFile.set(this, (formData, quill, range, fileInput, loadingID) => {
+            if (!this.urlUploadFile) {
+                this.urlUploadFile = '/partner/v2/merchandise/file/uploaduserfile';
+            }
+            // this.domain = 'https://api-commerce-qc.vinid.dev';
+            this.loadingService.start('#box-' + loadingID);
+            this.sdApiService.post(this.urlUploadFile, formData).then((resp) => {
+                this.ngZone.runOutsideAngular(() => {
+                    var _a, _b, _c, _d;
+                    quill.enable(true);
+                    // quill.editor.insertEmbed(range.index, 'image', resp?.data?.imageUrl || resp?.data?.publish_url || resp?.url || '');
+                    quill.getModule('clipboard').dangerouslyPasteHTML(range.index, '<a target="_blank" href="' + (((_a = resp === null || resp === void 0 ? void 0 : resp.data) === null || _a === void 0 ? void 0 : _a.imageUrl) || ((_b = resp === null || resp === void 0 ? void 0 : resp.data) === null || _b === void 0 ? void 0 : _b.publish_url) || (resp === null || resp === void 0 ? void 0 : resp.url) || '')
+                        + '">' + (((_c = resp === null || resp === void 0 ? void 0 : resp.data) === null || _c === void 0 ? void 0 : _c.imageUrl) || ((_d = resp === null || resp === void 0 ? void 0 : resp.data) === null || _d === void 0 ? void 0 : _d.publish_url) || (resp === null || resp === void 0 ? void 0 : resp.url) || '') + '</a>', 'user');
+                    // quill.insertText();
+                    const content = quill.getContents();
+                    quill.setContents(content);
+                    quill.setSelection(range.index + 1, 'user');
+                    fileInput.value = '';
+                });
+                this.loadingService.stop('#box-' + loadingID);
+            }).catch((er) => {
+                this.loadingService.stop('#box-' + loadingID);
+            });
+            this.ref.markForCheck();
+        });
     }
     set model(val) {
         __classPrivateFieldSet(this, _model, val);
@@ -348,7 +426,19 @@ class SdEditor {
         (_a = __classPrivateFieldGet(this, _form)) === null || _a === void 0 ? void 0 : _a.addControl(__classPrivateFieldGet(this, _name), this.formControl);
         if (this.toolbar) {
             this.quillConfig.toolbar.container = this.toolbar;
-            console.log('toolbar', this.quillConfig);
+        }
+        if (this.quillConfig.toolbar.container.toString().includes('customFile')) {
+            this.timerLoadQuillToolbar = setInterval(() => {
+                if (document.querySelector('button.ql-customFile')) {
+                    clearInterval(this.timerLoadQuillToolbar);
+                    document.querySelector('button.ql-customFile').innerHTML = this.customButtonFileSVG;
+                    const customButton = document.querySelector('button.ql-customFile');
+                    if (customButton.getAttribute('listener') !== '1') {
+                        customButton.setAttribute('listener', '1');
+                        customButton.addEventListener('click', this.customFileHandler);
+                    }
+                }
+            }, 1000);
         }
         this.ref.markForCheck();
     }
@@ -363,20 +453,32 @@ class SdEditor {
         (_a = __classPrivateFieldGet(this, _form)) === null || _a === void 0 ? void 0 : _a.removeControl(__classPrivateFieldGet(this, _name));
         __classPrivateFieldGet(this, _subscription).unsubscribe();
     }
+    onSelectionChanged(e) {
+        // localStorage.setItem('quillRange', e.range ? JSON.stringify(e.range) : (e.oldRange ? JSON.stringify(e.oldRange) : null));
+        localStorage.setItem('quillRange', e.editor.getSelection() ? JSON.stringify(e.editor.getSelection()) : null);
+    }
+    onContentChanged(e) {
+        localStorage.setItem('quillRange', JSON.stringify({
+            index: (e.editor.getLength() ? e.editor.getLength() - 1 : 0),
+            length: 0
+        }));
+    }
 }
-_name = new WeakMap(), _subscription = new WeakMap(), _model = new WeakMap(), _form = new WeakMap(), _updateValidator = new WeakMap(), _uploadImage = new WeakMap();
+_name = new WeakMap(), _subscription = new WeakMap(), _model = new WeakMap(), _form = new WeakMap(), _updateValidator = new WeakMap(), _initUploadImage = new WeakMap(), _uploadImage = new WeakMap(), _uploadFile = new WeakMap();
 SdEditor.decorators = [
     { type: Component, args: [{
                 selector: 'sd-editor',
-                template: "<label *ngIf=\"label && !sdLabelDef?.templateRef\" class=\"d-block T14M\">{{label}} <span class=\"text-danger mb-2\" *ngIf=\"required\">*</span></label>\r\n<ng-container *ngIf=\"sdLabelDef?.templateRef\" matSuffix>\r\n  <ng-container *ngTemplateOutlet=\"sdLabelDef.templateRef\">\r\n  </ng-container>\r\n</ng-container>\r\n<ng-container *ngIf=\"!formControl.disabled && !showHtmlEditor\">\r\n  <quill-editor #editor [styles]=\"styles\" (onEditorCreated)=\"editorInit($event)\" [ngModel]=\"formControl.value\"\r\n                (ngModelChange)=\"onModelChange($event)\" [id]=\"id\" [modules]=\"quillConfig\" [placeholder]=\"placeholder\"\r\n                [maxLength]=\"maxlength\" >\r\n  </quill-editor>\r\n  <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.required\">\r\n    {{'This field is required' | sdTranslate}}\r\n  </span>\r\n  <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.minlength\">\r\n    {{'Max length' | sdTranslate}} <strong>{{minlength}}</strong>\r\n  </span>\r\n  <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.maxlength\">\r\n    {{'Max length' | sdTranslate}} <strong>{{maxlength}}</strong>\r\n  </span>\r\n</ng-container>\r\n<ng-container *ngIf=\"formControl.disabled\">\r\n  <div [innerHtml]=\"formControl.value\"></div>\r\n</ng-container>\r\n<ng-container *ngIf=\"enableHTMLButton\">\r\n  <sd-textarea [(model)]=\"modelHTML\" *ngIf=\"showHtmlEditor\" rows=\"20\"\r\n               (modelChange)=\"onModelChange($event)\"></sd-textarea>\r\n  <sd-button\r\n    title=\"{{showHtmlEditor?'\u1EA8n':'Hi\u1EC7n'}} m\u00E3 HTML\"\r\n    class=\"mr-8\"\r\n    fontSet=\"material-icons-outlined\"\r\n    (action)=\"onClickShowHtmlEditor()\"\r\n    type=\"light\"\r\n  ></sd-button>\r\n</ng-container>\r\n",
+                template: "<div id=\"box-{{id}}\">\r\n  <label *ngIf=\"label && !sdLabelDef?.templateRef\" class=\"d-block T14M\">{{label}} <span class=\"text-danger mb-2\"\r\n                                                                                        *ngIf=\"required\">*</span></label>\r\n  <ng-container *ngIf=\"sdLabelDef?.templateRef\" matSuffix>\r\n    <ng-container *ngTemplateOutlet=\"sdLabelDef.templateRef\">\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!formControl.disabled && !showHtmlEditor\">\r\n    <quill-editor #editor [styles]=\"styles\" (onEditorCreated)=\"editorInit($event)\" [ngModel]=\"formControl.value\"\r\n                  (onSelectionChanged)=\"onSelectionChanged($event)\"\r\n                  (onContentChanged)=\"onContentChanged($event)\"\r\n                  (ngModelChange)=\"onModelChange($event)\" [id]=\"id\" [modules]=\"quillConfig\" [placeholder]=\"placeholder\"\r\n                  [maxLength]=\"maxlength\">\r\n    </quill-editor>\r\n    <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.required\">\r\n    {{'This field is required' | sdTranslate}}\r\n  </span>\r\n    <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.minlength\">\r\n    {{'Max length' | sdTranslate}} <strong>{{minlength}}</strong>\r\n  </span>\r\n    <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.maxlength\">\r\n    {{'Max length' | sdTranslate}} <strong>{{maxlength}}</strong>\r\n  </span>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"formControl.disabled\">\r\n    <div [innerHtml]=\"formControl.value\"></div>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"enableHTMLButton\">\r\n    <sd-textarea [(model)]=\"modelHTML\" *ngIf=\"showHtmlEditor\" rows=\"20\"\r\n                 (modelChange)=\"onModelChange($event)\"></sd-textarea>\r\n    <sd-button\r\n      title=\"{{showHtmlEditor?'\u1EA8n':'Hi\u1EC7n'}} m\u00E3 HTML\"\r\n      class=\"mr-8\"\r\n      fontSet=\"material-icons-outlined\"\r\n      (action)=\"onClickShowHtmlEditor()\"\r\n      type=\"light\"\r\n    ></sd-button>\r\n  </ng-container>\r\n</div>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: ["::ng-deep img[alt=c-image-editor-quill]{max-width:80%}"]
+                styles: ["::ng-deep img[alt=c-image-editor-quill]{max-width:80%}::ng-deep .ql-toolbar input.ql-customFile[type=file]{display:none}"]
             },] }
 ];
 SdEditor.ctorParameters = () => [
     { type: NgZone },
     { type: ChangeDetectorRef },
-    { type: SdApiService }
+    { type: SdApiService },
+    { type: SdLoadingService },
+    { type: undefined, decorators: [{ type: Inject, args: [EDITOR_CONFIG,] }, { type: Optional }] }
 ];
 SdEditor.propDecorators = {
     editor: [{ type: ViewChild, args: ['editor',] }],
@@ -389,8 +491,10 @@ SdEditor.propDecorators = {
     modelChange: [{ type: Output }],
     placeholder: [{ type: Input }],
     styles: [{ type: Input }],
+    args: [{ type: Input }],
     domain: [{ type: Input }],
     urlUploadImage: [{ type: Input }],
+    urlUploadFile: [{ type: Input }],
     form: [{ type: Input }],
     toolbar: [{ type: Input }],
     enableHTMLButton: [{ type: Input }],
@@ -428,6 +532,6 @@ SdEditorModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { Constants, PROMOTION_FORM, PROMOTION_PERMISSIONS, SdEditor, SdEditorModule, ValidateMessageConstants };
+export { Constants, EDITOR_CONFIG, PROMOTION_FORM, PROMOTION_PERMISSIONS, SdEditor, SdEditorModule, ValidateMessageConstants };
 
 //# sourceMappingURL=sd-angular-core-editor.js.map

package/fesm2015/sd-angular-core-editor.js.__ivy_ngcc_bak

@@ -1,4 +1,4 @@
-import { EventEmitter, Component, ChangeDetectionStrategy, NgZone, ChangeDetectorRef, ViewChild, Input, Output, ContentChild, NgModule } from '@angular/core';
+import { InjectionToken, EventEmitter, Component, ChangeDetectionStrategy, NgZone, ChangeDetectorRef, Inject, Optional, ViewChild, Input, Output, ContentChild, NgModule } from '@angular/core';
 import { QuillModule } from 'ngx-quill';
 import { FormControl, Validators, NgForm, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
@@ -7,11 +7,14 @@ import { Subscription } from 'rxjs';
 import { SdApiService, SdApiModule } from '@sd-angular/core/api';
 import 'quill-mention';
 import { SdLabelDefDirective } from '@sd-angular/core/common';
+import { SdLoadingService } from '@sd-angular/core/loading';
 import { CommonModule } from '@angular/common';
 import { SdTranslateModule } from '@sd-angular/core/translate';
 import { SdButtonModule } from '@sd-angular/core/button';
 import { SdTextareaModule } from '@sd-angular/core/textarea';
 
+const EDITOR_CONFIG = new InjectionToken('editor.configuration');
+
 const Constants = {
     ARE_YOU_WANT_TO_DELETE: 'Are you sure you want to delete?',
     ACTIVE: 'active',
@@ -117,12 +120,14 @@ const PROMOTION_FORM = {
     }
 };
 
-var _name, _subscription, _model, _form, _updateValidator, _uploadImage;
+var _name, _subscription, _model, _form, _updateValidator, _initUploadImage, _uploadImage, _uploadFile;
 class SdEditor {
-    constructor(ngZone, ref, sdApiService) {
+    constructor(ngZone, ref, sdApiService, loadingService, configuration) {
         this.ngZone = ngZone;
         this.ref = ref;
         this.sdApiService = sdApiService;
+        this.loadingService = loadingService;
+        this.configuration = configuration;
         _name.set(this, `N${v4()}`);
         this.id = `I${v4()}`;
         _subscription.set(this, new Subscription());
@@ -199,8 +204,37 @@ class SdEditor {
                 }
             }
         };
-        this.textLength = 0;
+        this.customButtonFileSVG = '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/><path d="M20.41,8.41l-4.83-4.83C15.21,3.21,14.7,3,14.17,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V9.83 C21,9.3,20.79,8.79,20.41,8.41z M7,7h7v2H7V7z M17,17H7v-2h10V17z M17,13H7v-2h10V13z"/></g></svg>';
         this.sdChange = new EventEmitter();
+        this.timerLoadQuillToolbar = null;
+        this.customFileHandler = (e) => {
+            const customButton = e.currentTarget;
+            const quillToolbar = customButton.closest('.ql-formats').closest('.ql-toolbar');
+            const quillBox = quillToolbar.closest('.ql-formats');
+            let fileInput = quillToolbar.querySelector('input.ql-customFile[type=file]');
+            if (fileInput == null) {
+                fileInput = document.createElement('input');
+                fileInput.setAttribute('type', Constants.FILE);
+                fileInput.setAttribute('accept', '*');
+                fileInput.classList.add('ql-customFile');
+                fileInput.addEventListener('change', () => {
+                    const files = fileInput.files;
+                    if (!files || !files.length) {
+                        return;
+                    }
+                    const formData = new FormData();
+                    formData.append(Constants.FILE, files[0]);
+                    let range = localStorage.getItem('quillRange');
+                    if (range) {
+                        range = JSON.parse(range);
+                    }
+                    this.quillEvent.enable(false);
+                    __classPrivateFieldGet(this, _uploadFile).call(this, formData, this.quillEvent, range, fileInput, quillToolbar.closest('quill-editor').id);
+                });
+                quillToolbar.appendChild(fileInput);
+            }
+            fileInput.click();
+        };
         _updateValidator.set(this, () => {
             this.formControl.clearValidators();
             this.formControl.clearAsyncValidators();
@@ -256,14 +290,6 @@ class SdEditor {
                             const formData = new FormData();
                             formData.append(Constants.FILE, files[0]);
                             this.quill.enable(false);
-                            /*this.apiService.post(this.domain + this.urlUploadImage, formData).subscribe((resp: any) => {
-                              this.quill.enable(true);
-                              this.quill.editor.insertEmbed(range.index, 'image', resp.data.imageUrl || resp.data.publish_url ||  resp.url);
-                              const content = this.quill.getContents();
-                              this.quill.setContents(content);
-                              this.quill.setSelection(range.index + 1, 'silent');
-                              fileInput.value = '';
-                            });*/
                             __classPrivateFieldGet(self, _uploadImage).call(self, formData, quill, range, fileInput);
                         });
                         this.container.appendChild(fileInput);
@@ -273,6 +299,33 @@ class SdEditor {
             });
             this.ref.markForCheck();
         };
+        _initUploadImage.set(this, (quill) => {
+            const self = this;
+            this.ngZone.runOutsideAngular(() => {
+                quill.getModule('toolbar').addHandler('image', function () {
+                    let fileInput = this.container.querySelector('input.ql-image[type=file]');
+                    if (fileInput == null) {
+                        fileInput = document.createElement('input');
+                        fileInput.setAttribute('type', Constants.FILE);
+                        fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
+                        fileInput.classList.add('ql-image');
+                        fileInput.addEventListener('change', () => {
+                            const files = fileInput.files;
+                            const range = this.quill.getSelection(true);
+                            if (!files || !files.length) {
+                                return;
+                            }
+                            const formData = new FormData();
+                            formData.append(Constants.FILE, files[0]);
+                            this.quill.enable(false);
+                            __classPrivateFieldGet(self, _uploadImage).call(self, formData, quill, range, fileInput);
+                        });
+                        this.container.appendChild(fileInput);
+                    }
+                    fileInput.click();
+                });
+            });
+        });
         this.onModelChange = (val) => {
             this.formControl.setValue(val);
             this.modelHTML = val;
@@ -303,6 +356,31 @@ class SdEditor {
             });
             this.ref.markForCheck();
         });
+        _uploadFile.set(this, (formData, quill, range, fileInput, loadingID) => {
+            if (!this.urlUploadFile) {
+                this.urlUploadFile = '/partner/v2/merchandise/file/uploaduserfile';
+            }
+            // this.domain = 'https://api-commerce-qc.vinid.dev';
+            this.loadingService.start('#box-' + loadingID);
+            this.sdApiService.post(this.urlUploadFile, formData).then((resp) => {
+                this.ngZone.runOutsideAngular(() => {
+                    var _a, _b, _c, _d;
+                    quill.enable(true);
+                    // quill.editor.insertEmbed(range.index, 'image', resp?.data?.imageUrl || resp?.data?.publish_url || resp?.url || '');
+                    quill.getModule('clipboard').dangerouslyPasteHTML(range.index, '<a target="_blank" href="' + (((_a = resp === null || resp === void 0 ? void 0 : resp.data) === null || _a === void 0 ? void 0 : _a.imageUrl) || ((_b = resp === null || resp === void 0 ? void 0 : resp.data) === null || _b === void 0 ? void 0 : _b.publish_url) || (resp === null || resp === void 0 ? void 0 : resp.url) || '')
+                        + '">' + (((_c = resp === null || resp === void 0 ? void 0 : resp.data) === null || _c === void 0 ? void 0 : _c.imageUrl) || ((_d = resp === null || resp === void 0 ? void 0 : resp.data) === null || _d === void 0 ? void 0 : _d.publish_url) || (resp === null || resp === void 0 ? void 0 : resp.url) || '') + '</a>', 'user');
+                    // quill.insertText();
+                    const content = quill.getContents();
+                    quill.setContents(content);
+                    quill.setSelection(range.index + 1, 'user');
+                    fileInput.value = '';
+                });
+                this.loadingService.stop('#box-' + loadingID);
+            }).catch((er) => {
+                this.loadingService.stop('#box-' + loadingID);
+            });
+            this.ref.markForCheck();
+        });
     }
     set model(val) {
         __classPrivateFieldSet(this, _model, val);
@@ -348,7 +426,19 @@ class SdEditor {
         (_a = __classPrivateFieldGet(this, _form)) === null || _a === void 0 ? void 0 : _a.addControl(__classPrivateFieldGet(this, _name), this.formControl);
         if (this.toolbar) {
             this.quillConfig.toolbar.container = this.toolbar;
-            console.log('toolbar', this.quillConfig);
+        }
+        if (this.quillConfig.toolbar.container.toString().includes('customFile')) {
+            this.timerLoadQuillToolbar = setInterval(() => {
+                if (document.querySelector('button.ql-customFile')) {
+                    clearInterval(this.timerLoadQuillToolbar);
+                    document.querySelector('button.ql-customFile').innerHTML = this.customButtonFileSVG;
+                    const customButton = document.querySelector('button.ql-customFile');
+                    if (customButton.getAttribute('listener') !== '1') {
+                        customButton.setAttribute('listener', '1');
+                        customButton.addEventListener('click', this.customFileHandler);
+                    }
+                }
+            }, 1000);
         }
         this.ref.markForCheck();
     }
@@ -363,20 +453,32 @@ class SdEditor {
         (_a = __classPrivateFieldGet(this, _form)) === null || _a === void 0 ? void 0 : _a.removeControl(__classPrivateFieldGet(this, _name));
         __classPrivateFieldGet(this, _subscription).unsubscribe();
     }
+    onSelectionChanged(e) {
+        // localStorage.setItem('quillRange', e.range ? JSON.stringify(e.range) : (e.oldRange ? JSON.stringify(e.oldRange) : null));
+        localStorage.setItem('quillRange', e.editor.getSelection() ? JSON.stringify(e.editor.getSelection()) : null);
+    }
+    onContentChanged(e) {
+        localStorage.setItem('quillRange', JSON.stringify({
+            index: (e.editor.getLength() ? e.editor.getLength() - 1 : 0),
+            length: 0
+        }));
+    }
 }
-_name = new WeakMap(), _subscription = new WeakMap(), _model = new WeakMap(), _form = new WeakMap(), _updateValidator = new WeakMap(), _uploadImage = new WeakMap();
+_name = new WeakMap(), _subscription = new WeakMap(), _model = new WeakMap(), _form = new WeakMap(), _updateValidator = new WeakMap(), _initUploadImage = new WeakMap(), _uploadImage = new WeakMap(), _uploadFile = new WeakMap();
 SdEditor.decorators = [
     { type: Component, args: [{
                 selector: 'sd-editor',
-                template: "<label *ngIf=\"label && !sdLabelDef?.templateRef\" class=\"d-block T14M\">{{label}} <span class=\"text-danger mb-2\" *ngIf=\"required\">*</span></label>\r\n<ng-container *ngIf=\"sdLabelDef?.templateRef\" matSuffix>\r\n  <ng-container *ngTemplateOutlet=\"sdLabelDef.templateRef\">\r\n  </ng-container>\r\n</ng-container>\r\n<ng-container *ngIf=\"!formControl.disabled && !showHtmlEditor\">\r\n  <quill-editor #editor [styles]=\"styles\" (onEditorCreated)=\"editorInit($event)\" [ngModel]=\"formControl.value\"\r\n                (ngModelChange)=\"onModelChange($event)\" [id]=\"id\" [modules]=\"quillConfig\" [placeholder]=\"placeholder\"\r\n                [maxLength]=\"maxlength\" >\r\n  </quill-editor>\r\n  <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.required\">\r\n    {{'This field is required' | sdTranslate}}\r\n  </span>\r\n  <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.minlength\">\r\n    {{'Max length' | sdTranslate}} <strong>{{minlength}}</strong>\r\n  </span>\r\n  <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.maxlength\">\r\n    {{'Max length' | sdTranslate}} <strong>{{maxlength}}</strong>\r\n  </span>\r\n</ng-container>\r\n<ng-container *ngIf=\"formControl.disabled\">\r\n  <div [innerHtml]=\"formControl.value\"></div>\r\n</ng-container>\r\n<ng-container *ngIf=\"enableHTMLButton\">\r\n  <sd-textarea [(model)]=\"modelHTML\" *ngIf=\"showHtmlEditor\" rows=\"20\"\r\n               (modelChange)=\"onModelChange($event)\"></sd-textarea>\r\n  <sd-button\r\n    title=\"{{showHtmlEditor?'\u1EA8n':'Hi\u1EC7n'}} m\u00E3 HTML\"\r\n    class=\"mr-8\"\r\n    fontSet=\"material-icons-outlined\"\r\n    (action)=\"onClickShowHtmlEditor()\"\r\n    type=\"light\"\r\n  ></sd-button>\r\n</ng-container>\r\n",
+                template: "<div id=\"box-{{id}}\">\r\n  <label *ngIf=\"label && !sdLabelDef?.templateRef\" class=\"d-block T14M\">{{label}} <span class=\"text-danger mb-2\"\r\n                                                                                        *ngIf=\"required\">*</span></label>\r\n  <ng-container *ngIf=\"sdLabelDef?.templateRef\" matSuffix>\r\n    <ng-container *ngTemplateOutlet=\"sdLabelDef.templateRef\">\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!formControl.disabled && !showHtmlEditor\">\r\n    <quill-editor #editor [styles]=\"styles\" (onEditorCreated)=\"editorInit($event)\" [ngModel]=\"formControl.value\"\r\n                  (onSelectionChanged)=\"onSelectionChanged($event)\"\r\n                  (onContentChanged)=\"onContentChanged($event)\"\r\n                  (ngModelChange)=\"onModelChange($event)\" [id]=\"id\" [modules]=\"quillConfig\" [placeholder]=\"placeholder\"\r\n                  [maxLength]=\"maxlength\">\r\n    </quill-editor>\r\n    <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.required\">\r\n    {{'This field is required' | sdTranslate}}\r\n  </span>\r\n    <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.minlength\">\r\n    {{'Max length' | sdTranslate}} <strong>{{minlength}}</strong>\r\n  </span>\r\n    <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.maxlength\">\r\n    {{'Max length' | sdTranslate}} <strong>{{maxlength}}</strong>\r\n  </span>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"formControl.disabled\">\r\n    <div [innerHtml]=\"formControl.value\"></div>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"enableHTMLButton\">\r\n    <sd-textarea [(model)]=\"modelHTML\" *ngIf=\"showHtmlEditor\" rows=\"20\"\r\n                 (modelChange)=\"onModelChange($event)\"></sd-textarea>\r\n    <sd-button\r\n      title=\"{{showHtmlEditor?'\u1EA8n':'Hi\u1EC7n'}} m\u00E3 HTML\"\r\n      class=\"mr-8\"\r\n      fontSet=\"material-icons-outlined\"\r\n      (action)=\"onClickShowHtmlEditor()\"\r\n      type=\"light\"\r\n    ></sd-button>\r\n  </ng-container>\r\n</div>\r\n",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: ["::ng-deep img[alt=c-image-editor-quill]{max-width:80%}"]
+                styles: ["::ng-deep img[alt=c-image-editor-quill]{max-width:80%}::ng-deep .ql-toolbar input.ql-customFile[type=file]{display:none}"]
             },] }
 ];
 SdEditor.ctorParameters = () => [
     { type: NgZone },
     { type: ChangeDetectorRef },
-    { type: SdApiService }
+    { type: SdApiService },
+    { type: SdLoadingService },
+    { type: undefined, decorators: [{ type: Inject, args: [EDITOR_CONFIG,] }, { type: Optional }] }
 ];
 SdEditor.propDecorators = {
     editor: [{ type: ViewChild, args: ['editor',] }],
@@ -389,8 +491,10 @@ SdEditor.propDecorators = {
     modelChange: [{ type: Output }],
     placeholder: [{ type: Input }],
     styles: [{ type: Input }],
+    args: [{ type: Input }],
     domain: [{ type: Input }],
     urlUploadImage: [{ type: Input }],
+    urlUploadFile: [{ type: Input }],
     form: [{ type: Input }],
     toolbar: [{ type: Input }],
     enableHTMLButton: [{ type: Input }],
@@ -428,5 +532,5 @@ SdEditorModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { Constants, PROMOTION_FORM, PROMOTION_PERMISSIONS, SdEditor, SdEditorModule, ValidateMessageConstants };
+export { Constants, EDITOR_CONFIG, PROMOTION_FORM, PROMOTION_PERMISSIONS, SdEditor, SdEditorModule, ValidateMessageConstants };
 //# sourceMappingURL=sd-angular-core-editor.js.map