@tooee/view 0.12.0 → 0.13.0

package/src/markdown-links.ts

@@ -19,39 +19,53 @@ export const resolveMarkdownLink = function resolveMarkdownLink(
 ): LinkResolution {
   try {
     const decoded = decodeURIComponent(href);
+
     if (/[\p{Cc}\\]/u.test(decoded)) {
       return { status: "unsupported" };
     }
+
     const target = href.trim();
+
     if (!target || target.startsWith("//")) {
       return { status: "unsupported" };
     }
+
     const [rawPath] = target.split("#", 1);
+
     if (rawPath.includes("?")) {
       return { status: "unsupported" };
     }
+
     let path: string;
+
     if (/^[a-zA-Z][a-zA-Z\d+.-]*:/u.test(rawPath)) {
       // Check the authority before URL normalizes localhost into an empty host.
       if (!/^file:\/\/\//iu.test(rawPath)) {
         return { status: "unsupported" };
       }
+
       const url = new URL(rawPath);
+
       if (url.hostname || url.search) {
         return { status: "unsupported" };
       }
+
       path = fileURLToPath(url);
     } else {
       path = rawPath
         ? nodePath.resolve(baseDir, decodeURIComponent(rawPath))
         : (currentPath ?? baseDir);
     }
+
     const absolute = nodePath.resolve(path);
+
     try {
       const stat = statSync(absolute);
+
       if (stat.isFile()) {
         return { path: absolute, status: "file" };
       }
+
       return stat.isDirectory()
         ? { path: absolute, status: "directory" }
         : { status: "unsupported" };
@@ -82,8 +96,10 @@ const collect = (tokens: Token[], links: MarkdownLink[]): void => {
     }
   }
 };
+
 export const markdownLinks = function markdownLinks(line: string): MarkdownLink[] {
   const links: MarkdownLink[] = [];
   collect(Lexer.lexInline(line), links);
+
   return links;
 };

package/src/outline/markdown-outline.ts

@@ -25,11 +25,14 @@ export const markdownOutline = function markdownOutline(
 ): OutlineEntry[] {
   const headings = blocks.flatMap((block, row) => {
     const heading = headingToken(block);
+
     return heading === null
       ? []
       : [{ depth: heading.depth, row, text: getPlainText(heading.tokens).trim() }];
   });
+
   const minDepth = Math.min(...headings.map((heading) => heading.depth));
+
   return headings.map((heading) => ({ ...heading, level: heading.depth - minDepth }));
 };
 

package/src/outline/outline-panel.tsx

@@ -12,7 +12,9 @@ import type { OutlineEntry } from "./markdown-outline.js";
 import type { OutlineState } from "./use-outline.js";
 
 const OUTLINE_PANEL_ID = "outline";
+
 const INDENT = "  ";
+
 /** Columns the panel border and the list padding take from the panel width. */
 const OUTLINE_CHROME_WIDTH = 4;
 
@@ -29,6 +31,7 @@ export const outlineLabel = function outlineLabel(
   const label = `${INDENT.repeat(entry.level)}${current ? "▸ " : "  "}${entry.text}`;
   const room = Math.max(1, width - suffix.length);
   const cut = label.length > room ? `${label.slice(0, Math.max(0, room - 1))}…` : label;
+
   return `${cut}${suffix}`;
 };
 
@@ -49,18 +52,23 @@ const OutlineCommands = function OutlineCommands({
   const next = (): void => {
     outline.move(1);
   };
+
   const previous = (): void => {
     outline.move(-1);
   };
+
   const first = (): void => {
     outline.select(0);
   };
+
   const last = (): void => {
     outline.select(outline.entries.length - 1);
   };
+
   const jump = (): void => {
     outline.jump(outline.selectedIndex);
   };
+
   const commands: [hotkey: string, id: string, title: string, run: () => void][] = [
     ["j", "outline.down", "Next heading", next],
     ["down", "outline.down-arrow", "Next heading", next],
@@ -72,6 +80,7 @@ const OutlineCommands = function OutlineCommands({
     ["escape", "outline.focus-content", "Return to document", outline.focusContent],
     ["g o", "outline.close", "Close outline", outline.close],
   ];
+
   const selectedRow = (): number | undefined => outline.entries[outline.selectedIndex]?.row;
   useActions([
     ...commands.map(([hotkey, id, title, run]): ActionDefinition => ({
@@ -84,6 +93,7 @@ const OutlineCommands = function OutlineCommands({
     })),
     ...foldActionDefinitions(foldActions, selectedRow, "outline.fold", "No fold at heading"),
   ]);
+
   return null;
 };
 
@@ -113,6 +123,7 @@ const OutlineList = function OutlineList({ outline }: { outline: OutlineState })
       {outline.entries.map((entry, index): ReactNode => {
         const current = index === outline.currentIndex;
         const highlighted = outline.focused && index === outline.selectedIndex;
+
         return (
           <box
             key={entry.row}
@@ -152,10 +163,12 @@ export const OutlinePanel = function OutlinePanel({
   if (!outline.visible) {
     return null;
   }
+
   // The only panel asks for activation on a mouse-down inside it.
   const handleActivePanelChange = (): void => {
     outline.focus();
   };
+
   return (
     <PanelGroup
       activePanelId={outline.focused ? OUTLINE_PANEL_ID : null}

package/src/outline/use-outline.ts

@@ -11,10 +11,13 @@ import type { OutlineEntry } from "./markdown-outline.js";
 
 /** Outline width in columns, border included. */
 const OUTLINE_WIDTH = 32;
+
 /** The outline never takes more than this share of the terminal width. */
 const OUTLINE_MAX_SHARE = 0.4;
+
 /** Below this terminal width the outline is not shown. */
 export const OUTLINE_MIN_TERMINAL_WIDTH = 60;
+
 /**
  * Lines of the document kept above a heading after a jump. The heading lands
  * near the top of the view, with a little of the text before it for context.
@@ -26,6 +29,7 @@ export const outlineWidth = function outlineWidth(terminalWidth: number): number
   if (terminalWidth < OUTLINE_MIN_TERMINAL_WIDTH) {
     return 0;
   }
+
   return Math.min(OUTLINE_WIDTH, Math.floor(terminalWidth * OUTLINE_MAX_SHARE));
 };
 
@@ -85,6 +89,7 @@ export const useMarkdownOutline = function useMarkdownOutline({
   const { closedKeys, ranges, setClosedKeys, view } = folds;
   const { cursor, setCursor } = navigation;
   const visible = open && width > 0;
+
   const moveTo = useCallback(
     (index: number) => {
       setCursor(index);
@@ -92,10 +97,12 @@ export const useMarkdownOutline = function useMarkdownOutline({
     },
     [setCursor, revealRow]
   );
+
   const focused = visible && focusRequested;
   const sourceRow = cursor === null ? undefined : view.visibleToSource[cursor];
   const currentIndex = sourceRow === undefined ? -1 : outlineIndexAt(entries, sourceRow);
   const selectedIndex = focused ? Math.min(selected, entries.length - 1) : currentIndex;
+
   const closedRows = useMemo(
     () => new Set(ranges.filter((range) => closedKeys.has(range.key)).map((range) => range.start)),
     [ranges, closedKeys]
@@ -108,6 +115,7 @@ export const useMarkdownOutline = function useMarkdownOutline({
   useEffect(() => {
     const row = pendingRowRef.current;
     const index = row === null ? -1 : (view.sourceToVisible[row] ?? -1);
+
     if (index !== -1) {
       pendingRowRef.current = null;
       moveTo(index);
@@ -118,34 +126,46 @@ export const useMarkdownOutline = function useMarkdownOutline({
     setSelected(Math.max(currentIndex, 0));
     setFocusRequested(true);
   };
+
   const focusContent = () => {
     setFocusRequested(false);
   };
+
   const close = () => {
     setOpen(false);
     setFocusRequested(false);
   };
+
   const select = (index: number) => {
     setSelected(Math.max(0, Math.min(index, entries.length - 1)));
   };
+
   const move = (delta: number) => {
     select(selectedIndex + delta);
   };
+
   const jump = (index: number) => {
     const entry = entries[index];
     setFocusRequested(false);
+
     if (entry === undefined) {
       return;
     }
+
     const hiding = closedFoldsHiding(ranges, closedKeys, entry.row);
+
     if (hiding.length === 0) {
       moveTo(view.sourceToVisible[entry.row] ?? 0);
+
       return;
     }
+
     const next = new Set(closedKeys);
+
     for (const key of hiding) {
       next.delete(key);
     }
+
     pendingRowRef.current = entry.row;
     setClosedKeys(next);
   };
@@ -155,12 +175,16 @@ export const useMarkdownOutline = function useMarkdownOutline({
     handler: (ctx) => {
       if (width === 0) {
         ctx.toast?.toast({ level: "info", message: "The outline needs a wider terminal" });
+
         return;
       }
+
       if (open && focused) {
         close();
+
         return;
       }
+
       setOpen(true);
       focus();
     },

package/src/standalone-router.tsx

@@ -2,7 +2,6 @@ import path from "node:path";
 
 import { useChooseDialog } from "@tooee/choose";
 import { useCommand } from "@tooee/commands";
-import type { CommandContext } from "@tooee/commands";
 import {
   createRoute,
   createRouter,
@@ -22,6 +21,7 @@ import { runLinkHandlers } from "./link-handlers.js";
 import { markdownLinks } from "./markdown-links.js";
 import type { MarkdownLink } from "./markdown-links.js";
 import { getTextContent } from "./types.js";
+import type { MarkdownLinkActivateHandler } from "./types.js";
 import { View } from "./view.js";
 
 const documentParams: Codec<{ path?: string }> = {
@@ -30,12 +30,15 @@ const documentParams: Codec<{ path?: string }> = {
     if (typeof value !== "object" || value === null || Array.isArray(value)) {
       throw new TypeError("Expected document params");
     }
+
     if (!("path" in value) || value.path === undefined) {
       return {};
     }
+
     if (typeof value.path !== "string" || !path.isAbsolute(value.path)) {
       throw new TypeError("Expected an absolute document path");
     }
+
     /* oxlint-enable anti-slop/no-runtime-typeof */
     return { path: value.path };
   },
@@ -55,32 +58,45 @@ export const createStandaloneRouter = function createStandaloneRouter(
     const navigate = useNavigate();
     const { stack } = useRouter();
     const chooseLink = useChooseDialog<MarkdownLink>();
+
     const provider = useMemo(
       () =>
         documentPath === undefined ? options.contentProvider : createFileProvider(documentPath),
       [documentPath]
     );
-    const activate = (href: string, command: CommandContext): boolean => {
+
+    const activate: MarkdownLinkActivateHandler = (href, command) => {
+      if (options.onMarkdownLinkActivate) {
+        return options.onMarkdownLinkActivate(href, command);
+      }
+
       if (options.filePath === undefined) {
         command.toast?.toast({ level: "info", message: "Links need a source file" });
+
         return true;
       }
+
       const currentPath = path.resolve(documentPath ?? options.filePath);
+
       return runLinkHandlers(
         options.linkHandlers ?? [],
         { baseDir: path.dirname(currentPath), currentPath, href },
         { command, documentRoute, navigate }
       );
     };
+
     useCommand({
       handler: async (context) => {
         // Source positions are zero-based, unlike the displayed line numbers.
         const line = context.document?.activeAnchor?.source?.primary?.start.line;
         const content = context.view?.content;
+
         if (line === undefined || content === undefined) {
           return;
         }
+
         const links = markdownLinks(getTextContent(content).split("\n")[line] ?? "");
+
         // One link follows directly; several open a chooser so none is silently preferred.
         const link =
           links.length > 1
@@ -90,6 +106,7 @@ export const createStandaloneRouter = function createStandaloneRouter(
                 toItem: (item) => ({ description: item.href, text: item.text }),
               })
             : (links[0] ?? null);
+
         if (link !== null) {
           activate(link.href, context);
         }
@@ -100,6 +117,7 @@ export const createStandaloneRouter = function createStandaloneRouter(
       title: "Follow Markdown link",
       when: (context) => context.view?.format === "markdown",
     });
+
     return (
       <View
         key={`${stack.length}:${documentPath ?? ""}`}
@@ -112,14 +130,17 @@ export const createStandaloneRouter = function createStandaloneRouter(
       />
     );
   };
+
   const documentRoute = createRoute({
     component: DocumentScreen,
     id: "view.document",
     params: documentParams,
   });
+
   const router = createRouter({
     initial: { routeId: documentRoute.id },
     routes: [documentRoute],
   });
+
   return { documentRoute, router };
 };

package/src/types.ts

@@ -137,7 +137,9 @@ export interface ContentProvider {
 // === Compat aliases ===
 
 export type ViewContent = Content;
+
 export type ViewContentProvider = ContentProvider;
+
 export type { ColumnDef, TableRow } from "@tooee/renderers";
 
 // === Utilities ===
@@ -167,29 +169,38 @@ export const getTextContent = function getTextContent(content: AnyContent): stri
     case "markdown": {
       return content.markdown;
     }
+
     case "code": {
       return content.code;
     }
+
     case "diff": {
       return content.patch;
     }
+
     case "text": {
       return content.text;
     }
+
     case "image": {
       // oxlint-disable-next-line anti-slop/no-runtime-typeof -- ImageSource is OpenTUI's public string-or-binary union; only its string and URL variants have text content
       if (typeof content.src === "string") {
         return content.src;
       }
+
       return content.src instanceof URL ? content.src.href : "";
     }
+
     case "table": {
       const headers = content.columns.map((column) => column.header ?? column.key);
+
       const rowLines = content.rows.map((row) =>
         content.columns.map((column) => formatTableCell(row[column.key])).join("\t")
       );
+
       return [headers.join("\t"), ...rowLines].join("\n");
     }
+
     default: {
       return "";
     }

package/src/view.tsx

@@ -50,6 +50,7 @@ export const View = function View({
   const setMarkSet = useCallback((set: MarkSet) => {
     setUserMarks((prev) => {
       const filtered = prev.filter((s) => s.namespace !== set.namespace);
+
       return [...filtered, set];
     });
   }, []);
@@ -109,19 +110,24 @@ export const View = function View({
         />
       );
     }
+
     case "code":
     case "text": {
       return <CodeSubview content={content} {...shared} />;
     }
+
     case "image": {
       return <ImageSubview content={content} {...shared} />;
     }
+
     case "table": {
       return <TableSubview content={content} {...shared} />;
     }
+
     case "diff": {
       return <DiffSubview content={content} {...shared} />;
     }
+
     default: {
       return null;
     }