@mrsf/markdown-it-mrsf 0.1.0 → 0.3.0

package/dist/style.css

@@ -108,6 +108,48 @@
   vertical-align: baseline;
 }
 
+.mrsf-gutter-add {
+  position: absolute;
+  right: -18px;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0;
+  pointer-events: none;
+  border: 1px solid var(--mrsf-tooltip-border);
+  background: var(--mrsf-tooltip-bg);
+  color: var(--mrsf-tooltip-fg);
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  font-size: 12px;
+  line-height: 18px;
+  text-align: center;
+  cursor: pointer;
+  transition: opacity 0.12s ease, transform 0.12s ease;
+}
+
+.mrsf-tooltip-anchor:hover > .mrsf-gutter-add,
+.mrsf-tooltip-anchor:focus-within > .mrsf-gutter-add {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(-50%) scale(1.02);
+}
+
+/* Add-only anchors need hoverable area even without a badge */
+.mrsf-tooltip-anchor.mrsf-gutter-add-only {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+}
+
+/* Reveal gutter add when hovering the whole line */
+.mrsf-line-hover-target:hover .mrsf-gutter-add,
+.mrsf-line-hover-target:focus-within .mrsf-gutter-add {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(-50%) scale(1.02);
+}
+
 /* Gutter position: right (default) — float the badge to the right */
 .mrsf-tooltip-anchor.mrsf-gutter-right {
   float: right;
@@ -131,6 +173,16 @@
   left: 4px;
 }
 
+.mrsf-tooltip-anchor.mrsf-gutter-left > .mrsf-gutter-add {
+  left: -18px;
+  right: auto;
+}
+
+.mrsf-tooltip-anchor.mrsf-gutter-right > .mrsf-gutter-add {
+  right: -18px;
+  left: auto;
+}
+
 .mrsf-tooltip-anchor.mrsf-gutter-left .mrsf-badge {
   margin-left: 0;
 }
@@ -339,6 +391,15 @@
   display: flex;
 }
 
+.mrsf-tooltip-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+  margin-top: 8px;
+  padding-top: 6px;
+  border-top: 1px solid var(--mrsf-tooltip-border);
+}
+
 .mrsf-action-btn {
   font-size: 11px;
   padding: 2px 8px;
@@ -351,6 +412,30 @@
   transition: background 0.15s ease;
 }
 
+.mrsf-action-btn.mrsf-action-danger {
+  color: #d13438;
+  border-color: rgba(209, 52, 56, 0.7);
+}
+
 .mrsf-action-btn:hover {
   background: rgba(127, 127, 127, 0.2);
 }
+
+.mrsf-add-inline-button {
+  position: absolute;
+  z-index: 1200;
+  display: none;
+  font-size: 12px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  border: 1px solid var(--mrsf-tooltip-border);
+  background: var(--mrsf-tooltip-bg);
+  color: var(--mrsf-tooltip-fg);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+  font-family: var(--mrsf-font-family);
+}
+
+.mrsf-add-inline-button:hover {
+  background: rgba(127, 127, 127, 0.2);
+}

package/dist/types.d.ts

@@ -1,8 +1,10 @@
 /**
- * MRSF markdown-it plugin — type definitions.
+ * Shared type definitions for MRSF rendering plugins.
+ *
+ * These types are used by both @mrsf/markdown-it-mrsf and @mrsf/rehype-mrsf.
  */
 import type { MrsfDocument } from "@mrsf/cli";
-/** Options for the MRSF markdown-it plugin. */
+/** Base options shared by all MRSF rendering plugins. */
 export interface MrsfPluginOptions {
     /**
      * Path to the Markdown document on disk.
@@ -81,4 +83,6 @@ export interface CommentThread {
 }
 /** Comments grouped by their anchored source line. */
 export type LineMap = Map<number, CommentThread[]>;
+/** A function that loads sidecar data from plugin options. */
+export type CommentLoader = (options: MrsfPluginOptions) => MrsfDocument | null;
 //# sourceMappingURL=types.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrsf/markdown-it-mrsf",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "markdown-it plugin for rendering Sidemark/MRSF (Markdown Review Sidecar Format) review comments",
   "type": "module",
   "main": "./dist/index.js",
@@ -28,12 +28,12 @@
     "node": ">=18"
   },
   "scripts": {
-    "build": "tsc && cp src/style.css dist/style.css",
+    "build": "node ../sync-types.mjs && node esbuild.config.mjs",
     "dev": "tsc --watch",
     "test": "vitest run",
     "test:watch": "vitest",
     "lint": "tsc --noEmit",
-    "prepublishOnly": "cp ../LICENSE . && npm run build && npm test",
+    "prepublishOnly": "cp ../../LICENSE . && npm run build && npm test",
     "postpublish": "rm -f LICENSE"
   },
   "keywords": [
@@ -44,32 +44,39 @@
     "sidecar",
     "mrsf",
     "sidemark",
-    "comments"
+    "comments",
+    "annotation",
+    "highlight",
+    "tooltip",
+    "rendering"
   ],
   "license": "MIT",
   "author": "Wictor Wilén (https://github.com/wictorwilen)",
