,
private dialogService: DialogService
) {}
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/message-editor.component.html b/projects/ucap-webmessenger-ui/src/lib/components/message-editor.component.html
new file mode 100644
index 00000000..6c3813ff
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/components/message-editor.component.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/message-editor.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/message-editor.component.scss
new file mode 100644
index 00000000..cb4a5c84
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/components/message-editor.component.scss
@@ -0,0 +1,9 @@
+.container {
+ height: 500px;
+ overflow: auto;
+
+ .editor {
+ height: 100%;
+ width: 100%;
+ }
+}
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/message-editor.component.spec.ts b/projects/ucap-webmessenger-ui/src/lib/components/message-editor.component.spec.ts
new file mode 100644
index 00000000..cafed007
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/components/message-editor.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MessageEditorComponent } from './message-editor.component';
+
+describe('MessageEditorComponent', () => {
+ let component: MessageEditorComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ MessageEditorComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(MessageEditorComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/message-editor.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/message-editor.component.ts
new file mode 100644
index 00000000..8b3e1c8f
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/lib/components/message-editor.component.ts
@@ -0,0 +1,197 @@
+import {
+ Component,
+ OnInit,
+ ElementRef,
+ ViewChild,
+ AfterViewInit,
+ HostListener
+} from '@angular/core';
+
+@Component({
+ selector: 'ucap-message-editor',
+ templateUrl: './message-editor.component.html',
+ styleUrls: ['./message-editor.component.scss']
+})
+export class MessageEditorComponent implements OnInit, AfterViewInit {
+ @ViewChild('fileInput', { static: false })
+ fileInput: ElementRef;
+
+ @ViewChild('contentArea', { static: true }) contentArea: ElementRef;
+
+ attachFileType: string;
+
+ fileIndex = 0;
+ attachFiles: { file: File; idx: number }[] = [];
+ imageFiles: { file: File; idx: number }[] = [];
+
+ constructor() {}
+
+ ngOnInit() {}
+
+ ngAfterViewInit(): void {
+ setTimeout(() => {
+ this.contentArea.nativeElement.focus();
+
+ document
+ .querySelector('#contentArea')
+ .addEventListener('paste', (event: ClipboardEvent) => {
+ event.stopPropagation();
+ event.preventDefault();
+
+ const clipboardData = event.clipboardData;
+ let pastedData = clipboardData.getData('Text');
+ pastedData = this.convertHtmltoEntity(pastedData);
+ clipboardData.setData('Text', pastedData);
+ const div = document.createElement('div');
+ div.innerHTML = pastedData;
+
+ this.attachElementNextFocused(div);
+ });
+
+ document
+ .querySelector('#contentArea')
+ .addEventListener('keyup', event => {
+ if (
+ document.querySelector('#contentArea').innerHTML === '' ||
+ document.querySelector('#contentArea').innerHTML === '
'
+ ) {
+ const div = document.createElement('div');
+ div.innerHTML = '
';
+ document.querySelector('#contentArea').innerHTML = '';
+ this.attachElementNextFocused(div);
+ }
+ });
+
+ // init..
+ if (document.querySelector('#contentArea').innerHTML === '') {
+ const div = document.createElement('div');
+ div.innerHTML = '
';
+ this.attachElementNextFocused(div);
+ }
+ }, 700);
+ }
+
+ onClickFileInput(type: string) {
+ this.attachFileType = type;
+ if (type === 'attach') {
+ this.fileInput.nativeElement.setAttribute('multiple', 'true');
+ this.fileInput.nativeElement.setAttribute('accept', '*.*');
+ } else {
+ this.fileInput.nativeElement.removeAttribute('multiple');
+ this.fileInput.nativeElement.setAttribute('accept', 'image/*');
+ }
+ this.fileInput.nativeElement.click();
+ }
+
+ onChangeFileInput() {
+ const files: FileList = this.fileInput.nativeElement.files;
+
+ // tslint:disable-next-line: prefer-for-of
+ for (let i = 0; i < files.length; i++) {
+ if (this.attachFileType === 'attach') {
+ this.attachFiles.push({ file: files[i], idx: this.fileIndex });
+ } else {
+ this.imageFiles.push({ file: files[i], idx: this.fileIndex });
+ this.addImageInInputField(files[i], this.fileIndex);
+ }
+ this.fileIndex++;
+ }
+ this.fileInput.nativeElement.value = '';
+ }
+
+ getContents(): string {
+ return 'this is contents';
+ }
+
+ addImageInInputField(image: File, index: number) {
+ const reader = new FileReader();
+ reader.readAsDataURL(image);
+ reader.onloadend = () => {
+ const img = document.createElement('img');
+ img.setAttribute('src', reader.result.toString());
+ img.setAttribute('data-seq', index.toString());
+
+ this.attachElementNextFocused(img);
+ };
+ }
+
+ attachElementNextFocused(el: HTMLElement) {
+ if (window.getSelection) {
+ const sel = window.getSelection();
+ const selAnchorNode: Node = sel.anchorNode;
+ const focusedEl = selAnchorNode.parentElement;
+
+ if (this.isParentIdCheck(focusedEl, 'contentArea')) {
+ if (sel.rangeCount) {
+ const range = sel.getRangeAt(0);
+
+ if (selAnchorNode.nodeType === Node.TEXT_NODE) {
+ const content: string = focusedEl.textContent;
+
+ focusedEl.innerText =
+ content.substr(0, range.startOffset) +
+ el.textContent +
+ content.substr(range.endOffset);
+ } else if (
+ selAnchorNode.nodeType === Node.ELEMENT_NODE &&
+ focusedEl.id === 'contentArea'
+ ) {
+ const selEl = selAnchorNode as HTMLElement;
+ const content: string = selEl.textContent;
+
+ selEl.innerText =
+ content.substr(0, range.startOffset) +
+ el.textContent +
+ content.substr(range.endOffset);
+ } else {
+ focusedEl.append(el);
+ }
+ } else {
+ focusedEl.append(el);
+ }
+ } else {
+ this.contentArea.nativeElement.appendChild(el);
+ }
+ } else {
+ this.contentArea.nativeElement.appendChild(el);
+ }
+ }
+
+ isParentIdCheck(el: HTMLElement, id: string): boolean {
+ if (el.id === id) {
+ return true;
+ } else {
+ if (el.tagName === 'BODY' || el.tagName === 'body') {
+ return false;
+ } else {
+ return this.isParentIdCheck(el.parentElement, id);
+ }
+ }
+ }
+
+ test(): void {
+ if (!!this.contentArea) {
+ const els: HTMLCollection = this.contentArea.nativeElement.children;
+
+ // tslint:disable-next-line: prefer-for-of
+ for (let i = 0; i < els.length; i++) {
+ console.log(this.convertEntitytoHtml(els[i].textContent));
+ }
+ }
+ }
+
+ convertHtmltoEntity(str: string): string {
+ return str
+ .replace(/ /g, ' ')
+ .replace(//g, '>')
+ .replace(/\n/g, '
');
+ }
+ convertEntitytoHtml(str: string): string {
+ return str
+ .replace(/ /g, ' ')
+ .replace(/</g, '<')
+ .replace(/>/g, '>')
+ .replace(/
/g, ' \n');
+ }
+}
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 21caaeae..a9bcf747 100644
--- a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
+++ b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
@@ -53,6 +53,7 @@ import {
import { SecondsToMinutesPipe } from './pipes/seconds-to-minutes.pipe';
import { LinkyPipe } from './pipes/linky.pipe';
import { StickerSelectorComponent } from './components/sticker-selector.component';
+import { MessageEditorComponent } from './components/message-editor.component';
import { MatTabsModule } from '@angular/material';
const COMPONENTS = [
@@ -61,6 +62,7 @@ const COMPONENTS = [
FileViewerComponent,
ExpansionPanelComponent,
StickerSelectorComponent,
+ MessageEditorComponent,
BinaryViewerComponent,
DocumentViewerComponent,