@marimo-team/frontend 0.14.18-dev3 → 0.14.18-dev31

package/src/components/editor/controls/command-palette.tsx

@@ -0,0 +1,210 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { atom, useAtom, useAtomValue } from "jotai";
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@/components/ui/command";
+import { lastFocusedCellAtom } from "@/core/cells/focus";
+import { hotkeysAtom } from "@/core/config/config";
+import { type HotkeyAction, isHotkeyAction } from "@/core/hotkeys/hotkeys";
+import { parseShortcut } from "@/core/hotkeys/shortcuts";
+import { useEventListener } from "@/hooks/useEventListener";
+import { Objects } from "@/utils/objects";
+import { useRegisteredActions } from "../../../core/hotkeys/actions";
+import { useRecentCommands } from "../../../hooks/useRecentCommands";
+import { KeyboardHotkeys } from "../../shortcuts/renderShortcut";
+import {
+  type ActionButton,
+  flattenActions,
+  isParentAction,
+} from "../actions/types";
+import { useCellActionButtons } from "../actions/useCellActionButton";
+import { useConfigActions } from "../actions/useConfigActions";
+import { useNotebookActions } from "../actions/useNotebookActions";
+
+export const commandPaletteAtom = atom(false);
+
+export const CommandPalette = () => {
+  const [open, setOpen] = useAtom(commandPaletteAtom);
+  const registeredActions = useRegisteredActions();
+  const lastFocusedCell = useAtomValue(lastFocusedCellAtom);
+  const hotkeys = useAtomValue(hotkeysAtom);
+  // Cell actions
+  let cellActions = useCellActionButtons({ cell: lastFocusedCell }).flat();
+  cellActions = flattenActions(cellActions);
+  // Notebook actions
+  const configActions = useConfigActions();
+  let notebookActions = useNotebookActions();
+  notebookActions = [
+    ...flattenActions(notebookActions),
+    ...flattenActions(configActions),
+  ];
+
+  const notebookActionsWithoutHotkeys = notebookActions.filter(
+    (action) => !action.hotkey,
+  );
+  const keyedNotebookActions: Record<string, ActionButton | undefined> =
+    Objects.keyBy(notebookActionsWithoutHotkeys, (action) => action.label);
+
+  const { recentCommands, addRecentCommand } = useRecentCommands();
+  const recentCommandsSet = new Set(recentCommands);
+
+  useEventListener(document, "keydown", (e) => {
+    if (parseShortcut(hotkeys.getHotkey("global.commandPalette").key)(e)) {
+      e.preventDefault();
+      setOpen((open) => !open);
+    }
+  });
+
+  const renderShortcutCommandItem = (
+    shortcut: HotkeyAction,
+    props: {
+      disabled?: boolean;
+      tooltip?: React.ReactNode;
+    },
+  ) => {
+    const action = registeredActions[shortcut];
+    if (!action) {
+      return null;
+    }
+    const hotkey = hotkeys.getHotkey(shortcut);
+
+    return (
+      <CommandItem
+        disabled={props.disabled}
+        onSelect={() => {
+          addRecentCommand(shortcut);
+          // Close first and then run the action, so the dialog doesn't steal focus
+          setOpen(false);
+          requestAnimationFrame(() => {
+            action();
+          });
+        }}
+        key={shortcut}
+        value={hotkey.name}
+      >
+        <span>
+          {hotkey.name}
+          {props.tooltip && <span className="ml-2">{props.tooltip}</span>}
+        </span>
+        <CommandShortcut>
+          <KeyboardHotkeys shortcut={hotkey.key} />
+        </CommandShortcut>
+      </CommandItem>
+    );
+  };
+
+  const renderCommandItem = ({
+    label,
+    handle,
+    props = {},
+    hotkey,
+  }: {
+    label: string;
+    handle: () => void;
+    props?: { disabled?: boolean; tooltip?: React.ReactNode };
+    hotkey?: HotkeyAction;
+  }) => {
+    return (
+      <CommandItem
+        disabled={props.disabled}
+        onSelect={() => {
+          addRecentCommand(label);
+          setOpen(false);
+          requestAnimationFrame(() => {
+            handle();
+          });
+        }}
+        key={label}
+        value={label}
+      >
+        <span>
+          {label}
+          {props.tooltip && <span className="ml-2">({props.tooltip})</span>}
+        </span>
+        {hotkey && (
+          <CommandShortcut>
+            <KeyboardHotkeys shortcut={hotkeys.getHotkey(hotkey).key} />
+          </CommandShortcut>
+        )}
+      </CommandItem>
+    );
+  };
+
+  return (
+    <CommandDialog open={open} onOpenChange={setOpen}>
+      <CommandInput placeholder="Type to search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        {recentCommands.length > 0 && (
+          <>
+            <CommandGroup heading="Recently Used">
+              {recentCommands.map((shortcut) => {
+                const action = keyedNotebookActions[shortcut];
+                // Hotkey
+                if (isHotkeyAction(shortcut)) {
+                  return renderShortcutCommandItem(shortcut, {
+                    disabled: action?.disabled,
+                    tooltip: action?.tooltip,
+                  });
+                }
+                // Other action
+                if (action && !isParentAction(action)) {
+                  return renderCommandItem({
+                    label: action.label,
+                    handle: action.handleHeadless || action.handle,
+                    props: {
+                      disabled: action.disabled,
+                      tooltip: action.tooltip,
+                    },
+                  });
+                }
+                return null;
+              })}
+            </CommandGroup>
+            <CommandSeparator />
+          </>
+        )}
+        <CommandGroup heading="Commands">
+          {hotkeys.iterate().map((shortcut) => {
+            if (recentCommandsSet.has(shortcut)) {
+              return null; // Don't show recent commands in the main list
+            }
+            const action = keyedNotebookActions[shortcut];
+            return renderShortcutCommandItem(shortcut, {
+              disabled: action?.disabled,
+              tooltip: action?.tooltip,
+            });
+          })}
+          {notebookActionsWithoutHotkeys.map((action) => {
+            if (recentCommandsSet.has(action.label)) {
+              return null; // Don't show recent commands in the main list
+            }
+            return renderCommandItem({
+              label: action.label,
+              handle: action.handleHeadless || action.handle,
+              props: { disabled: action.disabled, tooltip: action.tooltip },
+            });
+          })}
+          {cellActions.map((action) => {
+            if (recentCommandsSet.has(action.label)) {
+              return null; // Don't show recent commands in the main list
+            }
+            return renderCommandItem({
+              label: `Cell > ${action.label}`,
+              handle: action.handleHeadless || action.handle,
+              props: { disabled: action.disabled, tooltip: action.tooltip },
+            });
+          })}
+        </CommandGroup>
+      </CommandList>
+    </CommandDialog>
+  );
+};

