PrimeFaces 7.0 <p:textEditor HTML-sanitizer discards text formatting, such as centering - primefaces

In PrimeFaces 8, it seems to be possible to enable / disable HMTML -sanitizer when using the <p:textEditor component by just specifying secure='false' for disabling it and secure='true' for enabling it. I tried to disable it in PrimeFaces 7.0 like this:
<p:textEditor id="quillToolbarId" secure='false' widgetVar="editor2" height="300" value="#{editTemplatesBean.kaufAnbotTemplate}" placeholder="Enter your content">
but the sanitizer still seems to be working.
My problem is that whenever I format a text in the primeFaces p:textEditor to be center-aligned, the HTML sanitizer just removes my formatting, so the text ends up without formatting.
One way to work this around is to use directly Quill and not Sanitize the input.This works, but then I face other problems, such as this one:
https://github.com/quilljs/quill/issues/1379
which also need to be worked-around.
Please help!

There is no secure property in TextEditor for PrimeFaces 7. If you look at the code of TextEditorRenderer.decode you will see that the sanitzier is called
if (PrimeApplicationContext.getCurrentInstance(context).getEnvironment().isHtmlSanitizerAvailable()) {
value = HtmlSanitizer.sanitizeHtml(value,
editor.isAllowBlocks(), editor.isAllowFormatting(),
editor.isAllowLinks(), editor.isAllowStyles(), editor.isAllowImages());
}
And if you look into PrimeEnvironment you'll see that the property will be set if the class org.owasp.html.PolicyFactory is available on classpath:
htmlSanitizerAvailable = LangUtils.tryToLoadClassForName("org.owasp.html.PolicyFactory") != null
So you either:
update to PF 8
make sure that you don't have this class on the classpath
override the renderer and change/remove the code for the check

Related

PrimeFaces Schedule not showing all times with some SlotDuration configuration

When using the default slotDuration of PrimeFaces Schedule, or "00:15:00" for an example, the component don't show all times. If I change it to some values like "00:45:00" or even "00:15:01", the schedule show all times correctly.
Inspecting the HTML/CSS, in the cases of not showing the time, the <td> tag don't have a <span> tag inside with the time, and has the CSS class "fc-minor"
I couldn't find in documentation about this problem. I already tested with the deprecated slotMinutes, but it has the same behaviour.
Schedule with blank spaces between times:
https://imgur.com/a/TOCey4R
Schedule code:
<p:schedule id="agendaOcupacional" allDaySlot="false" timeFormat="HH:mm" axisFormat="HH:mm"
draggable="false" resizable="false" slotDuration="00:15:00" timeZone="GMT-3"
displayEventEnd="true" value="#{agendamentoBean.lazyEventModel}" locale="br"/>
I'm using Primefaces 6.1.
Thanks.
It appears PF is missing the value for slotLabelInterval which fixes this issue.
I created this GitHub issue: https://github.com/primefaces/primefaces/issues/4896
Submitted this PR: https://github.com/primefaces/primefaces/pull/4897
Hopefully it will be fixed in PrimeFaces 7.1.
For now you can use the Extender to configure it: https://primefaces.github.io/primefaces/7_0/#/components/schedule?id=extender-method

How to see if Chrome manipulates HTML by itself?

