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

package/src/core/codemirror/misc/__tests__/paste.test.ts

@@ -0,0 +1,239 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { describe, expect, it, vi } from "vitest";
+import {
+  type CodemirrorCellActions,
+  cellActionsState,
+} from "../../cells/state";
+import { extractCells, pasteBundle } from "../paste";
+
+describe("extractCells", () => {
+  it("returns empty array for non-marimo text", () => {
+    expect(extractCells("regular python code")).toEqual([]);
+    expect(extractCells("")).toEqual([]);
+  });
+
+  it("extracts single cell content", () => {
+    const input = `
+import marimo as mo
+app = mo.App()
+
+@app.cell
+def _():
+    x = 1
+    y = 2
+    return (x, y)
+`;
+    expect(extractCells(input)).toEqual(["x = 1\ny = 2"]);
+  });
+
+  it("extracts multiple cells", () => {
+    const input = `
+import marimo as mo
+app = mo.App()
+
+@app.cell
+def _():
+    import numpy as np
+    return np
+
+@app.cell
+def _(np):
+    data = np.array([1, 2, 3])
+    result = data * 2
+    return result
+
+if __name__ == "__main__":
+    app.run()
+`;
+    expect(extractCells(input)).toEqual([
+      "import numpy as np",
+      "data = np.array([1, 2, 3])\nresult = data * 2",
+    ]);
+  });
+
+  it("handles empty cells", () => {
+    const input = `
+@app.cell
+def _():
+    return
+
+@app.cell
+def _():
+    x = 1
+    return x
+
+@app.cell
+def _():
+    return
+`;
+    expect(extractCells(input)).toEqual(["x = 1"]);
+  });
+
+  it("preserves indentation", () => {
+    const input = `
+@app.cell
+def _():
+    if True:
+        nested = 1
+        if nested:
+            deep = 2
+    return
+`;
+    expect(extractCells(input)).toEqual([
+      "if True:\n    nested = 1\n    if nested:\n        deep = 2",
+    ]);
+  });
+
+  it("handles cells with args", () => {
+    const input = `
+@app.cell
+def named_one():
+    slider = mo.ui.slider(1, 10)
+    button = mo.ui.button("Click")
+    return slider, button
+
+@app.cell
+def named_two(slider, button):
+    mo.hstack([
+        slider,
+        button
+    ])
+    return
+`;
+    expect(extractCells(input)).toEqual([
+      'slider = mo.ui.slider(1, 10)\nbutton = mo.ui.button("Click")',
+      "mo.hstack([\n    slider,\n    button\n])",
+    ]);
+  });
+
+  it("handles cells with multi-line args", () => {
+    const input = `
+@app.cell
+def _(
+    a,
+    b,
+    c,
+):
+    x = a + b + c
+    return x
+`;
+    expect(extractCells(input)).toEqual(["x = a + b + c"]);
+  });
+
+  it("handles cells with multi-line args and return", () => {
+    const input = `
+@app.cell
+def _(
+    a,
+    b,
+    c,
+):
+    x = a + b + c
+    return (
+        x,
+        y,
+    )
+`;
+    expect(extractCells(input)).toEqual(["x = a + b + c"]);
+  });
+
+  it("handles cells with config", () => {
+    const input = `
+@app.cell(hide_code=True, column=2)
+def foo():
+    x = mo.ui.slider(1, 10)
+    return x
+`;
+    expect(extractCells(input)).toEqual(["x = mo.ui.slider(1, 10)"]);
+  });
+});
+
+// Mock ClipboardEvent and DataTransfer
+class MockDataTransfer {
+  private data: Record<string, string> = {};
+  setData(format: string, data: string) {
+    this.data[format] = data;
+  }
+  getData(format: string) {
+    return this.data[format];
+  }
+}
+
+class MockClipboardEvent extends Event {
+  clipboardData: MockDataTransfer;
+  constructor(type: string, init?: { clipboardData?: MockDataTransfer }) {
+    super(type);
+    this.clipboardData = init?.clipboardData || new MockDataTransfer();
+  }
+}
+
+describe("pasteBundle", () => {
+  it("handles pasting marimo app code", () => {
+    const createManyBelow = vi.fn();
+    const extension = pasteBundle();
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: "",
+        extensions: [
+          extension,
+          cellActionsState.of({
+            createManyBelow,
+          } as never as CodemirrorCellActions),
+        ],
+      }),
+    });
+
+    // Mount the view to a DOM element
+    // const container = document.createElement("div");
+
+    const clipboardData = new MockDataTransfer();
+    clipboardData.setData(
+      "text/plain",
+      `
+@app.cell
+def _():
+    x = 1
+    return x
+`,
+    );
+    const event = new MockClipboardEvent("paste", { clipboardData });
+
+    // HACK: manually add the paste event listener
+    // @ts-expect-error extension not typed
+    view.dom.onpaste = (evt) => extension[0].domEventHandlers.paste(evt, view);
+    view.dom.dispatchEvent(event);
+
+    expect(createManyBelow).toHaveBeenCalledWith(["x = 1"]);
+  });
+
+  it("ignores non-marimo pastes", () => {
+    const createManyBelow = vi.fn();
+    const extension = pasteBundle();
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: "",
+        extensions: [
+          extension,
+          cellActionsState.of({
+            createManyBelow,
+          } as never as CodemirrorCellActions),
+        ],
+      }),
+    });
+
+    const clipboardData = new MockDataTransfer();
+    clipboardData.setData("text/plain", "regular code");
+    const event = new MockClipboardEvent("paste", { clipboardData });
+
+    // HACK: manually add the paste event listener
+    // @ts-expect-error extension not typed
+    view.dom.onpaste = (evt) => extension[0].domEventHandlers.paste(evt, view);
+
+    view.dom.dispatchEvent(event);
+
+    expect(createManyBelow).not.toHaveBeenCalled();
+  });
+});

