Return a custom HTML element when Regex is match

[brazzerstop]

Hello!

I'm work on new function in plugin and have problem with return a custom HTML element when regex is match. This is a code what I mean:

function applyUXPlayer(textContent) {
    if (textContent.match(uxRegex)) {
        textContent = textContent.replace(uxRegex, function (match, text) {
            return `<ux-player autoplay loop src="${text}"></ux-player>`;
        });
    }

    return textContent;
}

I get this result in post body (empty):

Should be this:

<ux-player autoplay loop src="video.webm"></ux-player>

Custom HTML element like ux-player not return in message body, but this html code work in my HTML widget. How I can fix it?

[baris]

Try:

myPlugin.filterSanitizeConfig = function (config) {
    config.allowedTags.push('ux-player');
    config.allowedAttributes['ux-player'] = config.allowedAttributes['ux-player'] || [];
    config.allowedAttributes['ux-player'].push('src');
    return config;
}

[PitaJ]

1. Add a console.log or something at the top of the function to see if it's actually running
2. What is the regex and what do you expect it to match?

[brazzerstop]

@PitaJ

I'm test it and regex is work correctly when I change HTML-element ux-player to div, span, p or a

return `<div ux-player autoplay loop src="${text}"></div>`;

Regex

/\[ux-player\](?:\+)(.+?)(\+)/g;

Full code - library.js (in this release without ux-player, to looks how code work)

I think something is blocking the insert of unknown or unsafe HTML elements, for example, the code doesn't work if you try to return

<script>${text}</script>

[brazzerstop]

Ok, I found a problem - the sanitize html blocked a ux-player. To solved this I added ux-player to allowedTags in parse.js (core) so now I have this result:

But this html element don't have a src attribute with url, I'm go to add rule in allowedAttributes:

ux-player: ['src'],

and get this error SyntaxError: Unexpected string when try build nodebb:

...
parse.js:25\n\t\tux'-'player: ['src'],\n\t\t         ^^^\n\nSyntaxError: Unexpected string\n
...

When I remove symbol - from name of ux-player, nodebb builds without this error, so how I can allow src for ux-player with symbol - in he name?

[baris]

You should probably add it as 'ux-player': ['src'], You can also use the hook filter:sanitize.config to make the changes instead of modifying core.

[brazzerstop]

@baris said in Return a custom HTML element when Regex is match:

You should probably add it as 'ux-player': ['src'], You can also use the hook filter:sanitize.config to make the changes instead of modifying core.

I tested 'ux-player': ['src'], and it works, but I decided that it would be better to follow your recommendation and do it inside the plugin.

I added a new tag here and it works:

config.allowedTags.push('ux-player');

I view message body have a new ux-player tag, but when I try add attributes it's not work

config.allowedTags.push('ux-player');
config.allowedAttributes['ux-player'].push('src');

[baris]

Try:

myPlugin.filterSanitizeConfig = function (config) {
    config.allowedTags.push('ux-player');
    config.allowedAttributes['ux-player'] = config.allowedAttributes['ux-player'] || [];
    config.allowedAttributes['ux-player'].push('src');
    return config;
}

[brazzerstop]

@baris this is work! Thank you!