Merge branch 'main' into main

Author: mhmmdsmdi

apps/desktop/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zennotes/desktop",
   "productName": "ZenNotes",
-  "version": "2.35.0",
+  "version": "2.36.0",
   "description": "ZenNotes desktop shell",
   "private": true,
   "main": "./out/main/index.js",

apps/server/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zennotes/server",
   "private": true,
-  "version": "2.35.0",
+  "version": "2.36.0",
   "scripts": {
     "dev": "node ../../tooling/scripts/run-go-server-dev.mjs",
     "prepare-web": "node ../../tooling/scripts/prepare-server-web-dist.mjs",

apps/web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zennotes/web",
   "private": true,
-  "version": "2.35.0",
+  "version": "2.36.0",
   "type": "module",
   "description": "ZenNotes web client for self-hosted and hosted deployments",
   "homepage": "https://zennotes.org",

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "zennotes-monorepo",
   "private": true,
-  "version": "2.35.0",
+  "version": "2.36.0",
   "description": "ZenNotes monorepo for desktop, web, and self-hosted server builds",
   "packageManager": "npm@10.9.2",
   "engines": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zennotes/app-core",
   "private": true,
-  "version": "2.35.0",
+  "version": "2.36.0",
   "type": "module",
   "exports": {
     "./main": "./src/main.tsx"

packages/app-core/package.json

@@ -132,6 +132,8 @@ import {
 } from '../lib/cm-wikilinks'
 import { linkRangeAtCursor, markdownLinkAt } from '../lib/internal-links'
 import { setBlockType, toggleWrap, wrapLink } from '../lib/cm-format'
+import { shouldShowSelectionToolbar } from '../lib/cm-selection-toolbar'
+import { editorCursorPosition } from '../lib/editor-cursor-position'
 import { EditorSelectionToolbar } from './EditorSelectionToolbar'
 import { appMarkdownSnippetExtension } from '../lib/markdown-snippets-config'
 import { LazyDiagramTabView, LazyPreview as Preview } from './LazyPreview'
@@ -197,7 +199,7 @@ import {
   recallTabScroll,
   type TabScrollPosition
 } from '../lib/tab-scroll-memory'
-import { parseOutline } from '../lib/outline'
+import { activeOutlineLineForCursor, parseOutline } from '../lib/outline'
 import {
   findRenderedHeadingForOutlineLine,
   nextOutlinePreviewSyncLockUntil,
@@ -750,6 +752,7 @@ function selectionEdgeCoords(view: EditorView): {
 }
 
 function getSelectionCommentAction(view: EditorView): SelectionCommentAction {
+  if (!shouldShowSelectionToolbar(view, useStore.getState().vimMode)) return null
   const sel = view.state.selection.main
   const active = document.activeElement
   // Keep the toolbar up while the editor holds the selection OR while the user
@@ -842,6 +845,9 @@ export function EditorPane({ pane }: { pane: PaneLeaf }): JSX.Element {
   const setActiveCommentId = useStore((s) => s.setActiveCommentId)
 
   const setEditorViewRef = useStore((s) => s.setEditorViewRef)
+  const activeEditorCursorPosition = useStore((s) =>
+    isActive ? s.editorCursorPosition : null
+  )
   const sidebarOpen = useStore((s) => s.sidebarOpen)
   const zenMode = useStore((s) => s.zenMode)
   const toggleSidebar = useStore((s) => s.toggleSidebar)
@@ -1627,23 +1633,8 @@ export function EditorPane({ pane }: { pane: PaneLeaf }): JSX.Element {
       setActiveOutlineLineSafely(null)
       return
     }
-    // Probe ~25% down the viewport (capped) so a heading is considered
-    // active once it scrolls into the upper portion of the visible area
-    // — not only after it has scrolled past the very top edge.
-    const rect = view.scrollDOM.getBoundingClientRect()
-    const probeY = rect.top + Math.min(140, rect.height * 0.25)
-    const pos = view.posAtCoords({ x: rect.left + 8, y: probeY })
-    if (pos == null) {
-      setActiveOutlineLineSafely(null)
-      return
-    }
-    const probeLine = view.state.doc.lineAt(pos).number
-    let activeLine: number | null = null
-    for (const item of outlineItems) {
-      if (item.line <= probeLine) activeLine = item.line
-      else break
-    }
-    setActiveOutlineLineSafely(activeLine)
+    const cursorLine = view.state.doc.lineAt(view.state.selection.main.head).number
+    setActiveOutlineLineSafely(activeOutlineLineForCursor(outlineItems, cursorLine))
   }, [outlineItems, setActiveOutlineLineSafely])
 
   const computeActiveFromPreview = useCallback(() => {
@@ -1974,6 +1965,12 @@ export function EditorPane({ pane }: { pane: PaneLeaf }): JSX.Element {
             if (upd.viewportChanged || upd.geometryChanged) {
               schedulePreviewSyncFromEditorViewport()
             }
+            if (
+              (upd.selectionSet || upd.docChanged) &&
+              useStore.getState().editorViewRef === upd.view
+            ) {
+              useStore.getState().setEditorCursorPosition(editorCursorPosition(upd.state))
+            }
             if (!upd.docChanged) return
             if (upd.transactions.some((tr: Transaction) => tr.annotation(programmatic))) return
             const path = viewPathRef.current
@@ -3488,10 +3485,8 @@ export function EditorPane({ pane }: { pane: PaneLeaf }): JSX.Element {
     focusEditorNormalMode()
   }, [applyPaneMode, mode])
 
-  // Track the topmost-visible heading and surface it as the active
-  // outline item. We listen on whichever surface is the user's scroll
-  // target for the current mode — split mode follows the editor since
-  // that's where typing happens.
+  // Editing follows the cursor so keyboard motion updates the Outline even
+  // when the viewport barely moves. Preview mode remains scroll-driven.
   useEffect(() => {
     if (!outlineOpen) {
       setActiveOutlineLineSafely(null)
@@ -3512,6 +3507,7 @@ export function EditorPane({ pane }: { pane: PaneLeaf }): JSX.Element {
       }
     }
   }, [
+    activeEditorCursorPosition?.line,
     computeActiveFromEditor,
     content?.path,
     mode,

packages/app-core/src/components/EditorPane.tsx

@@ -6,6 +6,8 @@ import { describe, expect, it } from "vitest";
 import { formatRelativeSyncTime } from "../lib/cloud-auto-sync";
 import { useCloudSyncStatusStore } from "../lib/cloud-auto-sync";
 import { StatusBar } from "./StatusBar";
+import { useStore } from "../store";
+import type { NoteContent } from "@shared/ipc";
 
 (
   globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
@@ -95,4 +97,39 @@ describe("cloud sync status time", () => {
     act(() => root.unmount());
     host.remove();
   });
+
+  it("shows the active editor line and column on the right (discussion #597)", () => {
+    useCloudSyncStatusStore.setState({ phase: "hidden" });
+    useStore.setState({
+      notes: [],
+      editorCursorPosition: { line: 3, column: 5 },
+    });
+    const note = {
+      path: "inbox/editor-position.md",
+      title: "Editor position",
+      folder: "inbox",
+      siblingOrder: 0,
+      createdAt: 0,
+      updatedAt: 0,
+      size: 16,
+      tags: [],
+      wikilinks: [],
+      assetEmbeds: [],
+      hasAttachments: false,
+      excerpt: "alpha",
+      body: "alpha\nbeta\ngamma",
+    } as NoteContent;
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+
+    act(() => root.render(createElement(StatusBar, { note })));
+
+    const position = host.querySelector<HTMLElement>("[data-editor-position]");
+    expect(position?.textContent).toBe("Ln 3, Col 5");
+    expect(position?.getAttribute("aria-live")).toBeNull();
+
+    act(() => root.unmount());
+    host.remove();
+  });
 });

packages/app-core/src/components/StatusBar.test.ts

@@ -24,6 +24,7 @@ import { requestSettingsTarget } from "../lib/settings-navigation";
  */
 export function StatusBar({ note }: { note: NoteContent | null }): JSX.Element {
   const notes = useStore((s) => s.notes);
+  const cursorPosition = useStore((s) => s.editorCursorPosition);
 
   const { words, characters, minutes } = useMemo(() => {
     const body = note?.body ?? "";
@@ -69,6 +70,15 @@ export function StatusBar({ note }: { note: NoteContent | null }): JSX.Element {
             </Stat>
             <Stat>{characters.toLocaleString()} characters</Stat>
             <Stat>{minutes} min read</Stat>
+            {cursorPosition && (
+              <span
+                data-editor-position
+                className="tabular-nums"
+                title={`Line ${cursorPosition.line}, column ${cursorPosition.column}`}
+              >
+                Ln {cursorPosition.line}, Col {cursorPosition.column}
+              </span>
+            )}
           </>
         )}
       </div>

packages/app-core/src/components/StatusBar.tsx

@@ -0,0 +1,54 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it } from 'vitest'
+import { EditorState } from '@codemirror/state'
+import { EditorView } from '@codemirror/view'
+import { getCM, vim } from '@replit/codemirror-vim'
+import { shouldShowSelectionToolbar } from './cm-selection-toolbar'
+
+describe('selection toolbar in Vim mode (discussion #597)', () => {
+  const views: EditorView[] = []
+
+  afterEach(() => {
+    views.splice(0).forEach((view) => view.destroy())
+  })
+
+  function mount(): EditorView {
+    const view = new EditorView({
+      state: EditorState.create({
+        doc: 'alpha\nbeta\ngamma',
+        extensions: [vim()]
+      }),
+      parent: document.body
+    })
+    views.push(view)
+    view.focus()
+    return view
+  }
+
+  function press(view: EditorView, key: string, modifiers: KeyboardEventInit = {}): void {
+    view.contentDOM.dispatchEvent(
+      new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true, ...modifiers })
+    )
+  }
+
+  it('keeps the formatting toolbar out of normal and visual-block mode', () => {
+    const view = mount()
+
+    expect(shouldShowSelectionToolbar(view, true)).toBe(false)
+
+    press(view, 'v', { ctrlKey: true })
+    expect(getCM(view)?.state.vim?.visualBlock).toBe(true)
+    expect(shouldShowSelectionToolbar(view, true)).toBe(false)
+  })
+
+  it('still offers the toolbar for ordinary and Vim insert-mode selections', () => {
+    const view = mount()
+
+    expect(shouldShowSelectionToolbar(view, false)).toBe(true)
+
+    press(view, 'i')
+    expect(getCM(view)?.state.vim?.insertMode).toBe(true)
+    expect(shouldShowSelectionToolbar(view, true)).toBe(true)
+  })
+})