Coming from an Angular background, I am used to having a Controller manage an entire form. I understand that with Stimulus, we want to keep our Stimulus classes small and focused. As such, I’m still learning how to translate my Angular mindset into a Hotwire context.
Consider this: I have a <textarea>
and below it I have a bunch of buttons that represent emoji characters. Something like this:
<form>
<textarea></textarea>
<div class="emoji">
<button data-hex="...">:)</button>
<button data-hex="...">:|</button>
<button data-hex="...">:(</button>
</div>
</form>
When the user clicks on one of the buttons, my code needs to take the data-hex
attribute, convert the “code points” into a Unicode character (String.fromCodePoint()
), and then insert the generated emoji into the <textarea>
at the current .selectionEnd
location.
I’m not sure how to best go about this. In a non-Stimulus context, all of this logic exists in the “Form controller”. Obviously not good for reusability.
Some ideas:
-
Add a
data-controller
to the form and then just manage everything at the root location. This is basically what I am doing right now in order to port my old code into Stimulus context. -
Add a button-based controller. Basically, add a
data-controller
to each emoji button. This controller could then listen for the click-event and.dispatch()
a custom event likeemoji:insert
(including the generated Emoji Unicode in the event detail). Of course, then I’d have to have something else higher-up in the DOM to listen for those events and translate them into a<textarea>
mutation. -
Add a button-based controller; but, this time, use an outlet to have the button-controller talk to the ?textarea controller? or ?form controller? and call some method like
formOutlet.insertEmoji( string )
.
In the above, I’m adding a controller to each button. However, I suppose I could just have a controller on the div.emoji
container and use either event delegation or wire-up “targets”.
Anyway, I just don’t yet have a good sense of what the “Stimulus Way” is for something like this. Would love any suggestions.