diff --git a/src/components/Monaco/ReactMonacoEditor.tsx b/src/components/Monaco/ReactMonacoEditor.tsx index 7297ee05..ce337439 100644 --- a/src/components/Monaco/ReactMonacoEditor.tsx +++ b/src/components/Monaco/ReactMonacoEditor.tsx @@ -2,7 +2,7 @@ import { useTheme } from '@/hooks/useTheme' import { Editor, EditorProps, loader } from '@monaco-editor/react' import * as monaco from 'monaco-editor' import { EditorToolbar, ToolbarState } from './EditorToolbar' -import { useState } from 'react' +import { useMemo, useState } from 'react' import { Flex } from '@radix-ui/themes' loader.config({ monaco }) @@ -42,7 +42,7 @@ export function ReactMonacoEditor({ // Monaco automatically applies word wrap if the content length of a line is >= 10000 characters // In this case, we disable the word wrap button so Monaco's internal state is respected - const shouldEnableWordWrapButton = () => { + const shouldEnableWordWrapButton = useMemo(() => { const lineCount = editor?.getModel()?.getLineCount() if (!lineCount) return false @@ -54,14 +54,14 @@ export function ReactMonacoEditor({ } return true - } + }, [editor]) return ( {showToolbar && ( setToolbarState(state)} - actions={{ wordWrap: shouldEnableWordWrapButton() }} + actions={{ wordWrap: shouldEnableWordWrapButton }} /> )}