I allow our users to select snippets of text to insert into the Slate editor from a list of text items. To do so I use Transforms.insertNodes(editor, texts)
which works perfectly.
The insertion can be abrupt though, from a UX perspective. Especially when there is already a lot of text in the editor. This makes its hard to see where the text you inserted ended up relative to the other text around it.
I am hoping to add a class (or something like it) to all newly inserted texts so that I can run a flash-esque background on the new text. However, I only want it there for a few second (using CSS animation) but I don’t want that class or style to persist to the saved content. Any ideas on how to accomplish this? Many thanks!
Here was the best solution I could come up with. Feels pretty hacky and adds a small bit of latency. But, works well enough to create the desired effect reliably without issues.
As I create the Slate content based on the new text I am pasting, I inject a propert "inserted" as true. On the Slate render I pull properties and make them a class. There is a timeout that executes shortly after the insertion (based on the CSS transition that then quickly removes it. Finally, before I send the data to the DB, I make sure nothing with the "inserted" or "flash" properties are sent up by removing them from all words if found.
Elsewhere in the save to DB.
In the CSS