대화방 > text 내 링크 포인트 분류

package.json

@@ -69,6 +69,7 @@
     "@types/webpack-merge": "^4.1.5",
     "@types/webpack-node-externals": "^1.6.3",
     "angular-split": "^3.0.2",
+    "autolinker": "^3.11.1",
     "awesome-node-loader": "^1.1.1",
     "awesome-typescript-loader": "^5.2.1",
     "classlist.js": "^1.1.20150312",

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html

@@ -1,3 +1,3 @@
 <div class="bubble-main">
-  <span [innerHTML]="message.sentMessage"></span>
+  <span [innerHTML]="message.sentMessage | linky"></span>
 </div>

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.ts

@@ -1,17 +1,46 @@
-import { Component, OnInit, Input } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Input,
+  ElementRef,
+  AfterViewInit,
+  Inject
+} from '@angular/core';
 import { Info, EventJson } from '@ucap-webmessenger/protocol-event';
+import { NativeService, UCAP_NATIVE_SERVICE } from '@ucap-webmessenger/native';
 
 @Component({
   selector: 'ucap-chat-message-box-text',
   templateUrl: './text.component.html',
   styleUrls: ['./text.component.scss']
 })
-export class TextComponent implements OnInit {
+export class TextComponent implements OnInit, AfterViewInit {
   @Input()
   message: Info<EventJson>;
 
-  test = `가<br>나<br >다<br/>라<br />마<br class=""/>바사`;
-  constructor() {}
+  constructor(
+    private elementRef: ElementRef,
+    @Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService
+  ) {}
 
   ngOnInit() {}
+
+  ngAfterViewInit(): void {
+    if (
+      !!this.elementRef.nativeElement &&
+      !!this.elementRef.nativeElement.querySelector('a')
+    ) {
+      const elements = this.elementRef.nativeElement.querySelectorAll('a');
+      elements.forEach(element => {
+        element.addEventListener('click', this.onClickEvent.bind(this));
+      });
+    }
+  }
+
+  onClickEvent(event: MouseEvent) {
+    console.log('component', (event.target as HTMLAnchorElement).text);
+    // this.nativeService.openDefaultBrowser(
+    //   (event.target as HTMLAnchorElement).text
+    // );
+  }
 }

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts

@@ -6,6 +6,7 @@ import {
   EventEmitter,
   Output,
   ViewEncapsulation,
+  HostListener
 } from '@angular/core';
 
 import {
@@ -13,7 +14,7 @@ import {
   EventType,
   InfoResponse,
   EventJson,
-  FileEventJson,
+  FileEventJson
 } from '@ucap-webmessenger/protocol-event';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { UserInfo } from '@ucap-webmessenger/protocol-room';
@@ -26,7 +27,7 @@ import moment from 'moment';
 @Component({
   selector: 'ucap-chat-messages',
   templateUrl: './messages.component.html',
-  styleUrls: ['./messages.component.scss'],
+  styleUrls: ['./messages.component.scss']
 })
 export class MessagesComponent implements OnInit {
   @Input()

projects/ucap-webmessenger-ui/src/lib/pipes/linky.pipe.ts

@@ -0,0 +1,22 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Autolinker, AutolinkerConfig } from 'autolinker';
+
+@Pipe({ name: 'linky' })
+export class LinkyPipe implements PipeTransform {
+  transform(value: string, options?: AutolinkerConfig): string {
+    options = {
+      email: false,
+      phone: false,
+      stripPrefix: false,
+      // newWindow: false,
+      replaceFn: match => {
+        if (match.getType() === 'url') {
+          return '<a>' + match.getAnchorHref() + '</a>';
+          // return true;
+        }
+      },
+      ...options
+    };
+    return Autolinker.link(value, options);
+  }
+}

projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts

@@ -46,6 +46,7 @@ import {
   DateToStringFormatPipe
 } from './pipes/dates.pipe';
 import { SecondsToMinutesPipe } from './pipes/seconds-to-minutes.pipe';
+import { LinkyPipe } from './pipes/linky.pipe';
 
 const COMPONENTS = [
   FileUploadQueueComponent,
@@ -72,7 +73,8 @@ const PIPES = [
   HtmlToLinefeedPipe,
   DateToStringForChatRoomListPipe,
   DateToStringFormatPipe,
-  SecondsToMinutesPipe
+  SecondsToMinutesPipe,
+  LinkyPipe
 ];
 const SERVICES = [
   BottomSheetService,