feat: Prevent scroll capture in Monaco Editor with wrapper and CSS

2026-10-18 21:47:40 +00:00 · 2025-02-22 23:53:20 -06:00
parent e080d368cc
commit 9f1498b3ad
2 changed files with 32 additions and 19 deletions
@@ -10,23 +10,25 @@ type CodeExampleProps = {

 export default function CodeExample({ code, height = "100%" }: CodeExampleProps) {
    return (
-        <div className={styles.editorContainer}>
-            <Editor
-                height={height}
-                defaultLanguage="typescript"
-                defaultValue={code}
-                theme="vs-dark"
-                options={{
-                    readOnly: true,
-                    minimap: { enabled: false },
-                    fontSize: 14,
-                    lineNumbers: 'on',
-                    scrollBeyondLastLine: false,
-                    roundedSelection: false,
-                    padding: { top: 16, bottom: 16 },
-                    automaticLayout: true,
-                }}
-            />
+        <div className={styles.editorWrapper}>
+            <div className={styles.editorContainer}>
+                <Editor
+                    height={height}
+                    defaultLanguage="typescript"
+                    defaultValue={code}
+                    theme="vs-dark"
+                    options={{
+                        readOnly: true,
+                        minimap: { enabled: false },
+                        fontSize: 14,
+                        lineNumbers: 'on',
+                        scrollBeyondLastLine: false,
+                        roundedSelection: false,
+                        padding: { top: 16, bottom: 16 },
+                        automaticLayout: true,
+                    }}
+                />
+            </div>
        </div>
    );
 }