@ampless/runtime 1.0.0-alpha.55 → 1.0.0-alpha.57

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Post, MediaMetadata, AmplessPlugin, ContentFieldRenderer, PluginPublicRenderContext, TiptapNodeMarkdownAdapters, Config, ThemeModule, ThemeManifest, PluginPackageManifest } from 'ampless';
+import { Post, MediaMetadata, AmplessPlugin, ContentFieldRenderer, PluginPublicRenderContext, TiptapNodeHtmlAdapters, TiptapNodeMarkdownAdapters, Config, ThemeModule, ThemeManifest, PluginPackageManifest } from 'ampless';
 export { Config, Post, ThemeManifest } from 'ampless';
 import { Metadata } from 'next';
 import { ReactNode } from 'react';
@@ -165,6 +165,21 @@ interface ContentFieldRegistry {
             kind: 'markdown-url';
         }>;
     }>;
+    /**
+     * Plugins that declared `htmlPlaceholder` on their `kind: 'tiptap'`
+     * entry, keyed by the **lowercased** `flagAttr` (htmlparser2 lowercases
+     * HTML attribute names while parsing, so the public html walker looks
+     * up `attribs[flagAttr.toLowerCase()]` and compares against these keys
+     * case-insensitively). Used by `renderHtmlNode` to expand canonical
+     * placeholder divs in `format: 'html'` bodies into the plugin's
+     * existing tiptap renderer output.
+     */
+    htmlPlaceholder: ReadonlyMap<string, {
+        plugin: AmplessPlugin;
+        renderer: Extract<ContentFieldRenderer, {
+            kind: 'tiptap';
+        }>;
+    }>;
 }
 /**
  * Build a `ContentFieldRegistry` from a list of plugins. Eagerly errors
@@ -210,8 +225,17 @@ declare function renderBodyHtmlString(post: Post): string;
  * markdown without editing) can still hand us a raw HTML string
  * here. In that case, return it as-is rather than walking it as a
  * malformed tiptap node and producing empty output.
+ *
+ * `opts.nodeAdapters` lets callers supply per-nodeType serialisers —
+ * the admin post-form passes the registry populated by
+ * `installAdminTiptapNodeHtml` so that plugin-registered embed nodes
+ * (e.g. `amplessYoutube`) are serialised to placeholder div strings
+ * instead of falling through with empty children. Callers that omit
+ * `opts` get the original behaviour unchanged.
  */
-declare function tiptapToHtml(doc: unknown): string;
+declare function tiptapToHtml(doc: unknown, opts?: {
+    nodeAdapters?: TiptapNodeHtmlAdapters;
+}): string;
 /** Convert markdown to HTML using marked + GFM. */
 declare function markdownToHtml(md: string): string;
 /**

package/dist/index.js

@@ -254,6 +254,7 @@ import {
   createElement
 } from "react";
 import { marked } from "marked";
+import { parseDocument, ElementType } from "htmlparser2";
 function escape(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
@@ -264,7 +265,12 @@ function textAlignStyle(attrs) {
   }
   return "";
 }
-function renderTiptapString(node) {
+function renderTiptapString(node, opts) {
+  const adapter = opts?.nodeAdapters?.[node.type];
+  if (adapter) {
+    const out = adapter(node);
+    if (typeof out === "string") return out;
+  }
   if (node.type === "text") {
     let html = escape(node.text ?? "");
     for (const mark of node.marks ?? []) {
@@ -281,7 +287,7 @@ function renderTiptapString(node) {
     }
     return html;
   }
-  const children = (node.content ?? []).map(renderTiptapString).join("");
+  const children = (node.content ?? []).map((c) => renderTiptapString(c, opts)).join("");
   switch (node.type) {
     case "doc":
       return children;
@@ -350,6 +356,7 @@ function renderMarkdownString(md) {
 }
 function buildContentFieldRegistry(plugins) {
   const tiptap = /* @__PURE__ */ new Map();
+  const htmlPlaceholder = /* @__PURE__ */ new Map();
   const seenMarkdownPatterns = /* @__PURE__ */ new Set();
   const markdownUrl = [];
   for (const plugin of plugins) {
@@ -363,6 +370,15 @@ function buildContentFieldRegistry(plugins) {
           );
         }
         tiptap.set(field.nodeType, { plugin, renderer: field });
+        if (field.htmlPlaceholder) {
+          const flagAttr = field.htmlPlaceholder.flagAttr.toLowerCase();
+          if (htmlPlaceholder.has(flagAttr)) {
+            throw new Error(
+              `[ampless contentFields] duplicate htmlPlaceholder flagAttr "${flagAttr}" \u2014 already registered by another plugin. Each flagAttr may be claimed by at most one plugin.`
+            );
+          }
+          htmlPlaceholder.set(flagAttr, { plugin, renderer: field });
+        }
       } else if (field.kind === "markdown-url") {
         const key = field.pattern.source;
         if (seenMarkdownPatterns.has(key)) {
@@ -375,7 +391,7 @@ function buildContentFieldRegistry(plugins) {
       }
     }
   }