package/src/core/codemirror/misc/dnd.ts

@@ -0,0 +1,48 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import type { Extension } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { insertImage, insertTextFile } from "../markdown/commands";
+
+export function dndBundle(): Extension[] {
+  return [
+    EditorView.domEventHandlers({
+      drop: (event: DragEvent, view: EditorView) => {
+        // Handle files
+        const file = event.dataTransfer?.files[0];
+        if (file?.type.startsWith("text/")) {
+          event.preventDefault();
+          void insertTextFile(view, file);
+          return true;
+        }
+
+        if (file?.type.startsWith("image/")) {
+          event.preventDefault();
+          void insertImage(view, file);
+          return true;
+        }
+
+        // Handle plain text
+        const text = event.dataTransfer?.getData("text/plain");
+        if (text) {
+          event.preventDefault();
+          const pos = view.posAtCoords({
+            x: event.clientX,
+            y: event.clientY,
+          });
+          if (pos !== null) {
+            view.dispatch({
+              changes: { from: pos, to: pos, insert: text },
+              scrollIntoView: true,
+            });
+          }
+          return true;
+        }
+
+        return false;
+      },
+      dragover: (event: DragEvent) => {
+        event.preventDefault();
+      },
+    }),
+  ];
+}

package/src/core/codemirror/misc/paste.ts

