Format Source Code in Source Code Visualization

[Filippo]

Hi, thx for help.

I would like to know if its possibile to prettify the source code in the source code view

Current visualization

What i'm trying to archieve.

Thank you a lot again!.

[Vinothkumar Yuvaraj]

Hi Filippo,

We achieved your requirement by using the following code, which is based on the Rich Text Editor's actionComplete and toolbarClick events. Please refer to the code and attached sample for more information.

function Default() {

    let rteObj;

    let flag = false;

    var replaceContent;

    var replaceContent1;

    function actionComplete(args) {

        if(args.requestType == 'SourceCode'){

            flag = true;

        }

    }

    function format(html) {

        var tab = '\t';

        var result = '';

        var indent = '';

        html.split(/>\s*</).forEach(function (element) {

          if (element.match(/^\/\w/)) {

            indent = indent.substring(tab.length);

          }

          result += indent + '<' + element + '>\r';

          if (element.match(/^<?\w[^>]*[^\/]$/) && !element.startsWith('input')) {

            indent += tab;

          }

        });

        replaceContent = result.slice(1);

        replaceContent1  = replaceContent.slice(0, replaceContent.length - 3);

    }

    function toolbarClick(args) {

        if(flag){  

            var content = document.getElementsByClassName("e-content")[0].innerHTML;

            format(content);

            document.getElementsByClassName("e-rte-srctextarea")[0].value = replaceContent1;

            flag = false;

        }

  }

    return (

           <RichTextEditorComponent id="defaultRTE" ref={(richtexteditor) => { rteObj = richtexteditor; }} 

             toolbarClick={toolbarClick.bind(this)} actionComplete={actionComplete.bind(this)} >

            <p>The Rich Text Editor component is a WYSIWYG ("what you see is what you get")editor that provides </p>

            <p> the best user experience to create and update the</p> 

            <p>content. Users can format their content using standard toolbar commands.</p>

           <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]}/>

           </RichTextEditorComponent>

   );

}

Sample : https://stackblitz.com/edit/react-3qxwwi?file=index.js,index.html

API Link :

https://ej2.syncfusion.com/react/documentation/api/rich-text-editor/#actioncomplete

https://ej2.syncfusion.com/react/documentation/api/rich-text-editor/#toolbarclick

Regards,

Vinothkumar

[Filippo]

Thank you so much.

My previous solution was to directly set the editor value but didn't work.

contentEditor!.current!.value = pretty(contentEditor?.current?.value || '')

Thank you so much again!

[Vinothkumar Yuvaraj]

Hi Filippo,

We are glad that your issue has been resolved. Please get back to us if you need any other assistance.