@digiforce-nc/plugin-block-markdown

Plugin hiển thị và chỉnh sửa nội dung Markdown ngay trong giao diện ứng dụng - sử dụng Vditor editor với hỗ trợ KaTeX, Mermaid, ECharts và Flowchart.

Plugin này làm gì?

Markdown block cho phép người dùng thêm nội dung văn bản phong phú (rich text) vào bất kỳ trang nào - hướng dẫn sử dụng, ghi chú, mô tả quy trình - với trình soạn thảo WYSIWYG mạnh mẽ hỗ trợ cả toán học, biểu đồ và sơ đồ.

Ba nhiệm vụ chính

#	Nhiệm vụ	Chi tiết
1	Soạn thảo Markdown	Editor WYSIWYG với toolbar, shortcut, preview
2	Render nội dung phong phú	Hỗ trợ KaTeX (toán), Mermaid (sơ đồ), ECharts (biểu đồ)
3	Lưu trữ nhẹ	Nội dung markdown lưu trực tiếp trong block schema props

Kiến trúc

Tổng quan

Plugin hoàn toàn client-side - không có server component hay database riêng. Nội dung markdown được lưu trong x-component-props.content của block schema.

Luồng dữ liệu

Bước	Mô tả	Lưu trữ
1	User viết markdown trong Vditor	In-memory
2	User click ngoài editor hoặc lưu	Ghi vào schema props
3	Khi mở lại trang	Đọc từ schema props, render trong Vditor

Vditor - trình soạn thảo

Vditor là trình soạn thảo Markdown mã nguồn mở được tải qua CDN. Các tính năng nâng cao (KaTeX, Mermaid, ECharts) cũng được tải qua CDN khi cần, giúp giảm bundle size.

CDN Resource	Chức năng	Khi nào tải
KaTeX	Render công thức toán học LaTeX	Khi nội dung chứa $...$ hoặc `$$...$$`
Mermaid	Render sơ đồ flowchart, sequence, ER	Khi nội dung chứa code block `mermaid`
ECharts	Render biểu đồ tương tác	Khi nội dung chứa code block `echarts`
Flowchart.js	Render sơ đồ luồng đơn giản	Khi nội dung chứa code block `flowchart`

Luồng soạn thảo và lưu

Tính năng

Tính năng	Mô tả
WYSIWYG editing	Soạn thảo trực quan, thấy ngay kết quả
Markdown syntax	Hỗ trợ đầy đủ CommonMark + GFM (tables, task lists)
KaTeX	Công thức toán học inline và block
Mermaid diagrams	Flowchart, sequence, ER, gantt diagram
ECharts	Biểu đồ tương tác (bar, line, pie, ...)
Flowchart.js	Sơ đồ luồng đơn giản
Code highlight	Syntax highlighting cho code blocks
Toolbar	Bold, italic, heading, list, link, image, table
Export	Copy as markdown hoặc HTML

Ví dụ nội dung

Công thức toán

markdown

Công thức Euler: $e^{i\pi} + 1 = 0$

Mermaid diagram

markdown

```mermaid
flowchart LR
    A --> B --> C
```

ECharts

markdown

```echarts
{"xAxis":{"type":"category","data":["A","B","C"]},"yAxis":{"type":"value"},"series":[{"data":[10,20,30],"type":"bar"}]}
```

Thành phần client

Thành phần	Mô tả
`MarkdownBlockWidget`	Widget chính đăng ký Markdown block vào hệ thống
`MarkdownBlock`	Component React bọc Vditor editor
`MarkdownBlockDesigner`	Designer với settings (height, mode)
`MarkdownBlockInitializer`	Đăng ký vào menu "Add block"

Dependencies

Package	Vai trò
`@digiforce-nc/client`	Client framework (peer)
`@digiforce-nc/server`	Server framework - chỉ dùng khi build (peer)
`vditor`	Markdown editor (CDN-loaded core + plugins)