feat(files): inline rich markdown editor

Replace the raw/preview split for markdown files with a Linear-style inline WYSIWYG editor (TipTap/ProseMirror): bubble + slash menus, code-block language picker with Prism highlighting and line-wrap, resizable images (HTML <img>), GFM tables, and frontmatter held byte-exact out of band.

A round-trip preflight gate (decided once per open) falls back to the raw Monaco editor for any file that can't be edited losslessly, so the rich editor never silently corrupts a file.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx

@@ -379,26 +379,50 @@ function BreadcrumbLocationPopover({
 }: BreadcrumbLocationPopoverProps) {
   const [open, setOpen] = useState(false)
   const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  /**
+   * Suppresses reopen for the brief window between a click-to-navigate and the
+   * route swap. Navigating away tears this popover down (the list and detail
+   * views render different subtrees), so if `open` were still true the dimming
+   * veil and popover content would snap away instead of fading — a visible
+   * flash. {@link navigateAndClose} closes the popover before running the
+   * crumb's handler and latches this so the pointer still resting on the
+   * trigger can't re-fire `openPopover` mid-navigation. It is cleared on the
+   * next pointer/focus exit so the popover keeps working when the handler does
+   * not actually navigate (e.g. an unsaved-changes guard that opens a modal).
+   */
+  const navigatingRef = useRef(false)
   const rootBreadcrumb = breadcrumbs[0]
 
-  const openPopover = () => {
+  const clearCloseTimeout = () => {
     if (closeTimeoutRef.current) {
       clearTimeout(closeTimeoutRef.current)
       closeTimeoutRef.current = null
     }
+  }
+
+  const openPopover = () => {
+    if (navigatingRef.current) return
+    clearCloseTimeout()
     setOpen(true)
   }
 
   const scheduleClose = () => {
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current)
-    }
+    navigatingRef.current = false
+    clearCloseTimeout()
     closeTimeoutRef.current = setTimeout(() => {
       setOpen(false)
       closeTimeoutRef.current = null
     }, 120)
   }
 
