Add textContent to HTML via MediaWiki template - html

I have created a MediaWiki template named by the Hebrew letter א (template:א). Its content is:
<code></code>
I call it by {{א|SOME_textContent}}.
Desired state
I desire to show a single-line code iside regular text, for example:
הסימן הזה = הינו סימן שוויון
My problem
My problem is that after I save a page with the above template call, I get an empty <code> tag content ().
My question
Why do I get empty <code> tag content (), instead getting SOME_textContent (the input I gave in call after the vertical bar (|))?
Update - I tried this but didn't get desired state
Template page code:
<code>{{{1}}}</code>
Template page output:
{{{1}}}
Article page code:
{{א|=}}
Article page output:
{{{1}}}

By definition, everything inside code tag will not be parsed, so your parameter is interpreted as string.
Instead of using html markup <code>, use parser function #tag like so:
{{#tag:code | { { phone code area: 970}, { phone code area: 961}, { phone code area: 98} } }}
So your template will look like:
<includeonly>{{#tag:code| {{{1}}} }}</includeonly>

A template won't magically insert its parameters unless you tell it. The correct template content would be
<code>{{{1}}}</code>

Related

Mediawiki: how can I use {{PAGENAME}} as part of the file name in a gallery?

I have 3 images that start with the PAGENAME and have different endings. Now I want to display them in a gallery like this:
<gallery>
File:{{PAGENAME}}.png|Adult
File:{{PAGENAME}} Egg.png|Egg
File:{{PAGENAME}} Baby.png|Baby
</gallery>
But the PAGENAME doesn't transclude and the gallery stays empty.
How can I achieve that?
Thanks
edit: I would also like to add the mode="slideshow" parameter to it
Html tags have priority in page content parsing, which means that any parser function inside is interpreted as string. So you need to turn them into a parser function, using #tag
{{#tag:gallery | content }}
Note that you cannot have literal pipes inside content, you have to turn them into a template call, using build-in pipe template:
{{!}}
You'll end up with this code:
{{#tag:gallery |
File:{{PAGENAME}}.png{{!}}Adult
File:{{PAGENAME}} Egg.png{{!}}Egg
File:{{PAGENAME}} Baby.png{{!}}Baby
|mode=slideshow}}

How to show custom html tags as plain text inside innerHtml

I have a sort of strange use-case in Angular 2 where I have some content that contains regular html tags as well as custom html tags. I want to render the regular html tags and show the custom html tags as plain text. For example
the <CUSTOM_TAG>boy</CUSTOM_TAG> went to the <b>store</b>
should have <CUSTOM_TAG>boy</CUSTOM_TAG> appearing as plain text just as you see it above, however <b>store</b> should appear as store i.e. the bold tag is actually rendered.
When I try the usual way of inserting html i.e.
<div [innerHtml]="myHtml"></div>
I get a sanitization error because of the custom tag. When I fix the sanitization error as was done here it just strips out the custom tags which I also don't want. Is showing the custom tags as plain text and rendering the regular html tags possible?
If all the possible custom tags are known, you can encode them before passing the string to the [innerHTML] binding. The method encodeCustomTags in the following code snippet uses a regular expression to replace <customTag> with <customTag>:
private customTags = [
"CUSTOM_TAG",
"otherTag",
];
myHtml = this.encodeCustomTags("the <CUSTOM_TAG>boy</CUSTOM_TAG> went to the <b>store</b>");
private encodeCustomTags(html: string): string {
let regex: RegExp;
for (let tag of this.customTags) {
regex = new RegExp(`<(/?)${tag}>`, "gi");
html = html.replace(regex, `<$1${tag}>`)
}
return html;
}
See this stackblitz for a demo.

link inside a p tag in react

I have a paragraph that is enclosed in artist.bio.summary. This variable contains all the details about an artist. This is fetched from somewhere else. I am printing this out inside a p tag.
My problem is there is a link inside this p tag within a a tag.
The a tag is like this;
Read more
The p tag just prints this out rather than giving me a link to click.
What should I do to act accordingly?
I am calling this property as below:
<p>{artist.bio.summary}</p>
let artist = {
bio: { summary: '' }
};
I had set this artist.bio.summary as a string initially.
And an example string that i am getting is below:
"hello Read more there"
The above string is the content of the artist.bio.summary once i received it
This is a security issue and is not allowed by React (by default) so it's as expected to not evaluate the embedded html markup, but they have a workaround if you really want to. dangerouslySetInnerHTML
<p dangerouslySetInnerHTML={artist.bio.summary}></p>
But please read up on injection attacks so you understand the consequences before using this kind of dynamic evals.
https://www.codeproject.com/Articles/134024/HTML-and-JavaScript-Injection
From you description it seems that artist.bio.summary contains the entire content i.e Read more . In that case what you need is dangerouslySetInnerHTML
<p dangerouslySetInnerHTML={{__html: artist.bio.summary}}/>
However I would suggest you to make modifications to your data such that you aren't actually passing the HTML to the React component but creating it using JSX yourself

can esi:include src be used as an esi variable in html page

Example:
Issue with esi:assign and esi:include in a html page rendered through akamai cdn
http://www.trial.com/abc/def/ghjiy (Akamai rendering src) has content "abc"
In an html page
<esi:include src="http://www.trial.com/abc/def/ghjiy"></esi:include> will return "abc"
can I assign this to a variable so we can use it multiple times in the html page using
<esi:vars>$(val)</esi:vars>
I have tried something like this
<esi:text><esi:assign name="val">'</esi:text><esi:include
src="http://www.trial.com/abc/def/ghjiy"></esi:include><esi:text>'</esi:assign></esi:text>"
But after html page being rendered the <esi:assign> tags has not been parsed and returned
the following in page source
<esi:assign name="val">abc</esi:assign>
You can use esi:eval instead of esi:include.
This http://www.trial.com/abc/def/ghjiy
could return esi code fragment which will be evaluated at the edge. For example:
<esi assign name="val">I assign this to a variable so we can use it multiple times in the html page using</esi:assign>
And then later you can use
<esi:vars>$(val)</esi:vars>

Need to render HTML with Play parameters

I have an object that has a title and some text (item.itmTitle and item.itmText) which I am passing to an HTML template using Play's render() method. Within the template (which in this case is called "index.html) I am trying to display the contents of the item object:
.
.
.
<p class="title">${item.itmTitle}</p>
<div id="itemtext">${item.itmText}</div>
.
.
.
My problem is this: the contents of item.itmText are HTML formatted. What I would like is for the contents to be displayed as HTML, but what is happening is that Play is doing all necessary conversions to display the contents as text. In other words, if item.itmText has the following HTML:
<p>This is a paragraph formatted in HTML</p>
The play template converts the source as follows:
& lt;p& gt;This is a paragraph formatted in HTML& lt;/p& gt;
My question is: is there some way to stop this conversion and make the HTML appear on the page as renderable HTML?
Someone please advise.
${item.itmTitle.raw()}
You just need to make sure that these strings are guaranteed to be safe; e.g. if users are submitting the title or text you need to sanitize the content to prevent injection of javascript (or accidental breakage of your container tags).