@plannotator/ui 0.52.1 → 0.53.1

package/hooks/useUpdateToast.ts

@@ -0,0 +1,101 @@
+import { useEffect, useRef } from 'react';
+import { toast } from 'sonner';
+import { copyTextToClipboard } from '../utils/clipboard';
+import { claimUpdateToast, describeUpdateToast, requestUpdateNow, type UpdateAdvert } from '../utils/updateNotice';
+
+/** First look after the page settles: past the first-run announcements' own 4 s window. */
+export const UPDATE_TOAST_DELAY_MS = 5_000;
+/** While something blocks it (a first-run dialog, a focused composer), look again this often. */
+const RETRY_MS = 5_000;
+/** Give up for this load after this long; the next load (or the menu) says it. */
+const GIVE_UP_MS = 120_000;
+
+function isTypingSomewhere(): boolean {
+  const el = typeof document !== 'undefined' ? document.activeElement : null;
+  if (!el || el === document.body) return false;
+  const tag = el.tagName;
+  if (tag === 'TEXTAREA' || tag === 'INPUT' || tag === 'SELECT' || (el as HTMLElement).isContentEditable) return true;
+  // An open dialog owns the screen; the toast waits for it.
+  return !!el.closest('[role="dialog"], dialog[open]');
+}
+
+/**
+ * The review windows' "a new version is out" toast (design §4.5): from the
+ * server's advert only, at most once per version and once every three days
+ * (claimUpdateToast), queued behind the first-run dialogs (`blocked`) and
+ * never while a composer or dialog has focus. A blocked attempt is not
+ * consumed: it looks again, and gives up for this load after two minutes.
+ *
+ * Actions: What's new (the release on GitHub) and, for the binary the install
+ * script manages, Update (POST /api/update runs it now); elsewhere Copy
+ * command (the right command for the host).
+ */
+export function useUpdateToast(input: {
+  advert: UpdateAdvert | null;
+  /** A first-run dialog is showing or may still show this load. */
+  blocked: boolean;
+  /** Auto-update will install it; the post-update toast speaks instead. */
+  autoUpdateActive: boolean;
+  /** A share link or archive: nobody to tell. */
+  suppressed?: boolean;
+  position?: 'top-right' | 'bottom-right';
+}): void {
+  const blockedRef = useRef(input.blocked);
+  blockedRef.current = input.blocked;
+  const shown = useRef(false);
+  const { advert, autoUpdateActive, suppressed, position } = input;
+
+  useEffect(() => {
+    if (!advert || autoUpdateActive || suppressed || shown.current) return;
+    const started = Date.now();
+    let timer: ReturnType<typeof setTimeout>;
+    const attempt = () => {
+      if (blockedRef.current || isTypingSomewhere()) {
+        if (Date.now() - started < GIVE_UP_MS) timer = setTimeout(attempt, RETRY_MS);
+        return;
+      }
+      if (!claimUpdateToast(advert.version, Date.now())) return;
+      shown.current = true;
+      const { title, description, primary } = describeUpdateToast(advert);
+      toast(title, {
+        description,
+        duration: 12_000,
+        ...(position && { position }),
+        closeButton: true,
+        cancel: {
+          label: "What's new",
+          onClick: () => window.open(advert.releaseUrl, '_blank', 'noopener,noreferrer'),
+        },
+        action:
+          primary === 'update'
+            ? {
+                label: 'Update',
+                onClick: () => {
+                  void requestUpdateNow().then((result) => {
+                    if (!("error" in result)) {
+                      toast(`Updating to ${result.version}…`, {
+                        description: 'The install script runs in the background. This review keeps working.',
+                        duration: 8_000,
+                        ...(position && { position }),
+                      });
+                    } else {
+                      toast("The update didn't start", { description: result.error, duration: 10_000, ...(position && { position }) });
+                    }
+                  });
+                },
+              }
+            : {
+                label: 'Copy command',
+                onClick: () => {
+                  void copyTextToClipboard(advert.command).then((copied) => {
+                    if (copied) toast('Command copied', { description: advert.command, duration: 4_000, ...(position && { position }) });
+                  });
+                },
+              },
+        classNames: { toast: '!w-auto', description: '!text-foreground/70 select-text' },
+      });
+    };
+    timer = setTimeout(attempt, UPDATE_TOAST_DELAY_MS);
+    return () => clearTimeout(timer);
+  }, [advert, autoUpdateActive, suppressed, position]);
+}

package/hooks/useVimSelection.ts

@@ -317,8 +317,16 @@ export function useVimSelection({
     return next;
   }, [containerRef, setState]);
 
