@sd-angular/core 1.2.87 → 1.2.88

package/bundles/sd-angular-core-editor.umd.js

@@ -429,7 +429,7 @@
         }
     };
 
-    var _name, _subscription, _model, _form, _updateValidator, _initUploadImage, _uploadImage, _uploadFile;
+    var _name, _subscription, _model, _form, _updateValidator, _initUploadImage;
     var SdEditor = /** @class */ (function () {
         function SdEditor(ngZone, ref, sdApiService, loadingService, configuration) {
             var _this = this;
@@ -517,34 +517,6 @@
             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 core.EventEmitter();
             this.timerLoadQuillToolbar = null;
-            this.customFileHandler = function (e) {
-                var customButton = e.currentTarget;
-                var quillToolbar = customButton.closest('.ql-formats').closest('.ql-toolbar');
-                var quillBox = quillToolbar.closest('.ql-formats');
-                var 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', function () {
-                        var files = fileInput.files;
-                        if (!files || !files.length) {
-                            return;
-                        }
-                        var formData = new FormData();
-                        formData.append(Constants.FILE, files[0]);
-                        var 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, function () {
                 _this.formControl.clearValidators();
                 _this.formControl.clearAsyncValidators();
@@ -583,31 +555,31 @@
                 //   // this.formControl.setValue(html);
                 // });
                 var self = _this;
-                _this.ngZone.runOutsideAngular(function () {
-                    quill.getModule('toolbar').addHandler('image', function () {
-                        var _this = this;
-                        var 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', function () {
-                                var files = fileInput.files;
-                                var range = _this.quill.getSelection(true);
-                                if (!files || !files.length) {
-                                    return;
-                                }
-                                var 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();
-                    });
-                });
+                __classPrivateFieldGet(_this, _initUploadImage).call(_this, quill);
+                // 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);
+                //         self.#uploadImage(formData, quill, range, fileInput);
+                //       });
+                //       this.container.appendChild(fileInput);
+                //     }
+                //     fileInput.click();
+                //   });
+                // });
                 _this.ref.markForCheck();
             };
             _initUploadImage.set(this, function (quill) {
@@ -622,6 +594,7 @@
                             fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
                             fileInput.classList.add('ql-image');
                             fileInput.addEventListener('change', function () {
+                                var _a;
                                 var files = fileInput.files;
                                 var range = _this.quill.getSelection(true);
                                 if (!files || !files.length) {
@@ -630,7 +603,20 @@
                                 var formData = new FormData();
                                 formData.append(Constants.FILE, files[0]);
                                 _this.quill.enable(false);
-                                __classPrivateFieldGet(self, _uploadImage).call(self, formData, quill, range, fileInput);
+                                // self.#uploadImage(formData, quill, range, fileInput);
+                                (_a = self.configuration) === null || _a === void 0 ? void 0 : _a.uploadImage(formData, self.args).then(function (url) {
+                                    self.ngZone.runOutsideAngular(function () {
+                                        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="' + (url || '')
+                                            + '"><img src="' + (url || '') + '" alt="c-image-editor-quill"></a>', 'user');
+                                        // quill.insertText();
+                                        var content = quill.getContents();
+                                        quill.setContents(content);
+                                        quill.setSelection(range.index + 1, 'user');
+                                        fileInput.value = '';
+                                    });
+                                });
                             });
                             this.container.appendChild(fileInput);
                         }
@@ -647,52 +633,6 @@
                 _this.showHtmlEditor = !_this.showHtmlEditor;
                 _this.ref.markForCheck();
             };
-            _uploadImage.set(this, function (formData, quill, range, fileInput) {
-                if (!_this.urlUploadImage) {
-                    _this.urlUploadImage = '/partner/v2/merchandise/file/uploaduserfile';
-                }
-                // this.domain = 'https://api-commerce-qc.vinid.dev';
-                _this.sdApiService.post(_this.urlUploadImage, formData).then(function (resp) {
-                    _this.ngZone.runOutsideAngular(function () {
-                        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) || '')
-                            + '"><img src="' + (((_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) || '') + '" alt="c-image-editor-quill"></a>', 'user');
-                        // quill.insertText();
-                        var content = quill.getContents();
-                        quill.setContents(content);
-                        quill.setSelection(range.index + 1, 'user');
-                        fileInput.value = '';
-                    });
-                });
-                _this.ref.markForCheck();
-            });
-            _uploadFile.set(this, function (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(function (resp) {
-                    _this.ngZone.runOutsideAngular(function () {
-                        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();
-                        var content = quill.getContents();
-                        quill.setContents(content);
-                        quill.setSelection(range.index + 1, 'user');
-                        fileInput.value = '';
-                    });
-                    _this.loadingService.stop('#box-' + loadingID);
-                }).catch(function (er) {
-                    _this.loadingService.stop('#box-' + loadingID);
-                });
-                _this.ref.markForCheck();
-            });
         }
         Object.defineProperty(SdEditor.prototype, "model", {
             set: function (val) {
@@ -758,27 +698,92 @@
             configurable: true
         });
         SdEditor.prototype.ngOnInit = function () {
+            var e_1, _c;
             var _this = this;
-            var _a;
+            var _a, _b;
             (_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;
             }
-            if (this.quillConfig.toolbar.container.toString().includes('customFile')) {
-                this.timerLoadQuillToolbar = setInterval(function () {
-                    if (document.querySelector('button.ql-customFile')) {
-                        clearInterval(_this.timerLoadQuillToolbar);
-                        document.querySelector('button.ql-customFile').innerHTML = _this.customButtonFileSVG;
-                        var customButton = document.querySelector('button.ql-customFile');
-                        if (customButton.getAttribute('listener') !== '1') {
-                            customButton.setAttribute('listener', '1');
-                            customButton.addEventListener('click', _this.customFileHandler);
+            var _loop_1 = function (action) {
+                if (this_1.quillConfig.toolbar.container.toString().includes(action.key)) {
+                    var qlKey_1 = "button.ql-" + action.key;
+                    var interval_1 = setInterval(function () {
+                        if (document.querySelector(qlKey_1)) {
+                            clearInterval(interval_1);
+                            document.querySelector(qlKey_1).innerHTML = _this.customButtonFileSVG;
+                            var customButton = document.querySelector(qlKey_1);
+                            if (customButton.getAttribute('listener') !== '1') {
+                                customButton.setAttribute('listener', '1');
+                                customButton.addEventListener('click', function (e) {
+                                    var cursorPosition = localStorage.getItem('quillRange');
+                                    action.click(e, {
+                                        cursorPosition: JSON.parse(cursorPosition),
+                                        args: _this.args
+                                    });
+                                });
+                            }
                         }
-                    }
-                }, 1000);
+                    }, 1000);
+                }
+            };
+            var this_1 = this;
+            try {
+                for (var _d = __values((((_b = this.configuration) === null || _b === void 0 ? void 0 : _b.actions) || [])), _e = _d.next(); !_e.done; _e = _d.next()) {
+                    var action = _e.value;
+                    _loop_1(action);
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
+                }
+                finally { if (e_1) throw e_1.error; }
             }
+            // 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();
         };
+        // customFileHandler = (e) => {
+        //   const customButton = e.currentTarget;
+        //   const quillToolbar = customButton.closest('.ql-formats').closest('.ql-toolbar');
+        //   const quillBox = quillToolbar.closest('.ql-formats')
+        //   let fileInput: HTMLInputElement = 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);
+        //       this.#uploadFile(formData, this.quillEvent, range, fileInput, quillToolbar.closest('quill-editor').id);
+        //     });
+        //     quillToolbar.appendChild(fileInput);
+        //   }
+        //   fileInput.click();
+        // }
         SdEditor.prototype.ngAfterViewInit = function () {
             var _this = this;
             __classPrivateFieldGet(this, _subscription).add(this.formControl.valueChanges.subscribe(function (val) {
@@ -791,6 +796,50 @@
             (_a = __classPrivateFieldGet(this, _form)) === null || _a === void 0 ? void 0 : _a.removeControl(__classPrivateFieldGet(this, _name));
             __classPrivateFieldGet(this, _subscription).unsubscribe();
         };
+        // #uploadImage = (formData, quill, range, fileInput) => {
+        //   if (!this.urlUploadImage) {
+        //     this.urlUploadImage = '/partner/v2/merchandise/file/uploaduserfile';
+        //   }
+        //   // this.domain = 'https://api-commerce-qc.vinid.dev';
+        //   this.sdApiService.post(this.urlUploadImage, formData).then((resp: any) => {
+        //     this.ngZone.runOutsideAngular(() => {
+        //       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="' + (resp?.data?.imageUrl || resp?.data?.publish_url || resp?.url || '')
+        //         + '"><img src="' + (resp?.data?.imageUrl || resp?.data?.publish_url || resp?.url || '') + '" alt="c-image-editor-quill"></a>', 'user');
+        //       // quill.insertText();
+        //       const content = quill.getContents();
+        //       quill.setContents(content);
+        //       quill.setSelection(range.index + 1, 'user');
+        //       fileInput.value = '';
+        //     });
+        //   });
+        //   this.ref.markForCheck();
+        // }
+        // #uploadFile = (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: any) => {
+        //     this.ngZone.runOutsideAngular(() => {
+        //       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="' + (resp?.data?.imageUrl || resp?.data?.publish_url || resp?.url || '')
+        //         + '">' + (resp?.data?.imageUrl || resp?.data?.publish_url || 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();
+        // }
         SdEditor.prototype.onSelectionChanged = function (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);
@@ -803,7 +852,7 @@
         };
         return SdEditor;
     }());
-    _name = new WeakMap(), _subscription = new WeakMap(), _model = new WeakMap(), _form = new WeakMap(), _updateValidator = new WeakMap(), _initUploadImage = new WeakMap(), _uploadImage = new WeakMap(), _uploadFile = new WeakMap();
+    _name = new WeakMap(), _subscription = new WeakMap(), _model = new WeakMap(), _form = new WeakMap(), _updateValidator = new WeakMap(), _initUploadImage = new WeakMap();
     SdEditor.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-editor',
@@ -832,8 +881,6 @@
         styles: [{ type: core.Input }],
         args: [{ type: core.Input }],
         domain: [{ type: core.Input }],
-        urlUploadImage: [{ type: core.Input }],
-        urlUploadFile: [{ type: core.Input }],
         form: [{ type: core.Input }],
         toolbar: [{ type: core.Input }],
         enableHTMLButton: [{ type: core.Input }],
@@ -885,5 +932,4 @@
     Object.defineProperty(exports, '__esModule', { value: true });
 
 })));
-
-//# sourceMappingURL=sd-angular-core-editor.umd.js.map
+//# sourceMappingURL=sd-angular-core-editor.umd.js.map