Wordgard: Trình soạn thảo văn bản giàu định dạng cho trình duyệt từ tác giả ProseMirror
(wordgard.net)- Wordgard là một thư viện JavaScript mã nguồn mở để xây dựng trình soạn thảo văn bản giàu định dạng trong trình duyệt, là nền tảng trình soạn thảo mới do tác giả ProseMirror tạo ra
- Thay vì là một trình soạn thảo HTML dạng tự do, nó tập trung vào kiểm soát cấu trúc tài liệu, cho phép nhà phát triển xác định chính xác các loại nội dung được phép và cấu trúc ngữ nghĩa
- Hướng tới các trình soạn thảo tùy biến phức tạp, nó cung cấp mô hình dựa trên schema và kiến trúc lấy extension làm trung tâm, cho phép thay thế hoặc chỉnh sửa chức năng theo nhu cầu
- Nền tảng trình soạn thảo xử lý các yêu cầu như khả năng tiếp cận, quốc tế hóa, tài liệu RTL/hai chiều, nội dung có cấu trúc, phong cách hàm và soạn thảo cộng tác
- Dù là mã nguồn mở cho phép sử dụng theo giấy phép MIT, dự án chọn cách vận hành hoan nghênh báo cáo lỗi nhưng không nhận Pull request
Nền tảng trình soạn thảo kiểm soát cấu trúc tài liệu
- Wordgard là một thư viện JavaScript mã nguồn mở để triển khai trình soạn thảo văn bản giàu định dạng trong trình duyệt
- Đây không phải là trình soạn thảo HTML dạng tự do, mà là hệ thống soạn thảo văn bản giàu định dạng có ngữ nghĩa, nơi nhà phát triển kiểm soát chính xác loại nội dung sẽ hỗ trợ và cấu trúc tài liệu
- Cung cấp cách tiếp cận dựa trên schema để định nghĩa chi tiết cấu trúc tài liệu và tạo các phần tử tài liệu tùy chỉnh
- Giao diện lập trình được thiết kế với mục tiêu tổng quát và linh hoạt, có thể dùng làm nền tảng cho các trình soạn thảo tùy biến có yêu cầu lớn
Khả năng mở rộng, khả năng tiếp cận và tính năng cộng tác
- Hầu hết chức năng của trình soạn thảo được triển khai dưới dạng extension, nên có thể thay thế hoặc chỉnh sửa nếu không phù hợp với nhu cầu
- Các tính năng về khả năng tiếp cận cân nhắc đến người dùng trình đọc màn hình, người dùng chỉ dùng bàn phím và môi trường thiết bị di động, đồng thời hỗ trợ quốc tế hóa UI
- Hỗ trợ nhận biết hướng cho cả nội dung lẫn giao diện nhằm phục vụ môi trường viết từ phải sang trái, và có thể xử lý nội dung hai chiều cũng như tài liệu RTL
- Cây tài liệu có thể bao gồm nội dung có cấu trúc như bảng, danh sách lồng nhau, figure có chú thích và các cấu trúc tùy chỉnh
- Phần lớn hệ thống được viết theo phong cách hàm để tăng độ rõ ràng và khả năng kiểm thử
- Hỗ trợ soạn thảo cộng tác, cho phép nhiều người dùng chỉnh sửa cùng một tài liệu đồng thời và hợp nhất các chỉnh sửa đồng thời
Giấy phép và vận hành dự án
- Giấy phép là MIT, và việc phát triển diễn ra tại code.haverbeke.berlin
- Dự án hoan nghênh báo cáo lỗi nhưng không nhận Pull request
- Các thảo luận và câu hỏi về dự án được khuyến nghị dùng forum, còn lỗi cần được báo cáo trên issue tracker
1 bình luận
Các ý kiến trên Hacker News
Tôi nghĩ đa số sẽ muốn biết “tại sao?”. Tài liệu này bàn về điểm khác biệt so với ProseMirror, nên đây là câu trả lời gần nhất cho câu hỏi đó: https://wordgard.net/docs/prosemirror/
Một điểm đáng chú ý là không có lộ trình nâng cấp. Có nhiều khái niệm chung với ProseMirror, nhưng để chuyển đổi có vẻ sẽ cần khá nhiều công sức. Obsidian dựa trên CodeMirror nên có lẽ sẽ không đổi, nhưng những nơi như tiptap.dev có thể bị ảnh hưởng
@merijn, tôi tò mò liệu bạn có thể giải thích vì sao Wordgard đáng để chịu chi phí chuyển đổi không
Chỉnh sửa: Tôi thấy blog cá nhân của Marijn đã đề cập nhiều vấn đề, và đã gửi https://marijnhaverbeke.nl/blog/wordgard-0.1.html lên HN để có bối cảnh tốt hơn
Tuy nhiên, như đã giải thích trong bài blog, tôi đã tích lũy được khá nhiều nhận thức thiết kế mới có thể tránh một số vấn đề từng gặp trong ProseMirror, nên tôi muốn tạo một phiên bản lặp mới
Tôi sẽ thêm liên kết tới bài blog vào phần tài liệu trên website
Và tên là marijn, không phải merijn
Trang landing có vẻ cần thêm thông tin về “tại sao” hơn là “cái gì”
Ngoài trình soạn thảo ra, nghệ sĩ phụ trách thiết kế thật sự rất ấn tượng. Rất tinh tế và nổi bật: https://kamilastankiewicz.com/
Tôi nhớ khoảng 25 năm trước, việc chạy được một trình soạn thảo WYSIWYG để dựng một site PHP-Nuke cho báo trường là một trở ngại lớn, và cuối cùng cũng vượt qua được
Thật vô lý khi đến giờ vẫn chưa có một triển khai chuẩn web nào cho tính năng như vậy, dù đáng lẽ đã được thông qua từ 15 năm trước
Cái này trông tuyệt vời đến bất ngờ
Gần đây tôi tìm một thứ tương tự rồi rốt cuộc tự làm, dùng operational transform (OT) theo khối để đồng bộ với máy chủ cục bộ và thêm đồng bộ dựa trên khác biệt với máy chủ từ xa
Đọc hướng dẫn hệ thống mà tôi cứ gật gù liên tục. Nhìn những điểm giống và khác nhau khiến tôi thấy cách mình làm khá được xác nhận
Có một lĩnh vực rất cơ bản mà mọi trình soạn thảo đều thất bại. Đó là liệu bạn có thể nhập một câu hoàn chỉnh bên trong trình soạn thảo trên iPhone hay không
Wordgard không vượt qua bài kiểm tra này. Đầu vào từ tự động sửa lỗi hoặc gợi ý bàn phím bị nuốt mất, và các từ nhập dở hoặc sai chính tả bị xóa
Mobile Safari và Android Chrome có rất nhiều hành vi kỳ lạ so với các trình duyệt anh em trên desktop, và cũng diễn giải chuẩn khá lỏng. Vì vậy để làm cho đúng thường cần một đuôi dài các đoạn mã workaround
Wordgard rồi cũng sẽ tới đó, nhưng trọng tâm trước bản phát hành đầu tiên là kiến trúc
Không chọn được, tự động sửa lỗi bị hỏng, chạm vào văn bản nhưng con trỏ không di chuyển, việc nhập bị dừng, phần tử mất focus mà bàn phím vẫn không biến mất, kiểu vậy
Trong vài thập kỷ qua đã có nhiều nỗ lực thêm một phần tử rich text đúng nghĩa vào web, nhưng tôi không biết vì sao tất cả đều thất bại. Có lẽ vì đó là việc lớn, phức tạp và ít được đền đáp
Hỗ trợ rich text native đúng nghĩa là một trong những điểm mù lớn của web. Các nền tảng native đã giải quyết vấn đề này từ nhiều thập kỷ trước
Khoảng 6 năm trước, tôi đã rất vất vả nghiên cứu và triển khai autocomplete kiểu @ cho tài nguyên từ xa, tức là chức năng tham chiếu người dùng hoặc tài liệu khác. Cách mở rộng của trình soạn thảo này trông như một phiên bản tiến hóa của ProseMirror
Sẽ thật tuyệt nếu đây là tính năng tích hợp sẵn chứ không phải thứ phải tự xây dựa trên ví dụ khủng long. Mỗi lần dùng các thư viện trình soạn thảo văn bản kiểu này, use case số một của tôi là cái đó, rồi tiếp theo mới là WYSIWYG
Hỗ trợ mobile hạng nhất cũng cần thiết tương tự
Điều khiến tôi khổ sở khi dùng ProseMirror qua TipTap là tôi rất thường xuyên phải xử lý biểu diễn JSON của tài liệu bằng chương trình để trích xuất dữ liệu. Để làm vậy cần, hoặc ít nhất là rất muốn có, một biểu diễn có kiểu tĩnh
ProseMirror không có cơ chế rõ ràng cho việc này, nên cuối cùng tôi phải làm một trong hai cách
Tôi chưa dùng Wordgard nên không biết nó có xử lý vấn đề này không, nhưng đây là một điểm đau đáng được giải quyết
Artwork trên website đẹp quá. Cách thu hút sự chú ý như thế này khiến tôi có cảm giác như nó đã từng bị lãng quên
Tôi không thích WYSIWYG trên web. Bạn định dạng một bài viết diễn đàn dài lê thê, rồi đóng tab là mất hết
Tôi thích dùng trình soạn thảo văn bản cục bộ rồi Ctrl+V vào form web hơn. Nếu là Markdown thì có thể làm vậy
Lần đầu gặp điều này sau khi lỡ đóng tab, tôi đã bất ngờ một cách rất dễ chịu
Ý chính là đây không phải vấn đề kỹ thuật mà là vấn đề sản phẩm
Với ứng dụng ghi chú, tôi chọn dùng WYSIWYG vì không có chỗ cho chế độ xem chia đôi và tôi cũng không muốn chỉ nhìn Markdown thô
Phàn nàn lớn nhất của tôi về WYSIWYG là nó có thể gây cản trở. Ví dụ khi tạo một khối verbatim rồi không thể thoát khỏi khối đó. Tôi đang nói Teams đấy. Có lẽ đó cũng là lý do tôi thích LaTeX đến vậy
Thật vui khi lâu lắm rồi mới được thấy nghệ thuật đúng nghĩa. Trông rất đẹp