+  // Whether vim was on since the last reset. The disabled branch below resets
+  // only when vim actually goes from on to off: on a mount where vim was never
+  // on there is nothing to reset, and `window.getSelection()` in
+  // `clearSelectionWithin` forces a layout on every document open.
+  const wasEnabledRef = useRef(enabled);
+
   useEffect(() => {
     if (!enabled) {
+      if (!wasEnabledRef.current) return;
+      wasEnabledRef.current = false;
       setState(createInitialVimSelectionState());
       setFocused(false);
       setHelpOpen(false);
@@ -326,6 +334,7 @@ export function useVimSelection({
       clearSelectionWithin(containerRef.current);
       return;
     }
+    wasEnabledRef.current = true;
     if (!focused) return;
     if (restoringFocusRef.current) {
       restoringFocusRef.current = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plannotator/ui",
-  "version": "0.52.1",
+  "version": "0.53.1",
   "license": "Apache-2.0",
   "type": "module",
   "exports": {
@@ -77,7 +77,7 @@
     "@lezer/highlight": "^1.2.3",
     "@pierre/diffs": "1.3.6",
     "@plannotator/atomic-editor": "^0.9.0",
-    "@plannotator/core": "0.25.12",
+    "@plannotator/core": "0.25.13",
     "@plannotator/markdown-editor": "^0.5.0",
     "@plannotator/web-highlighter": "^0.8.1",
     "@tanstack/react-table": "^8.21.3",

package/shortcuts/code-review/markdownPreview.shortcuts.ts

@@ -0,0 +1,18 @@
+import { defineShortcutScope } from '../core';
+import { createShortcutScopeHook } from '../runtime';
+
+export const reviewMarkdownPreviewShortcuts = defineShortcutScope({
+  id: 'review-markdown-preview',
+  title: 'Markdown Files',
+  shortcuts: {
+    cycleMarkdownView: {
+      description: 'Show the current Markdown file as Source, Changes or Read (next view)',
+      bindings: ['P'],
+      section: 'Markdown Files',
+      hint: 'The open file, or in All files the file at the top of the view. New and deleted files have no Changes view. Markdown files you have not set by hand follow your choice.',
+      displayOrder: 10,
+    },
+  },
+});
+
+export const useReviewMarkdownPreviewShortcuts = createShortcutScopeHook(reviewMarkdownPreviewShortcuts);

package/shortcuts/index.ts

@@ -34,3 +34,4 @@ export { reviewAllFilesDiffShortcuts, useReviewAllFilesDiffShortcuts } from './c
 export { reviewAiShortcuts, useReviewAiShortcuts } from './code-review/ai.shortcuts';
 export { reviewSuggestionModalShortcuts, useReviewSuggestionModalShortcuts } from './code-review/suggestionModal.shortcuts';
 export { reviewTourDialogShortcuts, useReviewTourDialogShortcuts } from './code-review/tourDialog.shortcuts';
+export { reviewMarkdownPreviewShortcuts, useReviewMarkdownPreviewShortcuts } from './code-review/markdownPreview.shortcuts';

package/shortcuts/runtime.ts

@@ -27,6 +27,12 @@ export interface UseShortcutScopeOptions<TScope extends ShortcutScopeDefinition<
   handlers: ShortcutHandlers<TScope>;
   target?: ShortcutEventTarget;
   stopOnMatch?: boolean;
+  /**
+   * Listen in the capture phase: the scope sees a key before the focused
+   * element does (a guard that must run before a component's own handler).
+   * Default false (bubble), so a component that used the key first can say so.
+   */
+  capture?: boolean;
 }
 
 interface ShortcutSequenceCandidate {
@@ -123,6 +129,7 @@ export function useShortcutScope<TScope extends ShortcutScopeDefinition<any>>({
   handlers,
   target = 'window',
   stopOnMatch = true,
+  capture = false,
 }: UseShortcutScopeOptions<TScope>) {
   const handlersRef = useRef(handlers);
   const sequenceRef = useRef<ShortcutSequenceState | null>(null);
@@ -206,11 +213,11 @@ export function useShortcutScope<TScope extends ShortcutScopeDefinition<any>>({
       if (started.length > 0) keyboardEvent.preventDefault();
     };
 
-    eventTarget.addEventListener('keydown', handleKeyDown);
+    eventTarget.addEventListener('keydown', handleKeyDown, capture);
     return () => {
-      eventTarget.removeEventListener('keydown', handleKeyDown);
+      eventTarget.removeEventListener('keydown', handleKeyDown, capture);
     };
-  }, [scope, stopOnMatch, target]);
+  }, [scope, stopOnMatch, target, capture]);
 }
 
 export function createShortcutScopeHook<TScope extends ShortcutScopeDefinition<any>>(scope: TScope) {