angular-text-input-highlight - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

bundles/angular-text-input-highlight.umd.js

 /**
  * angular-text-input-highlight - A component that can highlight parts of text in a textarea. Useful for displaying mentions etc
- * @version v1.1.1
+ * @version v1.2.0
  * @author Matt Lewis
@@ -243,4 +243,15 @@ * @link https://github.com/mattlewis92/angular-text-input-highlight#readme
         this.textareaEventListeners = [];
+        this.isDestroyed = false;
     }
     /**
+     * Manually call this function to refresh the highlight element if the textarea styles have changed
+     */
+    TextInputHighlightComponent.prototype.refresh = function () {
+        var _this = this;
+        var computed = getComputedStyle(this.textInputElement);
+        styleProperties.forEach(function (prop) {
+            _this.highlightElementContainerStyle[prop] = computed[prop];
+        });
+    };
+    /**
      * @private
@@ -260,2 +271,3 @@ */
     TextInputHighlightComponent.prototype.ngOnDestroy = function () {
+        this.isDestroyed = true;
         this.textareaEventListeners.forEach(function (unregister) { return unregister(); });
@@ -267,3 +279,3 @@ };
     TextInputHighlightComponent.prototype.onWindowResize = function () {
-        this.copyTextareaStyles();
+        this.refresh();
     };
