Merge branch 'main' into patterns-tab

packages/react/src/components/Autocomplete.jsx

@@ -26,7 +26,6 @@ export function Autocomplete({ doc }) {
             <pre
               className="cursor-pointer"
               onMouseDown={(e) => {
-                console.log('ola!');
                 navigator.clipboard.writeText(example);
                 e.stopPropagation();
               }}

packages/react/src/components/CodeMirror6.jsx

@@ -1,12 +1,15 @@
 import { autocompletion } from '@codemirror/autocomplete';
+import { Prec } from '@codemirror/state';
 import { javascript, javascriptLanguage } from '@codemirror/lang-javascript';
-import { EditorView } from '@codemirror/view';
+import { ViewPlugin, EditorView, keymap } from '@codemirror/view';
 import { emacs } from '@replit/codemirror-emacs';
 import { vim } from '@replit/codemirror-vim';
+import { vscodeKeymap } from '@replit/codemirror-vscode-keymap';
 import _CodeMirror from '@uiw/react-codemirror';
 import React, { useCallback, useMemo } from 'react';
 import strudelTheme from '../themes/strudel-theme';
 import { strudelAutocomplete } from './Autocomplete';
+import { strudelTooltip } from './Tooltip';
 import {
   highlightExtension,
   flashField,
@@ -30,7 +33,9 @@ export default function CodeMirror({
   theme,
   keybindings,
   isLineNumbersDisplayed,
+  isActiveLineHighlighted,
   isAutoCompletionEnabled,
+  isTooltipEnabled,
   isLineWrappingEnabled,
   fontSize = 18,
   fontFamily = 'monospace',
@@ -61,11 +66,25 @@ export default function CodeMirror({
     [onSelectionChange],
   );
 
+  const vscodePlugin = ViewPlugin.fromClass(
+    class {
+      constructor(view) {}
+    },
+    {
+      provide: (plugin) => {
+        return Prec.highest(keymap.of([...vscodeKeymap]));
+      },
+    },
+  );
+
+  const vscodeExtension = (options) => [vscodePlugin].concat(options ?? []);
+
   const extensions = useMemo(() => {
     let _extensions = [...staticExtensions];
     let bindings = {
       vim,
       emacs,
+      vscode: vscodeExtension,
     };
 
     if (bindings[keybindings]) {
@@ -78,14 +97,26 @@ export default function CodeMirror({
       _extensions.push(autocompletion({ override: [] }));
     }
 
+    if (isTooltipEnabled) {
+      _extensions.push(strudelTooltip);
+    }
+
+    _extensions.push([keymap.of({})]);
+
     if (isLineWrappingEnabled) {
       _extensions.push(EditorView.lineWrapping);
     }
 
     return _extensions;
-  }, [keybindings, isAutoCompletionEnabled, isLineWrappingEnabled]);
+  }, [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>}

packages/react/src/components/Tooltip.jsx

@@ -0,0 +1,69 @@
+import { createRoot } from 'react-dom/client';
+import { hoverTooltip } from '@codemirror/view';
+import jsdoc from '../../../../doc.json';
+import { Autocomplete } from './Autocomplete';
+
+const getDocLabel = (doc) => doc.name || doc.longname;
+
+let ctrlDown = false;
+
+// Record Control key event to trigger or block the tooltip depending on the state
+window.addEventListener(
+  'keyup',
+  function (e) {
+    if (e.key == 'Control') {
+      ctrlDown = false;
+    }
+  },
+  true,
+);
+
+window.addEventListener(
+  'keydown',
+  function (e) {
+    if (e.key == 'Control') {
+      ctrlDown = true;
+    }
+  },
+  true,
+);
+
+export const strudelTooltip = hoverTooltip(
+  (view, pos, side) => {
+    // Word selection from CodeMirror Hover Tooltip example https://codemirror.net/examples/tooltip/#hover-tooltips
+    let { from, to, text } = view.state.doc.lineAt(pos);
+    let start = pos,
+      end = pos;
+    while (start > from && /\w/.test(text[start - from - 1])) {
+      start--;
+    }
+    while (end < to && /\w/.test(text[end - from])) {
+      end++;
+    }
+    if ((start == pos && side < 0) || (end == pos && side > 0)) {
+      return null;
+    }
+    let word = text.slice(start - from, end - from);
+    // Get entry from Strudel documentation
+    let entry = jsdoc.docs.filter((doc) => getDocLabel(doc) === word)[0];
+    if (!entry) {
+      return null;
+    }
+    if (!ctrlDown) {
+      return null;
+    }
+    return {
+      pos: start,
+      end,
+      above: false,
+      arrow: true,
+      create(view) {
+        let dom = document.createElement('div');
+        dom.className = 'strudel-tooltip';
+        createRoot(dom).render(<Autocomplete doc={entry} />);
+        return { dom };
+      },
+    };
+  },
+  { hoverTime: 10 },
+);

packages/react/src/components/style.css

@@ -28,3 +28,7 @@
 footer {
   z-index: 0 !important;
 }
+
+.strudel-tooltip {
+  padding: 5px;
+}