tnx-shared 5.3.206 → 5.3.207

package/bundles/tnx-shared.umd.js

@@ -46629,10 +46629,11 @@
         };
         EquationEditorComponent.prototype.onModelChange = function (evt) {
             var _this = this;
+            console.log(evt);
             clearTimeout(this.timeoutModelChange);
-            if (this.equationLatex && this.equationLatex.trim() != '') {
+            if (evt && typeof evt == 'string' && evt.trim() != '') {
                 this.timeoutModelChange = setTimeout(function () {
-                    _this.showPreview(_this.equationLatex.trim());
+                    _this.showPreview(evt.trim());
                 }, 500);
             }
         };
@@ -46684,12 +46685,12 @@
                     selector: 'equation-editor',
                     template: "<div class=\"ui-fluid\">\n    <textarea #textarea class=\"latexContent\" placeholder=\"G\u00F5 c\u00F4ng th\u1EE9c to\u00E1n h\u1ECDc t\u1EA1i \u0111\u00E2y...\" rows=\"6\" pInputTextarea\n        (ngModelChange)=\"onModelChange($event)\" [(ngModel)]=\"equationLatex\"></textarea>\n</div>\n<div class=\"preview\">\n    <img #preview latex=\"true\" *ngIf=\"imageSrc\" [attr.height]=\"data.height != 0 ? data.height : null\"\n        class=\"latex\" [style]=\"data.style | safeStyle\" [src]=\"imageSrc\" [alt]=\"equationLatex\" />\n</div>",
                     providers: [ComponentContextService],
-                    styles: [".btn-equation{width:30px;height:30px;cursor:pointer}.preview{text-align:center;margin-top:10px;padding:0 10px}.latexContent{resize:none;border-radius:0}"]
+                    styles: [".btn-equation{width:30px;height:30px;cursor:pointer}.preview{text-align:center;margin:20px 10px}.latexContent{resize:none;border-radius:0}textarea{width:100%}"]
                 },] }
     ];
     EquationEditorComponent.ctorParameters = function () { return [
         { type: i0.Injector },
-        { type: TemplateService },
+        { type: TemplateInstanceService },
         { type: platformBrowser.DomSanitizer }
     ]; };
     EquationEditorComponent.propDecorators = {
@@ -51697,6 +51698,21 @@
         TnTinymceComponent.prototype.getTinyMceConfigByMode = function (mode) {
             var _this = this;
             var $this = this;
+            tinymce.PluginManager.add('equation', function (editor) {
+                var openDialog = function () {
+                    $this.header = 'Công thức toán học (dùng laTex)';
+                    $this.equationFormModel.show = true;
+                    $this.popupSize = { width: 1200, height: 700 };
+                };
+                editor.ui.registry.addButton('equation', {
+                    tooltip: 'Công thức toán học vào nội dung',
+                    // icon: 'insert-character',
+                    icon: 'ltr',
+                    onAction: function () {
+                        openDialog();
+                    }
+                });
+            });
             tinymce.PluginManager.add('addNews', function (editor) {
                 var openDialog = function () {
                     $this.header = 'Thêm/Chọn tin bài';
@@ -51720,7 +51736,7 @@
                 };
                 editor.ui.registry.addButton('template', {
                     tooltip: 'Template',
-                    icon: 'non-breaking',
+                    icon: 'template',
                     onAction: function () {
                         openDialog();
                     }
@@ -51848,33 +51864,34 @@
                 },
                 mobile: {
                     theme: 'silver',
-                    plugins: ['advlist autolink lists link image charmap print preview anchor textcolor searchreplace visualblocks code fullscreen insertdatetime media table media code lists colorpicker imagetools tabfocus textcolor'],
+                    plugins: ['advlist autolink lists link image charmap print preview anchor textcolor searchreplace visualblocks code fullscreen insertdatetime media table media code lists colorpicker imagetools tabfocus textcolor equation'],
                 }
             };
             if (mode == 'full') {
                 config.plugins = [
-                    'advlist autolink lists link image charmap print preview anchor textcolor searchreplace visualblocks code fullscreen insertdatetime media table media code lists colorpicker imagetools tabfocus editFileNew addNews'
+                    'advlist autolink lists link image charmap print preview anchor textcolor searchreplace visualblocks code fullscreen insertdatetime media table media code lists colorpicker imagetools tabfocus editFileNew addNews equation'
                 ];
-                config.toolbar = 'formatselect | bold italic Strikethrough forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table link editFileNew addNews | print removeformat undo redo | fullscreen ';
-                config.mobile.toolbar = 'bold italic Strikethrough forecolor backcolor | bullist numlist | fullscreen';
-                config.paste_data_images = true;
+                config.toolbar = 'formatselect | bold italic Strikethrough forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table link editFileNew addNews | print removeformat undo redo | equation | fullscreen ';
+                config.mobile.toolbar = 'bold italic Strikethrough forecolor backcolor | bullist numlist | equation | fullscreen';
                 return config;
             }
             else if (mode == 'medium') {
-                config.plugins = ['advlist autolink lists link image charmap print preview anchor textcolor searchreplace visualblocks code fullscreen insertdatetime media table media code lists colorpicker imagetools tabfocus textcolor'];
-                config.toolbar = 'formatselect | bold italic Strikethrough forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table link  | print removeformat undo redo | fullscreen';
-                config.mobile.toolbar = 'bold italic Strikethrough forecolor backcolor | bullist numlist | fullscreen';
-                config.paste_data_images = true;
+                config.plugins = ['advlist autolink lists link image charmap print preview anchor textcolor searchreplace visualblocks code fullscreen insertdatetime media table media code lists colorpicker imagetools tabfocus textcolor equation'];
+                config.toolbar = 'formatselect | bold italic Strikethrough forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table link  | print removeformat undo redo | equation | fullscreen';
+                config.mobile.toolbar = 'bold italic Strikethrough forecolor backcolor | bullist numlist | equation | fullscreen';
                 return config;
             }
             else if (mode == 'simple') {
-                config.plugins = ['advlist autolink lists link image charmap print preview anchor textcolor searchreplace visualblocks code fullscreen insertdatetime media table media code lists colorpicker imagetools tabfocus textcolor'];
-                config.toolbar = 'bold italic Strikethrough forecolor backcolor | bullist numlist | fullscreen';
-                config.mobile.toolbar = 'fullscreen | bold italic Strikethrough forecolor backcolor | bullist numlist';
+                config.plugins = ['advlist autolink lists link image charmap print preview anchor textcolor searchreplace visualblocks code fullscreen insertdatetime media table media code lists colorpicker imagetools tabfocus textcolor equation'];
+                config.toolbar = 'bold italic Strikethrough forecolor backcolor | bullist numlist | equation | fullscreen';
+                config.mobile.toolbar = 'fullscreen | bold italic Strikethrough forecolor backcolor | bullist numlist | equation';
+                return config;
+            }
+            else {
+                config.plugins = ['advlist autolink lists link image charmap print preview anchor textcolor searchreplace visualblocks code fullscreen insertdatetime media table media code lists colorpicker imagetools tabfocus textcolor equation'];
+                config.toolbar = 'formatselect | bold italic Strikethrough forecolor backcolor| alignleft aligncenter alignright alignjustify | bullist numlist | equation';
+                config.toolbar = 'bold italic Strikethrough forecolor backcolor | bullist numlist | equation | fullscreen';
             }
-            config.plugins = ['advlist autolink lists link image charmap print preview anchor textcolor searchreplace visualblocks code fullscreen insertdatetime media table media code lists colorpicker imagetools tabfocus textcolor'];
-            config.toolbar = 'formatselect | bold italic Strikethrough forecolor backcolor| alignleft aligncenter alignright alignjustify | bullist numlist';
-            config.toolbar = 'bold italic Strikethrough forecolor backcolor | bullist numlist | fullscreen';
             config.paste_data_images = true;
             return config;
         };
@@ -51897,8 +51914,14 @@
             this.keydown.next({ event: e, topic: topic });
         };
         TnTinymceComponent.prototype.handleOk = function (evt) {
-            var data = this.equationForm.preview.nativeElement.outerHTML;
-            this.editor.execCommand('mceInsertContent', true, data);
+            var html = this.equationForm.preview.nativeElement;
+            html.height = 41;
+            var data = html.outerHTML;
+            if (data) {
+                data = data.replace(/width\s*=\s*"(.+?)"/g, '');
+                this.editor.insertContent(data);
+            }
+            this.equationFormModel.show = false;
         };
         TnTinymceComponent.prototype.focusTrap = function (event) {
             if (this.editor) {
@@ -52067,7 +52090,7 @@
     TnTinymceComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'tn-tinymce',
-                    template: "<input *ngIf=\"!_deviceDetectorService.isDesktop()\" class=\"input-tab-trap\" (focus)=\"focusTrap($event)\" />\n<textarea class=\"tinymce-control\" id={{id}} [ngStyle]=\"{height: height+'px'}\"></textarea>\n<tn-dialog #dialog *ngIf=\"equationFormModel.show\" [closeOnEscape]=\"false\"\n    [header]=\"'C\u00F4ng th\u1EE9c to\u00E1n h\u1ECDc (d\u00F9ng laTex)' | translate\" [popupSize]=\"popupSize\">\n    <tn-custom-scrollbar #scrollbar>\n        <equation-editor [data]=\"dataEquation\">\n        </equation-editor>\n    </tn-custom-scrollbar>\n    <ng-template #footer>\n        <button icon=\"fas fa-check\" [disabled]=\"model.submitting\" pButton type=\"button\" (click)=\"handleOk($event)\"\n            [label]=\"'Ok' | translate\"></button>\n        <button icon=\"fas fa-undo\" [disabled]=\"model.submitting\" pButton class=\"ui-button-secondary\" type=\"button\"\n            (click)=\"equationFormModel.show = false\" [label]=\"'FORM.CANCEL' | translate\"></button>\n    </ng-template>\n</tn-dialog>\n\n<tn-dialog *ngIf=\"isAddNews\" #dialog [styleClass]=\"'address-form'\" [header]=\"header | translate\" [popupSize]=\"popupSize\"\n    (onHide)=\"isAddNews = false\">\n    <add-news #listBase [languageCode]=\"languageCode\" (showChange)=\"showChanged($event)\"></add-news>\n</tn-dialog>\n\n<tn-dialog *ngIf=\"showTemplate\" #dialog [styleClass]=\"'address-form'\" [header]=\"header | translate\"\n    [popupSize]=\"popupSize\" (onHide)=\"showTemplate = false\">\n    <tn-template (onChanged)=\"addTemplate($event)\"></tn-template>\n</tn-dialog>\n\n<tn-dialog *ngIf=\"isAddFile\" #dialog [styleClass]=\"'address-form'\" [header]=\"header | translate\" [popupSize]=\"popupSize\"\n    (onHide)=\"isAddFile = false\">\n    <file-picker-dialog #formBase [parentModel]=\" model\" [parentContext]=\"context\" (closeForm)=\"isAddFile = false\"\n        (onCancel)=\"handleRFCancel($event)\" (onChanged)=\"showChanged($event)\">\n    </file-picker-dialog>\n</tn-dialog>",
+                    template: "<input *ngIf=\"!_deviceDetectorService.isDesktop()\" class=\"input-tab-trap\" (focus)=\"focusTrap($event)\" />\n<textarea class=\"tinymce-control\" id={{id}} [ngStyle]=\"{height: height+'px'}\"></textarea>\n<tn-dialog #dialog *ngIf=\"equationFormModel.show\" [closeOnEscape]=\"false\"\n    [header]=\"'C\u00F4ng th\u1EE9c to\u00E1n h\u1ECDc (d\u00F9ng laTex)' | translate\" [popupSize]=\"popupSize\"\n    (onHide)=\"equationFormModel.show = false\">\n    <tn-custom-scrollbar #scrollbar>\n        <equation-editor [data]=\"dataEquation\">\n        </equation-editor>\n    </tn-custom-scrollbar>\n    <ng-template #footer>\n        <button icon=\"fas fa-check\" class=\"p-button-text\" [disabled]=\"model.submitting\" pButton type=\"button\"\n            (click)=\"handleOk($event)\" [label]=\"'X\u00E1c nh\u1EADn' | translate\"></button>\n        <button icon=\"fas fa-undo\" [disabled]=\"model.submitting\" pButton class=\"p-button-text p-button-secondary\"\n            type=\"button\" (click)=\"equationFormModel.show = false\" [label]=\"'FORM.CANCEL' | translate\"></button>\n    </ng-template>\n</tn-dialog>\n\n<tn-dialog *ngIf=\"isAddNews\" #dialog [styleClass]=\"'address-form'\" [header]=\"header | translate\" [popupSize]=\"popupSize\"\n    (onHide)=\"isAddNews = false\">\n    <add-news #listBase [languageCode]=\"languageCode\" (showChange)=\"showChanged($event)\"></add-news>\n</tn-dialog>\n\n<tn-dialog *ngIf=\"showTemplate\" #dialog [styleClass]=\"'address-form'\" [header]=\"header | translate\"\n    [popupSize]=\"popupSize\" (onHide)=\"showTemplate = false\">\n    <tn-template (onChanged)=\"addTemplate($event)\"></tn-template>\n</tn-dialog>\n\n<tn-dialog *ngIf=\"isAddFile\" #dialog [styleClass]=\"'address-form'\" [header]=\"header | translate\" [popupSize]=\"popupSize\"\n    (onHide)=\"isAddFile = false\">\n    <file-picker-dialog #formBase [parentModel]=\" model\" [parentContext]=\"context\" (closeForm)=\"isAddFile = false\"\n        (onCancel)=\"handleRFCancel($event)\" (onChanged)=\"showChanged($event)\">\n    </file-picker-dialog>\n</tn-dialog>",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,