fix(rich-editor): icon fallback for removed integrations; smoother divider nav

- A mention to a since-removed integration falls back to a generic icon so the chip
  is never icon-less (indistinguishable from prose)
- Arrowing from a selected divider/image to an adjacent one selects it directly
  instead of stopping on the gap cursor between them, so stepping through a run of
  dividers is one press each

Author: waleedlatif1

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

@@ -1,5 +1,6 @@
 import type { Editor } from '@tiptap/core'
 import { Extension } from '@tiptap/core'
+import { NodeSelection } from '@tiptap/pm/state'
 import { MENTION_PLUGIN_KEY } from './mention'
 import { SLASH_COMMAND_PLUGIN_KEY } from './slash-command/slash-command'
 
@@ -36,6 +37,26 @@ function selectAdjacentLeaf(editor: Editor, direction: 'up' | 'down'): boolean {
   )
 }
 
+/**
+ * When a divider/image is already selected, arrowing toward an immediately-adjacent divider/image
+ * selects that one directly instead of stopping on the gap cursor between them — so stepping through a
+ * run of dividers is one press each. A non-leaf neighbour (a textblock) falls through to the default,
+ * which moves the caret into it.
+ */
+function selectAdjacentSelectedLeaf(editor: Editor, direction: 'up' | 'down'): boolean {
+  const { selection } = editor.state
+  if (!(selection instanceof NodeSelection) || !SELECTABLE_LEAVES.has(selection.node.type.name)) {
+    return false
+  }
+  const boundary = direction === 'up' ? selection.from : selection.to
+  const resolved = editor.state.doc.resolve(boundary)
+  const adjacent = direction === 'up' ? resolved.nodeBefore : resolved.nodeAfter
+  if (!adjacent || !SELECTABLE_LEAVES.has(adjacent.type.name)) return false
+  return editor.commands.setNodeSelection(
+    direction === 'up' ? boundary - adjacent.nodeSize : boundary
+  )
+}
+
 /**
  * Editor-specific keyboard behavior layered on top of StarterKit's defaults:
  *
@@ -47,7 +68,9 @@ function selectAdjacentLeaf(editor: Editor, direction: 'up' | 'down'): boolean {
  * - **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.
- * - **ArrowUp/ArrowDown** select an adjacent divider or image (see {@link selectAdjacentLeaf}).
+ * - **ArrowUp/ArrowDown** select an adjacent divider or image, whether arrowing off a textblock edge
+ *   ({@link selectAdjacentLeaf}) or stepping from one already-selected leaf to the next
+ *   ({@link selectAdjacentSelectedLeaf}).
  */
 export const RichMarkdownKeymap = Extension.create({
   name: 'richMarkdownKeymap',
@@ -77,9 +100,12 @@ export const RichMarkdownKeymap = Extension.create({
         if (editor.state.selection.from === from && editor.state.selection.to === to) return false
         return editor.commands.setTextSelection({ from, to })
       },
-      ArrowUp: ({ editor }) => !isSuggestionMenuOpen(editor) && selectAdjacentLeaf(editor, 'up'),
+      ArrowUp: ({ editor }) =>
+        !isSuggestionMenuOpen(editor) &&
+        (selectAdjacentSelectedLeaf(editor, 'up') || selectAdjacentLeaf(editor, 'up')),
       ArrowDown: ({ editor }) =>
-        !isSuggestionMenuOpen(editor) && selectAdjacentLeaf(editor, 'down'),
+        !isSuggestionMenuOpen(editor) &&
+        (selectAdjacentSelectedLeaf(editor, 'down') || selectAdjacentLeaf(editor, 'down')),
     }
   },
 })

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

@@ -1,5 +1,5 @@
 import type { ComponentType } from 'react'
-import { Database, File, Folder, Sparkles, Table, Workflow } from 'lucide-react'
+import { Box, Database, File, Folder, Sparkles, Table, Workflow } from 'lucide-react'
 import { getBlock } from '@/blocks/registry'
 import type { MentionKind } from './types'
 
@@ -17,10 +17,11 @@ const KIND_ICONS: Record<Exclude<MentionKind, 'integration'>, MentionIcon> = {
 
 /**
  * Resolves the icon for a mention. Integrations use their brand icon from the block registry (keyed by
- * blockType, which is the mention `id`); every other kind uses a lucide category icon. Shared by the
- * menu rows and the inserted chip so both render the same icon.
+ * blockType, which is the mention `id`), falling back to a generic icon if the block was since removed
+ * so the chip is never icon-less; every other kind uses a lucide category icon. Shared by the menu
+ * rows and the inserted chip so both render the same icon.
  */
-export function mentionIcon(kind: MentionKind, id: string): MentionIcon | undefined {
-  if (kind === 'integration') return getBlock(id)?.icon as MentionIcon | undefined
+export function mentionIcon(kind: MentionKind, id: string): MentionIcon {
+  if (kind === 'integration') return (getBlock(id)?.icon as MentionIcon | undefined) ?? Box
   return KIND_ICONS[kind]
 }