package/src/components/editor/controls/keyboard-shortcuts.tsx

@@ -0,0 +1,309 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { atom, useAtom, useAtomValue } from "jotai";
+import { EditIcon, XIcon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Kbd } from "@/components/ui/kbd";
+import { hotkeysAtom, useResolvedMarimoConfig } from "@/core/config/config";
+import type { UserConfig } from "@/core/config/config-schema";
+import {
+  getDefaultHotkey,
+  type HotkeyAction,
+  type HotkeyGroup,
+} from "@/core/hotkeys/hotkeys";
+import { isPlatformMac } from "@/core/hotkeys/shortcuts";
+import { useRequestClient } from "@/core/network/requests";
+import { useHotkey } from "../../../hooks/useHotkey";
+import { KeyboardHotkeys } from "../../shortcuts/renderShortcut";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+} from "../../ui/dialog";
+
+export const keyboardShortcutsAtom = atom(false);
+
+export const KeyboardShortcuts: React.FC = () => {
+  const [isOpen, setIsOpen] = useAtom(keyboardShortcutsAtom);
+  const [editingShortcut, setEditingShortcut] = useState<HotkeyAction | null>(
+    null,
+  );
+  const [newShortcut, setNewShortcut] = useState<string[]>([]);
+  const [config, setConfig] = useResolvedMarimoConfig();
+  const hotkeys = useAtomValue(hotkeysAtom);
+  const { saveUserConfig } = useRequestClient();
+
+  useHotkey("global.showHelp", () => setIsOpen((v) => !v));
+
+  const saveConfigOptimistic = async (newConfig: UserConfig) => {
+    const prevConfig = { ...config };
+    setConfig(newConfig);
+    await saveUserConfig({ config: newConfig }).catch((error) => {
+      setConfig(prevConfig);
+      throw error;
+    });
+  };
+
+  const handleNewShortcut = async (shortcut: string[]) => {
+    if (!editingShortcut) {
+      return;
+    }
+
+    const shortcutString = shortcut.join("-");
+    const newConfig = {
+      ...config,
+      keymap: {
+        ...config.keymap,
+        overrides: {
+          ...config.keymap.overrides,
+          [editingShortcut]: shortcutString,
+        },
+      },
+    };
+
+    setEditingShortcut(null);
+    setNewShortcut([]);
+    await saveConfigOptimistic(newConfig);
+  };
+
+  const handleResetShortcut = async () => {
+    if (!editingShortcut) {
+      return;
+    }
+
+    const newConfig = {
+      ...config,
+      keymap: {
+        ...config.keymap,
+        overrides: {
+          ...config.keymap.overrides,
+        },
+      },
+    };
+
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+    delete newConfig.keymap.overrides[editingShortcut];
+
+    setEditingShortcut(null);
+    setNewShortcut([]);
+    await saveConfigOptimistic(newConfig);
+  };
+
+  const handleResetAllShortcuts = async () => {
+    if (
+      !window.confirm(
+        "Are you sure you want to reset all shortcuts to their default values?",
+      )
+    ) {
+      return;
+    }
+
+    const newConfig = {
+      ...config,
+      keymap: {
+        ...config.keymap,
+        overrides: {},
+      },
+    };
+
+    setEditingShortcut(null);
+    setNewShortcut([]);
+    await saveConfigOptimistic(newConfig);
+  };
+
+  if (!isOpen) {
+    return null;
+  }
+
+  const renderItem = (action: HotkeyAction) => {
+    const hotkey = hotkeys.getHotkey(action);
+
+    if (editingShortcut === action) {
+      const defaultHotkey = getDefaultHotkey(action);
+      return (
+        <div key={action}>
+          <Input
+            defaultValue={newShortcut.join("+")}
+            placeholder={hotkey.name}
+            onKeyDown={(e) => {
+              e.preventDefault();
+              const next: string[] = [];
+
+              // Skip if the key is a modifier key
+              if (
+                e.key === "Meta" ||
+                e.key === "Control" ||
+                e.key === "Alt" ||
+                e.key === "Shift"
+              ) {
+                return;
+              }
+
+              if (e.metaKey) {
+                next.push(isPlatformMac() ? "Cmd" : "Meta");
+              }
+              if (e.ctrlKey) {
+                next.push("Ctrl");
+              }
+              if (e.altKey) {
+                next.push("Alt");
+              }
+              if (e.shiftKey) {
+                next.push("Shift");
+              }
+
+              // We don't allow `-` to be a shortcut key, since it's used to
+              // separate keys in the shortcut string
+              if (e.key === "-") {
+                return;
+              }
+              // If escape is pressed, without any modifier keys, cancel editing
+              // We don't allow escape to be a shortcut key along, since it's used to
+              // remove focus from many elements
+              if (e.key === "Escape" && next.length === 0) {
+                setEditingShortcut(null);
+                setNewShortcut([]);
+                return;
+              }
+
+              let key = e.key.toLowerCase();
+              // Handle edge cases
+              if (e.key === " ") {
+                key = "Space";
+              }
+
+              next.push(key);
+
+              handleNewShortcut(next);
+            }}
+            autoFocus={true}
+            endAdornment={
+              <Button
+                variant="text"
+                size="xs"
+                className="mb-0"
+                onClick={() => {
+                  setEditingShortcut(null);
+                  setNewShortcut([]);
+                }}
+              >
+                <XIcon className="w-4 h-4" />
+              </Button>
+            }
+          />
+          <div className="flex items-center justify-between w-full">
+            <span className="text-muted-foreground text-xs">
+              Press a key combination
+            </span>
+            {defaultHotkey.key !== hotkey.key && (
+              <span
+                className="text-xs cursor-pointer text-primary"
+                onClick={handleResetShortcut}
+              >
+                Reset to default:{" "}
+                <span className="font-mono">{defaultHotkey.key}</span>
+              </span>
+            )}
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div
+        key={action}
+        className="grid grid-cols-[auto_2fr_3fr] gap-2 items-center"
+      >
+        {hotkeys.isEditable(action) ? (
+          <EditIcon
+            className="cursor-pointer opacity-60 hover:opacity-100 text-muted-foreground w-3 h-3"
+            onClick={() => {
+              setNewShortcut([]);
+              setEditingShortcut(action);
+            }}
+          />
+        ) : (
+          <div className="w-3 h-3" />
+        )}
+        <KeyboardHotkeys className="justify-end" shortcut={hotkey.key} />
+        <span>{hotkey.name.toLowerCase()}</span>
+      </div>
+    );
+  };
+
+  const groups = hotkeys.getHotkeyGroups();
+  const renderGroup = (group: HotkeyGroup, subHeader?: React.ReactNode) => {
+    const items = groups[group];
+    return (
+      <div className="mb-[40px] gap-2 flex flex-col">
+        <div>
+          <h3 className="text-lg font-medium">{group}</h3>
+          {subHeader}
+        </div>
+        {items.map(renderItem)}
+      </div>
+    );
+  };
+
+  const renderCommandGroup = (group: HotkeyGroup) =>
+    renderGroup(
+      group,
+      <p className="text-xs text-muted-foreground flex items-center gap-1">
+        Press{" "}
+        {config.keymap.preset === "vim" ? (
+          <>
+            <KeyboardHotkeys shortcut={isPlatformMac() ? "Cmd" : "Ctrl"} />
+            <Kbd>Esc</Kbd>
+          </>
+        ) : (
+          <Kbd>Esc</Kbd>
+        )}{" "}
+        in a cell to enter command mode
+      </p>,
+    );
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => setIsOpen(open)}>
+      {/* Manually portal so we can adjust positioning: shortcuts modal is too large to offset from top for some screens. */}
+      <DialogPortal className="sm:items-center sm:top-0">
+        <DialogOverlay />
+        <DialogContent
+          usePortal={false}
+          className="max-h-screen sm:max-h-[90vh] overflow-y-auto sm:max-w-[850px]"
+        >
+          <DialogHeader>
+            <DialogTitle>Shortcuts</DialogTitle>
+          </DialogHeader>
+          <div className="flex flex-row gap-3">
+            <div className="w-1/2">
+              {renderGroup("Editing")}
+              {renderGroup("Markdown")}
+            </div>
+
+            <div className="w-1/2">
+              {renderGroup("Navigation")}
+              {renderGroup("Running Cells")}
+              {renderGroup("Creation and Ordering")}
+              {renderCommandGroup("Command")}
+              {renderGroup("Other")}
+              <Button
+                className="mt-4 hover:bg-destructive/10 border-destructive hover:border-destructive"
+                variant="outline"
+                size="xs"
+                onClick={handleResetAllShortcuts}
+                tabIndex={-1}
+              >
+                <span className="text-destructive">Reset all to default</span>
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </DialogPortal>
+    </Dialog>
+  );
+};

