diff --git a/packages/components/src/__internal__/components/icon.tsx b/packages/components/src/__internal__/components/icon.tsx
index 5b0a82e4ab8..a5c0145a332 100644
--- a/packages/components/src/__internal__/components/icon.tsx
+++ b/packages/components/src/__internal__/components/icon.tsx
@@ -6,12 +6,14 @@ h
 type IconProps = {
   icon?: string | null
   class?: string
+  onClick?: (event: PointerEvent) => void
 }
 
-export function Icon({ icon, class: className }: IconProps) {
+export function Icon({ icon, class: className, onClick }: IconProps) {
   return (
     <span
       class={clsx('milkdown-icon', className)}
+      onPointerdown={onClick}
       ref={(el) => {
         if (el && icon) {
           ;(el as HTMLElement).innerHTML = icon.trim()
@@ -30,4 +32,8 @@ Icon.props = {
     type: String,
     required: false,
   },
+  onClick: {
+    type: Function,
+    required: false,
+  },
 }
diff --git a/packages/components/src/code-block/view/node-view.ts b/packages/components/src/code-block/view/node-view.ts
index 0a544e60f03..42567d601c6 100644
--- a/packages/components/src/code-block/view/node-view.ts
+++ b/packages/components/src/code-block/view/node-view.ts
@@ -11,7 +11,7 @@ import { Compartment, EditorState } from '@codemirror/state'
 import type { Line, SelectionRange } from '@codemirror/state'
 import { exitCode } from '@milkdown/prose/commands'
 import { TextSelection } from '@milkdown/prose/state'
-import { createApp, ref, watchEffect, type WatchHandle } from 'vue'
+import { createApp, ref, watchEffect, type App, type WatchHandle } from 'vue'
 
 import type { CodeBlockConfig } from '../config'
 import type { LanguageLoader } from './loader'
@@ -20,6 +20,7 @@ import { CodeBlock } from './components/code-block'
 export class CodeMirrorBlock implements NodeView {
   dom: HTMLElement
   cm: CodeMirror
+  app: App
 
   readonly = ref(false)
   selected = ref(false)
@@ -55,7 +56,9 @@ export class CodeMirrorBlock implements NodeView {
       ],
     })
 
-    this.dom = this.createDom()
+    this.app = this.createApp()
+
+    this.dom = this.createDom(this.app)
 
     this.disposeSelectedWatcher = watchEffect(() => {
       const isSelected = this.selected.value
@@ -93,11 +96,8 @@ export class CodeMirrorBlock implements NodeView {
     }
   }
 
-  private createDom() {
-    const dom = document.createElement('div')
-    dom.className = 'milkdown-code-block'
-    this.text.value = this.node.textContent
-    const app = createApp(CodeBlock, {
+  private createApp = () => {
+    return createApp(CodeBlock, {
       text: this.text,
       selected: this.selected,
       readonly: this.readonly,
@@ -107,6 +107,12 @@ export class CodeMirrorBlock implements NodeView {
       setLanguage: this.setLanguage,
       config: this.config,
     })
+  }
+
+  private createDom(app: App) {
+    const dom = document.createElement('div')
+    dom.className = 'milkdown-code-block'
+    this.text.value = this.node.textContent
     app.mount(dom)
     return dom
   }
@@ -248,6 +254,7 @@ export class CodeMirrorBlock implements NodeView {
   }
 
   destroy() {
+    this.app.unmount()
     this.cm.destroy()
     this.disposeSelectedWatcher()
   }
diff --git a/packages/components/src/link-tooltip/edit/component.tsx b/packages/components/src/link-tooltip/edit/component.tsx
new file mode 100644
index 00000000000..e38986db30b
--- /dev/null
+++ b/packages/components/src/link-tooltip/edit/component.tsx
@@ -0,0 +1,79 @@
+import { defineComponent, ref, watch, type Ref, h } from 'vue'
+import type { LinkTooltipConfig } from '../slices'
+import { Icon } from '../../__internal__/components/icon'
+
+h
+
+type EditLinkProps = {
+  config: Ref<LinkTooltipConfig>
+  src: Ref<string>
+  onConfirm: (href: string) => void
+  onCancel: () => void
+}
+
+export const EditLink = defineComponent<EditLinkProps>({
+  props: {
+    config: {
+      type: Object,
+      required: true,
+    },
+    src: {
+      type: Object,
+      required: true,
+    },
+    onConfirm: {
+      type: Function,
+      required: true,
+    },
+    onCancel: {
+      type: Function,
+      required: true,
+    },
+  },
+  setup({ config, src, onConfirm, onCancel }) {
+    const link = ref(src)
+
+    watch(src, (value) => {
+      link.value = value
+    })
+
+    const onConfirmEdit = () => {
+      onConfirm(link.value)
+    }
+
+    const onKeydown = (e: KeyboardEvent) => {
+      e.stopPropagation()
+      if (e.key === 'Enter') {
+        e.preventDefault()
+        onConfirmEdit()
+      }
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        onCancel()
+      }
+    }
+
+    return () => {
+      return (
+        <div class="link-edit">
+          <input
+            class="input-area"
+            placeholder={config.value.inputPlaceholder}
+            onKeydown={onKeydown}
+            onInput={(e: Event) => {
+              link.value = (e.target as HTMLInputElement).value
+            }}
+            value={link.value}
+          />
+          {link.value ? (
+            <Icon
+              class="button confirm"
+              icon={config.value.confirmButton()}
+              onClick={onConfirmEdit}
+            />
+          ) : null}
+        </div>
+      )
+    }
+  },
+})
diff --git a/packages/components/src/link-tooltip/edit/edit-component.ts b/packages/components/src/link-tooltip/edit/edit-component.ts
deleted file mode 100644
index 5e96590a979..00000000000
--- a/packages/components/src/link-tooltip/edit/edit-component.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import type { Component } from 'atomico'
-import { c, html, useEffect, useRef, useState } from 'atomico'
-import clsx from 'clsx'
-import type { LinkTooltipConfig } from '../slices'
-
-export interface LinkEditProps {
-  config: LinkTooltipConfig
-  src: string
-  onConfirm: (href: string) => void
-  onCancel: () => void
-}
-
-export const linkEditComponent: Component<LinkEditProps> = ({
-  src,
-  onConfirm,
-  onCancel,
-  config,
-}) => {
-  const linkInput = useRef<HTMLInputElement>()
-  const [link, setLink] = useState(src)
-
-  useEffect(() => {
-    setLink(src ?? '')
-  }, [src])
-
-  const onConfirmEdit = () => {
-    onConfirm?.(linkInput.current?.value ?? '')
-  }
-
-  const onKeydown = (e: KeyboardEvent) => {
-    e.stopPropagation()
-    if (e.key === 'Enter') {
-      onConfirm?.(linkInput.current?.value ?? '')
-      e.preventDefault()
-    }
-    if (e.key === 'Escape') {
-      onCancel?.()
-      e.preventDefault()
-    }
-  }
-
-  return html`
-    <host>
-      <div class="link-edit">
-        <input
-          class="input-area"
-          placeholder=${config?.inputPlaceholder}
-          ref=${linkInput}
-          onkeydown=${onKeydown}
-          oninput=${(e: InputEvent) =>
-            setLink((e.target as HTMLInputElement).value)}
-          value=${link}
-        />
-        <span
-          class=${clsx('button confirm', !link && 'hidden')}
-          onclick=${onConfirmEdit}
-        >
-          ${config?.confirmButton()}
-        </span>
-      </div>
-    </host>
-  `
-}
-
-linkEditComponent.props = {
-  config: Object,
-  src: String,
-  onConfirm: Function,
-  onCancel: Function,
-}
-
-export const LinkEditElement = c(linkEditComponent)
diff --git a/packages/components/src/link-tooltip/edit/edit-configure.ts b/packages/components/src/link-tooltip/edit/edit-configure.ts
index de43c456c59..18761e34e9a 100644
--- a/packages/components/src/link-tooltip/edit/edit-configure.ts
+++ b/packages/components/src/link-tooltip/edit/edit-configure.ts
@@ -1,11 +1,8 @@
 import type { Ctx } from '@milkdown/ctx'
 import { linkTooltipAPI } from '../slices'
 import { linkEditTooltip } from '../tooltips'
-import { defIfNotExists } from '../../__internal__/helper'
-import { LinkEditElement } from './edit-component'
 import { LinkEditTooltip } from './edit-view'
 
-defIfNotExists('milkdown-link-edit', LinkEditElement)
 export function configureLinkEditTooltip(ctx: Ctx) {
   let linkEditTooltipView: LinkEditTooltip | null
 
diff --git a/packages/components/src/link-tooltip/edit/edit-view.ts b/packages/components/src/link-tooltip/edit/edit-view.ts
index 2e717700fc1..fa940210c1c 100644
--- a/packages/components/src/link-tooltip/edit/edit-view.ts
+++ b/packages/components/src/link-tooltip/edit/edit-view.ts
@@ -7,8 +7,13 @@ import { TooltipProvider } from '@milkdown/plugin-tooltip'
 import { editorViewCtx } from '@milkdown/core'
 import { linkSchema } from '@milkdown/preset-commonmark'
 import { posToDOMRect } from '@milkdown/prose'
-import { linkTooltipConfig, linkTooltipState } from '../slices'
-import { LinkEditElement } from './edit-component'
+import {
+  linkTooltipConfig,
+  linkTooltipState,
+  type LinkTooltipConfig,
+} from '../slices'
+import { createApp, ref, type App, type Ref } from 'vue'
+import { EditLink } from './component'
 
 interface Data {
   from: number
@@ -23,28 +28,43 @@ const defaultData: Data = {
 }
 
 export class LinkEditTooltip implements PluginView {
-  #content = new LinkEditElement()
+  #content: HTMLElement
   #provider: TooltipProvider
   #data: Data = { ...defaultData }
+  #app: App
+  #config: Ref<LinkTooltipConfig>
+  #src = ref('')
 
   constructor(
     readonly ctx: Ctx,
     view: EditorView
   ) {
+    this.#config = ref(this.ctx.get(linkTooltipConfig.key))
+
+    const content = document.createElement('div')
+    content.className = 'milkdown-link-edit'
+
+    const app = createApp(EditLink, {
+      config: this.#config,
+      src: this.#src,
+      onConfirm: this.#confirmEdit,
+      onCancel: this.#reset,
+    })
+    app.mount(content)
+    this.#app = app
+
+    this.#content = content
     this.#provider = new TooltipProvider({
-      content: this.#content,
+      content,
       debounce: 0,
       shouldShow: () => false,
     })
     this.#provider.onHide = () => {
-      this.#content.update().catch((e) => {
-        throw e
+      requestAnimationFrame(() => {
+        view.dom.focus({ preventScroll: true })
       })
-      view.dom.focus({ preventScroll: true })
     }
     this.#provider.update(view)
-    this.#content.onConfirm = this.#confirmEdit
-    this.#content.onCancel = this.#reset
   }
 
   #reset = () => {
@@ -76,14 +96,13 @@ export class LinkEditTooltip implements PluginView {
 
   #enterEditMode = (value: string, from: number, to: number) => {
     const config = this.ctx.get(linkTooltipConfig.key)
-    this.#content.config = config
-    this.#content.src = value
+    this.#config.value = config
+    this.#src.value = value
     this.ctx.update(linkTooltipState.key, (state) => ({
       ...state,
       mode: 'edit' as const,
     }))
     const view = this.ctx.get(editorViewCtx)
-    // this.#setRect(posToDOMRect(view, from, to))
     view.dispatch(
       view.state.tr.setSelection(TextSelection.create(view.state.doc, from, to))
     )
@@ -106,6 +125,7 @@ export class LinkEditTooltip implements PluginView {
   }
 
   destroy = () => {
+    this.#app.unmount()
     this.#provider.destroy()
     this.#content.remove()
   }
diff --git a/packages/components/src/link-tooltip/preview/component.tsx b/packages/components/src/link-tooltip/preview/component.tsx
new file mode 100644
index 00000000000..3bdde225f89
--- /dev/null
+++ b/packages/components/src/link-tooltip/preview/component.tsx
@@ -0,0 +1,80 @@
+import { defineComponent, type Ref, h } from 'vue'
+import type { LinkTooltipConfig } from '../slices'
+import { Icon } from '../../__internal__/components/icon'
+
+type PreviewLinkProps = {
+  config: Ref<LinkTooltipConfig>
+  src: Ref<string>
+  onEdit: Ref<() => void>
+  onRemove: Ref<() => void>
+}
+
+h
+
+export const PreviewLink = defineComponent<PreviewLinkProps>({
+  props: {
+    config: {
+      type: Object,
+      required: true,
+    },
+    src: {
+      type: Object,
+      required: true,
+    },
+    onEdit: {
+      type: Object,
+      required: true,
+    },
+    onRemove: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup({ config, src, onEdit, onRemove }) {
+    const onClickEditButton = (e: Event) => {
+      e.preventDefault()
+      e.stopPropagation()
+      onEdit.value()
+    }
+
+    const onClickRemoveButton = (e: Event) => {
+      e.preventDefault()
+      e.stopPropagation()
+      onRemove.value()
+    }
+
+    const onClickPreview = (e: Event) => {
+      e.preventDefault()
+      const link = src.value
+      if (navigator.clipboard && link) {
+        navigator.clipboard
+          .writeText(link)
+          .then(() => {
+            config.value.onCopyLink(link)
+          })
+          .catch((e) => console.error(e))
+      }
+    }
+
+    return () => {
+      return (
+        <div class="link-preview" onPointerdown={onClickPreview}>
+          <Icon class="link-icon" icon={config.value.linkIcon()} />
+          <a href={src.value} target="_blank" class="link-display">
+            {src.value}
+          </a>
+          <Icon
+            class="button link-edit-button"
+            icon={config.value.editButton()}
+            onClick={onClickEditButton}
+          />
+          <Icon
+            class="button link-remove-button"
+            icon={config.value.removeButton()}
+            onClick={onClickRemoveButton}
+          />
+        </div>
+      )
+    }
+  },
+})
diff --git a/packages/components/src/link-tooltip/preview/preview-component.ts b/packages/components/src/link-tooltip/preview/preview-component.ts
deleted file mode 100644
index f502f45639d..00000000000
--- a/packages/components/src/link-tooltip/preview/preview-component.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import type { Component } from 'atomico'
-import { c, html } from 'atomico'
-import type { LinkTooltipConfig } from '../slices'
-
-export interface LinkPreviewProps {
-  config: LinkTooltipConfig
-  src: string
-  onEdit: () => void
-  onRemove: () => void
-}
-
-export const linkPreviewComponent: Component<LinkPreviewProps> = ({
-  config,
-  src,
-  onEdit,
-  onRemove,
-}) => {
-  const onClickEditButton = (e: MouseEvent) => {
-    e.stopPropagation()
-    e.preventDefault()
-    onEdit?.()
-  }
-
-  const onClickRemoveButton = (e: MouseEvent) => {
-    e.stopPropagation()
-    e.preventDefault()
-    onRemove?.()
-  }
-
-  const onClickPreview = (e: MouseEvent) => {
-    e.preventDefault()
-    if (navigator.clipboard && src) {
-      navigator.clipboard
-        .writeText(src)
-        .then(() => {
-          config?.onCopyLink(src)
-        })
-        .catch((e) => {
-          throw e
-        })
-    }
-  }
-
-  return html`
-    <host>
-      <div class="link-preview" onmousedown=${onClickPreview}>
-        <span class="link-icon"> ${config?.linkIcon()} </span>
-        <a href=${src} target="_blank" class="link-display">${src}</a>
-        <span class="button link-edit-button" onmousedown=${onClickEditButton}>
-          ${config?.editButton()}
-        </span>
-        <span
-          class="button link-remove-button"
-          onmousedown=${onClickRemoveButton}
-        >
-          ${config?.removeButton()}
-        </span>
-      </div>
-    </host>
-  `
-}
-
-linkPreviewComponent.props = {
-  config: Object,
-  src: String,
-  onEdit: Function,
-  onRemove: Function,
-}
-
-export const LinkPreviewElement = c(linkPreviewComponent)
diff --git a/packages/components/src/link-tooltip/preview/preview-configure.ts b/packages/components/src/link-tooltip/preview/preview-configure.ts
index 786a37ae273..5f89e79f326 100644
--- a/packages/components/src/link-tooltip/preview/preview-configure.ts
+++ b/packages/components/src/link-tooltip/preview/preview-configure.ts
@@ -5,11 +5,8 @@ import { posToDOMRect } from '@milkdown/prose'
 import { linkTooltipState } from '../slices'
 import { findMarkPosition, shouldShowPreviewWhenHover } from '../utils'
 import { linkPreviewTooltip } from '../tooltips'
-import { defIfNotExists } from '../../__internal__/helper'
 import { LinkPreviewTooltip } from './preview-view'
-import { LinkPreviewElement } from './preview-component'
 
-defIfNotExists('milkdown-link-preview', LinkPreviewElement)
 export function configureLinkPreviewTooltip(ctx: Ctx) {
   let linkPreviewTooltipView: LinkPreviewTooltip | null
 
diff --git a/packages/components/src/link-tooltip/preview/preview-view.ts b/packages/components/src/link-tooltip/preview/preview-view.ts
index d2f3f548c7c..0bbc6dd6f31 100644
--- a/packages/components/src/link-tooltip/preview/preview-view.ts
+++ b/packages/components/src/link-tooltip/preview/preview-view.ts
@@ -3,14 +3,20 @@ import type { EditorView } from '@milkdown/prose/view'
 import type { Mark } from '@milkdown/prose/model'
 import { TooltipProvider } from '@milkdown/plugin-tooltip'
 import type { Ctx, Slice } from '@milkdown/ctx'
-import type { LinkToolTipState } from '../slices'
+import type { LinkTooltipConfig, LinkToolTipState } from '../slices'
 import { linkTooltipAPI, linkTooltipConfig, linkTooltipState } from '../slices'
-import { LinkPreviewElement } from './preview-component'
+import { createApp, ref, type App, type Ref } from 'vue'
+import { PreviewLink } from './component'
 
 export class LinkPreviewTooltip implements PluginView {
-  #content = new LinkPreviewElement()
+  #content: HTMLElement
   #provider: TooltipProvider
   #slice: Slice<LinkToolTipState> = this.ctx.use(linkTooltipState.key)
+  #config: Ref<LinkTooltipConfig>
+  #src = ref('')
+  #onEdit = ref(() => {})
+  #onRemove = ref(() => {})
+  #app: App
 
   #hovering = false
 
@@ -18,6 +24,17 @@ export class LinkPreviewTooltip implements PluginView {
     readonly ctx: Ctx,
     view: EditorView
   ) {
+    this.#config = ref(this.ctx.get(linkTooltipConfig.key))
+    this.#app = createApp(PreviewLink, {
+      config: this.#config,
+      src: this.#src,
+      onEdit: this.#onEdit,
+      onRemove: this.#onRemove,
+    })
+    this.#content = document.createElement('div')
+    this.#content.className = 'milkdown-link-preview'
+    this.#app.mount(this.#content)
+
     this.#provider = new TooltipProvider({
       debounce: 0,
       content: this.#content,
@@ -47,12 +64,12 @@ export class LinkPreviewTooltip implements PluginView {
   }
 
   show = (mark: Mark, from: number, to: number, rect: DOMRect) => {
-    this.#content.config = this.ctx.get(linkTooltipConfig.key)
-    this.#content.src = mark.attrs.href
-    this.#content.onEdit = () => {
+    this.#config.value = this.ctx.get(linkTooltipConfig.key)
+    this.#src.value = mark.attrs.href
+    this.#onEdit.value = () => {
       this.ctx.get(linkTooltipAPI.key).editLink(mark, from, to)
     }
-    this.#content.onRemove = () => {
+    this.#onRemove.value = () => {
       this.ctx.get(linkTooltipAPI.key).removeLink(from, to)
       this.#hide()
     }
@@ -73,6 +90,7 @@ export class LinkPreviewTooltip implements PluginView {
   update = () => {}
 
   destroy = () => {
+    this.#app.unmount()
     this.#slice.off(this.#onStateChange)
     this.#provider.destroy()
     this.#content.remove()
diff --git a/packages/components/src/link-tooltip/slices.ts b/packages/components/src/link-tooltip/slices.ts
index d4e71b69802..a751d1e4de7 100644
--- a/packages/components/src/link-tooltip/slices.ts
+++ b/packages/components/src/link-tooltip/slices.ts
@@ -1,6 +1,5 @@
 import { $ctx } from '@milkdown/utils'
 import type { Mark } from '@milkdown/prose/model'
-import { html } from 'atomico'
 import { withMeta } from '../__internal__/meta'
 
 export interface LinkToolTipState {
@@ -38,10 +37,10 @@ withMeta(linkTooltipState, {
 })
 
 export interface LinkTooltipConfig {
-  linkIcon: () => ReturnType<typeof html>
-  editButton: () => ReturnType<typeof html>
-  confirmButton: () => ReturnType<typeof html>
-  removeButton: () => ReturnType<typeof html>
+  linkIcon: () => string
+  editButton: () => string
+  confirmButton: () => string
+  removeButton: () => string
   onCopyLink: (link: string) => void
   inputPlaceholder: string
 }
@@ -50,7 +49,7 @@ const defaultConfig: LinkTooltipConfig = {
   linkIcon: () => '🔗',
   editButton: () => '✎',
   removeButton: () => '⌫',
-  confirmButton: () => html`Confirm ⏎`,
+  confirmButton: () => 'Confirm ⏎',
   onCopyLink: () => {},
   inputPlaceholder: 'Paste link...',
 }
diff --git a/packages/crepe/src/feature/link-tooltip/index.ts b/packages/crepe/src/feature/link-tooltip/index.ts
index 49627d04674..0190f54970d 100644
--- a/packages/crepe/src/feature/link-tooltip/index.ts
+++ b/packages/crepe/src/feature/link-tooltip/index.ts
@@ -4,12 +4,7 @@ import {
   linkTooltipPlugin,
 } from '@milkdown/kit/component/link-tooltip'
 import type { DefineFeature, Icon } from '../shared'
-import {
-  legacyConfirmIcon,
-  copyIcon,
-  removeIcon,
-  legacyEditIcon,
-} from '../../icons'
+import { copyIcon, editIcon, removeIcon, confirmIcon } from '../../icons'
 
 interface LinkTooltipConfig {
   linkIcon: Icon
@@ -32,9 +27,9 @@ export const defineFeature: DefineFeature<LinkTooltipFeatureConfig> = (
       ctx.update(linkTooltipConfig.key, (prev) => ({
         ...prev,
         linkIcon: config?.linkIcon ?? (() => copyIcon),
-        editButton: config?.editButton ?? (() => legacyEditIcon),
+        editButton: config?.editButton ?? (() => editIcon),
         removeButton: config?.removeButton ?? (() => removeIcon),
-        confirmButton: config?.confirmButton ?? (() => legacyConfirmIcon),
+        confirmButton: config?.confirmButton ?? (() => confirmIcon),
         inputPlaceholder: config?.inputPlaceholder ?? 'Paste link...',
         onCopyLink: config?.onCopyLink ?? (() => {}),
       }))
diff --git a/packages/crepe/src/feature/shared.ts b/packages/crepe/src/feature/shared.ts
index 9df7ef1364d..4308a6dc1af 100644
--- a/packages/crepe/src/feature/shared.ts
+++ b/packages/crepe/src/feature/shared.ts
@@ -5,4 +5,4 @@ export type DefineFeature<Config = unknown> = (
   config?: Config
 ) => void | Promise<void>
 
-export type Icon = () => string | undefined
+export type Icon = () => string
diff --git a/packages/crepe/src/feature/table/index.ts b/packages/crepe/src/feature/table/index.ts
index 757e2dbca40..41fb0475038 100644
--- a/packages/crepe/src/feature/table/index.ts
+++ b/packages/crepe/src/feature/table/index.ts
@@ -9,7 +9,7 @@ import {
   alignRightIcon,
   dragHandleIcon,
   plusIcon,
-  removeIcon,
+  legacyRemoveIcon,
 } from '../../icons'
 
 interface TableConfig {
@@ -41,9 +41,9 @@ export const defineFeature: DefineFeature<TableFeatureConfig> = (
             case 'add_col':
               return config?.addColIcon?.() ?? plusIcon
             case 'delete_row':
-              return config?.deleteRowIcon?.() ?? removeIcon
+              return config?.deleteRowIcon?.() ?? legacyRemoveIcon
             case 'delete_col':
-              return config?.deleteColIcon?.() ?? removeIcon
+              return config?.deleteColIcon?.() ?? legacyRemoveIcon
             case 'align_col_left':
               return config?.alignLeftIcon?.() ?? alignLeftIcon
             case 'align_col_center':
diff --git a/packages/crepe/src/icons/copy.ts b/packages/crepe/src/icons/copy.ts
index e1f1bc4f561..d11b4b2d88a 100644
--- a/packages/crepe/src/icons/copy.ts
+++ b/packages/crepe/src/icons/copy.ts
@@ -1,6 +1,4 @@
-import { html } from 'atomico'
-
-export const copyIcon = html`
+export const copyIcon = `
   <svg
     xmlns="http://www.w3.org/2000/svg"
     height="24px"
diff --git a/packages/crepe/src/icons/edit.ts b/packages/crepe/src/icons/edit.ts
index fa0c4b3c945..11123006658 100644
--- a/packages/crepe/src/icons/edit.ts
+++ b/packages/crepe/src/icons/edit.ts
@@ -1,5 +1,3 @@
-import { html } from 'atomico'
-
 export const editIcon = `
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -19,23 +17,3 @@ export const editIcon = `
     </defs>
   </svg>
 `
-
-export const legacyEditIcon = html`
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-  >
-    <g clip-path="url(#clip0_1013_1585)">
-      <path
-        d="M14.06 9.02L14.98 9.94L5.92 19H5V18.08L14.06 9.02ZM17.66 3C17.41 3 17.15 3.1 16.96 3.29L15.13 5.12L18.88 8.87L20.71 7.04C21.1 6.65 21.1 6.02 20.71 5.63L18.37 3.29C18.17 3.09 17.92 3 17.66 3ZM14.06 6.19L3 17.25V21H6.75L17.81 9.94L14.06 6.19Z"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_1013_1585">
-        <rect width="24" height="24" />
-      </clipPath>
-    </defs>
-  </svg>
-`
diff --git a/packages/crepe/src/icons/remove.ts b/packages/crepe/src/icons/remove.ts
index edd0db07d84..63c4db6ca7c 100644
--- a/packages/crepe/src/icons/remove.ts
+++ b/packages/crepe/src/icons/remove.ts
@@ -1,6 +1,19 @@
 import { html } from 'atomico'
 
-export const removeIcon = html`
+export const removeIcon = `
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M7.30775 20.4997C6.81058 20.4997 6.385 20.3227 6.031 19.9687C5.677 19.6147 5.5 19.1892 5.5 18.692V5.99973H5.25C5.0375 5.99973 4.85942 5.92782 4.71575 5.78398C4.57192 5.64015 4.5 5.46198 4.5 5.24948C4.5 5.03682 4.57192 4.85873 4.71575 4.71523C4.85942 4.57157 5.0375 4.49973 5.25 4.49973H9C9 4.2549 9.08625 4.04624 9.25875 3.87374C9.43108 3.7014 9.63967 3.61523 9.8845 3.61523H14.1155C14.3603 3.61523 14.5689 3.7014 14.7413 3.87374C14.9138 4.04624 15 4.2549 15 4.49973H18.75C18.9625 4.49973 19.1406 4.57165 19.2843 4.71548C19.4281 4.85932 19.5 5.03748 19.5 5.24998C19.5 5.46265 19.4281 5.64073 19.2843 5.78423C19.1406 5.9279 18.9625 5.99973 18.75 5.99973H18.5V18.692C18.5 19.1892 18.323 19.6147 17.969 19.9687C17.615 20.3227 17.1894 20.4997 16.6923 20.4997H7.30775ZM17 5.99973H7V18.692C7 18.7818 7.02883 18.8556 7.0865 18.9132C7.14417 18.9709 7.21792 18.9997 7.30775 18.9997H16.6923C16.7821 18.9997 16.8558 18.9709 16.9135 18.9132C16.9712 18.8556 17 18.7818 17 18.692V5.99973ZM10.1543 16.9997C10.3668 16.9997 10.5448 16.9279 10.6885 16.7842C10.832 16.6404 10.9037 16.4622 10.9037 16.2497V8.74973C10.9037 8.53723 10.8318 8.35907 10.688 8.21523C10.5443 8.07157 10.3662 7.99973 10.1535 7.99973C9.941 7.99973 9.76292 8.07157 9.61925 8.21523C9.47575 8.35907 9.404 8.53723 9.404 8.74973V16.2497C9.404 16.4622 9.47583 16.6404 9.6195 16.7842C9.76333 16.9279 9.94158 16.9997 10.1543 16.9997ZM13.8465 16.9997C14.059 16.9997 14.2371 16.9279 14.3807 16.7842C14.5243 16.6404 14.596 16.4622 14.596 16.2497V8.74973C14.596 8.53723 14.5242 8.35907 14.3805 8.21523C14.2367 8.07157 14.0584 7.99973 13.8458 7.99973C13.6333 7.99973 13.4552 8.07157 13.3115 8.21523C13.168 8.35907 13.0962 8.53723 13.0962 8.74973V16.2497C13.0962 16.4622 13.1682 16.6404 13.312 16.7842C13.4557 16.9279 13.6338 16.9997 13.8465 16.9997Z"
+    />
+  </svg>
+`
+
+export const legacyRemoveIcon = html`
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"
diff --git a/packages/crepe/src/theme/common/link-tooltip.css b/packages/crepe/src/theme/common/link-tooltip.css
index 7df4840b82d..f7083965232 100644
--- a/packages/crepe/src/theme/common/link-tooltip.css
+++ b/packages/crepe/src/theme/common/link-tooltip.css
@@ -1,5 +1,5 @@
 .milkdown {
-  milkdown-link-preview {
+  .milkdown-link-preview {
     position: absolute;
     z-index: 10;
     &[data-show='false'] {
@@ -69,7 +69,7 @@
     }
   }
 
-  milkdown-link-edit {
+  .milkdown-link-edit {
     position: absolute;
     z-index: 10;
     &[data-show='false'] {
diff --git a/storybook/stories/components/link-tooltip.css b/storybook/stories/components/link-tooltip.css
index 4aed7024c6e..e64d674a98a 100644
--- a/storybook/stories/components/link-tooltip.css
+++ b/storybook/stories/components/link-tooltip.css
@@ -14,7 +14,7 @@
     }
   }
 
-  milkdown-link-preview {
+  .milkdown-link-preview {
     position: absolute;
     &[data-show='false'] {
       display: none;
@@ -82,7 +82,7 @@
     }
   }
 
-  milkdown-link-edit {
+  .milkdown-link-edit {
     position: absolute;
     &[data-show='false'] {
       display: none;