@@ -279,37 +291,40 @@ TextInputHighlightComponent.prototype.textInputElementChanged = function () {
         setTimeout(function () {
-            _this.copyTextareaStyles();
-            _this.textareaEventListeners.forEach(function (unregister) { return unregister(); });
-            _this.textareaEventListeners = [
-                _this.renderer.listen(_this.textInputElement, 'input', function () {
-                    _this.addTags();
-                }),
-                _this.renderer.listen(_this.textInputElement, 'scroll', function () {
-                    _this.highlightElement.nativeElement.scrollTop = _this.textInputElement.scrollTop;
-                    _this.highlightTagElements = _this.highlightTagElements.map(function (tag) {
-                        tag.clientRect = tag.element.getBoundingClientRect();
-                        return tag;
+            // in case the element was destroyed before the timeout fires
+            if (!_this.isDestroyed) {
+                _this.refresh();
+                _this.textareaEventListeners.forEach(function (unregister) { return unregister(); });
+                _this.textareaEventListeners = [
+                    _this.renderer.listen(_this.textInputElement, 'input', function () {
+                        _this.addTags();
+                    }),
+                    _this.renderer.listen(_this.textInputElement, 'scroll', function () {
+                        _this.highlightElement.nativeElement.scrollTop = _this.textInputElement.scrollTop;
+                        _this.highlightTagElements = _this.highlightTagElements.map(function (tag) {
+                            tag.clientRect = tag.element.getBoundingClientRect();
+                            return tag;
+                        });
+                    })
+                ];
+                // only add event listeners if the host component actually asks for it
+                if (_this.tagClick.observers.length > 0) {
+                    var onClick = _this.renderer.listen(_this.textInputElement, 'click', function (event) {
+                        _this.handleTextareaMouseEvent(event, 'click');
                     });
-                })
-            ];
-            // only add event listeners if the host component actually asks for it
-            if (_this.tagClick.observers.length > 0) {
-                var onClick = _this.renderer.listen(_this.textInputElement, 'click', function (event) {
-                    _this.handleTextareaMouseEvent(event, 'click');
-                });
-                _this.textareaEventListeners.push(onClick);
+                    _this.textareaEventListeners.push(onClick);
+                }
+                if (_this.tagMouseEnter.observers.length > 0) {
+                    var onMouseMove = _this.renderer.listen(_this.textInputElement, 'mousemove', function (event) {
+                        _this.handleTextareaMouseEvent(event, 'mousemove');
+                    });
+                    var onMouseLeave = _this.renderer.listen(_this.textInputElement, 'mouseleave', function (event) {
+                        if (_this.mouseHoveredTag) {
+                            _this.tagMouseLeave.emit(_this.mouseHoveredTag);
+                            _this.mouseHoveredTag = undefined;
+                        }
+                    });
+                    _this.textareaEventListeners.push(onMouseMove);
+                    _this.textareaEventListeners.push(onMouseLeave);
+                }
+                _this.addTags();
             }
-            if (_this.tagMouseEnter.observers.length > 0) {
-                var onMouseMove = _this.renderer.listen(_this.textInputElement, 'mousemove', function (event) {
-                    _this.handleTextareaMouseEvent(event, 'mousemove');
-                });
-                var onMouseLeave = _this.renderer.listen(_this.textInputElement, 'mouseleave', function (event) {
-                    if (_this.mouseHoveredTag) {
-                        _this.tagMouseLeave.emit(_this.mouseHoveredTag);
-                        _this.mouseHoveredTag = undefined;
-                    }
-                });
-                _this.textareaEventListeners.push(onMouseMove);
-                _this.textareaEventListeners.push(onMouseLeave);
-            }
-            _this.addTags();
         });
@@ -388,9 +403,2 @@ };
     };
-    TextInputHighlightComponent.prototype.copyTextareaStyles = function () {
-        var _this = this;
-        var computed = getComputedStyle(this.textInputElement);
-        styleProperties.forEach(function (prop) {
-            _this.highlightElementContainerStyle[prop] = computed[prop];
-        });
-    };
     __decorate([
@@ -397,0 +405,0 @@ core_1.Input(),

bundles/angular-text-input-highlight.umd.min.js

 /**
  * angular-text-input-highlight - A component that can highlight parts of text in a textarea. Useful for displaying mentions etc
- * @version v1.1.1
+ * @version v1.2.0
  * @author Matt Lewis
@@ -8,3 +8,3 @@ * @link https://github.com/mattlewis92/angular-text-input-highlight#readme
  */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define(["@angular/core","@angular/common"],t):"object"==typeof exports?exports.angularTextInputHighlight=t(require("@angular/core"),require("@angular/common")):e.angularTextInputHighlight=t(e.ng.core,e.ng.common)}(this,function(e,t){return function(e){function t(i){if(n[i])return n[i].exports;var r=n[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=1)}([function(t,n){t.exports=e},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e){for(var n in e)t.hasOwnProperty(n)||(t[n]=e[n])}(n(2))},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var r,o=arguments.length,s=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(s=(o<3?r(s):o>3?r(t,n,s):r(t,n))||s);return o>3&&s&&Object.defineProperty(t,n,s),s};Object.defineProperty(t,"__esModule",{value:!0});var r=n(0),o=n(3),s=n(4),a=n(5),c=n(6),l=function(){function e(){}return e=i([r.NgModule({declarations:[s.TextInputHighlightComponent,a.TextInputHighlightContainerDirective,c.TextInputElementDirective],imports:[o.CommonModule],exports:[s.TextInputHighlightComponent,a.TextInputHighlightContainerDirective,c.TextInputElementDirective]})],e)}();t.TextInputHighlightModule=l},function(e,n){e.exports=t},function(e,t,n){"use strict";function i(e,t){return t.indices.start<e&&e<t.indices.end}function r(e,t){return i(t.indices.start,e)||i(t.indices.end,e)}function o(e,t,n){return e.left<t&&t<e.right&&e.top<n&&n<e.bottom}function s(e){return e.replace(/</g,"&lt;").replace(/>/g,"&gt;")}var a=this&&this.__decorate||function(e,t,n,i){var r,o=arguments.length,s=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(s=(o<3?r(s):o>3?r(t,n,s):r(t,n))||s);return o>3&&s&&Object.defineProperty(t,n,s),s},c=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var l=n(0),u=Object.freeze(["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize"]),h=function(){function e(e,t){this.renderer=e,this.cdr=t,this.tagCssClass="",this.tags=[],this.tagClick=new l.EventEmitter,this.tagMouseEnter=new l.EventEmitter,this.tagMouseLeave=new l.EventEmitter,this.highlightElementContainerStyle={},this.textareaEventListeners=[]}return e.prototype.ngOnChanges=function(e){e.textInputElement&&this.textInputElementChanged(),(e.tags||e.tagCssClass)&&this.addTags()},e.prototype.ngOnDestroy=function(){this.textareaEventListeners.forEach(function(e){return e()})},e.prototype.onWindowResize=function(){this.copyTextareaStyles()},e.prototype.textInputElementChanged=function(){var e=this,t=this.textInputElement.tagName.toLowerCase();if("textarea"!==t)throw new Error("The angular-text-input-highlight component must be passed a textarea to the `textInputElement` input. Instead received a "+t);setTimeout(function(){if(e.copyTextareaStyles(),e.textareaEventListeners.forEach(function(e){return e()}),e.textareaEventListeners=[e.renderer.listen(e.textInputElement,"input",function(){e.addTags()}),e.renderer.listen(e.textInputElement,"scroll",function(){e.highlightElement.nativeElement.scrollTop=e.textInputElement.scrollTop,e.highlightTagElements=e.highlightTagElements.map(function(e){return e.clientRect=e.element.getBoundingClientRect(),e})})],e.tagClick.observers.length>0){var t=e.renderer.listen(e.textInputElement,"click",function(t){e.handleTextareaMouseEvent(t,"click")});e.textareaEventListeners.push(t)}if(e.tagMouseEnter.observers.length>0){var n=e.renderer.listen(e.textInputElement,"mousemove",function(t){e.handleTextareaMouseEvent(t,"mousemove")}),i=e.renderer.listen(e.textInputElement,"mouseleave",function(t){e.mouseHoveredTag&&(e.tagMouseLeave.emit(e.mouseHoveredTag),e.mouseHoveredTag=void 0)});e.textareaEventListeners.push(n),e.textareaEventListeners.push(i)}e.addTags()})},e.prototype.addTags=function(){var e=this,t=this.textInputElement.value,n=[],i=[];this.tags.slice().sort(function(e,t){return e.indices.start-t.indices.start}).forEach(function(o){if(o.indices.start>o.indices.end)throw new Error("Highlight tag with indices ["+o.indices.start+", "+o.indices.end+"] cannot start after it ends.");n.forEach(function(e){if(r(e,o))throw new Error("Highlight tag with indices ["+o.indices.start+", "+o.indices.end+"] overlaps with tag ["+e.indices.start+", "+e.indices.end+"]")});var a=o.indices.end-o.indices.start,c=t.slice(o.indices.start,o.indices.end);if(c.length===a){var l=n.length>0?n[n.length-1].indices.end:0,u=t.slice(l,o.indices.start);i.push(s(u));var h=o.cssClass||e.tagCssClass,g="text-highlight-tag-id-"+e.tags.indexOf(o);i.push('<span class="text-highlight-tag '+g+" "+h+'">'+s(c)+"</span>"),n.push(o)}});var o=n.length>0?n[n.length-1].indices.end:0,a=t.slice(o);i.push(s(a)),i.push("&nbsp;"),this.highlightedText=i.join(""),this.cdr.detectChanges(),this.highlightTagElements=Array.from(this.highlightElement.nativeElement.getElementsByTagName("span")).map(function(e){return{element:e,clientRect:e.getBoundingClientRect()}})},e.prototype.handleTextareaMouseEvent=function(e,t){var n=this.highlightTagElements.findIndex(function(t){return o(t.clientRect,e.clientX,e.clientY)});if(n>-1){var i=this.highlightTagElements[n].element,r=Array.from(i.classList).find(function(e){return e.startsWith("text-highlight-tag-id-")});if(r){var s=r.replace("text-highlight-tag-id-",""),a=this.tags[+s],c={tag:a,target:i};"click"===t?this.tagClick.emit(c):this.mouseHoveredTag||(this.mouseHoveredTag=c,this.tagMouseEnter.emit(c))}}else"mousemove"===t&&this.mouseHoveredTag&&(this.tagMouseLeave.emit(this.mouseHoveredTag),this.mouseHoveredTag=void 0)},e.prototype.copyTextareaStyles=function(){var e=this,t=getComputedStyle(this.textInputElement);u.forEach(function(n){e.highlightElementContainerStyle[n]=t[n]})},a([l.Input(),c("design:type",String)],e.prototype,"tagCssClass",void 0),a([l.Input(),c("design:type",Array)],e.prototype,"tags",void 0),a([l.Input(),c("design:type",HTMLTextAreaElement)],e.prototype,"textInputElement",void 0),a([l.Output(),c("design:type",Object)],e.prototype,"tagClick",void 0),a([l.Output(),c("design:type",Object)],e.prototype,"tagMouseEnter",void 0),a([l.Output(),c("design:type",Object)],e.prototype,"tagMouseLeave",void 0),a([l.ViewChild("highlightElement"),c("design:type",l.ElementRef)],e.prototype,"highlightElement",void 0),a([l.HostListener("window:resize"),c("design:type",Function),c("design:paramtypes",[]),c("design:returntype",void 0)],e.prototype,"onWindowResize",null),e=a([l.Component({selector:"mwl-text-input-highlight",template:'\n    <div\n      class="text-highlight-element"\n      [ngStyle]="highlightElementContainerStyle"\n      [innerHtml]="highlightedText"\n      #highlightElement>\n    </div>\n  '}),c("design:paramtypes",[l.Renderer2,l.ChangeDetectorRef])],e)}();t.TextInputHighlightComponent=h},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var r,o=arguments.length,s=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(s=(o<3?r(s):o>3?r(t,n,s):r(t,n))||s);return o>3&&s&&Object.defineProperty(t,n,s),s};Object.defineProperty(t,"__esModule",{value:!0});var r=n(0),o=function(){function e(){}return e=i([r.Directive({selector:"[mwlTextInputHighlightContainer]",host:{"[class.text-input-highlight-container]":"true"}})],e)}();t.TextInputHighlightContainerDirective=o},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var r,o=arguments.length,s=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(s=(o<3?r(s):o>3?r(t,n,s):r(t,n))||s);return o>3&&s&&Object.defineProperty(t,n,s),s};Object.defineProperty(t,"__esModule",{value:!0});var r=n(0),o=function(){function e(){}return e=i([r.Directive({selector:"textarea[mwlTextInputElement]",host:{"[class.text-input-element]":"true"}})],e)}();t.TextInputElementDirective=o}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define(["@angular/core","@angular/common"],t):"object"==typeof exports?exports.angularTextInputHighlight=t(require("@angular/core"),require("@angular/common")):e.angularTextInputHighlight=t(e.ng.core,e.ng.common)}(this,function(e,t){return function(e){function t(i){if(n[i])return n[i].exports;var r=n[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=1)}([function(t,n){t.exports=e},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e){for(var n in e)t.hasOwnProperty(n)||(t[n]=e[n])}(n(2))},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var r,o=arguments.length,s=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(s=(o<3?r(s):o>3?r(t,n,s):r(t,n))||s);return o>3&&s&&Object.defineProperty(t,n,s),s};Object.defineProperty(t,"__esModule",{value:!0});var r=n(0),o=n(3),s=n(4),a=n(5),c=n(6),l=function(){function e(){}return e=i([r.NgModule({declarations:[s.TextInputHighlightComponent,a.TextInputHighlightContainerDirective,c.TextInputElementDirective],imports:[o.CommonModule],exports:[s.TextInputHighlightComponent,a.TextInputHighlightContainerDirective,c.TextInputElementDirective]})],e)}();t.TextInputHighlightModule=l},function(e,n){e.exports=t},function(e,t,n){"use strict";function i(e,t){return t.indices.start<e&&e<t.indices.end}function r(e,t){return i(t.indices.start,e)||i(t.indices.end,e)}function o(e,t,n){return e.left<t&&t<e.right&&e.top<n&&n<e.bottom}function s(e){return e.replace(/</g,"&lt;").replace(/>/g,"&gt;")}var a=this&&this.__decorate||function(e,t,n,i){var r,o=arguments.length,s=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(s=(o<3?r(s):o>3?r(t,n,s):r(t,n))||s);return o>3&&s&&Object.defineProperty(t,n,s),s},c=this&&this.__metadata||function(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)};Object.defineProperty(t,"__esModule",{value:!0});var l=n(0),u=Object.freeze(["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize"]),h=function(){function e(e,t){this.renderer=e,this.cdr=t,this.tagCssClass="",this.tags=[],this.tagClick=new l.EventEmitter,this.tagMouseEnter=new l.EventEmitter,this.tagMouseLeave=new l.EventEmitter,this.highlightElementContainerStyle={},this.textareaEventListeners=[],this.isDestroyed=!1}return e.prototype.refresh=function(){var e=this,t=getComputedStyle(this.textInputElement);u.forEach(function(n){e.highlightElementContainerStyle[n]=t[n]})},e.prototype.ngOnChanges=function(e){e.textInputElement&&this.textInputElementChanged(),(e.tags||e.tagCssClass)&&this.addTags()},e.prototype.ngOnDestroy=function(){this.isDestroyed=!0,this.textareaEventListeners.forEach(function(e){return e()})},e.prototype.onWindowResize=function(){this.refresh()},e.prototype.textInputElementChanged=function(){var e=this,t=this.textInputElement.tagName.toLowerCase();if("textarea"!==t)throw new Error("The angular-text-input-highlight component must be passed a textarea to the `textInputElement` input. Instead received a "+t);setTimeout(function(){if(!e.isDestroyed){if(e.refresh(),e.textareaEventListeners.forEach(function(e){return e()}),e.textareaEventListeners=[e.renderer.listen(e.textInputElement,"input",function(){e.addTags()}),e.renderer.listen(e.textInputElement,"scroll",function(){e.highlightElement.nativeElement.scrollTop=e.textInputElement.scrollTop,e.highlightTagElements=e.highlightTagElements.map(function(e){return e.clientRect=e.element.getBoundingClientRect(),e})})],e.tagClick.observers.length>0){var t=e.renderer.listen(e.textInputElement,"click",function(t){e.handleTextareaMouseEvent(t,"click")});e.textareaEventListeners.push(t)}if(e.tagMouseEnter.observers.length>0){var n=e.renderer.listen(e.textInputElement,"mousemove",function(t){e.handleTextareaMouseEvent(t,"mousemove")}),i=e.renderer.listen(e.textInputElement,"mouseleave",function(t){e.mouseHoveredTag&&(e.tagMouseLeave.emit(e.mouseHoveredTag),e.mouseHoveredTag=void 0)});e.textareaEventListeners.push(n),e.textareaEventListeners.push(i)}e.addTags()}})},e.prototype.addTags=function(){var e=this,t=this.textInputElement.value,n=[],i=[];this.tags.slice().sort(function(e,t){return e.indices.start-t.indices.start}).forEach(function(o){if(o.indices.start>o.indices.end)throw new Error("Highlight tag with indices ["+o.indices.start+", "+o.indices.end+"] cannot start after it ends.");n.forEach(function(e){if(r(e,o))throw new Error("Highlight tag with indices ["+o.indices.start+", "+o.indices.end+"] overlaps with tag ["+e.indices.start+", "+e.indices.end+"]")});var a=o.indices.end-o.indices.start,c=t.slice(o.indices.start,o.indices.end);if(c.length===a){var l=n.length>0?n[n.length-1].indices.end:0,u=t.slice(l,o.indices.start);i.push(s(u));var h=o.cssClass||e.tagCssClass,g="text-highlight-tag-id-"+e.tags.indexOf(o);i.push('<span class="text-highlight-tag '+g+" "+h+'">'+s(c)+"</span>"),n.push(o)}});var o=n.length>0?n[n.length-1].indices.end:0,a=t.slice(o);i.push(s(a)),i.push("&nbsp;"),this.highlightedText=i.join(""),this.cdr.detectChanges(),this.highlightTagElements=Array.from(this.highlightElement.nativeElement.getElementsByTagName("span")).map(function(e){return{element:e,clientRect:e.getBoundingClientRect()}})},e.prototype.handleTextareaMouseEvent=function(e,t){var n=this.highlightTagElements.findIndex(function(t){return o(t.clientRect,e.clientX,e.clientY)});if(n>-1){var i=this.highlightTagElements[n].element,r=Array.from(i.classList).find(function(e){return e.startsWith("text-highlight-tag-id-")});if(r){var s=r.replace("text-highlight-tag-id-",""),a=this.tags[+s],c={tag:a,target:i};"click"===t?this.tagClick.emit(c):this.mouseHoveredTag||(this.mouseHoveredTag=c,this.tagMouseEnter.emit(c))}}else"mousemove"===t&&this.mouseHoveredTag&&(this.tagMouseLeave.emit(this.mouseHoveredTag),this.mouseHoveredTag=void 0)},a([l.Input(),c("design:type",String)],e.prototype,"tagCssClass",void 0),a([l.Input(),c("design:type",Array)],e.prototype,"tags",void 0),a([l.Input(),c("design:type",HTMLTextAreaElement)],e.prototype,"textInputElement",void 0),a([l.Output(),c("design:type",Object)],e.prototype,"tagClick",void 0),a([l.Output(),c("design:type",Object)],e.prototype,"tagMouseEnter",void 0),a([l.Output(),c("design:type",Object)],e.prototype,"tagMouseLeave",void 0),a([l.ViewChild("highlightElement"),c("design:type",l.ElementRef)],e.prototype,"highlightElement",void 0),a([l.HostListener("window:resize"),c("design:type",Function),c("design:paramtypes",[]),c("design:returntype",void 0)],e.prototype,"onWindowResize",null),e=a([l.Component({selector:"mwl-text-input-highlight",template:'\n    <div\n      class="text-highlight-element"\n      [ngStyle]="highlightElementContainerStyle"\n      [innerHtml]="highlightedText"\n      #highlightElement>\n    </div>\n  '}),c("design:paramtypes",[l.Renderer2,l.ChangeDetectorRef])],e)}();t.TextInputHighlightComponent=h},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var r,o=arguments.length,s=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(s=(o<3?r(s):o>3?r(t,n,s):r(t,n))||s);return o>3&&s&&Object.defineProperty(t,n,s),s};Object.defineProperty(t,"__esModule",{value:!0});var r=n(0),o=function(){function e(){}return e=i([r.Directive({selector:"[mwlTextInputHighlightContainer]",host:{"[class.text-input-highlight-container]":"true"}})],e)}();t.TextInputHighlightContainerDirective=o},function(e,t,n){"use strict";var i=this&&this.__decorate||function(e,t,n,i){var r,o=arguments.length,s=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(s=(o<3?r(s):o>3?r(t,n,s):r(t,n))||s);return o>3&&s&&Object.defineProperty(t,n,s),s};Object.defineProperty(t,"__esModule",{value:!0});var r=n(0),o=function(){function e(){}return e=i([r.Directive({selector:"textarea[mwlTextInputElement]",host:{"[class.text-input-element]":"true"}})],e)}();t.TextInputElementDirective=o}])});
 //# sourceMappingURL=angular-text-input-highlight.umd.min.js.map

