/* eslint-env jquery */

/* global ace, sap */
sap.ui.define([
    "sap/ui/core/Control"
], function(Control) {
	"use strict";
	
	$("head").append('<link rel="stylesheet" href="sap/ui/codetools/library.css" />');
	
	Control.extend("sap.ui.codetools.CodeEditor", {
	    // the control API:
	    metadata : {
	        properties : {
	        	mode : {
	        		defaultValue : "javascript",
	        		bindable : true
	        	},
	        	value : {
	        		defaultValue : "",
	        		type : "string",
		        	bindable : true
	        	},
	        	contentValid : {
	        		bindable : true,
	        		type : "boolean",
	        		defaultValue : true
	        	},
	        	enabled : {
	        		bindable : true,
	        		type : "boolean"
	        	}
	        }, 
	        events : {
				change : {
					parameters : {
						value : {type : "string"}
					}
				}
	        }
	    },
	
		init : function () {
		},
		
		render : function (x) {
			this._prototype.render();
		},
		
		/*
		getContentValid : function () {
			return this._editor ? this._editor.getSession().getAnnotations().length < 1 : true;
		},
		
		setContentValid : function () {}, // not supported
		*/
		
		getEnabled : function () {
			if (this._editor) {
				return !this._editor.getReadOnly();
			}
			return (this._tmpEnabledBeforeRendering) ? this._tmpEnabledBeforeRendering : true;
		},
		
		setEnabled : function (value) {
			this.setProperty("enabled", value, true);
			if (this._editor) {
				this._editor.setReadOnly(!value);
			} else {
				this._tmpEnabledBeforeRendering = value;
			}
		},
		
		getValue : function () {
			if (this._editor) {
				return this._editor.getValue();
			}
			return (this._tmpValueBeforeRendering) ? this._tmpValueBeforeRendering : "";
		},
		
		setValue : function (value) {
			var that = this;
			this.setProperty("value", value, true);
			if (this._editor) {
				this._editor.setValue(value);
				this._editor.selection.moveTo(0, 0);
			} else {
				this._tmpValueBeforeRendering = value;
			}
		},
		
		focus : function () {
			$(this.getDomRef()).find("textarea")[0].focus();
		},
		
		setVisible : function (visible) {
			//if (this.getDomRef() !== null) {
			//	$("#"+this.getId()).parent().find("div.CodeMirror").css("display", (visible) ? "" : "none");
			//}
	 	},
	
		onAfterRendering :  function() {
			var that = this;
			var div = $( "#" + this.getId() ).get(0);
			var editor = ace.edit(div);
			editor.setTheme("ace/theme/clouds");
			editor.getSession().setMode("ace/mode/javascript");
			editor.getSession().setMode("ace/mode/" + this.getMode());
			editor.setReadOnly(!this.getEnabled());
			editor.$blockScrolling = Infinity;
			editor.on("change", function (e) {
				// the last parameter prevents the control from being marked as dirty and 
				// therefore re-being re-rendered. this is absolutely necessary.
				// see here: https://jam4.sapjam.com/questions/MVikmAEtAZ4MmUWb8XcVmi
				that.setProperty("value", that._editor.getValue(), /* suppressInvalidate */ true); 
				that.fireEvent("change", {
					value: that._editor.getValue()
				});
			});
			var editSession = editor.getSession(); 
			// update the content valid flag when annotations change
			editSession.on("changeAnnotation", function() {
				that.setProperty("contentValid", editSession.getAnnotations().length < 1, /* suppressInvalidate */ true);
			});
			this._editor = editor;
			delete this._tmpEnabledBeforeRendering;
			delete this._tmpValueBeforeRendering;
		},
		
		renderer : function(oRm, oControl){
			 // write the HTML into the render manager
			 oRm.write("<div");
			 oRm.writeControlData(oControl);
			 oRm.addClass("comSapCodetoolsCodeEditor");
			 oRm.writeClasses();
			 oRm.write(">" + oControl.getValue()); // span element
			 oRm.write("</div>");
		}
	});
});

I've created component like that, it runs fine if in other applications. the problem is when i'm trying to run it in sap fiori launchpad.