diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/code-block.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/code-block.tsx index c17577c917b..7db9b1481b9 100644 --- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/code-block.tsx +++ b/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 )} {!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. @@ -179,7 +181,7 @@ function CodeBlockView({ node, updateAttributes, editor, getPos }: ReactNodeView {label} ))} - {!isMermaid && editor.isEditable && ( + {!isMermaid && editable && (