Adding rich text formatting to a title component

[SiriusRex]

A designer on our team is asking us to modify our Title component to allow the use of bold formatting on part or all of the title. Bolding the whole thing would be easy enough, but it's the partial bolding of text that I can't figure out.

I've tried switching the field to richtext and then eliminating all plugins except the bold formatting. But the problem there is that now I have a huge text entry box and I can't figure out how to make it one line. 

I'm wondering if there's a different approach - all of the OOTB Title components don't allow rich text formatting, and none of them seem to have single line entry fields that allow rich text, either. 

[Vijayalakshmi_S]

Hi @SiriusRex,

Rich text editor has a predefined height set in OOB CSS via height and padding properties.

Now per your use case to reduce it to one line height or for a look alike of text field, you can write CSS overwriting the same. 

To target specifically without affecting all richtext resource in general, within dialog content markup we have an hidden field capturing sling:resourceType which will have the value as component path of respective dialog. (screenshot #1)

Using this as an identifier, am suppressing the related properties as shown below

Sample snippet for reference (You can add in project specific clientlibs folder or clientlibs with category - cq.authoring.dialog as this is needed only in author)

Below is per AEM 6.5.0

$(document).on("dialog-ready", function() {
    	var rescType = $(".coral3-Dialog-content input[name='./sling:resourceType']").val();
    	console.log("Resource Type="+rescType)
        if(rescType.includes("learnings/components/content")){ // applies to all component dialogs under this path - learnings/components/content
            $(".cq-Dialog:not([fullscreen]) .cq-RichText-editable").css("height", "unset");
			$(".cq-RichText-editable").css({"min-height":"unset", "padding":"unset"});
            $(".cq-Dialog[fullscreen] .cq-RichText .rte-sourceEditor").css("height", "unset"); // for full screen
        }

    });

Screenshot 1:

Outcome in richtext field:

[SiriusRex]

Unfortunately, I don't think we have dialog markdown that I can modify. I've only ever built the dialog using nodes/XML. I'm assuming that maybe I can add a custom data variable that can be used for targeting by CSS.

[Vijayalakshmi_S]

Hi @SiriusRex,

By the term "dialog markup", I meant the markup of the actual dialog resource - cq/gui/components/authoring/dialog which has element named "coral-dialog-content" (as evident from "Elements" section when you inspect the dialog from being in page) and we are not modifying the same. We are trying to identify the unique element/identifier

You can use custom data attribute via granite:data or property like validation/granite:class/granite:id. (have to add this in all dialog -> richtext fields where the change is needed)

Based on your usage, you can decide on the unique identifier.

[Shashi_Mulugu]

@SiriusRex I understand your problem statement and converting to rich text is the only way I see, but I didn't understand your concern of having RTE editor as big box in authoring dialog?

Can you please explain more about that? As RTE is a free form text editor with OOTB unlimited content capabilities it is big in size?

Do you want to make it appear small or restrict content entry to limited lines?

To limit box size , no OOTB way but try playing with coral.rte css and override with our custom css by creating a custom clientlib

For Charatcer limit restrictions we can implement validators which is again custom implementation.

[SiriusRex]

I'd like to use the RTE for a title component, which generally implies a limited number of characters. Titles rarely exceed more than a few words, and having the full RTE box might suggest to our authors that they can insert longer than normal titles. I don't think we're at the point of limiting characters through validation. We just want a visual reinforcement of the idea that titles should be kept short.

[arunpatidar]

You can add granite:class property to text field node, which will be adding class to DOM and control height using css. Just make sure if you are using RTE you should be removing default p tag otherwise semantics could be the problem.

[SiriusRex · Accepted solution]

Ultimately, all I needed to do was create a data-attribute on the richtext node that I could target with authoring-specific CSS. The answers below all point to that, but I think maybe went in a direction that was too complex for what I was trying to do.