Merge pull request #804 from kasparsj/highlight-active-line-opt

add option to disable active line highlighting in Code Settings

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">

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}
+            isActiveLineHighlighted={isActiveLineHighlighted}
           />
         )}
         {error && <div className="text-right p-1 text-md text-red-200">{error.message}</div>}

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) => {

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)}

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}

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,