@avocadostudio-ai/preview-adapter 0.1.0 → 0.2.1

package/dist/bridge-functions.d.ts

@@ -7,6 +7,14 @@
  * specific transport (postMessage vs direct).
  */
 export declare function markdownToHtml(md: string): string;
+/**
+ * Carry the editor-mode parameters from the current URL onto `href`.
+ *
+ * A parameter the link sets itself always wins — the link is the more specific
+ * intent. Everything else about `href` is preserved, so this is safe to apply
+ * to any same-origin destination.
+ */
+export declare function withPreviewParams(href: string, currentSearch: string): string;
 export declare function findBlockNode(blockId: string): HTMLElement | null;
 export declare function findEditableNode(parent: HTMLElement, editablePath: string): HTMLElement | null;
 /**

package/dist/bridge-functions.js

@@ -6,58 +6,133 @@
  * communicate back to the editor through injectable callbacks, decoupled from any
  * specific transport (postMessage vs direct).
  */
-import { isImagePath } from "@avocadostudio-ai/shared";
+import { isImagePath, parseInline, parseRichTextBlocks, normalizeRichTextBody, resolveRichTextHeadingLevel } from "@avocadostudio-ai/shared";
 // ---------------------------------------------------------------------------
-// Markdown → HTML helper (mirrors _shared.tsx renderRichTextContent)
+// Markdown → HTML for the live-draft overlay
 // ---------------------------------------------------------------------------
