diff --git a/skyvern-frontend/src/routes/workflows/components/BlockCodeEditor.tsx b/skyvern-frontend/src/routes/workflows/components/BlockCodeEditor.tsx
index c1053ff5..abc06b8c 100644
--- a/skyvern-frontend/src/routes/workflows/components/BlockCodeEditor.tsx
+++ b/skyvern-frontend/src/routes/workflows/components/BlockCodeEditor.tsx
@@ -112,7 +112,7 @@ function BlockCodeEditor({
(null);
+
const extensions = language
? [getLanguageExtension(language), lineWrap ? EditorView.lineWrapping : []]
: [lineWrap ? EditorView.lineWrapping : []];
const style: React.CSSProperties = { fontSize };
-
if (fullHeight) {
extensions.push(fullHeightExtension);
style.height = "100%";
}
+ useEffect(() => {
+ const view = viewRef.current;
+ if (!view) {
+ return;
+ }
+
+ const el = view.scrollDOM; // this is the .cm-scroller element
+
+ const onWheel = (e: WheelEvent) => {
+ if (e.ctrlKey || e.metaKey) return;
+
+ const factor =
+ e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? el.clientHeight : 1;
+ const dy = e.deltaY * factor;
+ const dx = e.deltaX * factor;
+
+ const top = el.scrollTop;
+ const left = el.scrollLeft;
+ const maxY = el.scrollHeight - el.clientHeight;
+ const maxX = el.scrollWidth - el.clientWidth;
+
+ const atTop = top <= 0;
+ const atBottom = top >= maxY - 1;
+ const atLeft = left <= 0;
+ const atRight = left >= maxX - 1;
+
+ const verticalWouldScroll = (dy < 0 && !atTop) || (dy > 0 && !atBottom);
+ const horizontalWouldScroll = (dx < 0 && !atLeft) || (dx > 0 && !atRight);
+
+ if (verticalWouldScroll || horizontalWouldScroll) {
+ e.stopPropagation();
+ }
+ };
+
+ el.addEventListener("wheel", onWheel, { passive: true, capture: true });
+
+ return () => el.removeEventListener("wheel", onWheel, { capture: true });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [viewRef.current]);
+
return (
{
+ viewRef.current = view;
+ }}
+ onUpdate={(viewUpdate) => {
+ if (!viewRef.current) viewRef.current = viewUpdate.view;
+ }}
/>
);
}
diff --git a/skyvern-frontend/src/routes/workflows/components/code-mirror-overrides.css b/skyvern-frontend/src/routes/workflows/components/code-mirror-overrides.css
new file mode 100644
index 00000000..ed9520f0
--- /dev/null
+++ b/skyvern-frontend/src/routes/workflows/components/code-mirror-overrides.css
@@ -0,0 +1,7 @@
+.cm-editor {
+ height: 100% !important;
+}
+
+.cm-scroller {
+ overflow: auto !important;
+}