fix(rich-markdown-editor): reliable image selection + resize and broken-image polish

- Reactive editability. The editor runs with shouldRerenderOnTransaction:false, so a node view that
  read editor.isEditable once at render kept a stale value after setEditable() toggled (e.g. an agent
  stream settling into the doc), leaving a pasted image showing read-only affordances and code blocks
  stuck on their read-only label until a full refresh. A shared useEditorEditable hook subscribes to the
  editor's update/transaction events so both node views track editability reactively.
- Deterministic click-to-select. A handleClickOn plugin sets the image's NodeSelection on a plain click
  so selecting never depends on ProseMirror's click-vs-drag arbitration; grab-anywhere drag-reorder is
  kept, and modified clicks (Cmd/Ctrl to follow a linked badge) fall through.
- Resize commits once. The width previews in local state during the drag and commits to the node once on
  pointer-up (or pointer-cancel), so a resize is a single undo step and an interrupted drag isn't lost.
- Broken-image placeholder. A src that fails to load renders as a visible box with its alt text and stays
  selectable, instead of collapsing to a bare broken-icon.

Author: waleedlatif1

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

@@ -15,6 +15,7 @@ import { NodeViewContent, NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap
 import { Check, ChevronDown, Code, Copy, Eye, WrapText } from 'lucide-react'
 import { looksLikeMermaid, MermaidDiagram } from '../mermaid-diagram'
 import { detectLanguage } from './detect-language'
+import { useEditorEditable } from './use-editor-editable'
 
 const PLAIN = 'plain'
 const MERMAID = 'mermaid'
@@ -59,6 +60,7 @@ function CodeBlockView({ node, updateAttributes, editor, getPos }: ReactNodeView
   const [editingInline, setEditingInline] = useState(false)
   const [peekSource, setPeekSource] = useState(false)
   const { copied, copy } = useCopyToClipboard({ resetMs: 1500 })
+  const editable = useEditorEditable(editor)
 
   const explicitLanguage = node.attrs.language as string | null
   const text = node.textContent
@@ -68,7 +70,7 @@ function CodeBlockView({ node, updateAttributes, editor, getPos }: ReactNodeView
   // diagram on blur (the Linear/GitHub model). The Show source / Show diagram control drives this by
   // focusing into / blurring the block; read-only uses {@link peekSource} since there is no caret.
   useEffect(() => {
-    if (!isMermaid || !editor.isEditable) {
+    if (!isMermaid || !editable) {
       setEditingInline(false)
       return
     }
@@ -91,9 +93,9 @@ function CodeBlockView({ node, updateAttributes, editor, getPos }: ReactNodeView
       editor.off('focus', sync)
       editor.off('blur', sync)
     }
-  }, [editor, getPos, isMermaid])
+  }, [editor, getPos, isMermaid, editable])
 
-  const showSource = editor.isEditable ? editingInline : peekSource
+  const showSource = editable ? editingInline : peekSource
   const showDiagram = isMermaid && text.trim().length > 0 && !showSource
 
   // Skip language detection on the mermaid path — the picker/label never render there.
@@ -104,7 +106,7 @@ function CodeBlockView({ node, updateAttributes, editor, getPos }: ReactNodeView
     'Plain text'
 
   const toggleSource = () => {
-    if (!editor.isEditable) {
+    if (!editable) {
       setPeekSource((value) => !value)
       return
     }
@@ -144,7 +146,7 @@ function CodeBlockView({ node, updateAttributes, editor, getPos }: ReactNodeView
           </button>
         )}
         {!isMermaid &&
-          (editor.isEditable ? (
+          (editable ? (
             // Editable: a language picker. Read-only: a static label — selecting a language calls
             // updateAttributes, which would mutate a doc that must not change.
             <DropdownMenu onOpenChange={setMenuOpen}>
@@ -179,7 +181,7 @@ function CodeBlockView({ node, updateAttributes, editor, getPos }: ReactNodeView
               {label}
             </span>
           ))}
-        {!isMermaid && editor.isEditable && (
+        {!isMermaid && editable && (
           <button
             type='button'
             aria-label='Toggle line wrap'

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

@@ -2,10 +2,12 @@ import { useEffect, useRef, useState } from 'react'
 import { cn } from '@sim/emcn'
 import type { JSONContent } from '@tiptap/core'
 import { Image } from '@tiptap/extension-image'
+import { NodeSelection, Plugin } from '@tiptap/pm/state'
 import type { ReactNodeViewProps } from '@tiptap/react'
 import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'
 import { useFileContentSource } from '@/hooks/use-file-content-source'
 import { normalizeLinkHref } from './markdown-fidelity'
+import { useEditorEditable } from './use-editor-editable'
 
 const MIN_WIDTH = 64
 
@@ -168,7 +170,12 @@ function ResizableImageView({ node, updateAttributes, selected, editor }: ReactN
   const source = useFileContentSource()
   const imageRef = useRef<HTMLImageElement>(null)
   const dragAbortRef = useRef<AbortController | null>(null)
+  const dragWidthRef = useRef<number | null>(null)
   const [dragging, setDragging] = useState(false)
+  /** Live width during a resize drag; kept out of the doc so the whole resize is one undo step. */
+  const [dragWidth, setDragWidth] = useState<number | null>(null)
+  /** Whether the current src failed to load; reset on src change so a retried/edited src can load. */
+  const [failed, setFailed] = useState(false)
   const attrs = node.attrs as {
     src?: string
     alt?: string
@@ -178,6 +185,7 @@ function ResizableImageView({ node, updateAttributes, selected, editor }: ReactN
   }
 
   useEffect(() => () => dragAbortRef.current?.abort(), [])
+  useEffect(() => setFailed(false), [attrs.src])
 
   const startResize = (event: React.PointerEvent) => {
     event.preventDefault()
@@ -195,31 +203,42 @@ function ResizableImageView({ node, updateAttributes, selected, editor }: ReactN
       'pointermove',
       (move) => {
         const next = Math.max(MIN_WIDTH, Math.round(startWidth + (move.clientX - startX)))
-        updateAttributes({ width: String(next) })
-      },
-      { signal }
-    )
-    window.addEventListener(
-      'pointerup',
-      () => {
-        setDragging(false)
-        controller.abort()
+        dragWidthRef.current = next
+        setDragWidth(next)
       },
       { signal }
     )
+    const finish = () => {
+      const finalWidth = dragWidthRef.current
+      setDragging(false)
+      setDragWidth(null)
+      dragWidthRef.current = null
+      controller.abort()
+      if (finalWidth !== null) updateAttributes({ width: String(finalWidth) })
+    }
+    window.addEventListener('pointerup', finish, { signal })
+    window.addEventListener('pointercancel', finish, { signal })
   }
 
-  const widthStyle = attrs.width
-    ? { width: /^\d+$/.test(attrs.width) ? `${attrs.width}px` : attrs.width }
+  const committedWidth = attrs.width
+    ? /^\d+$/.test(attrs.width)
+      ? `${attrs.width}px`
+      : attrs.width
     : undefined
+  const widthStyle =
+    dragWidth !== null
+      ? { width: `${dragWidth}px` }
+      : committedWidth
+        ? { width: committedWidth }
+        : undefined
 
   // Sanitize the linked-image target before rendering the anchor — a parsed markdown href is
   // untrusted and could be `javascript:`/`data:`; an unsafe value drops the link (image only).
   const safeHref = normalizeLinkHref(typeof attrs.href === 'string' ? attrs.href : '')
 
   // Read-only: no drag-to-reorder and no resize handle — both call updateAttributes / dispatch a move,
   // mutating a doc that must not change. The image still renders (and follows its link on click).
-  const editable = editor.isEditable
+  const editable = useEditorEditable(editor)
 
   const image = (
     <img
@@ -233,9 +252,13 @@ function ResizableImageView({ node, updateAttributes, selected, editor }: ReactN
       draggable={editable}
       data-drag-handle={editable ? '' : undefined}
       style={widthStyle}
+      onError={() => setFailed(true)}
+      onLoad={() => setFailed(false)}
       className={cn(
         'block max-w-full rounded-lg border border-[var(--border)]',
-        editable && 'cursor-grab'
+        editable && 'cursor-grab',
+        failed &&
+          'min-h-[72px] min-w-[140px] bg-[var(--surface-5)] p-3 text-[var(--text-muted)] text-caption'
       )}
     />
   )
@@ -275,4 +298,28 @@ export const ResizableImage = MarkdownImage.extend({
   addNodeView() {
     return ReactNodeViewRenderer(ResizableImageView)
   },
+  /**
+   * Guarantee a plain click on the image forms a node selection. The image body is also a native drag
+   * source (grab-anywhere reorder), and while prosemirror-view ≥1.32.4 no longer implicitly selects on
+   * drag, the reverse — a click reliably selecting — is not guaranteed for an atom whose body competes
+   * with the drag gesture (see the ProseMirror "Draggable and NodeViews" discussion and TipTap #4526).
+   * Selecting here makes it deterministic while leaving drag-to-reorder intact. Read-only clicks and
+   * modified clicks (Cmd/Ctrl to follow a linked badge, Shift/Alt to extend) fall through to the editor's
+   * `handleClick` / default behavior.
+   */
+  addProseMirrorPlugins() {
+    const nodeName = this.name
+    return [
+      new Plugin({
+        props: {
+          handleClickOn(view, _pos, node, nodePos, event) {
+            if (!view.editable || node.type.name !== nodeName) return false
+            if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return false
+            view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, nodePos)))
+            return true
+          },
+        },
+      }),
+    ]
+  },
 })

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

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react'
+import type { Editor } from '@tiptap/react'
+
+/**
+ * Reactively tracks `editor.isEditable` for React node views.
+ *
+ * The editor runs with `shouldRerenderOnTransaction: false`, and `editor.setEditable()` updates the
+ * option + re-applies view state but does NOT change any node-view prop — so a node view that reads
+ * `editor.isEditable` once at render keeps a stale value after the editability toggles (e.g. an agent
+ * stream settling into the doc). That leaves images showing no drag/resize/selection affordances and
+ * code blocks stuck on their read-only label until the node happens to re-render. Subscribing to the
+ * editor's `transaction`/`update` events re-reads the flag so the node view stays in sync.
+ */
+export function useEditorEditable(editor: Editor): boolean {
+  const [editable, setEditable] = useState(editor.isEditable)
+  useEffect(() => {
+    const sync = () => setEditable(editor.isEditable)
+    sync()
+    editor.on('transaction', sync)
+    editor.on('update', sync)
+    return () => {
+      editor.off('transaction', sync)
+      editor.off('update', sync)
+    }
+  }, [editor])
+  return editable
+}