diff --git a/package.json b/package.json index f3de5fed..5fc3e904 100644 --- a/package.json +++ b/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", diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html index 5fa7473d..3c2db106 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.html @@ -1,3 +1,3 @@
- +
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.ts index 472d8291..7d54ed0b 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/text.component.ts +++ b/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; - test = `가




바사`; - 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 + // ); + } } diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts index 9182d8c6..9f61cf9f 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts +++ b/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() diff --git a/projects/ucap-webmessenger-ui/src/lib/pipes/linky.pipe.ts b/projects/ucap-webmessenger-ui/src/lib/pipes/linky.pipe.ts new file mode 100644 index 00000000..6d7aaec5 --- /dev/null +++ b/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 '' + match.getAnchorHref() + ''; + // return true; + } + }, + ...options + }; + return Autolinker.link(value, options); + } +} diff --git a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts index 1af06f5e..cdd8be91 100644 --- a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts +++ b/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,