Displaying links in HTML Area

Help
#1

Based on WCAG and the Norwegian “Kvalitetskrav from Difi” (although not active anymore due to waiting for EU regulations) it is seen as best practice to show more info about a link by including filetype and size, if we are linking to a file (Word, PDF and so on). The user should know it is a PDF before clicking the link, and also know the size of the file.

This is very important for many of our governmental customers and something I wish we could solve somehow. It is easy if the file is linked up to an article by a content selector, but many times customer inserts it as a content link to a file object inside the HTML Area, and here we have very limited possibility to format/edit the output. Do you have any suggestion to how we can solve this? Or do you have anything in your backlog for more control of the output from the HTML Area coming soon?

#2

Hi Jo Henrik.

From your request, I assume you are using the standard XP rendering framework (not headless).

You can actually handle this yourself, it has always been possible. The way to do this is by implementing your own region renderer, and take over text component rendering from there.

Other components should simply leave a placeholder (in the form of an html comment), and the rendering engine will pick up and process these automatically. To see what these look like, dump the output from a regular region render before it is returned by the controller.

I’ll see if we have an example of this. NB! You must use the standard text component rendering in edit mode.

As for tuning the actual rich text output to your desire, that is a slightly bigger topic.

#3

Interesting, an example is much appreciated.

Tuning the rich text output is indeed much bigger topic, but I hope you will slowly work in that direction.

#4

Here is an example that shows custom rendringer of text components

const portal = require('/lib/xp/portal');

/**
 * @param {object} param
 * @param {object} param.region Object containign the region you render
 * @param {string} [param.type] String url type server - relative
 *
 * @returns
 */
 let processRegion = function (param) {
    if (!param.region) throw 'Region is required';
    const region = param.region;

    for (let i = 0; i < region.components.length; i++) {
        let component = region.components[i];

        if (component.type == "text") {
            const processData = { value: component.text };
            if (param.type) {
                processData.type = param.type;
            }

            /* Custom handeling goes here */

            const out = portal.processHtml(processData);
            component.text = out;
        }
    };

    return region;
}

And the region passed in would look be something like this:

let mainRegion;
// If we render a fragment they might not have any regions
if (!content.type === 'portal:fragment',) {
    // content studio drag drog regions render incorrectly so use the default rendering
    if (req.mode == 'live' || req.mode == "preview") {
        mainRegion = processRegion({
        region: content.page.regions.main,
            type: 'server',
        });
    } else {
        mainRegion = content.page.regions.main;
    }
}

This would let you modify the output of text components.
It could be modified to handle parts.

1 Like