From a2f81e370383f7c9a6d82e04c978b7082832685f Mon Sep 17 00:00:00 2001
From: Mou <mohamed.m@trufla.com>
Date: Sat, 3 Nov 2018 22:36:37 +0200
Subject: [PATCH] sort highlighted items ascendingly

---
 e2e/src/app.e2e-spec.ts                                |  2 +-
 package.json                                           |  2 +-
 projects/ngx-text-highlighter/package.json             |  2 +-
 .../src/lib/components/marker/marker.component.ts      |  4 ++++
 .../stored-highlights/stored-highlights.component.ts   |  4 +++-
 .../lib/components/textarea/textarea.component.html    |  4 +++-
 .../src/lib/components/textarea/textarea.component.ts  | 10 +++++++---
 src/app/app.component.html                             |  4 ++--
 src/app/app.component.spec.ts                          |  2 +-
 src/index.html                                         |  2 +-
 10 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/e2e/src/app.e2e-spec.ts b/e2e/src/app.e2e-spec.ts
index c31256a..e0c79b2 100644
--- a/e2e/src/app.e2e-spec.ts
+++ b/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');
   });
 });
diff --git a/package.json b/package.json
index 24ecd0d..9365925 100644
--- a/package.json
+++ b/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",
diff --git a/projects/ngx-text-highlighter/package.json b/projects/ngx-text-highlighter/package.json
index 939c479..3a443c0 100644
--- a/projects/ngx-text-highlighter/package.json
+++ b/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": {
diff --git a/projects/ngx-text-highlighter/src/lib/components/marker/marker.component.ts b/projects/ngx-text-highlighter/src/lib/components/marker/marker.component.ts
index f739c4d..418eb10 100644
--- a/projects/ngx-text-highlighter/src/lib/components/marker/marker.component.ts
+++ b/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) {
+
+  }
 }
diff --git a/projects/ngx-text-highlighter/src/lib/components/stored-highlights/stored-highlights.component.ts b/projects/ngx-text-highlighter/src/lib/components/stored-highlights/stored-highlights.component.ts
index 84ea5a7..8043897 100644
--- a/projects/ngx-text-highlighter/src/lib/components/stored-highlights/stored-highlights.component.ts
+++ b/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);
       }
     });
 
diff --git a/projects/ngx-text-highlighter/src/lib/components/textarea/textarea.component.html b/projects/ngx-text-highlighter/src/lib/components/textarea/textarea.component.html
index 59ca5b1..24c17b4 100644
--- a/projects/ngx-text-highlighter/src/lib/components/textarea/textarea.component.html
+++ b/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()"
diff --git a/projects/ngx-text-highlighter/src/lib/components/textarea/textarea.component.ts b/projects/ngx-text-highlighter/src/lib/components/textarea/textarea.component.ts
index 5d58751..b9efaa0 100644
--- a/projects/ngx-text-highlighter/src/lib/components/textarea/textarea.component.ts
+++ b/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() {
diff --git a/src/app/app.component.html b/src/app/app.component.html
index b909d6d..ba65f11 100644
--- a/src/app/app.component.html
+++ b/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">
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index e1b35fb..db9d863 100644
--- a/src/app/app.component.spec.ts
+++ b/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');
   }));
 });
diff --git a/src/index.html b/src/index.html
index 8cf9435..3b9f39a 100644
--- a/src/index.html
+++ b/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">