package/src/components/editor/controls/notebook-menu-dropdown.tsx

@@ -0,0 +1,157 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { MenuIcon } from "lucide-react";
+import React from "react";
+import { Button } from "@/components/editor/inputs/Inputs";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Tooltip } from "@/components/ui/tooltip";
+import { getMarimoVersion } from "@/core/meta/globals";
+import {
+  MinimalShortcut,
+  renderShortcut,
+} from "../../shortcuts/renderShortcut";
+import type { ActionButton } from "../actions/types";
+import { useNotebookActions } from "../actions/useNotebookActions";
+
+interface Props {
+  disabled?: boolean;
+  tooltip?: string;
+}
+
+export const NotebookMenuDropdown: React.FC<Props> = ({
+  disabled = false,
+  tooltip = "Actions",
+}) => {
+  const actions = useNotebookActions();
+
+  // Create tooltip content with keyboard shortcut decoration
+  const tooltipContent = (
+    <div className="flex flex-col gap-2">
+      <div>{tooltip}</div>
+      {!disabled && (
+        <div className="text-xs text-muted-foreground font-medium pt-1 -mt-2 border-t border-border flex items-center gap-2">
+          <span>Open command palette</span>
+          {renderShortcut("global.commandPalette", false)}
+        </div>
+      )}
+    </div>
+  );
+
+  const button = (
+    <Button
+      aria-label="Config"
+      shape="circle"
+      size="small"
+      className="h-[27px] w-[27px]"
+      data-testid="notebook-menu-dropdown"
+      disabled={disabled}
+      color={disabled ? "disabled" : "hint-green"}
+    >
+      <Tooltip content={tooltipContent}>
+        <MenuIcon strokeWidth={1.8} />
+      </Tooltip>
+    </Button>
+  );
+
+  const renderLabel = (action: ActionButton) => {
+    return (
+      <>
+        {action.icon && <span className="flex-0 mr-2">{action.icon}</span>}
+        <span className="flex-1">{action.labelElement || action.label}</span>
+        {action.hotkey && (
+          <MinimalShortcut shortcut={action.hotkey} className="ml-4" />
+        )}
+        {action.rightElement}
+      </>
+    );
+  };
+
+  const renderLeafAction = (action: ActionButton) => {
+    const item = (
+      <DropdownMenuItem
+        key={action.label}
+        variant={action.variant}
+        disabled={action.disabled}
+        onSelect={(evt) => action.handle(evt)}
+        data-testid={`notebook-menu-dropdown-${action.label}`}
+      >
+        {renderLabel(action)}
+      </DropdownMenuItem>
+    );
+
+    if (action.tooltip) {
+      return (
+        <Tooltip
+          content={action.tooltip}
+          key={action.label}
+          side="left"
+          delayDuration={100}
+        >
+          <span>{item}</span>
+        </Tooltip>
+      );
+    }
+
+    return item;
+  };
+
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger asChild={true} disabled={disabled}>
+        {button}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="no-print w-[240px]">
+        {actions.map((action) => {
+          if (action.hidden) {
+            return null;
+          }
+
+          if (action.dropdown) {
+            return (
+              <DropdownMenuSub key={action.label}>
+                <DropdownMenuSubTrigger
+                  data-testid={`notebook-menu-dropdown-${action.label}`}
+                >
+                  {renderLabel(action)}
+                </DropdownMenuSubTrigger>
+                <DropdownMenuPortal>
+                  <DropdownMenuSubContent>
+                    {action.dropdown.map((action) => {
+                      return (
+                        <React.Fragment key={action.label}>
+                          {action.divider && <DropdownMenuSeparator />}
+                          {renderLeafAction(action)}
+                        </React.Fragment>
+                      );
+                    })}
+                  </DropdownMenuSubContent>
+                </DropdownMenuPortal>
+              </DropdownMenuSub>
+            );
+          }
+
+          return (
+            <React.Fragment key={action.label}>
+              {action.divider && <DropdownMenuSeparator />}
+              {renderLeafAction(action)}
+            </React.Fragment>
+          );
+        })}
+        <DropdownMenuSeparator />
+        <div className="flex-1 px-2 text-xs text-muted-foreground">
+          <span>Version: {getMarimoVersion()}</span>
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};