+  const navigateAndClose = (onClick?: () => void) => {
+    if (!onClick) return
+    navigatingRef.current = true
+    clearCloseTimeout()
+    setOpen(false)
+    onClick()
+  }
+
   useEffect(() => {
     return () => {
       if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current)
@@ -413,7 +437,7 @@ function BreadcrumbLocationPopover({
           <button
             type='button'
             aria-label={rootBreadcrumb?.label ?? 'Path'}
-            onClick={rootBreadcrumb?.onClick}
+            onClick={() => navigateAndClose(rootBreadcrumb?.onClick)}
             onFocus={openPopover}
             onBlur={scheduleClose}
             onMouseEnter={openPopover}
@@ -474,7 +498,7 @@ function BreadcrumbLocationPopover({
                 key={`${crumb.label}-${index}`}
                 icon={crumb.icon || (index === 0 ? Icon : undefined)}
                 label={crumb.label}
-                onClick={crumb.onClick}
+                onClick={crumb.onClick ? () => navigateAndClose(crumb.onClick) : undefined}
                 active={index === breadcrumbs.length - 1}
               />
             ))}

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

@@ -33,6 +33,11 @@ const PdfViewerCore = dynamic(() => import('./pdf-viewer').then((m) => m.PdfView
   ssr: false,
 })
 
+const MarkdownFileEditor = dynamic(
+  () => import('./rich-markdown-editor/markdown-file-editor').then((m) => m.MarkdownFileEditor),
+  { ssr: false, loading: () => <PreviewLoadingFrame className='flex flex-1 flex-col' /> }
+)
+
 const logger = createLogger('FileViewer')
 
 /**
@@ -50,6 +55,15 @@ export function isPreviewable(file: { type: string; name: string }): boolean {
   return resolvePreviewType(file.type, file.name) !== null
 }
 
+/**
+ * Markdown files render in the inline rich editor ({@link RichMarkdownEditor}) rather than
+ * the raw Monaco editor. Toolbars use this to hide the raw/split/preview mode controls,
+ * which don't apply to the single-surface editor.
+ */
+export function isMarkdownFile(file: { type: string; name: string }): boolean {
+  return resolvePreviewType(file.type, file.name) === 'markdown'
+}
+
 /**
  * A CSV larger than {@link CSV_INLINE_EDIT_MAX_BYTES} is shown as a streamed, read-only preview —
  * the editor would OOM loading the whole file. The viewer renders {@link CsvTablePreview} for it,
@@ -106,6 +120,23 @@ export function FileViewer({
       return <CsvTablePreview key={file.id} file={file} workspaceId={workspaceId} />
     }
 
+    // Markdown renders in the inline rich editor when idle. During agent streaming we keep
+    // the raw/preview editor, which already handles incremental token reconciliation.
+    if (isMarkdownFile(file) && streamingContent === undefined) {
+      return (
+        <MarkdownFileEditor
+          key={file.id}
+          file={file}
+          workspaceId={workspaceId}
+          canEdit={canEdit}
+          autoFocus={autoFocus}
+          onDirtyChange={onDirtyChange}
+          onSaveStatusChange={onSaveStatusChange}
+          saveRef={saveRef}
+        />
+      )
+    }
+
     return (
       <TextEditor
         file={file}

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

@@ -1,4 +1,10 @@
 export { resolveFileCategory } from './file-category'
 export type { PreviewMode } from './file-viewer'
-export { FileViewer, isCsvStreamOnly, isPreviewable, isTextEditable } from './file-viewer'
+export {
+  FileViewer,
+  isCsvStreamOnly,
+  isMarkdownFile,
+  isPreviewable,
+  isTextEditable,
+} from './file-viewer'
 export { RICH_PREVIEWABLE_EXTENSIONS } from './preview-panel'

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

@@ -0,0 +1,160 @@
+import { useEffect, useState } from 'react'
+import type { JSONContent } from '@tiptap/core'
+import { CodeBlock } from '@tiptap/extension-code-block'
+import type { ReactNodeViewProps } from '@tiptap/react'
+import { NodeViewContent, NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'
+import { Check, ChevronDown, Copy, WrapText } from 'lucide-react'
+import {
+  chipVariants,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/emcn'
+import { cn } from '@/lib/core/utils/cn'
+import { detectLanguage } from './detect-language'
+
+const PLAIN = 'plain'
+
+/** Languages the Prism highlighter has registered (see {@link CodeBlockHighlight}). */
+const LANGUAGE_OPTIONS = [
+  { value: PLAIN, label: 'Plain text' },
+  { value: 'bash', label: 'Bash' },
+  { value: 'css', label: 'CSS' },
+  { value: 'markup', label: 'HTML' },
+  { value: 'javascript', label: 'JavaScript' },
+  { value: 'json', label: 'JSON' },
+  { value: 'python', label: 'Python' },
+  { value: 'sql', label: 'SQL' },
+  { value: 'typescript', label: 'TypeScript' },
+  { value: 'yaml', label: 'YAML' },
+] as const
+
+const CONTROL_CLASS =
+  'flex size-[24px] items-center justify-center rounded-lg text-[var(--text-icon)] outline-none transition-colors hover-hover:bg-[var(--surface-hover)] hover-hover:text-[var(--text-body)] focus-visible:bg-[var(--surface-hover)] [&_svg]:size-[14px]'
+
+function CodeBlockView({ node, updateAttributes }: ReactNodeViewProps) {
+  const [wrap, setWrap] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const [menuOpen, setMenuOpen] = useState(false)
+  const explicitLanguage = node.attrs.language as string | null
+  const language = explicitLanguage ?? detectLanguage(node.textContent) ?? PLAIN
+  const label =
+    LANGUAGE_OPTIONS.find((option) => option.value === language)?.label ??
+    explicitLanguage ??
+    'Plain text'
+
+  useEffect(() => {
+    if (!copied) return
+    const timer = setTimeout(() => setCopied(false), 1500)
+    return () => clearTimeout(timer)
+  }, [copied])
+
+  const copy = async () => {
+    const ok = await navigator.clipboard
+      ?.writeText(node.textContent)
+      .then(() => true)
+      .catch(() => false)
+    if (ok) setCopied(true)
+  }
+
+  return (
+    <NodeViewWrapper className='group relative'>
+      <div
+        className={cn(
+          'absolute top-1.5 right-2 z-10 flex items-center gap-0.5 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100',
+          menuOpen && 'opacity-100'
+        )}
+        contentEditable={false}
+      >
+        <DropdownMenu onOpenChange={setMenuOpen}>
+          <DropdownMenuTrigger asChild>
+            <button
+              type='button'
+              aria-label='Code language'
+              className={cn(
+                chipVariants({ variant: 'default', flush: true }),
+                'h-[24px] gap-1 px-1.5 text-[var(--text-muted)] data-[state=open]:bg-[var(--surface-active)] data-[state=open]:text-[var(--text-body)]'
+              )}
+            >
+              {label}
+              <ChevronDown className='size-[14px] text-[var(--text-icon)]' />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align='end'>
+            {LANGUAGE_OPTIONS.map((option) => (
+              <DropdownMenuItem
+                key={option.value}
+                onSelect={() =>
+                  updateAttributes({ language: option.value === PLAIN ? null : option.value })
+                }
+              >
+                {option.label}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <button
+          type='button'
+          aria-label='Toggle line wrap'
+          aria-pressed={wrap}
+          onMouseDown={(event) => event.preventDefault()}
+          onClick={() => setWrap((value) => !value)}
+          className={cn(
+            CONTROL_CLASS,
+            wrap && 'bg-[var(--surface-active)] text-[var(--text-body)]'
+          )}
+        >
+          <WrapText />
+        </button>
+        <button
+          type='button'
+          aria-label='Copy code'
+          onMouseDown={(event) => event.preventDefault()}
+          onClick={copy}
+          className={CONTROL_CLASS}
+        >
+          {copied ? <Check /> : <Copy />}
+        </button>
+      </div>
+      <pre className='code-editor-theme pr-20' data-wrap={wrap}>
+        <NodeViewContent<'code'> as='code' />
+      </pre>
+    </NodeViewWrapper>
+  )
+}
+
+function codeBlockText(node: JSONContent): string {
+  return (node.content ?? []).map((child) => child.text ?? '').join('')
+}
+
+/** Fence sized to one backtick longer than the longest run inside the code (CommonMark rule). */
+function fenceFor(text: string): string {
+  const longestRun = Math.max(0, ...[...text.matchAll(/`+/g)].map((match) => match[0].length))
+  return '`'.repeat(Math.max(3, longestRun + 1))
+}
+
+/**
+ * Code block whose markdown serializer sizes the fence to the interior backtick runs, so a code
+ * block that itself contains a ``` line round-trips instead of shattering. Shared by the test
+ * (plain) and live ({@link CodeBlockWithLanguage}) paths.
+ */
+export const MarkdownCodeBlock = CodeBlock.extend({
+  renderMarkdown: (node: JSONContent) => {
+    const language = typeof node.attrs?.language === 'string' ? node.attrs.language : ''
+    const text = codeBlockText(node)
+    const fence = fenceFor(text)
+    return `${fence}${language}\n${text}\n${fence}`
+  },
+})
+
+/**
+ * Code block with hover-revealed controls (language picker, line-wrap toggle, copy), in the
+ * style of Linear's editor. The `language` attribute drives {@link CodeBlockHighlight}'s Prism
+ * highlighting and serializes to the ```lang fence on save; wrap is a view-only preference.
+ */
+export const CodeBlockWithLanguage = MarkdownCodeBlock.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(CodeBlockView)
+  },
+})

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

@@ -0,0 +1,43 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { Editor } from '@tiptap/core'
+import { afterEach, describe, expect, it } from 'vitest'
+import { buildDecorations } from './code-highlight'
+import { createMarkdownContentExtensions } from './extensions'
+
+let editor: Editor | null = null
+
+function decorationClassesFor(markdown: string): string[] {
+  editor = new Editor({ extensions: createMarkdownContentExtensions() })
+  editor.commands.setContent(markdown, { contentType: 'markdown' })
+  const decorations = buildDecorations(editor.state.doc).find()
+  editor.destroy()
+  editor = null
+  return decorations.map(
+    (decoration) =>
+      (decoration as unknown as { type: { attrs: { class: string } } }).type.attrs.class
+  )
+}
+
+afterEach(() => {
+  editor?.destroy()
+  editor = null
+})
+
+describe('code block syntax highlighting', () => {
+  it('emits Prism token decorations for a known language', () => {
+    const classes = decorationClassesFor('```js\nconst x = 1\n```')
+    expect(classes.length).toBeGreaterThan(0)
+    expect(classes.every((c) => c.startsWith('token'))).toBe(true)
+    expect(classes.some((c) => c.includes('keyword'))).toBe(true)
+  })
+
+  it('does not decorate plain prose', () => {
+    expect(decorationClassesFor('just some text')).toHaveLength(0)
+  })
+
+  it('does not decorate an unregistered language', () => {
+    expect(decorationClassesFor('```unregistered-lang\n+++ foo\n```')).toHaveLength(0)
+  })
+})