@ampless/runtime 1.0.0-alpha.56 → 1.0.0-alpha.58

package/dist/index.d.ts

@@ -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

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;");
 }
@@ -355,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) {
@@ -368,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)) {
@@ -380,7 +391,7 @@ function buildContentFieldRegistry(plugins) {
       }
     }
   }
-  return { tiptap, markdownUrl };
+  return { tiptap, markdownUrl, htmlPlaceholder };
 }
 function htmlPassthrough(html) {
   return createElement("span", { dangerouslySetInnerHTML: { __html: html } });
@@ -580,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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ampless/runtime",
-  "version": "1.0.0-alpha.56",
+  "version": "1.0.0-alpha.58",
   "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.47",
-    "ampless": "1.0.0-alpha.47"
+    "@ampless/plugin-og-image": "0.2.0-alpha.49",
+    "ampless": "1.0.0-alpha.49"
   },
   "peerDependencies": {
     "@aws-amplify/adapter-nextjs": "^1",