@@ -0,0 +1,181 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import type { Extension } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { cellActionsState } from "../cells/state";
+
+export function pasteBundle(): Extension[] {
+  return [
+    EditorView.domEventHandlers({
+      paste: (event: ClipboardEvent, view: EditorView) => {
+        const text = event.clipboardData?.getData("text/plain");
+        if (!text?.includes("@app.cell")) {
+          return false;
+        }
+
+        const cells = extractCells(text);
+        if (cells.length === 0) {
+          return false;
+        }
+
+        const actions = view.state.facet(cellActionsState);
+        actions.createManyBelow(cells);
+        return true;
+      },
+    }),
+  ];
+}
+
+/**
+ * Extract the cells from a marimo app.
+ */
+export function extractCells(text: string): string[] {
+  // Quick check if this looks like a marimo app
+  if (!text.includes("@app.cell")) {
+    return [];
+  }
+
+  const cells: string[] = [];
+  const lines = text.split("\n");
+  let currentCell: string[] = [];
+  let inCell = false;
+  let skipLines = 0;
+  let inMultilineArgs = false;
+  let inMultilineReturn = false;
+  let parenCount = 0;
+
+  // Pre-compile regex patterns
+  const leadingParenRegex = /\(/g;
+  const trailingParenRegex = /\)/g;
+  const cellEndMarkers = new Set(["@"]);
+
+  function countParens(line: string): number {
+    return (
+      (line.match(leadingParenRegex) || []).length -
+      (line.match(trailingParenRegex) || []).length
+    );
+  }
+
+  function finalizeCellIfNeeded() {
+    if (currentCell.length === 0) {
+      return;
+    }
+
+    // Remove trailing returns
+    while (
+      currentCell.length > 0 &&
+      currentCell[currentCell.length - 1].trim().startsWith("return")
+    ) {
+      currentCell.pop();
+    }
+
+    // Only add non-empty cells
+    if (currentCell.some((l) => l.trim() !== "")) {
+      cells.push(dedent(currentCell.join("\n")));
+    }
+    currentCell = [];
+  }
+
+  for (const line of lines) {
+    const trimmed = line.trim();
+
+    // Skip empty lines between cells
+    if (!trimmed && !inCell) {
+      continue;
+    }
+
+    // Start of a new cell
+    if (trimmed.startsWith("@app.cell")) {
+      finalizeCellIfNeeded();
+      inCell = true;
+      skipLines = 1; // Skip the def line
+      continue;
+    }
+
+    // Handle function definition and args
+    if (skipLines > 0) {
+      if (
+        trimmed.startsWith("def") &&
+        trimmed.includes("(") &&
+        !trimmed.includes("):")
+      ) {
+        inMultilineArgs = true;
+        parenCount = countParens(trimmed);
+      }
+      skipLines--;
+      continue;
+    }
+
+    // Track multi-line arguments
+    if (inMultilineArgs) {
+      parenCount += countParens(trimmed);
+      if (parenCount === 0) {
+        inMultilineArgs = false;
+      }
+      continue;
+    }
+
+    if (!inCell) {
+      continue;
+    }
+
+    // Handle cell content
+    if (cellEndMarkers.has(trimmed[0]) || trimmed.startsWith("if __name__")) {
+      finalizeCellIfNeeded();
+      inCell = trimmed.startsWith("@");
+      continue;
+    }
+
+    // Handle return statements
+    if (trimmed.startsWith("return")) {
+      if (trimmed.includes("(") && !trimmed.endsWith(")")) {
+        inMultilineReturn = true;
+        parenCount = countParens(trimmed);
+      }
+      continue;
+    }
+
+    if (inMultilineReturn) {
+      parenCount += countParens(trimmed);
+      if (parenCount === 0) {
+        inMultilineReturn = false;
+      }
+      continue;
+    }
+
+    // Add line to current cell
+    currentCell.push(line);
+  }
+
+  // Handle last cell
+  finalizeCellIfNeeded();
+
+  return cells;
+}
+
+function dedent(text: string): string {
+  const lines = text.split("\n");
+  if (lines.length === 0) {
+    return "";
+  }
+
+  // Cache non-empty lines
+  const nonEmptyLines = lines.filter((line) => line.trim().length > 0);
+  if (nonEmptyLines.length === 0) {
+    return "";
+  }
+
+  const leadingSpaceRegex = /^\s*/;
+  const minIndent = Math.min(
+    ...nonEmptyLines.map(
+      (line) =>
+        line.match(leadingSpaceRegex)?.[0].length ?? Number.POSITIVE_INFINITY,
+    ),
+  );
+
+  return minIndent === 0
+    ? text.trim()
+    : lines
+        .map((line) => line.slice(minIndent))
+        .join("\n")
+        .trim();
+}

package/src/core/codemirror/placeholder/__tests__/extensions.test.ts

@@ -0,0 +1,132 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  clickablePlaceholderExtension,
+  smartPlaceholderExtension,
+} from "../extensions";
+
+describe("smartPlaceholderExtension", () => {
+  const placeholderText = "Type something...";
+  let view: EditorView;
+
+  beforeEach(() => {
+    view = new EditorView({
+      state: EditorState.create({
+        doc: "",
+        extensions: smartPlaceholderExtension(placeholderText),
+      }),
+    });
+  });
+
+  afterEach(() => {
+    view.destroy();
+  });
+
+  it("should insert placeholder on ArrowRight when empty", () => {
+    // Simulate ArrowRight key
+    const event = new KeyboardEvent("keydown", { key: "ArrowRight" });
+    view.contentDOM.dispatchEvent(event);
+
+    expect(view.state.doc.toString()).toBe(placeholderText);
+    expect(view.state.selection.main.head).toBe(placeholderText.length);
+  });
+
+  it("should insert placeholder on Tab when empty", () => {
+    // Simulate Tab key
+    const event = new KeyboardEvent("keydown", { key: "Tab" });
+    view.contentDOM.dispatchEvent(event);
+
+    expect(view.state.doc.toString()).toBe(placeholderText);
+    expect(view.state.selection.main.head).toBe(placeholderText.length);
+  });
+
+  it("should not insert placeholder when not empty", () => {
+    // Add some content
+    view.dispatch({
+      changes: { from: 0, insert: "existing content" },
+    });
+
+    // Simulate ArrowRight key
+    const event = new KeyboardEvent("keydown", { key: "ArrowRight" });
+    view.contentDOM.dispatchEvent(event);
+
+    expect(view.state.doc.toString()).toBe("existing content");
+  });
+});
+
+describe("clickablePlaceholderExtension", () => {
+  it("should create placeholder with clickable link", () => {
+    const onClick = vi.fn();
+    const opts = {
+      beforeText: "Click ",
+      linkText: "here",
+      afterText: " to continue",
+      onClick,
+    };
+
+    const extension = clickablePlaceholderExtension(opts);
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: "",
+        extensions: extension,
+      }),
+    });
+
+    // Get the placeholder element
+    const placeholder = view.dom.querySelector(".cm-placeholder")!;
+    expect(placeholder).toBeTruthy();
+
+    // Check text content
+    expect(placeholder.textContent).toBe("Click here to continue");
+
+    // Find and check the clickable link
+    const link = placeholder.querySelector(".cm-clickable-placeholder")!;
+    expect(link).toBeTruthy();
+    expect(link.textContent).toBe("here");
+
+    // Simulate click
+    (link as HTMLElement).click();
+    expect(onClick).toHaveBeenCalled();
+
+    // Check theme classes
+    expect(link.classList.contains("cm-clickable-placeholder")).toBe(true);
+
+    view.destroy();
+  });
+
+  it("should stop event propagation on link click", () => {
+    const onClick = vi.fn();
+    const opts = {
+      beforeText: "Click ",
+      linkText: "here",
+      afterText: " to continue",
+      onClick,
+    };
+
+    const extension = clickablePlaceholderExtension(opts);
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: "",
+        extensions: extension,
+      }),
+    });
+
+    // Get the link element
+    const link = view.dom.querySelector(".cm-clickable-placeholder")!;
+
+    // Create a mock event
+    const event = new MouseEvent("click");
+    const stopPropagation = vi.spyOn(event, "stopPropagation");
+
+    // Simulate click with the mock event
+    link.dispatchEvent(event);
+
+    expect(stopPropagation).toHaveBeenCalled();
+    expect(onClick).toHaveBeenCalled();
+
+    view.destroy();
+  });
+});

