Xây dựng trình soạn thảo văn bản trong trình duyệt: canvas vs contenteditable vs textarea

David Bushell, chán ngán với tình trạng phần mềm hiện đại, quyết định tự xây dựng trình soạn thảo văn bản của riêng mình trong trình duyệt. Các thử nghiệm của anh so sánh ba phương pháp kết xuất: <canvas>, contenteditable và <textarea>. Kết quả mang lại những bài học thực tế cho bất kỳ ai xây dựng trình soạn thảo mã hoặc trường nhập văn bản đa dạng.

Canvas: toàn quyền kiểm soát, không khả năng truy cập

Nguyên mẫu đầu tiên kết xuất mọi thứ trên phần tử <canvas>. Nó hỗ trợ định vị con trỏ, di chuyển bằng phím mũi tên, tô sáng dòng và nhập văn bản. Nhưng canvas không cho gì miễn phí: không chọn văn bản, không hoàn tác/làm lại, không dán nhiều dòng và không cuộn tràn. Bushell đã hack cuộn bằng cách sử dụng một phần tử tràn ẩn gốc để điều khiển độ lệch kết xuất, nhưng vấn đề cơ bản vẫn còn: canvas hoàn toàn không thể truy cập được đối với trình đọc màn hình và công nghệ hỗ trợ.

Contenteditable: khả năng truy cập miễn phí, hiệu suất thất thường

Phương pháp thứ hai sử dụng contenteditable="plaintext-only" bên trong một div có thể cuộn. Điều này mang lại khả năng chọn văn bản gốc, lịch sử hoàn tác và khả năng truy cập miễn phí. API Selection cung cấp số liệu cho con trỏ tùy chỉnh và ::selection có thể được tạo kiểu. Tuy nhiên, hiệu suất suy giảm không thể đoán trước vượt quá một số lượng ký tự nhất định, với Chromium tệ hơn WebKit và Firefox.

Textarea: người chiến thắng về hiệu suất

Nguyên mẫu cuối cùng sử dụng <textarea>, hóa ra lại hiệu quả hơn nhiều đối với văn bản dài. Sự đánh đổi: textarea không thể sử dụng CSS ::highlight, vì vậy việc tô sáng cú pháp yêu cầu một lớp div thứ ba. Bushell đã sử dụng MicroLighter cho các dòng hiển thị, nhưng lưu ý rằng quá nhiều điểm tô sáng CSS gây ra vấn đề hiệu suất. Anh đề xuất Tree-sitter để tạo điểm tô sáng chỉ cho các dòng hiển thị và đề cập đến kỹ thuật dán ngược cho cuộn ảo hóa.

Bài học chính

Các bản demo của Bushell chưa được tối ưu hóa và không hoàn toàn truy cập được, nhưng chúng chứng minh một điểm: bắt đầu từ vị trí thua như canvas là một cơn ác mộng. Anh đang cất dự án này đi cho một ngày mưa, nhưng cuộc khám phá nêu bật những đánh đổi mà mọi trình soạn thảo dựa trên web phải đối mặt.

Anh cũng cảnh báo về lỗi đơn vị mã UTF-16 với biểu tượng cảm xúc và các ký tự đa byte khác, khuyến nghị Intl.Segmenter để xử lý chuỗi nhận biết grapheme.