Tiptap Editor - Trình soạn thảo WYSIWYG headless

• Là framework headless không cung cấp UI, thuận lợi cho việc tùy biến giao diện
• Hoạt động rất tốt với React, Vue, Svelte, Alpine.js, Next.js, Nuxt.js và vanilla JS
• Dựa trên ProseMirror

[bbulbum]

Trong số những trình soạn thảo tôi từng dùng thử, cá nhân tôi thấy đây là cái thuận tiện nhất và có cấu trúc dễ mở rộng nhất.
Rất nhiều điểm bất tiện mà tôi cảm nhận khi làm editor bằng Slate đã thực sự được giải quyết ở đây.

[gomjellie]

Bạn có thể chia sẻ những điểm bất tiện khi dùng editor Slate được không?
Mình mới chỉ dùng Tiptap thôi, nhưng vì có nghe nói Slate cũng khá ổn nên hiện đang thấy hứng thú!!

[firea32]

Phần xây dựng component bên ngoài tiện hơn nhiều. Đặc biệt, khi dùng DOM riêng như với React thì cần render dưới dạng component chứ không phải HTML, và ngay từ đầu tiptap đã được tạo ra có tính đến việc mô-đun hóa nên tôi thấy chỉnh sửa cũng dễ hơn.

[bbulbum]

Nhìn chung, tôi thấy tài liệu của Slate khá khó và quá raw, nên cảm giác có nhiều phần phải học hơn để triển khai các tính năng tôi muốn.

Đây là ký ức từ khoảng 2 năm trước nên có thể hơi khác một chút, nhưng tôi đã gặp những vấn đề như sau.

• Vấn đề nhập tiếng Hàn trên môi trường di động: Rất khó để tìm ra lỗi này phát sinh ở đâu, hình như nó xuất hiện trong lúc tùy biến nên tôi không nhớ chính xác.
• Khó khăn với các control liên quan đến select: Khi thêm tính năng xử lý thuộc tính cho các ký tự đã chọn thì cực kỳ rắc rối. (Bản thân object khá phức tạp)
• Khó khăn khi phát triển plugin: Tôi từng định tự phát triển plugin như bản đồ, nhưng tiptap được tổ chức theo cách rất thuận tiện để mở rộng và phát triển thêm plugin.

[gomjellie]

Ồ.... cảm ơn~!

[nemorize]

Có thể xem ví dụ trình soạn thảo đang hoạt động tại https://tiptap.dev/docs/editor/installation/react#7-the-complete-setup.

Cá nhân tôi thấy tài liệu được viết khá tốt, nhưng ở giữa có xen lẫn những phần yêu cầu đăng ký trả phí.
Dù chưa đến mức gây khó chịu khi đọc tài liệu, nhưng cũng khá tài tình và hơi đáng ghét ở chỗ khiến người ta bị kích thích muốn mua dù thực ra không cần... cảm giác thật phức tạp khó tả.

[savvykang]

Tôi khó có thể đồng ý với nhận xét rằng tài liệu của họ được làm khá tốt. Theo cảm nhận của tôi, khoảng cách giữa tài liệu bắt đầu và tài liệu API quá lớn nên đường cong học tập khá dốc. Trong dự án React mà chúng tôi đang thực hiện, chúng tôi đánh giá phong cách tài liệu của Prosemirror và react-prosemirror thân thiện với người dùng hơn và hoàn thiện hơn, vì vậy đã chọn react-prosemirror chứ không chọn tiptap.

Trong lúc tìm hiểu ví dụ React để tạo mã mẫu POC cho các yêu cầu của chúng tôi, đã có những vấn đề như sau.

