@ripla/godd-mcp 1.0.3 → 1.0.4-canary.2

package/notes-app/README.md

@@ -2,6 +2,20 @@
 
 React フロントエンド。docs/ のドキュメント閲覧・編集（Tiptap / Univer / drawio 統合予定）。
 
+## エディタ操作
+
+### スプレッドシートエディタ（CSV/テーブル）
+
+セル内で改行を入力するには、セル編集モード中に以下のショートカットを使用します：
+
+| ショートカット | 動作 |
+|---|---|
+| `Enter` | 選択セルを編集モードに開始 |
+| `Alt + Enter` | セル内に改行を挿入 |
+| `Ctrl + Enter` (Windows/Linux) | セル内に改行を挿入 |
+| `Cmd + Enter` (macOS) | セル内に改行を挿入 |
+| `Shift + Enter` | 確定して上のセルへ移動（Univer 標準） |
+
 ## 前提条件
 
 - Node.js 20+

package/notes-app/src/components/SpreadsheetEditor.test.tsx

@@ -0,0 +1,285 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, fireEvent } from "@testing-library/react";
+import SpreadsheetEditor from "./SpreadsheetEditor";
+
+const mockSyncExecuteCommand = vi.fn();
+const mockEventCallbacks: Record<string, Array<(p?: unknown) => void>> = {};
+
+const mockUniverAPI = {
+  createWorkbook: vi.fn(),
+  onCommandExecuted: vi.fn(() => ({ dispose: vi.fn() })),
+  addEvent: vi.fn((event: string, callback: (p?: unknown) => void) => {
+    mockEventCallbacks[event] ??= [];
+    mockEventCallbacks[event].push(callback);
+    return { dispose: vi.fn() };
+  }),
+  syncExecuteCommand: mockSyncExecuteCommand,
+  Event: {
+    BeforeSheetEditStart: "BeforeSheetEditStart",
+    SheetEditEnded: "SheetEditEnded",
+    BeforeCommandExecute: "BeforeCommandExecute",
+    CommandExecuted: "CommandExecuted",
+  },
+  getActiveWorkbook: vi.fn(() => ({
+    startEditing: vi.fn(),
+    getActiveSheet: vi.fn(() => ({
+      getSelection: vi.fn(() => ({
+        getActiveRange: vi.fn(() => ({
+          getRow: () => 0,
+          getColumn: () => 0,
+          getValue: () => "hello",
+        })),
+      })),
+    })),
+  })),
+};
+
+const mockUniver = { dispose: vi.fn() };
+
+vi.mock("@univerjs/presets", () => ({
+  createUniver: vi.fn(() => ({
+    univer: mockUniver,
+    univerAPI: mockUniverAPI,
+  })),
+  LocaleType: { JA_JP: "ja-JP" },
+}));
+
+vi.mock("@univerjs/preset-sheets-core", () => ({
+  UniverSheetsCorePreset: vi.fn(() => ({})),
+}));
+
+vi.mock("@univerjs/preset-sheets-core/locales/ja-JP", () => ({
+  default: {},
+}));
+
+vi.mock("@/lib/csv-utils", () => ({
+  csvToWorkbookData: vi.fn(() => ({})),
+  workbookDataToCsv: vi.fn(() => ""),
+  extractWorkbookStyles: vi.fn(() => ({ version: 1, format: "univer", styles: {}, sheets: {} })),
+  applyStylesToWorkbook: vi.fn((data: unknown) => data),
+}));
+
+describe("SpreadsheetEditor", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    for (const key of Object.keys(mockEventCallbacks)) {
+      delete mockEventCallbacks[key];
+    }
+  });
+
+  it("renders without crashing", () => {
+    render(
+      <SpreadsheetEditor
+        content="a,b\n1,2"
+        onSave={vi.fn()}
+        onCancel={vi.fn()}
+      />,
+    );
+  });
+
+  describe("cell newline insertion", () => {
+    it("inserts newline into textarea on Alt+Enter during editing", () => {
+      const { container } = render(
+        <SpreadsheetEditor
+          content="a,b\n1,2"
+          onSave={vi.fn()}
+          onCancel={vi.fn()}
+        />,
+      );
+
+      // Activate editing mode via Univer event
+      mockEventCallbacks["BeforeSheetEditStart"]?.forEach((cb) => cb());
+
+      const editorDiv = container.querySelector("div.min-h-0") as HTMLDivElement;
+      expect(editorDiv).toBeTruthy();
+
+      const textarea = document.createElement("textarea");
+      textarea.value = "hello world";
+      textarea.selectionStart = 5;
+      textarea.selectionEnd = 5;
+      editorDiv.appendChild(textarea);
+      textarea.focus();
+
+      // Simulate Alt+Enter on the container (capture phase)
+      fireEvent.keyDown(textarea, {
+        key: "Enter",
+        altKey: true,
+        shiftKey: false,
+        ctrlKey: false,
+        metaKey: false,
+        bubbles: true,
+      });
+
+      expect(textarea.value).toBe("hello\n world");
+      expect(textarea.selectionStart).toBe(6);
+      expect(textarea.selectionEnd).toBe(6);
+
+      editorDiv.removeChild(textarea);
+    });
+
+    it("inserts newline into textarea on Ctrl+Enter during editing", () => {
+      const { container } = render(
+        <SpreadsheetEditor
+          content="a,b\n1,2"
+          onSave={vi.fn()}
+          onCancel={vi.fn()}
+        />,
+      );
+
+      mockEventCallbacks["BeforeSheetEditStart"]?.forEach((cb) => cb());
+
+      const editorDiv = container.querySelector("div.min-h-0") as HTMLDivElement;
+      const textarea = document.createElement("textarea");
+      textarea.value = "abc";
+      textarea.selectionStart = 1;
+      textarea.selectionEnd = 1;
+      editorDiv.appendChild(textarea);
+      textarea.focus();
+
+      fireEvent.keyDown(textarea, {
+        key: "Enter",
+        altKey: false,
+        shiftKey: false,
+        ctrlKey: true,
+        metaKey: false,
+        bubbles: true,
+      });
+
+      expect(textarea.value).toBe("a\nbc");
+
+      editorDiv.removeChild(textarea);
+    });
+
+    it("inserts newline into textarea on Meta+Enter during editing", () => {
+      const { container } = render(
+        <SpreadsheetEditor
+          content="a,b\n1,2"
+          onSave={vi.fn()}
+          onCancel={vi.fn()}
+        />,
+      );
+
+      mockEventCallbacks["BeforeSheetEditStart"]?.forEach((cb) => cb());
+
+      const editorDiv = container.querySelector("div.min-h-0") as HTMLDivElement;
+      const textarea = document.createElement("textarea");
+      textarea.value = "xyz";
+      textarea.selectionStart = 2;
+      textarea.selectionEnd = 2;
+      editorDiv.appendChild(textarea);
+      textarea.focus();
+
+      fireEvent.keyDown(textarea, {
+        key: "Enter",
+        altKey: false,
+        shiftKey: false,
+        ctrlKey: false,
+        metaKey: true,
+        bubbles: true,
+      });
+
+      expect(textarea.value).toBe("xy\nz");
+
+      editorDiv.removeChild(textarea);
+    });
+
+    it("does not insert newline when Shift+Enter without modifier", () => {
+      const { container } = render(
+        <SpreadsheetEditor
+          content="a,b\n1,2"
+          onSave={vi.fn()}
+          onCancel={vi.fn()}
+        />,
+      );
+
+      mockEventCallbacks["BeforeSheetEditStart"]?.forEach((cb) => cb());
+
+      const editorDiv = container.querySelector("div.min-h-0") as HTMLDivElement;
+      const textarea = document.createElement("textarea");
+      textarea.value = "test";
+      textarea.selectionStart = 2;
+      textarea.selectionEnd = 2;
+      editorDiv.appendChild(textarea);
+      textarea.focus();
+
+      fireEvent.keyDown(textarea, {
+        key: "Enter",
+        altKey: false,
+        shiftKey: true,
+        ctrlKey: false,
+        metaKey: false,
+        bubbles: true,
+      });
+
+      expect(textarea.value).toBe("test");
+
+      editorDiv.removeChild(textarea);
+    });
+
+    it("does nothing when not in editing mode", () => {
+      const { container } = render(
+        <SpreadsheetEditor
+          content="a,b\n1,2"
+          onSave={vi.fn()}
+          onCancel={vi.fn()}
+        />,
+      );
+
+      // Do NOT trigger BeforeSheetEditStart — isEditing stays false
+
+      const editorDiv = container.querySelector("div.min-h-0") as HTMLDivElement;
+      const textarea = document.createElement("textarea");
+      textarea.value = "no-edit";
+      textarea.selectionStart = 3;
+      textarea.selectionEnd = 3;
+      editorDiv.appendChild(textarea);
+      textarea.focus();
+
+      fireEvent.keyDown(textarea, {
+        key: "Enter",
+        altKey: true,
+        shiftKey: false,
+        ctrlKey: false,
+        metaKey: false,
+        bubbles: true,
+      });
+
+      expect(textarea.value).toBe("no-edit");
+
+      editorDiv.removeChild(textarea);
+    });
+
+    it("does not insert newline when only Enter is pressed during editing", () => {
+      const { container } = render(
+        <SpreadsheetEditor
+          content="a,b\n1,2"
+          onSave={vi.fn()}
+          onCancel={vi.fn()}
+        />,
+      );
+
+      mockEventCallbacks["BeforeSheetEditStart"]?.forEach((cb) => cb());
+
+      const editorDiv = container.querySelector("div.min-h-0") as HTMLDivElement;
+      const textarea = document.createElement("textarea");
+      textarea.value = "plain";
+      textarea.selectionStart = 2;
+      textarea.selectionEnd = 2;
+      editorDiv.appendChild(textarea);
+      textarea.focus();
+
+      fireEvent.keyDown(textarea, {
+        key: "Enter",
+        altKey: false,
+        shiftKey: false,
+        ctrlKey: false,
+        metaKey: false,
+        bubbles: true,
+      });
+
+      expect(textarea.value).toBe("plain");
+
+      editorDiv.removeChild(textarea);
+    });
+  });
+});

