From b0b169639f14cdbee9957afa51240640a0c67838 Mon Sep 17 00:00:00 2001
From: nighca <nighca@live.cn>
Date: Thu, 2 Jan 2025 12:22:18 +0800
Subject: [PATCH] Stop using monac content-widget for In-editor overlay
 optimization

---
 .../editor/code-editor/ui/CodeEditorCard.vue  |   9 +-
 .../editor/code-editor/ui/CodeEditorUI.vue    |  11 -
 .../editor/code-editor/ui/common.ts           |  22 +-
 .../ui/completion/CompletionCard.vue          |   4 +-
 .../ui/completion/CompletionUI.vue            |  41 +++-
 .../editor/code-editor/ui/completion/index.ts |  30 ---
 .../ui/context-menu/ContextMenu.vue           |   7 +-
 .../ui/context-menu/ContextMenuTrigger.vue    |   1 +
 .../ui/context-menu/ContextMenuUI.vue         |   2 +-
 .../code-editor/ui/context-menu/index.ts      |   3 +-
 .../editor/code-editor/ui/hover/HoverCard.vue |   8 +-
 .../editor/code-editor/ui/hover/HoverUI.vue   |  41 +++-
 .../editor/code-editor/ui/hover/index.ts      |  81 +++----
 .../ResourceReferenceUI.vue                   |  41 +++-
 .../ui/resource-reference/index.ts            |  31 +--
 .../selector/ResourceSelector.vue             |   4 +-
 spx-gui/src/components/ui/UIDropdown.ts       | 199 ++++++++++++++++++
 spx-gui/src/components/ui/UIDropdown.vue      | 134 ------------
 spx-gui/src/components/ui/index.ts            |   2 +-
 spx-gui/src/components/ui/menu/UIMenuItem.vue |   2 +-
 20 files changed, 397 insertions(+), 276 deletions(-)
 create mode 100644 spx-gui/src/components/ui/UIDropdown.ts
 delete mode 100644 spx-gui/src/components/ui/UIDropdown.vue

diff --git a/spx-gui/src/components/editor/code-editor/ui/CodeEditorCard.vue b/spx-gui/src/components/editor/code-editor/ui/CodeEditorCard.vue
index 03a3acf1f..095ecb4d1 100644
--- a/spx-gui/src/components/editor/code-editor/ui/CodeEditorCard.vue
+++ b/spx-gui/src/components/editor/code-editor/ui/CodeEditorCard.vue
@@ -1,12 +1,5 @@
-<script setup lang="ts">
-function handleWheel(e: WheelEvent) {
-  // Prevent monaco editor from handling wheel event in completion card, see details in https://github.com/microsoft/monaco-editor/issues/2304
-  e.stopPropagation()
-}
-</script>
-
 <template>
-  <div class="code-editor-card" @wheel="handleWheel">
+  <div class="code-editor-card">
     <slot></slot>
   </div>
 </template>
diff --git a/spx-gui/src/components/editor/code-editor/ui/CodeEditorUI.vue b/spx-gui/src/components/editor/code-editor/ui/CodeEditorUI.vue
index ddbe7d29d..f61d8d456 100644
--- a/spx-gui/src/components/editor/code-editor/ui/CodeEditorUI.vue
+++ b/spx-gui/src/components/editor/code-editor/ui/CodeEditorUI.vue
@@ -8,12 +8,6 @@ export function useCodeEditorUICtx() {
   if (ctx == null) throw new Error('useCodeEditorUICtx should be called inside of CodeEditorUI')
   return ctx
 }
-
-export function makeContentWidgetEl() {
-  const el = document.createElement('div')
-  el.className = 'code-editor-content-widget'
-  return el
-}
 </script>
 
 <script setup lang="ts">
@@ -356,11 +350,6 @@ function zoomReset() {
   margin: 12px 0;
 }
 
