sort highlighted items ascendingly

e2e/src/app.e2e-spec.ts

@@ -9,6 +9,6 @@ describe('workspace-project App', () => {
 
   it('should display welcome message', () => {
     page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Ngx Text Highlighter');
+    expect(page.getParagraphText()).toEqual('Text Highlighter');
   });
 });

package.json

@@ -2,7 +2,7 @@
   "name": "ngx-text-highlighter-app",
   "description": "Angular 5+ module for displaying editable textarea where you can highlight text selections and filter your previous selection based on highlighting color.",
   "homepage": "https://github.com/mmounirf/ngx-text-highlighter",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "author": {
     "name": "mmounirf",
     "email": "m.mounir.f@gmail.com",

projects/ngx-text-highlighter/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-text-highlighter",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Angular 5+ module for displaying editable textarea where you can highlight text selections and filter your previous selection based on highlighting color.",
   "homepage": "https://github.com/mmounirf/ngx-text-highlighter",
   "author": {

projects/ngx-text-highlighter/src/lib/components/marker/marker.component.ts

@@ -52,4 +52,8 @@ export class MarkerComponent implements OnInit, OnDestroy  {
   ngOnDestroy() {
     this.events.listen().unsubscribe();
   }
+
+  setIndex(index) {
+
+  }
 }

projects/ngx-text-highlighter/src/lib/components/stored-highlights/stored-highlights.component.ts

@@ -15,7 +15,9 @@ export class StoredHighlightsComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.events.listen().subscribe((event) => {
       if (event.origin === 'textarea' && event.type === 'store') {
-        this.store.push({text: event.text, color: event.color});
+        this.store.push({text: event.text, color: event.color, index: event.index});
+        // Sort array ascendingly by index value
+        this.store.sort((x, y) => x.index - y.index);
       }
     });
 

projects/ngx-text-highlighter/src/lib/components/textarea/textarea.component.html

@@ -1,4 +1,6 @@
-    <div class="textarea"
+    <div
+        #textarea
+        class="textarea"
         (mouseup)="onSelection($event)"
         [attr.contenteditable]="true"
         (blur)="onTextAreaBlur()"

projects/ngx-text-highlighter/src/lib/components/textarea/textarea.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, Inject, EventEmitter, Output, OnDestroy } from '@angular/core';
+import { Component, OnInit, ViewChild, Inject, EventEmitter, Output, OnDestroy, ElementRef } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { EventsService } from '../../services/events.service';
 
@@ -13,7 +13,7 @@ export class TextareaComponent implements OnInit, OnDestroy  {
   selectedText: string;
 
   @Output() blur: EventEmitter<string> = new EventEmitter<string>();
-
+  @ViewChild('textarea') textarea: ElementRef;
   constructor(@Inject (DOCUMENT) private _document: any, private events: EventsService) { }
 
   ngOnInit() {
@@ -48,7 +48,9 @@ export class TextareaComponent implements OnInit, OnDestroy  {
       // Execute background color
       this._document.execCommand('hiliteColor', false, color);
       // Trigger stored highlights
-      this.events.dispatch({origin: 'textarea', type: 'store', color: color, text: text});
+      const selection = window.getSelection();
+      const selectionIndex = this.textarea.nativeElement.innerText.indexOf(selection.toString());
+      this.events.dispatch({origin: 'textarea', type: 'store', color: color, text: text, index: selectionIndex});
     }
   }
   onTextAreaBlur() {
@@ -81,6 +83,8 @@ export class TextareaComponent implements OnInit, OnDestroy  {
     if (selection.type !== 'Range') {
       this.events.dispatch({origin: 'textarea', type: 'blur'});
     }
+
+
   }
 
   ngOnDestroy() {

src/app/app.component.html

@@ -1,6 +1,6 @@
 <div class="header">
-  <h1>Ngx Text Highlighter</h1>
-  <p>V1.0 Demo</p>
+  <h1>Text Highlighter</h1>
+  <p>V0.0.4 Demo</p>
 </div>
 <div class="container">
   <div class="option-wrapper">

src/app/app.component.spec.ts

@@ -28,6 +28,6 @@ describe('AppComponent', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Ngx Text Highlighter');
+    expect(compiled.querySelector('h1').textContent).toContain('Text Highlighter');
   }));
 });

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>NgxTextHighlighterApp</title>
+  <title>Text Highlighter</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">