JSFiddle - React, Tailwind, and code Playground

by parksd

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta http-equiv='X-UA-Compatible' content='IE=edge' />
    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
    <title>Extend Button</title>
    <script id='sap-ui-bootstrap' type='text/javascript' src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_bluecrystal' data-sap-ui-libs='sap.m'>
    </script>
  </head>

  <body class='sapUiBody'>
    <div id='content'></div>
  </body>

</html>

CSS

body {
  background: white !important;
  padding: 20px;  
}

.sapMFT {
  font-size: 30px !important;
}

JavaScript

sap.m.Link.extend("my.FormattedLink", {

  init: function() {
    var formattedText = new sap.m.FormattedText({
      htmlText: this.getHtmlText()
    });
    this.setAggregation("_formattedText", formattedText, true);
  },

  setHtmlText: function(iValue) {
    this.setProperty("htmlText", iValue, true);
    this.getAggregation("_formattedText").setHtmlText(iValue);
  },

  renderer: { 
    writeText: function(oRm, oControl) {
    	oRm.renderControl(oControl.getAggregation("_formattedText"));
    }
  },
  metadata: {
    properties: {
      htmlText: {
        type: "string",
      },
    },
    aggregations: {
      _formattedText: {
        type: "sap.m.FormattedText",
        multiple: false
      }
    },
  },
});

var formattedLink = new my.FormattedLink({
  htmlText: "<span style='background:#b7cfe4'>high</span>lighted<script>alert('!!!')</script>"
});

formattedLink.placeAt("content");