fix: apply editor fix also to script editor
This commit is contained in:
@@ -60,6 +60,9 @@ export const ScriptsView: React.FC<ScriptsViewProps> = ({ scriptId }) => {
|
|||||||
const [isCheckingSyntax, setIsCheckingSyntax] = useState(false);
|
const [isCheckingSyntax, setIsCheckingSyntax] = useState(false);
|
||||||
const editorRef = useRef<ScriptMonacoEditor | null>(null);
|
const editorRef = useRef<ScriptMonacoEditor | null>(null);
|
||||||
const monacoRef = useRef<ScriptMonacoRuntime | null>(null);
|
const monacoRef = useRef<ScriptMonacoRuntime | null>(null);
|
||||||
|
// Token incremented to signal Monaco to remount with fresh defaultValue.
|
||||||
|
// Prevents controlled-mode cursor jumps during typing.
|
||||||
|
const [monacoResetToken, setMonacoResetToken] = useState(0);
|
||||||
|
|
||||||
const buildCacheKey = (scriptMeta: Pick<ScriptData, 'id' | 'version'>, content: string): string => {
|
const buildCacheKey = (scriptMeta: Pick<ScriptData, 'id' | 'version'>, content: string): string => {
|
||||||
let hash = 0;
|
let hash = 0;
|
||||||
@@ -203,6 +206,7 @@ export const ScriptsView: React.FC<ScriptsViewProps> = ({ scriptId }) => {
|
|||||||
setAvailableEntrypoints(['main']);
|
setAvailableEntrypoints(['main']);
|
||||||
setEnabled(true);
|
setEnabled(true);
|
||||||
setScriptContent('');
|
setScriptContent('');
|
||||||
|
setMonacoResetToken(prev => prev + 1);
|
||||||
setIsSlugManuallyEdited(false);
|
setIsSlugManuallyEdited(false);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -217,6 +221,7 @@ export const ScriptsView: React.FC<ScriptsViewProps> = ({ scriptId }) => {
|
|||||||
setAvailableEntrypoints(['main']);
|
setAvailableEntrypoints(['main']);
|
||||||
setEnabled(true);
|
setEnabled(true);
|
||||||
setScriptContent('');
|
setScriptContent('');
|
||||||
|
setMonacoResetToken(prev => prev + 1);
|
||||||
setIsSlugManuallyEdited(false);
|
setIsSlugManuallyEdited(false);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -228,6 +233,7 @@ export const ScriptsView: React.FC<ScriptsViewProps> = ({ scriptId }) => {
|
|||||||
setEntrypoint(item.entrypoint || 'render');
|
setEntrypoint(item.entrypoint || 'render');
|
||||||
setEnabled(item.enabled ?? true);
|
setEnabled(item.enabled ?? true);
|
||||||
setScriptContent(item.content || '');
|
setScriptContent(item.content || '');
|
||||||
|
setMonacoResetToken(prev => prev + 1);
|
||||||
const normalizedExisting = toFunctionSlug(item.slug || item.title || '');
|
const normalizedExisting = toFunctionSlug(item.slug || item.title || '');
|
||||||
setIsSlugManuallyEdited(normalizedExisting !== toFunctionSlug(item.title || ''));
|
setIsSlugManuallyEdited(normalizedExisting !== toFunctionSlug(item.title || ''));
|
||||||
await refreshEntrypoints(item.content || '', item);
|
await refreshEntrypoints(item.content || '', item);
|
||||||
@@ -520,10 +526,11 @@ export const ScriptsView: React.FC<ScriptsViewProps> = ({ scriptId }) => {
|
|||||||
|
|
||||||
<div className="scripts-monaco">
|
<div className="scripts-monaco">
|
||||||
<MonacoEditor
|
<MonacoEditor
|
||||||
|
key={monacoResetToken}
|
||||||
height="100%"
|
height="100%"
|
||||||
language="python"
|
language="python"
|
||||||
theme="vs-dark"
|
theme="vs-dark"
|
||||||
value={scriptContent}
|
defaultValue={scriptContent}
|
||||||
onChange={(value) => setScriptContent(value || '')}
|
onChange={(value) => setScriptContent(value || '')}
|
||||||
onMount={handleEditorDidMount}
|
onMount={handleEditorDidMount}
|
||||||
options={{
|
options={{
|
||||||
|
|||||||
@@ -13,6 +13,7 @@ const setModelMarkersMock = vi.fn();
|
|||||||
vi.mock('@monaco-editor/react', () => ({
|
vi.mock('@monaco-editor/react', () => ({
|
||||||
default: (props: {
|
default: (props: {
|
||||||
value?: string;
|
value?: string;
|
||||||
|
defaultValue?: string;
|
||||||
onChange?: (value?: string) => void;
|
onChange?: (value?: string) => void;
|
||||||
language?: string;
|
language?: string;
|
||||||
onMount?: (editor: unknown, monaco: unknown) => void;
|
onMount?: (editor: unknown, monaco: unknown) => void;
|
||||||
@@ -34,7 +35,7 @@ vi.mock('@monaco-editor/react', () => ({
|
|||||||
return (
|
return (
|
||||||
<textarea
|
<textarea
|
||||||
aria-label="Script Content"
|
aria-label="Script Content"
|
||||||
value={props.value || ''}
|
defaultValue={props.defaultValue ?? props.value ?? ''}
|
||||||
onChange={(event) => props.onChange?.(event.target.value)}
|
onChange={(event) => props.onChange?.(event.target.value)}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
@@ -91,11 +92,13 @@ describe('ScriptsView', () => {
|
|||||||
it('loads scripts and allows editing content', async () => {
|
it('loads scripts and allows editing content', async () => {
|
||||||
render(<ScriptsView scriptId="script-1" />);
|
render(<ScriptsView scriptId="script-1" />);
|
||||||
|
|
||||||
const textarea = screen.getByLabelText('Script Content') as HTMLTextAreaElement;
|
// After script loads, Monaco remounts with new key — re-query the textarea
|
||||||
await vi.waitFor(() => {
|
await vi.waitFor(() => {
|
||||||
|
const textarea = screen.getByLabelText('Script Content') as HTMLTextAreaElement;
|
||||||
expect(textarea.value).toContain('print("hello")');
|
expect(textarea.value).toContain('print("hello")');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const textarea = screen.getByLabelText('Script Content') as HTMLTextAreaElement;
|
||||||
fireEvent.change(textarea, { target: { value: 'print("updated")' } });
|
fireEvent.change(textarea, { target: { value: 'print("updated")' } });
|
||||||
expect(textarea.value).toContain('updated');
|
expect(textarea.value).toContain('updated');
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user