Enable Lowercase alphabets in RTE component in touch ui

Hi Sree,

Thanks for the post and I tried to use your code for AEM 6.1 and facing an issue like, when I have selected numbered list in touch ui, it takes alphabets list and alphabet list icon is not selected and disabled instead numbered list icon is selected always.

Below is the code I used :

(function ($) {

    "use strict";

    var _ = window._,

        Class = window.Class,

        GROUP = "experience-aem",

        ALPHA_LIST_FEATURE = "alphaList",

        ORDERED_LIST_CMD = "insertorderedlist",

        CUI = window.CUI;

    addPluginToDefaultUISettings();

    var EAEMAlphaListCmd = new Class({

        extend: CUI.rte.commands.List,

        toString: "EAEMAlphaListCmd",

        execute: function(execDef) {

            this.superClass.execute.call(this, execDef);

            var list = this.getDefiningListDom(execDef.editContext, execDef.nodeList);

            if(!list){

                return;

            }

            $(list).attr("type", "a");

        }

    });

    CUI.rte.commands.CommandRegistry.register("_list", EAEMAlphaListCmd);

    var EAEMAlphaListPlugin = new Class({

        toString: "EAEMAlphaListPlugin",

        extend: CUI.rte.plugins.Plugin,

        pickerUI: null,

        getFeatures: function () {

            return [ALPHA_LIST_FEATURE];

        },

        initializeUI: function(tbGenerator) {

            var plg = CUI.rte.plugins;

            if (!this.isFeatureEnabled(ALPHA_LIST_FEATURE)) {

                return;

            }

            this.pickerUI = tbGenerator.createElement(ALPHA_LIST_FEATURE, this, false, this.getTooltip("toggle"));

            tbGenerator.addElement(GROUP, plg.Plugin.SORT_FORMAT, this.pickerUI, 10);

            var groupFeature = GROUP + "#" + ALPHA_LIST_FEATURE;

            tbGenerator.registerIcon(groupFeature, "coral-Icon coral-Icon--textLetteredLowercase");

        },

        execute: function (id, value, envOptions) {

            if (!isValidSelection()) {

                return;

            }

            this.editorKernel.relayCmd(ORDERED_LIST_CMD);

            function isValidSelection(){

                var winSel = window.getSelection();

                return winSel && (winSel.rangeCount == 1) && (winSel.getRangeAt(0).toString().length > 0);

            }

        },

        updateState: function(selDef) {

            var hasUC = this.editorKernel.queryState(ALPHA_LIST_FEATURE, selDef);

            if (this.pickerUI != null) {

                this.pickerUI.setSelected(hasUC);

            }

        }

    });

    function addPluginToDefaultUISettings(){

       var toolbar = CUI.rte.ui.cui.DEFAULT_UI_SETTINGS.inline.toolbar;

        toolbar.splice(3, 0, GROUP + "#" + ALPHA_LIST_FEATURE);

        toolbar = CUI.rte.ui.cui.DEFAULT_UI_SETTINGS.fullscreen.toolbar;

        toolbar.splice(3, 0, GROUP + "#" + ALPHA_LIST_FEATURE);

    }

    CUI.rte.plugins.PluginRegistry.register(GROUP,EAEMAlphaListPlugin);

})(jQuery);

Excellent post

A Touch UI expert said the following post comes pretty close; instead of a.b.c it adds a background color

http://experience-aem.blogspot.com/2017/05/aem-62-touch-ui-extend-rte-list-plugin-for-adding-selected-css-class.html

We are checking internally for this.