Chúng tôi mở mã nguồn thứ mình dùng mỗi ngày.

Gần như mọi hệ thống nội bộ đều có một chỗ cần nhập nội dung có định dạng: CMS, knowledge base, form hỗ trợ, soạn email. Các lựa chọn quen thuộc đều kèm một chi phí: Summernote cần jQuery, TinyMCE và Froala thu phí cho tính năng nâng cao, và tất cả đều nặng cho một component xuất hiện ở khắp sản phẩm. Autumn Note viết bằng vanilla JavaScript thuần ES2022, build ra cả ES Module (tree-shakeable) và UMD dùng trực tiếp qua thẻ script, kèm TypeScript definitions. Từ v2.1.0, package import được trong môi trường server-side rendering — trước đó việc đọc `navigator` ngay khi nạp module làm `import` báo lỗi trên Node, khiến hai wrapper React và Vue không dùng được với Next.js và Nuxt.

• Markdown shortcuts — gõ #, > hoặc - rồi dấu cách là tự thành heading, blockquote, danh sách
• Bubble toolbar nổi ngay trên đoạn văn bản đang chọn, giảm khoảng cách mắt phải di chuyển
• @mention autocomplete qua callback onSearch — tag người dùng hoặc liên kết đến một thực thể trong hệ thống
• Find & Replace có chế độ regex (Ctrl+F / Ctrl+H) — thường thiếu ở các editor nhẹ
• Sanitizer DOM-based chạy khi paste, khi setHTML() và trước khi export — chặn <script>, thuộc tính on*, URL javascript:
• Từ v2.1.0 sanitizer chặn thêm hai lớp mutation-XSS: thẻ animation trong SVG (<animate> và họ hàng, vốn ghi đè thuộc tính *sau* khi lọc xong) và các điểm chuyển namespace của MathML; lọc URL mở rộng sang poster, background và srcset — srcset kiểm từng ứng viên một
• Toolbar là một điểm dừng Tab duy nhất thay vì 39, nhờ role="toolbar" và roving tabindex; nút bật/tắt phát aria-pressed để trình đọc màn hình biết trạng thái
• Auto-save vào localStorage kèm banner khôi phục, crop và resize ảnh inline — tay cầm resize chạy trên pointer event nên dùng được cả bằng cảm ứng và bút
• 8 locale sẵn có gồm tiếng Việt; từ v2.0.0 import riêng từng locale qua autumnnote/i18n/vi kèm type declaration
• Bản dựng tối giản autumnnote/core (v2.5.0) — chỉ nạp những module thật sự dùng, thay vì kéo theo cả 23 module kể cả khi chỉ cần in đậm và in nghiêng
• Bộ chuyển đổi Markdown và bộ lọc HTML xuất ra ngoài (v2.5.0): markdownToHTML, htmlToMarkdown, sanitiseHTML dùng được mà không cần DOM — chạy được trên máy chủ hoặc trong bước dựng
• onImageUpload nhận lại URL sau khi tải lên (v2.5.0) — editor hiện ảnh tạm ngay rồi tự thay bằng URL thật, thay vì để mỗi tích hợp tự chèn
• cspNonce cho hai tệp tải từ CDN tuỳ chọn (v2.7.0), nên editor dùng được dưới chính sách bảo mật nội dung nghiêm ngặt

Phiên bản

v2.7.1

Giấy phép

MIT

Dependency

0

Bản phát hành

48

Phát hành đầu

2026-03-31

Cập nhật

2026-08-20

Thay thế cho: Summernote · Quill · TinyMCE · Froala · CKEditor

npm install autumnnote

import AutumnNote from "autumnnote";

const editor = AutumnNote.create("#editor", { height: 300 });
editor.setHTML("<p>Xin chào</p>");

Select2 phục vụ cộng đồng web nhiều năm, nhưng dựa trên jQuery — một ràng buộc ngày càng khó chấp nhận với stack hiện đại. Forge Select viết lại bài toán đó bằng TypeScript strict, không phụ thuộc runtime, và giữ đủ tính năng cho sản phẩm thật: virtual scroll tự bật với danh sách lớn, tree select cascading, tags mode, AJAX có debounce và phân trang infinite-scroll, kéo-thả để sắp xếp tag đã chọn. Nhánh v0.7 tập trung vào những chỗ chỉ lộ ra ở quy mô thật — nhập liệu qua bộ gõ tiếng Việt, danh sách vài nghìn dòng, và nguồn dữ liệu từ xa có độ trễ.

