DOM element interaction - useChatMessageDomElements

We want to create a new type of plugin hook "DOM element interaction", that will expose dom elements to a plugin, so it can interact with the element.

Example usages:

code highlight
image preview
mentions

Initial hook:

The initial hook of this type will be the useChatMessageDomElements that will provide the dom element of a specified chat message id. Other hooks of this type can appear in the future.

Sample implementation:

Using the useLoadedChatMessages hook ( https://github.com/bigbluebutton/bigbluebutton-html-plugin-sdk/issues/27 ), observe chat messages that contains a word "@Tiago" and whenever it's found, add a <span style="color: red"> and </span> around it.

Pseudo-code:

const loadedChatMessages = pluginApi.useLoadedChatMessages ( );

const messagesWithMentions = loadedChatMessages.filter ( chatMsg => chatMsg.content.indexOf("@Tiago") );

const messageIds = messagesWithMentions.map(chatMsg => chatMsg.id);

const chatElements = pluginApi.useChatMessageDomElements(messageIds);

chatElements.forEach(
    chatElement => {
        chatElement.innerHtml = chatElement.innerHtml.replace("@Tiago", '<span style="color: red">Tiago</span>');
    }
);

Things to consider:

the hook must be called everytime the dom element is re-rendered by react (so if react undo the changes, the plugin can do it again)
it's going to be plugin responsability to detect if the transformation was already done or not (as the change in one element will cause the method to be called again)

bigbluebutton / bigbluebutton-html-plugin-sdk

DOM element interaction - useChatMessageDomElements #28