package/src/core/codemirror/placeholder/extensions.ts

@@ -0,0 +1,99 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import type { Extension } from "@codemirror/state";
+import { EditorView, keymap, placeholder } from "@codemirror/view";
+import { isEditorReadonly } from "../readonly/extension";
+
+/**
+ * A placeholder that will be shown when the editor is empty and support
+ * auto-complete on right arrow or Tab.
+ */
+export function smartPlaceholderExtension(text: string): Extension[] {
+  return [
+    placeholder(text),
+    keymap.of([
+      {
+        key: "ArrowRight",
+        preventDefault: true,
+        run: (cm) => acceptPlaceholder(cm, text),
+      },
+      {
+        key: "Tab",
+        preventDefault: true,
+        run: (cm) => acceptPlaceholder(cm, text),
+      },
+    ]),
+  ];
+}
+
+function acceptPlaceholder(cm: EditorView, text: string) {
+  if (isEditorReadonly(cm.state)) {
+    return false;
+  }
+
+  // if empty, insert the placeholder
+  const docLength = cm.state.doc.length;
+  if (docLength === 0) {
+    cm.dispatch({
+      changes: {
+        from: 0,
+        to: docLength,
+        insert: text,
+      },
+      selection: {
+        head: text.length,
+        anchor: text.length,
+      },
+    });
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Create a placeholder with a clickable link.
+ */
+export function clickablePlaceholderExtension(opts: {
+  beforeText: string;
+  linkText: string;
+  afterText: string;
+  onClick: (ev: EditorView) => void;
+}): Extension[] {
+  const { beforeText, linkText, afterText, onClick } = opts;
+
+  // Create a placeholder
+  // Needs to be a function to keep event listeners
+  // See https://github.com/codemirror/dev/issues/1457
+  const createPlaceholder = (ev: EditorView) => {
+    const placeholderText = document.createElement("span");
+    placeholderText.append(document.createTextNode(beforeText));
+    const link = document.createElement("span");
+    link.textContent = linkText;
+    link.classList.add("cm-clickable-placeholder");
+    link.onclick = (evt) => {
+      evt.stopPropagation();
+      onClick(ev);
+    };
+    placeholderText.append(link);
+    placeholderText.append(document.createTextNode(afterText));
+    return placeholderText;
+  };
+
+  return [
+    placeholder(createPlaceholder),
+    EditorView.theme({
+      ".cm-placeholder": {
+        color: "var(--slate-8)",
+      },
+      ".cm-clickable-placeholder": {
+        cursor: "pointer !important",
+        pointerEvents: "auto",
+        color: "var(--slate-9)",
+        textDecoration: "underline",
+        textUnderlineOffset: "0.2em",
+      },
+      ".cm-clickable-placeholder:hover": {
+        color: "var(--sky-11)",
+      },
+    }),
+  ];
+}