fix: overflow text and wrong event target in viewer

nhn · Dec 21, 2021 · 96b7016 · 96b7016
1 parent c63fe9a
commit 96b7016
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git 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
@@ -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);