If you forget to close a HTML-Tag, Chrome will validate your code and try to fix problems like this.
I had a major problem because I forgot a closing Form-Tag, and instead of closing it correctly, Chrome deleted a following form, not the inputs, simply the Form-Tags.
When I looked at the Source Code itself, the Form-Tag was there, but not in the Elements-Tab in the console.
So at first, I thought it must have something to do with some JS deleting this DOM-Node and set a DOM-Breakpoint to find the script.
To cut a long story short, it took me hours to find out, that no JS deleted my form, but Chrome itself thought: There is a missing so I delete some other to fix that...
Is there any possibilty to see if Chrome automatically changes your DOM?
Thank You!
The browser Engine does indeed. They use string replace methods, although it happens internally.
<div>
</div>> // mistake
<div> //missing end tag
<div></div>
---------------------------------------------------
Methods
file=file.stringreplace('>>', '>')
an uneven count will add the missing div just after the next beginning div and conditionally if the missing is not found by the end of the file:
file=file.stringreplace('
<div>', '</div>
<div>')
The Parsing Engine after the missing and broken tags are repaired then parses the file and can then with a positive count set the screens GUI widgets by opening and closing tags as GUI Frames. It does this by adding tokens delimiters to the actual div tags making them easily distinguished from each other.
<div1s>
</div1e>
<div1s>//section columns
<div2s></div2e>
<div2s></div2e>
<div2s></div2e>
</div1e>
<div1s>Footer</div1e>
-----------------------------------------------------
The GUI Frame Tokens
for each "<dive1>"{
FrameCreate(CSS--ATTRIBUTES FROM ASSOCIATIVE ARRAYS--)
//the GUI Frame Widgets VERTICAL SECTIONS
}
//Next it finds the nested divs2 and embeds these into the thir parents above but with embedded Text Widgets also.
FrameTextBoxCreate(--CSS MATED ATTRIBUTES RULES--)
div3 etc------and so on.
In fact it is in the WebView GUI Widget Sets in its customized Mosaic Canvas Widget Sets in Chrome would be where they are repaired.

Angular make entire Handsontable readonly in HTML

I would like to make my Handsontable completely readonly, I have found some solutions on how to make it readonly via a controller but I would like to do the same in the HTML only. So no javascript changes.
<hot-table id="demoTable"
colHeaders="true"
datarows="gridData"
settings="gridPreferences"
height="300">
<!-- BasicData -->
<hot-column data="row_id" title="'ID'" type="'text'"></hot-column>
Here is an example column in the table, is it possible to make it readonly right here?
You can make individual hot-columns read only by adding the attribute read-only
<hot-column data="row_id" title="'ID'" type="'text'" read-only></hot-column>
---------------------------------------------------------^
The attribute isn't documented well but example usage can be found in the plugin's README.

Dynamically re-bind html.ValidationMessageFor html helper?

Some background information, I am using ASP.NET with the MVC framework and html helpers.
I currently have a dynamic table where each row has a series of input boxes. Each of these input boxes has a validation message. This works completely fine for the first row. However, when other rows are dynamically added (with the IDs' being changed along with other attributes to match the row number) the validation message no longer works.
Both the row and validation message span are being replicated properly.
In JQuery, this is usually just a problem with the binding, so for each row I would simply re-bind the IDs'. However I am not really to sure how to approach them in ASP.NET.
Any assistance would be appreciated.
Thanks
Alright, I have finally figured this out.
In MVC, in order to handle the validation, it import a JQuery file known as jquery.validate.unobtrusive.js.
However, similar to JQuery, this only occurs at the very beginning when the page is loaded. So, when you add a new dynamic element, you need to remove the bindings and the re-bind them again.
Basically, in your function for adding a new element, put the following lines of code AFTER you have added the new element:
$("#form").removeData("validator");
$("#form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("#form");
For example:
function addInfoDynamic()
{
document.getElementById("#myDiv").innerHTML += "New Content";
$("#form").removeData("validator");
$("#form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("#form");
}

Programmatically create HTML form fieldset tag with JSF

In my Java code I want to programmatically create a <fieldset> tag that I can use in my JSF form.
The setup of my form looks like this:
Application app = FacesContext.getCurrentInstance().getApplication();
HtmlForm form = (HtmlForm) app.createComponent(HtmlForm.COMPONENT_TYPE);
form.setStyleClass("pure-form pure-form-stacked");
As you can see I use HtmlForm.COMPONENT_TYPE as an identifier for the JSF UI component but I haven't found an identifier for a fieldset so I tried:
UIComponent fieldset = app.createComponent("fieldset");
form.getChildren().add(fieldset);
Unfortunately this is not working so I have to come up with another solution. Do you have any ideas?
Is there a general approach how HTML tags (which are unknown in the JSF context) can be created?
You can try the following:
Theres a component called <f:verbatim> which you would use in xhtml like this:
<f:verbatim escape="false">
<fieldset id="blah"></fieldset>
</f:verbatim>
To achieve that programmaticlly you can add this component like this:
String fieldsetHTMLText ="<fieldset id=\"blah\"></fieldset>";
UIOutput verbatim = new UIOutput();
verbatim.setRendererType("javax.faces.Text");
verbatim.getAttributes().put("escape", false);
verbatim.setValue(fieldsetHTMLText);
I found three solutions to my problem. The first one is to use PrimeFaces, the second one is to use MyFaces Tomahawk and the third one is to use a JSF Verbatim UI component with string input. I will shortly list up code samples and the differences between the solutions.
1 PrimeFaces
With an include of the PrimeFaces components suite (and it's Apache Commons FileUpload dependency) one can use the Fieldset class to programatically create a fieldset on-the-fly. The bad thing on that is, that the PrimeFaces Fieldset component is depends on a PrimeFaces JavaScript file so instead of the plain fieldset, one will get a fieldset and a JavaScript include which is way too much.
import org.primefaces.component.fieldset.Fieldset;
...
form.getChildren().add(new Fieldset());
2 MyFaces Tomahawk
The UI component set Tomahawk also comes with a Fieldset component that can be used to create an HTML fieldset programatically. If the Fieldset of Tomahawk will be used, then one will get a plain and nice-looking fieldset tag. The bad thing here is that Tomahawk is an extension to MyFaces and MyFaces itself is a whole JavaServer Faces implementation which should not be used alongside standard JSF.
import org.apache.myfaces.custom.fieldset.Fieldset
...
form.getChildren().add(new Fieldset());
3 JSF Verbatim UI Component
The standardized and hacky way is to use a JSF Verbatim UI component. Within a verbatim component you are allowed to put any HTML needed. With this little trick we can create a verbatim tag:
UIOutput fieldset = new UIOutput();
fieldset.setRendererType("javax.faces.Text");
fieldset.getAttributes().put("escape", false);
fieldset.setValue("<fieldset></fieldset>");
The code shown above renders a fieldset HTML element but because it is a string and the tag inside the string is closed you cannot programatically append anything to that tag, so this won't work:
form.getChildren().add(fieldset);
To generate an HTML tag that can be used for nesting of elements, each opening and closing tag must be put in an own Varbatim component which makes this solution very text heavy:
UIOutput fieldsetStart = new UIOutput();
fieldsetStart.setRendererType("javax.faces.Text");
fieldsetStart.getAttributes().put("escape", false);
fieldsetStart.setValue("<fieldset>");
UIOutput fieldsetClose = new UIOutput();
fieldsetClose.setRendererType("javax.faces.Text");
fieldsetClose.getAttributes().put("escape", false);
fieldsetClose.setValue("</fieldset>");
HtmlInputText inputText = (HtmlInputText) app.createComponent(HtmlInputText.COMPONENT_TYPE);
form.getChildren().add(fieldsetStart);
form.getChildren().add(inputText);
form.getChildren().add(fieldsetClose);
Conclusion:
None of the solutions shown is really elegant. PrimeFaces und MyFaces have large dependencies and the standard JEE way requires practally much writing effort. I had hoped to find a nice solution to produce unknown / custom HTML elements, such as: document.createElement("fieldset");.
If anyone knows a way to do that, please post the solution.