feat(rich-editor): Cmd/Ctrl-click a mention to its resource in the file viewer

Threads a `navigable` flag through the mention storage: the file viewer opts in so
a chip routes to its file/table/workflow/etc., while modal fields stay inert so a
click can't navigate away from an unsaved edit. Styling is identical either way.

Author: waleedlatif1

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

@@ -1,10 +1,13 @@
+import type { MouseEvent } from 'react'
 import type { JSONContent, MarkdownToken } from '@tiptap/core'
 import { Node } from '@tiptap/core'
 import type { ReactNodeViewProps } from '@tiptap/react'
 import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'
+import { useParams, useRouter } from 'next/navigation'
+import { cn } from '@/lib/core/utils/cn'
 import { getBareIconStyle, type StyleableIcon } from '@/blocks/icon-color'
 import { mentionIcon } from './mention-icon'
-import { toSimHref } from './sim-link'
+import { simLinkPath, toSimHref } from './sim-link'
 import type { MentionKind } from './types'
 
 interface MentionAttrs {
@@ -119,14 +122,35 @@ export const MarkdownMention = Node.create({
 const CHIP_CLASS =
   'mention-chip mx-px inline-flex items-center gap-1 align-middle text-[var(--text-primary)] leading-[1.5] [&>svg]:size-[12px] [&>svg]:shrink-0 [&>svg]:text-[var(--text-icon)]'
 
-/** Live chip: a display-only entity icon + label, matching the chat input's mention rendering. */
-function MentionChipView({ node }: ReactNodeViewProps) {
+/**
+ * Live chip: an entity icon + label matching the chat input's mention rendering. Where the host opted
+ * into navigation (the file viewer), Cmd/Ctrl-click routes to the resource; in a modal field it stays
+ * inert so a click can't navigate away from an unsaved edit.
+ */
+function MentionChipView({ node, editor }: ReactNodeViewProps) {
+  const router = useRouter()
+  const params = useParams()
   const { kind, id, label } = node.attrs as MentionAttrs
   const Icon = mentionIcon(kind, id) as StyleableIcon | undefined
   const iconStyle = Icon ? getBareIconStyle(Icon) : undefined
+  const navigable = editor.storage.mention?.navigable === true
+
+  const handleClick = (event: MouseEvent) => {
+    if (!(event.metaKey || event.ctrlKey)) return
+    const workspaceId = typeof params.workspaceId === 'string' ? params.workspaceId : undefined
+    const path = workspaceId && simLinkPath(workspaceId, kind, id)
+    if (!path) return
+    event.preventDefault()
+    router.push(path)
+  }
 
   return (
-    <NodeViewWrapper as='span' className={CHIP_CLASS} title={label}>
+    <NodeViewWrapper
+      as='span'
+      className={cn(CHIP_CLASS, navigable && 'cursor-pointer')}
+      onClick={navigable ? handleClick : undefined}
+      title={label}
+    >
       {Icon && <Icon style={iconStyle} />}
       <span>{label}</span>
     </NodeViewWrapper>

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

@@ -13,12 +13,14 @@ export const MENTION_PLUGIN_KEY = new PluginKey('mention')
  * Per-editor storage for the `@` mention extension. The host component populates {@link store} with
  * the current workspace mention data and may set {@link onOpen} to lazily start fetching that data the
  * first time the menu is triggered. {@link enabled} gates the menu off entirely (e.g. a field with no
- * workspace scope) so `@` stays literal text.
+ * workspace scope) so `@` stays literal text. {@link navigable} lets a chip Cmd/Ctrl-click to its
+ * resource — on for the file viewer, off inside a modal field so it can't route away from an edit.
  */
 export interface MentionStorage {
   store: MentionStore
   onOpen: (() => void) | null
   enabled: boolean
+  navigable: boolean
 }
 
 declare module '@tiptap/core' {
@@ -39,7 +41,7 @@ export const Mention = Extension.create<Record<string, never>, MentionStorage>({
   name: 'mention',
 
   addStorage() {
-    return { store: createMentionStore(), onOpen: null, enabled: true }
+    return { store: createMentionStore(), onOpen: null, enabled: true, navigable: false }
   },
 
   addProseMirrorPlugins() {

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/use-editor-mentions.ts

@@ -2,24 +2,35 @@ import { useEffect, useState } from 'react'
 import type { Editor } from '@tiptap/react'
 import { useMarkdownMentions } from './use-markdown-mentions'
 
+interface UseEditorMentionsOptions {
+  /** Whether a chip can Cmd/Ctrl-click to its resource. On for the file viewer, off in modal fields. */
+  navigable?: boolean
+}
+
 /**
  * Wires an editor's `@` mention menu to its workspace data: gates the menu on a workspace scope,
  * lazily fetches the data on the first open, and feeds it into the menu's reactive store. Shared by
  * every editor surface that mounts the mention extension (the file editor and the modal field).
  */
-export function useEditorMentions(editor: Editor | null, workspaceId: string | undefined): void {
+export function useEditorMentions(
+  editor: Editor | null,
+  workspaceId: string | undefined,
+  options?: UseEditorMentionsOptions
+): void {
   const [active, setActive] = useState(false)
   const items = useMarkdownMentions(workspaceId, { enabled: active })
+  const navigable = options?.navigable ?? false
 
   useEffect(() => {
     if (!editor) return
     const hasWorkspace = Boolean(workspaceId)
     editor.storage.mention.enabled = hasWorkspace
+    editor.storage.mention.navigable = navigable
     editor.storage.mention.onOpen = hasWorkspace ? () => setActive(true) : null
     return () => {
       editor.storage.mention.onOpen = null
     }
-  }, [editor, workspaceId])
+  }, [editor, workspaceId, navigable])
 
   useEffect(() => {
     editor?.storage.mention.store.set(items)

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

@@ -333,7 +333,7 @@ export function LoadedRichMarkdownEditor({
     }
   }, [editor])
 
-  useEditorMentions(editor, workspaceId)
+  useEditorMentions(editor, workspaceId, { navigable: true })
 
   const wasStreamingRef = useRef(streamingAtMountRef.current)