From 4590f747344ac746f11991b67dd65fa2b340aa97 Mon Sep 17 00:00:00 2001
From: js87zz <js87zz.lee@nhn.com>
Date: Mon, 7 Feb 2022 09:23:21 +0900
Subject: [PATCH 1/2] feat: add loadUI event

---
 apps/editor/src/editor.ts             | 1 +
 apps/editor/src/event/eventEmitter.ts | 1 +
 apps/editor/types/event.d.ts          | 1 +
 3 files changed, 3 insertions(+)

diff --git a/apps/editor/src/editor.ts b/apps/editor/src/editor.ts
index e2f4e41b55..f832c24ef4 100644
--- a/apps/editor/src/editor.ts
+++ b/apps/editor/src/editor.ts
@@ -46,6 +46,7 @@ class ToastUIEditor extends EditorCore {
 
       this.defaultUI.insertToolbarItem({ groupIndex, itemIndex }, item);
     });
+    this.eventEmitter.emit('loadUI', this);
   }
 
   /**
diff --git a/apps/editor/src/event/eventEmitter.ts b/apps/editor/src/event/eventEmitter.ts
index 337dff1424..cce2f76f16 100644
--- a/apps/editor/src/event/eventEmitter.ts
+++ b/apps/editor/src/event/eventEmitter.ts
@@ -30,6 +30,7 @@ const eventTypeList: EventTypes[] = [
   'beforePreviewRender',
   'beforeConvertWysiwygToMarkdown',
   'load',
+  'loadUI',
   'change',
   'caretChange',
   'destroy',
diff --git a/apps/editor/types/event.d.ts b/apps/editor/types/event.d.ts
index da6183edd6..7f67e7bf96 100644
--- a/apps/editor/types/event.d.ts
+++ b/apps/editor/types/event.d.ts
@@ -46,6 +46,7 @@ export type EventTypes =
   | 'beforePreviewRender'
   | 'beforeConvertWysiwygToMarkdown'
   | 'load'
+  | 'loadUI'
   | 'change'
   | 'caretChange'
   | 'destroy'

From ac969008ad2e0f3f51c4079b653db6558dceb0d3 Mon Sep 17 00:00:00 2001
From: js87zz <js87zz.lee@nhn.com>
Date: Mon, 7 Feb 2022 09:23:56 +0900
Subject: [PATCH 2/2] fix: wrong popup widget position with scroll position

---
 apps/editor/src/plugins/popupWidget.ts | 27 ++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/apps/editor/src/plugins/popupWidget.ts b/apps/editor/src/plugins/popupWidget.ts
index 381d6b8243..db43470299 100644
--- a/apps/editor/src/plugins/popupWidget.ts
+++ b/apps/editor/src/plugins/popupWidget.ts
@@ -1,9 +1,9 @@
 import { EditorView } from 'prosemirror-view';
 import { Plugin, PluginKey } from 'prosemirror-state';
 import css from 'tui-code-snippet/domUtil/css';
+import { closest, cls } from '@/utils/dom';
 import { WidgetStyle } from '@t/editor';
 import { Emitter } from '@t/event';
-
 interface Widget {
   node: HTMLElement;
   style: WidgetStyle;
@@ -11,21 +11,28 @@ interface Widget {
 }
 
 const pluginKey = new PluginKey('widget');
+const MARGIN = 5;
 
 class PopupWidget {
   private popup: HTMLElement | null = null;
 
   private eventEmitter: Emitter;
 
-  constructor(eventEmitter: Emitter) {
+  private rootEl!: HTMLElement;
+
+  constructor(view: EditorView, eventEmitter: Emitter) {
+    this.rootEl = view.dom.parentElement!;
     this.eventEmitter = eventEmitter;
     this.eventEmitter.listen('blur', this.removeWidget);
+    this.eventEmitter.listen('loadUI', () => {
+      this.rootEl = closest(view.dom.parentElement!, `.${cls('defaultUI')}`) as HTMLElement;
+    });
     this.eventEmitter.listen('removePopupWidget', this.removeWidget);
   }
 
   private removeWidget = () => {
     if (this.popup) {
-      document.body.removeChild(this.popup);
+      this.rootEl.removeChild(this.popup);
       this.popup = null;
     }
   };
@@ -39,11 +46,15 @@ class PopupWidget {
       const { node, style } = widget;
       const { top, left, bottom } = view.coordsAtPos(widget.pos);
       const height = bottom - top;
+      const rect = this.rootEl.getBoundingClientRect();
+      const relTopPos = top - rect.top;
 
-      css(node, { position: 'absolute', left: `${left}px`, opacity: '0' });
-      document.body.appendChild(node);
+      css(node, { opacity: '0' });
+      this.rootEl.appendChild(node);
       css(node, {
-        top: `${style === 'bottom' ? top + height : top - node.clientHeight - height}px`,
+        position: 'absolute',
+        left: `${left - rect.left + MARGIN}px`,
+        top: `${style === 'bottom' ? relTopPos + height - MARGIN : relTopPos - height}px`,
         opacity: '1',
       });
       this.popup = node;
@@ -67,8 +78,8 @@ export function addWidget(eventEmitter: Emitter) {
         return tr.getMeta('widget');
       },
     },
-    view() {
-      return new PopupWidget(eventEmitter);
+    view(editorView) {
+      return new PopupWidget(editorView, eventEmitter);
     },
   });
 }