refactor(rich-editor): decouple headless bundle, fix linked-image round-trip, a11y

- Split mention-node into the schema-only `MarkdownMention` (mention-node.ts, no React/registry)
  and the live `MentionChip` node view (mention-chip.tsx); move the live factory to
  editor-extensions.ts and inject node views via DI. The headless round-trip path
  (markdown-parse/normalize-content/round-trip-safety) no longer pulls the 269-block registry —
  it now bundles for the browser with zero node-builtin deps.
- A sized + linked image serializes as `[![alt](src)](href)` (dropping the unrepresentable size)
  instead of `[<img>](href)`, which the tokenizer can't reparse — the link is preserved, no silent
  data loss. Also escape the href title symmetrically.
- Wire the suggestion menus as an ARIA combobox: while open, the editor gets
  aria-haspopup/expanded/controls and an aria-activedescendant tracking the active option, so screen
  readers announce it; cleared on close. Empty state is a role=status live region.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/dirty-on-open.test.ts

@@ -15,7 +15,7 @@
  */
 import { Editor } from '@tiptap/core'
 import { afterEach, beforeAll, describe, expect, it } from 'vitest'
-import { createMarkdownEditorExtensions } from './extensions'
+import { createMarkdownEditorExtensions } from './editor-extensions'
 import {
   applyFrontmatter,
   postProcessSerializedMarkdown,

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

@@ -0,0 +1,42 @@
+import type { Extensions } from '@tiptap/core'
+import Placeholder from '@tiptap/extension-placeholder'
+import { CodeBlockWithLanguage } from './code-block'
+import { CodeBlockHighlight } from './code-highlight'
+import { createMarkdownContentExtensions } from './extensions'
+import { ResizableImage } from './image'
+import { RichMarkdownKeymap } from './keymap'
+import { MarkdownPaste } from './markdown-paste'
+import { Mention } from './mention/mention'
+import { MentionChip } from './mention/mention-chip'
+import { SlashCommand } from './slash-command/slash-command'
+
+interface MarkdownEditorExtensionOptions {
+  placeholder: string
+}
+
+/**
+ * The full extension set for the live editor: the content extensions with their React node-view nodes
+ * injected (code-block language picker, resizable image, mention chip) plus the UI-only extensions —
+ * `CodeBlockHighlight` (Prism), `SlashCommand` (the `/` block menu), `Mention` (the `@` menu),
+ * `RichMarkdownKeymap`, `MarkdownPaste`, and `Placeholder`.
+ *
+ * Kept separate from `extensions.ts` so those node views (and the block registry the mention chip pulls
+ * in for brand icons) stay out of the headless round-trip path, which only needs the schema.
+ */
+export function createMarkdownEditorExtensions({
+  placeholder,
+}: MarkdownEditorExtensionOptions): Extensions {
+  return [
+    ...createMarkdownContentExtensions({
+      codeBlock: CodeBlockWithLanguage,
+      image: ResizableImage,
+      mention: MentionChip,
+    }),
+    CodeBlockHighlight,
+    SlashCommand,
+    Mention,
+    RichMarkdownKeymap,
+    MarkdownPaste,
+    Placeholder.configure({ placeholder }),
+  ]
+}

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

@@ -1,7 +1,6 @@
-import type { Extensions, JSONContent, MarkdownRendererHelpers } from '@tiptap/core'
+import type { Extensions, JSONContent, MarkdownRendererHelpers, Node } from '@tiptap/core'
 import { Code } from '@tiptap/extension-code'
 import { TaskItem, TaskList } from '@tiptap/extension-list'
-import Placeholder from '@tiptap/extension-placeholder'
 import {
   renderTableToMarkdown,
   Table,
@@ -11,14 +10,11 @@ import {
 } from '@tiptap/extension-table'
 import { Markdown } from '@tiptap/markdown'
 import StarterKit from '@tiptap/starter-kit'
-import { CodeBlockWithLanguage, MarkdownCodeBlock } from './code-block'
-import { CodeBlockHighlight } from './code-highlight'
-import { MarkdownImage, ResizableImage } from './image'
-import { RichMarkdownKeymap } from './keymap'
+import { MarkdownCodeBlock } from './code-block'
+import { MarkdownImage } from './image'
 import { MarkdownLinkInputRule } from './link-input-rule'
-import { MarkdownPaste } from './markdown-paste'
-import { MarkdownMention, Mention, MentionChip, SIM_LINK_SCHEME } from './mention'
-import { SlashCommand } from './slash-command/slash-command'
+import { MarkdownMention } from './mention/mention-node'
+import { SIM_LINK_SCHEME } from './mention/sim-link'
 
 /**
  * The `@`-mention link scheme, registered on the Link mark — without it the schema strips the
@@ -60,13 +56,16 @@ const PipeSafeTable = Table.extend({
       .replace(/\n+$/, ''),
 })
 
-interface MarkdownEditorExtensionOptions {
-  placeholder: string
-}
-
-interface ContentExtensionOptions {
-  /** Use the React node views (code-block language picker, image resize). Off for headless tests. */
-  nodeViews?: boolean
+/**
+ * Node-view variants the live editor injects in place of the headless defaults — the code-block
+ * language picker, the resizable image, and the mention chip. They pull React (and, for the mention
+ * chip, the block registry for brand icons), so the headless round-trip path omits them: passing
+ * nothing keeps {@link createMarkdownContentExtensions} free of React and the registry.
+ */
+export interface ContentNodeViews {
+  codeBlock?: Node
+  image?: Node
+  mention?: Node
 }
 
 /**
@@ -75,13 +74,13 @@ interface ContentExtensionOptions {
  * Markdown-style input rules (`# `, `- `, `**bold**`, …); `TaskList`/`TaskItem` add
  * `- [ ]` checklists; `TableKit` adds GFM tables; `Markdown` serializes back to markdown.
  *
- * The code block is the standalone `CodeBlock` so the live editor can swap in a node view;
- * the schema and markdown output are identical either way.
+ * Headless by default (the `nodeViews` overrides are empty), so importing this module — e.g. for the
+ * markdown round-trip in `markdown-parse.ts` — never constructs React node views or pulls the block
+ * registry. The live editor passes the node-view nodes via {@link createMarkdownEditorExtensions}; the
+ * schema and markdown output are identical either way.
  */
-export function createMarkdownContentExtensions({
-  nodeViews = false,
-}: ContentExtensionOptions = {}): Extensions {
-  const codeBlock = (nodeViews ? CodeBlockWithLanguage : MarkdownCodeBlock).configure({
+export function createMarkdownContentExtensions(nodeViews: ContentNodeViews = {}): Extensions {
+  const codeBlock = (nodeViews.codeBlock ?? MarkdownCodeBlock).configure({
     HTMLAttributes: { class: 'code-editor-theme' },
   })
   return [
@@ -93,8 +92,8 @@ export function createMarkdownContentExtensions({
     }),
     InlineCode,
     codeBlock,
-    (nodeViews ? ResizableImage : MarkdownImage).configure({ allowBase64: true }),
-    nodeViews ? MentionChip : MarkdownMention,
+    (nodeViews.image ?? MarkdownImage).configure({ allowBase64: true }),
+    nodeViews.mention ?? MarkdownMention,
     TaskList,
     TaskItem.configure({ nested: true }),
     PipeSafeTable.configure({ resizable: true }),
@@ -105,22 +104,3 @@ export function createMarkdownContentExtensions({
     Markdown,
   ]
 }
-
-/**
- * The full extension set for the live editor: the content extensions plus the UI-only
- * extensions — `CodeBlockHighlight` (Prism), `SlashCommand` (the `/` block menu), and
- * `Placeholder`.
- */
-export function createMarkdownEditorExtensions({
-  placeholder,
-}: MarkdownEditorExtensionOptions): Extensions {
-  return [
-    ...createMarkdownContentExtensions({ nodeViews: true }),
-    CodeBlockHighlight,
-    SlashCommand,
-    Mention,
-    RichMarkdownKeymap,
-    MarkdownPaste,
-    Placeholder.configure({ placeholder }),
-  ]
-}

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

@@ -33,6 +33,11 @@ function escapeAttr(value: string): string {
  * it does — standard markdown has no width syntax, so a resized image must round-trip as HTML to
  * preserve its dimensions. Unsized images stay clean `![alt](src)`. An image with an `href` is
  * wrapped in a markdown link so a linked badge round-trips as `[![alt](src)](href)`.
+ *
+ * A *sized **and** linked* image is the one case markdown can't represent: the linked-image tokenizer
+ * only recognizes `[![alt](src)](href)`, so emitting `[<img …>](href)` would silently drop the link on
+ * reparse (and the round-trip-safety probe wouldn't catch it). We keep the link and fall back to the
+ * unsized `[![alt](src)](href)` form — the link matters more than the exact dimensions for a badge.
  */
 function imageMarkdown(node: JSONContent): string {
   const attrs = node.attrs ?? {}
@@ -44,7 +49,7 @@ function imageMarkdown(node: JSONContent): string {
   const width = attrs.width
   const height = attrs.height
   let image: string
-  if (width || height) {
+  if ((width || height) && !href) {
     const parts = [`src="${escapeAttr(src)}"`]
     if (alt) parts.push(`alt="${escapeAttr(alt)}"`)
     if (title) parts.push(`title="${escapeAttr(title)}"`)
@@ -59,7 +64,9 @@ function imageMarkdown(node: JSONContent): string {
     image = `![${alt.replace(/[\\[\]]/g, '\\$&')}](${safeSrc}${titlePart})`
   }
   if (!href) return image
-  const hrefTitlePart = hrefTitle ? ` "${hrefTitle}"` : ''
+  // Escape `"`/`\` so an href title can't break out of the `[…](href "title")` syntax (mirrors the
+  // image title escaping above).
+  const hrefTitlePart = hrefTitle ? ` "${hrefTitle.replace(/["\\]/g, '\\$&')}"` : ''
   return `[${image}](${href}${hrefTitlePart})`
 }
 

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

@@ -9,7 +9,7 @@
 import { Editor } from '@tiptap/core'
 import { AllSelection, NodeSelection } from '@tiptap/pm/state'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createMarkdownEditorExtensions } from './extensions'
+import { createMarkdownEditorExtensions } from './editor-extensions'
 import { MENTION_PLUGIN_KEY } from './mention'
 import { SLASH_COMMAND_PLUGIN_KEY } from './slash-command/slash-command'
 

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

@@ -1,5 +1,6 @@
 export { MENTION_PLUGIN_KEY, Mention, type MentionStorage } from './mention'
-export { MarkdownMention, MentionChip } from './mention-node'
+export { MentionChip } from './mention-chip'
+export { MarkdownMention } from './mention-node'
 export { SIM_LINK_SCHEME, simLinkPath, toSimHref } from './sim-link'
 export type { MentionItem, MentionKind } from './types'
 export { useEditorMentions } from './use-editor-mentions'

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

@@ -0,0 +1,62 @@
+import type { MouseEvent } from 'react'
+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 { MarkdownMention, type MentionAttrs } from './mention-node'
+import { simLinkPath } from './sim-link'
+
+/**
+ * Mirrors the home chat input's mention rendering (the textarea mirror overlay
+ * in `prompt-editor.tsx`): a borderless inline icon + label that flows with the
+ * surrounding prose — no pill background, no padding, normal weight, body text
+ * color, and a 12px icon. Integration icons keep their brand color via
+ * {@link getBareIconStyle} (see {@link MentionChipView}); other kinds stay
+ * monochrome through the `--text-icon` fallback below.
+ */
+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: 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.
+ */
+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
+  const iconStyle = getBareIconStyle(Icon)
+  const navigable = editor.storage.mention?.navigable === true
+  const workspaceId = typeof params.workspaceId === 'string' ? params.workspaceId : undefined
+  const path = navigable && workspaceId ? simLinkPath(workspaceId, kind, id) : null
+
+  const handleClick = (event: MouseEvent) => {
+    if (!path || !(event.metaKey || event.ctrlKey)) return
+    event.preventDefault()
+    router.push(path)
+  }
+
+  return (
+    <NodeViewWrapper
+      as='span'
+      className={cn(CHIP_CLASS, path && 'cursor-pointer')}
+      onClick={path ? handleClick : undefined}
+      title={label}
+    >
+      <Icon style={iconStyle} />
+      <span>{label}</span>
+    </NodeViewWrapper>
+  )
+}
+
+/** Live mention node with the chip view; same schema + markdown output as the headless one. */
+export const MentionChip = MarkdownMention.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(MentionChipView)
+  },
+})

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

@@ -11,7 +11,7 @@ import { Editor } from '@tiptap/core'
 import { EditorContent, ReactRenderer } from '@tiptap/react'
 import { File } from 'lucide-react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { createMarkdownEditorExtensions } from '../extensions'
+import { createMarkdownEditorExtensions } from '../editor-extensions'
 import { MentionList, type MentionListHandle } from './mention-list'
 import { createMentionStore } from './mention-store'
 import type { MentionItem } from './types'
@@ -28,11 +28,13 @@ const tab = { event: new KeyboardEvent('keydown', { key: 'Tab' }) }
 describe('MentionList keyboard nav', () => {
   let container: HTMLElement
   let root: ReturnType<typeof import('react-dom/client').createRoot>
+  let editor: Editor
 
   beforeEach(async () => {
     // jsdom implements neither — both are exercised by scroll-into-view and ProseMirror.
     Element.prototype.scrollIntoView = vi.fn()
     document.elementFromPoint = vi.fn(() => null)
+    editor = new Editor({ extensions: createMarkdownEditorExtensions({ placeholder: '' }) })
     const { createRoot } = await import('react-dom/client')
     container = document.createElement('div')
     document.body.appendChild(container)
@@ -42,6 +44,7 @@ describe('MentionList keyboard nav', () => {
   afterEach(() => {
     act(() => root.unmount())
     container.remove()
+    editor.destroy()
   })
 
   it('navigates with arrows + inserts on enter once async items have loaded', () => {
@@ -51,7 +54,9 @@ describe('MentionList keyboard nav', () => {
 
     // Menu opens before the workspace data resolves — the store is still empty.
     act(() => {
-      root.render(<MentionList ref={ref} query='' command={command} store={store} />)
+      root.render(
+        <MentionList ref={ref} query='' command={command} store={store} editor={editor} />
+      )
     })
     expect(ref.current?.onKeyDown(arrowDown)).toBe(false)
 
@@ -76,7 +81,9 @@ describe('MentionList keyboard nav', () => {
     const store = createMentionStore()
 
     act(() => {
-      root.render(<MentionList ref={ref} query='' command={command} store={store} />)
+      root.render(
+        <MentionList ref={ref} query='' command={command} store={store} editor={editor} />
+      )
     })
     act(() => store.set(items))
 
@@ -89,7 +96,6 @@ describe('MentionList keyboard nav', () => {
   })
 
   it('exposes a working onKeyDown through ReactRenderer (the suggestion plugin path)', async () => {
-    const editor = new Editor({ extensions: createMarkdownEditorExtensions({ placeholder: '' }) })
     act(() => {
       root.render(<EditorContent editor={editor} />)
     })
@@ -98,7 +104,7 @@ describe('MentionList keyboard nav', () => {
     const store = createMentionStore()
     const renderer = new ReactRenderer<MentionListHandle>(MentionList, {
       editor,
-      props: { query: '', command, store },
+      props: { query: '', command, store, editor },
     })
     // Let the portal mount so ReactRenderer captures the imperative handle.
     await act(async () => {})
@@ -110,6 +116,5 @@ describe('MentionList keyboard nav', () => {
     expect(renderer.ref?.onKeyDown(arrowDown)).toBe(true)
 
     renderer.destroy()
-    editor.destroy()
   })
 })

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

@@ -1,4 +1,5 @@
 import { forwardRef, useImperativeHandle, useMemo, useRef, useSyncExternalStore } from 'react'
+import type { Editor } from '@tiptap/core'
 import { SuggestionList } from '../menus/suggestion-list'
 import {
   type SuggestionKeyDownHandler,
@@ -16,6 +17,8 @@ interface MentionListProps {
   command: (item: MentionItem) => void
   /** Live data source the host keeps populated. */
   store: MentionStore
+  /** The editor, wired as the ARIA combobox while the menu is open. */
+  editor: Editor
 }
 
 /** Per-group cap so a large workspace can't flood the menu; filtering still searches the full set. */
@@ -38,7 +41,7 @@ const GROUP_ORDER = [
  * `useSyncExternalStore`) rather than props — so the list fills in as async workspace data lands.
  */
 export const MentionList = forwardRef<MentionListHandle, MentionListProps>(function MentionList(
-  { query, command, store },
+  { query, command, store, editor },
   ref
 ) {
   const rawItems = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot)
@@ -78,6 +81,7 @@ export const MentionList = forwardRef<MentionListHandle, MentionListProps>(funct
 
   return (
     <SuggestionList
+      editor={editor}
       containerRef={containerRef}
       groups={groups}
       activeIndex={activeIndex}