pi-studio 0.5.53 → 0.5.54

package/CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to `pi-studio` are documented here.
 
 ## [Unreleased]
 
+## [0.5.54] — 2026-04-13
+
+### Fixed
+- Markdown editor-preview comment mapping now keeps standalone markdown image blocks aligned with rendered preview figures, preventing later preview comment targets from drifting after figures.
+- Rendered Markdown fenced code blocks now once again support preview-side text-selection comments.
+
 ## [0.5.53] — 2026-04-10
 
 ### Added

package/client/studio-annotation-helpers.js

@@ -187,7 +187,9 @@
 
     if (index >= text.length || text[index] !== "]" || text[index + 1] !== "(") return null;
 
+    const label = text.slice(startIndex + 1, index);
     index += 2;
+    const destinationStart = index;
     let parenDepth = 0;
     while (index < text.length) {
       const ch = text[index];
@@ -210,6 +212,8 @@
             type: "literal",
             raw: text.slice(startIndex, index + 1),
             end: index + 1,
+            label: label,
+            destination: text.slice(destinationStart, index),
           };
         }
         parenDepth -= 1;
@@ -223,6 +227,68 @@
     return null;
   }
 
+  function readMarkdownAttributeBlockAt(source, startIndex) {
+    const text = String(source || "");
+    if (text[startIndex] !== "{") return null;
+
+    let depth = 0;
+    for (let index = startIndex; index < text.length; index += 1) {
+      const ch = text[index];
+      if (ch === "\\") {
+        index += 1;
+        continue;
+      }
+      if (ch === "\n") return null;
+      if (ch === "{") {
+        depth += 1;
+        continue;
+      }
+      if (ch === "}") {
+        depth -= 1;
+        if (depth === 0) {
+          return {
+            raw: text.slice(startIndex, index + 1),
+            end: index + 1,
+          };
+        }
+      }
+    }
+
+    return null;
+  }
+
+  function extractStandaloneMarkdownImageCaptionText(text) {
+    const source = String(text || "").replace(/\r\n/g, "\n").trim();
+    if (!source) return null;
+
+    const captions = [];
+    let index = 0;
+    let sawImage = false;
+
+    while (index < source.length) {
+      while (index < source.length && /\s/.test(source[index])) index += 1;
+      if (index >= source.length) break;
+      if (source[index] !== "!") return null;
+
+      const imageToken = readInlineMarkdownLinkAt(source, index + 1);
+      if (!imageToken) return null;
+
+      sawImage = true;
+      captions.push(normalizePreviewAnnotationLabel(imageToken.label || ""));
+      index = imageToken.end;
+
+      while (index < source.length && /\s/.test(source[index])) index += 1;
+      if (index < source.length && source[index] === "{") {
+        const attributeBlock = readMarkdownAttributeBlockAt(source, index);
+        if (!attributeBlock) return null;
+        index = attributeBlock.end;
+      }
+    }
+
+    if (!sawImage) return null;
+    return captions.filter(Boolean).join(" ").trim();
+  }
+
   function readDelimitedPreviewTokenAt(source, startIndex, open, close, allowNewlines) {
     const text = String(source || "");
     if (text.slice(startIndex, startIndex + open.length) !== open) return null;
@@ -596,6 +662,7 @@
     collectInlineAnnotationMarkers: collectInlineAnnotationMarkers,
     hasAnnotationMarkers: hasAnnotationMarkers,
     normalizePreviewAnnotationLabel: normalizePreviewAnnotationLabel,
+    extractStandaloneMarkdownImageCaptionText: extractStandaloneMarkdownImageCaptionText,
     prepareMarkdownForPandocPreview: prepareMarkdownForPandocPreview,
     readInlineAnnotationMarkerAt: readInlineAnnotationMarkerAt,
     renderPreviewAnnotationHtml: renderPreviewAnnotationHtml,

package/client/studio-client.js

@@ -5309,6 +5309,7 @@
           || kind === "blockquote"
           || kind === "list"
           || kind === "math"
+          || kind === "code"
           || kind === "code-line"
           || kind === "diff-line"
           || kind === "text-line";
@@ -6422,7 +6423,7 @@
 
       function buildPreviewSelectionDisplayMap(blockText, kind) {
         const body = buildPreviewSelectionSourceBody(blockText, kind);
-        if (kind === "code-line" || kind === "diff-line" || kind === "text-line") {
+        if (kind === "code" || kind === "code-line" || kind === "diff-line" || kind === "text-line") {
           return buildLiteralPreviewDisplayMap(body.text, body.rawOffsets);
         }
         const inlineMap = buildPreviewInlineDisplayMap(body.text, body.rawOffsets);
@@ -6694,6 +6695,15 @@
           };
         }
 
+        function getChunkText(startLineIndex, endLineIndex) {
+          const safeStartLine = Math.max(0, Math.min(startLineIndex, Math.max(0, lines.length - 1)));
+          const safeEndLine = Math.max(safeStartLine, Math.min(endLineIndex, Math.max(0, lines.length - 1)));
+          return source.slice(
+            lineOffsets[safeStartLine] || 0,
+            (lineOffsets[safeEndLine] || 0) + getLine(safeEndLine).length,
+          );
+        }
+
         const blocks = [];
         let index = 0;
 
@@ -6826,7 +6836,11 @@
             }
             endParagraph = i;
           }
