Mentions UI Download 3.2

This component/theme works with latest OSSN version.

Arsalan Shah 4 years ago

READ DESCRIPTION BEFORE ENABLE

This component allow users to mention other friends into the comments (only). Once the comment is submitted people can view mentioned user profile also.

This is just a UI and doesn't send any notification to mentioned user, for that purpose you can use mentioned users component on top of this : https://www.opensource-socialnetwork.org/component/view/4864/mention-notifications

NOTE
During mention it doesn't support spaces example @Some User it will not return anything but @Some will return friends with such a name. It will only show a friends not all users.

enter image description here

Mentions UI 3.2

Support Display Usernames component.

Mentions UI 3.1

Show a error message if no match found
Improved search method
Show names in actual comments.

Mentions UI 2.0

Show list in comment edit
Make it work in pagination.
Display name in list only that you matches your @query
Display names after comment is created
Disable tag inside tag bug

Comments

Dominik L Replied 2 months ago

To get rid of the deprecation message, I replaced

this:

    mentionUI.attach(document.querySelectorAll(".comment-box"));
        document.querySelector('[contenteditable=true]').addEventListener('DOMNodeInserted', function(event) {
            if (event.target.tagName == 'SPAN') {
                event.target.outerHTML = event.target.innerHTML;
                event.target.remove();
            }
        });
    }
});

with:

        mentionUI.attach(document.querySelectorAll(".comment-box"));

        // Create a MutationObserver to watch for changes in the child nodes
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                mutation.addedNodes.forEach(function(node) {
                    if (node.nodeType === 1 && node.tagName === 'SPAN') {
                        node.outerHTML = node.innerHTML;
                        node.remove();
                    }
                });
            });
        });

        // Select the target node and configure the observer options
        const targetNode = document.querySelector('[contenteditable=true]');
        if (targetNode) {
            observer.observe(targetNode, { childList: true, subtree: true });
        }
    }
});

Eric redegeld Replied 3 months ago

so replace old version with this download in think

Arsalan Shah Replied 3 months ago

[Deprecation] Listener added for a 'DOMNodeInserted' mutation event. Support for this event type has been removed, and this event will no longer be fired. S