package/notes-app/src/components/SpreadsheetEditor.tsx

@@ -184,6 +184,46 @@ export default function SpreadsheetEditor({
         return;
       }
 
+      // Alt+Enter / Ctrl+Enter / Cmd+Enter: insert newline in cell editor
+      if (e.key === "Enter" && !e.shiftKey && (e.altKey || e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const activeEl = document.activeElement as HTMLElement | null;
+        if (
+          activeEl &&
+          (activeEl.tagName === "TEXTAREA" ||
+            activeEl.tagName === "INPUT" ||
+            activeEl.isContentEditable)
+        ) {
+          if (activeEl.isContentEditable) {
+            const selection = window.getSelection();
+            if (selection && selection.rangeCount > 0) {
+              const range = selection.getRangeAt(0);
+              range.deleteContents();
+              const br = document.createElement("br");
+              range.insertNode(br);
+              range.setStartAfter(br);
+              range.setEndAfter(br);
+              selection.removeAllRanges();
+              selection.addRange(range);
+            }
+          } else if (
+            activeEl.tagName === "TEXTAREA" ||
+            activeEl.tagName === "INPUT"
+          ) {
+            const el = activeEl as HTMLTextAreaElement | HTMLInputElement;
+            const start = el.selectionStart ?? 0;
+            const end = el.selectionEnd ?? 0;
+            const value = el.value;
+            el.value = value.slice(0, start) + "\n" + value.slice(end);
+            el.selectionStart = el.selectionEnd = start + 1;
+            el.dispatchEvent(new Event("input", { bubbles: true }));
+          }
+        }
+        return;
+      }
+
       if (!(e.metaKey || e.altKey || e.ctrlKey)) return;
 
       // Ctrl+A / Cmd+A: select all within cell editor

package/notes-app/src/components/TreeNode.tsx

@@ -11,6 +11,7 @@ type TreeNodeProps = {
   entry: TreeEntry;
   depth: number;
   selected: string | null;
+  activeDir?: string | null;
   onSelect: (path: string) => void;
   onContextMenu?: (e: React.MouseEvent, entry: TreeEntry) => void;
   onMoveFile?: (oldPath: string, newParentDir: string) => void;
@@ -23,6 +24,7 @@ export default function TreeNode({
   entry,
   depth,
   selected,
+  activeDir,
   onSelect,
   onContextMenu,
   onMoveFile,
@@ -78,6 +80,7 @@ export default function TreeNode({
   }
 
   if (entry.type === "dir") {
+    const isActiveDir = activeDir === entry.path;
     return (
       <div>
         <button
@@ -93,7 +96,11 @@ export default function TreeNode({
           onDragLeave={handleDragLeave}
           onDrop={handleDrop}
           className={`w-full text-left py-1 px-2 text-sm rounded flex items-center gap-1 transition-colors ${
-            dropOver ? "bg-blue-700/40 ring-1 ring-blue-500" : "hover:bg-gray-700"
+            dropOver
+              ? "bg-blue-700/40 ring-1 ring-blue-500"
+              : isActiveDir
+                ? "bg-blue-600/30 text-blue-200"
+                : "hover:bg-gray-700"
           }`}
           style={{ paddingLeft: pl }}
         >
@@ -112,6 +119,7 @@ export default function TreeNode({
               entry={child}
               depth={depth + 1}
               selected={selected}
+              activeDir={activeDir}
               onSelect={onSelect}
               onContextMenu={onContextMenu}
               onMoveFile={onMoveFile}

package/notes-app/src/pages/MainPage.tsx

@@ -795,18 +795,19 @@ export default function MainPage() {
                     </p>
                   </div>
                   {filteredTree.map((entry) => (
-                    <TreeNode
-                      key={entry.path}
-                      entry={entry}
-                      depth={0}
-                      selected={selectedFile}
-                      onSelect={handleFileSelectResponsive}
-                      onContextMenu={handleTreeContextMenu}
-                      onMoveFile={handleMoveFile}
-                      onFolderClick={handleFolderClick}
-                      canDrag={false}
-                      collapseKey={collapseKey}
-                    />
+                  <TreeNode
+                    key={entry.path}
+                    entry={entry}
+                    depth={0}
+                    selected={selectedFile}
+                    activeDir={activeDir}
+                    onSelect={handleFileSelectResponsive}
+                    onContextMenu={handleTreeContextMenu}
+                    onMoveFile={handleMoveFile}
+                    onFolderClick={handleFolderClick}
+                    canDrag={false}
+                    collapseKey={collapseKey}
+                  />
                   ))}
                 </div>
               )}
@@ -818,6 +819,7 @@ export default function MainPage() {
                     entry={entry}
                     depth={0}
                     selected={selectedFile}
+                    activeDir={activeDir}
                     onSelect={handleFileSelectResponsive}
                     onContextMenu={handleTreeContextMenu}
                     onMoveFile={handleMoveFile}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ripla/godd-mcp",
-  "version": "1.0.3",
+  "version": "1.0.4-canary.2",
   "type": "module",
   "description": "GoDD MCP Server - AI-powered development workflow tools via Model Context Protocol (slash commands support)",
   "main": "dist/index.js",