Merge branch 'main' into patterns-tab

website/src/repl/Repl.css

@@ -57,3 +57,7 @@
 #code .cm-foldGutter {
   display: none !important;
 }
+
+#code .cm-focused {
+  outline: none;
+}

website/src/repl/Repl.jsx

@@ -23,6 +23,7 @@ import { settingPatterns } from '../settings.mjs';
 import { code2hash, hash2code } from './helpers.mjs';
 import { isTauri } from '../tauri.mjs';
 import { useWidgets } from '@strudel.cycles/react/src/hooks/useWidgets.mjs';
+import { writeText } from '@tauri-apps/api/clipboard';
 
 const { latestCode } = settingsMap.get();
 
@@ -124,7 +125,9 @@ export function Repl({ embedded = false }) {
     fontSize,
     fontFamily,
     isLineNumbersDisplayed,
+    isActiveLineHighlighted,
     isAutoCompletionEnabled,
+    isTooltipEnabled,
     isLineWrappingEnabled,
     panelPosition,
     isZen,
@@ -272,7 +275,11 @@ export function Repl({ embedded = false }) {
     if (!error) {
       setLastShared(activeCode || code);
       // copy shareUrl to clipboard
-      await navigator.clipboard.writeText(shareUrl);
+      if (isTauri()) {
+        await writeText(shareUrl);
+      } else {
+        await navigator.clipboard.writeText(shareUrl);
+      }
       const message = `Link copied to clipboard: ${shareUrl}`;
       alert(message);
       // alert(message);
@@ -331,7 +338,9 @@ export function Repl({ embedded = false }) {
               value={code}
               keybindings={keybindings}
               isLineNumbersDisplayed={isLineNumbersDisplayed}
+              isActiveLineHighlighted={isActiveLineHighlighted}
               isAutoCompletionEnabled={isAutoCompletionEnabled}
+              isTooltipEnabled={isTooltipEnabled}
               isLineWrappingEnabled={isLineWrappingEnabled}
               fontSize={fontSize}
               fontFamily={fontFamily}

website/src/repl/panel/Reference.jsx

@@ -3,17 +3,31 @@ const visibleFunctions = jsdocJson.docs
   .filter(({ name, description }) => name && !name.startsWith('_') && !!description)
   .sort((a, b) => /* a.meta.filename.localeCompare(b.meta.filename) +  */ a.name.localeCompare(b.name));
 
+const getInnerText = (html) => {
+  var div = document.createElement('div');
+  div.innerHTML = html;
+  return div.textContent || div.innerText || '';
+};
+
 export function Reference() {
   return (
     <div className="flex h-full w-full pt-2 text-foreground overflow-hidden">
       <div className="w-42 flex-none h-full overflow-y-auto overflow-x-hidden pr-4">
         {visibleFunctions.map((entry, i) => (
-          <a key={i} className="cursor-pointer block hover:bg-lineHighlight py-1 px-4" href={`#doc-${i}`}>
+          <a
+            key={i}
+            className="cursor-pointer block hover:bg-lineHighlight py-1 px-4"
+            onClick={() => {
+              const el = document.getElementById(`doc-${i}`);
+              const container = document.getElementById('reference-container');
+              container.scrollTo(0, el.offsetTop);
+            }}
+          >
             {entry.name} {/* <span className="text-gray-600">{entry.meta.filename}</span> */}
           </a>
         ))}
       </div>
-      <div className="break-normal w-full h-full overflow-auto pl-4 flex relative">
+      <div className="break-normal w-full h-full overflow-auto pl-4 flex relative" id="reference-container">
         <div className="prose dark:prose-invert max-w-full pr-4">
           <h2>API Reference</h2>
           <p>
@@ -24,8 +38,14 @@ export function Reference() {
             <section key={i}>
               <h3 id={`doc-${i}`}>{entry.name}</h3>
               {/* <small>{entry.meta.filename}</small> */}
-
               <p dangerouslySetInnerHTML={{ __html: entry.description }}></p>
+              <ul>
+                {entry.params?.map(({ name, type, description }, i) => (
+                  <li key={i}>
+                    {name} : {type.names?.join(' | ')} {description ? <> - {getInnerText(description)}</> : ''}
+                  </li>
+                ))}
+              </ul>
               {entry.examples?.map((example, j) => (
                 <pre key={j}>{example}</pre>
               ))}

website/src/repl/panel/SettingsTab.jsx

@@ -78,7 +78,9 @@ export function SettingsTab() {
     theme,
     keybindings,
     isLineNumbersDisplayed,
+    isActiveLineHighlighted,
     isAutoCompletionEnabled,
+    isTooltipEnabled,
     isLineWrappingEnabled,
     fontSize,
     fontFamily,
@@ -130,7 +132,7 @@ export function SettingsTab() {
         <ButtonGroup
           value={keybindings}
           onChange={(keybindings) => settingsMap.setKey('keybindings', keybindings)}
-          items={{ codemirror: 'Codemirror', vim: 'Vim', emacs: 'Emacs' }}
+          items={{ codemirror: 'Codemirror', vim: 'Vim', emacs: 'Emacs', vscode: 'VSCode' }}
         ></ButtonGroup>
       </FormItem>
       <FormItem label="Panel Position">
@@ -146,11 +148,26 @@ export function SettingsTab() {
           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="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)}
           value={isAutoCompletionEnabled}
         />
+        <Checkbox
+          label="Enable tooltips on Ctrl and hover"
+          onChange={(cbEvent) => settingsMap.setKey('isTooltipEnabled', cbEvent.target.checked)}
+          value={isTooltipEnabled}
+        />
         <Checkbox
           label="Enable line wrapping"
           onChange={(cbEvent) => settingsMap.setKey('isLineWrappingEnabled', cbEvent.target.checked)}