Beautify extension not working

[ganeshkbhat]

I have added /ace/ext-beautify.js" extension to my angular.json and am trying to use the beautify extension. When I try to use it it gives that the function is not present. Here is what I have tried inside my component:

@ViewChild('editor') editor;

let beautify = this.editor.getEditor().require('ace/ext/beautify');
beautify.beautify(this.editor.getEditor().session);
// this.editor.getEditor(...).require is not a function

this.editor.getEditor().beautify(this.editor.getEditor().session);
//this.editor.getEditor(...).beautify is not a function

Any help?

[kartikwatwani]

Were you able to solve this problem @ganeshkbhat

[qubiack]

@ganeshkbhat , @itsmeneartou did you solve this problem?

[kartikwatwani]

@qubiack I am using the ace editor(for showing line numbers and styles) but I am not using the function beautify as of now but I do want to beautify the html in future. I checked my angular.json and it had the following in scripts tag and I remember it did rectified some error which was shown in logs but I don't remember exactly the error. "scripts": [ "node_modules/ace-builds/src-min/ace.js", "node_modules/ace-builds/src-min/mode-python.js", "node_modules/ace-builds/src-min/theme-chrome.js", { "bundleName": "mode-html", "input": "node_modules/ace-builds/src-min/mode-html.js" } ]
and in template I am using ace-editor as follows

<div class="ace_tooltip" ace-editor [(text)]="html" [mode]="'html'" class="textBox ace-editor" [theme]="'eclipse'" [readOnly]="false" [autoUpdateContent]="true" [durationBeforeCallback]="1000" (textChanged)="onInstructionsChanged($event)" style="overflow-wrap: break-word;margin: 16px">

[qubiack]

Temporary I use different option to retrieve well formed XML:

    private prettifyXml(sourceXml) {
        const xmlDoc = new DOMParser().parseFromString(sourceXml, 'application/xml');
        const xsltDoc = new DOMParser().parseFromString([
            // describes how we want to modify the XML - indent everything
            '<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform">',
            '  <xsl:strip-space elements="*"/>',
            '  <xsl:template match="para[content-style][not(text())]">', // change to just text() to strip space in text nodes
            '    <xsl:value-of select="normalize-space(.)"/>',
            '  </xsl:template>',
            '  <xsl:template match="node()|@*">',
            '    <xsl:copy><xsl:apply-templates select="node()|@*"/></xsl:copy>',
            '  </xsl:template>',
            '  <xsl:output indent="yes"/>',
            '</xsl:stylesheet>',
        ].join('\n'), 'application/xml');

        const xsltProcessor = new XSLTProcessor();
        xsltProcessor.importStylesheet(xsltDoc);
        const resultDoc = xsltProcessor.transformToDocument(xmlDoc);
        const resultXml = new XMLSerializer().serializeToString(resultDoc);
        return resultXml;
    }

[c-romeo]

I get it worked by:

let beautify = window.ace.require('ace/ext/beautify');
beautify.beautify(this.responseXmlEditor.getEditor().session);

for best results over an xml that has xml declaration I first use vkbeautify.xml (https://github.com/vkiryukhin/vkBeautify) and than call ace beautify and results are awesome. reason to call ace beautify is that vkbeautify doesn't work nicely with xml self closing elements.

<?xml version='1.0' encoding='UTF-8'?><S:Envelope xmlns:S="http://schemas.xmlsoap.org/soap/envelope/"><S:Header>

[coder1coder]

angular.json

{ 
  "projects": { 
    "YourApp": { 
        "architect": { 
          "build": {
            "options": {
              "scripts": [
                  "node_modules/ace-builds/src-min/ace.js",
                  "node_modules/ace-builds/src-min/ext-beautify.js"
                ]
            }
          }
        }
    }
  }
}

angular template

<ace-editor #editor ...></ace-editor>

angular component

import * as ace from 'ace-builds';

@ViewChild('editor') private editorRef: any = undefined;

let beautify = ace.require("ace/ext/beautify");
beautify.beautify(this.editorRef.getEditor().session);

..run your app after that by

ng serve