bullet listing RTE

This would be component specific styles on how to style <ol></ol> in the component.

You can insert it into the dialog as follows.
 

<text
    jcr:primaryType="nt:unstructured"
    sling:resourceType="cq/gui/components/authoring/dialog/richtext"
    name="./text"
    fieldLabel="Text"
    useFixedInlineToolbar="{Boolean}true">

    <rtePlugins jcr:primaryType="nt:unstructured">
        <format
            jcr:primaryType="nt:unstructured"
            features="[bold,italic,underline]"/>
        <lists
            jcr:primaryType="nt:unstructured"
            features="[ordered,unordered,indent,outdent]"/>
        <links
            jcr:primaryType="nt:unstructured"
            features="[modifylink,unlink]"/>
    </rtePlugins>

    <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
            <inline
                jcr:primaryType="nt:unstructured"
                toolbar="[format#bold,format#italic,format#underline,#lists,links#modifylink,links#unlink]">
                <popovers jcr:primaryType="nt:unstructured">
                    <lists
                        jcr:primaryType="nt:unstructured"
                        items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
                        ref="lists"/>
                </popovers>
            </inline>

            <dialogFullScreen
                jcr:primaryType="nt:unstructured"
                toolbar="[format#bold,format#italic,format#underline,lists#unordered,lists#ordered,lists#outdent,lists#indent,links#modifylink,links#unlink]"/>
        </cui>
    </uiSettings>
</text>

The key parts are:

<lists
    jcr:primaryType="nt:unstructured"
    features="[ordered,unordered,indent,outdent]" />

Hi ​@ShikhaSo6 ,

Great start from migac_jurica on enabling the lists plugin in the dialog that's the right first step to get ordered/unordered list controls in the RTE toolbar.

However, to achieve the specific styled numbered list format in your reference image (larger numbers, custom spacing, distinct font treatment), you'll also need component-level CSS targeting the rendered `<ol>` output. The RTE plugin config only enables the feature the visual styling is handled separately.

In your component's CSS file, target the RTE output like this:

.your-component .cmp-text ol {
    list-style: none;
    counter-reset: custom-counter;
    padding-left: 0;
}

.your-component .cmp-text ol li {
    counter-increment: custom-counter;
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 12px;
}

.your-component .cmp-text ol li::before {
    content: counter(custom-counter);
    font-size: 1.25rem;
    font-weight: 700;
    color: #your-brand-color;
    min-width: 24px;
    flex-shrink: 0;
}

A few things to note for AEM specifically:

1. If you're using Core Components Text component, the rendered markup wraps in `.cmp-text` scope your styles there to avoid bleeding into other RTE instances on the page.

2. If this styled list is only needed in specific components (not site-wide), keep the CSS in that component's clientlib rather than the global styles.

3. If authors need to toggle between a standard list and this styled format, consider creating a custom RTE style via the `paraformat` or `styles` plugin so they can apply it from the toolbar rather than having all `<ol>` elements styled this way globally.

Happy to show the styles plugin config for that last option if useful.

Thanks Akhil, Please show.It will be helpful

​@ShikhaSo6 Sure! Here's how to add a custom RTE style so authors can toggle the styled numbered list from the toolbar, without affecting all `<ol>` elements globally.

Step 1: Add the styles plugin to your RTE dialog config

Inside your `rtePlugins` node, add:

<styles
    jcr:primaryType="nt:unstructured"
    features="*">
    <styles
        jcr:primaryType="nt:unstructured">
        <style1
            jcr:primaryType="nt:unstructured"
            cssName="styled-numbered-list"
            text="Styled Numbered List"/>
    </styles>
</styles>

And in your `uiSettings > cui > inline > toolbar`, add `styles#styles` to the toolbar array.

Step 2: Scope the CSS to that class only

Now update your CSS so it only applies when the author explicitly selects that style:

.cmp-text ol.styled-numbered-list {
    list-style: none;
    counter-reset: custom-counter;
    padding-left: 0;
}

.cmp-text ol.styled-numbered-list li {
    counter-increment: custom-counter;
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 12px;
}

.cmp-text ol.styled-numbered-list li::before {
    content: counter(custom-counter);
    font-size: 1.25rem;
    font-weight: 700;
    color: #your-brand-color;
    min-width: 24px;
    flex-shrink: 0;
}

This way, a regular `<ol>` stays unstyled, and authors only get the custom numbered format when they select "Styled Numbered List" from the RTE styles dropdown. Much cleaner than styling all lists globally.

Hope that helps, let me know if you run into anything with the dialog config.