✨ text search

src/renderer/components/Editor/Editor.css

@@ -37,6 +37,129 @@
   opacity: 0.6;
 }
 
+/* ── CodeMirror search panel ──────────────────────────────────── */
+
+.cm-panels-top {
+  border-bottom: 1px solid var(--border);
+  background: var(--sidebar-bg);
+}
+
+.cm-panel.cm-search {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 5px 8px;
+  padding: 7px 12px;
+  font-family: var(--font-sans);
+  font-size: 13px;
+  color: var(--text-secondary);
+  background: var(--sidebar-bg);
+}
+
+/* Hide the <br> CM inserts — we handle the row break via ::after */
+.cm-search br { display: none; }
+
+/* ::after creates a full-width flex item that forces the replace
+   row (order ≥ 10) onto a new line                               */
+.cm-panel.cm-search::after {
+  content: '';
+  flex-basis: 100%;
+  height: 0;
+  order: 9;
+}
+
+/* Close button pinned to the top-right corner of the panel       */
+.cm-panel.cm-search {
+  position: relative;
+  padding-right: 36px;
+}
+
+/* ── Replace row (order 10–12) ── */
+.cm-search input[name="replace"]     { order: 10; }
+.cm-search button[name="replace"]    { order: 11; }
+.cm-search button[name="replaceAll"] { order: 12; }
+
+.cm-search .cm-textfield {
+  background: var(--input-bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text-primary);
+  padding: 3px 8px;
+  font-family: var(--font-sans);
+  font-size: 13px;
+  outline: none;
+  min-width: 160px;
+}
+
+.cm-search .cm-textfield:focus {
+  border-color: var(--accent);
+}
+
+.cm-search .cm-button {
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text-secondary);
+  padding: 3px 9px;
+  font-family: var(--font-sans);
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.cm-search .cm-button:hover {
+  background: var(--hover-bg);
+  color: var(--text-primary);
+  border-color: var(--accent);
+}
+
+.cm-search label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--text-muted);
+  cursor: pointer;
+  user-select: none;
+}
+
+.cm-search label input[type="checkbox"] {
+  accent-color: var(--accent);
+  cursor: pointer;
+}
+
+/* Close button — pinned top-right */
+.cm-search button[name="close"] {
+  position: absolute;
+  top: 6px;
+  right: 8px;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 3px;
+}
+
+.cm-search button[name="close"]:hover {
+  background: var(--hover-bg);
+  color: var(--text-primary);
+}
+
+/* Search match highlights in the document */
+.cm-searchMatch {
+  background: rgba(167, 139, 95, 0.25);
+  border-radius: 2px;
+  outline: 1px solid rgba(167, 139, 95, 0.4);
+}
+
+.cm-searchMatch.cm-searchMatch-selected {
+  background: rgba(167, 139, 95, 0.55);
+  outline: 1px solid var(--accent);
+}
+
 /* ── Annotation hover tooltip ─────────────────────────────────── */
 
 /* Strip CodeMirror's default tooltip chrome */

src/renderer/components/Editor/MarkdownEditor.tsx

@@ -4,6 +4,7 @@ import { EditorState, StateField, StateEffect, Annotation, RangeSetBuilder, Comp
 import { markdown } from '@codemirror/lang-markdown'
 import { syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language'
 import { history, defaultKeymap, historyKeymap, invertedEffects, selectAll, indentLess } from '@codemirror/commands'
+import { search, searchKeymap } from '@codemirror/search'
 import { marked } from 'marked'
 import DOMPurify from 'dompurify'
 import { useEditorStore } from '../../store/editorStore'
@@ -375,6 +376,7 @@ export function MarkdownEditor(): JSX.Element {
         doc: '',
         extensions: [
           history(),
+          search({ top: true }),
           keymap.of([
             {
               key: 'Tab',
@@ -384,6 +386,7 @@ export function MarkdownEditor(): JSX.Element {
               }
             },
             { key: 'Shift-Tab', run: indentLess },
+            ...searchKeymap,
             ...defaultKeymap,
             ...historyKeymap
           ]),

vite.demo.config.ts

@@ -12,6 +12,7 @@ export default defineConfig({
   plugins: [react()],
   server: {
     port: 5174,
+    host: '127.0.0.1',
     open: false
   }
 })