fix(rich-editor): escape bracketed mention labels + disable images in field editors

- Escape/unescape `[`/`]` in mention labels so an entity named e.g. `data[1].csv`
  round-trips into a chip instead of degrading to a plain link
- Hide the `/Image` command where image upload isn't wired (the skill + version
  description field editors), so images can't be inserted there; the file viewer
  keeps image support

Author: waleedlatif1

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

@@ -36,6 +36,14 @@ describe('mention node round-trip', () => {
     }
   })
 
+  it('round-trips a label containing brackets (e.g. a bracketed file name) as a chip', () => {
+    const input = '[data\\[1\\].csv](sim:file/abc)'
+    const doc = parseMarkdownToDoc(input)
+    const mention = findMention(doc)
+    expect(mention?.attrs).toEqual({ kind: 'file', id: 'abc', label: 'data[1].csv' })
+    expect(serializeMarkdownBody(input).trim()).toBe(input)
+  })
+
   it('leaves a normal http link as a link, not a mention', () => {
     const doc = parseMarkdownToDoc('[Sim](https://sim.ai)')
     expect(findMention(doc)).toBeNull()

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

@@ -15,8 +15,22 @@ interface MentionAttrs {
   label: string
 }
 
-/** The markdown form of a mention — the chat's portable `[label](sim:<kind>/<id>)` link. */
-const MENTION_MD_RE = /^\[([^\]]+)\]\(sim:([a-z_]+)\/([^)\s]+)\)/
+/**
+ * The markdown form of a mention — the chat's portable `[label](sim:<kind>/<id>)` link. The label
+ * group accepts backslash-escaped characters so a label containing `[`/`]` (e.g. a file named
+ * `data[1].csv`) still round-trips into a chip instead of degrading to a plain link.
+ */
+const MENTION_MD_RE = /^\[((?:\\.|[^\]\\])+)\]\(sim:([a-z_]+)\/([^)\s]+)\)/
+
+/** Escape `\`, `[`, `]` in a mention label so brackets in entity names can't break the link syntax. */
+function escapeLabel(label: string): string {
+  return label.replace(/[\\[\]]/g, '\\$&')
+}
+
+/** Inverse of {@link escapeLabel}, applied when parsing a mention back from markdown. */
+function unescapeLabel(label: string): string {
+  return label.replace(/\\([\\[\]])/g, '$1')
+}
 
 /** Custom fields the mention tokenizer hangs on the marked token (all optional, like the image token). */
 interface MentionTokenFields {
@@ -78,11 +92,14 @@ export const MarkdownMention = Node.create({
   },
   parseMarkdown: (token: MarkdownToken): JSONContent => {
     const { kind, id, label } = token as MentionTokenFields
-    return { type: 'mention', attrs: { kind: kind ?? '', id: id ?? '', label: label ?? '' } }
+    return {
+      type: 'mention',
+      attrs: { kind: kind ?? '', id: id ?? '', label: unescapeLabel(label ?? '') },
+    }
   },
   renderMarkdown: (node: JSONContent): string => {
     const { kind, id, label } = (node.attrs ?? {}) as MentionAttrs
-    return `[${label}](${toSimHref(kind, id)})`
+    return `[${escapeLabel(label)}](${toSimHref(kind, id)})`
   },
 })
 

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

@@ -32,6 +32,16 @@ describe('filterSlashCommands', () => {
   it('returns empty for no match', () => {
     expect(filterSlashCommands('zzz')).toEqual([])
   })
+
+  it('drops the Image command when image insertion is disallowed', () => {
+    expect(filterSlashCommands('', { allowImages: false }).map((c) => c.title)).not.toContain(
+      'Image'
+    )
+    expect(filterSlashCommands('image', { allowImages: false })).toEqual([])
+    expect(filterSlashCommands('image', { allowImages: true }).map((c) => c.title)).toContain(
+      'Image'
+    )
+  })
 })
 
 describe('SLASH_COMMANDS registry', () => {

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

@@ -156,13 +156,19 @@ export const SLASH_COMMANDS: readonly SlashCommandItem[] = [
 ]
 
 /**
- * Filters commands by a case-insensitive match against title or aliases. Order is
- * preserved so the menu stays stable as the query narrows.
+ * Filters commands by a case-insensitive match against title or aliases. Order is preserved so the
+ * menu stays stable as the query narrows. The Image command is dropped when image insertion isn't
+ * available (`allowImages: false`) — e.g. the modal field editors, which have no upload affordance.
  */
-export function filterSlashCommands(query: string): SlashCommandItem[] {
+export function filterSlashCommands(
+  query: string,
+  options?: { allowImages?: boolean }
+): SlashCommandItem[] {
+  const allowImages = options?.allowImages ?? true
+  const available = allowImages ? SLASH_COMMANDS : SLASH_COMMANDS.filter((c) => c.title !== 'Image')
   const q = query.trim().toLowerCase()
-  if (!q) return [...SLASH_COMMANDS]
-  return SLASH_COMMANDS.filter(
+  if (!q) return [...available]
+  return available.filter(
     (command) =>
       command.title.toLowerCase().includes(q) || command.aliases.some((alias) => alias.includes(q))
   )

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

@@ -46,7 +46,12 @@ export const SlashCommand = Extension.create<Record<string, never>, SlashCommand
           if ($from.parentOffset === 0) return true
           return /\s/.test($from.parent.textBetween($from.parentOffset - 1, $from.parentOffset))
         },
-        items: ({ query }) => filterSlashCommands(query),
+        // The Image command is offered only where image upload is wired (the file viewer); the modal
+        // field editors never set `insertImage`, so `@`-style image insertion is hidden there.
+        items: ({ editor, query }) =>
+          filterSlashCommands(query, {
+            allowImages: editor.storage.slashCommand.insertImage != null,
+          }),
         command: ({ editor, range, props }) => {
           const ctx: SlashCommandContext = { editor, range }
           props.run(ctx)