Merge remote-tracking branch 'upstream/main' into line_wrap

packages/react/src/components/CodeMirror6.jsx

@@ -2,12 +2,12 @@ import React, { useMemo } from 'react';
 import _CodeMirror from '@uiw/react-codemirror';
 import { EditorView, Decoration } from '@codemirror/view';
 import { StateField, StateEffect } from '@codemirror/state';
-import { javascript } from '@codemirror/lang-javascript';
+import { javascript, javascriptLanguage } from '@codemirror/lang-javascript';
 import strudelTheme from '../themes/strudel-theme';
 import './style.css';
 import { useCallback } from 'react';
 import { autocompletion } from '@codemirror/autocomplete';
-//import { strudelAutocomplete } from './Autocomplete';
+import { strudelAutocomplete } from './Autocomplete';
 import { vim } from '@replit/codemirror-vim';
 import { emacs } from '@replit/codemirror-emacs';
 
@@ -92,10 +92,8 @@ const staticExtensions = [
   javascript(),
   highlightField,
   flashField,
+  javascriptLanguage.data.of({ autocomplete: strudelAutocomplete }),
   EditorView.lineWrapping,
-  // javascriptLanguage.data.of({ autocomplete: strudelAutocomplete }),
-  // autocompletion({ override: [strudelAutocomplete] }),
-  autocompletion({ override: [] }), // wait for https://github.com/uiwjs/react-codemirror/pull/458
 ];
 
 export default function CodeMirror({
@@ -105,6 +103,8 @@ export default function CodeMirror({
   onSelectionChange,
   theme,
   keybindings,
+  isLineNumbersDisplayed,
+  isAutoCompletionEnabled,
   fontSize = 18,
   fontFamily = 'monospace',
   options,
@@ -116,12 +116,14 @@ export default function CodeMirror({
     },
     [onChange],
   );
+
   const handleOnCreateEditor = useCallback(
     (view) => {
       onViewChanged?.(view);
     },
     [onViewChanged],
   );
+
   const handleOnUpdate = useCallback(
     (viewUpdate) => {
       if (viewUpdate.selectionSet && onSelectionChange) {
@@ -130,16 +132,27 @@ export default function CodeMirror({
     },
     [onSelectionChange],
   );
+
   const extensions = useMemo(() => {
+    let _extensions = [...staticExtensions];
     let bindings = {
       vim,
       emacs,
     };
+
     if (bindings[keybindings]) {
-      return [...staticExtensions, bindings[keybindings]()];
+      _extensions.push(bindings[keybindings]());
     }
-    return staticExtensions;
-  }, [keybindings]);
+
+    if (isAutoCompletionEnabled) {
+      _extensions.push(javascriptLanguage.data.of({ autocomplete: strudelAutocomplete }));
+    } else {
+      _extensions.push(autocompletion({ override: [] }));
+    }
+
+    return _extensions;
+  }, [keybindings, isAutoCompletionEnabled]);
+
   return (
     <div style={{ fontSize, fontFamily }} className="w-full">
       <_CodeMirror
@@ -149,6 +162,7 @@ export default function CodeMirror({
         onCreateEditor={handleOnCreateEditor}
         onUpdate={handleOnUpdate}
         extensions={extensions}
+        basicSetup={{ lineNumbers: isLineNumbersDisplayed }}
       />
     </div>
   );

packages/react/src/components/MiniRepl.jsx

@@ -18,16 +18,24 @@ export function MiniRepl({
   tune,
   hideOutsideView = false,
   enableKeyboard,
+  onTrigger,
   drawTime,
   punchcard,
+  punchcardLabels,
+  onPaint,
   canvasHeight = 200,
+  fontSize = 18,
+  fontFamily,
+  hideHeader = false,
   theme,
+  keybindings,
+  isLineNumbersDisplayed,
 }) {
   drawTime = drawTime || (punchcard ? [0, 4] : undefined);
   const evalOnMount = !!drawTime;
   const drawContext = useCallback(
-    !!drawTime ? (canvasId) => document.querySelector('#' + canvasId)?.getContext('2d') : null,
-    [drawTime],
+    punchcard ? (canvasId) => document.querySelector('#' + canvasId)?.getContext('2d') : null,
+    [punchcard],
   );
   const {
     code,
@@ -47,7 +55,18 @@ export function MiniRepl({
   } = useStrudel({
     initialCode: tune,
     defaultOutput: webaudioOutput,
-    editPattern: (pat) => (punchcard ? pat.punchcard() : pat),
+    editPattern: (pat, id) => {
+      //pat = pat.withContext((ctx) => ({ ...ctx, id }));
+      if (onTrigger) {
+        pat = pat.onTrigger(onTrigger, false);
+      }
+      if (onPaint) {
+        pat = pat.onPaint(onPaint);
+      } else if (punchcard) {
+        pat = pat.punchcard({ labels: punchcardLabels });
+      }
+      return pat;
+    },
     getTime,
     evalOnMount,
     drawContext,
@@ -82,7 +101,7 @@ export function MiniRepl({
               e.preventDefault();
               flash(view);
               await activateCode();
-            } else if (e.key === '.') {
+            } else if (e.key === '.' || e.code === 'Period') {
               stop();
               e.preventDefault();
             }
@@ -101,7 +120,7 @@ export function MiniRepl({
       // const logId = data?.pattern?.meta?.id;
       if (logId === replId) {
         setLog((l) => {
-          return l.concat([e.detail]).slice(-10);
+          return l.concat([e.detail]).slice(-8);
         });
       }
     }, []),
@@ -109,33 +128,46 @@ export function MiniRepl({
 
   return (
     <div className="overflow-hidden rounded-t-md bg-background border border-lineHighlight" ref={ref}>
-      <div className="flex justify-between bg-lineHighlight">
-        <div className="flex">
-          <button
-            className={cx(
-              'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background',
-              started ? 'animate-pulse' : '',
-            )}
-            onClick={() => togglePlay()}
-          >
-            <Icon type={started ? 'stop' : 'play'} />
-          </button>
-          <button
-            className={cx(
-              'w-16 flex items-center justify-center p-1 text-foreground border-lineHighlight bg-lineHighlight',
-              isDirty ? 'text-foreground hover:bg-background cursor-pointer' : 'opacity-50 cursor-not-allowed',
-            )}
-            onClick={() => activateCode()}
-          >
-            <Icon type="refresh" />
-          </button>
+      {!hideHeader && (
+        <div className="flex justify-between bg-lineHighlight">
+          <div className="flex">
+            <button
+              className={cx(
+                'cursor-pointer w-16 flex items-center justify-center p-1 border-r border-lineHighlight text-foreground bg-lineHighlight hover:bg-background',
+                started ? 'animate-pulse' : '',
+              )}
+              onClick={() => togglePlay()}
+            >
+              <Icon type={started ? 'stop' : 'play'} />
+            </button>
+            <button
+              className={cx(
+                'w-16 flex items-center justify-center p-1 text-foreground border-lineHighlight bg-lineHighlight',
+                isDirty ? 'text-foreground hover:bg-background cursor-pointer' : 'opacity-50 cursor-not-allowed',
+              )}
+              onClick={() => activateCode()}
+            >
+              <Icon type="refresh" />
+            </button>
+          </div>
         </div>
-        {error && <div className="text-right p-1 text-sm text-red-200">{error.message}</div>}
-      </div>
+      )}
       <div className="overflow-auto relative">
-        {show && <CodeMirror6 value={code} onChange={setCode} onViewChanged={setView} theme={theme} />}
+        {show && (
+          <CodeMirror6
+            value={code}
+            onChange={setCode}
+            onViewChanged={setView}
+            theme={theme}
+            fontFamily={fontFamily}
+            fontSize={fontSize}
+            keybindings={keybindings}
+            isLineNumbersDisplayed={isLineNumbersDisplayed}
+          />
+        )}
+        {error && <div className="text-right p-1 text-md text-red-200">{error.message}</div>}
       </div>
-      {drawTime && (
+      {punchcard && (
         <canvas
           id={canvasId}
           className="w-full pointer-events-none"

packages/react/src/components/style.css

@@ -24,3 +24,7 @@
 .cm-theme-light {
   width: 100%;
 }
+
+footer {
+  z-index: 0 !important;
+}