refactor(rich-editor): fold inline comments into TSDoc; display-only chip; polish

- Convert the editor's inline `//` comments to TSDoc on the nearest declaration and
  drop the self-explanatory ones (no logic change)
- Mention chip is now display-only (icon + label), matching the chat input exactly:
  removes select-none (so a range selection highlights the label), the cursor-pointer
  over-promise, and the cmd-click nav that could route away from a modal mid-edit
- Don't log a deliberate generate-abort as an error
- Selected strike-through text reads in the primary color so the selection is uniform

Author: waleedlatif1

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

@@ -39,9 +39,11 @@ function selectAdjacentLeaf(editor: Editor, direction: 'up' | 'down'): boolean {
 /**
  * Editor-specific keyboard behavior layered on top of StarterKit's defaults:
  *
- * - **Backspace** at the start of a heading reverts it to a paragraph; at the start of a block whose
- *   previous sibling is a horizontal rule it deletes the rule (ProseMirror's default `joinBackward`
- *   can't cross a leaf node, so without this pressing Backspace below a divider is a confusing no-op).
+ * - **Backspace** at the start of a heading reverts it to a paragraph (ProseMirror's default joins or
+ *   no-ops, stranding the heading style; a second Backspace then merges as usual); at the start of a
+ *   block whose previous sibling is a horizontal rule it deletes the rule (ProseMirror's default
+ *   `joinBackward` can't cross a leaf node, so without this pressing Backspace below a divider is a
+ *   confusing no-op).
  * - **Mod-A** inside a code block selects only that block's contents; pressing it again (when the
  *   block is already fully selected) falls through to the default whole-document select-all, the
  *   same scoped behavior as a code editor.
@@ -56,8 +58,6 @@ export const RichMarkdownKeymap = Extension.create({
       Backspace: ({ editor }) => {
         const { selection, doc } = editor.state
         if (!selection.empty || selection.$from.parentOffset !== 0) return false
-        // At the start of a heading, revert it to a paragraph (ProseMirror's default joins or
-        // no-ops, stranding the heading style); a second Backspace then merges as usual.
         if (selection.$from.parent.type.name === 'heading') {
           return editor.commands.setParagraph()
         }

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

@@ -39,8 +39,8 @@ function isYamlFrontmatterBlock(block: string): boolean {
   for (const rawLine of interior.split('\n')) {
     const line = rawLine.trim()
     if (line === '') continue
-    if (line.startsWith('---')) return true // reached the closing fence — empty frontmatter
-    return /^[A-Za-z0-9_-]+[ \t]*:/.test(line) // first content line must be a YAML key
+    if (line.startsWith('---')) return true
+    return /^[A-Za-z0-9_-]+[ \t]*:/.test(line)
   }
   return true
 }
@@ -58,24 +58,23 @@ const HOST_PORT = /^[a-z0-9.-]+:\d+(?:[/?#]|$)/i
 
 /**
  * Normalize a user-entered link target: prefix a bare domain with `https://` so it doesn't resolve
- * as an in-app relative URL, while leaving already-qualified, relative, and protocol-relative URLs
- * intact. Dangerous schemes are rejected outright rather than trusted or mangled: any `scheme:`
- * without `//` other than `mailto:`/`tel:` (so `javascript:`, `data:`, `vbscript:`, `blob:`, …), and
- * `file://` (local file access). Other network `scheme://` URLs (`http(s)`, `ftp`, …) pass through.
+ * as an in-app relative URL, while leaving already-qualified, relative (`./other.md`, `../doc.md`), and
+ * protocol-relative URLs intact. Dangerous schemes are rejected outright rather than trusted or mangled:
+ * any `scheme:` without `//` other than `mailto:`/`tel:` (so `javascript:`, `data:`, `vbscript:`,
+ * `blob:`, …), and `file://` (local file access). Other network `scheme://` URLs (`http(s)`, `ftp`, …)
+ * pass through. A bare `host:port` (digits after the colon) is a domain, not a scheme, so it still gets
+ * the `https://` prefix.
  */
 export function normalizeLinkHref(href: string): string {
   const trimmed = href.trim()
   if (!trimmed) return ''
   if (/^[#?]/.test(trimmed)) return trimmed
   if (trimmed.startsWith('//')) return `https:${trimmed}`
   if (trimmed.startsWith('/')) return trimmed
-  // Relative paths (`./other.md`, `../doc.md`) stay relative — never prefixed into `https://./…`.
   if (trimmed.startsWith('./') || trimmed.startsWith('../')) return trimmed
   if (/^(?:mailto|tel):/i.test(trimmed)) return trimmed
   const schemed = trimmed.match(SCHEME_URL)
   if (schemed) return /^file$/i.test(schemed[1]) ? '' : trimmed
-  // A `scheme:` without `//` (and not mailto/tel) is a script/data scheme — reject it. A bare
-  // host:port (digits after the colon) is a domain, not a scheme, so it falls through to https.
   if (HAS_SCHEME.test(trimmed) && !HOST_PORT.test(trimmed)) return ''
   return `https://${trimmed}`
 }

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

@@ -50,11 +50,13 @@ export const MentionList = forwardRef<MentionListHandle, MentionListProps>(funct
   const rawItems = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot)
   const containerRef = useRef<HTMLDivElement>(null)
 
-  /** Filtered, group-capped, flattened in category order; `index` is the flat position for nav. */
+  /**
+   * Filtered, group-capped, flattened in category order; `index` is the flat position for nav. A single
+   * pass over the full set filters by label and buckets by group (capped), then reads the buckets in
+   * category order — avoiding a separate filter pass per group.
+   */
   const { flat, groups } = useMemo(() => {
     const q = query.trim().toLowerCase()
-    // One pass over the full set: filter by label and bucket by group (capped), then read the
-    // buckets in category order — avoids a separate filter pass per group.
     const byGroup = new Map<string, MentionItem[]>()
     for (const item of rawItems) {
       if (q && !item.label.toLowerCase().includes(q)) continue

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

@@ -1,12 +1,10 @@
-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 { getBareIconStyle, type StyleableIcon } from '@/blocks/icon-color'
 import { mentionIcon } from './mention-icon'
-import { simLinkPath, toSimHref } from './sim-link'
+import { toSimHref } from './sim-link'
 import type { MentionKind } from './types'
 
 interface MentionAttrs {
@@ -44,7 +42,9 @@ interface MentionTokenFields {
  * to the portable `[label](sim:<kind>/<id>)` markdown link — so the saved content is identical to a
  * plain link (agent-readable, round-trips through the chat's `chip-clipboard-codec`) while the editor
  * shows it as a chip rather than a blue link. Shared by the headless round-trip path (no node view)
- * and the live {@link MentionChip}, mirroring the image node's split.
+ * and the live {@link MentionChip}, mirroring the image node's split. `renderText` emits the same
+ * portable link (an atom otherwise contributes no text), so copying a chip into a plain-text target —
+ * e.g. the chat composer — pastes back as a mention.
  */
 export const MarkdownMention = Node.create({
   name: 'mention',
@@ -102,8 +102,6 @@ export const MarkdownMention = Node.create({
     return `[${escapeLabel(label)}](${toSimHref(kind, id)})`
   },
 
-  // Copy/`getText` emit the portable link (an atom otherwise contributes no text), so copying a chip
-  // into a plain-text target — e.g. the chat composer — pastes back as a mention.
   renderText: ({ node }) => {
     const { kind, id, label } = node.attrs as MentionAttrs
     return `[${escapeLabel(label)}](${toSimHref(kind, id)})`
@@ -119,27 +117,16 @@ export const MarkdownMention = Node.create({
  * monochrome through the `--text-icon` fallback below.
  */
 const CHIP_CLASS =
-  'mx-px inline-flex items-center gap-1 align-middle text-[var(--text-primary)] leading-[1.5] cursor-pointer select-none [&>svg]:size-[12px] [&>svg]:shrink-0 [&>svg]:text-[var(--text-icon)]'
+  '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: the entity icon + label. Cmd/Ctrl-click navigates to the resource. */
+/** Live chip: a display-only entity icon + label, matching the chat input's mention rendering. */
 function MentionChipView({ node }: ReactNodeViewProps) {
-  const router = useRouter()
-  const params = useParams()
-  const workspaceId = typeof params.workspaceId === 'string' ? params.workspaceId : undefined
   const { kind, id, label } = node.attrs as MentionAttrs
   const Icon = mentionIcon(kind, id) as StyleableIcon | undefined
   const iconStyle = Icon ? getBareIconStyle(Icon) : undefined
 
-  const handleClick = (event: MouseEvent) => {
-    if (!(event.metaKey || event.ctrlKey) || !workspaceId) return
-    const path = simLinkPath(workspaceId, kind, id)
-    if (!path) return
-    event.preventDefault()
-    router.push(path)
-  }
-
   return (
-    <NodeViewWrapper as='span' className={CHIP_CLASS} onClick={handleClick} title={label}>
+    <NodeViewWrapper as='span' className={CHIP_CLASS} 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

@@ -28,11 +28,12 @@ declare module '@tiptap/core' {
 }
 
 /**
- * Adds the `@` mention menu to the editor. Typing `@` at the start of a block — or after whitespace —
- * opens {@link MentionList}; selecting an entity inserts it as a portable `sim:<kind>/<id>` markdown
- * link (same wire format as the chat composer's `chip-clipboard-codec`), so it round-trips natively
- * through the editor's link + markdown machinery. The menu's data is supplied by the host via the
- * extension's `mention` storage.
+ * Adds the `@` mention menu to the editor. Typing `@` at the start of a block — or after whitespace, so
+ * `@` inside an email/handle (`name@host`) stays literal — opens {@link MentionList}; selecting an
+ * entity inserts it as a portable `sim:<kind>/<id>` markdown link (same wire format as the chat
+ * composer's `chip-clipboard-codec`), so it round-trips natively through the editor's link + markdown
+ * machinery. The plugin's `items` is an empty gate; the real list is sourced reactively from the store
+ * inside {@link MentionList}, populated by the host via the extension's `mention` storage.
  */
 export const Mention = Extension.create<Record<string, never>, MentionStorage>({
   name: 'mention',
@@ -56,10 +57,8 @@ export const Mention = Extension.create<Record<string, never>, MentionStorage>({
           }
           const $from = editor.state.doc.resolve(range.from)
           if ($from.parentOffset === 0) return true
-          // Only after whitespace, so `@` inside an email/handle (`name@host`) never triggers.
           return /\s/.test($from.parent.textBetween($from.parentOffset - 1, $from.parentOffset))
         },
-        // Items are sourced reactively from the store inside MentionList; this only gates the plugin.
         items: () => [],
         command: ({ editor, range, props }) => {
           editor

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

@@ -39,6 +39,13 @@ interface SuggestionPopupConfig<P, H extends SuggestionListHandle> {
  * floating-ui-positioned body element, repositions on update/scroll, forwards keys to the list's
  * imperative handle, and tears everything down on exit / Escape / editor-destroy. Shared by the `/`
  * slash command and the `@` mention menu so the popup mechanics live in exactly one place.
+ *
+ * `onStart` runs after an async suggestion update (it awaits `items()`), so it can fire once the editor
+ * is already destroyed — e.g. a modal closed while the menu was opening — and bails in that case before
+ * touching the now-unavailable view/storage. The popup mounts inside the host `[role="dialog"]` when
+ * the editor is in a modal: Radix's scroll-lock blocks wheel events outside the dialog subtree, so a
+ * body-level popup couldn't be scrolled; `position: fixed` keeps it viewport-positioned (the modal
+ * centers via flex, no transform) so it isn't clipped.
  */
 export function createSuggestionPopupRenderer<P, H extends SuggestionListHandle>(
   config: SuggestionPopupConfig<P, H>
@@ -63,22 +70,15 @@ export function createSuggestionPopupRenderer<P, H extends SuggestionListHandle>
     return {
       onStart: (props) => {
         teardown()
-        // The suggestion update is async (it awaits `items()`), so onStart can fire after the editor
-        // was destroyed — e.g. a modal closed while the menu was opening. Bail before touching its
-        // now-unavailable view/storage.
         if (props.editor.isDestroyed) return
         config.onOpen?.(props)
         component = new ReactRenderer(config.component, {
-          // ReactRenderer types its props option loosely; the component still enforces P.
           props: config.mapProps(props) as Record<string, unknown>,
           editor: props.editor,
         })
         popup = document.createElement('div')
         popup.className = 'fixed top-0 left-0 z-[var(--z-popover)]'
         popup.appendChild(component.element)
-        // Mount inside the host dialog when the editor is in a modal: Radix's scroll-lock blocks wheel
-        // events outside the dialog subtree, so a body-level popup can't be scrolled. `position: fixed`
-        // keeps it viewport-positioned (the modal centers via flex, no transform) so it isn't clipped.
         const host = props.editor.view.dom.closest('[role="dialog"]') ?? document.body
         host.appendChild(popup)
         boundEditor = props.editor

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/use-suggestion-keyboard.ts

@@ -23,7 +23,8 @@ interface SuggestionKeyboard extends SuggestionKeyDownHandler {
  * resets it when the items change, scrolls the active row into view, and exposes an `onKeyDown` handle
  * for the suggestion plugin. Up/Down wrap; Enter and Tab both accept the active item (Tab matches the
  * chat composer). The handle is stable and reads live values through a ref, because the suggestion
- * plugin captures it once via `ReactRenderer.ref` while the items may still be loading.
+ * plugin captures it once via `ReactRenderer.ref` while the items may still be loading. Enter/Tab clamp
+ * the active index in case a filter shrank the list this frame before the active-index reset committed.
  */
 export function useSuggestionKeyboard<T>(
   items: T[],
@@ -57,7 +58,6 @@ export function useSuggestionKeyboard<T>(
       return true
     }
     if (event.key === 'Enter' || event.key === 'Tab') {
-      // Clamp in case a filter shrank the list this frame before the active-index reset committed.
       const item = items[Math.min(activeIndex, items.length - 1)]
       if (!item) return false
       onSelect(item)

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

@@ -102,6 +102,13 @@
   text-decoration: line-through;
 }
 
+/* Selecting struck-through text reads in the primary color like any other highlighted text, so the
+   selection looks uniform (it returns to the muted strike color when deselected). */
+.rich-markdown-prose del::selection,
+.rich-markdown-prose s::selection {
+  color: var(--text-primary);
+}
+
 .rich-markdown-prose a {
   color: var(--brand-secondary);
   cursor: pointer;