Tagging users from within summernote

mymdsdigital · June 12, 2020, 9:36am

Hi I am wondering if there is a way to tag users from within summernote? Like if the @ symbol is used the a list of users appears.

Example:

Thanks

JonL · June 12, 2020, 9:58am

Look for summernote hints.

mymdsdigital · June 12, 2020, 11:08am

Hi @JonL, thanks for getting back to me! would you be able to point me to a resources on where to find the summernote hints? I have been trying to look for it, but can’t find anything.
Thanks
Juan

max_gb · June 12, 2020, 11:22am

mymdsdigital · November 13, 2020, 1:24pm

hi guys,

Back at this and I am still having some problems trying to implement this

As shown in the image above I was able to make the hints working using the following code:

<textarea id="text1" class="form-control hint2mention"></textarea>
                    <script>
                        $(document).ready(function() {
                            $(".hint2mention").summernote({
                            height: 100,
                            theme:"lite",
                            hint: {
                            mentions: ['jayden', 'sam', 'alvin', 'david'],
                            match: /\B@(\w*)$/,
                            search: function (keyword, callback) {
                            callback($.grep(this.mentions, function (item) {
                            return item.indexOf(keyword) == 0;
                            }));
                            },
                            content: function (item) {
                            return '@' + item;
                            }
                            }
                            });
                            });
                    </script>

However, I have not been able to get it integrated with App connect, as I would like to get the list of users from a server connect and then use the value selected to send an email.

Any how was wondering if someone can please point me to what I am doing wrong.

Thanks
Juan

Heather_Mann · July 16, 2021, 7:44pm

If anyone is looking for how to do this I have it working. Add the following code to your page in script tags…

                function tb_hints(){
                dmx.global.set('editorConfig', {
                    height: 100,
                    theme:"lite",
                    placeholder: "Enter Description Here...",
                    hint: {
                        mentions: dmx.parse('sc_tripbits.data.titles'),
                        match: /\B@(\w*)$/,
                        search: function (keyword, callback) {
                            callback($.grep(this.mentions, function (item) {
                                return item.title.indexOf(keyword) == 0;
                            }));
                        },
                        template: function (item) {
                            return item.title;
                        },
                        content: function (item) {
                                return $('<a href="' + item.link + '">' + item.title + '</a>')[0];
                        }
                    }
                });
            }

The server connect returns a json array with title and link fields. I use the title field to populate the @mentions and when one is selected it inserts the link. You’ll want to replace the sc_tripbits.data.titles with your own server connect and change the ‘title’ and ‘link’ fields as appropriate. You can, of course, use whatever fields from your database you want.

Then add dmx-bind:config=“editorConfig” to your summernote textarea and finally
run the function in the static onsuccess of your server connect, or in a flow with Run Javascript.

Voila!

bpj · July 16, 2021, 7:58pm

Love this. Thanks Heather

Digo · August 18, 2021, 12:57am

I’m curious if you managed to get it so when a user is tagged you are able to detect this (as you wanted to send an email)?

I’ve managed to implement this thanks to @Heather_Mann, but I’m struggling on finding a way so I can insert something into the database when a hint is present when the text in summer note is submitted, as well as getting the text that was inserted by that hint (the username).

Heather_Mann · August 18, 2021, 1:46am

Aha - I was focused on getting the data from the database to populate the mention. I’ll have a think about the other side. Can you explain your use case a bit more in detail? That might help me figure it out.

Digo · August 18, 2021, 1:51am

Sure - And your post actually helped me a lot, populating the mention was also what I needed.

So essentially I’m using exactly your method, but, when the text in summernote is submitted (which in my use case, they are submitting a comment) I want to send a notification to any users that were tagged. The notification system is already built for other parts of my site, so my question is how to get tagged users in the summernote field and put those users into a variable I can use in a server action.

User tags are placed in the summernote in the following format:

$('<button type="button" class="btn btn-primary btn-sm">@' + item.first_name + ' ' + item.last_name + '</button>' + ' ')[0];

Heather_Mann · August 18, 2021, 2:25am

I’ll have a look at it more closely tomorrow (it’s getting late here), but could you use the content function to populate a variable array (using dmx.parse - but I can’t think right now how to do that, lol) and then on submitting the form send that array to the server connect? You would need to check that every item in the array was in the summernote field (in case of deletion) but that seems doable. From there hopefully you can trigger the notifications system by iterating through the array that was passed to the server connect.

Again - it’s late here so if I’m off track - apologies!

Digo · August 18, 2021, 2:39am

Thanks, that’s definitely in the right direction! I managed to get it working for tagging a single user using dmx.global.set, but I have no idea how to use dmx.parse or similar to make it so it adds it to an array/reads from an array instead.

Heather_Mann · August 18, 2021, 2:48am

You could look at doing the adding the value to the array with a flow and then calling the flow from JS and passing the variable. From another post, something like…

dmx.parse("flow_stripe_error.run({stripe_error_message: ‘“ + result.error.message + “‘})");

I’m done for tonight. Looking forward to this solution!!

Good Luck!

H.

Digo · August 18, 2021, 3:49am

Well, the answer turned out to be much more simple! I looked at around 30 posts to get an idea of what might work and spent about an hour, but it turns out you can add to an array directly with dmx.parse. Here’s how I’ve got it working:

Insert an array on the page via the app structure panel
Within the content function, add dmx.parse("postcomment.tagarr.addUniq(" + item.userID + ")"); (Array area | Array name | Add uniq function so an ID is only there once)
Add a hidden text input within the summernote form area with a dmx-value of the array.

You can then use the array in server connect actions. I do still have to figure out how to double-check for any removals, but that’s something I’ll tackle tomorrow. Thank you for your help!

Heather_Mann · August 18, 2021, 1:15pm

Sweet! Glad you got it working. Now, if I need to dmx.parse to an array I’ll know where to find the structure!

If you wouldn’t mind posting back here when you get the last bit figured out that would be great.

stikare · December 14, 2021, 7:44am

Hi, I am using this plugin but having trouble to do that mention feature. Its working when I am type @ and user list will be render. But i am try to do @ and # - on “hash” I will render other list.

Both(@ and #) can work in same editor? Stuck here. Appreciate if anyone help!