Tam emoji (Summernote plugin): New dmx-bind:config brakes another js

Wappler General Need Help
1

I don't know exactly how to describe this, and don't know if 100% related to a Wappler question, sorry if that's the case..
But I've been fighting for some days with this scenario and wonder if someone has been facing something similar:

I've succesfully integrated an emoji toolbar on summernote using this:

<script>
document.emojiSource = '../tam-emoji/img';
document.addEventListener('DOMContentLoaded', function() {
    $('#summernote').on('summernote.init', function() {
        var emojiButton = function(context) {
            var ui = $.summernote.ui;
            var button = ui.button({
                contents: '<i class="fa fa-smile-o"></i>',
                tooltip: 'Emoji',
                click: function() {
                    $('#summernote').emoji({
                        button: '.note-btn'
                    });
                }
            });
            return button.render();
        };
        $('#summernote').summernote('addPlugin', {
            buttons: {
                emoji: emojiButton
            }
        });
    });
});
    </script>

And I want to use This solution for tagging users from Heather..

So:

   <script>
        function mentions() {
    dmx.global.set('editorConfig', {
        hint: {
            mentions: dmx.parse('sc_mentions.data.query'),
            match: /\B@(\w+)$/,
            search: function (keyword, callback) {
                var regex = new RegExp(keyword, 'i');
                callback($.grep(this.mentions, function (item) {
                    return regex.test(item.name_users);
                }));
            },
            template: function (item) {
                return item.name_users;
            },
            content: function (item) {
                return $('<a href="' + item.name_users + '">' + '@' + item.name_users + '</a>')[0];
            }
        }
    });
}

    </script>

And the editor becomes on:

<textarea id="summernote" name="post" 
dmx-bind:config="editorConfig" is="dmx-summernote"
lang="es-ES" 
dmx-bind:toolbar="[['insert', ['emoji']],['tool',['codeview','undo','redo','bold']]]"></textarea>

Both work perfect on separated pages/when mentions() is not called.
But when I put those js together on the same editor and run mentions() it seems dmx.global.set('editorConfig') brakes something as:

image
image1293×133 9.34 KB

And the emoji panel doesn't close..

Any idea, what can I try here to solve this?
Thanks in advance everyone

2

Facing another issue.

Using patrick's advice:

I have this

<script>
function setupEditorConfig() {
    document.emojiSource = '../tam-emoji/img';
    var editorConfig = {
        height: 200,
        hint: {
            mentions: dmx.parse('sc_mentions.data.query'),
            match: /\B@(\w+)$/,
            search: function (keyword, callback) {
                var regex = new RegExp(keyword, 'i');
                callback($.grep(this.mentions, function (item) {
                    return regex.test(item.name_users);
                }));
            },
            template: function (item) {
                return item.name_users;
            },
            content: function (item) {
                return $('<a href="' + item.name_users + '">' + '@' + item.name_users + '</a>')[0];
            }
        },
        toolbar: [
            ['style', ['style', 'cleaner']],
            ['font', ['bold', 'underline', 'clear']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['emoji', 'link', 'picture', 'video']],
            ['view', ['fullscreen', 'help']]
        ]
    };
    dmx.global.set('editorConfig', editorConfig);
}
setupEditorConfig();

    </script>

All is loading except sc_mentions.data.query
Seems there's a timing issue..
So I'll set 2 static inputs, just for clarify things here:

mentions: [
                { name_users: 'staticuser1' },
                { name_users: 'staticuser2' },
            ],

And another function:

    <script>
        function updatemention() {
             var newmention = dmx.parse('sc_mentions.data.query');
         if (newmention && newmention.length > 0) {
             var newconfig = dmx.global.get('editorConfig');
                 newconfig.hint.mentions = newmention;
                 dmx.global.set('editorConfig', newconfig);
    }};
    </script>

And if I console.log(dmx.global.get('editorConfig')) after updatemention
Then I can see the change, but not on the editor. Still seeing the old thing:

image
image1212×386 26.2 KB

I have no idea, but I can't destroy summernote and re-initialize as an option, seems emoji-plugin crash or something:
image

So I need to update mentions without destroying summernote.
Is there a chance I can do that?

3

I don't know if this can help someone else on the future, but if you need to use emoji on summernote with tam-emoji plugin, take in consideration that maybe you'll need to comment this line, specially if you need to update summernote:
this.$panel = null; from tam-emoji.js

1 Like