matcha-components 20.237.0 → 20.239.0

package/fesm2022/matcha-components.mjs

@@ -14547,8 +14547,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                 }]
         }] });
 
-const DEFAULT_CONFIG = {
+const DEFAULT_OPTIONS = {
     height: '400px',
+    width: '100%',
     showFont: true,
     showFormats: true,
     showBold: true,
@@ -14565,61 +14566,96 @@ const DEFAULT_CONFIG = {
     showLink: true,
     showImage: true,
     showVideo: true,
-    showMarkdown: false,
+    showMarkdown: true,
     showFullScreen: true,
     showCodeView: true,
+    addFont: [],
     videoX: 560,
     videoY: 315,
     imageSize: '350px',
 };
-function buildButtonList(options) {
-    const groups = [['undo', 'redo']];
-    const formats = [
-        options.showFont && 'font',
-        options.showFormats && 'blockStyle',
-    ].filter(Boolean);
-    if (formats.length)
-        groups.push(formats);
-    const inline = [
-        options.showBold && 'bold',
-        options.showItalic && 'italic',
-        options.showUnderline && 'underline',
-        options.showStrike && 'strike',
-    ].filter(Boolean);
-    if (inline.length)
-        groups.push(inline);
-    const colors = [
-        options.showFontColor && 'fontColor',
-        options.showHiliteColor && 'backgroundColor',
-    ].filter(Boolean);
-    if (colors.length)
-        groups.push(colors);
-    const para = [
-        options.showInOutDent && 'outdent',
-        options.showInOutDent && 'indent',
-        options.showAlign && 'align',
-        options.showList && 'list',
-        options.showLine && 'hr',
-    ].filter(Boolean);
-    if (para.length)
-        groups.push(para);
-    const insert = [
-        options.showTable && 'table',
-        options.showLink && 'link',
-        options.showImage && 'image',
-        options.showVideo && 'video',
-    ].filter(Boolean);
-    if (insert.length)
-        groups.push(insert);
-    if (options.showMarkdown)
-        groups.push(['markdownView']);
-    const view = [
-        options.showFullScreen && 'fullScreen',
-        options.showCodeView && 'codeView',
-    ].filter(Boolean);
-    if (view.length)
-        groups.push(view);
-    return groups;
+function buildSunEditorConfig(options = {}) {
+    const opts = { ...DEFAULT_OPTIONS, ...options };
+    return {
+        height: opts.height,
+        width: opts.width,
+        buttonList: _buildButtonList(opts),
+        imageWidth: opts.imageSize,
+        videoWidth: opts.videoX,
+        videoHeight: opts.videoY,
+        font: opts.addFont?.length ? opts.addFont.map(f => f.value) : undefined,
+        defaultStyle: 'font-family: Arial, sans-serif; font-size: 16px;',
+    };
+}
+function _buildButtonList(opts) {
+    // Desktop toolbar — mirrors suneditor.html reference exactly
+    const desktop = [['undo', 'redo']];
+    if (opts.showFormats || opts.showFont) {
+        desktop.push('|', ['blockStyle', 'font', 'fontSize']);
+    }
+    if (opts.showBold || opts.showItalic || opts.showUnderline || opts.showStrike) {
+        desktop.push('|', ['bold', 'italic', 'underline', 'strike']);
+    }
+    if (opts.showFontColor || opts.showHiliteColor) {
+        desktop.push('|', ['fontColor', 'backgroundColor']);
+    }
+    desktop.push('|', ['removeFormat'], '/');
+    if (opts.showInOutDent || opts.showAlign || opts.showList) {
+        desktop.push(['outdent', 'indent', 'align', 'list']);
+    }
+    if (opts.showTable || opts.showLink || opts.showImage || opts.showVideo) {
+        desktop.push('|', ['table', 'link', 'image', 'video']);
+    }
+    const viewBtns = [
+        ...(opts.showFullScreen ? ['fullScreen'] : []),
+        ...(opts.showCodeView ? ['codeView'] : []),
+        ...(opts.showMarkdown ? ['markdownView'] : []),
+    ];
+    if (viewBtns.length)
+        desktop.push('|', viewBtns);
+    // Responsive breakpoints — mirrors suneditor.html reference exactly
+    return [
+        ...desktop,
+        ['%992', [
+                ['undo', 'redo'],
+                '|',
+                [':Format-default.more_paragraph', 'blockStyle', 'font', 'fontSize'],
+                ['bold', 'italic', 'underline', 'strike'],
+                '|',
+                ['fontColor', 'backgroundColor'],
+                '|',
+                ['removeFormat'],
+                '|',
+                ['outdent', 'indent', 'align', 'list'],
+                '|',
+                ['table', 'link', 'image', 'video'],
+                '|',
+                ['fullScreen', 'codeView', 'markdownView'],
+            ]],
+        ['%768', [
+                ['undo', 'redo'],
+                '|',
+                [':Format-default.more_paragraph', 'blockStyle', 'font', 'fontSize', '|', 'removeFormat'],
+                ['bold', 'italic', 'underline', 'strike'],
+                '|',
+                ['fontColor', 'backgroundColor'],
+                ['outdent', 'indent', 'align', 'list'],
+                '|',
+                [':Insert-default.more_plus', 'table', 'link', 'image', 'video'],
+                '|',
+                ['fullScreen', 'codeView', 'markdownView'],
+            ]],
+        ['%576', [
+                ['undo', 'redo'],
+                '|',
+                [':Format-default.more_paragraph', 'blockStyle', 'font', 'fontSize'],
+                [':Text-default.more_text', 'bold', 'italic', 'underline', 'strike', '|', 'fontColor', 'backgroundColor', '|', 'removeFormat'],
+                ['outdent', 'indent', 'align', 'list'],
+                '|',
+                [':Insert-default.more_plus', 'table', 'link', 'image', 'video'],
+                ['-right', 'fullScreen', 'codeView', 'markdownView'],
+            ]],
+    ];
 }
 
 class MatchaSkeletonComponent {
@@ -14718,7 +14754,7 @@ class MatchaTextEditorComponent {
         this._el = _el;
         this.editorId = `matcha-text-editor-${Math.random().toString(36).substring(2, 11)}`;
         this.isLoading = true;
-        this._config = { ...DEFAULT_CONFIG };
+        this._config = {};
         this.contentChange = new EventEmitter();
         this._editor = null;
         this._pendingValue = '';
@@ -14734,11 +14770,12 @@ class MatchaTextEditorComponent {
                 this._initEditor();
             }
             catch (error) {
-                console.error('[TextEditor] Erro ao inicializar o SunEditor:', error);
+                console.error('[matcha-text-editor] Falha ao inicializar o SunEditor:', error);
             }
         });
     }
     ngOnDestroy() {
+        this._editor?.destroy();
         this._editor = null;
     }
     // ControlValueAccessor
@@ -14746,7 +14783,7 @@ class MatchaTextEditorComponent {
         const v = value || '';
         this._isSettingValue = true;
         if (this._editor) {
-            this._editor.$.html.set(v);
+            this._editor.html.set(v);
         }
         else {
             this._pendingValue = v;
@@ -14761,17 +14798,9 @@ class MatchaTextEditorComponent {
     }
     setDisabledState(isDisabled) {
         this._disabled = isDisabled;
-        if (this._editor) {
-            const wysiwyg = this._editor.$.frameContext.get('wysiwyg');
-            if (isDisabled) {
-                this._editor.$.toolbar.disable();
-                wysiwyg?.setAttribute('contenteditable', 'false');
-            }
-            else {
-                this._editor.$.toolbar.enable();
-                wysiwyg?.setAttribute('contenteditable', 'true');
-            }
-        }
+        if (!this._editor)
+            return;
+        isDisabled ? this._editor.toolbar.disable() : this._editor.toolbar.enable();
     }
     // Private
     _injectScript(id, url) {
@@ -14791,7 +14820,7 @@ class MatchaTextEditorComponent {
             script.id = id;
             script.src = url;
             script.onload = () => { script.setAttribute('data-loaded', 'true'); resolve(); };
-            script.onerror = () => { console.warn(`[TextEditor] Falha ao carregar: ${id}`); resolve(); };
+            script.onerror = () => { console.warn(`[matcha-text-editor] Falha ao carregar: ${id}`); resolve(); };
             document.head.appendChild(script);
         });
     }
@@ -14811,39 +14840,48 @@ class MatchaTextEditorComponent {
         });
     }
     async _loadAssets() {
-        await this._injectStyle('suneditor-css', `${CDN_BASE}/css/suneditor.min.css`);
+        // CSS loads in parallel
+        await Promise.all([
+            this._injectStyle('suneditor-css', `${CDN_BASE}/css/suneditor.min.css`),
+            this._injectStyle('codemirror-css', `${CDN_BASE}/css/codemirror.min.css`),
+        ]);
+        // JS loads sequentially — order matters
+        await this._injectScript('codemirror-js', `${CDN_BASE}/js/codemirror.min.js`);
+        await this._injectScript('codemirror-xml', `${CDN_BASE}/js/xml.min.js`);
+        await this._injectScript('codemirror-css-mode', `${CDN_BASE}/js/css.js`);
+        await this._injectScript('codemirror-js-mode', `${CDN_BASE}/js/javascript.js`);
+        await this._injectScript('codemirror-htmlmixed', `${CDN_BASE}/js/htmlmixed.js`);
         await this._injectScript('suneditor-js', `${CDN_BASE}/js/suneditor.min.js`);
+        await this._injectScript('suneditor-lang-ptbr', `${CDN_BASE}/langs/pt-br.js`);
     }
     _reloadEditor() {
-        this._el.nativeElement.querySelectorAll('.sun-editor').forEach((el) => el.remove());
-        const content = this._editor?.$.html.get() ?? '';
+        const content = this._editor?.html.get() ?? '';
+        this._editor?.destroy();
         this._editor = null;
         this._pendingValue = content;
         this.isLoading = true;
         this._cdr.detectChanges();
-        this._ngZone.runOutsideAngular(() => {
-            this._initEditor();
-        });
+        this._ngZone.runOutsideAngular(() => this._initEditor());
     }
     _initEditor() {
         const SUNEDITOR = window.SUNEDITOR;
         if (!SUNEDITOR) {
-            console.error('[TextEditor] SUNEDITOR global não encontrado após injeção!');
+            console.error('[matcha-text-editor] SUNEDITOR global não encontrado após injeção.');
             return;
         }
-        if (!document.getElementById(this.editorId)) {
+        const textarea = document.getElementById(this.editorId);
+        if (!textarea) {
             requestAnimationFrame(() => this._ngZone.runOutsideAngular(() => this._initEditor()));
             return;
         }
-        const mergedConfig = { ...DEFAULT_CONFIG, ...this._config };
-        this._editor = SUNEDITOR.create(`#${this.editorId}`, {
+        this._editor = SUNEDITOR.create(textarea, {
             plugins: SUNEDITOR.plugins,
-            buttonList: buildButtonList(mergedConfig),
-            height: mergedConfig.height || '400px',
-            width: mergedConfig.width,
-            imageWidth: mergedConfig.imageSize,
-            videoWidth: mergedConfig.videoX,
-            videoHeight: mergedConfig.videoY,
+            lang: window.SUNEDITOR_LANG?.pt_br,
+            externalLibs: {
+                codeMirror: { src: window.CodeMirror },
+            },
+            toolbar_sticky: 0,
+            ...buildSunEditorConfig(this._config),
             events: {
                 onChange: ({ data }) => {
                     if (this._isSettingValue)
@@ -14853,24 +14891,19 @@ class MatchaTextEditorComponent {
                         this.contentChange.emit(data);
                     });
                 },
-                onBlur: () => {
-                    this._ngZone.run(() => this._onTouched());
-                },
+                onBlur: () => this._ngZone.run(() => this._onTouched()),
             },
         });
         if (this._disabled) {
-            const wysiwyg = this._editor.$.frameContext.get('wysiwyg');
-            this._editor.$.toolbar.disable();
-            wysiwyg?.setAttribute('contenteditable', 'false');
+            this._editor.toolbar.disable();
         }
-        // Hide immediately so the skeleton doesn't overlap the editor during initialization
         const sunEditorEl = this._el.nativeElement.querySelector('.sun-editor');
         if (sunEditorEl)
             sunEditorEl.style.display = 'none';
         setTimeout(() => {
             if (this._pendingValue) {
                 this._isSettingValue = true;
-                this._editor.$.html.set(this._pendingValue);
+                this._editor.html.set(this._pendingValue);
                 this._pendingValue = '';
                 setTimeout(() => { this._isSettingValue = false; }, 0);
             }
@@ -15758,5 +15791,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CopyButtonComponent, DEFAULT_CONFIG, INITIAL_CONFIG, MATCHA_MASK_CONFIG, MATCHA_OPTION_PARENT, MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteComponent, MatchaAutocompleteModule, MatchaAutocompleteTriggerDirective, MatchaAvatarComponent, MatchaAvatarModule, MatchaBreakpointObservableModule, MatchaBreakpointObserver, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipComponent, MatchaChipListComponent, MatchaChipModule, MatchaComponentsModule, MatchaDateComponent, MatchaDateModule, MatchaDateRangeComponent, MatchaDateRangeModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, MatchaDrawerComponent, MatchaDrawerContainerComponent, MatchaDrawerContentComponent, MatchaDrawerModule, MatchaDropListComponent, MatchaDropListModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHighlightComponent, MatchaHighlightModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputPhoneComponent, MatchaInputPhoneModule, MatchaLabelComponent, MatchaLazyloadComponent, MatchaLazyloadDataComponent, MatchaLazyloadModule, MatchaListComponent, MatchaListItemComponent, MatchaListModule, MatchaMaskApplierService, MatchaMaskCompatibleDirective, MatchaMaskModule, MatchaMaskPipe, MatchaMaskService, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuItemDirective, MatchaMenuModule, MatchaMenuTriggerDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaMsgBoxActionsComponent, MatchaMsgBoxComponent, MatchaMsgBoxModule, MatchaOptionComponent, MatchaOptionModule, MatchaOverlayService, MatchaPageLayoutComponent, MatchaPageLayoutModule, MatchaPaginatorComponent, MatchaPaginatorIntl, MatchaPaginatorModule, MatchaPanelComponent, MatchaPanelModule, MatchaProgressBarComponent, MatchaProgressBarModule, MatchaRadioComponent, MatchaRadioGroupComponent, MatchaRadioModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectComponent, MatchaSelectModule, MatchaSelectTriggerDirective, MatchaSkeletonComponent, MatchaSkeletonModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderComponent, MatchaSliderModule, MatchaSnackBarComponent, MatchaSnackBarModule, MatchaSnackBarService, MatchaSpinComponent, MatchaSpinModule, MatchaSpinnerComponent, MatchaSpinnerModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaStepperStateService, MatchaSubmenuTriggerDirective, MatchaTabItemComponent, MatchaTableComponent, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTextEditorComponent, MatchaTextEditorModule, MatchaTimeComponent, MatchaTimeModule, MatchaTimeRangeComponent, MatchaTimeRangeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, NEW_CONFIG, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective, buildButtonList, compatibleOptions, initialConfig, timeMasks, withoutValidation };
+export { CopyButtonComponent, INITIAL_CONFIG, MATCHA_MASK_CONFIG, MATCHA_OPTION_PARENT, MatchaAccordionComponent, MatchaAccordionContentComponent, MatchaAccordionHeaderComponent, MatchaAccordionItemComponent, MatchaAccordionModule, MatchaAutocompleteComponent, MatchaAutocompleteModule, MatchaAutocompleteTriggerDirective, MatchaAvatarComponent, MatchaAvatarModule, MatchaBreakpointObservableModule, MatchaBreakpointObserver, MatchaButtonComponent, MatchaButtonModule, MatchaButtonToggleComponent, MatchaButtonToggleModule, MatchaCardComponent, MatchaCardModule, MatchaCheckboxComponent, MatchaCheckboxModule, MatchaChipComponent, MatchaChipListComponent, MatchaChipModule, MatchaComponentsModule, MatchaDateComponent, MatchaDateModule, MatchaDateRangeComponent, MatchaDateRangeModule, MatchaDividerComponent, MatchaDividerModule, MatchaDragDirective, MatchaDragHandleDirective, MatchaDrawerComponent, MatchaDrawerContainerComponent, MatchaDrawerContentComponent, MatchaDrawerModule, MatchaDropListComponent, MatchaDropListModule, MatchaElevationDirective, MatchaElevationModule, MatchaErrorComponent, MatchaFormFieldComponent, MatchaFormFieldModule, MatchaGridComponent, MatchaGridModule, MatchaHighlightComponent, MatchaHighlightModule, MatchaHintTextComponent, MatchaHintTextModule, MatchaIconComponent, MatchaIconModule, MatchaInfiniteScrollComponent, MatchaInfiniteScrollDataComponent, MatchaInfiniteScrollModule, MatchaInputPhoneComponent, MatchaInputPhoneModule, MatchaLabelComponent, MatchaLazyloadComponent, MatchaLazyloadDataComponent, MatchaLazyloadModule, MatchaListComponent, MatchaListItemComponent, MatchaListModule, MatchaMaskApplierService, MatchaMaskCompatibleDirective, MatchaMaskModule, MatchaMaskPipe, MatchaMaskService, MatchaMasonryComponent, MatchaMasonryModule, MatchaMenuComponent, MatchaMenuItemDirective, MatchaMenuModule, MatchaMenuTriggerDirective, MatchaModalComponent, MatchaModalContentComponent, MatchaModalFooterComponent, MatchaModalHeaderComponent, MatchaModalModule, MatchaModalOptionsComponent, MatchaModalService, MatchaMsgBoxActionsComponent, MatchaMsgBoxComponent, MatchaMsgBoxModule, MatchaOptionComponent, MatchaOptionModule, MatchaOverlayService, MatchaPageLayoutComponent, MatchaPageLayoutModule, MatchaPaginatorComponent, MatchaPaginatorIntl, MatchaPaginatorModule, MatchaPanelComponent, MatchaPanelModule, MatchaProgressBarComponent, MatchaProgressBarModule, MatchaRadioComponent, MatchaRadioGroupComponent, MatchaRadioModule, MatchaRippleDirective, MatchaRippleModule, MatchaSelectComponent, MatchaSelectModule, MatchaSelectTriggerDirective, MatchaSkeletonComponent, MatchaSkeletonModule, MatchaSlideToggleComponent, MatchaSlideToggleModule, MatchaSliderComponent, MatchaSliderModule, MatchaSnackBarComponent, MatchaSnackBarModule, MatchaSnackBarService, MatchaSpinComponent, MatchaSpinModule, MatchaSpinnerComponent, MatchaSpinnerModule, MatchaStepperComponent, MatchaStepperContentComponent, MatchaStepperControllerComponent, MatchaStepperModule, MatchaStepperStateService, MatchaSubmenuTriggerDirective, MatchaTabItemComponent, MatchaTableComponent, MatchaTableModule, MatchaTabsComponent, MatchaTabsModule, MatchaTextEditorComponent, MatchaTextEditorModule, MatchaTimeComponent, MatchaTimeModule, MatchaTimeRangeComponent, MatchaTimeRangeModule, MatchaTitleComponent, MatchaTitleModule, MatchaToolbarButtonComponent, MatchaToolbarComponent, MatchaToolbarContentComponent, MatchaToolbarCustomButtonComponent, MatchaToolbarMainButtonComponent, MatchaToolbarModule, MatchaTooltipDirective, MatchaTooltipModule, NEW_CONFIG, NextStepDirective, PrevStepDirective, StepComponent, StepContentDirective, buildSunEditorConfig, compatibleOptions, initialConfig, timeMasks, withoutValidation };
 //# sourceMappingURL=matcha-components.mjs.map