Just wanted to share what the solution ended up to.

Challenge 1: Want to hook on events so I know if the user enter the editor mode or left it

Solution: Listen on the event $routeChangeSucess

// Try to find an event as late as possible so angular has been loaded
$(window).load(function () {

    var $scope = angular.element('body').scope(); // Get scope from body

    if ($scope) {
        $scope.$on('$routeChangeSuccess', function(e, next, current) { });
    }
});

The callback from the event "next" contains which tree you're on, which page id you're on etc.

Challenge 2: Listen on events for when user press the save and publish

Solution: From what I could find, the event emits from the controller Umbraco.Editors.Content.EditController.

// Method for the routeChangeSuccess event
on$routeChangeSuccess: function (e, next, current) {

    // Only listen when user works on the content tree
    if (next.params.tree === 'content') {

        // The controller does not exist until after the route change
        // Wait one js tick to hook on the publish button. 
        setTimeout(function () {
            var uEditController = angular.element($("body div [ng-controller='Umbraco.Editors.Content.EditController']"));
            if (uEditController.length < 1) {
                return;
            }

            var $scope = uEditController.scope();

            // Hook on save and publish event
            $scope.$on('formSubmitted', function (form) {
                // Do stuff
            });

        }, 0);
    }
}