feat(rich-md-editor): add a link hover card and claim Cmd+K for the link shortcut

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/link-hover-card.tsx

@@ -0,0 +1,206 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'
+import { getMarkRange } from '@tiptap/core'
+import type { Editor } from '@tiptap/react'
+import { Check, Copy, Pencil, Unlink } from 'lucide-react'
+import { normalizeLinkHref } from '../markdown-fidelity'
+import { ToolbarButton } from './toolbar-button'
+
+interface LinkHoverCardProps {
+  editor: Editor
+}
+
+interface LinkRange {
+  from: number
+  to: number
+  href: string
+}
+
+/** Resolves the document range and href of the link rendered by `el`, or null if it isn't a link. */
+function resolveLinkRange(editor: Editor, el: HTMLElement): LinkRange | null {
+  const { state } = editor.view
+  const linkType = state.schema.marks.link
+  if (!linkType) return null
+  const pos = editor.view.posAtDOM(el, 0)
+  if (pos < 0) return null
+  const range =
+    getMarkRange(state.doc.resolve(pos), linkType) ??
+    getMarkRange(state.doc.resolve(pos + 1), linkType)
+  if (!range) return null
+  const href = el.getAttribute('href') ?? ''
+  return { from: range.from, to: range.to, href }
+}
+
+/**
+ * Floating card shown when hovering a link, so the destination is visible even when the link text
+ * differs from the URL. The URL opens in a new tab; Copy is always available, while Edit (inline) and
+ * Remove require an editable document. Positioned with Floating UI against the hovered anchor; a short
+ * close delay plus the card's own hover bridge let the pointer travel from the link into the card.
+ */
+export function LinkHoverCard({ editor }: LinkHoverCardProps) {
+  const [activeLink, setActiveLink] = useState<HTMLElement | null>(null)
+  const [draftHref, setDraftHref] = useState<string | null>(null)
+  const [position, setPosition] = useState<{ x: number; y: number } | null>(null)
+  const isEditing = draftHref !== null
+  const editInputRef = useRef<HTMLInputElement>(null)
+  const floatingRef = useRef<HTMLDivElement>(null)
+  const hideTimerRef = useRef<number | undefined>(undefined)
+
+  // Keep the card anchored to the hovered link with Floating UI's DOM core (the same primitive the
+  // bubble menu positions through) — no React wrapper, so the harness/app share one React instance.
+  useEffect(() => {
+    const floating = floatingRef.current
+    if (!activeLink || !floating) {
+      setPosition(null)
+      return
+    }
+    return autoUpdate(activeLink, floating, () => {
+      computePosition(activeLink, floating, {
+        strategy: 'fixed',
+        placement: 'top',
+        middleware: [offset(8), flip({ padding: 8 }), shift({ padding: 8 })],
+      }).then(({ x, y }) => setPosition({ x, y }))
+    })
+  }, [activeLink])
+
+  const cancelHide = useCallback(() => window.clearTimeout(hideTimerRef.current), [])
+  const dismiss = useCallback(() => {
+    cancelHide()
+    setActiveLink(null)
+    setDraftHref(null)
+  }, [cancelHide])
+  const scheduleHide = useCallback(() => {
+    cancelHide()
+    hideTimerRef.current = window.setTimeout(() => {
+      setActiveLink(null)
+      setDraftHref(null)
+    }, 120)
+  }, [cancelHide])
+
+  useEffect(() => {
+    const dom = editor.view.dom
+    const onOver = (event: Event) => {
+      // Don't compete with the selection toolbar while text is selected.
+      if (!editor.state.selection.empty) return
+      const link = (event.target as HTMLElement | null)?.closest('a')
+      if (link && dom.contains(link)) {
+        cancelHide()
+        setActiveLink(link)
+      }
+    }
+    const onOut = (event: MouseEvent) => {
+      const link = (event.target as HTMLElement | null)?.closest('a')
+      if (!link) return
+      // Ignore moves that stay within the same link.
+      if (link.contains(event.relatedTarget as Node | null)) return
+      scheduleHide()
+    }
+    dom.addEventListener('mouseover', onOver)
+    dom.addEventListener('mouseout', onOut)
+    return () => {
+      dom.removeEventListener('mouseover', onOver)
+      dom.removeEventListener('mouseout', onOut)
+      window.clearTimeout(hideTimerRef.current)
+    }
+  }, [editor, cancelHide, scheduleHide])
+
+  useEffect(() => {
+    if (isEditing) editInputRef.current?.focus()
+  }, [isEditing])
+
+  if (!activeLink) return null
+
+  const rawHref = activeLink.getAttribute('href') ?? ''
+  const safeHref = normalizeLinkHref(rawHref)
+  const canEdit = editor.isEditable
+
+  const startEdit = () => setDraftHref(rawHref)
+
+  const commitEdit = () => {
+    const range = resolveLinkRange(editor, activeLink)
+    if (range) {
+      const href = normalizeLinkHref((draftHref ?? '').trim())
+      const chain = editor.chain().focus().setTextSelection(range).extendMarkRange('link')
+      if (href) chain.setLink({ href })
+      else chain.unsetLink()
+      chain.run()
+    }
+    dismiss()
+  }
+
+  const removeLink = () => {
+    const range = resolveLinkRange(editor, activeLink)
+    if (range) {
+      editor.chain().focus().setTextSelection(range).extendMarkRange('link').unsetLink().run()
+    }
+    dismiss()
+  }
+
+  return (
+    <div
+      ref={floatingRef}
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        transform: position ? `translate(${position.x}px, ${position.y}px)` : undefined,
+        visibility: position ? 'visible' : 'hidden',
+      }}
+      role='dialog'
+      aria-label='Link'
+      onMouseEnter={cancelHide}
+      onMouseLeave={scheduleHide}
+      className='fade-in-0 z-[var(--z-popover)] flex animate-in items-center gap-0.5 rounded-lg border border-[var(--border)] bg-[var(--bg)] p-1 shadow-sm duration-100 motion-reduce:animate-none'
+    >
+      {isEditing ? (
+        <>
+          <input
+            ref={editInputRef}
+            aria-label='Link URL'
+            type='text'
+            inputMode='url'
+            value={draftHref ?? ''}
+            onChange={(event) => setDraftHref(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') {
+                event.preventDefault()
+                commitEdit()
+              } else if (event.key === 'Escape') {
+                event.preventDefault()
+                setDraftHref(null)
+              }
+            }}
+            placeholder='Paste or type a link…'
+            className='h-[28px] w-[220px] bg-transparent px-2 text-[var(--text-body)] text-small outline-none placeholder:text-[var(--text-subtle)]'
+          />
+          <ToolbarButton icon={Check} label='Apply link' onClick={commitEdit} />
+        </>
+      ) : (
+        <>
+          {safeHref ? (
+            <a
+              href={safeHref}
+              target='_blank'
+              rel='noopener noreferrer'
+              title={rawHref}
+              className='max-w-[260px] truncate px-2 text-[var(--text-body)] text-small hover:underline'
+            >
+              {rawHref}
+            </a>
+          ) : (
+            <span className='max-w-[260px] truncate px-2 text-[var(--text-muted)] text-small'>
+              {rawHref}
+            </span>
+          )}
+          <ToolbarButton icon={Copy} label='Copy link' onClick={() => copyToClipboard(rawHref)} />
+          {canEdit && <ToolbarButton icon={Pencil} label='Edit link' onClick={startEdit} />}
+          {canEdit && <ToolbarButton icon={Unlink} label='Remove link' onClick={removeLink} />}
+        </>
+      )}
+    </div>
+  )
+}
+
+function copyToClipboard(text: string) {
+  if (text) void navigator.clipboard?.writeText(text).catch(() => {})
+}

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.tsx