-function inlineToHtml(text) {
-    return text
-        .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
-        .replace(/\*(.+?)\*/g, "<em>$1</em>")
-        .replace(/\[(.+?)\]\((.+?)\)/g, '<a href="$2">$1</a>');
+//
+// The grammar comes from @avocadostudio-ai/shared, the same parser the block
+// renderers use. Two things are specific to this surface and stay here:
+//
+//   1. we escape `& < >` ourselves — React does that for the renderers, but
+//      this output is written straight into `innerHTML`. The escaping happens
+//      per token, on the way out. Doing it up front on the whole string (as
+//      this did originally) turns `>` into `&gt;` before the parser sees it,
+//      so a blockquote can never match;
+//   2. a single-line value returns bare inline HTML with no `<p>` wrapper,
+//      because it is written into an element that already exists.
+//
+// Note this only ever runs on *plain-text* fields: `applyLiveDraftFields`
+// hands anything structurally rich back to React (see `isRichEditableNode`).
+function escapeHtml(text) {
+    return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+/** Attribute values additionally need the quote that delimits them. */
+function escapeAttribute(value) {
+    return escapeHtml(value).replace(/"/g, "&quot;");
+}
+function inlineToHtml(tokens) {
+    return tokens
+        .map((token) => {
+        switch (token.type) {
+            case "strong":
+                return `<strong>${escapeHtml(token.text)}</strong>`;
+            case "em":
+                return `<em>${escapeHtml(token.text)}</em>`;
+            case "strike":
+                return `<s>${escapeHtml(token.text)}</s>`;
+            case "code":
+                return `<code>${escapeHtml(token.text)}</code>`;
+            case "link":
+                return `<a href="${escapeAttribute(token.href)}">${escapeHtml(token.text)}</a>`;
+            case "break":
+                return "<br>";
+            default:
+                return escapeHtml(token.text);
+        }
+    })
+        .join("");
 }
 export function markdownToHtml(md) {
-    const escaped = md
-        .replace(/&/g, "&amp;")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;");
-    const normalized = escaped
-        .replace(/\r\n?/g, "\n")
-        .replace(/([.!?])([A-Z])/g, "$1 $2")
-        .replace(/\n{3,}/g, "\n\n")
-        .trim();
+    const normalized = normalizeRichTextBody(md);
     if (!normalized.includes("\n")) {
-        return inlineToHtml(normalized);
+        return inlineToHtml(parseInline(normalized));
     }
-    const blocks = normalized.split(/\n\s*\n+/).filter(Boolean);
-    return blocks
-        .map((block) => {
-        const lines = block.split(/\n+/).map((l) => l.trim()).filter(Boolean);
-        if (lines.length === 0)
-            return "";
-        const hMatch = /^(#{1,6})\s+(.+)$/.exec(lines[0]);
-        if (hMatch) {
-            let html = `<h3>${inlineToHtml(hMatch[2].trim())}</h3>`;
-            const rest = lines.slice(1).join(" ").trim();
-            if (rest)
-                html += `<p>${inlineToHtml(rest)}</p>`;
-            return html;
-        }
-        const ulItems = lines.map((l) => /^\s*[-*+•]\s+(.+)$/.exec(l)?.[1]?.trim() ?? null);
-        if (ulItems.every((i) => i !== null)) {
-            return `<ul>${ulItems.map((i) => `<li>${inlineToHtml(i)}</li>`).join("")}</ul>`;
-        }
-        const olItems = lines.map((l) => /^\s*\d+[.)]\s+(.+)$/.exec(l)?.[1]?.trim() ?? null);
-        if (olItems.every((i) => i !== null)) {
-            return `<ol>${olItems.map((i) => `<li>${inlineToHtml(i)}</li>`).join("")}</ol>`;
-        }
-        return `<p>${inlineToHtml(block)}</p>`;
+    return parseRichTextBlocks(normalized).map(blockToHtml).join("");
+}
+function itemsToHtml(items) {
+    return items
+        .map((item) => {
+        const nested = item.children
+            ? item.children.type === "ordered-list"
+                ? `<ol>${itemsToHtml(item.children.items)}</ol>`
+                : `<ul>${itemsToHtml(item.children.items)}</ul>`
+            : "";
+        return `<li>${inlineToHtml(item.inline)}${nested}</li>`;
     })
         .join("");
 }
+function blockToHtml(block) {
+    switch (block.type) {
+        case "heading": {
+            const level = resolveRichTextHeadingLevel(block.level);
+            const heading = `<h${level}>${inlineToHtml(block.inline)}</h${level}>`;
+            return block.trailing ? `${heading}<p>${inlineToHtml(block.trailing)}</p>` : heading;
+        }
+        case "unordered-list":
+            return `<ul>${itemsToHtml(block.items)}</ul>`;
+        case "ordered-list":
+            return `<ol>${itemsToHtml(block.items)}</ol>`;
+        case "blockquote":
+            return `<blockquote>${block.children.map(blockToHtml).join("")}</blockquote>`;
+        case "code": {
+            const cls = block.language ? ` class="language-${escapeAttribute(block.language)}"` : "";
+            return `<pre><code${cls}>${escapeHtml(block.code)}</code></pre>`;
+        }
+        case "rule":
+            return "<hr>";
+        default:
+            return `<p>${inlineToHtml(block.inline)}</p>`;
+    }
+}
 // ---------------------------------------------------------------------------
 // Pure DOM queries
 // ---------------------------------------------------------------------------
+/**
+ * The query parameters that put the site into editor mode.
+ *
+ * `__editor=1` is the one the site's middleware rewrites onto its preview
+ * route; the rest identify the session and authorise reading unpublished
+ * content. They ride on the URL the editor frames, and a navigation *inside*
+ * the preview has to carry them forward or the very next document is the
+ * ordinary public page — published content, no overlay, and a hard 404 for any
+ * page that has never been published.
+ */
+const PREVIEW_PARAM_KEYS = ["__editor", "session", "siteId", "editorOrigin", "secret"];
+/**
+ * Carry the editor-mode parameters from the current URL onto `href`.
+ *
+ * A parameter the link sets itself always wins — the link is the more specific
+ * intent. Everything else about `href` is preserved, so this is safe to apply
+ * to any same-origin destination.
+ */
+export function withPreviewParams(href, currentSearch) {
+    try {
+        const base = typeof window !== "undefined" ? window.location.href : "http://localhost/";
+        const url = new URL(href, base);
+        const current = new URLSearchParams(currentSearch);
+        for (const key of PREVIEW_PARAM_KEYS) {
+            const value = current.get(key);
+            if (value !== null && !url.searchParams.has(key))
+                url.searchParams.set(key, value);
+        }
+        return url.pathname + url.search + url.hash;
+    }
+    catch {
+        // Malformed href — better to navigate somewhere than to throw mid-click.
+        return href;
+    }
+}
 export function findBlockNode(blockId) {
     if (!blockId)
         return null;
@@ -1271,7 +1346,9 @@ export function createBridgeFunctions(state, callbacks, config) {
                     if (url.origin === window.location.origin) {
                         event.preventDefault();
                         event.stopPropagation();
-                        navigate(url.pathname + url.search + url.hash);
+                        // Without this the click leaves editor mode: the site's own links
+                        // carry no `__editor=1`, so the next document is the public page.
+                        navigate(withPreviewParams(url.pathname + url.search + url.hash, window.location.search));
                         return;
                     }
                 }

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { PreviewBridge } from "./preview-bridge.tsx";
 export { PreviewBridgeCore } from "./preview-bridge-core.tsx";
 export type { PreviewBridgeConfig, PreviewBridgeCoreProps } from "./preview-bridge-core.tsx";
 export { getPreviewWrapperProps } from "./selectable.ts";
-export { createBridgeFunctions, createBridgeState, findBlockNode, findEditableNode, parseListItemPath, supportsInlineEditablePath, readNodeText, placeCaretAtEnd, orderedBlockNodes, blockOrderIndex, computeMoveAfter, computeInsertBefore, groupListItemNodes, commonItemRoot, markdownToHtml, setNestedLabelsVisibility, clearChildFocus, clearListItemSelection, removeOverlayControls, clearAllHighlights, showSkeleton, removeSkeletons, ensureBlockBadges, applyAiFieldLoading, cleanupOverlayElements, } from "./bridge-functions.ts";
+export { createBridgeFunctions, createBridgeState, findBlockNode, findEditableNode, parseListItemPath, supportsInlineEditablePath, readNodeText, placeCaretAtEnd, orderedBlockNodes, blockOrderIndex, computeMoveAfter, computeInsertBefore, groupListItemNodes, commonItemRoot, markdownToHtml, withPreviewParams, setNestedLabelsVisibility, clearChildFocus, clearListItemSelection, removeOverlayControls, clearAllHighlights, showSkeleton, removeSkeletons, ensureBlockBadges, applyAiFieldLoading, cleanupOverlayElements, } from "./bridge-functions.ts";
 export type { BridgeCallbacks, BridgeState, BridgeFunctions } from "./bridge-functions.ts";
 export { LivePreviewProvider, useLivePreviewBlocks, useLivePreviewBridgeApi, } from "./live-preview-store.tsx";
 export type { LivePreviewPage, LivePreviewBridgeApi } from "./live-preview-store.tsx";

package/dist/index.js

@@ -1,5 +1,5 @@
 export { PreviewBridge } from "./preview-bridge.js";
 export { PreviewBridgeCore } from "./preview-bridge-core.js";
 export { getPreviewWrapperProps } from "./selectable.js";
-export { createBridgeFunctions, createBridgeState, findBlockNode, findEditableNode, parseListItemPath, supportsInlineEditablePath, readNodeText, placeCaretAtEnd, orderedBlockNodes, blockOrderIndex, computeMoveAfter, computeInsertBefore, groupListItemNodes, commonItemRoot, markdownToHtml, setNestedLabelsVisibility, clearChildFocus, clearListItemSelection, removeOverlayControls, clearAllHighlights, showSkeleton, removeSkeletons, ensureBlockBadges, applyAiFieldLoading, cleanupOverlayElements, } from "./bridge-functions.js";
+export { createBridgeFunctions, createBridgeState, findBlockNode, findEditableNode, parseListItemPath, supportsInlineEditablePath, readNodeText, placeCaretAtEnd, orderedBlockNodes, blockOrderIndex, computeMoveAfter, computeInsertBefore, groupListItemNodes, commonItemRoot, markdownToHtml, withPreviewParams, setNestedLabelsVisibility, clearChildFocus, clearListItemSelection, removeOverlayControls, clearAllHighlights, showSkeleton, removeSkeletons, ensureBlockBadges, applyAiFieldLoading, cleanupOverlayElements, } from "./bridge-functions.js";
 export { LivePreviewProvider, useLivePreviewBlocks, useLivePreviewBridgeApi, } from "./live-preview-store.js";

package/dist/preview-bridge-core.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
-import { createBridgeFunctions, createBridgeState, findBlockNode, parseListItemPath, ensureBlockBadges, setNestedLabelsVisibility, showSkeleton, removeSkeletons, clearChildFocus, clearAllHighlights, clearListItemSelection, applyAiFieldLoading, cleanupOverlayElements, } from "./bridge-functions.js";
+import { createBridgeFunctions, createBridgeState, findBlockNode, parseListItemPath, ensureBlockBadges, setNestedLabelsVisibility, showSkeleton, removeSkeletons, clearChildFocus, clearAllHighlights, clearListItemSelection, applyAiFieldLoading, cleanupOverlayElements, withPreviewParams, } from "./bridge-functions.js";
 export function PreviewBridgeCore(props) {
     // When running standalone (no editor origin) or not embedded in an iframe, render nothing.
     if (!props.editorOrigin || typeof window !== "undefined" && window.parent === window)
@@ -154,7 +154,7 @@ function PreviewBridgeCoreInner({ slug, editorOrigin, navigate, refresh, pathnam
                 const navigateTo = typeof msg.payload.navigateTo === "string" ? msg.payload.navigateTo.trim() : "";
                 if (navigateTo) {
                     const href = navigateTo.startsWith("/") ? navigateTo : `/${navigateTo}`;
-                    navigate(`${href}${window.location.search}`);
+                    navigate(withPreviewParams(href, window.location.search));
                 }
                 else {
                     bridge.smoothRefresh();

package/package.json

@@ -1,18 +1,20 @@
 {
   "name": "@avocadostudio-ai/preview-adapter",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     "./package.json": "./package.json",
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "default": "./dist/index.js"
     },
     "./core": {
+      "types": "./dist/preview-bridge-core.d.ts",
       "import": "./dist/preview-bridge-core.js",
-      "types": "./dist/preview-bridge-core.d.ts"
+      "default": "./dist/preview-bridge-core.js"
     },
     "./styles.css": "./src/styles.css"
   },
@@ -30,7 +32,7 @@
     "src/styles.css"
   ],
   "dependencies": {
-    "@avocadostudio-ai/shared": "0.1.0"
+    "@avocadostudio-ai/shared": "0.2.1"
   },
   "peerDependencies": {
     "next": ">=15.0.0",
@@ -43,6 +45,7 @@
   },
   "devDependencies": {
     "@types/react": "^19.0.10",
+    "tsx": "^4.21.0",
     "typescript": "^5.7.3"
   },
   "description": "Preview bridge and editor overlay for Avocado Studio live preview",
@@ -54,6 +57,6 @@
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
     "typecheck": "tsc --noEmit",
-    "test": "NODE_ENV=test tsx --test src/**/*.test.ts"
+    "test": "NODE_ENV=test node ../../scripts/run-tests.mjs"
   }
 }