-  "homepage": "https://github.com/wictorwilen/MRSF/tree/main/markdown-it#readme",
+  "homepage": "https://github.com/wictorwilen/MRSF/tree/main/plugins/markdown-it#readme",
   "bugs": {
     "url": "https://github.com/wictorwilen/MRSF/issues"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/wictorwilen/MRSF.git",
-    "directory": "markdown-it"
+    "directory": "plugins/markdown-it"
   },
   "files": [
     "dist/**/*.js",
+    "dist/**/*.js.map",
     "dist/**/*.d.ts",
     "dist/style.css",
     "README.md",
     "LICENSE"
   ],
   "dependencies": {
-    "@mrsf/cli": "file:../cli"
+    "@mrsf/cli": "^0.3.0"
   },
   "devDependencies": {
+    "@mrsf/plugin-shared": "file:../shared",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^22.13.10",
+    "esbuild": "^0.27.3",
     "markdown-it": "^14.1.0",
     "typescript": "^5.8.2",
     "vitest": "^3.0.9"

package/dist/rules/core.js

@@ -1,149 +0,0 @@
-/**
- * MRSF markdown-it plugin — core rule.
- *
- * Walks the parsed token stream and injects `mrsf_badge` tokens
- * at lines that have comments, and wraps `selected_text` matches
- * with `mrsf_highlight_open`/`close` tokens (with tooltip metadata).
- */
-/**
- * Find the token index for a given 1-based source line.
- * markdown-it tokens use `token.map = [startLine, endLine]` (0-based).
- */
-function findTokenIndexForLine(tokens, line) {
-    const line0 = line - 1; // convert to 0-based
-    for (let i = 0; i < tokens.length; i++) {
-        const map = tokens[i].map;
-        if (map && map[0] <= line0 && line0 < map[1]) {
-            return i;
-        }
-    }
-    return -1;
-}
-/**
- * Wrap occurrences of `text` inside inline token children with
- * highlight open/close tokens. Stores thread data on the tokens
- * so the renderer can produce an inline tooltip.
- */
-function highlightInlineText(token, thread, interactive, Token) {
-    if (!token.children)
-        return false;
-    const text = thread.comment.selected_text;
-    if (!text)
-        return false;
-    const trimmed = text.trim();
-    if (!trimmed)
-        return false;
-    for (let i = 0; i < token.children.length; i++) {
-        const child = token.children[i];
-        if (child.type !== "text")
-            continue;
-        const idx = child.content.indexOf(trimmed);
-        if (idx === -1)
-            continue;
-        // Split the text token into: before + highlight_open + matched + highlight_close + after
-        const newTokens = [];
-        // Text before match
-        if (idx > 0) {
-            const before = new Token("text", "", 0);
-            before.content = child.content.slice(0, idx);
-            newTokens.push(before);
-        }
-        // Highlight open — carries thread metadata for inline tooltip
-        const open = new Token("mrsf_highlight_open", "mark", 1);
-        open.attrSet("class", "mrsf-highlight");
-        open.attrSet("data-mrsf-comment-id", thread.comment.id);
-        open.meta = { thread };
-        newTokens.push(open);
-        // Matched text
-        const matched = new Token("text", "", 0);
-        matched.content = trimmed;
-        newTokens.push(matched);
-        // Highlight close — carries thread metadata for inline tooltip
-        const close = new Token("mrsf_highlight_close", "mark", -1);
-        close.meta = { thread, interactive };
-        newTokens.push(close);
-        // Text after match
-        if (idx + trimmed.length < child.content.length) {
-            const after = new Token("text", "", 0);
-            after.content = child.content.slice(idx + trimmed.length);
-            newTokens.push(after);
-        }
-        // Replace the original child with our new tokens
-        token.children.splice(i, 1, ...newTokens);
-        return true;
-    }
-    return false;
-}
-/**
- * Install the MRSF core rule on a markdown-it instance.
- */
-export function installCoreRule(md, lineMap, options) {
-    const { interactive, gutterPosition, gutterForInline, inlineHighlights } = options;
-    md.core.ruler.push("mrsf_inject", (state) => {
-        const tokens = state.tokens;
-        const TokenCtor = state.Token;
-        // Track which lines we've already processed (to avoid double-injection
-        // when multiple tokens share the same source line).
-        const processed = new Set();
-        // We iterate backwards so that inserting tokens doesn't shift indices
-        // for tokens we haven't visited yet.
-        for (let i = tokens.length - 1; i >= 0; i--) {
-            const token = tokens[i];
-            const map = token.map;
-            if (!map)
-                continue;
-            // Skip inline tokens — they share the same map as their parent block.
-            // We must process the parent block (paragraph_open, heading_open, etc.)
-            // so the badge and class land on the correct rendered element.
-            if (token.type === "inline")
-                continue;
-            // Check each line in this token's range for comments
-            for (let line0 = map[0]; line0 < map[1]; line0++) {
-                const line = line0 + 1; // 1-based
-                if (processed.has(line))
-                    continue;
-                const threads = lineMap.get(line);
-                if (!threads || threads.length === 0)
-                    continue;
-                processed.add(line);
-                // Add line-highlight class to the block token
-                const existingClass = token.attrGet("class") || "";
-                token.attrSet("class", existingClass
-                    ? `${existingClass} mrsf-line-highlight`
-                    : "mrsf-line-highlight");
-                token.attrSet("data-mrsf-line", String(line));
-                // Determine whether all threads on this line have inline highlights
-                const allHaveInline = inlineHighlights &&
-                    threads.every((t) => !!t.comment.selected_text);
-                // Inject badge unless gutterForInline is false AND all threads are inline-highlighted
-                const showBadge = gutterForInline || !allHaveInline || !inlineHighlights;
-                if (showBadge) {
-                    const badgeToken = new TokenCtor("mrsf_badge", "", 0);
-                    badgeToken.meta = { line, threads, interactive, gutterPosition };
-                    tokens.splice(i + 1, 0, badgeToken);
-                }
-                // Highlight selected_text in the following inline token
-                if (inlineHighlights) {
-                    const offset = showBadge ? 2 : 1;
-                    const inlineAfter = tokens[i + offset];
-                    if (inlineAfter && inlineAfter.type === "inline") {
-                        for (const thread of threads) {
-                            if (thread.comment.selected_text) {
-                                highlightInlineText(inlineAfter, thread, interactive, TokenCtor);
-                            }
-                        }
-                    }
-                }
-            }
-        }
-        // Wrap the entire output in a gutter container when using left gutter
-        if (gutterPosition === "left" && processed.size > 0) {
-            const openToken = new TokenCtor("mrsf_gutter_open", "div", 1);
-            openToken.attrSet("class", "mrsf-gutter-container");
-            tokens.unshift(openToken);
-            const closeToken = new TokenCtor("mrsf_gutter_close", "div", -1);
-            tokens.push(closeToken);
-        }
-    });
-}
-//# sourceMappingURL=core.js.map

package/dist/rules/renderer.js

@@ -1,159 +0,0 @@
-/**
- * MRSF markdown-it plugin — renderer rules.
- *
- * Adds custom renderer rules for MRSF tokens:
- *   - mrsf_badge: renders badge + tooltip HTML (gutter)
- *   - mrsf_highlight_open/close: renders <mark> wrappers with inline tooltips
- */
-function escapeHtml(str) {
-    return str
-        .replace(/&/g, "&amp;")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;")
-        .replace(/"/g, "&quot;");
-}
-function formatTime(iso) {
-    if (!iso)
-        return "";
-    try {
-        const d = new Date(iso);
-        return d.toLocaleDateString(undefined, {
-            year: "numeric",
-            month: "short",
-            day: "numeric",
-        });
-    }
-    catch {
-        return "";
-    }
-}
-function renderCommentHtml(comment, isReply, interactive) {
-    const resolvedClass = comment.resolved ? " mrsf-resolved" : "";
-    const replyClass = isReply ? " mrsf-reply" : "";
-    let html = `<span class="mrsf-comment${resolvedClass}${replyClass}" data-mrsf-comment-id="${escapeHtml(comment.id)}">`;
-    // Header
-    html += `<span class="mrsf-comment-header">`;
-    html += `<span class="mrsf-author">${escapeHtml(comment.author)}</span>`;
-    if (comment.timestamp) {
-        html += `<span class="mrsf-date">${escapeHtml(formatTime(comment.timestamp))}</span>`;
-    }
-    if (comment.severity) {
-        html += `<span class="mrsf-severity mrsf-severity-${escapeHtml(comment.severity)}">${escapeHtml(comment.severity)}</span>`;
-    }
-    if (comment.type) {
-        html += `<span class="mrsf-type">${escapeHtml(comment.type)}</span>`;
-    }
-    if (comment.resolved) {
-        html += `<span class="mrsf-resolved-badge">✓ resolved</span>`;
-    }
-    html += `</span>`;
-    // Selected text quote
-    if (comment.selected_text) {
-        html += `<span class="mrsf-selected-text">${escapeHtml(comment.selected_text)}</span>`;
-    }
-    // Body
-    html += `<span class="mrsf-comment-body">${escapeHtml(comment.text)}</span>`;
-    // Action buttons (interactive mode)
-    if (interactive) {
-        const line = comment.line != null ? String(comment.line) : "";
-        html += `<span class="mrsf-actions">`;
-        if (comment.resolved) {
-            html += `<button class="mrsf-action-btn" data-mrsf-action="unresolve" data-mrsf-comment-id="${escapeHtml(comment.id)}" data-mrsf-line="${line}">Unresolve</button>`;
-        }
-        else {
-            html += `<button class="mrsf-action-btn" data-mrsf-action="resolve" data-mrsf-comment-id="${escapeHtml(comment.id)}" data-mrsf-line="${line}">Resolve</button>`;
-        }
-        html += `<button class="mrsf-action-btn" data-mrsf-action="reply" data-mrsf-comment-id="${escapeHtml(comment.id)}" data-mrsf-line="${line}">Reply</button>`;
-        html += `<button class="mrsf-action-btn" data-mrsf-action="edit" data-mrsf-comment-id="${escapeHtml(comment.id)}" data-mrsf-line="${line}">Edit</button>`;
-        html += `</span>`;
-    }
-    html += `</span>`;
-    return html;
-}
-function renderThreadHtml(thread, interactive) {
-    let html = `<span class="mrsf-thread">`;
-    html += renderCommentHtml(thread.comment, false, interactive);
-    if (thread.replies.length > 0) {
-        html += `<span class="mrsf-replies">`;
-        for (const reply of thread.replies) {
-            html += renderCommentHtml(reply, true, interactive);
-        }
-        html += `</span>`;
-    }
-    html += `</span>`;
-    return html;
-}
-/**
- * Install MRSF renderer rules on a markdown-it instance.
- */
-export function installRendererRules(md) {
-    // Badge + tooltip (gutter)
-    md.renderer.rules["mrsf_badge"] = (tokens, idx) => {
-        const { line, threads, interactive, gutterPosition } = tokens[idx].meta;
-        const total = threads.reduce((n, t) => n + 1 + t.replies.length, 0);
-        const allResolved = threads.every((t) => t.comment.resolved);
-        const highestSeverity = threads.reduce((sev, t) => {
-            if (t.comment.severity === "high" || sev === "high")
-                return "high";
-            if (t.comment.severity === "medium" || sev === "medium")
-                return "medium";
-            if (t.comment.severity === "low" || sev === "low")
-                return "low";
-            return sev;
-        }, null);
-        const resolvedClass = allResolved ? " mrsf-badge-resolved" : "";
-        const severityClass = highestSeverity === "high" || highestSeverity === "medium"
-            ? ` mrsf-badge-severity-${highestSeverity}`
-            : "";
-        const positionClass = ` mrsf-gutter-${gutterPosition}`;
-        const icon = allResolved ? "✓" : "💬";
-        let html = `<span class="mrsf-tooltip-anchor${positionClass}">`;
-        // Badge
-        html += `<span class="mrsf-badge${resolvedClass}${severityClass}" data-mrsf-line="${line}" data-mrsf-action="navigate" data-mrsf-comment-id="${escapeHtml(threads[0].comment.id)}" tabindex="0">${icon} ${total}</span>`;
-        // Tooltip
-        html += `<span class="mrsf-tooltip" data-mrsf-line="${line}">`;
-        for (const thread of threads) {
-            html += renderThreadHtml(thread, interactive);
-        }
-        html += `</span>`;
-        html += `</span>`;
-        return html;
-    };
-    // Highlight open — wraps in tooltip-anchor for inline hover (feature D)
-    md.renderer.rules["mrsf_highlight_open"] = (tokens, idx) => {
-        const token = tokens[idx];
-        const cls = token.attrGet("class") || "mrsf-highlight";
-        const commentId = token.attrGet("data-mrsf-comment-id") || "";
-        const thread = token.meta?.thread;
-        let html = "";
-        if (thread) {
-            html += `<span class="mrsf-tooltip-anchor mrsf-inline-anchor">`;
-        }
-        html += `<mark class="${escapeHtml(cls)}" data-mrsf-comment-id="${escapeHtml(commentId)}" tabindex="0">`;
-        return html;
-    };
-    // Highlight close — adds inline tooltip and closes tooltip-anchor
-    md.renderer.rules["mrsf_highlight_close"] = (tokens, idx) => {
-        const token = tokens[idx];
-        const meta = token.meta;
-        let html = "</mark>";
-        if (meta?.thread) {
-            const thread = meta.thread;
-            const interactive = meta.interactive;
-            html += `<span class="mrsf-tooltip mrsf-inline-tooltip">`;
-            html += renderThreadHtml(thread, interactive);
-            html += `</span>`;
-            html += `</span>`;
-        }
-        return html;
-    };
-    // Gutter container wrapper (left gutter mode)
-    md.renderer.rules["mrsf_gutter_open"] = (tokens, idx) => {
-        const cls = tokens[idx].attrGet("class") || "mrsf-gutter-container";
-        return `<div class="${escapeHtml(cls)}">`;
-    };
-    md.renderer.rules["mrsf_gutter_close"] = () => {
-        return `</div>`;
-    };
-}
-//# sourceMappingURL=renderer.js.map

package/dist/shared.js

@@ -1,86 +0,0 @@
-/**
- * Shared logic for @mrsf/markdown-it-mrsf.
- *
- * Contains the plugin factory, comment transformation, and grouping logic
- * used by both the Node.js (index.ts) and browser (browser.ts) entry points.
- */
-import { installCoreRule } from "./rules/core.js";
-import { installRendererRules } from "./rules/renderer.js";
-/**
- * Convert an MrsfDocument into a slim comment array.
- */
-export function toSlimComments(doc) {
-    return doc.comments.map((c) => ({
-        id: c.id,
-        author: c.author || "Unknown",
-        text: c.text || "",
-        line: c.line ?? null,
-        end_line: c.end_line ?? null,
-        start_column: c.start_column ?? null,
-        end_column: c.end_column ?? null,
-        selected_text: c.selected_text || null,
-        resolved: !!c.resolved,
-        reply_to: c.reply_to || null,
-        severity: c.severity || null,
-        type: c.type || null,
-        timestamp: c.timestamp || null,
-    }));
-}
-/**
- * Group comments by line number, threading replies under parents.
- */
-export function groupByLine(comments) {
-    const rootComments = comments.filter((c) => !c.reply_to && c.line != null);
-    const replies = comments.filter((c) => c.reply_to);
-    const replyMap = new Map();
-    for (const r of replies) {
-        const list = replyMap.get(r.reply_to) || [];
-        list.push(r);
-        replyMap.set(r.reply_to, list);
-    }
-    const lineMap = new Map();
-    for (const c of rootComments) {
-        const line = c.line;
-        const threads = lineMap.get(line) || [];
-        threads.push({
-            comment: c,
-            replies: replyMap.get(c.id) || [],
-        });
-        lineMap.set(line, threads);
-    }
-    return lineMap;
-}
-/**
- * Create a markdown-it plugin function with the given comment loader.
- *
- * @param loader - Function that resolves sidecar data from plugin options
- * @returns A markdown-it plugin function
- */
-export function createMrsfPlugin(loader) {
-    return function mrsfPlugin(md, options = {}) {
-        const showResolved = options.showResolved ?? true;
-        const interactive = options.interactive ?? false;
-        const gutterPosition = options.gutterPosition ?? "right";
-        const gutterForInline = options.gutterForInline ?? true;
-        const inlineHighlights = options.inlineHighlights ?? true;
-        const doc = loader(options);
-        if (!doc || !doc.comments || doc.comments.length === 0) {
-            return;
-        }
-        let comments = toSlimComments(doc);
-        if (!showResolved) {
-            comments = comments.filter((c) => !c.resolved);
-        }
-        if (comments.length === 0)
-            return;
-        const lineMap = groupByLine(comments);
-        installCoreRule(md, lineMap, {
-            interactive,
-            gutterPosition,
-            gutterForInline,
-            inlineHighlights,
-        });
-        installRendererRules(md);
-    };
-}
-//# sourceMappingURL=shared.js.map

package/dist/types.js

@@ -1,5 +0,0 @@
-/**
- * MRSF markdown-it plugin — type definitions.
- */
-export {};
-//# sourceMappingURL=types.js.map