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
- 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.$);
- Include the Custom Client Library in Your Component:
- Modify the Component Dialog to Use the Custom Widget:
Asif Ahmed