fix(files): restore same-page anchor links in the rich markdown editor

Headings rendered by the TipTap editor had no slug ids (the old MarkdownPreview
got them from rehype-slug), so in-document table-of-contents links like
[section](#section) had no targets. Resolve the slug to its heading on click
(GitHub-style, duplicate-disambiguated) and scroll to it, with zero per-keystroke
cost.

Author: waleedlatif1

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

@@ -0,0 +1,57 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { Editor } from '@tiptap/core'
+import { afterEach, describe, expect, it } from 'vitest'
+import { createMarkdownContentExtensions } from './extensions'
+import { findHeadingPos, slugifyHeading } from './heading-anchors'
+
+let editor: Editor | null = null
+afterEach(() => {
+  editor?.destroy()
+  editor = null
+})
+
+/** A ProseMirror doc parsed from markdown, for the position-resolution tests. */
+function docOf(markdown: string) {
+  editor = new Editor({ extensions: createMarkdownContentExtensions() })
+  editor.commands.setContent(markdown, { contentType: 'markdown' })
+  return editor.state.doc
+}
+
+describe('slugifyHeading', () => {
+  it('lowercases, drops punctuation, and hyphenates whitespace (GitHub-style)', () => {
+    expect(slugifyHeading('Getting Started')).toBe('getting-started')
+    expect(slugifyHeading('API Reference!')).toBe('api-reference')
+    expect(slugifyHeading('  Spaced   Out  ')).toBe('spaced-out')
+    expect(slugifyHeading('Node.js & Bun')).toBe('nodejs-bun')
+  })
+
+  it('returns an empty string for punctuation-only text', () => {
+    expect(slugifyHeading('!!!')).toBe('')
+    expect(slugifyHeading('')).toBe('')
+  })
+})
+
+describe('findHeadingPos', () => {
+  it('resolves a fragment slug to its heading position', () => {
+    const doc = docOf('# Intro\n\ntext\n\n## Getting Started\n\nmore')
+    expect(findHeadingPos(doc, 'intro')).toBeGreaterThanOrEqual(0)
+    expect(findHeadingPos(doc, 'getting-started')).toBeGreaterThan(findHeadingPos(doc, 'intro'))
+  })
+
+  it('disambiguates duplicate slugs GitHub-style (foo, foo-1, foo-2)', () => {
+    const doc = docOf('# Notes\n\na\n\n# Notes\n\nb\n\n# Notes\n\nc')
+    const first = findHeadingPos(doc, 'notes')
+    const second = findHeadingPos(doc, 'notes-1')
+    const third = findHeadingPos(doc, 'notes-2')
+    expect(first).toBeGreaterThanOrEqual(0)
+    expect(second).toBeGreaterThan(first)
+    expect(third).toBeGreaterThan(second)
+  })
+
+  it('returns -1 when no heading matches', () => {
+    const doc = docOf('# Only Heading\n\nbody')
+    expect(findHeadingPos(doc, 'missing')).toBe(-1)
+  })
+})

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

@@ -0,0 +1,36 @@
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
+
+/**
+ * Slugify heading text GitHub-style (lowercase, drop punctuation, collapse whitespace to hyphens) so
+ * that `[label](#slug)` fragment links — written against how GitHub renders the same markdown —
+ * resolve to the matching heading. Mirrors what `rehype-slug` produced in the old preview.
+ */
+export function slugifyHeading(text: string): string {
+  return text
+    .toLowerCase()
+    .trim()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+}
+
+/**
+ * The document position of the heading a `#slug` fragment link targets, or -1 if none matches.
+ * Computed on demand (at click time) rather than maintained as per-keystroke decorations. Duplicate
+ * slugs are disambiguated GitHub-style: `intro`, `intro-1`, `intro-2`, …
+ */
+export function findHeadingPos(doc: ProseMirrorNode, slug: string): number {
+  const seen = new Map<string, number>()
+  let found = -1
+  doc.descendants((node, pos) => {
+    if (found >= 0) return false
+    if (node.type.name !== 'heading') return true
+    const base = slugifyHeading(node.textContent)
+    if (!base) return true
+    const n = seen.get(base) ?? 0
+    seen.set(base, n + 1)
+    if ((n === 0 ? base : `${base}-${n}`) === slug) found = pos
+    return found < 0
+  })
+  return found
+}

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

@@ -11,6 +11,7 @@ import type { SaveStatus } from '@/hooks/use-autosave'
 import { PreviewLoadingFrame } from '../preview-shared'
 import { useEditableFileContent } from '../use-editable-file-content'
 import { createMarkdownEditorExtensions } from './extensions'
+import { findHeadingPos } from './heading-anchors'
 import { extractImageFiles } from './image-paste'
 import {
   applyFrontmatter,
@@ -241,6 +242,17 @@ export function LoadedRichMarkdownEditor({
         // Editing: require a modifier so a plain click can place the cursor. Read-only (a reader, e.g.
         // the public share page): a plain click follows the link.
         if (view.editable && !(event.metaKey || event.ctrlKey)) return false
+        // Same-page anchor (`[x](#slug)`): scroll to the matching heading instead of opening a tab,
+        // restoring the table-of-contents links that worked via rehype-slug in the old preview.
+        if (href.startsWith('#')) {
+          const pos = findHeadingPos(view.state.doc, href.slice(1))
+          if (pos < 0) return false
+          ;(view.nodeDOM(pos) as HTMLElement | null)?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start',
+          })
+          return true
+        }
         const normalized = normalizeLinkHref(href)
         if (!normalized) return false
         window.open(normalized, '_blank', 'noopener,noreferrer')