@@ -22,6 +22,7 @@ import {
 } from './markdown-fidelity'
 import { parseMarkdownToDoc } from './markdown-parse'
 import { EditorBubbleMenu } from './menus/bubble-menu'
+import { LinkHoverCard } from './menus/link-hover-card'
 import { isRoundTripSafe } from './round-trip-safety'
 import '@/components/emcn/components/code/code.css'
 import './rich-markdown-editor.css'
@@ -205,7 +206,8 @@ export function LoadedRichMarkdownEditor({
     shouldRerenderOnTransaction: false,
     content: initialContent,
     editorProps: {
-      attributes: { class: 'rich-markdown-prose' },
+      // Claim Mod+K so the global command registry yields it to the editor's link shortcut.
+      attributes: { class: 'rich-markdown-prose', 'data-owned-shortcuts': 'Mod+K' },
       handleKeyDown: (_view, event) => {
         const isSaveShortcut = (event.metaKey || event.ctrlKey) && event.key?.toLowerCase() === 's'
         if (!isSaveShortcut) return false
@@ -350,6 +352,7 @@ export function LoadedRichMarkdownEditor({
       className={cn('flex flex-1 flex-col overflow-y-auto', isEditable && 'cursor-text')}
     >
       {editor && <EditorBubbleMenu editor={editor} scrollContainerRef={containerRef} />}
+      {editor && <LinkHoverCard editor={editor} />}
       <EditorContent
         editor={editor}
         className='mx-auto flex w-full max-w-[48rem] flex-1 flex-col px-8 py-6 selection:bg-[var(--selection-bg)] selection:text-[var(--text-primary)] dark:selection:bg-[var(--selection-dark)] dark:selection:text-white'