Tagging within Comment or Post

Hi there, does anyone know how apps allow you to “tag” people by @'ing them in a comment? For example, I know that this community forum allows us to tag other users with accounts.

I also recorded a loom to demonstrate what I mean:

Does anyone know how this magic happens?! This is beyond just how to do it in WeWeb - I’d love to have any idea of how it works in general.

There are many ways of doing this:

  • parse the content while the user is writing and look for a substring matching the “command” format
  • listen to keyboard events for a combination of keys that matches the “command”

then when your logic says the user started to type the command show the ui for selecting the options (filter if necessary)

then you need to handle what happens when something is selected and when you need to close the command selector because the user does not want to use it.

This could work with text inputs but usually a div element with contenteditable attribute is used.

If anybody wants to read some code doing something similar, can have a look to Lotion, a brand new library exploring this technique to create a notion style editor.

Inspired by that library I created a proof of concept notion style form builder with only weweb elements and a bit of javascript actions.
sogl__7oxLkRFbLy

Here the command is in the format of “/command” and instead of inserting a tag inline it transform or create new blocks.

In your case the command would be in the format “@nicname”, the select would show nicknames filtered by the current command, you would use a div with contenteditable and the command would probably insert a span element with the nickname and custom styles.

If you drop the need to have the tag system inline when the user is writing it is way more easier and doable in weweb without custom code.
Imagine the examole of this forum: instead of inline tagging you can write your message and have an ui at the bottom that let you add tags to people. Like a button saying “tag someone” that will display a searchable select with the users. On select you add the user in an array. You display the tags in a column element with the array as data.

Hope this can help you have a general idea of some possible ways to approach this.

2 Likes

For information we are working to add this feature to the futur rich text input we are currently developing.

3 Likes

Well that’s certainly interesting! Do you have any more information about when that will be released? I need to make decisions about waiting for it or finding alternatives given my release timeline

We don’t have an exact date when it will be released. But soon, in the next weeks. Perhaps this one or the next one :crossed_fingers:

Thanks for the update! Hopefully this week!

Question: will the “tagging” feature work only with tagging users, or could we use it for other purposes as well, like selecting items from a dropdown?

Hi @kyanaloe, you will be able to bind the mention suggestions with whatever you want and choose the trigger (the character like @ or #).

Hi @dorilama I think what you did is really an interesting feature with many advance concepts. I saw lotion and really facinated by it. The fact you can build that with weweb is amazing. Can you share how one can accomplish that?

The main thing you need to implement is listening to keyboard events and programmatically focus in the right input.

Of course the example I made is a proof of concept created with javascript actions inside workflows, ideally it needs to be polished and converted to custom components.

I wonder how can I program to make a component element based on the object type. The most I can do is make conditional visibilty but that certainly isn’t the way. Does using createelement works and is the optimal way? Also how do I define an element UI based on my weweb component, for example createelement of input and the UI built with weweb. Or my approach is wrong?

Because weweb is a vue app updating the DOM directly will probably have unexpected effects.

In my form builder example all the ui you see is created by weweb in the editor, it’s a column element bound to an array with the data of each question.
The javascript actions I used are only to handle keyboard events and focus.

I think I don’t understand how the ui is created, related to the value of the key in object. If conditional visibility I would understand but I don’t know how to create the element

In the example the ui is handled by weweb:

  • add a column element
  • bind an array of data as the items of the column element
  • drag and drop the elements you want to show on each cell
  • conditionally hide/show the relevant ui based on the data of the current cell

The ui is a list of repeating elements, weweb handles it very well.

I see so you used conditional visibilty, so actually when you made for example an input block there are other UI elements hidden? that wouldn’t be efficient right?

Why would it not be?
It’s a list of repeating elements, lice 4/5 inputs per cell. The list itself will be shorter than 10 elements. It is a very small amount of computation compared to everything else that your page is doing.