codex-team / codex-team/editor.js

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

Open
#2,820 1 comment 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
31.9k
Forks
2.2k
Avg merge
1d 1h
Merged PRs (30d)
1

Description

The `toggleEmptyMark()` function (relevant code here: [toggleEmptyMark Function](https://github.com/codex-team/editor.js/blob/8f365f006328a36faacf60352e20a0fc365c227b/src/components/dom.ts#L671-L674)) 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](https://github.com/codex-team/editor.js/blob/8f365f006328a36faacf60352e20a0fc365c227b/src/components/block/index.ts#L1012C11-L1012C32)).

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 `

` 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.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.