-          blocks.push(makeBlock("paragraph", index, endParagraph));
+          const paragraphText = getChunkText(index, endParagraph);
+          const markdownFigureCaption = annotationHelpers && typeof annotationHelpers.extractStandaloneMarkdownImageCaptionText === "function"
+            ? annotationHelpers.extractStandaloneMarkdownImageCaptionText(paragraphText)
+            : null;
+          blocks.push(makeBlock(markdownFigureCaption != null ? "figure" : "paragraph", index, endParagraph));
           index = endParagraph + 1;
         }
 
@@ -7145,6 +7159,42 @@
         });
       }
 
+      function isPreviewMediaOnlyParagraphElement(element) {
+        if (!element || !(element instanceof Element)) return false;
+        if ((element.tagName ? element.tagName.toUpperCase() : "") !== "P") return false;
+
+        let hasMedia = false;
+        for (const childNode of Array.from(element.childNodes || [])) {
+          if (!childNode) continue;
+          if (childNode.nodeType === Node.TEXT_NODE) {
+            if (normalizeVisiblePreviewText(childNode.nodeValue || "")) {
+              return false;
+            }
+            continue;
+          }
+          if (!(childNode instanceof Element)) continue;
+
+          const childTag = childNode.tagName ? childNode.tagName.toUpperCase() : "";
+          if (childTag === "BR") continue;
+          if (childTag === "IMG" || childTag === "EMBED" || childTag === "OBJECT" || childTag === "IFRAME" || childTag === "CANVAS") {
+            hasMedia = true;
+            continue;
+          }
+
+          const nestedMedia = typeof childNode.querySelector === "function"
+            ? childNode.querySelector("img, embed, object, iframe, canvas")
+            : null;
+          if (nestedMedia && !buildNormalizedPreviewSearchText(childNode)) {
+            hasMedia = true;
+            continue;
+          }
+
+          return false;
+        }
+
+        return hasMedia;
+      }
+
       function getPreviewCommentTargetKind(element) {
         if (!element || !(element instanceof Element)) return "";
         if (element.classList && element.classList.contains("studio-mathjax-fallback-display")) {
@@ -7155,12 +7205,12 @@
         }
         const tag = element.tagName ? element.tagName.toUpperCase() : "";
         if (/^H[1-6]$/.test(tag)) return "heading";
-        if (tag === "P") return "paragraph";
+        if (tag === "P") return isPreviewMediaOnlyParagraphElement(element) ? "figure" : "paragraph";
         if (tag === "FIGURE") {
           if (element.classList && element.classList.contains("studio-algorithm-block")) {
             return "algorithm";
           }
-          return editorLanguage === "latex" ? "figure" : "";
+          return "figure";
         }
         if (tag === "DIV" && element.classList) {
           if (element.classList.contains("studio-display-equation")) {
@@ -7267,6 +7317,14 @@
           const match = blockText.trim().match(/^\\(newpage|pagebreak|clearpage)/i);
           return match ? String(match[1] || "").toLowerCase() : "page-break";
         }
+        if (sourceBlock.kind === "figure") {
+          const figureCaption = annotationHelpers && typeof annotationHelpers.extractStandaloneMarkdownImageCaptionText === "function"
+            ? annotationHelpers.extractStandaloneMarkdownImageCaptionText(blockText)
+            : null;
+          if (figureCaption != null) {
+            return normalizeVisiblePreviewText(figureCaption);
+          }
+        }
         if (supportsPreviewSelectionCommentsForBlockKind(sourceBlock.kind)) {
           return normalizeVisiblePreviewText(buildPreviewSelectionDisplayMap(blockText, sourceBlock.kind).text);
         }
@@ -7287,6 +7345,23 @@
         return normalizeVisiblePreviewText(blockText);
       }
 
+      function getPreviewFigureSearchText(element) {
+        if (!element || !(element instanceof Element)) return "";
+        const visibleText = buildNormalizedPreviewSearchText(element);
+        if (visibleText) return visibleText;
+
+        const imageNodes = (element.tagName ? element.tagName.toUpperCase() : "") === "IMG"
+          ? [element]
+          : (typeof element.querySelectorAll === "function" ? Array.from(element.querySelectorAll("img[alt], img[title]")) : []);
+        const altText = imageNodes
+          .filter((imageEl) => imageEl instanceof Element)
+          .map((imageEl) => imageEl.getAttribute("alt") || imageEl.getAttribute("title") || "")
+          .map((text) => normalizeVisiblePreviewText(text))
+          .filter(Boolean)
+          .join(" ");
+        return altText;
+      }
+
       function getNormalizedPreviewCommentTargetText(targetEntry) {
         if (!targetEntry) return "";
         if (typeof targetEntry.normalizedText === "string") return targetEntry.normalizedText;
@@ -7295,6 +7370,10 @@
           targetEntry.normalizedText = String(element && element.getAttribute ? (element.getAttribute("data-page-break-kind") || "page-break") : "page-break").toLowerCase();
           return targetEntry.normalizedText;
         }
+        if (targetEntry.kind === "figure") {
+          targetEntry.normalizedText = getPreviewFigureSearchText(targetEntry.element);
+          return targetEntry.normalizedText;
+        }
         targetEntry.normalizedText = buildNormalizedPreviewSearchText(targetEntry.element);
         return targetEntry.normalizedText;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-studio",
-  "version": "0.5.53",
+  "version": "0.5.54",
   "description": "Two-pane browser workspace for pi with prompt/response editing, annotations, critiques, prompt/response history, and live Markdown/LaTeX/code preview",
   "type": "module",
   "license": "MIT",