-:global(.code-editor-content-widget) {
-  z-index: 10; // Ensure content widget is above other elements, especially cursor
-  padding: 2px 0; // Gap between content widget and text
-}
-
 .right-sidebar {
   padding: 12px 8px;
   flex: 0 0 auto;
diff --git a/spx-gui/src/components/editor/code-editor/ui/common.ts b/spx-gui/src/components/editor/code-editor/ui/common.ts
index cf70af849..fa3174616 100644
--- a/spx-gui/src/components/editor/code-editor/ui/common.ts
+++ b/spx-gui/src/components/editor/code-editor/ui/common.ts
@@ -5,7 +5,7 @@ import { Sprite } from '@/models/sprite'
 import { Sound } from '@/models/sound'
 import { isWidget } from '@/models/widget'
 import { type Range, type Position, type TextDocumentIdentifier, type Selection } from '../common'
-import type { Monaco } from '../monaco'
+import type { Monaco, MonacoEditor } from '../monaco'
 
 export function token2Signal(token: monaco.CancellationToken): AbortSignal {
   const ctrl = new AbortController()
@@ -77,3 +77,23 @@ export function supportGoTo(resourceModel: ResourceModel): boolean {
   // Related issue: https://github.com/goplus/builder/issues/1139
   return resourceModel instanceof Sprite || resourceModel instanceof Sound || isWidget(resourceModel)
 }
+
+/** Position in pixels relative to the viewport's top-left corner */
+export type AbsolutePosition = {
+  top: number
+  left: number
+  height: number
+}
+
+export function toAbsolutePosition(position: Position, editor: MonacoEditor): AbsolutePosition | null {
+  const mPos = toMonacoPosition(position)
+  const editorPos = editor.getDomNode()?.getBoundingClientRect()
+  if (editorPos == null) return null
+  const scrolledVisiblePos = editor.getScrolledVisiblePosition(mPos)
+  if (scrolledVisiblePos == null) return null
+  return {
+    top: editorPos.top + scrolledVisiblePos.top,
+    left: editorPos.left + scrolledVisiblePos.left,
+    height: scrolledVisiblePos.height
+  }
+}
diff --git a/spx-gui/src/components/editor/code-editor/ui/completion/CompletionCard.vue b/spx-gui/src/components/editor/code-editor/ui/completion/CompletionCard.vue
index 1ddd0bec8..8376638ce 100644
--- a/spx-gui/src/components/editor/code-editor/ui/completion/CompletionCard.vue
+++ b/spx-gui/src/components/editor/code-editor/ui/completion/CompletionCard.vue
@@ -83,8 +83,8 @@ function applyItem(item: InternalCompletionItem) {
 
 <style lang="scss" scoped>
 .completion-card {
-  width: 360px;
-  max-height: 200px;
+  width: 447px;
+  max-height: 227px;
   padding: 12px 0 12px 12px;
   display: flex;
   align-items: stretch;
diff --git a/spx-gui/src/components/editor/code-editor/ui/completion/CompletionUI.vue b/spx-gui/src/components/editor/code-editor/ui/completion/CompletionUI.vue
index a8d926c4d..f6e8a1de0 100644
--- a/spx-gui/src/components/editor/code-editor/ui/completion/CompletionUI.vue
+++ b/spx-gui/src/components/editor/code-editor/ui/completion/CompletionUI.vue
@@ -1,20 +1,55 @@
 <script setup lang="ts">
+import { ref, watchEffect } from 'vue'
+import { UIDropdown, type DropdownPos } from '@/components/ui'
+import { toAbsolutePosition } from '../common'
+import { useCodeEditorUICtx } from '../CodeEditorUI.vue'
 import type { CompletionController } from '.'
 import CompletionCard from './CompletionCard.vue'
 
-defineProps<{
+const props = defineProps<{
   controller: CompletionController
 }>()
+
+const codeEditorUICtx = useCodeEditorUICtx()
+
+const dropdownVisible = ref(false)
+const dropdownPos = ref<DropdownPos>({ x: 0, y: 0 })
+
+watchEffect(() => {
+  const { currentCompletion, nonEmptyItems } = props.controller
+  if (currentCompletion == null || nonEmptyItems == null) {
+    dropdownVisible.value = false
+    return
+  }
+  const aPos = toAbsolutePosition(currentCompletion.position, codeEditorUICtx.ui.editor)
+  if (aPos == null) {
+    dropdownVisible.value = false
+    return
+  }
+  dropdownVisible.value = true
+  dropdownPos.value = {
+    x: aPos.left,
+    y: aPos.top,
+    width: 0,
+    height: aPos.height
+  }
+})
 </script>
 
 <template>
-  <Teleport :to="controller.widgetEl">
+  <UIDropdown
+    :visible="dropdownVisible"
+    trigger="manual"
+    :pos="dropdownPos"
+    placement="bottom-start"
+    :offset="{ x: 0, y: 4 }"
+  >
     <CompletionCard
       v-if="controller.nonEmptyItems != null"
       :items="controller.nonEmptyItems"
       :controller="controller"
     />
-  </Teleport>
+  </UIDropdown>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/editor/code-editor/ui/completion/index.ts b/spx-gui/src/components/editor/code-editor/ui/completion/index.ts
index dfd7b43e6..298435055 100644
--- a/spx-gui/src/components/editor/code-editor/ui/completion/index.ts
+++ b/spx-gui/src/components/editor/code-editor/ui/completion/index.ts
@@ -10,7 +10,6 @@ import {
 } from '../../common'
 import { type monaco } from '../../monaco'
 import type { CodeEditorUI } from '../code-editor-ui'
-import { makeContentWidgetEl } from '../CodeEditorUI.vue'
 import { fuzzyScoreGracefulAggressive as fuzzyScore, type FuzzyScore } from './fuzzy'
 
 export type CompletionContext = BaseContext
@@ -53,25 +52,6 @@ export class CompletionController extends Emitter<{
     super()
   }
 
-  widgetEl = makeContentWidgetEl()
-
-  private widget = {
-    getId: () => `completion-for-${this.ui.id}`,
-    getDomNode: () => this.widgetEl,
-    getPosition: () => {
-      if (this.nonEmptyItems == null) return null
-      const monaco = this.ui.monaco
-      const cursorPos = this.ui.editor.getPosition()
-      return {
-        position: cursorPos,
-        preference: [
-          monaco.editor.ContentWidgetPositionPreference.BELOW,
-          monaco.editor.ContentWidgetPositionPreference.ABOVE
-        ]
-      }
-    }
-  } satisfies monaco.editor.IContentWidget
-
   private currentCompletionRef = shallowRef<{
     ctrl: AbortController
     textDocument: ITextDocument
@@ -223,15 +203,6 @@ export class CompletionController extends Emitter<{
       })
     )
 
-    // Manage completion widget (visibility, position, ...)
-    editor.addContentWidget(this.widget)
-    this.addDisposer(() => editor.removeContentWidget(this.widget))
-    this.addDisposer(
-      watch(
-        () => this.nonEmptyItems,
-        () => editor.layoutContentWidget(this.widget)
-      )
-    )
     this.addDisposer(
       watch(
         () => [this.ui.activeTextDocument, this.ui.cursorPosition] as const,
@@ -242,7 +213,6 @@ export class CompletionController extends Emitter<{
             !positionEq(this.currentCompletion.position, position)
           ) {
             this.stopCompletion()
-            editor.layoutContentWidget(this.widget)
           }
         }
       )
diff --git a/spx-gui/src/components/editor/code-editor/ui/context-menu/ContextMenu.vue b/spx-gui/src/components/editor/code-editor/ui/context-menu/ContextMenu.vue
index 6db190327..43e3d65cc 100644
--- a/spx-gui/src/components/editor/code-editor/ui/context-menu/ContextMenu.vue
+++ b/spx-gui/src/components/editor/code-editor/ui/context-menu/ContextMenu.vue
@@ -5,10 +5,11 @@ import type { ContextMenuController, InternalMenuItem, MenuData } from '.'
 
 const props = defineProps<{
   controller: ContextMenuController
-  data: MenuData
+  data: MenuData | null
 }>()
 
 const pos = computed(() => {
+  if (props.data == null) return { x: 0, y: 0 }
   return {
     x: props.data.position.left,
     y: props.data.position.top
@@ -21,9 +22,9 @@ function handleItemClick(item: InternalMenuItem) {
 </script>
 
 <template>
-  <UIDropdown class="context-menu" trigger="manual" visible :pos="pos" placement="bottom-start">
+  <UIDropdown class="context-menu" trigger="manual" :visible="data != null" :pos="pos" placement="bottom-start">
     <UIMenu>
-      <UIMenuGroup v-for="(group, i) in data.groups" :key="i">
+      <UIMenuGroup v-for="(group, i) in data?.groups" :key="i">
         <UIMenuItem v-for="(item, j) in group" :key="j" @click="handleItemClick(item)">
           {{ item.title }}
         </UIMenuItem>
diff --git a/spx-gui/src/components/editor/code-editor/ui/context-menu/ContextMenuTrigger.vue b/spx-gui/src/components/editor/code-editor/ui/context-menu/ContextMenuTrigger.vue
index 55401ef58..bce40da51 100644
--- a/spx-gui/src/components/editor/code-editor/ui/context-menu/ContextMenuTrigger.vue
+++ b/spx-gui/src/components/editor/code-editor/ui/context-menu/ContextMenuTrigger.vue
@@ -36,6 +36,7 @@ function handleClick(e: MouseEvent) {
   display: flex;
   padding: 0;
   border: none;
+  outline: none;
   background: var(--ui-color-grey-100);
   cursor: pointer;
   color: var(--ui-color-yellow-main);
diff --git a/spx-gui/src/components/editor/code-editor/ui/context-menu/ContextMenuUI.vue b/spx-gui/src/components/editor/code-editor/ui/context-menu/ContextMenuUI.vue
index add3ec667..a8f690e5d 100644
--- a/spx-gui/src/components/editor/code-editor/ui/context-menu/ContextMenuUI.vue
+++ b/spx-gui/src/components/editor/code-editor/ui/context-menu/ContextMenuUI.vue
@@ -9,7 +9,7 @@ defineProps<{
 </script>
 
 <template>
-  <ContextMenu v-if="controller.currentMenuData != null" :data="controller.currentMenuData" :controller="controller" />
+  <ContextMenu :data="controller.currentMenuData" :controller="controller" />
   <Teleport :to="controller.menuTriggerWidgetEl">
     <ContextMenuTrigger
       v-if="controller.currentTriggerData != null"
diff --git a/spx-gui/src/components/editor/code-editor/ui/context-menu/index.ts b/spx-gui/src/components/editor/code-editor/ui/context-menu/index.ts
index bad55eece..79f9a8805 100644
--- a/spx-gui/src/components/editor/code-editor/ui/context-menu/index.ts
+++ b/spx-gui/src/components/editor/code-editor/ui/context-menu/index.ts
@@ -10,7 +10,6 @@ import {
   builtInCommandPaste,
   type InternalAction
 } from '../code-editor-ui'
-import { makeContentWidgetEl } from '../CodeEditorUI.vue'
 import { toMonacoPosition, fromMonacoPosition, fromMonacoSelection } from '../common'
 
 export type ContextMenuContext = BaseContext
@@ -72,7 +71,7 @@ export class ContextMenuController extends Disposable {
     return { selection: this.ui.selection! }
   }
 
-  menuTriggerWidgetEl = makeContentWidgetEl()
+  menuTriggerWidgetEl = document.createElement('div')
 
   private menuTriggerWidget = {
     getId: () => `context-menu-trigger-for-${this.ui.id}`,
diff --git a/spx-gui/src/components/editor/code-editor/ui/hover/HoverCard.vue b/spx-gui/src/components/editor/code-editor/ui/hover/HoverCard.vue
index 8fa456b6b..6180aeb1b 100644
--- a/spx-gui/src/components/editor/code-editor/ui/hover/HoverCard.vue
+++ b/spx-gui/src/components/editor/code-editor/ui/hover/HoverCard.vue
@@ -26,7 +26,11 @@ async function handleAction(action: InternalAction) {
 </script>
 
 <template>
-  <CodeEditorCard class="hover-card">
+  <CodeEditorCard
+    class="hover-card"
+    @mouseenter="controller.emit('cardMouseEnter')"
+    @mouseleave="controller.emit('cardMouseLeave')"
+  >
     <ul class="body">
       <li v-for="(content, i) in hover.contents" :key="i" class="content">
         <MarkdownView v-bind="content" />
@@ -64,7 +68,7 @@ async function handleAction(action: InternalAction) {
 }
 
 .content {
-  width: 320px;
+  width: 328px;
   padding: 6px 8px;
 }
 
diff --git a/spx-gui/src/components/editor/code-editor/ui/hover/HoverUI.vue b/spx-gui/src/components/editor/code-editor/ui/hover/HoverUI.vue
index c1500d583..e2777843b 100644
--- a/spx-gui/src/components/editor/code-editor/ui/hover/HoverUI.vue
+++ b/spx-gui/src/components/editor/code-editor/ui/hover/HoverUI.vue
@@ -1,20 +1,55 @@
 <script setup lang="ts">
+import { ref, watchEffect } from 'vue'
+import { UIDropdown, type DropdownPos } from '@/components/ui'
+import { toAbsolutePosition } from '../common'
+import { useCodeEditorUICtx } from '../CodeEditorUI.vue'
 import type { HoverController } from '.'
 import HoverCard from './HoverCard.vue'
 
-defineProps<{
+const props = defineProps<{
   controller: HoverController
 }>()
+
+const codeEditorUICtx = useCodeEditorUICtx()
+
+const dropdownVisible = ref(false)
+const dropdownPos = ref<DropdownPos>({ x: 0, y: 0 })
+
+watchEffect(() => {
+  const hover = props.controller.currentHoverRef.value
+  if (hover == null) {
+    dropdownVisible.value = false
+    return
+  }
+  const aPos = toAbsolutePosition(hover.range.start, codeEditorUICtx.ui.editor)
+  if (aPos == null) {
+    dropdownVisible.value = false
+    return
+  }
+  dropdownVisible.value = true
+  dropdownPos.value = {
+    x: aPos.left,
+    y: aPos.top,
+    width: 0,
+    height: aPos.height
+  }
+})
 </script>
 
 <template>
-  <Teleport :to="controller.widgetEl">
+  <UIDropdown
+    :visible="dropdownVisible"
+    trigger="manual"
+    :pos="dropdownPos"
+    placement="top-start"
+    :offset="{ x: 0, y: 4 }"
+  >
     <HoverCard
       v-if="controller.currentHoverRef.value != null"
       :hover="controller.currentHoverRef.value"
       :controller="controller"
     />
-  </Teleport>
+  </UIDropdown>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/spx-gui/src/components/editor/code-editor/ui/hover/index.ts b/spx-gui/src/components/editor/code-editor/ui/hover/index.ts
index 4317d17d8..db2e93335 100644
--- a/spx-gui/src/components/editor/code-editor/ui/hover/index.ts
+++ b/spx-gui/src/components/editor/code-editor/ui/hover/index.ts
@@ -1,6 +1,5 @@
-import { shallowRef, watch } from 'vue'
-import { debounce } from 'lodash'
-import { Disposable } from '@/utils/disposable'
+import { shallowRef } from 'vue'
+import Emitter from '@/utils/emitter'
 import {
   type Action,
   type BaseContext,
@@ -12,6 +11,7 @@ import {
   type ITextDocument,
   containsPosition
 } from '../../common'
+import type { monaco } from '../../monaco'
 import {
   builtInCommandCopilotFixProblem,
   builtInCommandGoToResource,
@@ -20,9 +20,7 @@ import {
   builtInCommandModifyResourceReference,
   builtInCommandRenameResource
 } from '../code-editor-ui'
-import { fromMonacoPosition, toMonacoPosition, token2Signal, supportGoTo } from '../common'
-import type { monaco } from '../../monaco'
-import { makeContentWidgetEl } from '../CodeEditorUI.vue'
+import { fromMonacoPosition, token2Signal, supportGoTo } from '../common'
 
 export type Hover = {
   contents: DefinitionDocumentationString[]
@@ -40,7 +38,10 @@ export interface IHoverProvider {
   provideHover(ctx: HoverContext, position: Position): Promise<Hover | null>
 }
 
-export class HoverController extends Disposable {
+export class HoverController extends Emitter<{
+  cardMouseEnter: void
+  cardMouseLeave: void
+}> {
   currentHoverRef = shallowRef<InternalHover | null>(null)
 
   private showHover(hover: InternalHover) {
@@ -61,22 +62,24 @@ export class HoverController extends Disposable {
     super()
   }
 
-  widgetEl = makeContentWidgetEl()
+  /** `toHide` records the hover that is "planed" to be hiden, while with delay */
+  private toHide: InternalHover | null = null
 
-  private widget: monaco.editor.IContentWidget = {
-    getId: () => `hover-for-${this.ui.id}`,
-    getDomNode: () => this.widgetEl,
-    getPosition: () => {
-      const monaco = this.ui.monaco
-      const hover = this.currentHoverRef.value
-      return {
-        position: hover == null ? null : toMonacoPosition(hover.range.start),
-        preference: [
-          monaco.editor.ContentWidgetPositionPreference.ABOVE,
-          monaco.editor.ContentWidgetPositionPreference.BELOW
-        ]
+  /** Hide current hover with delay, to avoid flickering when mouse moves quickly */
+  private hideHoverWithDelay() {
+    const currentHover = this.currentHoverRef.value
+    if (currentHover == null) return
+    this.toHide = currentHover
+    setTimeout(() => {
+      if (this.currentHoverRef.value === this.toHide) {
+        this.hideHover()
       }
-    }
+    }, 150)
+  }
+
+  /** Cancel "planed" hiding */
+  private cancelHidingHover() {
+    this.toHide = null
   }
 
   private getDiagnosticsHover(textDocument: ITextDocument, position: monaco.Position): InternalHover | null {
@@ -146,8 +149,6 @@ export class HoverController extends Disposable {
     this.addDisposable(
       monaco.languages.registerHoverProvider('spx', {
         provideHover: async (_, position, token) => {
-          this.hideHover()
-
           // TODO: use `onMouseMove` as trigger?
           if (this.provider == null) return
           const textDocument = this.ui.activeTextDocument
@@ -183,27 +184,31 @@ export class HoverController extends Disposable {
       })
     )
 
-    this.addDisposer(
-      watch(this.currentHoverRef, (hover, _, onCleanup) => {
-        if (hover == null) return
-        editor.addContentWidget(this.widget)
-        onCleanup(() => editor.removeContentWidget(this.widget))
+    this.addDisposable(
+      editor.onMouseMove((e: monaco.editor.IEditorMouseEvent) => {
+        if (e.target.type !== monaco.editor.MouseTargetType.CONTENT_TEXT) {
+          this.hideHoverWithDelay()
+          return
+        }
+        const currentHover = this.currentHoverRef.value
+        const position = fromMonacoPosition(e.target.position)
+        if (currentHover != null && containsPosition(currentHover.range, position)) {
+          this.cancelHidingHover()
+          return
+        }
+        this.hideHoverWithDelay()
       })
     )
 
     this.addDisposable(
-      editor.onMouseMove(
-        // debounce to avoid hiding when mouse moving from text to hover-widget, while through CONTENT_EMPTY
-        debounce((e: monaco.editor.IEditorMouseEvent) => {
-          if (
-            e.target.type !== monaco.editor.MouseTargetType.CONTENT_WIDGET &&
-            e.target.type !== monaco.editor.MouseTargetType.CONTENT_TEXT
-          )
-            this.hideHover()
-        }, 100)
-      )
+      editor.onMouseLeave(() => {
+        this.hideHoverWithDelay()
+      })
     )
 
+    this.on('cardMouseEnter', () => this.cancelHidingHover())
+    this.on('cardMouseLeave', () => this.hideHoverWithDelay())
+
     this.addDisposable(
       editor.onKeyDown(() => {
         this.hideHover()
diff --git a/spx-gui/src/components/editor/code-editor/ui/resource-reference/ResourceReferenceUI.vue b/spx-gui/src/components/editor/code-editor/ui/resource-reference/ResourceReferenceUI.vue
index 95962e23a..7e0be5c45 100644
--- a/spx-gui/src/components/editor/code-editor/ui/resource-reference/ResourceReferenceUI.vue
+++ b/spx-gui/src/components/editor/code-editor/ui/resource-reference/ResourceReferenceUI.vue
@@ -20,8 +20,10 @@ export function checkModifiable(el: HTMLElement): string | null {
 </script>
 
 <script setup lang="ts">
-import { onUnmounted, watchEffect } from 'vue'
+import { onUnmounted, watchEffect, ref } from 'vue'
+import { UIDropdown, type DropdownPos } from '@/components/ui'
 import type { monaco } from '../../monaco'
+import { toAbsolutePosition } from '../common'
 import { useCodeEditorUICtx } from '../CodeEditorUI.vue'
 import { isModifiableKind, type ResourceReferenceController } from '.'
 import ResourceSelector from './selector/ResourceSelector.vue'
@@ -30,11 +32,11 @@ const props = defineProps<{
   controller: ResourceReferenceController
 }>()
 
-const codeEditorCtx = useCodeEditorUICtx()
+const codeEditorUICtx = useCodeEditorUICtx()
 
 let dc: monaco.editor.IEditorDecorationsCollection | null = null
 function getDecorationsCollection() {
-  if (dc == null) dc = codeEditorCtx.ui.editor.createDecorationsCollection([])
+  if (dc == null) dc = codeEditorUICtx.ui.editor.createDecorationsCollection([])
   return dc
 }
 
@@ -71,17 +73,46 @@ watchEffect(() => {
   })
   getDecorationsCollection().set(decorations)
 })
+
+const dropdownVisible = ref(false)
+const dropdownPos = ref<DropdownPos>({ x: 0, y: 0 })
+
+watchEffect(() => {
+  const { modifying, selector } = props.controller
+  if (modifying == null || selector == null) {
+    dropdownVisible.value = false
+    return
+  }
+  const aPos = toAbsolutePosition(modifying.range.start, codeEditorUICtx.ui.editor)
+  if (aPos == null) {
+    dropdownVisible.value = false
+    return
+  }
+  dropdownVisible.value = true
+  dropdownPos.value = {
+    x: aPos.left,
+    y: aPos.top,
+    width: 0,
+    height: aPos.height
+  }
+})
 </script>
 
 <template>
-  <Teleport :to="controller.selectorWidgetEl">
+  <UIDropdown
+    :visible="dropdownVisible"
+    trigger="manual"
+    :pos="dropdownPos"
+    placement="bottom-start"
+    :offset="{ x: 0, y: 4 }"
+  >
     <ResourceSelector
       v-if="controller.selector != null"
       :selector="controller.selector"
       @cancel="controller.stopModifying()"
       @selected="(newName) => controller.applySelected(newName)"
     />
-  </Teleport>
+  </UIDropdown>
 </template>
 
 <style lang="scss">
diff --git a/spx-gui/src/components/editor/code-editor/ui/resource-reference/index.ts b/spx-gui/src/components/editor/code-editor/ui/resource-reference/index.ts
index f0d6e1fed..3065097dd 100644
--- a/spx-gui/src/components/editor/code-editor/ui/resource-reference/index.ts
+++ b/spx-gui/src/components/editor/code-editor/ui/resource-reference/index.ts
@@ -2,10 +2,8 @@ import { computed, shallowRef, watch } from 'vue'
 import Emitter from '@/utils/emitter'
 import { ResourceReferenceKind, type BaseContext, type ResourceReference } from '../../common'
 import type { TextDocument } from '../../text-document'
-import type { monaco } from '../../monaco'
-import { toMonacoPosition, toMonacoRange } from '../common'
+import { toMonacoRange } from '../common'
 import type { CodeEditorUI } from '../code-editor-ui'
-import { makeContentWidgetEl } from '../CodeEditorUI.vue'
 import { checkModifiable } from './ResourceReferenceUI.vue'
 import { createResourceSelector } from './selector'
 
@@ -98,25 +96,8 @@ export class ResourceReferenceController extends Emitter<{
     this.ui.editor.focus()
   }
 
-  selectorWidgetEl = makeContentWidgetEl()
-  private selectorWidget: monaco.editor.IContentWidget = {
-    getId: () => `resource-reference-selector-for-${this.ui.id}`,
-    getDomNode: () => this.selectorWidgetEl,
-    getPosition: () => {
-      const monaco = this.ui.monaco
-      const selecting = this.modifyingRef.value
-      return {
-        position: selecting == null ? null : toMonacoPosition(selecting.range.start),
-        preference: [
-          monaco.editor.ContentWidgetPositionPreference.BELOW,
-          monaco.editor.ContentWidgetPositionPreference.ABOVE
-        ]
-      }
-    }
-  }
-
   init() {
-    const { editor, editorEl } = this.ui
+    const { editorEl } = this.ui
 
     this.addDisposer(
       watch(
@@ -141,14 +122,6 @@ export class ResourceReferenceController extends Emitter<{
       )
     )
 
-    this.addDisposer(
-      watch(this.modifyingRef, (selecting, _, onCleanup) => {
-        if (selecting == null) return
-        editor.addContentWidget(this.selectorWidget)
-        onCleanup(() => editor.removeContentWidget(this.selectorWidget))
-      })
-    )
-
     let clickingId: string | null = null
 
     // Attach event to the dom element with `capture` instead of listening to monaco-editor,
diff --git a/spx-gui/src/components/editor/code-editor/ui/resource-reference/selector/ResourceSelector.vue b/spx-gui/src/components/editor/code-editor/ui/resource-reference/selector/ResourceSelector.vue
index daeb5bf27..8bfc13148 100644
--- a/spx-gui/src/components/editor/code-editor/ui/resource-reference/selector/ResourceSelector.vue
+++ b/spx-gui/src/components/editor/code-editor/ui/resource-reference/selector/ResourceSelector.vue
@@ -40,7 +40,7 @@ function handleWheel(e: WheelEvent) {
   <UIDropdownModal
     class="resource-selector"
     :title="$t(props.selector.title)"
-    style="width: 320px; max-height: 300px"
+    style="width: 408px; max-height: 316px"
     @cancel="emit('cancel')"
     @confirm="handleConfirm"
     @wheel="handleWheel"
@@ -84,7 +84,7 @@ function handleWheel(e: WheelEvent) {
   display: flex;
   flex-wrap: wrap;
   align-content: flex-start;
-  gap: 12px;
+  gap: 8px;
 }
 
 .add {
diff --git a/spx-gui/src/components/ui/UIDropdown.ts b/spx-gui/src/components/ui/UIDropdown.ts
new file mode 100644
index 000000000..c6bfc10b7
--- /dev/null
+++ b/spx-gui/src/components/ui/UIDropdown.ts
@@ -0,0 +1,199 @@
+import { NPopover } from 'naive-ui'
+import {
+  computed,
+  defineComponent,
+  h,
+  type InjectionKey,
+  inject,
+  type PropType,
+  ref,
+  type CSSProperties,
+  watchEffect,
+  provide,
+  watch,
+  nextTick
+} from 'vue'
+import { usePopupContainer } from './utils'
+
+export type DropdownCtrl = {
+  setVisible(visible: boolean): void
+}
+const dropdownCtrlKey: InjectionKey<DropdownCtrl> = Symbol('dropdown-ctrl')
+export function useDropdown() {
+  return inject(dropdownCtrlKey)
+}
+
+export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'
+export type Trigger = 'click' | 'hover' | 'manual'
+export type Pos = {
+  x: number
+  y: number
+  // Optional size (width & height) is supported when positioned manually.
+  // When provided, it behaves like positioning with a sized trigger element.
+  width?: number
+  height?: number
+}
+export type Offset = {
+  x: number
+  y: number
+}
+
+export type Props = {
+  placement?: Placement
+  trigger?: Trigger
+  visible?: boolean
+  pos?: Pos
+  offset?: Offset
+}
+
+export type Events = {
+  'update:visible': (visible: boolean) => void
+  clickOutside: (e: MouseEvent) => void
+}
+
+export default defineComponent<Props, Events>(
+  (props, { slots, emit }) => {
+    const attachTo = usePopupContainer()
+
+    const nPopoverRef = ref<InstanceType<typeof NPopover>>()
+
+    const extraStyle = computed(() => {
+      const placement = props.placement!
+      const offset = props.offset!
+      const style: CSSProperties = {}
+      if (['top', 'top-start', 'top-end'].includes(placement)) {
+        style.marginBottom = offset.y + 'px'
+      } else {
+        style.marginTop = offset.y + 'px'
+      }
+      if (['top-end', 'bottom-end'].includes(placement)) {
+        style.marginRight = -offset.x + 'px'
+      } else {
+        style.marginLeft = offset.x + 'px'
+      }
+      return style
+    })
+
+    function handleUpdateShow(show: boolean) {
+      emit('update:visible', show)
+    }
+
+    function setVisible(visible: boolean) {
+      // `NPopover.setShow` sets show status in uncontrolled mode without triggering the `on-update:show` callback.
+      // So we need to manually trigger the `on-update:show` callback.
+      nPopoverRef.value?.setShow(visible)
+      handleUpdateShow(visible)
+    }
+
+    function handleClickOutside(e: MouseEvent) {
+      const triggerEl = nPopoverRef.value?.binderInstRef?.targetRef
+      // naive-ui triggers `clickoutside` event when trigger-element clicked, so we need to fix it
+      if (triggerEl != null && triggerEl.contains(e.target as Node)) return
+      emit('clickOutside', e)
+    }
+
+    watchEffect((onCleanup) => {
+      // Currently, pressing the `Escape` key closes all modals and dropdowns.
+      // TODO: Ideally, only the topmost modal or dropdown should be closed.
+      function handleDocumentKeydown(e: KeyboardEvent) {
+        if (e.key === 'Escape') setVisible(false)
+      }
+      window.addEventListener('keydown', handleDocumentKeydown)
+      onCleanup(() => {
+        window.removeEventListener('keydown', handleDocumentKeydown)
+      })
+    })
+
+    provide(dropdownCtrlKey, { setVisible })
+
+    // We create a virtual trigger element to support `props.pos` with size (`width` & `height`).
+    const virtualTrigger = computed(() => {
+      if (props.pos == null) return null
+      if (props.pos.width == null || props.pos.height == null) return null
+      return h('div', {
+        class: 'virtual-trigger',
+        style: {
+          position: 'fixed',
+          left: props.pos.x + 'px',
+          top: props.pos.y + 'px',
+          width: props.pos.width + 'px',
+          height: props.pos.height + 'px'
+        }
+      })
+    })
+    const popoverPos = computed(() => {
+      const pos = props.pos
+      if (pos == null) return null
+      // When virtual trigger is used, there is no need to set `x` & `y` on `NPopover`.
+      if (virtualTrigger.value != null) return null
+      return { x: pos.x, y: pos.y }
+    })
+
+    watch(virtualTrigger, async () => {
+      await nextTick()
+      nPopoverRef.value?.syncPosition()
+    })
+
+    return function render() {
+      return h(
+        NPopover,
+        {
+          ref: nPopoverRef,
+          class: 'ui-dropdown-content',
+          style: {
+            overflow: 'hidden',
+            borderRadius: 'var(--ui-border-radius-1)',
+            backgroundColor: 'var(--ui-color-grey-100)',
+            boxShadow: 'var(--ui-box-shadow-big)',
+            ...extraStyle.value
+          },
+          placement: props.placement!,
+          trigger: props.trigger!,
+          show: props.visible,
+          x: popoverPos.value?.x,
+          y: popoverPos.value?.y,
+          to: attachTo.value,
+          showArrow: false,
+          raw: true,
+          onUpdateShow: handleUpdateShow,
+          onClickoutside: handleClickOutside
+        },
+        {
+          default: slots.default,
+          trigger: slots.trigger ?? (() => virtualTrigger.value)
+        }
+      )
+    }
+  },
+  {
+    name: 'UIDropdown',
+    props: {
+      placement: {
+        type: String as PropType<Placement>,
+        required: false,
+        default: 'bottom'
+      },
+      trigger: {
+        type: String as PropType<Trigger>,
+        required: false,
+        default: 'hover'
+      },
+      visible: {
+        type: Boolean,
+        required: false,
+        default: undefined
+      },
+      pos: {
+        type: Object as PropType<Pos>,
+        required: false,
+        default: undefined
+      },
+      offset: {
+        type: Object as PropType<Offset>,
+        required: false,
+        default: () => ({ x: 0, y: 8 })
+      }
+    },
+    emits: ['update:visible', 'clickOutside']
+  }
+)
diff --git a/spx-gui/src/components/ui/UIDropdown.vue b/spx-gui/src/components/ui/UIDropdown.vue
deleted file mode 100644
index 70a0213ff..000000000
--- a/spx-gui/src/components/ui/UIDropdown.vue
+++ /dev/null
@@ -1,134 +0,0 @@
-<template>
-  <NPopover
-    ref="nPopoverRef"
-    class="ui-dropdown-content"
-    :placement="placement"
-    :trigger="trigger"
-    :show="visible"
-    :x="pos?.x"
-    :y="pos?.y"
-    :to="attachTo"
-    :show-arrow="false"
-    :style="extraStyle"
-    raw
-    @update:show="handleUpdateShow"
-    @clickoutside="handleClickOutside"
-  >
-    <template #trigger>
-      <slot name="trigger"></slot>
-    </template>
-    <slot></slot>
-  </NPopover>
-</template>
-
-<script lang="ts">
-export type DropdownCtrl = {
-  setVisible(visible: boolean): void
-}
-const dropdownCtrlKey: InjectionKey<DropdownCtrl> = Symbol('dropdown-ctrl')
-export function useDropdown() {
-  return inject(dropdownCtrlKey)
-}
-</script>
-
-<script setup lang="ts">
-import { inject, provide, ref, type InjectionKey, computed, type CSSProperties, watchEffect } from 'vue'
-import { NPopover } from 'naive-ui'
-import { usePopupContainer } from './utils'
-
-export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'
-export type Trigger = 'click' | 'hover' | 'manual'
-export type Pos = {
-  x: number
-  y: number
-}
-
-const props = withDefaults(
-  defineProps<{
-    placement?: Placement
-    trigger?: Trigger
-    visible?: boolean
-    pos?: Pos
-    offset?: Pos
-  }>(),
-  {
-    placement: 'bottom',
-    trigger: 'hover',
-    visible: undefined,
-    pos: undefined,
-    offset: () => ({ x: 0, y: 8 })
-  }
-)
-
-const emit = defineEmits<{
-  'update:visible': [boolean]
-  clickOutside: [MouseEvent]
-}>()
-
-const attachTo = usePopupContainer()
-
-const nPopoverRef = ref<InstanceType<typeof NPopover>>()
-
-const extraStyle = computed(() => {
-  const { placement, offset } = props
-  const style: CSSProperties = {}
-  if (['top', 'top-start', 'top-end'].includes(placement)) {
-    style.marginBottom = offset.y + 'px'
-  } else {
-    style.marginTop = offset.y + 'px'
-  }
-  if (['top-end', 'bottom-end'].includes(placement)) {
-    style.marginRight = -offset.x + 'px'
-  } else {
-    style.marginLeft = offset.x + 'px'
-  }
-  return style
-})
-
-function handleUpdateShow(show: boolean) {
-  emit('update:visible', show)
-}
-
-function setVisible(visible: boolean) {
-  // `NPopover.setShow` sets show status in uncontrolled mode without triggering the `on-update:show` callback.
-  // So we need to manually trigger the `on-update:show` callback.
-  nPopoverRef.value?.setShow(visible)
-  handleUpdateShow(visible)
-}
-
-function handleClickOutside(e: MouseEvent) {
-  const triggerEl = nPopoverRef.value?.binderInstRef?.targetRef
-  // naive-ui triggers `clickoutside` event when trigger-element clicked, so we need to fix it
-  if (triggerEl != null && triggerEl.contains(e.target as Node)) return
-  emit('clickOutside', e)
-}
-
-watchEffect((onCleanup) => {
-  // Currently, pressing the `Escape` key closes all modals and dropdowns.
-  // TODO: Ideally, only the topmost modal or dropdown should be closed.
-  function handleDocumentKeydown(e: KeyboardEvent) {
-    if (e.key === 'Escape') setVisible(false)
-  }
-  window.addEventListener('keydown', handleDocumentKeydown)
-  onCleanup(() => {
-    window.removeEventListener('keydown', handleDocumentKeydown)
-  })
-})
-
-provide(dropdownCtrlKey, { setVisible })
-</script>
-
-<style lang="scss" scoped></style>
-
-<style lang="scss">
-/*
-  Now the style is broken with scoped <style>, the `data-v-xxx` is not correctly applied on `NPopover` element
-  TODO: use scoped style
-*/
-.ui-dropdown-content {
-  overflow: hidden;
-  border-radius: var(--ui-border-radius-1);
-  background-color: var(--ui-color-grey-100);
-  box-shadow: var(--ui-box-shadow-big);
-}
-</style>
diff --git a/spx-gui/src/components/ui/index.ts b/spx-gui/src/components/ui/index.ts
index 33575b626..95bda51cb 100644
--- a/spx-gui/src/components/ui/index.ts
+++ b/spx-gui/src/components/ui/index.ts
@@ -3,7 +3,7 @@ export { default as UICard } from './UICard.vue'
 export { default as UICardHeader } from './UICardHeader.vue'
 export { default as UIButton } from './UIButton.vue'
 export { default as UIIconButton } from './UIIconButton.vue'
-export { default as UIDropdown } from './UIDropdown.vue'
+export { default as UIDropdown, type Pos as DropdownPos } from './UIDropdown'
 export { default as UITooltip } from './UITooltip.vue'
 export { UIMenu, UIMenuGroup, UIMenuItem } from './menu'
 export { default as UIIcon, type Type as IconType } from './icons/UIIcon.vue'
diff --git a/spx-gui/src/components/ui/menu/UIMenuItem.vue b/spx-gui/src/components/ui/menu/UIMenuItem.vue
index dcb59dd11..201250dfa 100644
--- a/spx-gui/src/components/ui/menu/UIMenuItem.vue
+++ b/spx-gui/src/components/ui/menu/UIMenuItem.vue
@@ -13,7 +13,7 @@
 
 <script setup lang="ts">
 import { computed, inject, useSlots } from 'vue'
-import { useDropdown } from '../UIDropdown.vue'
+import { useDropdown } from '../UIDropdown'
 import { ctxKey } from './UIMenu.vue'
 
 const props = withDefaults(