codex-team
Make data-empty Attribute Optional in toggleEmptyMark to Prevent Unintended DOM Manipulation
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.
+1 this is a major issue and causing lots of issues for me as well. Specifically around line breaks and how I save/display data outside editorjs. I've changed how line breaks work in my custom blocks. You can follow the discussion and my solution here: https://github.com/codex-team/editor.js/discussions/1886
Now with the latest version (I'm actually using 2.31.0-rc.10),
tags get's wrapped with a div with data-empty="true" - the attribute is not added to the block/input but the actual br tags gets wrapped. And it is very inconsistent.
It sometimes adds the attribute to the block element correctly, sometimes it adds it within the block content and wraps the br tags.
Correct:
Bug:
