Make data-empty Attribute Optional in toggleEmptyMark to Prevent Unintended DOM Manipulation
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 35/100
- issue の種類
- 機能追加
- 明瞭さ
- おおむね明確
- 活発さ
- 停滞
- 技術スタック
- javascript, typescript
- 領域
- frontend
調査の方向性
src/components/dom.ts の toggleEmptyMark と src/components/block/index.ts の toggleInputsEmptyMark を読み、特に enableLineBreaks と data-mutation-free が子孫要素にどのような影響を与えるかを確認してください。適切な opt-in または除外の動作を判断し、その動作が無効になっている場合に data-empty が追加されないことを、通常の空の入力の処理を壊さずに検証してください。
索引モデルが issue の本文から書いたものです。
説明
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.
- 主要言語
- TypeScript
- スター
- 32k
- フォーク
- 2.2k
- 平均マージ
- 2日 1時間
- マージ済み PR（30日）
- 1
環境構築
このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
codex-team/editor.js のほかの issue
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
codex-team/editor.js#3037 ·
-
Floating Promise Anti-Pattern & Premature Caret in Multi-Block Paste対応中かも @anshurajbisoyi98-ctrl が 15 日前に担当しました。 オープンbug good first issue
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
codex-team/editor.js#3032 · コメント 1 件 ·
-
Silent Data Loss & Broken Error Contract in Saver.save()対応中かも @Sion612 が 25 日前に担当しました。 オープンbug
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
codex-team/editor.js#3030 ·
-
Complete Omission of block.destroy() in Blocks Collection対応中かも @Minhal128 が 24 日前に担当しました。 オープンbug
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
codex-team/editor.js#3029 ·
-
Bug: Link cannot be removed対応中かも @prathmeshyelne が 131 日前に担当しました。 オープンbug
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
codex-team/editor.js#3005 · コメント 1 件 ·
codex-team/editor.js の issue をすべて見る
似ている issue
-
freshness freshness:observed-only
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
thoroc/context-radar#280 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 66/100
-
documentation story
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 74/100
メンテナーはふだん 1 日以内に返信
-
bug category:billing priority:p3 track:fast
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
LanternOps/breeze#9223 ·
メンテナーはふだん 1 日以内に返信