add setting for sync flag

website/src/repl/Repl.jsx

@@ -61,12 +61,12 @@ async function getModule(name) {
 
 export function Repl({ embedded = false }) {
   const isEmbedded = embedded || isIframe;
-  const { panelPosition, isZen } = useSettings();
+  const { panelPosition, isZen, isSyncEnabled } = useSettings();
   const init = useCallback(() => {
     const drawTime = [-2, 2];
     const drawContext = getDrawContext();
     const editor = new StrudelMirror({
-      sync: false,
+      sync: isSyncEnabled,
       defaultOutput: webaudioOutput,
       getTime: () => getAudioContext().currentTime,
       setInterval,

website/src/repl/panel/SettingsTab.jsx

@@ -88,6 +88,7 @@ export function SettingsTab({ started }) {
     isAutoCompletionEnabled,
     isTooltipEnabled,
     isFlashEnabled,
+    isSyncEnabled,
     isLineWrappingEnabled,
     fontSize,
     fontFamily,
@@ -182,6 +183,16 @@ export function SettingsTab({ started }) {
           onChange={(cbEvent) => settingsMap.setKey('isFlashEnabled', cbEvent.target.checked)}
           value={isFlashEnabled}
         />
+        <Checkbox
+          label="Sync across Browser Tabs / Windows"
+          onChange={(cbEvent) => {
+            if (confirm('Changing this setting requires the window to reload itself. OK?')) {
+              settingsMap.setKey('isSyncEnabled', cbEvent.target.checked);
+              window.location.reload();
+            }
+          }}
+          value={isSyncEnabled}
+        />
       </FormItem>
       <FormItem label="Zen Mode">Try clicking the logo in the top left!</FormItem>
       <FormItem label="Reset Settings">