mastodon text parsing functionnal

src/app/components/stream/status/databinded-text/databinded-text.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
+import { Component, OnInit, Input, EventEmitter, Output, Renderer2 } from '@angular/core';
+import { forEach } from '@angular/router/src/utils/collection';
 
 @Component({
     selector: 'app-databinded-text',
@@ -7,7 +8,7 @@ import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
 })
 export class DatabindedTextComponent implements OnInit {
     private accounts: string[] = [];
-    private hastags: string[] = [];
+    private hashtags: string[] = [];
 
     processedText: string;
 
@@ -16,13 +17,90 @@ export class DatabindedTextComponent implements OnInit {
     @Output() textSelected = new EventEmitter();
 
     @Input('text')
-    set text(value: string){
-        this.processedText = value;
+    set text(value: string) {
+        
+        let linksSections = value.split('<a ');
+
+        console.warn(linksSections);
+
+
+        this.processedText = '';
+        for (let section of linksSections) {
+            if (!section.includes('href')) {
+                this.processedText += section;
+                console.log('continue');
+                continue;
+            }
+
+            if (section.includes('class="mention hashtag"')) {
+               
+                let extractedLinkAndNext = section.split('</a>');
+                let extractedHashtag = extractedLinkAndNext[0].split('#')[1].replace('<span>', '').replace('</span>', '');
+
+                this.processedText += ` <a href class="${extractedHashtag}">#${extractedHashtag}</a>`;
+                if(extractedLinkAndNext[1]) this.processedText += extractedLinkAndNext[1];
+                this.hashtags.push(extractedHashtag);
+
+            } else if (section.includes('class="u-url mention"')) {
+                console.log('user');
+                console.log(section);
+                let extractedAccountAndNext = section.split('</a></span>');
+
+                console.log(extractedAccountAndNext[0].split('@<span>'));
+
+                let extractedAccountName = extractedAccountAndNext[0].split('@<span>')[1].replace('<span>', '').replace('</span>', '');
+                let extractedAccountLink = extractedAccountAndNext[0].split('" class="u-url mention"')[0].replace('href="https://', '').replace(' ', '').replace('@', '').split('/');
+                let extractedAccount = `@${extractedAccountLink[1]}@${extractedAccountLink[0]}`;
+
+                this.processedText += ` <a href class="${extractedAccountName}" title="${extractedAccount}">@${extractedAccountName}</a>`;
+
+                if(extractedAccountAndNext[1]) this.processedText += extractedAccountAndNext[1];
+                this.accounts.push(extractedAccount);
+
+                console.error(extractedAccountName);
+                console.error(extractedAccount);
+
+            } else {
+                this.processedText += `<a ${section}`;
+            }
+        }
+
+
+
+        // this.processedText = value;
     }
 
-    constructor() { }
+
+
+    constructor(private renderer: Renderer2) { }
 
     ngOnInit() {
     }
 
+    ngAfterViewInit() {
+        // let el = this.contentElement.nativeElement.querySelector('.test');
+        // console.log(this.contentElement.nativeElement);
+        // console.log(el);
+        // if (el)
+        //     this.renderer.listen(el, 'click', (el2) => {
+        //         console.log(el2);
+        //         console.warn('YOOOOO');
+        //         return false;
+        //     });
+    }
+
+    selectAccount(account: string) {
+        console.warn(`select @${account}`);
+        this.accountSelected.next(account);
+    }
+
+    selectHashtag(hashtag: string) {
+        console.warn(`select #${hashtag}`);
+        this.hashtagSelected.next(hashtag);
+    }
+
+    selectText() {
+        this.textSelected.next();
+    }
+
 }

src/app/components/stream/status/status.component.ts

@@ -56,32 +56,22 @@ export class StatusComponent implements OnInit {
     }
 
 
-    constructor(
-        private renderer: Renderer2,
-        @Inject(LOCALE_ID) private locale: string) { }
+    constructor(@Inject(LOCALE_ID) private locale: string) { }
 
     ngOnInit() {
     }
 
-    ngAfterViewInit() {
-        //this.contentElement.nativeElement.querySelector('my-element').addEventListener('click',this.test.bind(this)); 
-
-        let el = this.contentElement.nativeElement.querySelector('.test');
-        console.log(this.contentElement.nativeElement);
-        console.log(el);
-        if(el)
-        this.renderer.listen(el, 'click', (el2) => {
-            console.log(el2);
-            console.warn('YOOOOO');
-            return false;
-        });
-
-
-        // setTimeout(() => {
-        //     this.contentElement.nativeElement.querySelector('a.test')[0].onclick(this.test());
-        // }, 100);
-
-    }
+    // ngAfterViewInit() {
+    //     let el = this.contentElement.nativeElement.querySelector('.test');
+    //     console.log(this.contentElement.nativeElement);
+    //     console.log(el);
+    //     if (el)
+    //         this.renderer.listen(el, 'click', (el2) => {
+    //             console.log(el2);
+    //             console.warn('YOOOOO');
+    //             return false;
+    //         });
+    // }
 
     openAccount(account: Account): boolean {
         this.browseAccount.next(account);