Sightly replace tag with different value - AEM

0
votes

I am trying to manipulate the content read from RTE. RTE places a <br> tag for Shift+Enter. For WAI compliance, need to replace <br> with <br aria-hidden='true'>.

Tried following in JavaScript Use API, but following is not working, it keeps the tag as is

text.replaceAll("<br>","<br aria-hidden='true'>");

If I replace with some different tag it replaces the value properly

text.replaceAll("<br>","<div>Something</div>");

Tried same thing in Java Use API also, but not working. Any pointers would help.

2
aemsightly
check whether if you replace with <br> but containing a known proper data-attribute would work - cause it seems like tag argument validation to me. e.g try <br class='sth' /> btw the <br> should be <br/> (closed tag) also how do you finally output your html ? cause maybe it just clears your attribute.. – ub1k
@ub1k This works fine with known attribute e.g. class. WAI is a W3C standard, was expecting it to work. – Sandeep Kumar

2 Answers

1
votes

The rte plugin that you need to override is KeyPlugin present at /etc/clientlibs/granite/coralui2/optional/rte/js/core/plugins/KeyPlugin.js.

Around line 254 when it creates the <br> element, add your attribute using
newBr.setAttribute('aria-hidden', true);

Debug Tip: You can set a debug point in Chrome on this file and change the code at runtime (search for KeyPlugin) /etc/clientlibs/granite/coralui2/optional/rte.js

Once you do this, on click of dialog ok, you can see <br aria-hidden="true"> being posted to the server in the network console.

After this you'll probably run into Sling's XSS protection which strips off this attribute from the resulting HTML. Look for this log

org.apache.sling.xss.impl.HtmlToHtmlContentContext AntiSamy warning: The br tag contained an attribute that we could not process. The aria&#45;hidden attribute has been filtered out, but the tag is still in place. The value of the attribute was "true".

I know of two ways to deal with that.

  1. Use the 'unsafe' context in sightly.
  2. Override /libs/sling/xss/config.xml and modify the validation of <br> tag.
1
votes

If you look at /libs/cq/ui/rte/core/DomProcessor.js and /libs/cq/ui/rte/core/HtmlProcessor.js in CRXDE, you will find lot of tag specific handling happening here.

Now there are multiple ways to proceed -

  1. Figure out the right place to add your custom handling by overlaying one of the two JS (I am not sure if JS overlaying works or not as these are static resources).
  2. In your rendering logic where in you are using Java Use API, add a custom processing step based on string tokenization to process the <br> node and add attributes to them.
  3. Write a custom rewriter to process <br> tag and add attributes you desire to it. Make is configuration driven to allow for future changes.
  4. Use JQUERY to process the <br> element and add your custom attributes to it.

Something I have not explored is the HTML rules that can be defined or customized for a RTE, if you have time you could figure out if a rule can be defined to achieve what you want which would be the best solution in my opinion.