How to add superscript functionality to single line textfield.

[prachiat]

 suppose i authored video component  .I have video title field as granite/ui/components/coral/foundation/form/text field . I have to add superscript functionality to that field.

I don't want to use rte., rich text box. how i can achieve this anyone can help me on this.

[AsifChowdhury · Accepted solution]

Hi @prachiat 

OOTB there is no functionality to add superscript in the textfield. Maybe you can achieve by creating a custom textfield but it will be a lot overworked compared to just adding the richtext.

You can get an idea to get a custom textfield with superscript support

1. Create a Custom Coral UI Text Field Widget:
   • Create a client library in your AEM project, for example, /apps/your-project/clientlibs/custom-textfield.
   • Include custom-textfield.js and custom-textfield.css files in the client library.

custom-textfield.js

(function(document, $) {
    'use strict';

    $(document).on('foundation-contentloaded', function(e) {
        $('.custom-textfield-superscript').each(function() {
            var $textfield = $(this);

            // Add superscript button
            var $button = $('<button type="button" class="coral-Button coral-Button--quiet custom-superscript-button">Sup</button>');
            $button.insertAfter($textfield);

            $button.on('click', function() {
                var selectionStart = $textfield[0].selectionStart;
                var selectionEnd = $textfield[0].selectionEnd;

                if (selectionStart !== selectionEnd) {
                    var value = $textfield.val();
                    var selectedText = value.substring(selectionStart, selectionEnd);
                    var superscriptText = '<sup>' + selectedText + '</sup>';
                    var newText = value.substring(0, selectionStart) + superscriptText + value.substring(selectionEnd);

                    $textfield.val(newText);
                }
            });
        });
    });
})(document, Granite.$);

2. Include the Custom Client Library in Your Component:
   • Ensure your component's dialog includes the custom client library.

     <clientlibs
         jcr:primaryType="nt:unstructured"
         categories="[custom-textfield]" />

3. Modify the Component Dialog to Use the Custom Widget:
   • Update your component's dialog to use the custom Coral UI text field.

     <videoTitle
         jcr:primaryType="nt:unstructured"
         sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
         fieldLabel="Video Title"
         name="./videoTitle"
         class="custom-textfield-superscript" />​

Asif Ahmed