1. Khi thêm StarterKit thì có thể dùng những thành phần nào? Phải tự tìm tài liệu riêng bằng tên package. Điều này khiến tôi bị kéo ra khỏi trạng thái tập trung khi đang thử chạy ví dụ của tiptap.
2. ListItem đã nằm trong StarterKit, vậy tại sao trong ví dụ lại còn thêm ListItem vào dự án? Là để cấu hình môi trường cho extension.
3. Tại sao phải dùng cú pháp như editor().chain().focus()? Không có nguyên lý thiết kế hay giải thích nào về method chaining.
4. Bubble menu và Floating menu bị thiếu trong ví dụ React. Chúng hoạt động khác với tính năng tôi thấy trên trang Try it live (https://templates.tiptap.dev/pjrwkQtNpq), nên lại phải xem tài liệu để biết vì sao tính năng bị thiếu.
5. Không có tính năng bảng nên tôi tìm từ khóa table trên trang Extensions. Kết quả hiện ra Table, TableCell, TableHeader, TableRow. Có phải phải thêm tất cả những thứ này không?
6. Tôi đã loay hoay thêm Table và đủ loại extension. Muốn kiểm tra xem chức năng có hoạt động đúng không thì trước hết phải chèn bảng. Vậy lệnh trên toolbar phải viết thế nào? Ở đâu trong toolbar của editor sẽ thêm các hàm cho những lệnh đó? Hoàn toàn không có gợi ý nào.
7. Có yêu cầu là không được phép lồng bảng khác bên trong bảng. Vậy logic để xác định con trỏ có đang ở trong bảng hay không phải triển khai thế nào? Hoàn toàn không có gợi ý nào.
8. Tôi nhớ rằng Color được đóng gói thành một extension nên thấy tò mò và mở mã nguồn ra xem. Nhìn thấy trong thư mục src chỉ có đúng hai file, tôi chỉ biết thở dài. Tôi không hiểu ý đồ khi tạo ra những module vụn vặt như vậy. Nếu ngay cả chức năng nhỏ thế này cũng tách thành package thì liệu gánh nặng quản lý phiên bản dependency có lớn hơn lợi ích về khả năng tái sử dụng không?

[nemorize]

Tôi hoàn toàn không cảm thấy có gì đáng nghi ngờ hay bất tiện ở các mục 1-3, 4-6 và 8, nên tôi khó mà đồng ý được.

1-2
StarterKit đúng như tên gọi, là một bộ kit dành cho giai đoạn khởi đầu, nên đến lúc dùng thực tế thì có vẻ không còn nhiều ý nghĩa.
Với ListItem thì đúng như bạn nói. Nó là thành phần để cấu hình extension Color. Tương tự, tôi nghĩ đây cũng là phần mà chỉ cần không dùng StarterKit là được.

3
chain().something().run() tuy chỉ giống như syntax sugar đơn thuần, nhưng tôi nghĩ nó cung cấp một tính năng phù hợp với khái niệm của một thư viện đi kèm sẵn nhiều thứ.
Tôi đang dùng nó rất hữu ích trong môi trường mobile, nơi các thao tác như in đậm rồi focus gần như là bắt buộc.

4
Vì tôi không dùng tính năng đó nên cũng không rõ lắm.
(Tôi nghĩ đây cũng là một ưu điểm đi kèm theo chiều ngược lại với nhược điểm ở mục 1 mà bạn đề cập là bị kéo ra khỏi trạng thái tập trung, ở chỗ không cần phải cố xem thông tin về những tính năng mà mình sẽ không dùng.)

5-6
Không chỉ đã được ghi chép khá rõ trong tài liệu của từng extension, mà về cơ bản nó cũng chẳng khác gì việc triển khai editor nói chung.
Thành thật mà nói, ở phần 6 tôi cũng không chắc mình đã hiểu đúng ý savvykang hay chưa... Tôi cứ liên tục nghĩ kiểu: "Sao chỗ này lại là điều đáng thắc mắc nhỉ...? Rốt cuộc là cần loại gợi ý nào vậy...?" haha...

7
"Cũng như với những node khác", có thể kiểm tra focus bằng editor.isActive('table').
Tuy nhiên, tôi nghĩ đây không phải vấn đề có thể giải quyết chỉ bằng cách xác định node đang focus. Có vẻ đây là một yêu cầu cần cân nhắc rất nhiều thứ như lọc khi dán, chèn qua developer tools, v.v.

8
Tôi đồng ý ở điểm việc quản lý phiên bản dependency là một gánh nặng, nhưng tôi nghĩ đây cũng là chỗ có ưu điểm, vì không cần phải mang theo code của những tính năng không cần thiết.
Đúng ngay trường hợp của bên tôi là không dùng extension Color mà bạn đã nhắc đến. Có lẽ mỗi bên đều có ưu và nhược điểm riêng.

.
Tôi nghĩ react-prosemirror và tiptap mà bạn nhắc đến là hai thứ có concept hoàn toàn khác nhau.

một bên là thứ giúp có thể dùng prosemirror theo kiểu React
vs
một bên là thứ mà việc có dựa trên prosemirror hay không không quan trọng, miễn là gom hết mọi thứ cần thiết để triển khai một editor phù hợp với dịch vụ của tôi

[nemorize]

Vì đây vốn đã là một cái tên khá được ưa chuộng bên phía Vue nên tôi cũng đã phân vân không biết có nên viết hay không,
nhưng lần này sau khi áp dụng và dùng thử trên SvelteKit thì thấy khá hài lòng nên xin chia sẻ.

Trong hệ sinh thái Svelte, tôi vẫn luôn băn khoăn vì chưa có một editor WYSIWYG nào thật sự khiến mình thấy “đúng là nó đây!”,
nếu bạn cũng đang có cùng nỗi trăn trở thì thử một lần xem sao, có lẽ sẽ là một lựa chọn không tệ.