From 9a7e9942241b65cf3a17ff19747538f0519896a6 Mon Sep 17 00:00:00 2001
From: Amit Haridas <amit.wh@gmail.com>
Date: Fri, 5 Jun 2026 12:42:25 +0530
Subject: [PATCH] feat(renderer): EditorPane with empty state and CodeMirror
 rendering

---
 src/renderer/components/editor/EditorPane.tsx | 25 ++++++++++++
 tests/component/editor/EditorPane.test.tsx    | 38 +++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 src/renderer/components/editor/EditorPane.tsx
 create mode 100644 tests/component/editor/EditorPane.test.tsx

diff --git a/src/renderer/components/editor/EditorPane.tsx b/src/renderer/components/editor/EditorPane.tsx
new file mode 100644
index 0000000..59c45d9
--- /dev/null
+++ b/src/renderer/components/editor/EditorPane.tsx
@@ -0,0 +1,25 @@
+import { CodeMirrorEditor } from './CodeMirrorEditor';
+import { useEditorStore } from '@/stores/editor-store';
+
+export function EditorPane() {
+  const { buffers, activeId } = useEditorStore();
+  const buf = activeId ? buffers.get(activeId) : null;
+
+  if (!buf) {
+    return (
+      <div className="flex h-full items-center justify-center bg-background text-muted-foreground">
+        <p>No file open. Use File → Open to start.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full">
+      <CodeMirrorEditor
+        key={buf.id}
+        bufferId={buf.id}
+        initialContent={buf.content}
+      />
+    </div>
+  );
+}
diff --git a/tests/component/editor/EditorPane.test.tsx b/tests/component/editor/EditorPane.test.tsx
new file mode 100644
index 0000000..e9ad5d2
--- /dev/null
+++ b/tests/component/editor/EditorPane.test.tsx
@@ -0,0 +1,38 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@/components/theme-provider';
+import { EditorPane } from '@/components/editor/EditorPane';
+import { useEditorStore } from '@/stores/editor-store';
+import { CodeMirrorEditor } from '@/components/editor/CodeMirrorEditor';
+
+vi.mock('@/components/editor/CodeMirrorEditor', () => ({
+  CodeMirrorEditor: ({ initialContent }: { initialContent: string }) => (
+    <div data-testid="codemirror-mock">{initialContent}</div>
+  ),
+}));
+
+describe('EditorPane', () => {
+  beforeEach(() => {
+    useEditorStore.setState({ buffers: new Map(), activeId: null });
+  });
+
+  it('renders the empty state when no buffer is open', () => {
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <EditorPane />
+      </ThemeProvider>
+    );
+    expect(screen.getByText(/no file open/i)).toBeInTheDocument();
+  });
+
+  it('renders the editor when a buffer is open', () => {
+    useEditorStore.getState().openBuffer('b1', '/x.md', '# hello');
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <EditorPane />
+      </ThemeProvider>
+    );
+    expect(screen.getByTestId('codemirror-mock')).toBeInTheDocument();
+    expect(screen.getByTestId('codemirror-mock')).toHaveTextContent('# hello');
+  });
+});