@marimo-team/islands 0.18.0 → 0.18.1

package/src/components/data-table/url-detector.tsx

@@ -1,6 +1,8 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
+import { marked } from "marked";
 import { useState } from "react";
+import { MarkdownRenderer } from "@/components/markdown/markdown-renderer";
 import {
   Popover,
   PopoverContent,
@@ -82,6 +84,47 @@ export function parseContent(text: string): ContentPart[] {
   });
 }
 
+export function isMarkdown(text: string): boolean {
+  const tokens = marked.lexer(text);
+
+  const commonMarkdownIndicators = new Set([
+    "space",
+    "code",
+    "fences",
+    "heading",
+    "hr",
+    "link",
+    "blockquote",
+    "list",
+    "html",
+    "def",
+    "table",
+    "lheading",
+    "escape",
+    "tag",
+    "reflink",
+    "strong",
+    "codespan",
+    "url",
+  ]);
+
+  return tokens.some((token) => commonMarkdownIndicators.has(token.type));
+}
+
+// Wrapper component so that we call isMarkdown only on trigger
+export const MarkdownUrlDetector = ({
+  content,
+  parts,
+}: {
+  content: string;
+  parts: ContentPart[];
+}) => {
+  if (isMarkdown(content)) {
+    return <MarkdownRenderer content={content} />;
+  }
+  return <UrlDetector parts={parts} />;
+};
+
 export const UrlDetector = ({ parts }: { parts: ContentPart[] }) => {
   const markup = parts.map((part, idx) => {
     if (part.type === "url") {

package/src/components/datasources/utils.ts

@@ -66,11 +66,13 @@ function getFormatter(dialect: string): SqlCodeFormatter {
           `SELECT ${columnName === "*" ? "*" : `"${columnName}"`} FROM ${tableName} LIMIT 100`,
       };
     case "db2":
+    case "db2i":
     case "mysql":
     case "sqlite":
     case "mariadb":
     case "cassandra":
     case "noql":
+    case "awsathena":
     case "athena":
     case "hive":
     case "redshift":
@@ -79,6 +81,11 @@ function getFormatter(dialect: string): SqlCodeFormatter {
     case "mongodb":
     case "oracle":
     case "oracledb":
+    case "couchbase":
+    case "tidb":
+    case "spark":
+    case "trino":
+    case "singlestoredb":
       return defaultFormatter;
     default:
       logNever(dialect);

package/src/components/editor/ai/ai-completion-editor.tsx

@@ -254,11 +254,14 @@ export const AiCompletionEditor: React.FC<Props> = ({
   };
 
   return (
-    <div className={cn("flex flex-col w-full rounded-[inherit]", className)}>
+    <div
+      data-ai-input-open={showInput}
+      className={cn("flex flex-col w-full rounded-[inherit]", className)}
+    >
       <div
         className={cn(
-          "flex items-center gap-2 border-b px-3 transition-all rounded-[inherit] rounded-b-none duration-300",
-          showInput && "max-h-[400px] min-h-11 visible",
+          "flex items-center gap-2 px-3 transition-all rounded-[inherit] rounded-b-none duration-300",
+          showInput && "max-h-[400px] border-b min-h-11 visible",
           !showInput && "max-h-0 min-h-0 invisible",
         )}
       >

package/src/components/editor/cell/CreateCellButton.tsx

@@ -1,12 +1,14 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 import { DatabaseIcon, DiamondPlusIcon, PlusIcon } from "lucide-react";
+import { useState } from "react";
 import { Button } from "@/components/editor/inputs/Inputs";
+import { MinimalHotkeys } from "@/components/shortcuts/renderShortcut";
 import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuTrigger,
-} from "@/components/ui/context-menu";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
 import { useCellActions } from "@/core/cells/cells";
 import { LanguageAdapters } from "@/core/codemirror/language/LanguageAdapters";
@@ -24,11 +26,17 @@ export const CreateCellButton = ({
   connectionState,
   onClick,
   tooltipContent,
+  oneClickShortcut,
 }: {
   connectionState: WebSocketState;
   tooltipContent: React.ReactNode;
   onClick: ((opts: { code: string; hideCode?: boolean }) => void) | undefined;
+  oneClickShortcut: "shift" | "mod";
 }) => {
+  const { createNewCell, addSetupCellIfDoesntExist } = useCellActions();
+  const shortcut = `${oneClickShortcut}-Click`;
+  const [justOpened, setJustOpened] = useState(false);
+
   const baseTooltipContent =
     getConnectionTooltip(connectionState) || tooltipContent;
   const finalTooltipContent = isAppInteractionDisabled(connectionState) ? (
@@ -37,107 +45,109 @@ export const CreateCellButton = ({
     <div className="flex flex-col gap-4">
       <div>{baseTooltipContent}</div>
       <div className="text-xs text-muted-foreground font-medium pt-1 -mt-2 border-t border-border">
-        Right-click for cell types
+        {<MinimalHotkeys shortcut={shortcut} className="inline" />}{" "}
+        <span>to auto insert a cell</span>
       </div>
     </div>
   );
 
+  const addPythonCell = () => {
+    onClick?.({ code: "" });
+  };
+
+  // NB: When adding the marimo import for markdown and SQL, we run it
+  // automatically regardless of whether autoinstantiate or lazy execution is
+  // enabled; the user experience is confusing otherwise (how does the user
+  // know they need to run import marimo as mo. first?).
+  const addMarkdownCell = () => {
+    maybeAddMarimoImport({ autoInstantiate: true, createNewCell });
+    onClick?.({
+      code: LanguageAdapters.markdown.defaultCode,
+      hideCode: true,
+    });
+  };
+
+  const addSQLCell = () => {
+    maybeAddMarimoImport({ autoInstantiate: true, createNewCell });
+    onClick?.({ code: LanguageAdapters.sql.defaultCode });
+  };
+
+  const addSetupCell = () => {
+    addSetupCellIfDoesntExist({});
+  };
+
+  const renderIcon = (icon: React.ReactNode) => {
+    return <div className="mr-3 text-muted-foreground">{icon}</div>;
+  };
+
+  const handleButtonClick = (e: React.MouseEvent) => {
+    if (oneClickShortcut === "shift" ? e.shiftKey : e.metaKey || e.ctrlKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      addPythonCell();
+    }
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    if (open) {
+      setJustOpened(true);
+      // Allow interactions after a brief delay
+      setTimeout(() => {
+        setJustOpened(false);
+      }, 200);
+    }
+  };
+
+  const handleFirstItemClick = (e: React.MouseEvent) => {
+    // Hack to prevent the first item from being clicked when the dropdown is opened
+    if (justOpened) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    addPythonCell();
+  };
+
   return (
-    <CreateCellButtonContextMenu onClick={onClick}>
-      <Tooltip content={finalTooltipContent}>
+    <DropdownMenu onOpenChange={handleOpenChange}>
+      <DropdownMenuTrigger asChild={true} onPointerDown={handleButtonClick}>
         <Button
-          onClick={() => onClick?.({ code: "" })}
           className={cn(
-            "shoulder-button hover-action",
+            "border-none hover-action shadow-none! bg-transparent! focus-visible:outline-none",
             isAppInteractionDisabled(connectionState) && " inactive-button",
           )}
           onMouseDown={Events.preventFocus}
-          shape="circle"
           size="small"
           color="hint-green"
           data-testid="create-cell-button"
         >
-          <PlusIcon strokeWidth={1.8} />
+          <Tooltip content={finalTooltipContent}>
+            <PlusIcon
+              strokeWidth={4}
+              size={14}
+              className="opacity-60 hover:opacity-90"
+            />
+          </Tooltip>
         </Button>
-      </Tooltip>
-    </CreateCellButtonContextMenu>
-  );
-};
-
-const CreateCellButtonContextMenu = (props: {
-  onClick: ((opts: { code: string; hideCode?: boolean }) => void) | undefined;
-  children: React.ReactNode;
-}) => {
-  const { children, onClick } = props;
-  const { createNewCell, addSetupCellIfDoesntExist } = useCellActions();
-
-  if (!onClick) {
-    return children;
-  }
-
-  // NB: When adding the marimo import for markdown and SQL, we run it
-  // automatically regardless of whether autoinstantiate or lazy execution is
-  // enabled; the user experience is confusing otherwise (how does the user
-  // know they need to run import marimo as mo. first?).
-  return (
-    <ContextMenu>
-      <ContextMenuTrigger>{children}</ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuItem
-          key="python"
-          onSelect={(evt) => {
-            evt.stopPropagation();
-            onClick({ code: "" });
-          }}
-        >
-          <div className="mr-3 text-muted-foreground">
-            <PythonIcon />
-          </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent side="bottom" sideOffset={-30}>
+        <DropdownMenuItem onClick={handleFirstItemClick}>
+          {renderIcon(<PythonIcon />)}
           Python cell
-        </ContextMenuItem>
-
-        <ContextMenuItem
-          key="markdown"
-          onSelect={(evt) => {
-            evt.stopPropagation();
-            maybeAddMarimoImport({ autoInstantiate: true, createNewCell });
-            onClick({
-              code: LanguageAdapters.markdown.defaultCode,
-              hideCode: true,
-            });
-          }}
-        >
-          <div className="mr-3 text-muted-foreground">
-            <MarkdownIcon />
-          </div>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={addMarkdownCell}>
+          {renderIcon(<MarkdownIcon />)}
           Markdown cell
-        </ContextMenuItem>
-        <ContextMenuItem
-          key="sql"
-          onSelect={(evt) => {
-            evt.stopPropagation();
-            maybeAddMarimoImport({ autoInstantiate: true, createNewCell });
-            onClick({ code: LanguageAdapters.sql.defaultCode });
-          }}
-        >
-          <div className="mr-3 text-muted-foreground">
-            <DatabaseIcon size={13} strokeWidth={1.5} />
-          </div>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={addSQLCell}>
+          {renderIcon(<DatabaseIcon size={13} strokeWidth={1.5} />)}
           SQL cell
-        </ContextMenuItem>
-        <ContextMenuItem
-          key="setup"
-          onSelect={(evt) => {
-            evt.stopPropagation();
-            addSetupCellIfDoesntExist({});
-          }}
-        >
-          <div className="mr-3 text-muted-foreground">
-            <DiamondPlusIcon size={13} strokeWidth={1.5} />
-          </div>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={addSetupCell}>
+          {renderIcon(<DiamondPlusIcon size={13} strokeWidth={1.5} />)}
           Setup cell
-        </ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 };

package/src/components/editor/chrome/panels/packages-panel.tsx

@@ -194,7 +194,7 @@ const InstallPackageForm: React.FC<{
   const installPackages = () => {
     const cleanedInput = stripPackageManagerPrefix(input);
     handleInstallPackages(
-      cleanedInput.split(",").map((p) => p.trim()),
+      [cleanedInput], // the backend will handle splitting the packages
       onSuccessInstallPackages,
     );
   };

package/src/components/editor/chrome/types.ts

@@ -14,6 +14,7 @@ import {
   type LucideIcon,
   NetworkIcon,
   NotebookPenIcon,
+  ScrollTextIcon,
   SquareDashedBottomCodeIcon,
   TextSearchIcon,
   XCircleIcon,
@@ -133,6 +134,12 @@ export const PANELS: PanelDescriptor[] = [
   // observability panels are less crucial than variables
   // or datasets, so they are positioned at the end of the
   // sidebar.
+  {
+    type: "outline",
+    Icon: ScrollTextIcon,
+    tooltip: "View outline",
+    position: "sidebar",
+  },
   {
     type: "documentation",
     Icon: TextSearchIcon,

package/src/components/editor/file-tree/__tests__/file-expolorer.test.ts

@@ -1,3 +1,4 @@
+/* Copyright 2024 Marimo. All rights reserved. */
 import { describe, expect, it } from "vitest";
 import type { FileInfo } from "@/core/network/types";
 import { filterHiddenTree, isDirectoryOrFileHidden } from "../file-explorer";

package/src/components/editor/file-tree/file-explorer.tsx

@@ -130,6 +130,11 @@ export const FileExplorer: React.FC<{
     setOpenState({});
   });
 
+  const visibleData = React.useMemo(
+    () => filterHiddenTree(data, showHiddenFiles),
+    [data, showHiddenFiles],
+  );
+
   if (isPending) {
     return <Spinner size="medium" centered={true} />;
   }
@@ -168,10 +173,6 @@ export const FileExplorer: React.FC<{
     );
   }
 
-  const visibleData = React.useMemo(
-    () => filterHiddenTree(data, showHiddenFiles),
-    [data, showHiddenFiles],
-  );
   return (
     <>
       <Toolbar
@@ -729,7 +730,7 @@ export function filterHiddenTree(
       continue;
     }
     let next = item;
-    if (item.children && item.children.length) {
+    if (item.children) {
       const kids = filterHiddenTree(item.children, showHidden);
       if (kids !== item.children) {
         next = { ...item, children: kids };

package/src/components/editor/notebook-cell.tsx

@@ -489,7 +489,7 @@ const EditableCellComponent = ({
 
   const outputArea = hasOutput && (
     <div className="relative" onDoubleClick={showHiddenCodeIfMarkdown}>
-      <div className="absolute top-5 -left-8 z-10 print:hidden">
+      <div className="absolute top-5 -left-7 z-20 print:hidden">
         <CollapseToggle
           isCollapsed={isCollapsed}
           onClick={() => {
@@ -580,8 +580,13 @@ const EditableCellComponent = ({
             ref={cellContainerRef}
             {...cellDomProps(cellId, cellData.name)}
           >
+            <CellLeftSideActions cellId={cellId} actions={actions} />
             {cellOutput === "above" && outputArea}
-            <div className={cn("tray")} data-hidden={isMarkdownCodeHidden}>
+            <div
+              className={cn("tray")}
+              data-has-output-above={hasOutputAbove}
+              data-hidden={isMarkdownCodeHidden}
+            >
               <StagedAICellBackground cellId={cellId} />
               <div className="absolute right-2 -top-4 z-10">
                 <CellToolbar
@@ -598,17 +603,6 @@ const EditableCellComponent = ({
                   onRun={runCell}
                 />
               </div>
-              <CellLeftSideActions
-                cellId={cellId}
-                className={cn(
-                  isMarkdownCodeHidden && hasOutputAbove && "-top-7",
-                  isMarkdownCodeHidden && hasOutputBelow && "-bottom-8",
-                  isMarkdownCodeHidden &&
-                    isCellButtonsInline &&
-                    "-left-[3.8rem]",
-                )}
-                actions={actions}
-              />
               <CellEditor
                 theme={theme}
                 showPlaceholder={showPlaceholder}
@@ -836,25 +830,33 @@ const CellLeftSideActions = memo(
     );
 
     const isConnected = isAppConnected(connection.state);
+    const oneClickShortcut = "mod";
 
     return (
       <div
         className={cn(
-          "absolute flex flex-col gap-[2px] justify-center h-full left-[-34px] z-20",
+          "absolute flex flex-col justify-center h-full left-[-26px] z-20 border-b-0!",
           className,
         )}
       >
-        <CreateCellButton
-          tooltipContent={renderShortcut("cell.createAbove")}
-          connectionState={connection.state}
-          onClick={isConnected ? createAbove : undefined}
-        />
-        <div className="flex-1" />
-        <CreateCellButton
-          tooltipContent={renderShortcut("cell.createBelow")}
-          connectionState={connection.state}
-          onClick={isConnected ? createBelow : undefined}
-        />
+        <div className="-mt-1 min-h-7">
+          <CreateCellButton
+            tooltipContent={renderShortcut("cell.createAbove")}
+            connectionState={connection.state}
+            onClick={isConnected ? createAbove : undefined}
+            oneClickShortcut={oneClickShortcut}
+          />
+        </div>
+        <div className="flex-1 pointer-events-none w-3" />
+        {/* <div className="flex-1 pointer-events-none bg-border w-px mx-auto hover-action opacity-70" /> */}
+        <div className="-mb-2 min-h-7">
+          <CreateCellButton
+            tooltipContent={renderShortcut("cell.createBelow")}
+            connectionState={connection.state}
+            onClick={isConnected ? createBelow : undefined}
+            oneClickShortcut={oneClickShortcut}
+          />
+        </div>
       </div>
     );
   },

package/src/components/editor/output/__tests__/ansi-reduce.test.ts

@@ -47,6 +47,14 @@ describe("TerminalBuffer", () => {
     `);
   });
 
+  test("control handles tab", () => {
+    const buffer = new TerminalBuffer();
+    buffer.writeChar("a");
+    buffer.control("\t");
+    buffer.writeChar("b");
+    expect(buffer.render()).toMatchInlineSnapshot(`"a	b"`);
+  });
+
   test("control handles carriage return", () => {
     const buffer = new TerminalBuffer();
     buffer.writeChar("a");

package/src/components/editor/output/ansi-reduce.ts

@@ -69,7 +69,7 @@ export class TerminalBuffer {
     this.cursor.col += str.length;
   }
 
-  /** Handle simple control characters (\n, \r). */
+  /** Handle simple control characters (\n, \r, \t). */
   control(ch: string) {
     switch (ch) {
       case "\n":
@@ -80,6 +80,9 @@ export class TerminalBuffer {
       case "\r":
         this.cursor.col = 0;
         break;
+      case "\t":
+        this.writeChar("\t");
+        break;
     }
   }
 
@@ -268,11 +271,11 @@ export class AnsiReducer {
       const ch = text[i];
 
       // Handle control characters
-      if (ch === "\n" || ch === "\r") {
+      if (ch === "\n" || ch === "\r" || ch === "\t") {
         // Write accumulated text before the control character
         if (i > start) {
           const segment = text.slice(start, i);
-          // Filter out characters below space (but we already have \n and \r handled)
+          // Filter out characters below space (but we already have \n, \r, \t handled)
           const filtered = this.filterControlChars(segment);
           if (filtered.length > 0) {
             this.buffer.writeString(filtered);
@@ -302,7 +305,7 @@ export class AnsiReducer {
     }
   }
 
-  /** Filter out control characters below space (except \n and \r which are handled separately). */
+  /** Filter out control characters below space (except \n, \r, \t which are handled separately). */
   private filterControlChars(text: string): string {
     // Fast path: if no control chars, return as-is
     let hasControlChars = false;

package/src/components/editor/renderers/grid-layout/grid-layout.tsx

@@ -249,6 +249,8 @@ export const GridLayoutRenderer: React.FC<Props> = ({
     </ReactGridLayout>
   );
 
+  const notInGrid = cells.filter((cell) => !inGridIds.has(cell.id));
+
   if (isReading) {
     if (layout.bordered) {
       grid = (
@@ -262,10 +264,32 @@ export const GridLayoutRenderer: React.FC<Props> = ({
         </div>
       );
     }
-    return grid;
-  }
 
-  const notInGrid = cells.filter((cell) => !inGridIds.has(cell.id));
+    const sidebarCells = notInGrid.filter((cell) => isSidebarCell(cell));
+
+    return (
+      <>
+        {grid}
+        {/* Render sidebar outputs even if they are not in grid (hidden) */}
+        <div className="hidden">
+          {sidebarCells.map((cell) => {
+            return (
+              <GridCell
+                key={cell.id}
+                code={cell.code}
+                mode={mode}
+                cellId={cell.id}
+                output={cell.output}
+                status={cell.status}
+                isScrollable={false}
+                hidden={false}
+              />
+            );
+          })}
+        </div>
+      </>
+    );
+  }
 
   if (layout.bordered) {
     grid = (
@@ -641,6 +665,14 @@ const GridHoverActions: React.FC<GridHoverActionsProps> = ({
   );
 };
 
+function isSidebarCell(cell: CellRuntimeState) {
+  // False-positives are ok here because we rendering these cells in a hidden div
+  return (
+    typeof cell.output?.data === "string" &&
+    cell.output.data.includes("marimo-sidebar")
+  );
+}
+
 const SIDE_TO_ICON = {
   // We are only showing horizontal sides for now
   // top: AlignHorizontalSpaceAroundIcon,

package/src/components/ui/table.tsx

@@ -7,7 +7,7 @@ const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="w-full overflow-auto flex-1">
+  <div className="w-full overflow-auto scrollbar-thin flex-1">
     <table
       ref={ref}
       className={cn("w-full caption-bottom text-sm", className)}