-  return { tiptap, markdownUrl };
+  return { tiptap, markdownUrl, htmlPlaceholder };
 }
 function htmlPassthrough(html) {
   return createElement("span", { dangerouslySetInnerHTML: { __html: html } });
@@ -575,9 +591,90 @@ function extractSingleUrl(para) {
   }
   return null;
 }
+function isParsedElement(node) {
+  return ElementType.isTag(node);
+}
+function renderHtmlNode(html, opts) {
+  const registry = opts.contentFields?.htmlPlaceholder;
+  if (!registry || registry.size === 0) {
+    return htmlPassthroughBlock(html);
+  }
+  const lower = html.toLowerCase();
+  let anyFlagPresent = false;
+  for (const flagAttr of registry.keys()) {
+    if (lower.includes(flagAttr)) {
+      anyFlagPresent = true;
+      break;
+    }
+  }
+  if (!anyFlagPresent) {
+    return htmlPassthroughBlock(html);
+  }
+  let doc;
+  try {
+    doc = parseDocument(html, {
+      withStartIndices: true,
+      withEndIndices: true
+    });
+  } catch (err) {
+    console.warn(
+      `[ampless renderBody] htmlparser2 failed to parse a format:'html' body; falling back to raw passthrough: ${err instanceof Error ? err.message : String(err)}`
+    );
+    return htmlPassthroughBlock(html);
+  }
+  const children = [];
+  let chunk = 0;
+  let cursor = 0;
+  const flushRawUntil = (end) => {
+    if (end <= cursor) return;
+    const slice = html.slice(cursor, end);
+    children.push(htmlPassthroughBlock(slice, `html-raw-${chunk++}`));
+    cursor = end;
+  };
+  for (const node of doc.children) {
+    if (!isParsedElement(node)) continue;
+    if (node.startIndex == null || node.endIndex == null) continue;
+    const reg = matchHtmlPlaceholder(node.attribs, registry);
+    if (!reg) continue;
+    const start = node.startIndex;
+    const endExclusive = node.endIndex + 1;
+    flushRawUntil(start);
+    const placeholderSlice = html.slice(start, endExclusive);
+    const ctx = opts.ctxForPlugin?.(reg.plugin);
+    if (!ctx) {
+      children.push(htmlPassthroughBlock(placeholderSlice, `html-raw-${chunk++}`));
+      cursor = endExclusive;
+      continue;
+    }
+    try {
+      const renderNode = {
+        type: reg.renderer.nodeType,
+        attrs: reg.renderer.htmlPlaceholder.attrsFromElement(node.attribs)
+      };
+      const out = reg.renderer.render(renderNode, ctx);
+      children.push(createElement(Fragment, { key: `html-embed-${start}` }, out));
+    } catch (err) {
+      console.warn(
+        `[ampless renderBody] plugin "${reg.plugin.instanceId ?? reg.plugin.name}" threw inside contentFields tiptap renderer for nodeType "${reg.renderer.nodeType}": ${err instanceof Error ? err.message : String(err)}`
+      );
+      children.push(htmlPassthroughBlock(placeholderSlice, `html-raw-${chunk++}`));
+    }
+    cursor = endExclusive;
+  }
+  flushRawUntil(html.length);
+  return createElement(Fragment, null, ...children);
+}
+function matchHtmlPlaceholder(attribs, registry) {
+  for (const flagAttr of registry.keys()) {
+    if (Object.prototype.hasOwnProperty.call(attribs, flagAttr)) {
+      return registry.get(flagAttr) ?? null;
+    }
+  }
+  return null;
+}
 function renderBody(post, opts = {}) {
   if (post.format === "html") {
-    return htmlPassthroughBlock(String(post.body));
+    return renderHtmlNode(String(post.body), opts);
   }
   if (post.format === "markdown") {
     return renderMarkdownNode(String(post.body), opts);
@@ -599,9 +696,9 @@ function renderBodyHtmlString(post) {
   }
   return "";
 }
-function tiptapToHtml(doc) {
+function tiptapToHtml(doc, opts) {
   if (typeof doc === "string") return doc;
-  return renderTiptapString(doc);
+  return renderTiptapString(doc, opts);
 }
 function markdownToHtml(md) {
   return renderMarkdownString(md);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ampless/runtime",
-  "version": "1.0.0-alpha.55",
+  "version": "1.0.0-alpha.57",
   "description": "Public-side runtime for ampless: post fetching, theme dispatch, middleware, public route handlers",
   "license": "MIT",
   "type": "module",
@@ -46,12 +46,13 @@
     "@radix-ui/react-slot": "^1.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "htmlparser2": "^10.1.0",
     "lucide-react": "^1.16.0",
     "marked": "^18.0.4",
     "sanitize-html": "^2.17.4",
     "tailwind-merge": "^3.6.0",
-    "@ampless/plugin-og-image": "0.2.0-alpha.46",
-    "ampless": "1.0.0-alpha.46"
+    "@ampless/plugin-og-image": "0.2.0-alpha.48",
+    "ampless": "1.0.0-alpha.48"
   },
   "peerDependencies": {
     "@aws-amplify/adapter-nextjs": "^1",