wiki-viewer 1.13.2 → 1.14.1

package/.next/standalone/src/components/editor/comment-thread.tsx

@@ -58,9 +58,10 @@ interface Props {
 	comments: Comment[];
 	anchorEl: HTMLElement | null;
 	onClose: () => void;
+	readOnly?: boolean;
 }
 
-export function CommentThread({ path, blockRef, comments, anchorEl, onClose }: Props) {
+export function CommentThread({ path, blockRef, comments, anchorEl, onClose, readOnly }: Props) {
 	const [anchor, setAnchor] = useState<{ top: number; left: number } | null>(null);
 	const [text, setText] = useState("");
 	const [busy, setBusy] = useState(false);
@@ -187,7 +188,7 @@ export function CommentThread({ path, blockRef, comments, anchorEl, onClose }: P
 						<span className="text-[11px] font-mono text-muted-foreground/60 truncate">
 							{blockRef}
 						</span>
-						{activeComment && (
+						{activeComment && !readOnly && (
 							<button
 								type="button"
 								disabled={busy}

package/.next/standalone/src/components/editor/editor.tsx

@@ -41,6 +41,7 @@ import {
 } from "./wiki-link-create-dialog";
 import { WikiLinkPicker } from "./wiki-link-picker";
 import { FrontmatterHeader } from "@/components/wiki/frontmatter-header";
+import { ViewModeCommentButton } from "./view-mode-comment-button";
 
 async function uploadFile(
 	pagePath: string,
@@ -1121,6 +1122,7 @@ export function KBEditor({ mode }: KBEditorProps = {}) {
 															void useProofStore.getState().loadSidecar(currentPath);
 															void useProofStore.getState().loadSnapshot(currentPath);
 														}}
+														readOnly={isViewing}
 													/>
 												</div>
 											);
@@ -1135,6 +1137,7 @@ export function KBEditor({ mode }: KBEditorProps = {}) {
 											comments={commentsByRef[threadTarget.blockRef] ?? []}
 											anchorEl={threadTarget.el}
 											onClose={() => setThreadTarget(null)}
+											readOnly={isViewing}
 										/>
 									)}
 
@@ -1202,7 +1205,12 @@ export function KBEditor({ mode }: KBEditorProps = {}) {
 											/>
 										</>
 									)}
-
+									{isViewing && (
+										<ViewModeCommentButton
+											containerRef={scrollContainerRef}
+											onComment={openCommentForSelection}
+										/>
+									)}
 									{/* AI Edit Prompt + slash hint */}
 									<div className="max-w-[var(--editor-max-w,48rem)] ml-[var(--editor-ml,auto)] mr-auto px-8 pb-8 flex items-center gap-4">
 										<button

package/.next/standalone/src/components/editor/suggestion-card.tsx

@@ -16,6 +16,7 @@ interface Props {
 	left: number;
 	width: number;
 	onSettled: () => void; // called after accept or reject so parent can refresh
+	readOnly?: boolean;
 }
 
 function kindVerb(kind: Suggestion["kind"]): string {
@@ -68,6 +69,7 @@ export function SuggestionCard({
 	left,
 	width,
 	onSettled,
+	readOnly,
 }: Props) {
 	const [busy, setBusy] = useState(false);
 
@@ -179,6 +181,7 @@ export function SuggestionCard({
 			</div>
 
 			{/* Actions */}
+			{!readOnly && (
 			<div className="flex items-center gap-2 px-3 py-2 border-t border-border bg-muted/30">
 				<button
 					type="button"
@@ -197,6 +200,7 @@ export function SuggestionCard({
 					Reject
 				</button>
 			</div>
+			)}
 		</div>
 	);
 }

package/.next/standalone/src/components/editor/view-mode-comment-button.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { MessageCircle } from "lucide-react";
+import { type RefObject, useEffect, useState } from "react";
+
+interface Props {
+	/** The scrollable container that wraps the editor content. */
+	containerRef: RefObject<HTMLElement | null>;
+	onComment: () => void;
+}
+
+/**
+ * Floating comment button for read-only view mode.
+ *
+ * TipTap's BubbleMenu doesn't fire when the editor is non-editable, so this
+ * component listens to the native selectionchange event and positions a small
+ * button above whatever the user has selected — as long as the selection is
+ * inside the editor container.
+ */
+export function ViewModeCommentButton({ containerRef, onComment }: Props) {
+	const [pos, setPos] = useState<{ top: number; left: number } | null>(null);
+
+	useEffect(() => {
+		function update() {
+			const sel = window.getSelection();
+			if (!sel || sel.isCollapsed || sel.rangeCount === 0) {
+				setPos(null);
+				return;
+			}
+			const range = sel.getRangeAt(0);
+			const container = containerRef.current;
+			if (!container || !container.contains(range.commonAncestorContainer)) {
+				setPos(null);
+				return;
+			}
+			const rect = range.getBoundingClientRect();
+			// rect can be all-zeros for collapsed or invisible ranges
+			if (rect.width === 0 && rect.height === 0) {
+				setPos(null);
+				return;
+			}
+			setPos({
+				top: rect.top - 38,
+				left: rect.left + rect.width / 2,
+			});
+		}
+
+		document.addEventListener("selectionchange", update);
+		return () => document.removeEventListener("selectionchange", update);
+	}, [containerRef]);
+
+	if (!pos) return null;
+
+	return (
+		<button
+			type="button"
+			style={{
+				position: "fixed",
+				top: pos.top,
+				left: pos.left,
+				transform: "translateX(-50%)",
+				zIndex: 50,
+			}}
+			className="flex items-center gap-1 px-2 py-1 bg-popover border border-border rounded-sm shadow-lg text-[12px] text-foreground/80 hover:text-foreground hover:bg-accent transition-colors"
+			onMouseDown={(e) => e.preventDefault()}
+			onClick={() => {
+				onComment();
+				setPos(null);
+			}}
+			aria-label="Add comment"
+			title="Add comment"
+		>
+			<MessageCircle className="w-3.5 h-3.5" />
+			<span>Comment</span>
+		</button>
+	);
+}