Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Make data-empty Attribute Optional in toggleEmptyMark to Prevent Unintended DOM Manipulation

Đang mở
  • Có gì không ổn?
#2,820 1 bình luận 1 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
35/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
javascript, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Đọc toggleEmptyMark trong src/components/dom.ts và toggleInputsEmptyMark trong src/components/block/index.ts, đặc biệt là cách enableLineBreaks và data-mutation-free ảnh hưởng đến các phần tử hậu duệ. Xác định hành vi opt-in hoặc loại trừ phù hợp, sau đó xác minh rằng data-empty không được thêm vào khi hành vi này bị vô hiệu hóa mà không làm hỏng việc xử lý đầu vào rỗng thông thường.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

The toggleEmptyMark() function (relevant code here: toggleEmptyMark Function) is causing significant issues. As it modifies the editor's DOM, it can trigger reactivity within Editor.js plugins developed using JavaScript frameworks like Svelte.

For example, when using a Svelte component with a contenteditable div bound to innerHTML (e.g., bind:innerHTML={html}), the DOM changes triggered by toggleEmptyMark can have disastrous effects, such as loss of the current selection and cursor position.

To avoid these issues, the automatic addition of the data-empty attribute to inputs should be made optional. This change would prevent unnecessary DOM manipulation and improve compatibility with reactive frameworks.

Editor version: 2.30.5

Clarification:

The root cause actually lies within the toggleInputsEmptyMark function (relevant code here: toggleInputsEmptyMark Function).

The problem becomes evident when enableLineBreaks is set to true to allow line breaks in a plugin via the "Enter" key. In this scenario, the data-empty attribute can incorrectly be added to <div> elements within contenteditable areas, which then triggers reactivity and potentially causes issues like losing the cursor position or disrupting the user experience.

Of course i tried setting the data-mutation-free attribute to true on the parent element, but the data-empty attribute is still added to its childs and so the issue remains.

I guess that ensuring the data-empty attribute is not added to all children of an element possessing the data-mutation-free="true" attribute would fix the issue...

As a sidenote:

Implementing placeholder logic through DOM manipulation in a WYSIWYG editor that allows custom plugins is a highly questionable decision, as it has the potential to break everything users have created. At the very least, this feature should have been made opt-in rather than mandatory.

Ngôn ngữ chính
TypeScript
Star
32k
Fork
2.2k
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của codex-team/editor.js

Tất cả issue của codex-team/editor.js

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.