@libs-ui/components-preview-text-data 0.2.350-1 → 0.2.351-0

package/fesm2022/libs-ui-components-preview-text-data.mjs

@@ -1,31 +1,20 @@
 import * as i0 from '@angular/core';
-import { signal, computed, input, model, output, viewChild, inject, ChangeDetectionStrategy, Component } from '@angular/core';
-import { cpp } from '@codemirror/lang-cpp';
-import { css } from '@codemirror/lang-css';
-import { go } from '@codemirror/lang-go';
-import { html } from '@codemirror/lang-html';
-import { java } from '@codemirror/lang-java';
-import { javascript } from '@codemirror/lang-javascript';
-import { json } from '@codemirror/lang-json';
-import { markdown } from '@codemirror/lang-markdown';
-import { php } from '@codemirror/lang-php';
-import { python } from '@codemirror/lang-python';
-import { sql } from '@codemirror/lang-sql';
-import { xml } from '@codemirror/lang-xml';
-import { yaml } from '@codemirror/lang-yaml';
-import { StreamLanguage } from '@codemirror/language';
-import { linter, lintGutter } from '@codemirror/lint';
-import { Compartment, EditorState } from '@codemirror/state';
-import { lineNumbers } from '@codemirror/view';
+import { signal, inject, DestroyRef, computed, input, model, output, viewChild, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { lintGutter, linter } from '@codemirror/lint';
+import { Compartment } from '@codemirror/state';
+import { EditorView, lineNumbers } from '@codemirror/view';
 import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
 import { LibsUiComponentsDropdownComponent } from '@libs-ui/components-dropdown';
 import { LibsUiNotificationService } from '@libs-ui/services-notification';
 import { UtilsHttpParamsRequest, get } from '@libs-ui/utils';
-import { EditorView, basicSetup } from 'codemirror';
-import { Parser } from 'node-sql-parser';
+import { basicSetup } from 'codemirror6';
 import { returnListObject } from '@libs-ui/services-http-request';
 
-const optionsLang = () => [
+/**
+ * Danh sách các ngôn ngữ được hỗ trợ
+ * Sử dụng const array để tránh tạo mới mỗi lần truy cập
+ */
+const optionsLangData = [
     { id: 'text', label: 'Plain Text' },
     { id: 'javascript', label: 'JavaScript/TypeScript' },
     { id: 'html', label: 'HTML' },
@@ -45,7 +34,7 @@ const httpRequestConfigGetOptionsLang = () => {
     return {
         type: 'text',
         httpRequestData: signal({
-            objectInstance: returnListObject(optionsLang()),
+            objectInstance: returnListObject([...optionsLangData]),
             functionName: 'list',
             argumentsValue: [new UtilsHttpParamsRequest({ fromObject: { page: 1, per_page: 40 } })],
         }),
@@ -55,146 +44,311 @@ const httpRequestConfigGetOptionsLang = () => {
         }),
     };
 };
+const languageRegistry = {
+    javascript: {
+        loader: async () => {
+            const { javascript } = await import('@codemirror/lang-javascript');
+            return javascript({ jsx: true, typescript: true });
+        },
+        linter: async (component) => component.createJsLinter(),
+    },
+    html: {
+        loader: async () => {
+            const { html } = await import('@codemirror/lang-html');
+            return html();
+        },
+    },
+    css: {
+        loader: async () => {
+            const { css } = await import('@codemirror/lang-css');
+            return css();
+        },
+    },
+    markdown: {
+        loader: async () => {
+            const { markdown } = await import('@codemirror/lang-markdown');
+            return markdown();
+        },
+    },
+    json: {
+        loader: async () => {
+            const { json } = await import('@codemirror/lang-json');
+            return json();
+        },
+        linter: async (component) => component.createJsonLinter(),
+    },
+    sql: {
+        loader: async () => {
+            const { sql } = await import('@codemirror/lang-sql');
+            return sql();
+        },
+        linter: async (component) => component.createSqlLinter(),
+    },
+    xml: {
+        loader: async () => {
+            const { xml } = await import('@codemirror/lang-xml');
+            return xml();
+        },
+    },
+    yaml: {
+        loader: async () => {
+            const { yaml } = await import('@codemirror/lang-yaml');
+            return yaml();
+        },
+    },
+    python: {
+        loader: async () => {
+            const { python } = await import('@codemirror/lang-python');
+            return python();
+        },
+    },
+    java: {
+        loader: async () => {
+            const { java } = await import('@codemirror/lang-java');
+            return java();
+        },
+    },
+    cpp: {
+        loader: async () => {
+            const { cpp } = await import('@codemirror/lang-cpp');
+            return cpp();
+        },
+    },
+    php: {
+        loader: async () => {
+            const { php } = await import('@codemirror/lang-php');
+            return php();
+        },
+    },
+    go: {
+        loader: async () => {
+            const { go } = await import('@codemirror/lang-go');
+            return go();
+        },
+    },
+};
+/**
+ * Tạo default language extension cho plain text
+ * Sử dụng khi ngôn ngữ không được hỗ trợ
+ */
+const createDefaultLanguage = async () => {
+    const { StreamLanguage } = await import('@codemirror/language');
+    return StreamLanguage.define({
+        token(stream) {
+            stream.skipToEnd();
+            return null;
+        },
+    });
+};
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const sqlParser = new Parser();
 class LibsUiComponentsPreviewTextDataComponent {
+    // ==========================================================================
+    // PRIVATE PROPERTIES
+    // ==========================================================================
     editorViewInstance;
     wrapCompartment = new Compartment();
     languageCompartment = new Compartment();
     lineNumberCompartment = new Compartment();
+    linterCompartment = new Compartment();
+    /** Cache để tránh load lại language đã load */
+    languageCache = new Map();
+    /** Flag để tránh update editor khi đang khởi tạo */
+    isInitialized = false;
+    // ==========================================================================
+    // INJECTED SERVICES
+    // ==========================================================================
+    notificationService = inject(LibsUiNotificationService);
+    destroyRef = inject(DestroyRef);
+    // ==========================================================================
+    // PROTECTED SIGNALS
+    // ==========================================================================
     isWrap = signal(true);
     configLoadDataIsHttpConfig = httpRequestConfigGetOptionsLang();
-    labelLang = computed(() => optionsLang().find((item) => item.id === this.langSelected())?.label);
-    content = input('', { transform: (value) => value ?? '' });
+    labelLang = computed(() => optionsLangData.find((item) => item.id === this.langSelected())?.label);
+    // ==========================================================================
+    // INPUTS
+    // ==========================================================================
+    content = input('', {
+        transform: (value) => value ?? '',
+    });
     langSelected = model.required();
-    editable = input(false, { transform: (value) => value ?? false });
-    hiddenAction = input(false, { transform: (value) => value ?? false });
+    editable = input(false, {
+        transform: (value) => value ?? false,
+    });
+    hiddenAction = input(false, {
+        transform: (value) => value ?? false,
+    });
     lintIgnorePatterns = input(['Cannot use import statement outside a module', 'Unexpected token export', 'import ', '@angular/core'], {
         transform: (value) => value ?? ['Cannot use import statement outside a module', 'Unexpected token export', 'import ', '@angular/core'],
     });
-    background = input('#f8f9fa', { transform: (value) => value ?? '#f8f9fa' });
+    background = input('#f8f9fa', {
+        transform: (value) => value ?? '#f8f9fa',
+    });
+    // ==========================================================================
+    // OUTPUTS
+    // ==========================================================================
     outChange = output();
     syntaxErrors = output();
+    // ==========================================================================
+    // VIEW CHILDREN
+    // ==========================================================================
     containerPreview = viewChild.required('containerPreview');
-    notificationService = inject(LibsUiNotificationService);
-    ngAfterViewInit() {
-        this.editorViewInstance = new EditorView({ ...this.getExtensionsByLanguage(this.langSelected()), doc: this.content(), parent: this.containerPreview().nativeElement });
+    // ==========================================================================
+    // CONSTRUCTOR - Setup effects
+    // ==========================================================================
+    constructor() {
+        // Effect để sync content từ input vào editor
+        effect(() => {
+            const newContent = this.content();
+            if (this.isInitialized && this.editorViewInstance) {
+                const currentContent = this.editorViewInstance.state.doc.toString();
+                if (newContent !== currentContent) {
+                    this.editorViewInstance.dispatch({
+                        changes: {
+                            from: 0,
+                            to: currentContent.length,
+                            insert: newContent,
+                        },
+                    });
+                }
+            }
+        });
+        // Cleanup khi component bị destroy
+        this.destroyRef.onDestroy(() => {
+            this.editorViewInstance?.destroy();
+            this.languageCache.clear();
+        });
     }
-    getExtensionsByLanguage(lang) {
-        let formatByLangFunction = StreamLanguage.define({
-            token(stream) {
-                stream.skipToEnd();
-                return null;
-            },
+    // ==========================================================================
+    // LIFECYCLE HOOKS
+    // ==========================================================================
+    async ngAfterViewInit() {
+        await this.initializeEditor();
+        this.isInitialized = true;
+    }
+    // ==========================================================================
+    // PRIVATE METHODS - Editor initialization
+    // ==========================================================================
+    /**
+     * Khởi tạo editor với các extensions cơ bản
+     * Language được load async để tối ưu bundle size
+     */
+    async initializeEditor() {
+        const languageExtension = await this.loadLanguageExtension(this.langSelected());
+        const linterExtension = await this.loadLinterExtension(this.langSelected());
+        this.editorViewInstance = new EditorView({
+            doc: this.content(),
+            parent: this.containerPreview().nativeElement,
+            extensions: this.createExtensions(languageExtension, linterExtension),
         });
-        let lintFunction = linter(() => []);
+    }
+    /**
+     * Tạo danh sách extensions cho editor
+     */
+    createExtensions(languageExtension, linterExtension) {
+        return [
+            basicSetup,
+            this.languageCompartment.of(languageExtension),
+            this.linterCompartment.of(linterExtension),
+            this.createLightTheme(),
+            EditorView.editable.of(this.editable()),
+            this.wrapCompartment.of(EditorView.lineWrapping),
+            this.lineNumberCompartment.of(lineNumbers()),
+            lintGutter(),
+            this.createBracketTheme(),
+            this.createUpdateListener(),
+        ];
+    }
+    /**
+     * Load language extension với caching
+     * Mỗi language chỉ được load 1 lần
+     */
+    async loadLanguageExtension(lang) {
         const lowerLang = lang.toLowerCase();
-        switch (lowerLang) {
-            case 'javascript':
-                formatByLangFunction = javascript({ jsx: true, typescript: true });
-                lintFunction = this.jsLinterFn();
-                break;
-            case 'html':
-                formatByLangFunction = html();
-                break;
-            case 'css':
-                formatByLangFunction = css();
-                break;
-            case 'markdown':
-                formatByLangFunction = markdown();
-                break;
-            case 'json':
-                formatByLangFunction = json();
-                lintFunction = this.jsonLinterFn();
-                break;
-            case 'sql':
-                formatByLangFunction = sql();
-                lintFunction = this.sqlLinterFn();
-                break;
-            case 'xml':
-                formatByLangFunction = xml();
-                break;
-            case 'yaml':
-                formatByLangFunction = yaml();
-                break;
-            case 'python':
-                formatByLangFunction = python();
-                break;
-            case 'java':
-                formatByLangFunction = java();
-                break;
-            case 'cpp':
-                formatByLangFunction = cpp();
-                break;
-            case 'php':
-                formatByLangFunction = php();
-                break;
-            case 'go':
-                formatByLangFunction = go();
-                break;
+        const cached = this.languageCache.get(lowerLang);
+        if (cached) {
+            return cached;
         }
-        return {
-            extensions: [
-                basicSetup,
-                this.languageCompartment.of(formatByLangFunction),
-                this.lightTheme(),
-                EditorView.editable.of(this.editable()),
-                this.wrapCompartment.of(EditorView.lineWrapping),
-                this.lineNumberCompartment.of(lineNumbers()),
-                lintGutter(),
-                this.customBracketTheme(),
-                lintFunction,
-                EditorView.updateListener.of((update) => {
-                    if (update.docChanged && this.editable()) {
-                        const newValue = update.state.doc.toString();
-                        this.outChange.emit({
-                            content: newValue,
-                            isWrap: this.isWrap(),
-                            language: this.langSelected(),
-                            contextChange: 'content',
-                        });
-                    }
-                }),
-            ],
-        };
+        const registryItem = languageRegistry[lowerLang];
+        const extension = registryItem ? await registryItem.loader() : await createDefaultLanguage();
+        this.languageCache.set(lowerLang, extension);
+        return extension;
     }
-    lightTheme() {
+    /**
+     * Load linter extension nếu có
+     */
+    async loadLinterExtension(lang) {
+        const lowerLang = lang.toLowerCase();
+        const registryItem = languageRegistry[lowerLang];
+        if (registryItem?.linter) {
+            return registryItem.linter(this);
+        }
+        return linter(() => []);
+    }
+    // ==========================================================================
+    // PRIVATE METHODS - Theme configuration
+    // ==========================================================================
+    createLightTheme() {
         return EditorView.theme({
             '&': { backgroundColor: this.background(), color: '#333' },
             '.cm-content': { caretColor: '#111' },
             '.cm-activeLine': { backgroundColor: '#f0f0f0' },
         });
     }
-    customBracketTheme() {
+    createBracketTheme() {
         return EditorView.theme({
             '.cm-matchingBracket': {
-                backgroundColor: 'rgba(100, 200, 255, 0.15)', // xanh nhẹ trong suốt
+                backgroundColor: 'rgba(100, 200, 255, 0.15)',
                 border: '1px solid rgba(100, 200, 255, 0.4)',
                 borderRadius: '3px',
                 transition: 'all 0.2s ease',
             },
             '.cm-nonmatchingBracket': {
-                backgroundColor: 'rgba(255, 100, 100, 0.15)', // đỏ nhẹ
+                backgroundColor: 'rgba(255, 100, 100, 0.15)',
                 border: '1px solid rgba(255, 100, 100, 0.3)',
                 borderRadius: '3px',
             },
         });
     }
-    jsLinterFn() {
+    // ==========================================================================
+    // PRIVATE METHODS - Update listener
+    // ==========================================================================
+    createUpdateListener() {
+        return EditorView.updateListener.of((update) => {
+            if (update.docChanged && this.editable()) {
+                const newValue = update.state.doc.toString();
+                this.outChange.emit({
+                    content: newValue,
+                    isWrap: this.isWrap(),
+                    language: this.langSelected(),
+                    contextChange: 'content',
+                });
+            }
+        });
+    }
+    // ==========================================================================
+    // PUBLIC METHODS - Linter factories (được gọi từ registry)
+    // ==========================================================================
+    /**
+     * Tạo JavaScript linter
+     * Sử dụng Function constructor để validate syntax
+     */
+    createJsLinter() {
         return linter((view) => {
             const text = view.state.doc.toString();
             const diagnostics = [];
             try {
-                new Function(text); // test parse code
+                new Function(text);
             }
             catch (err) {
-                if (!this.lintIgnorePatterns().some((pattern) => err.message.includes(pattern))) {
+                const message = get(err, 'message', '');
+                const shouldIgnore = this.lintIgnorePatterns().some((pattern) => message.includes(pattern));
+                if (!shouldIgnore) {
                     diagnostics.push({
                         from: 0,
                         to: text.length,
                         severity: 'error',
-                        message: err.message,
+                        message,
                     });
                     this.syntaxErrors.emit(diagnostics);
                 }
@@ -202,7 +356,11 @@ class LibsUiComponentsPreviewTextDataComponent {
             return diagnostics;
         });
     }
-    jsonLinterFn() {
+    /**
+     * Tạo JSON linter
+     * Sử dụng JSON.parse để validate
+     */
+    createJsonLinter() {
         return linter((view) => {
             const text = view.state.doc.toString();
             const diagnostics = [];
@@ -221,11 +379,18 @@ class LibsUiComponentsPreviewTextDataComponent {
             return diagnostics;
         });
     }
-    sqlLinterFn() {
-        return linter((view) => {
+    /**
+     * Tạo SQL linter
+     * Lazy load node-sql-parser chỉ khi cần
+     */
+    createSqlLinter() {
+        return linter(async (view) => {
             const text = view.state.doc.toString();
             const diagnostics = [];
             try {
+                // Lazy load SQL parser chỉ khi thực sự cần
+                const { Parser } = await import('node-sql-parser');
+                const sqlParser = new Parser();
                 sqlParser.astify(text);
             }
             catch (err) {
@@ -240,36 +405,50 @@ class LibsUiComponentsPreviewTextDataComponent {
             return diagnostics;
         });
     }
+    // ==========================================================================
+    // PROTECTED METHODS - Event handlers
+    // ==========================================================================
     handlerCopy() {
         navigator.clipboard.writeText(this.content() || '');
         this.notificationService.showCompTypeTextInfo('Sao chép thành công');
     }
     handlerLineWrap() {
+        console.log('handlerLineWrap', this.isWrap());
+        // Lấy nội dung mới nhất từ editor sau khi đã xóa newlines
+        const currentContent = this.editorViewInstance?.state.doc.toString() || '';
+        const updatedContent = this.isWrap() && currentContent ? currentContent.replace(/\n/g, ' ') : this.content();
         this.isWrap.update((val) => !val);
+        console.log('updatedContent', this.isWrap());
+        console.log('currentContent', currentContent);
+        console.log('updatedContent', updatedContent);
+        if (currentContent !== updatedContent) {
+            this.editorViewInstance?.dispatch({
+                changes: { from: 0, to: currentContent.length, insert: updatedContent },
+            });
+        }
+        // Batch cả 2 dispatch thành 1 để tối ưu performance
         this.editorViewInstance?.dispatch({
-            effects: this.wrapCompartment.reconfigure(this.isWrap() ? EditorView.lineWrapping : []),
-        });
-        this.editorViewInstance?.dispatch({
-            effects: this.lineNumberCompartment.reconfigure(this.isWrap() ? lineNumbers() : [] // 👈 nếu tắt thì remove extension
-            ),
+            effects: [this.wrapCompartment.reconfigure(this.isWrap() ? EditorView.lineWrapping : []), this.lineNumberCompartment.reconfigure(this.isWrap() ? lineNumbers() : [])],
         });
         this.outChange.emit({
-            content: this.content(),
+            content: updatedContent,
             isWrap: this.isWrap(),
             language: this.langSelected(),
             contextChange: 'isWrap',
         });
     }
-    handlerSelectKey(data) {
-        if (!data || !data.key) {
+    async handlerSelectKey(data) {
+        if (!data?.key) {
             return;
         }
-        this.langSelected.set(data.key);
-        const extensions = this.getExtensionsByLanguage(this.langSelected());
-        this.editorViewInstance?.setState(EditorState.create({
-            doc: this.editorViewInstance?.state.doc.toString(),
-            ...extensions,
-        }));
+        const newLang = data.key;
+        this.langSelected.set(newLang);
+        // Load language và linter mới
+        const [languageExtension, linterExtension] = await Promise.all([this.loadLanguageExtension(newLang), this.loadLinterExtension(newLang)]);
+        // Reconfigure thay vì tạo mới state để giữ lại document content
+        this.editorViewInstance?.dispatch({
+            effects: [this.languageCompartment.reconfigure(languageExtension), this.linterCompartment.reconfigure(linterExtension)],
+        });
         this.outChange.emit({
             content: this.content(),
             isWrap: this.isWrap(),
@@ -283,11 +462,11 @@ class LibsUiComponentsPreviewTextDataComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsPreviewTextDataComponent, decorators: [{
             type: Component,
             args: [{ selector: 'libs_ui-components-preview_text_data', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LibsUiComponentsDropdownComponent, LibsUiComponentsButtonsButtonComponent], template: "<div\n  class=\"libs-ui-preview-data-container flex flex-col w-full h-auto rounded-[8px] libs-ui-border-general px-[8px]\"\n  [style.--background-color]=\"background()\"\n  [class.pt-[8px]]=\"!hiddenAction()\">\n  @if (!hiddenAction()) {\n    <div class=\"flex items-center content-between color-[#6a7383]\">\n      <libs_ui-components-dropdown\n        classInclude=\"w-[200px]\"\n        [listConfig]=\"configLoadDataIsHttpConfig\"\n        [listMaxItemShow]=\"5\"\n        [isNgContent]=\"true\"\n        [readonly]=\"!editable()\"\n        [listHasButtonUnSelectOption]=\"false\"\n        (outSelectKey)=\"handlerSelectKey($event)\">\n        <libs_ui-components-buttons-button\n          [type]=\"'button-link-third'\"\n          [label]=\"labelLang() || ''\"\n          [sizeButton]=\"'small'\"\n          [classIconRight]=\"editable() ? 'libs-ui-icon-move-right rotate-90' : ''\"\n          [classInclude]=\"'!p-[0px]' + (editable() ? '' : '!pointer-events-none !cursor-default hover:!text-[#6A7383]')\" />\n      </libs_ui-components-dropdown>\n      <div class=\"flex items-center\">\n        <libs_ui-components-buttons-button\n          [type]=\"'button-link-third'\"\n          [label]=\"isWrap() ? 'i18n_remove_line_wrap' : 'i18n_line_wrap'\"\n          [sizeButton]=\"'small'\"\n          [classIconLeft]=\"isWrap() ? 'libs-ui-icon-unwrap' : 'libs-ui-icon-wrap'\"\n          [classInclude]=\"'mo-lib-p-0px mo-lib-mr-16px'\"\n          (outClick)=\"handlerLineWrap()\" />\n        <libs_ui-components-buttons-button\n          [type]=\"'button-link-third'\"\n          [label]=\"'i18n_copy'\"\n          [sizeButton]=\"'small'\"\n          [classIconLeft]=\"'libs-ui-icon-copy'\"\n          [classInclude]=\"'mo-lib-p-0px'\"\n          (outClick)=\"handlerCopy()\" />\n      </div>\n    </div>\n  }\n  <div #containerPreview></div>\n</div>\n", styles: [":host ::ng-deep .libs-ui-preview-data-container{background-color:var(--background-color)!important}:host ::ng-deep .libs-ui-preview-data-container .cm-line{white-space:pre-wrap}:host ::ng-deep .libs-ui-preview-data-container .cm-lintRange-error{background-color:#ff323233;border-bottom:2px solid red}:host ::ng-deep .libs-ui-preview-data-container .cm-lintRange-warning{background-color:#ffc80026}:host ::ng-deep .libs-ui-preview-data-container .cm-tooltip-lint{background:#fff8f8;color:#d32f2f;border:1px solid #f44336;padding:8px 10px;font-size:13px;font-family:Inter,sans-serif;border-radius:6px;box-shadow:0 2px 8px #ff000026}:host ::ng-deep .libs-ui-preview-data-container .cm-focused{outline:none!important}:host ::ng-deep .libs-ui-preview-data-container .cm-gutters{background-color:var(--background-color)!important}\n"] }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { LibsUiComponentsPreviewTextDataComponent, httpRequestConfigGetOptionsLang, optionsLang };
+export { LibsUiComponentsPreviewTextDataComponent, createDefaultLanguage, httpRequestConfigGetOptionsLang, languageRegistry, optionsLangData };
 //# sourceMappingURL=libs-ui-components-preview-text-data.mjs.map