RTE source edit styling

[StephanePo1]

Greetings community,

I have a problem with my RTE. I have the misc tool source edit plugin set up. But lists are not rendered correctly in the Rich text edit mode.
see the two enclosed pictures:

Here on this last picture, I can't see the bullet points of my list. This happens also on numbered lists, and I also have an issue related to intented blocks in a list, they are rendered as multiple columns weirdly.

The configuration of my rte seems correct.

Finally, when I click on Done in the dialog, I have an error in my console:

HTML tags must be properly nested and closed: <div class="richtexteditor">



    
    
        
    




    
    <div class="richtext " data-ext-icon="<svg viewBox=&quot;0 0 79 79&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; class=&quot;icon--decorative&quot; role=&quot;presentation&quot;>
    <title>An icon of a outbound link arrow</title>
    <path class=&quot;icon-stroke&quot; d=&quot;M75.3037 3.98207L3 75.5935M75.3037 3.98207L76.0435 43.3021M75.3037 3.98207L35.951 3.59351&quot; stroke=&quot;#F22F46&quot; stroke-width=&quot;5.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/>
</svg>
">
        <ul><li>First item</li><li>Second item</li></ul>

    </div>



<cq data-path="/content/twilio-com/global/language-masters/en/test/test/stef-test-rte/jcr:content/root/global-main/layout_container/column-0/richtexteditor" data-config="{&quot;path&quot;:&quot;/content/twilio-com/global/language-masters/en/test/test/stef-test-rte/jcr:content/root/global-main/layout_container/column-0/richtexteditor&quot;,&quot;slingPath&quot;:&quot;/content/twilio-com/global/language-masters/en/test/test/stef-test-rte/jcr:content/root/global-main/layout_container/column-0/richtexteditor.html&quot;,&quot;dialog&quot;:&quot;/apps/twilio-foundation/components/content/richtexteditor/cq:dialog&quot;,&quot;dialogLoadingMode&quot;:&quot;auto&quot;,&quot;dialogLayout&quot;:&quot;auto&quot;,&quot;dialogSrc&quot;:&quot;/mnt/override/apps/twilio-foundation/components/content/richtexteditor/_cq_dialog.html/content/twilio-com/global/language-masters/en/test/test/stef-test-rte/jcr:content/root/global-main/layout_container/column-0/richtexteditor&quot;,&quot;designDialog&quot;:&quot;/apps/twilio-foundation/components/content/richtexteditor/cq:design_dialog&quot;,&quot;designDialogLayout&quot;:&quot;fullscreen&quot;,&quot;designDialogLoadingMode&quot;:&quot;auto&quot;,&quot;designDialogSrc&quot;:&quot;/mnt/override/apps/twilio-foundation/components/content/richtexteditor/_cq_design_dialog.policydesign.editabletemplate.html/conf/twilio-com/settings/wcm/policies/twilio-com/components/content/richtexteditor/policy_1658225818497?dialog=%2Fapps%2Ftwilio-foundation%2Fcomponents%2Fcontent%2Frichtexteditor%2Fcq%3Adesign_dialog&amp;referrer=%2Fcontent%2Ftwilio-com%2Fglobal%2Flanguage-masters%2Fen%2Ftest%2Ftest%2Fstef-test-rte&amp;policyContentPath=%2Fcontent%2Ftwilio-com%2Fglobal%2Flanguage-masters%2Fen%2Ftest%2Ftest%2Fstef-test-rte%2Fjcr%3Acontent%2Froot%2Fglobal-main%2Flayout_container%2Fcolumn-0%2Frichtexteditor&amp;policyContentResourceType=twilio-com%2Fcomponents%2Fcontent%2Frichtexteditor&amp;policyDirectoryPath=%2Fconf%2Ftwilio-com%2Fsettings%2Fwcm%2Fpolicies%2Ftwilio-com%2Fcomponents%2Fcontent%2Frichtexteditor%2F&amp;policyMappingPath=%2Fconf%2Ftwilio-com%2Fsettings%2Fwcm%2Ftemplates%2Fbase-page%2Fpolicies%2Fjcr%3Acontent%2Froot%2Fglobal-main%2Ftwilio-com%2Fcomponents%2Fcontent%2Frichtexteditor&amp;policyMappingResourceType=wcm%2Fcore%2Fcomponents%2Fpolicies%2Fmapping&amp;policyName=policy_1658225818497&amp;policyRelativePath=twilio-com%2Fcomponents%2Fcontent%2Frichtexteditor%2Fpolicy_1658225818497&amp;resourceType=wcm%2Fcore%2Fcomponents%2Fpolicy%2Fpolicy&quot;,&quot;designDialogClassic&quot;:&quot;/apps/twilio-foundation/components/content/richtexteditor/cq:design_dialog&quot;,&quot;hasPolicyMapping&quot;:true,&quot;type&quot;:&quot;twilio-com/components/content/richtexteditor&quot;,&quot;isResponsiveGrid&quot;:false,&quot;policyPath&quot;:&quot;root/global-main/twilio-com/components/content/richtexteditor&quot;,&quot;csp&quot;:&quot;base-page|page|basicpage/root|column-container/column-container/layout-container/layout-column/richtexteditor&quot;,&quot;editConfig&quot;:{&quot;inplaceEditingConfig&quot;:{&quot;active&quot;:true,&quot;editorType&quot;:&quot;text&quot;,&quot;configPath&quot;:&quot;/apps/twilio-foundation/components/content/richtexteditor/cq:editConfig/cq:inplaceEditing/inplaceEditingConfig&quot;}},&quot;ipeConfig&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;rtePlugins&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;color-picker&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;features&quot;:&quot;*&quot;},&quot;edit&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;features&quot;:&quot;paste-plaintext&quot;},&quot;experience-aem-fonts&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;features&quot;:&quot;*&quot;},&quot;findreplace&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;features&quot;:&quot;*&quot;},&quot;format&quot;:{&quot;features&quot;:&quot;bold,italic,underline&quot;,&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;},&quot;image&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;features&quot;:&quot;*&quot;},&quot;justify&quot;:{&quot;features&quot;:&quot;*&quot;,&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;},&quot;links&quot;:{&quot;features&quot;:&quot;modifylink,unlink,anchor&quot;,&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;},&quot;lists&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;features&quot;:&quot;*&quot;},&quot;misctools&quot;:{&quot;features&quot;:&quot;sourceedit,specialchars&quot;,&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;specialCharsConfig&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;chars&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;item0&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;entity&quot;:&quot;&amp;copy;&quot;,&quot;name&quot;:&quot;copyright&quot;},&quot;item1&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;entity&quot;:&quot;&amp;reg;&quot;,&quot;name&quot;:&quot;registered&quot;},&quot;item2&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;entity&quot;:&quot;&amp;trade;&quot;,&quot;name&quot;:&quot;trademark&quot;},&quot;section&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;entity&quot;:&quot;&amp;#167;&quot;},&quot;dagger&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;entity&quot;:&quot;&amp;#134;&quot;},&quot;double_dagger&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;entity&quot;:&quot;&amp;#135;&quot;}}}},&quot;paraformat&quot;:{&quot;features&quot;:&quot;*&quot;,&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;formats&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;item0&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;description&quot;:&quot;Paragraph&quot;,&quot;tag&quot;:&quot;p&quot;},&quot;item1&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;description&quot;:&quot;Heading 2&quot;,&quot;tag&quot;:&quot;h2&quot;},&quot;item2&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;description&quot;:&quot;Heading 3&quot;,&quot;tag&quot;:&quot;h3&quot;},&quot;item3&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;description&quot;:&quot;Heading 4&quot;,&quot;tag&quot;:&quot;h4&quot;},&quot;item4&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;description&quot;:&quot;Heading 5&quot;,&quot;tag&quot;:&quot;h5&quot;},&quot;item5&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;description&quot;:&quot;Heading 6&quot;,&quot;tag&quot;:&quot;h6&quot;}}},&quot;spellcheck&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;features&quot;:&quot;*&quot;},&quot;styles&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;features&quot;:&quot;*&quot;,&quot;styles&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;copy1&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;text&quot;:&quot;Paragraph SM&quot;,&quot;cssName&quot;:&quot;copy-small&quot;},&quot;copy2&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;text&quot;:&quot;Paragraph MD&quot;,&quot;cssName&quot;:&quot;copy-medium&quot;},&quot;copy3&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;text&quot;:&quot;Paragraph LG&quot;,&quot;cssName&quot;:&quot;copy-large&quot;},&quot;copy4&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;text&quot;:&quot;Paragraph XL&quot;,&quot;cssName&quot;:&quot;copy-extra-large&quot;},&quot;other1&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;text&quot;:&quot;Supertext&quot;,&quot;cssName&quot;:&quot;title-super-text&quot;},&quot;other2&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;text&quot;:&quot;Code Snippet&quot;,&quot;cssName&quot;:&quot;code-markup&quot;}}},&quot;subsuperscript&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;features&quot;:&quot;*&quot;},&quot;table&quot;:{&quot;features&quot;:&quot;-&quot;,&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;hiddenHeaderConfig&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;hiddenHeaderClassName&quot;:&quot;cq-wcm-foundation-aria-visuallyhidden&quot;}},&quot;tracklinks&quot;:{&quot;features&quot;:&quot;*&quot;,&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;},&quot;undo&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;features&quot;:&quot;*&quot;},&quot;video-selector&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;features&quot;:&quot;*&quot;}},&quot;uiSettings&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;cui&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;inline&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;toolbar&quot;:[&quot;#format&quot;,&quot;#justify&quot;,&quot;#lists&quot;,&quot;links#modifylink&quot;,&quot;links#unlink&quot;,&quot;#paraformat&quot;,&quot;fullscreen#start&quot;,&quot;control#close&quot;,&quot;control#save&quot;],&quot;popovers&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;format&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;ref&quot;:&quot;format&quot;,&quot;items&quot;:[&quot;format#bold&quot;,&quot;format#italic&quot;,&quot;format#underline&quot;]},&quot;justify&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;ref&quot;:&quot;justify&quot;,&quot;items&quot;:[&quot;justify#justifyleft&quot;,&quot;justify#justifycenter&quot;,&quot;justify#justifyright&quot;,&quot;justify#justifyjustify&quot;]},&quot;lists&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;ref&quot;:&quot;lists&quot;,&quot;items&quot;:[&quot;lists#unordered&quot;,&quot;lists#ordered&quot;,&quot;lists#outdent&quot;,&quot;lists#indent&quot;]},&quot;paraformat&quot;:{&quot;jcr:primaryType&quot;:&quot;nt:unstructured&quot;,&quot;ref&quot;:&quot;paraformat&quot;,&quot;items&quot;:&quot;paraformat:getFormats:paraformat-pulldown&quot;}}}}}}}"></cq>
</div>
<anonymous code>:1:145535
    overrideMethod <anonymous code>:1
    jQuery 5
    updateDom http://localhost:4502/libs/cq/gui/components/authoring/editors/clientlibs/core.lc-a644ad0e34c6aa69abf3f76af13fcc32-lc.min.js:944
    updateDom http://localhost:4502/libs/cq/gui/components/authoring/editors/clientlibs/core.lc-a644ad0e34c6aa69abf3f76af13fcc32-lc.min.js:944
    _postExecuteHTML http://localhost:4502/libs/cq/gui/components/authoring/editors/clientlibs/core.lc-a644ad0e34c6aa69abf3f76af13fcc32-lc.min.js:715
    postExecuteRequestFunction http://localhost:4502/libs/cq/gui/components/authoring/editors/clientlibs/core.lc-a644ad0e34c6aa69abf3f76af13fcc32-lc.min.js:319
    jQuery 5

[StephanePo1]

Do you guys have any idea of what could possibly be wrong here ?

Thanks a lot !

[MukeshYadav_ · Accepted solution]

Hi @StephanePo1 ,
It might be due to double quotes within the SVG attributes which interfere with the outer HTML attributes.
So in the overlayed Text component instead of keeping svg at data-ext-icon attribute, you can try extra div with display none.

An get svg using innerHtml (js) or using html() method of jquery in js like below

<div class="richtext" >
<div id="data-ext-icon" style="display:none">
//here put svg hardcoded or received with model
</div>

</div>


<!--IN Jquery-->
let svgData = $('#data-ext-icon').html()


<!--IN JS-->
let svgData = document.getElementById('data-ext-icon').innerHTML;

Or

Just put svg path instead of whole svg code in data-ext-icon

<div class="richtext " data-ext-icon="/conten/dam/svgpath"></div>

PS:- I can see, same static svg icon n times of rte on the website. So better to keep this type of static resource at template or global cong level which will reduce DOM size.

Thanks

[kautuk_sahni]

@StephanePo1 Did you find the suggestion helpful? Please let us know if you need more information. If a response worked, kindly mark it as correct for posterity; alternatively, if you found a solution yourself, we’d appreciate it if you could share it with the community. Thank you!