From 96b7016b59cc600d2fd8a06ff64dc8e48fcafd94 Mon Sep 17 00:00:00 2001
From: js87zz <js87zz.lee@nhn.com>
Date: Tue, 14 Dec 2021 23:33:11 +0900
Subject: [PATCH] fix: overflow text and wrong event target in viewer

---
 apps/editor/src/markdown/mdPreview.ts | 14 +++++++++++++-
 apps/editor/src/viewer.ts             |  2 +-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/apps/editor/src/markdown/mdPreview.ts b/apps/editor/src/markdown/mdPreview.ts
index d254d4bc78..add3c182cd 100644
--- a/apps/editor/src/markdown/mdPreview.ts
+++ b/apps/editor/src/markdown/mdPreview.ts
@@ -87,13 +87,21 @@ class MarkdownPreview {
 
     this.initEvent(highlight);
     this.initContentSection();
+
+    // To prevent overflowing contents in the viewer
+    if (this.isViewer) {
+      this.previewContent.style.overflowWrap = 'break-word';
+    }
   }
 
   private initContentSection() {
     this.previewContent = createElementWith(
       `<div class="${cls('contents')}"></div>`
     ) as HTMLElement;
-    this.el!.appendChild(this.previewContent);
+
+    if (!this.isViewer) {
+      this.el!.appendChild(this.previewContent);
+    }
   }
 
   private toggleActive(active: boolean) {
@@ -103,6 +111,10 @@ class MarkdownPreview {
   private initEvent(highlight: boolean) {
     this.eventEmitter.listen('updatePreview', this.update.bind(this));
 
+    if (this.isViewer) {
+      return;
+    }
+
     if (highlight) {
       this.eventEmitter.listen('changeToolbarState', ({ mdNode, cursorPos }) => {
         this.updateCursorNode(mdNode, cursorPos);
diff --git a/apps/editor/src/viewer.ts b/apps/editor/src/viewer.ts
index 58d6052e49..34675f9057 100644
--- a/apps/editor/src/viewer.ts
+++ b/apps/editor/src/viewer.ts
@@ -120,7 +120,7 @@ class ToastUIEditorViewer {
       isViewer: true,
     });
 
-    on(this.preview.el!, 'mousedown', this.toggleTask.bind(this));
+    on(this.preview.previewContent!, 'mousedown', this.toggleTask.bind(this));
 
     if (initialValue) {
       this.setMarkdown(initialValue);