Adding HTML Content within an Input Text Area

All asset types are defined using RXT files in WSO2 Governance Registry. By default, WSO2 G-Reg does not support HTML content within text input fields of an RXT file. However, you can extend WSO2 G-Reg to add HTML content within a text input field using the WSO2 G-Reg extension model. For an example, follow the steps below to add HTML content to the Description field, which you view in the screen when adding a REST service.

Create a file with the name default_table.hbs by adding the following content in it.

<h2 class="field-title">
    <a data-toggle="collapse" href="#collapse{{label}}" aria-expanded="false" class="collapsing-h2" >
        <i class="cu-btn-exp-col btn-collapsed">{{label}}</i>
    </a>
</h2>
<div class="collapse in" id="collapse{{label}}">
    {{#eachField this.fields}}
            <div class="row padding-bottom-lg">
                	<div class="col-sm-2 text-right">{{label}}</div>
		{{#if_equal this.name.name "description"}}
			<div class="col-sm-10">{{{value}}}</div>
		{{else}}
		<div class="col-sm-10">{{value}}</div>
		{{/if_equal}}
            </div>
    {{/eachField}}
</div>
</div>

The above code uses triple mustaches to unescape HTML in the value of the text field.

Add the default_table.hbs file to the <G-REG_HOME>/repository/deployment/server/jaggeryapps/publisher/extensions/assets/restservice/themes/default/partials/ directory.

Add the following code block to the <G-REG_HOME>/repository/deployment/server/jaggeryapps/store/extensions/assets/restservice/asset.js file, to eliminate any <script> tags in HTML content in the G-Reg Store for security concerns.

asset.renderer = function(ctx) {
    var decoratorApi = require('/modules/page-decorators.js').pageDecorators;

    return {
        pageDecorators: {
	    sanitizedDescription: function(page) {
		
		if (page.assets && page.assets.attributes && page.assets.attributes.overview_description ){
         		var descriptionInfo=page.assets.attributes.overview_description;
			var SCRIPT_REGEX = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;
				while (SCRIPT_REGEX.test(descriptionInfo)) {
    				descriptionInfo = descriptionInfo.replace(SCRIPT_REGEX, "");
			
				}
		}

            }
        }
    };
};

Add the following code block to the <G-REG_HOME>/repository/deployment/server/jaggeryapps/publisher/extensions/assets/restservice/asset.js file, to eliminate any <script> tags in HTML content in the G-Reg Publisher for security concerns.

asset.renderer = function(ctx) {
    var decoratorApi = require('/modules/page-decorators.js').pageDecorators;

    return {
        pageDecorators: {
	    sanitizedDescription: function(page) {

		if(page.assets.tables && page.assets.tables[0] && page.assets.tables[0].fields && page.assets.tables[0].fields.description && page.assets.tables[0].fields.description.value){
			var descriptionInfo=page.assets.tables[0].fields.description.value;
			var SCRIPT_REGEX = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;
				while (SCRIPT_REGEX.test(descriptionInfo)) {
    				descriptionInfo = descriptionInfo.replace(SCRIPT_REGEX, "");
		
		
				}
		
		}
            }
        }
    };
};

If you want to add the content to a field that appears for REST Services in WSO2 G-Reg Store also, create a file with the name asset-attributes.hbs by adding the following content, and add that file to the <G-REG_HOME>/repository/deployment/server/jaggeryapps/store/extensions/assets/restservice/themes/store/partials/ directory.

<div class="table-responsive">
    <div class="col-lg-12">
        <h4>Overview</h4><hr>
        <div class="col-lg-12 table table-striped table-hover divrow">
            <div class="col-lg-2">Name</div>
            {{#if name}}
                <div class="col-lg-10">{{name}}</div>
            {{else}}
                <div class="col-lg-10">{{assetName}}</div>
            {{/if}}
        </div>

        <div class="col-lg-12 divrow">
            <div class="col-lg-2">Version</div>
            <div class="col-lg-10">{{version}}</div>
        </div>
	<div class="col-lg-12 divrow">
	    <div class="col-lg-2">{{t "Description"}}</div>
	    <div class="col-lg-10">{{{this.attributes.overview_description}}}</div>
	</div>
    </div>
    {{#if lifecycle}}
        <div class="col-lg-12">
            <h4>Lifecycle</h4><hr>
            <div class="col-lg-12 table table-striped table-hover divrow">
                <div class="col-lg-2">Name :</div>

                <div class="col-lg-10">{{lifecycle}}</div>
            </div>

            <div class="col-lg-12 divrow">
                <div class="col-lg-2">State :</div>
                <div class="col-lg-10">{{lifecycleState}}</div>
            </div>
        </div>
    {{/if}}
    {{#if isDependentsPresent}}
        <div class="col-lg-12">
            <h4>Associations</h4><hr>
            <div class="col-lg-12 table table-striped table-hover divrow">
                {{#each dependencies}}
                    <div class="col-lg-2 ">Dependencies :</div>
                    <div class="col-lg-10"><a href="../../../assets/{{this.associationType}}/details/{{this.associationUUID}}">{{this.associationName}}</a></div>
                {{/each}}
            </div>

            <div class="col-lg-12 divrow">
                {{#each dependents}}
                    <div class="col-lg-2">Dependents :</div>
                    <div class="col-lg-10"><a href="../../../assets/{{this.associationType}}/details/{{this.associationUUID}}">{{this.associationName}}</a></div>
                {{/each}}
            </div>
        </div>
    {{/if}}

</div>

Re-start the WSO2 G-Reg server.
Log in to the G-Reg Publisher using the following URL and admin/admin credentials: https://<G-REG_HOST>:<G-REG_PORT>/publisher

Create a new REST service using the G-Reg Publisher by adding the following HTML content for the text field of Description as shown below.
adding HTMl in description field

<p><strong><span style="font-size: medium;">HTML ImprovedCode</span></strong></p>
<p>Improved HTML look with more features like:</p>
<ol>
<li><span style="background-color: #ffff00;">Code highlighting</span></li>
<li>Auto-indenting</li>
<li><span style="color: #ff0000;">Color Change</span></li>
<li><span style="text-decoration: underline;">Underline</span></li>
<li>Line Number</li>
</ol>
<p style="text-align: left;"> </p>

Viewing the content added using HTML

Follow the steps below to view the Description field updated for the REST Service which you created in step 7 above.

Log in to the G-Reg Publisher using the following URL and admin/admin credentials: https://<G-REG_HOST>:<G-REG_PORT>/publisher
Select REST Services from the main menu of G-Reg Publisher as shown below.
Select the corresponding asset, which you created above as shown below.

You view the content you added for the Description filed using HTML as shown below.