ng-rangy

highlightable.component.js

'use strict'; 
import template from './highlightable.html!text';
import controller from './highlightable.controller';
import './highlightable.css!';

// use: <div highlightable hightlight="<scope guard variable>">content</div>
let highlightableComponent = function() {
	return {
		template,
		controller,
    transclude: true,
    replace: true,
		restrict: 'AE',
    scope: {
      highlight: "=",
      restoration: "&hlRestore",
      hlRoot: "@",
      hlId: "@",
      hlClassname: "@"
    },
		// controllerAs: 'HighlightableCtrl',
    // bindToController: true,

    link: function(scope, elem, attrs, ctrl) {
      ctrl.loadRangyHighlight();
      // Needs to use this workaround in order to wait for the directive content is fully loaded
      window.setTimeout(() => {
        let restoreItems = scope.restoration();
        ctrl.restoreSelections(undefined, restoreItems);
      }, 0);

      scope.$watch(
        () => {
          // console.log(`scope.highlight: ${scope.highlight}`);
          return scope.highlight; // from <div highlightable highlight='model'
        }, 
        (value, oldVal) => {
          if (!ctrl.firstFire) {
            ctrl.toggleHighlight(); // in controller
          }
          else
            ctrl.firstFire = !ctrl.firstFire;
        }
      );
    }
	};
};

export default highlightableComponent;

highlightable.controller.js

'use strict';

import rangy from 'rangy';
import 'rangy/rangy-classapplier';
import 'rangy/rangy-highlighter';
import 'rangy/rangy-textrange';
import 'rangy/rangy-serializer';


class HighlightableController {
	constructor($rootScope, $scope) {
    this.rand = Math.random();
		this._$scope = $scope;
    this._$rootScope = $rootScope;

		this.name = 'highlightable';
		this._$scope.name = 'Highlightable';

    this.highlighter = null;
    this.cssApplier = null;
    this.highlightClassName = "highlight-text";
    this.firstFire = true;

    this._$scope.loadRangyHighlight = this.loadRangyHighlight;
    this._$scope.toggleHighlight = this.toggleHighlight;
    // this._$scope.colored = false;

    this._topElem = document.getElementById('block-container');
	}

  /**
   * Initialize rangy highlighter with the text range and the class to highlight
   * @return 
   */
  loadRangyHighlight() {
    rangy.init();
    this.cssApplier = rangy.createClassApplier(this.highlightClassName, {
      normalize: true
    });
    this.highlighter = rangy.createHighlighter(document, "TextRange");
    this.highlighter.addClassApplier(this.cssApplier);
  }


  /**
   * Highlight, dehighlight the selection. 
   * Broadcast the 'rangy.text.highlighted' event
   */
  toggleHighlight() {
    let selText = rangy.getSelection();
    let checksum = true; // false, actually, calculates the checksum!!!
    let serialized = rangy.serializeSelection(selText, checksum, this._topElem);
    
    this._$rootScope.$broadcast('rangy.text.highlighted', serialized, this._$scope.hlId);// selText);
    
    this.cssApplier.toggleSelection();
    selText.removeAllRanges(); // remove selection mark; keeps the highlight
  }


  restoreSelections(ev, sels) {
    let deserializedSel, canBeDeserialized;
    sels.forEach(sel => {
      canBeDeserialized = rangy.canDeserializeSelection(sel.v, this._topElem);
      deserializedSel = rangy.deserializeSelection(sel.v, this._topElem);
      this.cssApplier.toggleSelection();
      deserializedSel.removeAllRanges();
    });
    
  }
}

HighlightableController.$inject = ['$rootScope', '$scope'];
export default HighlightableController;

highlightable.js

'use strict';

import angular from 'angular';
import 'angular-ui-router';
import highlightableComponent from './highlightable.component';
import HighlightableCtrl from './highlightable.controller';

import {factory} from '../../common/helper';

let highlightableModule = angular.module('highlightable', [
	
]);

highlightableModule.controller('HighlightableCtrl', HighlightableCtrl);
highlightableModule.directive('highlightable', highlightableComponent);


export default highlightableModule;

highlightable.tmpl.html

<div>
<div class="container" ng-transclude></div>
<div>