feat(files): rich markdown editor across files + chat, read-only for unsafe, robust load/save

- chat resource view streams into the rich editor (streamdown while streaming → editable on completion); agent persists server-side, editor never saves mid-stream
- round-trip-unsafe / >128KB markdown renders read-only in the rich editor (no Monaco, no corruption)
- markdown always uses the rich editor (dropped the inline-markdown opt-in flag)
- editor loads content as TipTap's initial content keyed by file id — strict-mode/SSR-safe, no content-sync effect
- fix autosave "Saving…" status suppression under React strict mode
- lock the streamed-file persistence handoff with a state-machine lifecycle test

Author: waleedlatif1

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

@@ -101,12 +101,6 @@ interface FileViewerProps {
   streamingMode?: StreamingMode
   disableStreamingAutoScroll?: boolean
   previewContextKey?: string
-  /**
-   * Render idle markdown in the inline rich editor. Off by default so preview surfaces (e.g. the
-   * Chat resource view, which streams content and persists via the raw editor) keep the
-   * mode-toggleable raw/preview editor; the files view opts in.
-   */
-  inlineMarkdownEditor?: boolean
 }
 
 export function FileViewer({
@@ -123,7 +117,6 @@ export function FileViewer({
   streamingMode,
   disableStreamingAutoScroll = false,
   previewContextKey,
-  inlineMarkdownEditor = false,
 }: FileViewerProps) {
   const category = resolveFileCategory(file.type, file.name)
 
@@ -135,6 +128,14 @@ export function FileViewer({
       if (isCsvStreamOnly(file)) {
         return <UnsupportedPreview file={file} />
       }
+      // Markdown renders through the inline rich editor (non-editable) so the public share
+      // surface matches the in-app reading experience; canEdit={false} disables autosave,
+      // the bubble menu, and every other editing affordance.
+      if (isMarkdownFile(file)) {
+        return (
+          <MarkdownFileEditor key={file.id} file={file} workspaceId={workspaceId} canEdit={false} />
+        )
+      }
       return <ReadOnlyTextPreview file={file} workspaceId={workspaceId} />
     }
     // A large CSV can't be loaded whole into the editor (the browser OOMs on the full text).
@@ -143,7 +144,7 @@ export function FileViewer({
       return <CsvTablePreview key={file.id} file={file} workspaceId={workspaceId} />
     }
 
-    if (inlineMarkdownEditor && isMarkdownFile(file) && streamingContent === undefined) {
+    if (isMarkdownFile(file)) {
       return (
         <MarkdownFileEditor
           key={file.id}
@@ -154,6 +155,10 @@ export function FileViewer({
           onDirtyChange={onDirtyChange}
           onSaveStatusChange={onSaveStatusChange}
           saveRef={saveRef}
+          streamingContent={streamingContent}
+          streamingMode={streamingMode}
+          disableStreamingAutoScroll={disableStreamingAutoScroll}
+          previewContextKey={previewContextKey}
         />
       )
     }

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

@@ -5,7 +5,7 @@ import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
 import { useWorkspaceFileContent } from '@/hooks/queries/workspace-files'
 import type { SaveStatus } from '@/hooks/use-autosave'
 import { PreviewLoadingFrame } from '../preview-shared'
-import { TextEditor } from '../text-editor'
+import type { StreamingMode } from '../text-editor-state'
 import { RichMarkdownEditor } from './rich-markdown-editor'
 import { isRoundTripSafe } from './round-trip-safety'
 
@@ -17,22 +17,22 @@ interface MarkdownFileEditorProps {
   onDirtyChange?: (isDirty: boolean) => void
   onSaveStatusChange?: (status: SaveStatus) => void
   saveRef?: React.MutableRefObject<(() => Promise<void>) | null>
+  streamingContent?: string
+  streamingMode?: StreamingMode
+  disableStreamingAutoScroll?: boolean
+  previewContextKey?: string
 }
 
 /**
- * Chooses the editing surface for a markdown file. Almost every file renders in the inline
- * {@link RichMarkdownEditor}, but a small set of constructs can't survive the markdown
- * round-trip losslessly (a linked image, inline code containing a backtick). For those we fall
- * back to the raw {@link TextEditor} so the file is never silently corrupted on save.
+ * Renders a markdown file in the inline {@link RichMarkdownEditor} — the single surface for
+ * markdown everywhere. A small tail of constructs can't survive the markdown round-trip losslessly
+ * (raw HTML, footnotes, linked images, >128KB); editing those would corrupt them, so the gate marks
+ * them read-only (autosave never fires) while still rendering them in the same rich editor. There is
+ * no separate raw/Monaco editor.
  *
- * The gate peeks the (React Query-cached) content before mounting either editor, so the chosen
- * surface re-reads the same content instantly and only one autosave engine is ever live.
- *
- * The decision is made once — on the first loaded content — and locked for the lifetime of the
- * mount (the component is keyed by file id, so it remounts per file). This keeps the editor from
- * ever swapping out from under the user on a background refetch (window focus, post-save), and
- * keeps the round-trip probe off the hot path. Anything typed in the rich editor is inherently
- * round-trip-safe, so the lock can never cause silent data loss.
+ * The round-trip decision is made once, on the first SETTLED content, and locked for the mount
+ * (keyed by file id). It is deferred while streaming — partial content would misclassify, and the
+ * editor renders the live stream read-only regardless of the eventual verdict.
  */
 export function MarkdownFileEditor({
   file,
@@ -42,45 +42,37 @@ export function MarkdownFileEditor({
   onDirtyChange,
   onSaveStatusChange,
   saveRef,
+  streamingContent,
+  streamingMode,
+  disableStreamingAutoScroll,
+  previewContextKey,
 }: MarkdownFileEditorProps) {
-  const { data, isLoading, error } = useWorkspaceFileContent(workspaceId, file.id, file.key)
+  const { data, isLoading } = useWorkspaceFileContent(workspaceId, file.id, file.key)
+
+  const isStreaming = streamingContent !== undefined
 
   const decisionRef = useRef<boolean | null>(null)
-  if (decisionRef.current === null && data !== undefined) {
+  if (decisionRef.current === null && !isStreaming && data !== undefined) {
     decisionRef.current = isRoundTripSafe(data)
   }
 
-  if (decisionRef.current === null && isLoading) {
+  if (decisionRef.current === null && isLoading && !isStreaming) {
     return <PreviewLoadingFrame className='flex flex-1 flex-col' />
   }
 
-  // Fall back to the raw editor when the content can't round-trip losslessly, or the fetch failed
-  // (a later retry-success resolves `data` and the gate decides normally).
-  if (decisionRef.current === false || (decisionRef.current === null && error)) {
-    return (
-      <TextEditor
-        file={file}
-        workspaceId={workspaceId}
-        canEdit={canEdit}
-        previewMode='editor'
-        autoFocus={autoFocus}
-        onDirtyChange={onDirtyChange}
-        onSaveStatusChange={onSaveStatusChange}
-        saveRef={saveRef}
-        disableStreamingAutoScroll={false}
-      />
-    )
-  }
-
   return (
     <RichMarkdownEditor
       file={file}
       workspaceId={workspaceId}
-      canEdit={canEdit}
+      canEdit={canEdit && decisionRef.current !== false}
       autoFocus={autoFocus}
       onDirtyChange={onDirtyChange}
       onSaveStatusChange={onSaveStatusChange}
       saveRef={saveRef}
+      streamingContent={streamingContent}
+      streamingMode={streamingMode}
+      disableStreamingAutoScroll={disableStreamingAutoScroll}
+      previewContextKey={previewContextKey}
     />
   )
 }