feat: 🎸 migrate link tooltip to vue (#1807)

Author: Saul-Mirone

Diff for: 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 for: 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 for: 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 for: packages/components/src/link-tooltip/edit/edit-component.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 for: packages/components/src/link-tooltip/edit/edit-configure.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()
   }