After experimenting a lot with contenteditable
elements, I finally chosed Quill to create a rich text message box on a chat app, because it is correctly handling selection, which appears to be a mess when dealing directly with a contenteditable
element.
In my experiments I used to parse the innerHTML and replace some strings by their emoji unicode counterpart (eg: '<3': '❤️'
), and used Autolinker library to replace found links by a link tag in my editable element.
google.com --> <a href="https://www.google.com">google.com</a>
I want to avoid Quill toolbar and replace automatically emojis and links.
So, I guess I have to replace editor’s content at some place…
I’m really new to Quill, but I understand that it is working with a specific internal model called deltas, that allows operational transform (correct me if I’m wrong).
This assumption done, how would I check/parse these deltas and replace specific content in it in a way that preserves selection and caret position?
References: