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; +}