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

Closed
tiff opened this issue Aug 9, 2019 · 3 comments

Comments

@tiff
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.

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

This comment has been minimized.

Copy link
Author

commented Aug 9, 2019

Update:
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

@javan

This comment has been minimized.

Copy link
Member

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. 🙃
foo

@tiff

This comment has been minimized.

Copy link
Author

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
Projects
None yet
2 participants
You can’t perform that action at this time.