tnx-shared 5.3.206 → 5.3.207

package/fesm2015/tnx-shared.js

@@ -40810,10 +40810,11 @@ class EquationEditorComponent extends ComponentBase {
         });
     }
     onModelChange(evt) {
+        console.log(evt);
         clearTimeout(this.timeoutModelChange);
-        if (this.equationLatex && this.equationLatex.trim() != '') {
+        if (evt && typeof evt == 'string' && evt.trim() != '') {
             this.timeoutModelChange = setTimeout(() => {
-                this.showPreview(this.equationLatex.trim());
+                this.showPreview(evt.trim());
             }, 500);
         }
     }
@@ -40821,7 +40822,7 @@ class EquationEditorComponent extends ComponentBase {
     scaleDataURL(dataURL, maxSizeRatio) {
         return __awaiter(this, void 0, void 0, function* () {
             return new Promise(done => {
-                let img = new Image;
+                const img = new Image;
                 img.onload = () => {
                     let newWidth, newHeight, canvas, ctx;
                     const maxWidth = img.width * maxSizeRatio;
@@ -40861,12 +40862,12 @@ EquationEditorComponent.decorators = [
                 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 = () => [
     { type: Injector },
-    { type: TemplateService },
+    { type: TemplateInstanceService },
     { type: DomSanitizer }
 ];
 EquationEditorComponent.propDecorators = {
@@ -44699,6 +44700,21 @@ class TnTinymceComponent extends ComponentBase {
     }
     getTinyMceConfigByMode(mode) {
         const $this = this;
+        tinymce.PluginManager.add('equation', function (editor) {
+            const 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) {
             const openDialog = function () {
                 $this.header = 'Thêm/Chọn tin bài';
@@ -44722,7 +44738,7 @@ class TnTinymceComponent extends ComponentBase {
             };
             editor.ui.registry.addButton('template', {
                 tooltip: 'Template',
-                icon: 'non-breaking',
+                icon: 'template',
                 onAction: function () {
                     openDialog();
                 }
@@ -44850,33 +44866,34 @@ class TnTinymceComponent extends ComponentBase {
             },
             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;
     }
@@ -44899,8 +44916,14 @@ class TnTinymceComponent extends ComponentBase {
         this.keydown.next({ event: e, topic });
     }
     handleOk(evt) {
-        const data = this.equationForm.preview.nativeElement.outerHTML;
-        this.editor.execCommand('mceInsertContent', true, data);
+        const html = this.equationForm.preview.nativeElement;
+        html.height = 41;
+        let data = html.outerHTML;
+        if (data) {
+            data = data.replace(/width\s*=\s*"(.+?)"/g, '');
+            this.editor.insertContent(data);
+        }
+        this.equationFormModel.show = false;
     }
     focusTrap(event) {
         if (this.editor) {
@@ -45027,7 +45050,7 @@ class TnTinymceComponent extends ComponentBase {
 TnTinymceComponent.decorators = [
     { type: 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: NG_VALUE_ACCESSOR,