Add customizable scroll padding

Author: jonpyt

package/src/code-block.css

@@ -2,6 +2,7 @@ pre.prism-code-editor {
 	tab-size: var(--tab-size);
 	-webkit-user-select: auto;
 	user-select: auto;
+	--_sp: 0;
 }
 
 code.pce-wrapper {

package/src/layout.css

@@ -6,7 +6,8 @@
 	--_pse: var(--padding-inline, 0.75em);
 	--_ns: var(--number-spacing, 0.75em);
 	--padding-left: var(--_pse);
-	scroll-padding-left: var(--padding-left);
+	--_sp: var(--pce-scroll-padding, 2ch);
+	scroll-padding: var(--_sp);
 	-webkit-user-select: none;
 	user-select: none;
 	isolation: isolate;
@@ -15,6 +16,7 @@
 
 .show-line-numbers {
 	--padding-left: calc(var(--_pse) + var(--number-width) + var(--_ns));
+	scroll-padding-left: calc(var(--padding-left) + var(--_sp));
 	grid: 1fr / 0 1fr;
 }
 

package/src/rtl-layout.css

@@ -1,6 +1,9 @@
 .pce-rtl.pce-rtl {
 	direction: rtl;
-	scroll-padding: 0 var(--padding-left) 0 0;
+}
+
+.pce-rtl.show-line-numbers {
+	scroll-padding: var(--_sp) calc(var(--padding-left) + var(--_sp)) var(--_sp) var(--_sp);
 }
 
 .pce-rtl.pce-rtl::before,

package/src/utils/local.ts

@@ -1,18 +1,17 @@
 import { PrismEditor } from "../index.js"
-import { addListener, doc } from "../core.js"
+import { addListener } from "../core.js"
 import { isChrome } from "./index.js"
 import { PrismCodeBlock } from "../client/code-block.js"
 
 const scrollToEl = (editor: PrismEditor, el: HTMLElement, paddingTop = 0) => {
-	const style1 = editor.container.style,
-		style2 = doc!.documentElement.style
+	const style = editor.container.style
 
-	style1.scrollPaddingBlock = style2.scrollPaddingBlock = `${paddingTop}px ${
+	style.scrollPaddingBlock = `calc(var(--_sp) + ${paddingTop}px) calc(var(--_sp) + ${
 		isChrome && !el.textContent ? el.offsetHeight : 0
-	}px`
+	}px)`
 
 	el.scrollIntoView({ block: "nearest" })
-	style1.scrollPaddingBlock = style2.scrollPaddingBlock = ""
+	style.scrollPaddingBlock = ""
 }
 
 const getLineStart = (text: string, position: number) =>

react-package/src/utils/local.ts

@@ -7,15 +7,14 @@ const voidlessLangs = new Set("xml,rss,atom,jsx,tsx,xquery,xeora,xeoracube,actio
 const voidTags = /^(?:area|base|w?br|col|embed|hr|img|input|link|meta|source|track)$/i
 
 const scrollToEl = (editor: PrismEditor, el: HTMLElement, paddingTop = 0) => {
-	const style1 = editor.container!.style
-	const style2 = doc!.documentElement.style
+	const style = editor.container!.style
 
-	style1.scrollPaddingBlock = style2.scrollPaddingBlock = `${paddingTop}px ${
+	style.scrollPaddingBlock = `calc(var(--_sp) + ${paddingTop}px) calc(var(--_sp) + ${
 		isChrome && !el.textContent ? el.offsetHeight : 0
-	}px`
+	}px)`
 
 	el.scrollIntoView({ block: "nearest" })
-	style1.scrollPaddingBlock = style2.scrollPaddingBlock = ""
+	style.scrollPaddingBlock = ""
 }
 
 const getLineStart = (text: string, position: number) =>

solid-package/src/utils/local.ts

@@ -1,21 +1,20 @@
 import { PrismEditor } from "../types"
-import { addListener, doc } from "../core"
+import { addListener } from "../core"
 import { isChrome } from "."
 import { PrismCodeBlock } from "../code-block"
 
 const voidlessLangs = new Set("xml,rss,atom,jsx,tsx,xquery,xeora,xeoracube,actionscript".split(","))
 const voidTags = /^(?:area|base|w?br|col|embed|hr|img|input|link|meta|source|track)$/i
 
 const scrollToEl = (editor: PrismEditor, el: HTMLElement, paddingTop = 0) => {
-	const style1 = editor.container.style
-	const style2 = doc!.documentElement.style
+	const style = editor.container.style
 
-	style1.scrollPaddingBlock = style2.scrollPaddingBlock = `${paddingTop}px ${
+	style.scrollPaddingBlock = `calc(var(--_sp) + ${paddingTop}px) calc(var(--_sp) + ${
 		isChrome && !el.textContent ? el.offsetHeight : 0
-	}px`
+	}px)`
 
 	el.scrollIntoView({ block: "nearest" })
-	style1.scrollPaddingBlock = style2.scrollPaddingBlock = ""
+	style.scrollPaddingBlock = ""
 }
 
 const getLineStart = (text: string, position: number) =>