From 13545d147bee028548ed92f672dde2a35eee3347 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 30 Jun 2023 22:37:55 +0200
Subject: [PATCH 1/3] optimize rendering

---
 website/src/repl/Repl.jsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx
index 0659473b..02e14ca3 100644
--- a/website/src/repl/Repl.jsx
+++ b/website/src/repl/Repl.jsx
@@ -9,7 +9,7 @@ import { CodeMirror, cx, flash, useHighlighting, useStrudel, useKeydown } from '
 import { getAudioContext, initAudioOnFirstClick, resetLoadedSounds, webaudioOutput } from '@strudel.cycles/webaudio';
 import { createClient } from '@supabase/supabase-js';
 import { nanoid } from 'nanoid';
-import React, { createContext, useCallback, useEffect, useState } from 'react';
+import React, { createContext, useCallback, useEffect, useState, useMemo } from 'react';
 import './Repl.css';
 import { Footer } from './Footer';
 import { Header } from './Header';
@@ -264,6 +264,11 @@ export function Repl({ embedded = false }) {
     handleShuffle,
     handleShare,
   };
+  const currentTheme = useMemo(() => themes[theme] || themes.strudelTheme, [theme]);
+  const handleViewChanged = useCallback((v) => {
+    setView(v);
+  }, []);
+
   return (
     // bg-gradient-to-t from-blue-900 to-slate-900
     // bg-gradient-to-t from-green-900 to-slate-900
@@ -278,7 +283,7 @@ export function Repl({ embedded = false }) {
         <Header context={context} />
         <section className="grow flex text-gray-100 relative overflow-auto cursor-text pb-0" id="code">
           <CodeMirror
-            theme={themes[theme] || themes.strudelTheme}
+            theme={currentTheme}
             value={code}
             keybindings={keybindings}
             isLineNumbersDisplayed={isLineNumbersDisplayed}
@@ -287,10 +292,7 @@ export function Repl({ embedded = false }) {
             fontSize={fontSize}
             fontFamily={fontFamily}
             onChange={handleChangeCode}
-            onViewChanged={(v) => {
-              setView(v);
-              // window.editorView = v;
-            }}
+            onViewChanged={handleViewChanged}
             onSelectionChange={handleSelectionChange}
           />
         </section>

From dc2ff83fa577253c85be4ca6f76258eb1271d5bd Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 30 Jun 2023 22:38:14 +0200
Subject: [PATCH 2/3] do not flash when empty

---
 packages/codemirror/codemirror.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/codemirror/codemirror.mjs b/packages/codemirror/codemirror.mjs
index a466e621..e29ae6d1 100644
--- a/packages/codemirror/codemirror.mjs
+++ b/packages/codemirror/codemirror.mjs
@@ -103,7 +103,7 @@ const flashField = StateField.define({
     try {
       for (let e of tr.effects) {
         if (e.is(setFlash)) {
-          if (e.value) {
+          if (e.value && tr.newDoc.length > 0) {
             const mark = Decoration.mark({ attributes: { style: `background-color: #FFCA2880` } });
             flash = Decoration.set([mark.range(0, tr.newDoc.length)]);
           } else {

From bd8ad1ed1b467ab3543b5ca86635411a5745a10a Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Fri, 30 Jun 2023 22:40:02 +0200
Subject: [PATCH 3/3] fix: out of range error due to rerender

---
 packages/react/src/components/CodeMirror6.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/CodeMirror6.jsx b/packages/react/src/components/CodeMirror6.jsx
index 36c7601b..fe538019 100644
--- a/packages/react/src/components/CodeMirror6.jsx
+++ b/packages/react/src/components/CodeMirror6.jsx
@@ -20,7 +20,7 @@ const flashField = StateField.define({
     try {
       for (let e of tr.effects) {
         if (e.is(setFlash)) {
-          if (e.value) {
+          if (e.value && tr.newDoc?.length?.length > 0) {
             const mark = Decoration.mark({ attributes: { style: `background-color: #FFCA2880` } });
             flash = Decoration.set([mark.range(0, tr.newDoc.length)]);
           } else {
@@ -152,6 +152,8 @@ export default function CodeMirror({
     return _extensions;
   }, [keybindings, isAutoCompletionEnabled, isLineWrappingEnabled]);
 
+  const basicSetup = useMemo(() => ({ lineNumbers: isLineNumbersDisplayed }), [isLineNumbersDisplayed]);
+
   return (
     <div style={{ fontSize, fontFamily }} className="w-full">
       <_CodeMirror
@@ -161,7 +163,7 @@ export default function CodeMirror({
         onCreateEditor={handleOnCreateEditor}
         onUpdate={handleOnUpdate}
         extensions={extensions}
-        basicSetup={{ lineNumbers: isLineNumbersDisplayed }}
+        basicSetup={basicSetup}
       />
     </div>
   );