JSFiddle - React, Tailwind, and code Playground

by ashitvora

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.1/ace.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/ui-ace.js"></script>
<div ng-app="App">
  <div ng-controller="MainCtrl">
     Status: {{ status }}
     Value: {{ field.val }}
     
     <div id="sourceURLField" ui-ace="{ onLoad : editorLoaded}" ng-model="field.val"></div>
     
     
     <button ng-click="addRandomText()">Add Random Text</button>
  </div>
</div>

CSS

#sourceURLField{
  width: 300px;
  height: 100px;
  border: 1px solid;
}

JavaScript

function MainCtrl($scope){
	$scope.status = "Not loaded";
  $scope.field = { val: "Default Text" }
  $scope.editor = null
  
  $scope.editorLoaded = (_editor) => {
  	$scope.editor = _editor;
  	$scope.status = 'Loaded'
  }
  
  $scope.addRandomText = () => {
  	var cursorPos = $scope.editor.getCursorPosition();
    $scope.status = `At: ${cursorPos.row}, ${cursorPos.column}`;
    var rand = Math.floor(Math.random() * 100);
    
    
    // This line adds random text at the cursor position
    // But won't update the model value unless some interaction
    // is done on the editor
    $scope.editor.session.insert(cursorPos, rand + "");
    
    // This line updates the Model value but set cursor position
    // to be start of the line instead of keep it where it was after
    // adding the text.
    $scope.field.val = $scope.editor.getValue();
    
    // Below lines does not set the cursor position
    // So below function is useless at the moment.
    setTimeout( () => {
    	$scope.editor.renderer.scrollCursorIntoView({
    		row: cursorPos.row,
      	column: cursorPos.column + rand.length
    	}, 0.5);
    }, 100)
    
    
  }
}

angular
	.module("App", ['ui.ace'])
  .controller('MainCtrl', MainCtrl)