From ef14074164833db89e6d0dc222a1c1089faff524 Mon Sep 17 00:00:00 2001
From: Kaspars <kasparsj@gmail.com>
Date: Wed, 15 Nov 2023 22:38:00 +0100
Subject: [PATCH 1/2] add option to disable active line highlighting in Code
 Settings

---
 packages/react/src/components/CodeMirror6.jsx | 9 ++++++++-
 packages/react/src/components/MiniRepl.jsx    | 2 ++
 website/src/docs/MiniRepl.jsx                 | 3 ++-
 website/src/repl/Footer.jsx                   | 6 ++++++
 website/src/repl/Repl.jsx                     | 2 ++
 website/src/settings.mjs                      | 2 ++
 6 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/CodeMirror6.jsx b/packages/react/src/components/CodeMirror6.jsx
index 667cd7e6..4852b287 100644
--- a/packages/react/src/components/CodeMirror6.jsx
+++ b/packages/react/src/components/CodeMirror6.jsx
@@ -33,6 +33,7 @@ export default function CodeMirror({
   theme,
   keybindings,
   isLineNumbersDisplayed,
+  isActiveLineHighlighted,
   isAutoCompletionEnabled,
   isTooltipEnabled,
   isLineWrappingEnabled,
@@ -109,7 +110,13 @@ export default function CodeMirror({
     return _extensions;
   }, [keybindings, isAutoCompletionEnabled, isTooltipEnabled, isLineWrappingEnabled]);
 
-  const basicSetup = useMemo(() => ({ lineNumbers: isLineNumbersDisplayed }), [isLineNumbersDisplayed]);
+  const basicSetup = useMemo(
+    () => ({
+      lineNumbers: isLineNumbersDisplayed,
+      highlightActiveLine: isActiveLineHighlighted,
+    }),
+    [isLineNumbersDisplayed, isActiveLineHighlighted],
+  );
 
   return (
     <div style={{ fontSize, fontFamily }} className="w-full">
diff --git a/packages/react/src/components/MiniRepl.jsx b/packages/react/src/components/MiniRepl.jsx
index 12500874..edf0a325 100644
--- a/packages/react/src/components/MiniRepl.jsx
+++ b/packages/react/src/components/MiniRepl.jsx
@@ -30,6 +30,7 @@ export function MiniRepl({
   theme,
   keybindings,
   isLineNumbersDisplayed,
+  isActiveLineHighlighted,
 }) {
   drawTime = drawTime || (punchcard ? [0, 4] : undefined);
   const evalOnMount = !!drawTime;
@@ -164,6 +165,7 @@ export function MiniRepl({
             fontSize={fontSize}
             keybindings={keybindings}
             isLineNumbersDisplayed={isLineNumbersDisplayed}
+            highlightActiveLineGutter={isActiveLineHighlighted}
           />
         )}
         {error && <div className="text-right p-1 text-md text-red-200">{error.message}</div>}
diff --git a/website/src/docs/MiniRepl.jsx b/website/src/docs/MiniRepl.jsx
index 4b2fcfa8..4b37ebad 100644
--- a/website/src/docs/MiniRepl.jsx
+++ b/website/src/docs/MiniRepl.jsx
@@ -41,7 +41,7 @@ export function MiniRepl({
   claviatureLabels,
 }) {
   const [Repl, setRepl] = useState();
-  const { theme, keybindings, fontSize, fontFamily, isLineNumbersDisplayed } = useSettings();
+  const { theme, keybindings, fontSize, fontFamily, isLineNumbersDisplayed, isActiveLineHighlighted } = useSettings();
   const [activeNotes, setActiveNotes] = useState([]);
   useEffect(() => {
     // we have to load this package on the client
@@ -66,6 +66,7 @@ export function MiniRepl({
         fontFamily={fontFamily}
         fontSize={fontSize}
         isLineNumbersDisplayed={isLineNumbersDisplayed}
+        isActiveLineHighlighted={isActiveLineHighlighted}
         onPaint={
           claviature
             ? (ctx, time, haps, drawTime) => {
diff --git a/website/src/repl/Footer.jsx b/website/src/repl/Footer.jsx
index 62dcbcdf..b03f62d0 100644
--- a/website/src/repl/Footer.jsx
+++ b/website/src/repl/Footer.jsx
@@ -384,6 +384,7 @@ function SettingsTab({ scheduler }) {
     theme,
     keybindings,
     isLineNumbersDisplayed,
+    isActiveLineHighlighted,
     isAutoCompletionEnabled,
     isTooltipEnabled,
     isLineWrappingEnabled,
@@ -453,6 +454,11 @@ function SettingsTab({ scheduler }) {
           onChange={(cbEvent) => settingsMap.setKey('isLineNumbersDisplayed', cbEvent.target.checked)}
           value={isLineNumbersDisplayed}
         />
+        <Checkbox
+          label="Highlight active line"
+          onChange={(cbEvent) => settingsMap.setKey('isActiveLineHighlighted', cbEvent.target.checked)}
+          value={isActiveLineHighlighted}
+        />
         <Checkbox
           label="Enable auto-completion"
           onChange={(cbEvent) => settingsMap.setKey('isAutoCompletionEnabled', cbEvent.target.checked)}
diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index 41d4a35f..2700bcf9 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -125,6 +125,7 @@ export function Repl({ embedded = false }) {
     fontSize,
     fontFamily,
     isLineNumbersDisplayed,
+    isActiveLineHighlighted,
     isAutoCompletionEnabled,
     isTooltipEnabled,
     isLineWrappingEnabled,
@@ -335,6 +336,7 @@ export function Repl({ embedded = false }) {
               value={code}
               keybindings={keybindings}
               isLineNumbersDisplayed={isLineNumbersDisplayed}
+              isActiveLineHighlighted={isActiveLineHighlighted}
               isAutoCompletionEnabled={isAutoCompletionEnabled}
               isTooltipEnabled={isTooltipEnabled}
               isLineWrappingEnabled={isLineWrappingEnabled}
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index ab58494c..9f6d2d90 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -6,6 +6,7 @@ export const defaultSettings = {
   activeFooter: 'intro',
   keybindings: 'codemirror',
   isLineNumbersDisplayed: true,
+  isActiveLineHighlighted: true,
   isAutoCompletionEnabled: false,
   isTooltipEnabled: false,
   isLineWrappingEnabled: false,
@@ -26,6 +27,7 @@ export function useSettings() {
     ...state,
     isZen: [true, 'true'].includes(state.isZen) ? true : false,
     isLineNumbersDisplayed: [true, 'true'].includes(state.isLineNumbersDisplayed) ? true : false,
+    isActiveLineHighlighted: [true, 'true'].includes(state.isActiveLineHighlighted) ? true : false,
     isAutoCompletionEnabled: [true, 'true'].includes(state.isAutoCompletionEnabled) ? true : false,
     isTooltipEnabled: [true, 'true'].includes(state.isTooltipEnabled) ? true : false,
     isLineWrappingEnabled: [true, 'true'].includes(state.isLineWrappingEnabled) ? true : false,

From 2d1fcf4a8d1230980b4d56a70c402bcae476043b Mon Sep 17 00:00:00 2001
From: Kaspars <kasparsj@gmail.com>
Date: Wed, 15 Nov 2023 22:53:56 +0100
Subject: [PATCH 2/2] fix typo

---
 packages/react/src/components/MiniRepl.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/MiniRepl.jsx b/packages/react/src/components/MiniRepl.jsx
index edf0a325..c7f70907 100644
--- a/packages/react/src/components/MiniRepl.jsx
+++ b/packages/react/src/components/MiniRepl.jsx
@@ -165,7 +165,7 @@ export function MiniRepl({
             fontSize={fontSize}
             keybindings={keybindings}
             isLineNumbersDisplayed={isLineNumbersDisplayed}
-            highlightActiveLineGutter={isActiveLineHighlighted}
+            isActiveLineHighlighted={isActiveLineHighlighted}
           />
         )}
         {error && <div className="text-right p-1 text-md text-red-200">{error.message}</div>}