Leandix Atlas

Extension VS Code để mở, chỉnh sửa và lưu file .docx ngay trong editor — không cần Word. Được xây dựng trên nền Tiptap, hỗ trợ định dạng văn bản phong phú, xem PDF, và chuyển đổi qua lại giữa Markdown và Word.

Tính năng

Trình soạn thảo DOCX

• Mở và lưu file .docx trực tiếp trong VS Code (Ctrl+S)
• Giao diện soạn thảo trực quan với thanh toolbar đầy đủ chức năng
• Phân trang thực sự — xem trước bố cục đúng như khi in

Định dạng văn bản

• Ký tự: font chữ (26 system font + 12 Google Font), cỡ chữ (6–1638pt), màu chữ, màu nền, đậm, nghiêng, gạch chân, gạch ngang, superscript, subscript
• Đoạn văn: căn lề (trái/phải/giữa/đều hai bên), thụt đầu dòng, hanging indent, giãn dòng (presets + tùy chỉnh), khoảng cách trước/sau đoạn
• Tiêu đề: H1–H6
• Danh sách: bullet list và numbered list, tùy chỉnh kiểu và thụt lề

Bảng biểu

• Chèn bảng qua bộ chọn lưới
• Kéo thay đổi kích thước cột và hàng
• Toolbar riêng cho bảng: merge cell, thêm/xóa hàng/cột, tùy chỉnh viền

Chèn nội dung

• Hình ảnh: chèn từ máy tính hoặc URL (PNG, JPEG, GIF, WebP, SVG)
• Hyperlink: thêm, sửa, xóa liên kết
• Code block: syntax highlighting (Lowlight/Highlight.js)
• Ký tự đặc biệt: bảng chọn ký tự unicode
• Page break: ngắt trang thủ công

Trang và bố cục

• Thiết lập kích thước trang: A3, A4, A5, Letter, Legal, hoặc tùy chỉnh
• Preset lề: Normal, Narrow, Wide, hoặc nhập tay
• Thước kẻ (ruler) hiển thị vùng nội dung và lề
• Header / Footer có thể chỉnh sửa, hỗ trợ biến {page} và {total}
• Zoom 50%–200% (bước 10%)

Comments

• Xem và quản lý comment từ file DOCX gốc
• Panel comment riêng với hỗ trợ reply

Tìm kiếm & Thay thế

• Find & Replace với panel riêng trong editor

Slash Commands

• Gõ / trong editor để mở menu chèn nhanh các loại block

Xem PDF

• Mở file .pdf trực tiếp trong VS Code với viewer tích hợp
• Điều hướng trang, zoom, toolbar riêng cho PDF

Chuyển đổi định dạng

• Markdown → Word: click chuột phải trên file .md → Leandix: Convert Markdown to Word
• Word → Markdown: click chuột phải trong editor DOCX → Leandix: Convert Word to Markdown
• DOCX → PDF: xuất tài liệu sang PDF qua headless Chrome/Edge (yêu cầu cài đặt một trong hai trình duyệt)

Giao diện

• Tự động theo theme sáng/tối của VS Code
• Sidebar Control Panel với nút tạo file mới và mở file

Cài đặt

Từ file .vsix

1. Tải file .vsix từ Releases
2. Trong VS Code: Extensions → ... → Install from VSIX...
3. Chọn file vừa tải

Từ Marketplace

Tìm "Leandix Atlas" trong VS Code Extensions Marketplace (publisher: leandix).

Sử dụng

Yêu cầu hệ thống

• VS Code phiên bản 1.90.0 trở lên
• Node.js (chỉ khi build từ source)
• Microsoft Edge hoặc Google Chrome — chỉ cần thiết khi sử dụng tính năng xuất PDF

Build từ Source

# Cài dependencies
npm install

# Build tất cả (extension + webview + pdf-webview)
npm run build

# Hoặc build từng phần
npm run build:extension
npm run build:webview
npm run build:pdf-webview

# Watch mode khi phát triển
npm run watch:extension
npm run watch:webview

# Chạy test
npm test

# Đóng gói thành file .vsix
npm run build:vsix

Cấu trúc dự án

src/
├── extension/          # Extension host (Node.js)
│   ├── extension.ts              # Entry point, đăng ký providers & commands
│   ├── LeandixEditorProvider.ts  # Custom editor cho .docx
│   ├── PdfViewerProvider.ts      # Viewer cho .pdf
│   ├── LeandixSidebarProvider.ts # Sidebar control panel
│   ├── DocxParser.ts             # Parse .docx → HTML (via mammoth)
│   ├── DocxSerializer.ts         # Serialize HTML → .docx (via docx)
│   ├── MarkdownParser.ts         # Parse Markdown → HTML
│   ├── MarkdownSerializer.ts     # Serialize HTML → Markdown
│   ├── ConversionCommands.ts     # Lệnh chuyển đổi MD ↔ DOCX
│   ├── DocumentManager.ts        # Quản lý state và file watcher
│   └── FileConflictHandler.ts    # Xử lý xung đột khi ghi file
├── webview/            # Giao diện editor (React + Tiptap)
│   ├── App.tsx                   # Root component
│   ├── components/               # Toolbar, dialogs, panels, node views
│   ├── extensions/               # Tiptap custom extensions
│   └── hooks/                    # Custom React hooks
├── pdf-webview/        # Giao diện PDF viewer (React + pdfjs)
└── shared/             # Types, constants dùng chung
    ├── types.ts
    └── constants.ts

Tech Stack

License

MIT — xem file LICENSE để biết thêm chi tiết.