• Virtual scrolling tự động cho danh sách lớn, có cache render theo từng option
• Tree select — option lồng nhau, expand/collapse, chọn nhiều theo tầng cha-con
• Nguồn dữ liệu async: AJAX có debounce, phân trang infinite-scroll theo số trang hoặc theo cursor (v0.7.0)
• Ô tìm kiếm và ô nhập tag an toàn với bộ gõ (IME) — không cắt chữ giữa chừng khi gõ tiếng Việt (v0.7.0)
• Chính sách xử lý dữ liệu khai báo được: missingSelectionPolicy quyết định số phận giá trị đã chọn khi setData() không còn nó, duplicateValuePolicy quyết định cách xử lý option trùng value (v0.7.0)
• createOption chạy được bất đồng bộ và huỷ được — trả về undefined là từ chối tạo tag; kèm hook sanitizeTemplate cho template trả về chuỗi HTML (v0.7.0)
• Điều hướng bàn phím và ARIA đầy đủ; kéo-thả sắp xếp tag bằng chuột, cảm ứng, hoặc Alt+←/→
• Theme hoàn toàn bằng CSS custom properties, có dark mode sẵn
• i18n en/vi tích hợp, plugin API với lifecycle onInit/onOpen/onClose/onDestroy
• maxVisibleTags gộp phần chọn vượt mức thành một chip "+N" (v0.9.0) — chọn 10.000 mục giảm từ 254 xuống 55 mili giây vì kích thước ô điều khiển thôi tăng theo số đã chọn
• Chọn hàng loạt từ độ phức tạp bậc hai xuống tuyến tính (v0.8.0): setValue() trên 8.000 giá trị giảm từ 492 xuống 44 mili giây, trên 16.000 giá trị từ 1.782 xuống 60
• Hỗ trợ chế độ tương phản cao của Windows và tôn trọng thiết lập giảm chuyển động; có màu dự phòng cho trình duyệt chưa hỗ trợ color-mix(), hạ sàn xuống Chrome 87, Firefox 78, Safari 14.1 (v0.8.0)
• Dùng thẳng qua thẻ <script> từ CDN (v0.8.0) — có bản IIFE cùng khai báo unpkg và jsdelivr, cho dự án chưa có bước dựng

Phiên bản

v0.9.1

Giấy phép

MIT

Dependency

0

Bản phát hành

16

Phát hành đầu

2026-07-13

Cập nhật

2026-09-04

Thay thế cho: Select2

npm install forge-select

import ForgeSelect from "forge-select";
import "forge-select/styles.css";

new ForgeSelect("#country", { placeholder: "Chọn quốc gia" });

Hộp thoại sẵn có của trình duyệt — `alert`, `confirm`, `prompt` — chặn toàn bộ trang khi đang mở và không đổi được giao diện. Các thư viện thay thế thì thường kéo theo cả một framework hoặc gộp mọi tính năng vào một gói. Forge Dialog viết bằng TypeScript strict, không phụ thuộc runtime, và dựng trên thẻ `<dialog>` gốc để trình duyệt tự đưa hộp thoại lên tầng trên cùng thay vì phải tranh z-index với phần còn lại của trang. Bộ nối cho React, Vue, Svelte và Web Component nằm ngay trong cùng một gói dưới dạng đường nhập con, nên không phải cài thêm gói nào.

• Dựng trên thẻ <dialog> gốc nên nằm ở tầng trên cùng của trình duyệt — không bị phần tử khác che, không cần dò z-index
• API trả về promise thay cho hộp thoại chặn trang: const ok = await confirm("Xoá mục này?")
• Mười bốn đường nhập tách theo tính năng — forgedialog/alert chỉ kéo theo phần cần cho alert, không kéo theo phần còn lại
• Bộ nối React, Vue, Svelte và Web Component nằm trong cùng gói (forgedialog/react, /vue, /svelte, /web-component), không phải cài thêm
• Mặc định an toàn: chuỗi content hiện ra dạng chữ; muốn chèn HTML phải tự khai báo bộ lọc qua sanitizeHtml, còn unsafeHtml phải gọi đúng tên mới dùng được
• Không chỉ hộp thoại: ngăn kéo, bottom sheet, xem ảnh phóng to, thông báo nổi, bảng lệnh, và trình hướng dẫn nhiều bước có nhớ trạng thái
• Tùy biến giao diện theo từng hộp thoại — màu và độ mờ tách riêng cho nền, tiêu đề, nội dung và viền; bo góc từng góc; đổ bóng dựng từ góc chiếu và khoảng cách
• Kéo di chuyển được bằng chuột hoặc bàn phím, giới hạn trong khung nhìn, nhớ vị trí; hiệu ứng tôn trọng thiết lập giảm chuyển động của hệ điều hành

Phiên bản

v0.7.0

Giấy phép

MIT

Dependency

0

Bản phát hành

1

Phát hành đầu

2026-09-01

Cập nhật

2026-09-01

Thay thế cho: window.confirm · SweetAlert2 · Bootstrap Modal

npm install forgedialog

import { confirm } from "forgedialog";
import "forgedialog/style.css";

const ok = await confirm("Xoá mục này?", { title: "Xác nhận" });

Không phải một thư viện — một extension nhỏ chúng tôi dùng hằng ngày và mở mã nguồn cùng lý do như ba thư viện trên. Bảng màu cam/amber/copper cân bằng bởi steel blue, slate teal, violet; semantic highlighting đầy đủ cho TypeScript, Python, Rust, Go, C#; hai biến thể High Contrast bỏ hẳn italic để ưu tiên độ dễ đọc.

• 4 biến thể trong một extension: Dark, Light, Dark High Contrast, Light High Contrast
• Semantic highlighting qua LSP — màu theo ý nghĩa (biến, tham số, type, namespace), không chỉ theo cú pháp
• Bracket pair colorization xoay vòng hue cam → amber → steel blue → slate teal → violet → copper
• Mọi màu cú pháp đạt tương phản WCAG AA 4,5:1 so với nền của nó
• Từ v1.1.0, cân bằng bảng màu được đo chứ không ước lượng: các bản trước trôi dần sang tông lạnh — vai trò màu ấm từ 50% số phạm vi cú pháp xuống còn 34% mà không kiểm tra cấu trúc nào bắt được, vì cả bốn biến thể trôi cùng nhau

Phiên bản

v1.1.0

Giấy phép

MIT

Bản phát hành

13

Phát hành đầu

2026-07-07

Cập nhật

2026-08-02

code --install-extension KonexForge.konexforge-themes

# Command Palette → "Preferences: Color Theme"
# → KonexForge Dark | Light | Dark HC | Light HC