Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using native DOM APIs deletes content #662

tiff opened this issue Aug 9, 2019 · 3 comments


Copy link

commented Aug 9, 2019

When using native text insertion APIs like document.execCommand("insertText", false, "foo") arbitrary text within the document gets lost.

Steps to Reproduce
  1. Insert a bullet point list
  • Fooo
  • Bar
  • Foo
  1. Now mark "Fooo" and execute document.execCommand("insertText", false, "foo")

See GIF:
Aug-09-2019 09-11-05

I know that there are officially documented ways to replace/insert text into a Trix editor. Many browser add-ons use insertText to modify contents (probably Grammarly). Since insertText just simulates the user pasting text, I guess that this issue is not only about execCommand.

  • Trix version: 1.2.0
  • Browser name and version: Reproduced on latest Chrome and Firefox (haven't checked other browsers)
  • Operating system: MacOS

This comment has been minimized.

Copy link

commented Aug 9, 2019

I just noticed that the same behaviour occurs when you replace "Fooo" via textContent prop.

So, it's even easier to reproduce by just doing:

document.querySelector("trix-editor li:first-child").textContent = "Foo";

@javan javan closed this in 692e2fd Aug 13, 2019


This comment has been minimized.

Copy link

commented Aug 13, 2019

Thanks for the report, Christopher!

Technically, Trix does handle execCommands and direct DOM node modifications. You happened to expose an unrelated rendering issue triggered by having more than one identical block elements on the page. The bug prevented subsequent blocks from rendering even though they were present in the document model. And, this would only happen after an "unexpected" DOM mutation (e.g. a mutation that doesn't correspond with a key press).

So, replacing Fooo in the first list item with Foo made it identical to the third item, causing the third item not to render. Inserting any other text would have worked. 🙃


This comment has been minimized.

Copy link

commented Aug 14, 2019

Thanks for reacting so quickly.

Keep up the good work. I think Trix is among all rich text editors the best. With its support for mobile browsers it even outperforms DraftJS.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
2 participants
You can’t perform that action at this time.