Slate-Entity-Labeler is published!
I recently published a new npm package slate-entity-labeler which is React component built on Slate.js to facilitate labeling text. I mainly want to formally announce it here so I can get feedback and maybe other people who want to contribute and make it better. I will briefly go through design process. There is a demo video at the bottom of the article, but for now here’s a picture:
Only the text box at the top is provided by the package. The rest is just for demo display to aid understanding of state.
A while back I had been working on a way for users to label text. If your unfamiliar with what it means to label text here is example screenshot from Microsoft’s Language Understanding Service.
It’s not clear in the static picture but you can see above that as the user hovers over a word square brackets [example] surround the word to show selection. The injection of these brackets cause jumping of text which makes it distracting to read and it’s not intuitive how to select multiple tokens.
I wanted to make this experience better and leverage users existing knowledge of text selection. It gives better visual feedback and hopefully makes the process more natural as they don’t have to learn new behavior.
Given the npm ecosystem you would think there would be something suitable out there, but it turns out to be a rather niche problem and I ended up having to build a custom control.
I initially started using Draft.js. This seemed like a decent solution being developed by Facebook and having good integration with React; however after implementing a partial solution I realized I was spending a lot of time fighting against their API to make things work and due to it’s representation of the state it was difficult to write modular code. Some time passed and thankfully Slate.js was released as beta and this turned out to be a much better alternative for this type of control. It seems after looking at all the different patterns in text editors they have really built a great set of abstractions on this one.
I won’t go deep into the code but will talk about it at high level. The user gives a string of text. This string is tokenized and then the user can select these tokens. As they select and label the tokens, the subset of them are wrapped inside another inline element which allows them to highlighted and have the entity name above.
Video Demo
Not much here, but hope it’s useful for someone out there. Keep an eye out as I hope to publish another related component called slate-mention-editor which is bit more complicated and cool!
- Demo Site:
https://mattmazzola.github.io/slate-entity-labeler/ - Github Repo:
https://github.com/mattmazzola/slate-entity-labeler/ - Slate.js Docs:
https://docs.slatejs.org/
Let me know what you think or how to improve it!
