improvement(file-viewer): reuse shared copy hook, lazy frontmatter split

- code-block: replace hand-rolled copy-with-timeout with shared useCopyToClipboard
- rich-markdown-editor: compute frontmatter split once via lazy ref, drop redundant frontmatterRef
- round-trip-safety: correct stale comments (read-only, not raw editor fallback)

Author: waleedlatif1

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import type { JSONContent } from '@tiptap/core'
 import { CodeBlock } from '@tiptap/extension-code-block'
 import type { ReactNodeViewProps } from '@tiptap/react'
@@ -12,6 +12,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
+import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard'
 import { detectLanguage } from './detect-language'
 
 const PLAIN = 'plain'
@@ -35,29 +36,15 @@ const CONTROL_CLASS =
 
 function CodeBlockView({ node, updateAttributes }: ReactNodeViewProps) {
   const [wrap, setWrap] = useState(false)
-  const [copied, setCopied] = useState(false)
   const [menuOpen, setMenuOpen] = useState(false)
+  const { copied, copy } = useCopyToClipboard({ resetMs: 1500 })
   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
@@ -111,7 +98,7 @@ function CodeBlockView({ node, updateAttributes }: ReactNodeViewProps) {
           type='button'
           aria-label='Copy code'
           onMouseDown={(event) => event.preventDefault()}
-          onClick={copy}
+          onClick={() => copy(node.textContent)}
           className={CONTROL_CLASS}
         >
           {copied ? <Check /> : <Copy />}

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { memo, useEffect, useMemo, useRef } from 'react'
+import { memo, useEffect, useRef } from 'react'
 import type { Editor } from '@tiptap/react'
 import { EditorContent, useEditor } from '@tiptap/react'
 import { cn } from '@/lib/core/utils/cn'
@@ -163,9 +163,14 @@ function LoadedRichMarkdownEditor({
   }
   const isEditable = canEdit && roundTripSafeRef.current
 
-  const { frontmatter, body } = useMemo(() => splitFrontmatter(initialContent), [initialContent])
-  const frontmatterRef = useRef(frontmatter)
-  frontmatterRef.current = frontmatter
+  // Split frontmatter off once, on the opened content (stable for the editor's lifetime, like the
+  // verdict above): the body seeds the editor's initial document, and the frontmatter is re-attached
+  // on every change so the editor only ever round-trips the body.
+  const splitRef = useRef<{ frontmatter: string; body: string } | null>(null)
+  if (splitRef.current === null) {
+    splitRef.current = splitFrontmatter(initialContent)
+  }
+  const { frontmatter, body } = splitRef.current
   const onChangeRef = useRef(onChange)
   onChangeRef.current = onChange
   const onSaveShortcutRef = useRef(onSaveShortcut)
@@ -251,7 +256,7 @@ function LoadedRichMarkdownEditor({
     },
     onUpdate: ({ editor }) => {
       const md = postProcessSerializedMarkdown(editor.getMarkdown())
-      onChangeRef.current(applyFrontmatter(frontmatterRef.current, md))
+      onChangeRef.current(applyFrontmatter(frontmatter, md))
     },
   })
   editorInstanceRef.current = editor

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

@@ -9,7 +9,7 @@ import {
 /**
  * Above this size we don't run the (synchronous) round-trip probe — building two editors to
  * serialize a large document blocks the main thread for too long, and a very large markdown file
- * is heavier to edit richly anyway, so it opens in the raw editor.
+ * is heavier to edit richly anyway, so it opens read-only.
  */
 const PROBE_SIZE_LIMIT = 128 * 1024
 
@@ -48,7 +48,7 @@ const STABLE_LOSS_PATTERNS: ReadonlyArray<RegExp> = [
  * or tilde, length-matched on the closer so nested fences strip as one unit) and inline code.
  * Indented (4-space) code is deliberately NOT stripped — list/paragraph continuation lines are
  * also indented, and over-stripping would risk missing a real unsafe construct (a false negative,
- * which is worse than the rare false positive of an indented code block opening in the raw editor).
+ * which is worse than the rare false positive of an indented code block opening read-only).
  */
 function stripCode(content: string): string {
   return content
@@ -70,8 +70,8 @@ function serialize(content: string): string {
 
 /**
  * Whether `content` survives the editor's markdown round-trip without data loss or autosave
- * churn. Callers fall back to the raw text editor when this is false, so the gate is
- * deliberately conservative: it rejects on any doubt rather than risk silently corrupting a file.
+ * churn. The editor opens the content read-only when this is false, so the probe is deliberately
+ * conservative: it rejects on any doubt rather than risk an edit silently corrupting a file.
  *
  * Two complementary checks: known stable-loss constructs are matched directly (the idempotency
  * probe is blind to them), and everything else must reach a fixpoint — `serialize(x)` twice in a