diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/mention-chip.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/mention-chip.tsx index 5b737844816..5a3f88c83f4 100644 --- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/mention-chip.tsx +++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/mention-chip.tsx @@ -28,9 +28,10 @@ const CHIP_CLASS = /** * 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. This view pulls the block registry (for - * integration brand icons), so it's kept out of the headless {@link MarkdownMention} module. + * into navigation (the file viewer), a click routes to the resource and Cmd/Ctrl-click opens it in a + * new tab; in a modal field it stays inert so a click can't navigate away from an unsaved edit. This + * view pulls the block registry (for integration brand icons), so it's kept out of the headless + * {@link MarkdownMention} module. */ export function MentionChipView({ node, editor }: ReactNodeViewProps) { const router = useRouter() @@ -42,8 +43,13 @@ export function MentionChipView({ node, editor }: ReactNodeViewProps) { const path = navigable && workspaceId ? simLinkPath(workspaceId, kind, id) : null const handleClick = (event: MouseEvent) => { - if (!path || !(event.metaKey || event.ctrlKey)) return + if (!path) return event.preventDefault() + event.stopPropagation() + if (event.metaKey || event.ctrlKey) { + window.open(path, '_blank', 'noopener,noreferrer') + return + } router.push(path) } diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/mention.ts b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/mention.ts index 78e91f881ec..5a15a7b0cad 100644 --- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/mention.ts +++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/mention.ts @@ -13,8 +13,8 @@ import { MENTION_PLUGIN_KEY } from '@/app/workspace/[workspaceId]/files/componen * 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. {@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. + * workspace scope) so `@` stays literal text. {@link navigable} lets a chip route 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 diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/use-editor-mentions.ts b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/use-editor-mentions.ts index 72ebc583a18..4a52948452c 100644 --- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/use-editor-mentions.ts +++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention/use-editor-mentions.ts @@ -3,7 +3,7 @@ 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. */ + /** Whether a chip can navigate to its resource. On for the file viewer, off in modal fields. */ navigable?: boolean /** Force the `@` insertion menu off even with a workspace; existing tags still render. */ disableTagging?: boolean diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.tsx index 4c3dc3564d0..15a8c2fe4d5 100644 --- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.tsx +++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.tsx @@ -182,6 +182,7 @@ function ReadOnlyPlaceholder({ content, file, workspaceId }: ReadOnlyPlaceholder }, }, }) + useEditorMentions(editor, workspaceId, { navigable: true, disableTagging: true }) const buildSelectionContext = useCallback( () => buildEditorSelectionContext(editor, { id: file.id, name: file.name }), [editor, file.id, file.name]