JSFiddle - React, Tailwind, and code Playground

by themyth92

HTML

<div ng-app='WorkApp' ng-controller='myCtrl'>
    <textarea height='300' ng-model='text' rows='5' cols='30' watch-selection></textarea>
    <general-directive></general-directive>
</div>

JavaScript

angular.module("WorkApp", [])
    .controller('myCtrl', function ($scope) {
    $scope.text = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s';

})
    .directive('watchSelection', function (InputCheckService) {
    return function (scope, elem) {
        elem.on('mouseup', function () {

            var start = elem[0].selectionStart;
            var end = elem[0].selectionEnd;
            var content = elem[0].value.substring(start, end);

            InputCheckService.setSelStart(start);
            InputCheckService.setSelEnd(end);
            InputCheckService.setParagraphContent(content);

            scope.$apply();
        });
    };
})
    .directive("generalDirective", function (InputCheckService) {

    return {
        scope: true,
        restrict : 'E',
        template: '<div><button ng-click = "updatePara()">Update para</button><div>Content : <span ng-bind = "paragraphContent"></span></div><div>Start index : <span ng-bind = "selStart"></span></div><div>End index : <span ng-bind = "selEnd"></span></div></div></div>',
        link: function (scope, elem, attrs) {

            scope.paragraphContent = 'No paragraph selected';
            scope.selStart = 0;
            scope.selEnd = 0;
            scope.updatePara = function () {

                scope.selStart = InputCheckService.getSelStart();
                scope.selEnd = InputCheckService.getSelEnd();
                scope.paragraphContent = InputCheckService.getParagraphContent();
            }
        }
    };
})
    .factory("InputCheckService", function () {

    var selStart = 0,
    selEnd = 0,
    paragraphContent = 'No paragraph selected';

    return {

        setSelStart: function (start) {
            selStart = start;
        },
        setSelEnd: function (end) {
            selEnd = end;
        },
        setParagraphContent: function (content) {
            paragraphContent...