Hi team!
I recently build a feature that required a text editor to create SMS and Email templates and needed a way to select a bunch of tokens to use in the template. I used elm-select menu variant as the popup list and it ended up working really well so thought I would share some snaps.
Lexical text editor
Wont lie, it took a minute to get comfortable with it. Out of the box does literally nothing, not even flash a cursor. It works with plugins, of which there are many, but as soon as you want to do anything not conveniently built for you (like rendering elm programs) then you have no choice but to understand how the thing works.
Eventually however, things will click, and it’s all happy days from there.
Definitely recommend Lexical despite the learning curve, it is incredibly configurable.
So yea, you can use elm-select not only as a combobox but also a popup selector with all the bells and whistles!
8 Likes
Great job and super smooth demo! Kudos!
I’m curious what your aha moment was. Do you have any docs links that proved particularly useful to you?
I want to do something very similar but for WhatsApp templates, so some pointers would be welcome!
Howdy!
The thing that made everything easier for me was how the Lexical reconciliation works. It’s actually a bit like Elm where it has command hooks and it’s own virtual DOM like structure. From the command hooks I did my connections to the Elm program and passed it the necessary Lexical state information required for it to render how and where you want. Then messages to the editor from elm about what was selected or not selected etc.
The message passing is not too bad it’s the editing that is tricky.
So perhaps you select a token, where you place that token in the editor is actually super important, is it in between two other tokens? End of a line? start of a line? there’s a heap of edge cases you have to account for, Lexical will not assume anything whatsoever, it’s all managed by you. Once you get comfortable with that everything is much smoother and you just end up ‘getting it’.
From the connections side of things you can use ports, or synthetic events to communicate. This means ‘technically’ you could create an Elm package adapter for Lexical where Elm is the brains and Lexical is the brawn.
Documentation wise, the API is well documented but working out all the editing tricks was a combination of looking through source code, and the Lexical Discord channel. AI often pointed me in the right direction but pretty lousy overall for working implementations.
If you give it a shot, just reach out and I would be more than happy to help where I can!
This is great timing. We are looking at Lexical and Editor.js for a project. If we decide to go with Lexical, we may be reaching out for insight. 
.
Thanks for sharing.
1 Like
Right now my implementation is a web component of a contentEditable from scratch, and the caret position alone has made me reconsider some life choices. So thanks for the tip re: Lexical! (and possibly Editor.js haha)
1 Like