CHANGELOG.md

@@ -5,2 +5,17 @@ # Change Log
 
+<a name="1.2.0"></a>
+# [1.2.0](https://github.com/mattlewis92/angular-text-input-highlight/compare/v1.1.1...v1.2.0) (2017-10-11)
+
+
+### Bug Fixes
+
+* handle the component being destroyed before the initial render is complete ([cb2b3c1](https://github.com/mattlewis92/angular-text-input-highlight/commit/cb2b3c1))
+
+
+### Features
+
+* expose refresh method as part of the public api ([da95817](https://github.com/mattlewis92/angular-text-input-highlight/commit/da95817))
+
+
+
 <a name="1.1.1"></a>
@@ -7,0 +22,0 @@ ## [1.1.1](https://github.com/mattlewis92/angular-text-input-highlight/compare/v1.1.0...v1.1.1) (2017-09-26)

package.json

 {
   "name": "angular-text-input-highlight",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A component that can highlight parts of text in a textarea. Useful for displaying mentions etc",
@@ -27,3 +27,3 @@ "main": "./bundles/angular-text-input-highlight.umd.js",
     "postrelease": "npm run build:clean && npm run gh-pages",
-    "commitmsg": "validate-commit-msg",
+    "commitmsg": "commitlint -e",
     "codecov": "cat coverage/lcov.info | codecov",
@@ -39,2 +39,12 @@ "prettier": "prettier --single-quote --parser typescript --write",
   },
+  "config": {
+    "commitizen": {
+      "path": "@commitlint/prompt"
+    }
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-angular"
+    ]
+  },
   "repository": {
@@ -58,21 +68,24 @@ "type": "git",
   "devDependencies": {
-    "@angular/common": "^4.3.6",
-    "@angular/compiler": "^4.3.6",
-    "@angular/compiler-cli": "^4.3.6",
-    "@angular/core": "^4.3.6",
-    "@angular/forms": "^4.3.6",
-    "@angular/language-service": "^4.3.6",
-    "@angular/platform-browser": "^4.3.6",
-    "@angular/platform-browser-dynamic": "^4.3.6",
-    "@compodoc/compodoc": "^1.0.0-beta.14",
+    "@angular/common": "^4.4.4",
+    "@angular/compiler": "^4.4.4",
+    "@angular/compiler-cli": "^4.4.4",
+    "@angular/core": "^4.4.4",
+    "@angular/forms": "^4.4.4",
+    "@angular/language-service": "^4.4.4",
+    "@angular/platform-browser": "^4.4.4",
+    "@angular/platform-browser-dynamic": "^4.4.4",
+    "@commitlint/cli": "^4.1.1",
+    "@commitlint/config-angular": "^3.1.1",
+    "@commitlint/prompt": "^4.1.1",
+    "@compodoc/compodoc": "^1.0.1",
     "@types/chai": "^4.0.4",
     "@types/html-webpack-plugin": "^2.11.2",
-    "@types/mocha": "^2.2.42",
-    "@types/node": "^8.0.26",
-    "@types/sinon": "^2.1.2",
+    "@types/mocha": "^2.2.43",
+    "@types/node": "^8.0.34",
+    "@types/sinon": "^2.3.6",
     "@types/sinon-chai": "^2.7.29",
-    "@types/webpack": "^3.0.10",
+    "@types/webpack": "^3.0.13",
     "chai": "^4.1.2",
     "codecov": "^2.3.0",
-    "codelyzer": "^3.0.0",
+    "codelyzer": "^3.2.1",
     "commitizen": "^2.8.1",
@@ -83,3 +96,2 @@ "concurrently": "^3.0.0",
     "css-loader": "^0.28.7",
-    "cz-conventional-changelog": "^2.0.0",
     "del-cli": "^1.0.0",
@@ -96,14 +108,14 @@ "fork-ts-checker-webpack-plugin": "^0.2.8",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^2.0.1",
-    "lint-staged": "^4.0.4",
-    "mocha": "^3.5.0",
+    "karma-webpack": "^2.0.5",
+    "lint-staged": "^4.2.3",
+    "mocha": "^4.0.1",
     "node-sass": "^4.5.3",
-    "prettier": "^1.6.1",
+    "prettier": "^1.7.4",
     "rxjs": "^5.4.3",
     "sass-loader": "^6.0.6",
-    "sinon": "^3.2.1",
-    "sinon-chai": "^2.13.0",
+    "sinon": "^4.0.1",
+    "sinon-chai": "^2.14.0",
     "standard-version": "^4.0.0",
-    "style-loader": "^0.18.2",
-    "ts-loader": "^2.3.4",
+    "style-loader": "^0.19.0",
+    "ts-loader": "^2.3.7",
     "ts-node": "^3.3.0",
@@ -113,18 +125,12 @@ "tslint": "^5.7.0",
     "tslint-loader": "^3.5.3",
-    "typescript": "^2.5.2",
-    "validate-commit-msg": "^2.14.0",
-    "webpack": "^3.5.5",
+    "typescript": "^2.5.3",
+    "webpack": "^3.6.0",
     "webpack-angular-externals": "^1.0.0",
-    "webpack-dev-server": "^2.7.1",
+    "webpack-dev-server": "^2.9.1",
     "webpack-rxjs-externals": "^1.0.0",
-    "zone.js": "^0.8.17"
+    "zone.js": "^0.8.18"
   },
   "peerDependencies": {
     "@angular/core": ">=2.0.0 <5.0.0"
-  },
-  "config": {
-    "commitizen": {
-      "path": "node_modules/cz-conventional-changelog"
-    }
   }
 }

text-input-highlight.component.d.ts

@@ -48,4 +48,9 @@ import { ChangeDetectorRef, EventEmitter, OnChanges, OnDestroy, Renderer2, SimpleChanges } from '@angular/core';
     private mouseHoveredTag;
+    private isDestroyed;
     constructor(renderer: Renderer2, cdr: ChangeDetectorRef);
     /**
+     * Manually call this function to refresh the highlight element if the textarea styles have changed
+     */
+    refresh(): void;
+    /**
      * @private
@@ -65,3 +70,2 @@ */
     private handleTextareaMouseEvent(event, eventName);
-    private copyTextareaStyles();
 }

text-input-highlight.component.js

@@ -79,4 +79,15 @@ import { ChangeDetectorRef, Component, EventEmitter, HostListener, Input, Output, Renderer2, ViewChild } from '@angular/core';
         this.textareaEventListeners = [];
+        this.isDestroyed = false;
     }
     /**
+     * Manually call this function to refresh the highlight element if the textarea styles have changed
+     */
+    TextInputHighlightComponent.prototype.refresh = function () {
+        var _this = this;
+        var computed = getComputedStyle(this.textInputElement);
+        styleProperties.forEach(function (prop) {
+            _this.highlightElementContainerStyle[prop] = computed[prop];
+        });
+    };
+    /**
      * @private
@@ -96,2 +107,3 @@ */
     TextInputHighlightComponent.prototype.ngOnDestroy = function () {
+        this.isDestroyed = true;
         this.textareaEventListeners.forEach(function (unregister) { return unregister(); });
@@ -103,3 +115,3 @@ };
     TextInputHighlightComponent.prototype.onWindowResize = function () {
-        this.copyTextareaStyles();
+        this.refresh();
     };
@@ -115,37 +127,40 @@ TextInputHighlightComponent.prototype.textInputElementChanged = function () {
         setTimeout(function () {
-            _this.copyTextareaStyles();
-            _this.textareaEventListeners.forEach(function (unregister) { return unregister(); });
-            _this.textareaEventListeners = [
-                _this.renderer.listen(_this.textInputElement, 'input', function () {
-                    _this.addTags();
-                }),
-                _this.renderer.listen(_this.textInputElement, 'scroll', function () {
-                    _this.highlightElement.nativeElement.scrollTop = _this.textInputElement.scrollTop;
-                    _this.highlightTagElements = _this.highlightTagElements.map(function (tag) {
-                        tag.clientRect = tag.element.getBoundingClientRect();
-                        return tag;
+            // in case the element was destroyed before the timeout fires
+            if (!_this.isDestroyed) {
+                _this.refresh();
+                _this.textareaEventListeners.forEach(function (unregister) { return unregister(); });
+                _this.textareaEventListeners = [
+                    _this.renderer.listen(_this.textInputElement, 'input', function () {
+                        _this.addTags();
+                    }),
+                    _this.renderer.listen(_this.textInputElement, 'scroll', function () {
+                        _this.highlightElement.nativeElement.scrollTop = _this.textInputElement.scrollTop;
+                        _this.highlightTagElements = _this.highlightTagElements.map(function (tag) {
+                            tag.clientRect = tag.element.getBoundingClientRect();
+                            return tag;
+                        });
+                    })
+                ];
+                // only add event listeners if the host component actually asks for it
+                if (_this.tagClick.observers.length > 0) {
+                    var onClick = _this.renderer.listen(_this.textInputElement, 'click', function (event) {
+                        _this.handleTextareaMouseEvent(event, 'click');
                     });
-                })
-            ];
-            // only add event listeners if the host component actually asks for it
-            if (_this.tagClick.observers.length > 0) {
-                var onClick = _this.renderer.listen(_this.textInputElement, 'click', function (event) {
-                    _this.handleTextareaMouseEvent(event, 'click');
-                });
-                _this.textareaEventListeners.push(onClick);
+                    _this.textareaEventListeners.push(onClick);
+                }
+                if (_this.tagMouseEnter.observers.length > 0) {
+                    var onMouseMove = _this.renderer.listen(_this.textInputElement, 'mousemove', function (event) {
+                        _this.handleTextareaMouseEvent(event, 'mousemove');
+                    });
+                    var onMouseLeave = _this.renderer.listen(_this.textInputElement, 'mouseleave', function (event) {
+                        if (_this.mouseHoveredTag) {
+                            _this.tagMouseLeave.emit(_this.mouseHoveredTag);
+                            _this.mouseHoveredTag = undefined;
+                        }
+                    });
+                    _this.textareaEventListeners.push(onMouseMove);
+                    _this.textareaEventListeners.push(onMouseLeave);
+                }
+                _this.addTags();
             }
-            if (_this.tagMouseEnter.observers.length > 0) {
-                var onMouseMove = _this.renderer.listen(_this.textInputElement, 'mousemove', function (event) {
-                    _this.handleTextareaMouseEvent(event, 'mousemove');
-                });
-                var onMouseLeave = _this.renderer.listen(_this.textInputElement, 'mouseleave', function (event) {
-                    if (_this.mouseHoveredTag) {
-                        _this.tagMouseLeave.emit(_this.mouseHoveredTag);
-                        _this.mouseHoveredTag = undefined;
-                    }
-                });
-                _this.textareaEventListeners.push(onMouseMove);
-                _this.textareaEventListeners.push(onMouseLeave);
-            }
-            _this.addTags();
         });
@@ -224,9 +239,2 @@ };
     };
-    TextInputHighlightComponent.prototype.copyTextareaStyles = function () {
-        var _this = this;
-        var computed = getComputedStyle(this.textInputElement);
-        styleProperties.forEach(function (prop) {
-            _this.highlightElementContainerStyle[prop] = computed[prop];
-        });
-    };
     TextInputHighlightComponent.decorators = [
@@ -233,0 +241,0 @@ { type: Component, args: [{

text-input-highlight.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"TagMouseEvent":{"__symbolic":"interface"},"TextInputHighlightComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"mwl-text-input-highlight","template":"\n    <div\n      class=\"text-highlight-element\"\n      [ngStyle]=\"highlightElementContainerStyle\"\n      [innerHtml]=\"highlightedText\"\n      #highlightElement>\n    </div>\n  "}]}],"members":{"tagCssClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tags":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"textInputElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tagClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"tagMouseEnter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"tagMouseLeave":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"highlightElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["highlightElement"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onWindowResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:resize"]}]}],"textInputElementChanged":[{"__symbolic":"method"}],"addTags":[{"__symbolic":"method"}],"handleTextareaMouseEvent":[{"__symbolic":"method"}],"copyTextareaStyles":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"TagMouseEvent":{"__symbolic":"interface"},"TextInputHighlightComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"mwl-text-input-highlight","template":"\n    <div\n      class=\"text-highlight-element\"\n      [ngStyle]=\"highlightElementContainerStyle\"\n      [innerHtml]=\"highlightedText\"\n      #highlightElement>\n    </div>\n  "}]}],"members":{"tagCssClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tags":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"textInputElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tagClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"tagMouseEnter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"tagMouseLeave":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"highlightElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["highlightElement"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onWindowResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:resize"]}]}],"textInputElementChanged":[{"__symbolic":"method"}],"addTags":[{"__symbolic":"method"}],"handleTextareaMouseEvent":[{"__symbolic":"method"}],"copyTextareaStyles":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"TagMouseEvent":{"__symbolic":"interface"},"TextInputHighlightComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"mwl-text-input-highlight","template":"\n    <div\n      class=\"text-highlight-element\"\n      [ngStyle]=\"highlightElementContainerStyle\"\n      [innerHtml]=\"highlightedText\"\n      #highlightElement>\n    </div>\n  "}]}],"members":{"tagCssClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tags":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"textInputElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tagClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"tagMouseEnter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"tagMouseLeave":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"highlightElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["highlightElement"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"refresh":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onWindowResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:resize"]}]}],"textInputElementChanged":[{"__symbolic":"method"}],"addTags":[{"__symbolic":"method"}],"handleTextareaMouseEvent":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"TagMouseEvent":{"__symbolic":"interface"},"TextInputHighlightComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"mwl-text-input-highlight","template":"\n    <div\n      class=\"text-highlight-element\"\n      [ngStyle]=\"highlightElementContainerStyle\"\n      [innerHtml]=\"highlightedText\"\n      #highlightElement>\n    </div>\n  "}]}],"members":{"tagCssClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tags":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"textInputElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"tagClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"tagMouseEnter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"tagMouseLeave":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"highlightElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["highlightElement"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"refresh":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onWindowResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["window:resize"]}]}],"textInputElementChanged":[{"__symbolic":"method"}],"addTags":[{"__symbolic":"method"}],"handleTextareaMouseEvent":[{"__symbolic":"method"}]}}}}]

No alert changes

Improved metrics

Total package byte prevSize

167342

increased by2.1%

Lines of code

953

increased by2.14%

Worsened metrics

Dev dependency count

60

increased by1.69%

No dependency changes